/* ==========================================================================
   FRANCO-NORD — COMPOSANTS DE LA PAGE D'ACCUEIL
   --------------------------------------------------------------------------
   Fichier    : assets/css/fn-theme.css
   Dépend de  : fn-tokens.css (variables --fn-*)
   Compatible : skin Porto du Conseil (DNN 10, Bootstrap 5.3.7) — vérifié
                avec le banc d'essai tools/porto-cscfn-shim.css ; aussi
                compatible Bootstrap 4. Aucune classe Porto ou Bootstrap
                n'est redéfinie ; tout est préfixé .fn-. Voir § 01b.
   Convention : BEM  →  .fn-bloc / .fn-bloc__element / .fn-bloc--variante

   SOMMAIRE
     00. Motifs décoratifs (triangles « flèches » de la marque)
     01. Base, conteneur, titres
     02. Boutons et icône flèche
     03. En-tête (barre utilitaire + menu)          → thème DNN
     04. Barre latérale d'accès rapide (fixe)       → module 00
     05. Héros « Portes ouvertes »                   → module 01
     06. Je veux…                                    → module 02
     07. Inscrire mon enfant                         → module 03
     08. Accès rapide                                → module 04
     09. Pourquoi Franco-Nord ?                      → module 05
     10. Carrières                                   → module 06
     11. Nouvelles (EasyDNN News)                    → module 07
     12. BAÉF                                        → module 08
     13. Témoignages                                 → module 09
     14. Pied de page                                → module 10 + thème
     15. Utilitaires, accessibilité, mode édition DNN
   ========================================================================== */


/* ==========================================================================
   00. MOTIFS DÉCORATIFS ET ICÔNES
   --------------------------------------------------------------------------
   • Triangles « flèches » et flèche des boutons = fichiers SVG fournis par
     Chabo, dans assets/img/svg/. Pour mettre à jour un motif : remplacer
     le fichier en gardant le même nom (aucun CSS à toucher).
       fn-triangle-lime.svg · fn-triangle-navy.svg · fn-triangle-teal.svg
       fn-triangle-white.svg (triangles en couleur → background-image)
       fn-fleche.svg (flèche des boutons → utilisée en MASQUE : seule la
       silhouette compte, la couleur suit le texte du bouton)
   • Les triangles sont posés en pseudo-éléments : les éditeurs DNN ne
     peuvent ni les supprimer ni les casser dans l'éditeur HTML.
   • Icônes : UIcons « thin straight » 4.0.0 (Flaticon), copie LOCALE :
     icons/css/uicons-thin-straight.css + icons/webfonts/ (aucun CDN).
     Dans le HTML : <i class="fi-ts-nom" aria-hidden="true"></i>.
     Dans les pseudo-éléments : font-family uicons-thin-straight + code
     (codes propres à la 4.0.0 : les reprendre dans le CSS UIcons local).
   • Logos Facebook / YouTube : Font Awesome 5 (Free, brands) en CDN, même
     génération que Porto 8 : <i class="fab fa-facebook" aria-hidden="true">.
   ========================================================================== */
:root {
  --fn-tri-lime:    url("../img/svg/fn-triangle-lime.svg");
  --fn-tri-navy:    url("../img/svg/fn-triangle-navy.svg");
  --fn-tri-teal:    url("../img/svg/fn-triangle-teal.svg");
  --fn-tri-white:   url("../img/svg/fn-triangle-white.svg");
  /* Masques CSS : intégrés en data URI, car un masque en fichier externe
     est bloqué par Chrome quand la page est ouverte en file://.
     Source : le fichier indiqué par @inline. Après avoir remplacé ce
     fichier, lancer « python3 tools/build_preview.py » : il régénère la
     ligne suivante automatiquement.                                       */
  /* @inline: ../img/svg/fn-fleche.svg */
  --fn-arrow-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cpath d='M8 6 96 50 8 94 26 50Z' fill='%23000'/%3E %3C/svg%3E");
}

/* --------------------------------------------------------------------------
   00b. TRIANGLES DÉCORATIFS — un pseudo-élément par triangle
   • Chaque triangle est un ::before / ::after INDÉPENDANT, avec sa propre
     vitesse (--k) : au défilement, les triangles d'un même groupe se
     décalent légèrement les uns par rapport aux autres (effet de
     profondeur discret). Petits triangles = plus rapides.
   • Les hôtes sont des éléments déjà présents dans les modules (section,
     .fn-container, en-tête de bloc…) : rien à ajouter dans l'éditeur DNN.
     Un pseudo d'un élément NON positionné se place par rapport à la
     section (position: relative) : les coordonnées ci-dessous sont donc
     relatives à la section, sauf mention contraire.
   • Mouvement : de +amp × k à −amp × k pendant que le triangle traverse
     l'écran. Navigateurs récents : CSS seul (animation-timeline: view(),
     propriété translate → GPU). Autres : relais fn-theme.js § 7.
     « Réduire les animations » : aucun mouvement.
   • Réglages : --fn-parallax-amp (fn-tokens.css) ; --k par triangle.
   -------------------------------------------------------------------------- */
.fn-hero::before, .fn-hero::after, .fn-hero__inner::after,
.fn-iwant::before, .fn-iwant::after, .fn-iwant > .fn-container::before,
.fn-why__head::before, .fn-why__head::after,
.fn-promo__body::before, .fn-promo__body::after,
.fn-baef__media::after, .fn-baef__photo::before,
.fn-testimonials::before, .fn-testimonials::after, .fn-testimonials > .fn-container::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  width: var(--tri-size); aspect-ratio: 100 / 110;
  background: var(--tri-img) center / contain no-repeat;
}

/* Héros — 3 triangles à droite (relatifs à .fn-hero) */
.fn-hero::after        { --tri-img: var(--fn-tri-lime);  --tri-size: clamp(50px, 6vw, 110px);  --k: .6;  right: -1%;  top: 16%; }
.fn-hero::before       { --tri-img: var(--fn-tri-white); --tri-size: clamp(30px, 3.5vw, 64px); --k: 1.5; right: 8%;   top: 54%; }
.fn-hero__inner::after { --tri-img: var(--fn-tri-teal);  --tri-size: clamp(34px, 3.8vw, 70px); --k: 1;   right: -.5%; top: 60%; }

/* Je veux… — 3 triangles au centre, au-dessus des cartes */
.fn-iwant::before                 { --tri-img: var(--fn-tri-teal); --tri-size: 14px; --k: 1.7; left: 50%;               top: calc(var(--fn-section-y) + 1rem); }
.fn-iwant::after                  { --tri-img: var(--fn-tri-navy); --tri-size: 26px; --k: 1.1; left: calc(50% + 24px);  top: calc(var(--fn-section-y) + 1rem + 34px); }
.fn-iwant > .fn-container::before { --tri-img: var(--fn-tri-lime); --tri-size: 66px; --k: .6;  left: calc(50% + 34px);  top: calc(var(--fn-section-y) + 1rem + 22px); }

/* Pourquoi Franco-Nord ? — 2 triangles à droite du titre (relatifs à .fn-why__head) */
.fn-why__head::after  { --tri-img: var(--fn-tri-navy); --tri-size: 56px; --k: .7;  right: 0;                    top: -2.5rem; }
.fn-why__head::before { --tri-img: var(--fn-tri-teal); --tri-size: 34px; --k: 1.5; right: calc(8rem - 34px);   top: calc(4rem - 37px); }

