/* ============================================================
   SchoolApp — Harmonisation NG des pages articles / fonctionnalites
   Charge APRES tailwind-compiled.css et le style inline de chaque page.
   Remappe la palette Tailwind generique vers la palette de marque NG
   (source : index.html, design system M3 + neomorphisme).
   Aucun changement de contenu ni de structure : surcharge visuelle pure.
   ============================================================ */

:root {
  --ng-ink: #1F1644;
  --ng-ink-soft: #3B3470;
  --ng-blue: #007CFF;
  --ng-blue-deep: #006FE6;
  --ng-canvas: #E5EBF6;
  --ng-canvas-deep: #DCE3F1;
  --ng-surface-hi: #F7F9FE;
  --ng-text-secondary: #4A4470;
  --ng-text-muted: #5E597D;
  --ng-success: #0E8A3E;
  --ng-error: #C62828;
  --ng-grad-blue: linear-gradient(145deg, #2E96FF, #006FE6);
}

/* ---- Base : typo et fond de page ---- */
html { overflow-x: clip; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  color: var(--ng-ink);
  /* Meme comportement que la home NG : les micro-depassements de padding ne creent pas de scrollbar */
  overflow-x: clip;
}
/* Le body des articles porte la classe bg-white : on la neutralise au profit du canvas NG
   (specificite element+classe pour passer devant la regle .bg-white ci-dessous) */
body.bg-white {
  background-color: var(--ng-canvas) !important;
  background-image:
    radial-gradient(1200px 600px at 75% -5%, rgba(144,216,255,0.35), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(191,234,255,0.25), transparent 55%);
}

/* ---- Header sticky : verre depoli NG au lieu du blanc plat ---- */
header.sticky {
  background: rgba(237,241,250,0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
  box-shadow: 0 14px 34px -28px rgba(31,22,68,0.36) !important;
  border-bottom: 1px solid rgba(255,255,255,0.55);
}

/* ---- Textes : gris Tailwind vers encres de marque ---- */
.text-gray-900, .text-gray-800 { color: var(--ng-ink) !important; }
.text-gray-700 { color: var(--ng-ink-soft) !important; }
.text-gray-600 { color: var(--ng-text-secondary) !important; }
.text-gray-500 { color: var(--ng-text-muted) !important; }

/* ---- Bleus : Tailwind blue-* vers bleu de marque ---- */
.text-blue-600 { color: var(--ng-blue) !important; }
.text-blue-700, .text-blue-800 { color: var(--ng-blue-deep) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: var(--ng-blue) !important; }
.bg-blue-600 {
  background-color: var(--ng-blue) !important;
  background-image: var(--ng-grad-blue) !important;
  box-shadow: 0 10px 30px -6px rgba(0,124,255,0.45) !important;
}
.hover\:bg-blue-700:hover {
  background-color: var(--ng-blue-deep) !important;
  background-image: linear-gradient(145deg, #278BFF, #0063CF) !important;
}
.bg-blue-50 { background-color: #E3F1FF !important; }
.bg-blue-100 { background-color: #D2E9FF !important; }
.border-blue-100, .border-blue-200 { border-color: rgba(0,124,255,0.20) !important; }

/* ---- Surfaces : blanc plat vers surfaces NG ---- */
.bg-white { background-color: var(--ng-surface-hi) !important; }
.bg-gray-50 { background-color: var(--ng-canvas-deep) !important; }
.bg-gray-100 { background-color: var(--ng-canvas-deep) !important; }
.border-gray-100, .border-gray-200 { border-color: rgba(31,22,68,0.08) !important; }

/* ---- Ombres plates vers ombres neomorphiques douces ---- */
.shadow-sm { box-shadow: 4px 4px 9px rgba(31,22,68,0.10), -4px -4px 9px rgba(255,255,255,0.85) !important; }
.shadow, .shadow-md, .shadow-lg { box-shadow: 7px 7px 18px rgba(31,22,68,0.12), -7px -7px 16px rgba(255,255,255,0.90) !important; }
.shadow-xl, .hover\:shadow-xl:hover, .hover\:shadow-lg:hover {
  box-shadow: 14px 14px 36px rgba(31,22,68,0.15), -12px -12px 30px rgba(255,255,255,0.92) !important;
}

/* ---- Etats semantiques alignes sur les roles M3 de la home ---- */
.text-green-600 { color: var(--ng-success) !important; }
.text-green-700 { color: #0C7A37 !important; }
.bg-green-100 { background-color: #DCF2E4 !important; }
.text-red-500, .text-red-600 { color: var(--ng-error) !important; }
.text-red-700 { color: #A82222 !important; }
.bg-red-100 { background-color: #F8DEDE !important; }
.text-amber-600, .text-yellow-600 { color: #C97A00 !important; }

/* ---- Liens bruts dans le corps d'article ---- */
article a:not([class]), main a:not([class]) { color: var(--ng-blue); }

/* ---- Quick-nav de fonctionnalites.html : sticky sous le header NG + offset des ancres ----
   (la classe arbitraire Tailwind top-[72px] n'a jamais ete compilee : sans top, sticky est inoperant) */
.top-\[72px\] { top: 86px; }
section[id] { scroll-margin-top: 156px; }

/* ---- Harmonisation NG niveau 1 des heros et cadres visuels des pages articles ---- */
/* Hero Tailwind sky -> canvas NG avec halos (meme fond que la home) */
.gradient-bg {
  background-color: var(--ng-canvas) !important;
  background-image:
    radial-gradient(900px 420px at 75% -5%, rgba(144,216,255,0.38), transparent 60%),
    radial-gradient(700px 380px at 0% 45%, rgba(191,234,255,0.28), transparent 55%) !important;
}
/* Panneaux d'illustration des modules (degrades pastel Tailwind) -> creux neomorphique NG */
[class*="bg-gradient-to-br"] {
  background-image: none !important;
  background-color: var(--ng-canvas-deep) !important;
  box-shadow: inset 4px 4px 9px rgba(31,22,68,0.10), inset -4px -4px 9px rgba(255,255,255,0.85);
}
/* Jaunes Tailwind -> role warning M3 */
.bg-yellow-100 { background-color: #F6ECD9 !important; }
.text-yellow-600, .text-yellow-700 { color: #C97A00 !important; }

/* ============================================================
   Header et footer NG communs aux pages articles
   (markup injecte a la place des header/footer d'origine)
   ============================================================ */
.ng-header { position: sticky; top: 0; z-index: 50; padding: 10px 0; }
.ng-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.ng-nav-shell {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 56px; padding: 6px 10px 6px 14px; border-radius: 9999px;
  background: rgba(237,241,250,0.60);
  -webkit-backdrop-filter: blur(18px) saturate(1.45); backdrop-filter: blur(18px) saturate(1.45);
  border: 1px solid rgba(255,255,255,0.50);
  box-shadow: 0 14px 34px -28px rgba(31,22,68,0.36), inset 0 1px 0 rgba(255,255,255,0.56);
}
.ng-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
/* Logo officiel NG dans le header (remplace l'ancien symbole dessine + mot-symbole texte) */
.ng-brand img, .ng-brand-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
.ng-brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px;
  background: var(--ng-grad-blue);
  box-shadow: 0 6px 14px -3px rgba(0,124,255,0.55), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 5px rgba(0,60,140,0.4);
}
.ng-wordmark { font-size: 19px; font-weight: 700; letter-spacing: 0; color: var(--ng-ink); white-space: nowrap; }
.ng-wordmark .s-app {
  color: #fff; background: var(--ng-grad-blue); padding: 1px 6px; border-radius: 7px; margin-left: 2px; font-size: 16px;
  box-shadow: 0 3px 8px -2px rgba(0,124,255,0.5);
}
.ng-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 9999px; color: var(--ng-blue); background: rgba(237,241,250,0.42);
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow: 4px 4px 9px rgba(31,22,68,0.10), -4px -4px 9px rgba(255,255,255,0.85);
  transition: color .2s, background-color .2s;
}
.ng-whatsapp:hover { color: #fff; background: var(--ng-grad-blue); }
.ng-whatsapp svg { width: 22px; height: 22px; display: block; }
.ng-nav { display: flex; align-items: center; gap: 4px; }
.ng-nav a { padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--ng-text-secondary); border-radius: 9999px; text-decoration: none; transition: color .2s; white-space: nowrap; }
.ng-nav a:hover { color: var(--ng-ink); }
/* Sous le seuil desktop : la nav passe en 2e ligne scrollable dans la pilule (pas de drawer JS sur les articles) */
@media (max-width: 1023.98px) {
  .ng-nav-shell { flex-wrap: wrap; border-radius: 26px; }
  .ng-nav { order: 4; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 2px; scrollbar-width: none; }
  .ng-nav::-webkit-scrollbar { display: none; }
}
.ng-cta {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 44px; padding: 9px 20px; border-radius: 9999px;
  color: #fff !important; background-color: var(--ng-blue); background-image: var(--ng-grad-blue);
  font-weight: 600; font-size: 14px; text-decoration: none;
  box-shadow: 0 10px 30px -6px rgba(0,124,255,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .2s, box-shadow .2s;
}
.ng-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -6px rgba(0,124,255,0.6), inset 0 1px 0 rgba(255,255,255,0.4); }

/* ---- Footer sur fond fonce : le detache nettement du contenu de la page,
       identique au traitement de la home NG ---- */
.ng-footer {
  padding: 56px 0 32px;
  background: linear-gradient(180deg, #241A54 0%, #1A1340 62%, #140F32 100%);
  color: rgba(255,255,255,0.74);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.ng-footer h3 { color: #fff !important; }
.ng-footer a { color: rgba(255,255,255,0.74) !important; transition: color .2s; }
.ng-footer a:hover { color: #fff !important; }
.ng-footer .ng-tagline,
.ng-footer .ng-footer-contact li { color: rgba(255,255,255,0.74) !important; }
.ng-footer-bottom { border-top-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.56) !important; }
.ng-footer-bottom a { color: rgba(255,255,255,0.56) !important; }
.ng-footer-bottom a:hover { color: #fff !important; }
/* Cibles tactiles des liens de liste sur mobile (18px -> ~30px) */
@media (max-width: 599px) {
  .ng-footer li a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
  .ng-footer ul { gap: 4px; }
}
.ng-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .ng-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ng-footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr 1.2fr; } }
.ng-footer h3 { font-size: 14px; font-weight: 600; color: var(--ng-ink); margin: 0 0 14px; }
.ng-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ng-footer a { color: var(--ng-text-secondary); font-size: 14px; text-decoration: none; }
.ng-footer a:hover { color: var(--ng-blue); }
/* Logo vertical avec signature : il lui faut de la hauteur pour rester lisible */
.ng-footer-brand img { height: 112px; width: auto; display: block; margin-bottom: 16px; }
.ng-tagline { font-size: 14px; line-height: 1.55; color: var(--ng-text-secondary); max-width: 300px; margin: 0 0 18px; }
.ng-footer-contact li { display: flex; gap: 8px; font-size: 14px; color: var(--ng-text-secondary); }
.ng-footer-bottom {
  max-width: 1240px; margin: 36px auto 0; padding: 22px 16px 0;
  border-top: 1px solid rgba(31,22,68,0.10);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 12px; color: var(--ng-text-muted);
}
.ng-footer-bottom a { color: var(--ng-text-muted); font-size: 12px; }
.ng-footer-bottom a:hover { color: var(--ng-blue); }

/* ============================================================
   Articles : icônes Lucide en remplacement de Font Awesome
   ------------------------------------------------------------
   Portée volontairement limitée à .ng-article. fonctionnalites.html
   dimensionne déjà ses icônes par des règles dédiées (.fx-chip svg,
   .fx-btn svg, etc.) et ne doit pas être touchée.

   Font Awesome héritait de la taille du texte parent, alors que le
   subset Lucide génère du 24x24 fixe. Les dimensions en em restituent
   ce comportement et rendent à nouveau opérantes les classes Tailwind
   text-sm, text-xl et text-[6px] déjà présentes dans les articles.
   ============================================================ */
/* flex-shrink:0 est indispensable : la majorité des icônes sont dans des
   conteneurs flex, où un SVG dimensionné en em se fait comprimer, ce que le
   glyphe Font Awesome ne subissait pas. */
.ng-article svg.lucide {
  width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0;
}

/* Puce décorative de 6px : le "circle" de Lucide est un contour, pas une
   pastille pleine. background:currentColor conserve l'effet des classes
   de couleur Tailwind déjà en place (text-amber-400, text-blue-400...). */
.ng-article .ng-puce {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; flex: 0 0 auto;
}

/* Pastille numérotée : Lucide n'a pas d'équivalent de fa-circle-1/2/3. */
.ng-article .ng-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2563EB; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1; flex: 0 0 auto;
}