/* Carrières — 2 triangles en haut à droite du panneau (relatifs à .fn-promo__body) */
.fn-promo__body::after  { --tri-img: var(--fn-tri-navy);  --tri-size: 34px; --k: 1.5; right: calc(5% + 6px);  top: -10px; }
.fn-promo__body::before { --tri-img: var(--fn-tri-white); --tri-size: 88px; --k: .7;  right: calc(5% + 22px); top: 3px; }

/* BAÉF — 2 triangles au-dessus de la photo (relatifs à .fn-baef__media) */
.fn-baef__media::after  { --tri-img: var(--fn-tri-teal); --tri-size: 30px; --k: 1.5; left: 50%;              top: -1rem; }
.fn-baef__photo::before { --tri-img: var(--fn-tri-lime); --tri-size: 52px; --k: .7;  left: calc(50% + 60px); top: calc(-1rem + 40px); }

/* Témoignages — 3 triangles en haut à gauche (relatifs à .fn-testimonials) */
.fn-testimonials::before                 { --tri-img: var(--fn-tri-lime);  --tri-size: 16px; --k: 1.7; left: 4%;                top: -4.5rem; }
.fn-testimonials > .fn-container::before { --tri-img: var(--fn-tri-teal);  --tri-size: 52px; --k: .6;  left: calc(4% + 34px);  top: calc(-4.5rem + 50px); }
.fn-testimonials::after                  { --tri-img: var(--fn-tri-white); --tri-size: 36px; --k: 1.1; left: calc(4% + 20px);  top: calc(-4.5rem + 48px); }

@keyframes fn-parallax {
  from { translate: 0 calc(var(--fn-parallax-amp) * var(--k, 1)); }
  to   { translate: 0 calc(var(--fn-parallax-amp) * var(--k, 1) * -1); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fn-hero::before, .fn-hero::after, .fn-hero__inner::after,
    .fn-iwant::before, .fn-iwant::after, .fn-iwant > .fn-container::before,
    .fn-why__head::before, .fn-why__head::after,
    .fn-promo__body::before, .fn-promo__body::after,
    .fn-baef__media::after, .fn-baef__photo::before,
    .fn-testimonials::before, .fn-testimonials::after, .fn-testimonials > .fn-container::before {
      animation: fn-parallax linear both;
      animation-timeline: view();
    }
  }
  /* Relais JS (fn-theme.js § 7) : --fn-py est posé sur la section */
  .fn-parallax-js .fn-hero::before,
  .fn-parallax-js .fn-hero::after,
  .fn-parallax-js .fn-hero__inner::after,
  .fn-parallax-js .fn-iwant::before,
  .fn-parallax-js .fn-iwant::after,
  .fn-parallax-js .fn-iwant > .fn-container::before,
  .fn-parallax-js .fn-why__head::before,
  .fn-parallax-js .fn-why__head::after,
  .fn-parallax-js .fn-promo__body::before,
  .fn-parallax-js .fn-promo__body::after,
  .fn-parallax-js .fn-baef__media::after,
  .fn-parallax-js .fn-baef__photo::before,
  .fn-parallax-js .fn-testimonials::before,
  .fn-parallax-js .fn-testimonials::after,
  .fn-parallax-js .fn-testimonials > .fn-container::before {
    translate: 0 calc(var(--fn-py, 0px) * var(--k, 1));
  }
}

/* Icônes UIcons : alignement dans les composants du kit */
.fn-page [class^="fi-"], .fn-page [class*=" fi-"],
.fn-site-header [class^="fi-"], .fn-site-header [class*=" fi-"] {
  display: inline-flex; line-height: 1;
}

/* ==========================================================================
   01. BASE
   ========================================================================== */
/* Racines du kit : sections des modules, en-tête, barre ©, barre latérale.
   Elles redéfinissent la typographie que Porto pose sur <body>.            */
.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools {
  font-family: var(--fn-font-family);
  font-size: var(--fn-fs-body);
  line-height: var(--fn-lh-body);
  color: var(--fn-color-text);
  -webkit-font-smoothing: antialiased;
}
:is(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) *,
:is(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) *::before,
:is(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) *::after { box-sizing: border-box; }

.fn-page img { max-width: 100%; height: auto; display: block; }

/* Conteneur large du gabarit (1680 px) — n'altère pas .container de Porto */
.fn-container {
  width: 100%;
  max-width: var(--fn-container-max);
  margin-inline: auto;
  padding-inline: var(--fn-pad-left) var(--fn-gutter);   /* gauche : dégage la barre latérale (fn-tokens.css) */
}

.fn-section {
  position: relative;
  padding-block: var(--fn-section-y);
}

/* Titre de section : partie légère + partie <strong> grasse
   ex. <h2 class="fn-heading"><strong>Inscrire</strong> mon enfant</h2>      */
.fn-heading {
  font-family: var(--fn-font-family);
  font-size: var(--fn-fs-h2);
  font-weight: var(--fn-fw-regular);
  line-height: var(--fn-lh-tight);
  letter-spacing: -.01em;
  color: var(--fn-color-heading);
  margin: 0 0 .4em;
}
.fn-heading strong { font-weight: var(--fn-fw-bold); }
.fn-heading--center { text-align: center; }
.fn-heading--light  { color: var(--fn-white); }

.fn-lead {
  font-size: 1.25rem;
  color: var(--fn-color-text);
  margin: 0 0 2rem;
}


/* ==========================================================================
   01b. ISOLATION DU THÈME PORTO / DNN
   --------------------------------------------------------------------------
   Le thème Porto du Conseil (relevé sur franco-nord.ca : DNN 10, Bootstrap
   5.3.7, CSCFN.base.css) stylise les éléments NUS : p, h1-h6, a, li,
   blockquote, header… avec des sélecteurs comme « html p », « html h3 »,
   « a:hover » ou « html header a:hover » (police Open Sans, 14 px, gris,
   marges, h3 en MAJUSCULES, liens qui passent à 14 px au survol, etc.).
   Ces règles neutralisent ces fuites DANS les composants du kit seulement.

   LIENS — règle d'or : sur un <a>, ne jamais écrire color / font-size /
   font-family / text-decoration directement. Utiliser les variables :
     --fn-a-color · --fn-a-size · --fn-a-font · --fn-a-deco
   (Porto ne peut pas les toucher ; la règle ci-dessous les applique dans
   tous les états : normal, visité, survol, focus, actif.)
   Banc d'essai : tools/porto-cscfn-shim.css (chargé par l'aperçu).
   ========================================================================== */
.fn-site-header { background: none; min-height: 0; clear: none; }      /* Porto : header { dégradé ; min-height: 128px } */

html :where(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0; color: inherit; font-family: var(--fn-font-family); font-size: inherit;
  font-weight: var(--fn-fw-bold); letter-spacing: normal; line-height: var(--fn-lh-tight); text-transform: none;
}
html :where(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) :is(p, li, address, blockquote, figure, figcaption, small, time, label) {
  margin: 0; padding: 0; border: 0; color: inherit; font-family: inherit; font-size: inherit;
  font-style: inherit; line-height: inherit;
}
html :where(.fn-page, .fn-site-header, .fn-copyright, .fn-sidetools) a:not(.fn-btn):is(:link, :visited, :hover, :focus, :active, :not([href])),
html a.fn-skip:is(:link, :visited, :hover, :focus, :active) {
  color: var(--fn-a-color, inherit);
  font-family: var(--fn-a-font, inherit);
  font-size: var(--fn-a-size, inherit);
  text-decoration: var(--fn-a-deco, none);
}
html :where(.fn-page, .fn-site-header, .fn-sidetools) select { font-family: var(--fn-font-family); }
.fn-page .owl-carousel { margin-bottom: 0; }                              /* Porto : 20 px */


/* ==========================================================================
   02. BOUTONS
   Structure OBLIGATOIRE (sinon l'espacement vertical n'est plus homogène) :
     <a class="fn-btn …" href="…">
       <span class="fn-btn__label">Texte du bouton</span>
       <span class="fn-btn__arrow" aria-hidden="true"></span>   ← optionnelle
     </a>
   • Hauteur, marges internes et écart texte/flèche viennent UNIQUEMENT des
     jetons --fn-btn-* (fn-tokens.css), en em : toutes les tailles gardent
     les mêmes proportions.
   • Centrage optique : « text-box: trim-both cap alphabetic » rogne
     l'espace au-dessus des capitales et sous la ligne de base. Le texte en
     capitales est alors centré au pixel, quelle que soit la police (Effra
     a plus d'espace sous la ligne de base qu'au-dessus des capitales).

   .fn-btn                 contour navy (fond clair)
   .fn-btn--light          contour blanc (fond sombre)
   .fn-btn--lime           contour + texte lime (fond navy)
   .fn-btn--solid          plein lime (CTA principal)
   .fn-btn--sm             taille réduite (cartes Nouvelles) — mêmes proportions
   ========================================================================== */
.fn-btn {
  /* Couleurs par variables : contour (--_c), texte (--_fg), fond (--_bg),
     et leurs versions au survol (--_hfg, --_hbg). Les variantes ne
     changent QUE ces variables.                                          */
  --_c: var(--fn-ink);
  --_fg: var(--_c);  --_bg: transparent;
  --_hfg: var(--fn-white); --_hbg: var(--_c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fn-btn-gap);
  box-sizing: border-box;
  min-height: max(44px, var(--fn-btn-height));   /* cible tactile ≥ 44 px */
  margin: 0;
  padding: .75em var(--fn-btn-pad-x);            /* .75em : seulement si le texte passe sur 2 lignes */
  border: 2px solid var(--_c);
  border-radius: var(--fn-radius-pill);
  font-style: italic;
  font-weight: var(--fn-fw-regular);
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  transition: background-color var(--fn-dur) var(--fn-ease),
              color var(--fn-dur) var(--fn-ease);
}
/* Appliqué dans TOUS les états du lien (bat « a:hover » / « a:visited » de Porto) */
html a.fn-btn:is(:link, :visited, :hover, :focus, :active, :not([href])),
html button.fn-btn {
  color: var(--_fg);
  background-color: var(--_bg);
  font-family: var(--fn-font-family);
  font-size: var(--fn-btn-fs, var(--fn-fs-btn));
  text-decoration: none;
}
.fn-btn__label {
  display: block;
  padding-top: var(--fn-btn-optical-y);
}
@supports (text-box: trim-both cap alphabetic) {
  .fn-btn__label { text-box: trim-both cap alphabetic; padding-top: 0; }
}
.fn-btn:is(:hover, :focus-visible) { --_fg: var(--_hfg); --_bg: var(--_hbg); }
.fn-btn--light { --_c: var(--fn-white); --_hfg: var(--fn-navy-900); }
.fn-btn--lime  { --_c: var(--fn-lime-500); --_hfg: var(--fn-navy-900); }
.fn-btn--solid {
  --_c: var(--fn-color-cta-bg); --_fg: var(--fn-color-cta-text); --_bg: var(--fn-color-cta-bg);
  --_hfg: var(--fn-navy-900); --_hbg: var(--fn-white);
  font-style: normal;
  font-weight: var(--fn-fw-bold);
}
.fn-btn--sm { --fn-btn-fs: .875rem; }     /* tout le reste suit en em */

/* Flèche pleine du bouton (« Lire la suite ➤ ») — SVG fourni, en masque */
.fn-btn__arrow {
  flex: none;
  width: var(--fn-btn-arrow); height: var(--fn-btn-arrow);
  background: currentColor;
  -webkit-mask: var(--fn-arrow-shape) center / contain no-repeat;
          mask: var(--fn-arrow-shape) center / contain no-repeat;
}

/* Flèche dans un cercle (cartes, Accès rapide, carrousels) */
.fn-arrow {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--fn-ink);
}
.fn-arrow::before {
  content: "";
  width: 46%; height: 46%;
  margin-left: 8%;
  background: currentColor;
  -webkit-mask: var(--fn-arrow-shape) center / contain no-repeat;
          mask: var(--fn-arrow-shape) center / contain no-repeat;
}
.fn-arrow--prev { transform: scaleX(-1); }

/* Boutons de navigation des carrousels (précédent / suivant) */
.fn-carousel-nav { display: flex; gap: .75rem; }
.fn-carousel-nav__btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; border-radius: 50%;
}
.fn-carousel-nav__btn .fn-arrow { width: 2.25rem; height: 2.25rem; color: inherit; }
.fn-carousel-nav__btn:hover .fn-arrow { background: currentColor; }
.fn-carousel-nav__btn:hover .fn-arrow::before { background: var(--fn-arrow-hover, var(--fn-white)); }   /* flèche lisible sur le cercle plein */
.fn-carousel-nav__btn[disabled] { opacity: .35; cursor: default; }


/* ==========================================================================
   03. EN-TÊTE  (fait partie du THÈME DNN, pas d'un module)
   ========================================================================== */
.fn-site-header { position: relative; z-index: var(--fn-z-header); font-family: var(--fn-font-family); }

/* Barre utilitaire — PAS de .fn-container : le contenu de gauche s'aligne
   sur le conteneur (même retrait calculé), le CTA est collé au bord droit
   de l'écran, comme dans la maquette.                                       */
.fn-topbar {
  background: var(--fn-navy-700); color: var(--fn-white); font-size: .8125rem;
  /* focus inversé sur fond sombre : trait blanc + halo navy */
  --fn-focus-ring: var(--fn-white); --fn-focus-halo: var(--fn-navy-900);
}
.fn-topbar__inner {
  display: flex; align-items: stretch; gap: 1rem; min-height: 50px;
  padding-left: calc(max(0px, (100% - var(--fn-container-max)) / 2) + var(--fn-pad-left));   /* aligné sur le contenu */
}
.fn-topbar__group { display: flex; align-items: center; gap: 1.5rem; }
.fn-topbar__group--end { margin-left: auto; padding-right: .5rem; }
.fn-topbar a { --fn-a-color: var(--fn-white); font-weight: var(--fn-fw-bold); text-transform: uppercase; letter-spacing: .03em; }
.fn-topbar a:hover { text-decoration: underline; }
/* Sélecteur de langue (Google Traduction habillé) — fn-theme.js § 6 */
.fn-lang { position: relative; display: inline-flex; align-items: center; }
.fn-lang__select {
  -webkit-appearance: none; appearance: none;
  min-height: 32px; padding: 0 2.1em 0 1.1em;
  border: 0; border-radius: 6px;
  background: var(--fn-white); color: var(--fn-navy-900);
  font: var(--fn-fw-bold) .75rem/1 var(--fn-font-family);
  letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.fn-lang__select option { text-transform: none; font-weight: var(--fn-fw-regular); }
.fn-lang__icon {
  position: absolute; right: .7em; top: 50%; transform: translateY(-50%);
  color: var(--fn-navy-900); font-size: .9rem; pointer-events: none;
}
.fn-lang__select:focus-visible { outline: 3px solid var(--fn-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 5px var(--fn-focus-halo); }
/* Widget Google : présent dans la page (il fait la traduction) mais invisible */
.fn-lang__google {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
/* Google ajoute une barre en haut de page, décale le <body> et surligne
   le texte au survol : on neutralise tout cela.                            */
body { top: 0 !important; }
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
.fn-topbar__social { display: flex; align-items: center; gap: .9rem; font-size: 1.25rem; }
.fn-topbar__social a { text-transform: none; }
.fn-topbar__search { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.fn-topbar__search i { font-size: 1.25rem; }
.fn-topbar .fn-topbar__cta {
  display: flex; align-items: center; flex: none;
  padding-inline: 2rem 2.25rem;
  background: var(--fn-color-cta-bg);
  --fn-a-color: var(--fn-color-cta-text);
  border-radius: var(--fn-radius-pill) 0 0 var(--fn-radius-pill);   /* arrondi à gauche seulement */
}

/* Bande logo + menu */
.fn-header { background: var(--fn-white); }
.fn-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 116px; }
.fn-header__logo img, .fn-header__logo svg { width: clamp(130px, 12vw, 150px); height: auto; }
.fn-header__toggle {
  display: none; border: 0; background: var(--fn-lavender-100); color: var(--fn-ink);
  width: 48px; height: 48px; border-radius: 12px; cursor: pointer;
}
/* Icône hamburger en CSS (pas d'icône « menu » dans UIcons thin-straight) */
.fn-burger, .fn-burger::before, .fn-burger::after,
.fn-burger > span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.fn-burger { position: relative; background: none; height: 16px; }
.fn-burger::before, .fn-burger::after { content: ""; position: absolute; left: 0; }
.fn-burger::before { top: 0; } .fn-burger::after { bottom: 0; }
.fn-burger > span { position: absolute; top: 7px; left: 0; }
[aria-expanded="true"] .fn-burger::before { top: 7px; transform: rotate(45deg); }
[aria-expanded="true"] .fn-burger::after  { bottom: 7px; transform: rotate(-45deg); }
[aria-expanded="true"] .fn-burger > span  { opacity: 0; }

/* Menu principal + MÉGA-MENU (sortie DDRMenu — theme/menus/FNMainMenu)
   --------------------------------------------------------------------------
   Modèle « disclosure navigation » (WAI-ARIA APG) :
   • une page AVEC enfants = <button aria-expanded aria-controls> qui ouvre
     son panneau .fn-mega ; le lien vers la page elle-même est le titre du
     panneau (.fn-mega__title) ;
   • une page SANS enfants = simple lien.
   Panneau : intro (titre + description de la page DNN) | groupes niveau 2
   (+ liens niveau 3) répartis automatiquement en colonnes CSS : aucun
   réglage de colonnes à faire page par page.
   Léger : HTML final produit par DDRMenu (pas de reconstruction en JS),
   panneaux en « hidden » (rien n'est dessiné tant qu'ils sont fermés),
   ≈ 2 Ko de JS (fn-theme.js § 4), aucune image, aucune bibliothèque.
   Classes volontairement différentes de celles de Porto (#mainMenu,
   .mega-menu-item, .dropdown-menu) : menu.min.js du skin ne s'y accroche pas.
   ========================================================================== */
.fn-header__inner { position: relative; }          /* référence du panneau */
.fn-nav { background: var(--fn-lavender-100); border-radius: var(--fn-radius-pill); padding: .35rem 1rem; }
.fn-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.fn-nav__item { position: static; }                 /* le panneau se cale sur l'en-tête, pas sur l'item */
.fn-nav__link {
  display: flex; align-items: center;
  padding: .8rem 1rem; border-radius: var(--fn-radius-pill);
  --fn-a-color: var(--fn-ink); --fn-a-size: 1.0625rem; font-weight: var(--fn-fw-regular);
  white-space: nowrap;
}
button.fn-nav__link {                               /* même rendu qu'un lien */
  margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--fn-a-color); font-family: var(--fn-font-family); font-size: var(--fn-a-size); line-height: inherit;
}
.fn-nav__link:hover,
.fn-nav__link[aria-expanded="true"],
.fn-nav__item.is-active > .fn-nav__link { background: var(--fn-white); }
.fn-nav__caret { font-size: .9em; opacity: .75; margin-left: .35em; transition: transform var(--fn-dur) var(--fn-ease); }
/* Bureau : la bande lavande déborde jusqu'au bord droit de l'écran (arrondie
   à gauche seulement, comme le CTA de la barre utilitaire) ; les liens restent
   alignés sur le conteneur. La boîte du menu elle-même déborde (marge
   négative + padding égal) : .fn-nav n'est pas positionné, donc le méga-menu
   reste calé sur .fn-header__inner (pleine largeur). overflow-x: clip évite
   le défilement horizontal (100vw inclut la barre de défilement) sans couper
   le méga-menu (axe vertical non touché).                                   */
@media (min-width: 1200px) {
  @supports (overflow: clip) {                       /* sinon (Safari iOS < 16) : pilule d'origine */
    .fn-header { overflow-x: clip; }
    .fn-nav {
      --fn-nav-bleed: calc(var(--fn-gutter) + max(0px, (100vw - var(--fn-container-max)) / 2));
      margin-right: calc(-1 * var(--fn-nav-bleed));
      padding-right: var(--fn-nav-bleed);
      border-radius: var(--fn-radius-pill) 0 0 var(--fn-radius-pill);
    }
  }
}
.fn-nav__link[aria-expanded="true"] .fn-nav__caret { transform: rotate(180deg); }

/* Panneau */
.fn-mega {
  position: absolute; left: var(--fn-pad-left); right: var(--fn-gutter); top: 100%;   /* ne passe pas sous la barre latérale */
  z-index: 10;
}
.fn-mega[hidden] { display: none; }
/* Pont invisible entre le bouton et le panneau : le pointeur peut descendre
   sans refermer le menu (WCAG 1.4.13 « survolable »).                      */
.fn-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.75rem; }
.fn-mega__inner {
  display: grid; grid-template-columns: minmax(14rem, 1fr) 2.2fr;
  gap: clamp(2rem, 4vw, 6rem);
  max-height: calc(100vh - 12rem); overflow-y: auto;   /* zoom 200 % : le panneau défile */
  padding: clamp(2rem, 4vw, 5rem) clamp(2rem, 4.5vw, 5.5rem);
  background: var(--fn-lavender-50);
  border-radius: clamp(28px, 3vw, 60px);
  box-shadow: var(--fn-shadow-card);
  color: var(--fn-ink);
}
.fn-mega__title {
  display: inline-block; margin: 0 0 1.25rem;
  --fn-a-color: var(--fn-ink); --fn-a-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  color: var(--fn-ink); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);   /* si <p> (page sans lien) */
  font-weight: var(--fn-fw-bold); line-height: 1.1;
}
.fn-mega__text { max-width: 26em; font-size: 1.125rem; line-height: 1.65; }
.fn-mega__text:empty { display: none; }
.fn-mega__groups {
  columns: 2 16rem; column-gap: clamp(2rem, 4vw, 5rem);
  list-style: none; margin: 0; padding: 0;
}
.fn-mega__group { break-inside: avoid; padding-bottom: clamp(1rem, .6rem + 1vw, 1.75rem); }
.fn-mega__l2 {
  display: block; --fn-a-color: var(--fn-ink);
  --fn-a-size: clamp(1.25rem, .9rem + .9vw, 2rem);
  font-size: clamp(1.25rem, .9rem + .9vw, 2rem);    /* si <span> (page désactivée) */
  font-weight: var(--fn-fw-bold); line-height: 1.2;
}
.fn-mega__l3-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.fn-mega__l3 {
  --fn-a-color: var(--fn-ink); --fn-a-size: clamp(1rem, .9rem + .35vw, 1.25rem);
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem);
  font-style: italic; line-height: 1.35;
}
/* Page de regroupement désactivée au niveau 2 (ex. régions « Ouest »,
   « Centre », « Est » sous « Nos écoles ») : intertitre discret */
span.fn-mega__l2--label {
  font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fn-gray-600);
}
/* Niveau 3 qui a des enfants (ex. ville) + niveau 4 (ex. écoles) */
.fn-mega__l3--parent { --fn-a-size: clamp(1.0625rem, .95rem + .4vw, 1.375rem); font-size: clamp(1.0625rem, .95rem + .4vw, 1.375rem);
                       font-style: normal; font-weight: var(--fn-fw-bold); }
.fn-mega__l4-list { list-style: none; margin: .45rem 0 .35rem; padding: 0 0 0 1rem; display: grid; gap: .45rem; }
.fn-mega__l4 {
  --fn-a-color: var(--fn-ink); --fn-a-size: clamp(1rem, .9rem + .3vw, 1.1875rem);
  font-size: clamp(1rem, .9rem + .3vw, 1.1875rem);
  font-style: italic; line-height: 1.35;
}
.fn-mega a:hover,
.fn-mega a[aria-current="page"] { --fn-a-deco: underline; }


/* ==========================================================================
   04. BARRE LATÉRALE FIXE  (module 00 — affiché sur toutes les pages)
   ========================================================================== */
.fn-sidetools {
  width: var(--fn-sidetools-w);                /* = réserve de marge du contenu (fn-tokens.css) */
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: var(--fn-z-sidetools);
  background: var(--fn-white);
  border-radius: 0 var(--fn-radius-md) var(--fn-radius-md) 0;
  box-shadow: var(--fn-shadow-card);
  padding: .5rem .25rem;
}
.fn-sidetools__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.fn-sidetools__link {
  display: grid; justify-items: center; gap: .2rem;
  width: 100%; padding: .6rem .25rem; border-radius: var(--fn-radius-sm);
  --fn-a-color: var(--fn-ink); --fn-a-size: .75rem; line-height: 1.15; text-align: center;
}
.fn-sidetools__link i { font-size: 1.625rem; color: var(--fn-gray-600); }
.fn-sidetools__link:hover { background: var(--fn-lavender-100); }


/* ==========================================================================
   05. HÉROS « PORTES OUVERTES »  (module 01)
   ========================================================================== */
.fn-hero {
  position: relative;
  overflow: clip;   /* « clip » et non « hidden » : hidden crée un conteneur de défilement
                       et bloquerait le mouvement des triangles (animation-timeline: view()) */
  background: radial-gradient(ellipse 45% 70% at 22% 35%, #3d4373 0%, transparent 70%), var(--fn-navy-900);
  color: var(--fn-white);
}
.fn-hero__inner {
  display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: var(--fn-gap);
  min-height: clamp(420px, 36vw, 640px);
}
.fn-hero__media { align-self: end; }
.fn-hero__media img { width: 100%; max-width: 560px; margin-inline: auto; }
.fn-hero__content { padding-block: 3rem; padding-right: clamp(0px, 6vw, 160px); position: relative; z-index: 1; }   /* laisse la place aux triangles */
.fn-hero__badge {
  display: inline-block; margin-bottom: 1.25rem;
  padding: .55em 1.2em; border-radius: var(--fn-radius-pill);
  text-box: trim-both cap alphabetic;             /* centrage optique */
  background: var(--fn-lime-500); color: var(--fn-navy-900);
  font-size: clamp(1.125rem, .95rem + .7vw, 1.75rem); font-style: italic; font-weight: var(--fn-fw-bold);
  text-transform: uppercase;
}
.fn-hero__title {
  margin: 0 0 2rem; color: var(--fn-white);
  font-family: var(--fn-font-family);
  font-size: var(--fn-fs-hero); 
  font-weight: var(--fn-fw-bold); 
  line-height: 0.9; 
  letter-spacing: -.02em;
}
.fn-hero__accent { color: var(--fn-lime-300); }


/* ==========================================================================
   06. JE VEUX…  (module 02)
   ========================================================================== */
.fn-iwant__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fn-gap) calc(var(--fn-gap) * 1.2);
  margin: clamp(1.5rem, 4vw, 4rem) 0 0;
  list-style: none; padding: 0;
}
.fn-iwant__card {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 16 / 9.4; overflow: hidden;
  border-radius: var(--fn-radius-md); border: 2px solid transparent;
  --fn-a-color: var(--fn-white); isolation: isolate;
  box-shadow: var(--fn-shadow-soft);
}
.fn-iwant__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .6s var(--fn-ease);
}
.fn-iwant__card::before {                 /* voile teal — assure le contraste AA */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,178,166,.25) 0%, rgba(0,110,103,.55) 50%, rgba(10,60,70,.88) 100%);
}
.fn-iwant__label {
  padding: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--fn-fs-card); font-weight: var(--fn-fw-regular); line-height: 1.15;
}
.fn-iwant__label strong { font-weight: var(--fn-fw-bold); text-transform: uppercase; }
.fn-iwant__card:hover, .fn-iwant__card:focus-visible { border-color: var(--fn-teal-500); }
.fn-iwant__card:hover img { transform: scale(1.05); }


/* ==========================================================================
   07. INSCRIRE MON ENFANT  (module 03)
   ========================================================================== */
.fn-enrol { background: linear-gradient(180deg, var(--fn-white) 0 42%, var(--fn-teal-500) 42% 100%); }
.fn-enrol__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fn-gap);
  max-width: 1300px; margin: clamp(1.5rem, 3vw, 3rem) auto 0; padding: 0; list-style: none;
}
.fn-enrol__card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--fn-white); border-radius: var(--fn-radius-lg); overflow: hidden;
  box-shadow: var(--fn-shadow-card); --fn-a-color: var(--fn-ink);
  transition: transform var(--fn-dur) var(--fn-ease);
}
.fn-enrol__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fn-enrol__body {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.6rem; font-size: 1.3125rem; line-height: 1.2;
}
.fn-enrol__body strong { font-weight: var(--fn-fw-bold); }
.fn-enrol__card:hover { transform: translateY(-4px); }
.fn-enrol__cta { text-align: center; margin-top: clamp(2rem, 5vw, 4.5rem); }
.fn-enrol__cta .fn-btn { --_c: var(--fn-enrol-btn-color); --_hfg: var(--fn-navy-900); }   /* survol : fond = contour, texte navy */


/* ==========================================================================
   08. ACCÈS RAPIDE  (module 04)
   ========================================================================== */
.fn-quick__layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--fn-gap) calc(var(--fn-gap) * 1.5);
  align-items: start;
}
.fn-quick__media {
  position: relative; overflow: hidden;
  /* déborde jusqu'au bord gauche de l'écran, quelle que soit la largeur */
  margin-left: calc(var(--fn-pad-left) * -1 - (100vw - min(100vw, var(--fn-container-max))) / 2);
  border-radius: 0 var(--fn-radius-lg) var(--fn-radius-lg) 0;
  aspect-ratio: 1 / 1.05;
}
.fn-quick__media img { width: 100%; height: 100%; object-fit: cover; }
.fn-quick__media::after {                              /* coin vert + loupe */
  content: "\f13b";                                    /* UIcons 4.0.0 : fi-ts-search-alt */
  font-family: uicons-thin-straight; font-weight: 400;
  position: absolute; top: 0; right: 0; width: 34%; aspect-ratio: 1;
  display: flex; justify-content: flex-end; padding: 8% 9% 0 0;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem); color: var(--fn-white);
  background: linear-gradient(225deg, var(--fn-lime-500) 50%, transparent 50.5%);
}
.fn-quick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.fn-quick__item {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 1rem; border-radius: var(--fn-radius-sm);
  background: var(--fn-lavender-200); --fn-a-color: var(--fn-ink);
  font-weight: var(--fn-fw-bold); --fn-a-size: 1.25rem; line-height: 1.2;
  transition: background-color var(--fn-dur) var(--fn-ease);
}
.fn-quick__item:hover, .fn-quick__item:focus-visible { background: var(--fn-lavender-300); }
.fn-quick__icon {
  display: grid; place-items: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: var(--fn-radius-sm);
  background: var(--fn-lavender-300); color: var(--fn-gray-600); font-size: 1.625rem;
}
.fn-quick__label { flex: 1; }


/* ==========================================================================
   09. POURQUOI FRANCO-NORD ?  (module 05)
   ========================================================================== */
.fn-why__layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--fn-gap); align-items: center; }
.fn-why__head { position: relative; display: inline-block; padding-right: 9rem; }
.fn-why__list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: 1rem; max-width: 560px; }
.fn-why__item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem; background: var(--fn-white);
  border-radius: var(--fn-radius-sm); box-shadow: var(--fn-shadow-soft);
  color: var(--fn-ink); font-weight: var(--fn-fw-bold); font-size: 1.1875rem;
}
.fn-why__item i { font-size: 1.5rem; color: var(--fn-gray-600); }
.fn-why__mascot { display: flex; justify-content: center; }


/* ==========================================================================
   09b. NORDI — mascotte dont les yeux suivent le curseur  (module 05)
   --------------------------------------------------------------------------
   Repris du prototype « nordi » (images 776 × 1003 px).
   • Par défaut (mobile, tactile, mouvement réduit) : nordi-yeux.png.
   • Desktop + souris fine : nordi-blanc.png (yeux vides) + 2 pupilles CSS
     découpées par nordi-masque-yeux.png (forme exacte des blancs des yeux).
   • Masque des yeux intégré en data URI (fonctionne aussi en file://).
   • Toutes les cotes sont en px de l'image source × --u : le composant se
     redimensionne en ne changeant QUE sa largeur.
   • Ne pas ajouter will-change sur les pupilles : avec le masque, Chrome
     produit des artefacts.
   Fichiers (dans le thème) : assets/img/nordi/
     nordi-yeux.png · nordi-blanc.png · nordi-masque-yeux.png
   ========================================================================== */
.fn-nordi {
  --fn-nordi-img-yeux:  url("../img/nordi/nordi-yeux.png");
  --fn-nordi-img-blanc: url("../img/nordi/nordi-blanc.png");
  /* @inline: ../img/nordi/nordi-masque-yeux.png  (régénéré par tools/build_preview.py) */
  --fn-nordi-masque: url("data:image/png;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBO9f8DhDIYR9TMCt4AAAAASUVORK5CYII=");
  --u: calc(100cqw / 776);                 /* 1 px de l'image source */
  container-type: inline-size;
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 776 / 1003;
  background: var(--fn-nordi-img-yeux) center / 100% 100% no-repeat;
  user-select: none;
}
.fn-nordi__pupilles { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .fn-nordi { background-image: var(--fn-nordi-img-blanc); }
  .fn-nordi__pupilles {
    display: block; position: absolute; inset: 0;
    -webkit-mask: var(--fn-nordi-masque) center / 100% 100% no-repeat;
            mask: var(--fn-nordi-masque) center / 100% 100% no-repeat;
  }
}
.fn-nordi__pupille {
  --dx: 0; --dy: 0;
  position: absolute;
  width: calc(96 * var(--u));
  height: calc(118 * var(--u));
  border-radius: 50%;
  background: #1f1d32;
  transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)));
}
.fn-nordi__pupille--g { left: calc(328 * var(--u)); top: calc(441 * var(--u)); }
.fn-nordi__pupille--d { left: calc(501 * var(--u)); top: calc(496 * var(--u)); }


/* ==========================================================================
   10. CARRIÈRES  (module 06)
   ========================================================================== */
.fn-promo {
  display: grid; grid-template-columns: 1fr 1fr; overflow: clip; position: relative;   /* clip : voir .fn-hero */
  border-radius: var(--fn-radius-lg); max-width: 1400px; margin-inline: auto;
  background: var(--fn-green-700);
}
.fn-promo__media { position: relative; min-height: 340px; }
.fn-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-promo__media::after {                       /* coin navy + icône école */
  content: "\f10f";                             /* UIcons 4.0.0 : fi-ts-school */
  font-family: uicons-thin-straight; font-weight: 400;
  position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 1.4;
  display: flex; align-items: flex-end; padding: 0 0 7% 7%;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem); color: var(--fn-white);
  background: linear-gradient(35deg, var(--fn-navy-900) 50%, transparent 50.5%);
}
.fn-promo__body { position: relative; padding: clamp(2rem, 4vw, 4rem); color: var(--fn-white); }
.fn-promo__eyebrow {
  display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.75rem;
  font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
}
.fn-promo__eyebrow::after { content: ""; width: 40%; max-width: 220px; height: 2px; background: var(--fn-lime-300); }
.fn-promo__title {
  margin: 0 0 1rem; color: var(--fn-white); font-family: var(--fn-font-family);
  font-size: var(--fn-fs-h2); font-weight: var(--fn-fw-regular); line-height: 1.1;
}
.fn-promo__title strong { display: block; font-weight: var(--fn-fw-bold); }
.fn-promo__text { font-size: 1.3125rem; margin: 0 0 2rem; max-width: 26em; }


/* ==========================================================================
   11. NOUVELLES — gabarit EasyDNN News « FrancoNord »  (module 07)
   Balisage : easydnnnews/FrancoNord/News/List_Article_FN_Carrousel.html
   Ajustements propres à l'enveloppe EasyDNN : easydnnnews/FrancoNord/FrancoNord.css
   ========================================================================== */
.fn-news { overflow: hidden; }
.fn-news__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.25rem;
}
.fn-news__title { margin: 0; padding-right: 2rem; border-right: 2px solid var(--fn-gray-300); }
.fn-news__intro { margin: 0; max-width: 26em; font-size: 1.0625rem; line-height: 1.4; }
.fn-news__all { margin-left: auto; }
.fn-news__nav { margin-bottom: 1.75rem; color: var(--fn-ink); }

/* Laisse « dépasser » la carte suivante à droite (effet d'aperçu) :
   le carrousel occupe 86 % du conteneur, la carte suivante déborde
   dans les 14 % restants et jusqu'au bord de l'écran.                     */
.fn-news__track.owl-carousel { width: 86%; }
.fn-news .owl-stage-outer { overflow: visible; clip-path: inset(-30px -100vw -40px -30px); }
@media (max-width: 767.98px) { .fn-news__track.owl-carousel { width: 84%; } }

.fn-news-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--fn-white); border-radius: var(--fn-radius-md);
  box-shadow: var(--fn-shadow-card); overflow: hidden;
  transition: box-shadow var(--fn-dur) var(--fn-ease);
}
/* Survol / focus : liseré lime sur TOUTES les cartes (calque au-dessus de
   l'image, sinon la photo masquerait le liseré en haut).                   */
.fn-news-card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 3px var(--fn-lime-500);
  opacity: 0; transition: opacity var(--fn-dur) var(--fn-ease);
}
.fn-news-card:hover::before,
.fn-news-card:focus-within::before { opacity: 1; }
/* Toute la carte est cliquable (lien du titre étiré), le bouton reste au-dessus */
.fn-news-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fn-news-card__more { position: relative; z-index: 2; }
.fn-news-card__badge { z-index: 2; }
/* Le fond du média EST le visuel par défaut (triangles) : visible si
   l'article n'a pas d'image, recouvert par l'<img> sinon.                 */
.fn-news-card__media {
  position: relative; aspect-ratio: 16 / 9;
  background:
    var(--fn-tri-lime) no-repeat right 8% bottom 38% / 42px,
    var(--fn-tri-teal) no-repeat right 22% bottom 30% / 30px,
    var(--fn-tri-navy) no-repeat right 32% bottom 40% / 18px,
    var(--fn-tri-teal) no-repeat right 16% bottom 60% / 16px,
    var(--fn-white);
}
.fn-news-card__media img { position: relative; width: 100%; height: 100%; object-fit: cover; }
/* Visuel par défaut quand l'article n'a pas d'image (ex. « Communiqué ») */
.fn-news-card__fallback {
  width: 100%; height: 100%; display: flex; align-items: flex-start; padding: 1.25rem 1.5rem;
  color: var(--fn-ink); font-size: clamp(1.75rem, 2.4vw, 2.75rem); font-weight: var(--fn-fw-bold);
}
.fn-news-card__badge {
  position: absolute; left: 1.25rem; bottom: -1rem;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em; border-radius: var(--fn-radius-pill);
  background: var(--fn-white); box-shadow: var(--fn-shadow-soft);
  color: var(--fn-ink); font-size: .9375rem; font-weight: var(--fn-fw-bold);
}
.fn-news-card__badge i { color: var(--fn-green-700); }   /* 4,6:1 sur blanc */
.fn-news-card__body { display: flex; flex-direction: column; flex: 1; padding: 2.25rem 1.75rem 1.75rem; }
.fn-news-card__date {
  margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--fn-gray-300);
  width: 50%; font-size: .875rem; font-weight: var(--fn-fw-bold); text-transform: uppercase; color: var(--fn-ink);
}
.fn-news-card__title { margin: 0 0 1rem; font-family: var(--fn-font-family); font-size: 1.3125rem; font-weight: var(--fn-fw-bold); line-height: 1.35; }
.fn-news-card__title a { --fn-a-color: var(--fn-ink); }
.fn-news-card__title a:hover { --fn-a-deco: underline; }
.fn-page .fn-news-card__title a:focus-visible { outline: none; box-shadow: none; }   /* focus montré par la carte */
.fn-news-card:has(.fn-news-card__title a:focus-visible) {
  outline: 3px solid var(--fn-focus-ring) !important; outline-offset: 2px;
}
.fn-news-card__summary { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--fn-gray-600); }
.fn-news-card__more { margin-top: auto; align-self: flex-start; }


/* ==========================================================================
   12. BAÉF  (module 08)
   ========================================================================== */
.fn-baef { background: var(--fn-navy-900); color: var(--fn-white); padding-bottom: calc(var(--fn-section-y) * .6); }
.fn-baef__layout { display: grid; grid-template-columns: .85fr 1fr; gap: calc(var(--fn-gap) * 1.5); align-items: center; }
.fn-baef__media { position: relative; padding: 3.5rem 0 0 4.5rem; }
.fn-baef__media::before {                                 /* carré lime + bulles */
  content: "\e579"; font-family: uicons-thin-straight; font-weight: 400;   /* UIcons 4.0.0 : fi-ts-comments */
  position: absolute; left: 0; top: 0; width: 46%; aspect-ratio: 1;
  display: grid; place-items: start center; padding-top: 12%;
  border-radius: var(--fn-radius-md); background: var(--fn-lime-500);
  font-size: clamp(2.5rem, 4vw, 4.5rem); color: var(--fn-white);
}
.fn-baef__media img { position: relative; border-radius: var(--fn-radius-md); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fn-baef__title { margin-bottom: 1.25rem; }
.fn-baef__title small { display: block; font-size: .6em; font-weight: var(--fn-fw-regular); margin-top: .2em; }
.fn-baef__text { margin: 0 0 1.75rem; color: rgba(255,255,255,.9); max-width: 36em; }
.fn-baef__contact { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 0 0 2.25rem; padding: 0; list-style: none; font-size: 1.0625rem; }
.fn-baef__contact li { display: flex; align-items: center; }
.fn-baef__contact i { color: var(--fn-lime-500); margin-right: .5em; }
.fn-baef__contact a { --fn-a-color: var(--fn-white); }
.fn-baef__actions { display: flex; flex-wrap: wrap; gap: 1rem; }


/* ==========================================================================
   13. TÉMOIGNAGES  (module 09)
   ========================================================================== */
.fn-testimonials {
  position: relative;                          /* référence des triangles */
  --fn-arrow-hover: var(--fn-navy-900);       /* survol : cercle blanc, flèche navy */
  padding: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: linear-gradient(180deg, var(--fn-navy-900) 0 22%, var(--fn-lime-500) 22% 100%);
}
.fn-testimonials__box {
  position: relative; max-width: 980px; margin-inline: auto;
  background: var(--fn-navy-900); color: var(--fn-white);
  padding: 2rem clamp(1.5rem, 5vw, 3.5rem) 2.5rem;
  min-height: 300px;
}
.fn-testimonials__title { text-align: center; margin-bottom: 1.5rem; font-size: var(--fn-fs-h3); font-weight: var(--fn-fw-bold); }
.fn-testimonials__slider { max-width: 34rem; }
.fn-quote { margin: 0; }
.fn-quote__text { font-size: 1.375rem; font-style: italic; font-weight: var(--fn-fw-light); line-height: 1.5; margin: 0 0 3rem; }
.fn-quote__author { font-size: 1.0625rem; font-style: italic; font-weight: var(--fn-fw-light); opacity: .9; }
.fn-testimonials__mascot {
  position: absolute; right: 0; bottom: 0; width: clamp(110px, 18vw, 190px); aspect-ratio: 1;
  border-radius: 50% 0 0 0; background: var(--fn-white); overflow: hidden;
}
.fn-testimonials__mascot img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
/* Languette basse qui porte les flèches */
.fn-testimonials__nav {
  display: flex; justify-content: center; padding: .25rem 0 1.5rem;
  width: 34%; min-width: 200px; margin: -1px auto 0;   /* -1px : pas de filet entre la boîte et la languette */
  background: var(--fn-navy-900); color: var(--fn-white);
  clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
  border-radius: 0 0 var(--fn-radius-md) var(--fn-radius-md);
}


/* ==========================================================================
   14. PIED DE PAGE  (module 10 dans FooterPane + barre © dans le thème)
   ========================================================================== */
.fn-footer { background: var(--fn-white); padding-block: clamp(2.5rem, 5vw, 4.5rem) 2.5rem; font-family: var(--fn-font-family); }
.fn-footer__brands { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; }
.fn-footer__partners { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.fn-footer__partners img { height: 52px; width: auto; }
.fn-footer__grid { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 2rem; }
.fn-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.fn-footer__links a { --fn-a-color: var(--fn-ink); font-weight: var(--fn-fw-bold); --fn-a-size: 1.0625rem; }
.fn-footer__links a:hover { --fn-a-deco: underline; }
.fn-footer__contact { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; font-size: 1.0625rem; color: var(--fn-ink); }
.fn-footer__contact li { display: flex; gap: .75rem; }
.fn-footer__contact i { width: 1.1rem; margin-top: .2em; color: var(--fn-gray-600); }
.fn-footer__contact address { margin: 0; font-style: normal; }
.fn-footer__social { display: flex; align-items: center; gap: .9rem; font-size: 1.5rem; margin-bottom: 1.75rem; }
.fn-footer__social .fa-facebook { color: #1877f2; }   /* 4,2:1 sur blanc */
.fn-footer__social .fa-youtube  { color: #e00000; }   /* 5,0:1 sur blanc */

.fn-copyright { background: var(--fn-navy-600); color: var(--fn-white); font-size: .875rem; }
.fn-copyright__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 1.25rem; }
.fn-copyright a { --fn-a-color: var(--fn-white); }


/* ==========================================================================
   15. UTILITAIRES, ACCESSIBILITÉ, MODE ÉDITION DNN
   ========================================================================== */
/* Anneau de focus visible partout (WCAG 2.4.7 + 1.4.11) : trait navy et
   halo blanc → contrasté sur fond clair comme sur fond sombre.            */
.fn-page a:focus-visible,
.fn-page button:focus-visible,
.fn-page [tabindex]:focus-visible,
.fn-site-header a:focus-visible,
.fn-site-header button:focus-visible,
.fn-site-header [tabindex]:focus-visible,
.fn-copyright a:focus-visible,
.fn-sidetools a:focus-visible,
.fn-skip:focus {
  /* !important : Porto impose « body a { outline: none !important } » */
  outline: 3px solid var(--fn-focus-ring) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--fn-focus-halo);
}

/* Lien d'évitement « Aller au contenu » (WCAG 2.4.1) — visible au focus */
.fn-skip {
  position: absolute; left: 1rem; top: -100px; z-index: calc(var(--fn-z-header) + 1);
  padding: .75rem 1.25rem; border-radius: var(--fn-radius-sm);
  background: var(--fn-white); --fn-a-color: var(--fn-navy-900); --fn-a-font: var(--fn-font-family);
  font-weight: var(--fn-fw-bold);
}
.fn-skip:focus { top: .5rem; }

/* Diapositives hors champ des carrousels : rendues inertes par fn-theme.js
   (ni focus clavier, ni lecture d'écran) — WCAG 2.4.3 / 2.4.7.             */
.owl-item[inert] { pointer-events: none; }
.fn-visually-hidden {               /* équivalent .visually-hidden de Bootstrap 5 / .sr-only de Bootstrap 4 */
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* En mode édition DNN (classe ajoutée sur <body>) : on neutralise
   les effets qui gênent la sélection des modules.                         */
.dnnEditState .fn-sidetools { position: absolute; }
.dnnEditState .fn-news .owl-stage-outer { clip-path: none; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fn-page *, .fn-page *::before, .fn-page *::after { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   RESPONSIVE — points de rupture de Bootstrap (identiques en 4 et 5 : xl 1200, lg 992, md 768)
   ========================================================================== */
@media (max-width: 1399.98px) {
  .fn-nav__link { padding: .7rem .7rem; --fn-a-size: .9375rem; }
}

@media (max-width: 1199.98px) {
  .fn-header__toggle { display: inline-grid; place-items: center; }
  .fn-nav {
    display: none; position: absolute; left: var(--fn-gutter); right: var(--fn-gutter); top: 100%;
    border-radius: var(--fn-radius-md); padding: 1rem; box-shadow: var(--fn-shadow-card);
  }
  .fn-nav.is-open { display: block; }
  .fn-nav__list { flex-direction: column; align-items: stretch; }
  .fn-nav { max-height: calc(100vh - 140px); overflow-y: auto; }
  .fn-nav__link { white-space: normal; width: 100%; justify-content: space-between; text-align: left; }   /* reflow 320 px */
  /* Méga-menu en accordéon dans le menu mobile */
  .fn-mega { position: static; }
  .fn-mega::before { display: none; }
  .fn-mega__inner { display: block; max-height: none; overflow: visible; padding: 1rem 1.25rem; margin: .25rem 0 .5rem;
                    border-radius: var(--fn-radius-md); box-shadow: none; }
  .fn-mega__title { --fn-a-size: 1.125rem; font-size: 1.125rem; margin-bottom: .75rem; }
  .fn-mega__text { display: none; }
  .fn-mega__groups { columns: 1; }
  .fn-mega__group { padding-bottom: .75rem; }
  .fn-mega__l2 { --fn-a-size: 1.0625rem; font-size: 1.0625rem; }
  .fn-mega__l3 { --fn-a-size: 1rem; font-size: 1rem; }
  .fn-mega__l3--parent { --fn-a-size: 1rem; font-size: 1rem; }
  .fn-mega__l4 { --fn-a-size: .9375rem; font-size: .9375rem; }
}

@media (max-width: 991.98px) {
  .fn-topbar__links { display: none; }
  .fn-hero__inner,
  .fn-quick__layout,
  .fn-why__layout,
  .fn-promo,
  .fn-baef__layout,
  .fn-footer__grid { grid-template-columns: 1fr; }
  .fn-hero__inner { text-align: center; }
  .fn-hero__media { order: 2; }
  .fn-hero__media img { max-width: 380px; }
  .fn-quick__media { margin-left: 0; border-radius: var(--fn-radius-lg); aspect-ratio: 16 / 9; }
  .fn-enrol { background: linear-gradient(180deg, var(--fn-white) 0 12%, var(--fn-teal-500) 12% 100%); }
  .fn-enrol__grid { grid-template-columns: 1fr; max-width: 480px; }
  .fn-why__mascot { order: -1; }
  .fn-nordi { width: min(100%, 240px); }
  .fn-baef__media { max-width: 520px; }
  .fn-news__title { border-right: 0; padding-right: 0; }
  .fn-news__all { margin-left: 0; }
}

@media (max-width: 767.98px) {
  .fn-sidetools { width: auto; top: auto; bottom: 0; left: 0; right: 0; transform: none; border-radius: var(--fn-radius-md) var(--fn-radius-md) 0 0; padding: .25rem; }
  .fn-sidetools__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .fn-sidetools__link { width: auto; min-width: 0; }
  .fn-copyright { padding-bottom: 72px; } /* place pour la barre basse mobile */
  .fn-iwant__grid { grid-template-columns: 1fr; }
  .fn-topbar .fn-topbar__cta { padding-inline: 1rem; white-space: nowrap; --fn-a-size: .75rem; }
  .fn-topbar__inner { gap: .5rem; }
  .fn-topbar__group { gap: .75rem; }
  .fn-topbar__social { display: none; }
  .fn-testimonials__box { padding-bottom: 8rem; }
  .fn-why__head { padding-right: 0; }
  .fn-why__head::after, .fn-why__head::before { display: none; }
}

@media (max-width: 374.98px) {                     /* reflow 320 px (1.4.10) */
  .fn-topbar .fn-topbar__cta { white-space: normal; line-height: 1.15; padding-inline: .75rem 1rem; max-width: 8rem; }
  .fn-topbar__group--end { padding-right: 0; }
  .fn-lang__select { padding-left: .8em; }
}