@charset "UTF-8";
/* =============================================================================
   NEXUS — nexus-ux.css
   Systeme d'ergonomie, de rythme et d'interactivite du site.
   Charge par le mu-plugin nexus-ux.php (version = filemtime).

   Sommaire (l'ordre des sections EST l'ordre de la cascade)
     1.  Tokens de marque + contrat de variables du socle
     2.  Polices et base typographique
     3.  Colonne de contenu et echelle des titres
     4.  Confort de lecture et centrage des blocs
     5.  Rythme vertical (echelle 56 / 96 / 140)
     6.  Systeme d'images unique (ratio 1.3, radius 12, cover)
     7.  En-tete collant + logo + ancres
     8.  Liens, boutons, :focus-visible
     9.  Accordeons <details>/<summary>
     10. Etat de base des revelations
     11. Barre de progression de lecture
     15. Reprise des blocs <style> des pages et du CSS additionnel
     16. Animations (classes .nxa-*, posees par nexus-ux.js)
     17. Socle typographique et classes de contenu .nx-*
     13. prefers-reduced-motion
     12. Mobile (<= 980 / <= 640 / <= 400) — APRES le socle, sinon ses
         surcharges de meme specificite ne s'appliquent jamais
     14. Impression

   Deux familles de classes, deux prefixes, aucune collision possible :
     .nxa-*  etat d'ANIMATION, pose et retire par nexus-ux.js (section 16).
     .nx-*   classe de CONTENU, ecrite dans le HTML des pages (section 17).
   Le socle ne teste plus `:not([class*="nx-"])` : voir section 1.

   Convention de specificite : le contenu des pages porte de nombreux styles
   INLINE (margin, font-size, color, text-align). Un style inline bat toute
   regle de feuille sans !important : chaque fois qu'une regle d'ici doit
   corriger une geometrie posee en inline, elle porte donc !important, et elle
   est cadree au plus juste. A l'inverse, le socle de la section 17 est ecrit
   SANS !important : il est fait pour s'appliquer une fois les styles inline
   retires du contenu.
   ========================================================================== */


/* -- 1. TOKENS DE MARQUE --------------------------------------------------- */
:root{
  --nx-blue:#02356b;
  --nx-blue-deep:#1a3a5c;
  /* Le bleu tres sombre du pied de page et des pastilles. Il coexistait avec
     --nx-blue sans etre nomme : les deux sont desormais distincts. */
  --nx-navy:#162d4d;
  --nx-ink:#1d1e20;
  --nx-accent:#dd6917;
  --nx-accent-dark:#b5560f;
  /* Orange ECLAIRCI, reserve aux fonds sombres. #dd6917 sur #162d4d ne donne
     que 4,03:1 : sous le seuil AA de 4,5:1 exige pour du texte de 13px, meme
     en gras (le palier "grand texte" a 3:1 ne commence qu'a 18,66px gras ou
     24px maigre). #e08a3c sur le meme fond donne 5,19:1 et passe. */
  --nx-accent-on-dark:#e08a3c;
  /* Meme probleme sur le bandeau ciel : #dd6917 sur #9cc8e5 tombe a
     1,93:1, le pire contraste du site (10 occurrences mesurees le 11/09).
     #7a3907 y donne 4,89:1 et passe AA en texte courant. */
  --nx-accent-on-sky:#7a3907;
  --nx-sky:#9cc8e5;
  --nx-bg:#f5f6f8;
  --nx-line:rgba(2,53,107,.12);
  --nx-filet:rgba(0,0,0,.08);

  --nx-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --nx-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* echelle d'espacement unique : 56 / 96 / 140 */
  --nx-space-s:56px;
  --nx-space-m:96px;
  --nx-space-l:140px;
  --nx-section-y:var(--nx-space-m);
  --nx-hero-top:var(--nx-space-l);
  --nx-hero-bottom:var(--nx-space-m);

  /* largeurs */
  --nx-row-max:1224px;
  --nx-chapeau-max:760px;
  --nx-ul-indent:28px;

  /* systeme d'images */
  --nx-img-ratio:1.3;
  --nx-img-radius:12px;

  --nx-ease:cubic-bezier(.2,.6,.2,1);

  /* ---- CONTRAT DE VARIABLES DU SOCLE (voir sections 4 et 17) --------------
     Le socle ne se protege plus par `:not([class*="nx-"])`. Cette garde etait
     fausse par construction : toute classe .nx-* posee sur un paragraphe le
     faisait retomber au 14px de Divi, y compris les classes d'animation
     posees par le JS. Elle redevenait fausse a chaque classe ajoutee.

     A la place, la regle de base est UNIQUE et s'applique a TOUS les
     paragraphes ; sa valeur est lue dans une variable. Une classe qui a une
     forme particuliere ne se bat donc plus contre la specificite du socle :
     elle DECLARE sa valeur, et le socle la sert.

       --nx-fs / --nx-lh / --nx-mt / --nx-mb / --nx-col   corps de texte (p, li, ul)
       --nx-fs-h / --nx-lh-h / --nx-fw-h /
       --nx-mt-h / --nx-mb-h / --nx-col-h                 titres (h1..h4)

     Elles se posent sur le BLOC lui-meme (ou sur un conteneur, elles
     heritent : c'est ainsi que .nx-on-dark recolore tout ce qu'il contient).
     Les crans .nx-mt-* / .nx-mb-* (section 17.10) les posent pour toi.

       --nx-fs-base / --nx-lh-base              defaut du corps de texte
       --nx-h1 .. --nx-h4                       defaut des titres

     Ces valeurs PAR DEFAUT sont responsives : elles changent en section 12 et
     sur les colonnes etroites, jamais par une classe.
     REGLE : toute regle GENERIQUE qui pose une taille ou une marge doit lire
     la variable correspondante. Une generique qui ecrit une valeur en dur
     pese plus qu'une classe et la rend inerte — c'est exactement ce qui est
     arrive aux marges de titres en section 12.
     Aucune liste de :not() a tenir a jour. */
  --nx-fs-base:18px;
  --nx-lh-base:1.65;
  --nx-h1:40px;
  --nx-h2:36px;
  --nx-h3:26px;
  --nx-h4:20px;

  /* Chrome REELLEMENT fixe en haut de fenetre : #top-header (33px) +
     #main-header (90px) = 123px au-dessus de 980px de large. C'est la seule
     valeur dont depend scroll-padding-top. Le JS la reajuste par mesure, mais
     la valeur statique doit etre juste : au chargement a froid sur une ancre,
     le navigateur saute au fragment AVANT l'execution du JS, en ne disposant
     que de la feuille de style (bloquante). */
  --nx-sticky-h:123px;
  /* Hauteur du seul #main-header, tenue a jour par le JS. Distincte de
     --nx-sticky-h : #main-header n'est pas toujours fixe, et il n'est pas
     seul a l'etre. Ne pas confondre les deux. */
  --nx-header-h:90px;
}


/* -- 2. POLICES ET BASE TYPOGRAPHIQUE -------------------------------------- */
html body,
html body p,
html body li,
html body dd,
html body dt,
html body td,
html body th,
html body input,
html body select,
html body textarea,
html body button,
html body a:not(.et_pb_button),
html body #et-top-navigation,
html body #top-menu li a,
html body .et_mobile_menu li a{
  font-family:var(--nx-sans) !important;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .entry-title,
html body #page-container .et_pb_section h1,
html body #page-container .et_pb_section h2,
html body #page-container .et_pb_section h3,
html body #page-container .et_pb_section h4,
html body #page-container .et_pb_module h1,
html body #page-container .et_pb_module h2,
html body #page-container .et_pb_module h3,
html body #page-container .et_pb_module h4{
  font-family:var(--nx-serif) !important;
  letter-spacing:-.01em;
}

html body{ color:var(--nx-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html body strong, html body b{ font-weight:700; }


/* -- 3. COLONNE DE CONTENU ET ECHELLE DES TITRES --------------------------- */
/* Aligne sur nexus-thinktank.fr : 1224px / 90%.
   Ecrit dans :where() — donc a specificite ZERO sur le prefixe — et SANS
   !important, a dessein. Avec !important cette regle ecrasait le `max_width`
   pose ligne par ligne dans le Builder : mesure sur /mentions-legales/, des
   lignes reglees a 880px couraient a 1224px, soit ~140 signes par ligne.
   Elle doit RELEVER le defaut de Divi (1080px/80%), jamais RABAISSER une
   valeur plus etroite voulue par la maquette. A specificite egale, la regle
   par ligne de Divi est imprimee apres cette feuille et l'emporte donc.

   Mais laisser Divi gagner sur `max-width` seul ne suffit PAS a garantir un
   plafond : une ligne reglee a max-width:1300px dans le Builder repassait
   alors a 1296px de large (mesure sur /blog/, un paragraphe courant y tenait
   ~160 signes par ligne). Le plafond est donc pose sur `width`, propriete que
   Divi ne redefinit pas par ligne : min() borne la largeur a 1224px quoi qu'il
   arrive, tandis que `max-width` reste libre de la RESSERRER davantage.
     ligne sans reglage    -> 90% borne a 1224
     ligne reglee a 880px  -> max-width gagne -> 880
     ligne reglee a 1300px -> le plafond tient -> 1224 */
:where(html body #main-content) .et_pb_row{
  max-width:var(--nx-row-max);
  width:min(90%,var(--nx-row-max));
}

/* Taille des titres : valeur par defaut responsive (--nx-h1..--nx-h4, posees
   sur :root et revues en section 12), qu'une classe posee SUR LE TITRE peut
   remplacer par --nx-fs-h (.nx-title, .nx-h2-filet-bas...). */
html body #main-content h1,
html body #left-area h1,
html body .entry-title{ font-size:var(--nx-fs-h,var(--nx-h1)) !important; line-height:var(--nx-lh-h,1.2) !important; }
html body #main-content h2,
html body #left-area h2{ font-size:var(--nx-fs-h,var(--nx-h2)) !important; line-height:var(--nx-lh-h,1.25) !important; }
html body #main-content h3,
html body #left-area h3{ font-size:var(--nx-fs-h,var(--nx-h3)) !important; line-height:var(--nx-lh-h,1.3) !important; }
html body #main-content h4,
html body #left-area h4{ font-size:var(--nx-fs-h,var(--nx-h4)) !important; line-height:var(--nx-lh-h,1.35) !important; }


/* -- 4. CONFORT DE LECTURE ------------------------------------------------- */
/* 18px / 1.65 sur le corps de texte reel : paragraphes et listes enfants
   DIRECTS d'un module de texte Divi.
   AUCUNE exclusion par classe ici : la valeur vient de --nx-fs / --nx-lh
   (contrat decrit en section 1). Un paragraphe DENUDE rend donc toujours
   18px/1.65, quelles que soient les classes que le JS lui pose. */
html body #main-content .et_pb_text_inner > p,
html body #main-content .et_pb_text_inner > ul,
html body #main-content .et_pb_text_inner > ol,
html body #main-content .et_pb_text_inner > ul > li,
html body #main-content .et_pb_text_inner > ol > li,
html body #left-area .entry-content > p,
html body #left-area .entry-content > ul,
html body #left-area .entry-content > ol,
html body #left-area .entry-content > ul > li,
html body #left-area .entry-content > ol > li{
  font-size:var(--nx-fs,var(--nx-fs-base)) !important;
  line-height:var(--nx-lh,var(--nx-lh-base)) !important;
}
/* Le <ul> LUI-MEME porte la taille, pas seulement ses <li> : sans cela il
   restait a 14px et tout `em` calcule dans une liste etait faux. */

/* Colonnes etroites : on redescend a 16px, 18px y serait a l'etroit. La
   valeur est posee sur le CONTENEUR et heritee ; une classe posee sur le
   paragraphe (--nx-fs) reste prioritaire. */
html body #main-content .et_pb_column_1_3 .et_pb_text_inner,
html body #main-content .et_pb_column_1_4 .et_pb_text_inner,
html body #main-content .et_pb_column_1_5 .et_pb_text_inner,
html body #main-content .et_pb_column_1_6 .et_pb_text_inner,
html body #main-content .et_pb_column_3_8 .et_pb_text_inner{
  --nx-fs-base:16px;
  --nx-lh-base:1.6;
}

/* PAS de colonne de lecture : un paragraphe occupe toute sa colonne.
   Mesure sur nexus-thinktank.fr (11/09) : aucun paragraphe n'y porte de
   max-width, sur AUCUNE page — la longueur de ligne est pilotee par la
   largeur de la colonne, pas par un plafond sur le texte. */

/* Un bloc centre doit etre centre DANS sa colonne, pas seulement en interne.
   Deux signaux de centrage coexistent dans le contenu, il faut les deux :
     - la classe de module Divi .et_pb_text_align_center ;
     - un text-align:center pose en style INLINE sur l'element lui-meme.
   Le !important est indispensable : ces elements portent presque tous un
   `margin:` inline, qui bat une regle sans !important.
   Les LISTES en sont exclues : `margin-left:auto` sur un <ul> ecrase son
   indentation (mesure : margin-left 0 sur tout module centre), et centrer un
   bloc pleine largeur ne produit rien d'autre que ce degat. */
html body #main-content .et_pb_text_align_center .et_pb_text_inner > p,
html body #main-content .et_pb_text_align_center .et_pb_text_inner > blockquote,
html body #main-content .et_pb_text_align_center .et_pb_text_inner > h1,
html body #main-content .et_pb_text_align_center .et_pb_text_inner > h2,
html body #main-content .et_pb_text_align_center .et_pb_text_inner > h3,
html body #main-content .et_pb_text_align_center .et_pb_text_inner > h4,
html body #main-content .et_pb_text_inner > [style*="text-align:center"],
html body #main-content .et_pb_text_inner > [style*="text-align: center"],
html body #main-content .et_pb_text_inner > .nx-center,
html body #left-area .entry-content > [style*="text-align:center"],
html body #left-area .entry-content > [style*="text-align: center"],
html body #left-area .entry-content > .nx-center{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Espacement interne du texte long. 24px reprend exactement la valeur des
   styles en ligne du contenu (motif dominant : margin:0 0 24px). --nx-mt et
   --nx-mb permettent a une classe de poser ses propres valeurs. */
html body #main-content .et_pb_text_inner > p,
html body #left-area .entry-content > p{
  margin-top:var(--nx-mt,0);
  margin-bottom:var(--nx-mb,24px);
}
html body #main-content .et_pb_text_inner li{ margin-bottom:.4em; }


/* -- 5. RYTHME VERTICAL (56 / 96 / 140) ------------------------------------ */
html body #main-content .et_pb_section{
  padding-top:var(--nx-section-y) !important;
  padding-bottom:var(--nx-section-y) !important;
}
/* Premiere section = section qui n'est precedee d'aucune autre section. */
html body #main-content .et_pb_section:not(.et_pb_section ~ .et_pb_section){
  padding-top:var(--nx-hero-top) !important;
  padding-bottom:var(--nx-hero-bottom) !important;
}
html body #main-content .et_pb_fullwidth_section,
html body #main-content .et_pb_section.nx-flush{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
html body #main-content .et_pb_section + .et_pb_section.nx-tight{
  padding-top:var(--nx-space-s) !important;
}
html body #main-content .et_pb_row{ padding-top:0; padding-bottom:0; }


/* -- 6. SYSTEME D'IMAGES UNIQUE -------------------------------------------- */
html body #main-content .et_pb_image .et_pb_image_wrap,
html body #main-content .et_pb_blurb_image .et_pb_image_wrap,
html body #left-area .et_pb_image .et_pb_image_wrap,
html body .et_pb_post .entry-featured-image-url,
html body .et_pb_blog_grid .et_pb_image_container{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:var(--nx-img-radius);
  aspect-ratio:var(--nx-img-ratio);
  background:var(--nx-bg);
  line-height:0;
}
html body #main-content .et_pb_image .et_pb_image_wrap > img,
html body #main-content .et_pb_blurb_image .et_pb_image_wrap > img,
html body #left-area .et_pb_image .et_pb_image_wrap > img,
html body .et_pb_post .entry-featured-image-url > img,
html body .et_pb_blog_grid .et_pb_image_container img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  border-radius:0 !important;
  display:block;
}
/* Les images ne portent plus d'interdiction d'ombre : l'ombre est desormais
   animee a l'apparition (section 16.1). */
html body #main-content .et_pb_image img,
html body #left-area .et_pb_image img,
html body .et_pb_post .entry-featured-image-url img{
  filter:none !important;
}
/* Echappatoires : logos, pictos, SVG et opt-out explicite gardent leur forme. */
html body #main-content .et_pb_image.nx-img-free .et_pb_image_wrap,
html body #main-content .nx-img-free .et_pb_image_wrap{
  aspect-ratio:auto; border-radius:0; background:none;
}
html body #main-content .et_pb_image.nx-img-free .et_pb_image_wrap > img,
html body #main-content .nx-img-free .et_pb_image_wrap > img{
  height:auto !important; width:auto !important; max-width:100% !important; object-fit:contain !important;
}
html body #main-content .et_pb_image_wrap > img[src$=".svg"],
html body #main-content .et_pb_image_wrap > img[src*=".svg?"]{
  object-fit:contain !important;
}

/* Compatibilite : legende en surimpression codee en dur dans le contenu. */
html body #main-content .et_pb_image:has(+ .et_pb_text .et_pb_text_inner > p[style*="margin-top:-"]){
  margin-bottom:0 !important;
}
html body #main-content .et_pb_image + .et_pb_text:has(> .et_pb_text_inner > p[style*="margin-top:-"]){
  height:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  overflow:visible;
}
html body #main-content .et_pb_image + .et_pb_text .et_pb_text_inner > p[style*="margin-top:-"]{
  margin-top:0 !important;
  transform:translateY(calc(-100% - 20px));
}

html body #main-content img, html body #left-area img{ max-width:100%; height:auto; }


/* -- 7. EN-TETE COLLANT + LOGO + ANCRES ------------------------------------ */
/* Une ancre doit se poser SOUS le chrome fixe, avec 24px de respiration.
   Voir --nx-sticky-h en section 1 : c'est la somme des barres reellement
   fixes, pas la hauteur du seul #main-header. */
html{ scroll-padding-top:calc(var(--nx-sticky-h) + 24px); }
html body #page-container #main-header{
  transition:box-shadow .25s var(--nx-ease), background-color .25s var(--nx-ease);
}
html body #page-container #main-header.et-fixed-header,
html body #page-container #main-header.nx-scrolled{
  box-shadow:0 1px 0 var(--nx-line), 0 10px 30px rgba(2,53,107,.07) !important;
}
html body #page-container #main-header .logo_container{
  background-image:none !important;
  align-items:center !important;
}
html body #page-container #main-header .logo_container #logo{
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-height:48px !important;
  max-width:260px !important;
}
html body #page-container #main-header.et-fixed-header .logo_container #logo{
  max-height:40px !important;
}
html body #main-header #et-top-navigation #top-menu li.current-menu-item > a,
html body #main-header #et-top-navigation #top-menu li.current_page_item > a,
html body #main-header #et-top-navigation #top-menu li.current-menu-ancestor > a{
  color:var(--nx-accent) !important;
  box-shadow:inset 0 -2px 0 0 var(--nx-accent);
  padding-bottom:6px;
}


/* -- 8. LIENS, BOUTONS, FOCUS ---------------------------------------------- */
/* Lien courant dans le corps de texte. */
html body #main-content .et_pb_text_inner a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)),
html body #left-area .entry-content a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)){
  color:var(--nx-blue);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(2,53,107,.35);
  transition:color .18s var(--nx-ease), text-decoration-color .18s var(--nx-ease);
}
html body #main-content .et_pb_text_inner a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)):hover,
html body #left-area .entry-content a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)):hover{
  color:var(--nx-accent);
  text-decoration-color:var(--nx-accent);
}

/* Pourquoi :where() dans les :not() ci-dessus : chaque :not() compte pour
   une classe. Ecrite `a:not(.et_pb_button):not(.nx-card-link)`, la regle
   generique pesait (1,3,3) et battait encore le rejeu des classes en (1,2,3)
   — mesure : .nx-link-accent rendait bleu, .nx-pill sortait souligne.
   :where() ne compte pour RIEN dans le calcul : la generique retombe a
   (1,1,3), le rejeu la bat proprement, et on pourra allonger la liste
   d'exclusions sans jamais redecaler la specificite. */
html body #main-content .et_pb_text_inner a.nx-link,
html body #left-area .entry-content a.nx-link{
  color:var(--nx-blue); font-weight:600;
}
html body #main-content .et_pb_text_inner a.nx-link-accent,
html body #left-area .entry-content a.nx-link-accent{
  color:var(--nx-accent); font-weight:600;
  text-decoration-color:rgba(221,105,23,.4);
}
html body #main-content .et_pb_text_inner a.nx-link-accent:hover,
html body #left-area .entry-content a.nx-link-accent:hover{
  color:var(--nx-accent-dark); text-decoration-color:var(--nx-accent-dark);
}
html body #main-content .et_pb_text_inner a.nx-pill,
html body #left-area .entry-content a.nx-pill,
html body #main-content .et_pb_text_inner a.nx-pill:hover,
html body #left-area .entry-content a.nx-pill:hover{
  color:#fff; text-decoration:none;
}

/* Sur fond sombre le lien courant passe au blanc. Meme raisonnement de
   specificite : le contexte .nx-on-dark est rejoue ici pour battre (1,1,3). */
html body #main-content .nx-on-dark a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)),
html body #main-content .nx-on-dark .et_pb_text_inner a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)){
  color:#fff;
  text-decoration-color:rgba(255,255,255,.5);
}
html body #main-content .nx-on-dark a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)):hover,
html body #main-content .nx-on-dark .et_pb_text_inner a:not(:where(.et_pb_button,.nx-card-link,.nx-pill)):hover{
  color:var(--nx-accent-on-dark);
  text-decoration-color:var(--nx-accent-on-dark);
}

html body #top-menu > li > a{ padding-top:6px; padding-bottom:6px; }

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible,
html body .et_pb_button:focus-visible{
  outline:3px solid var(--nx-accent) !important;
  outline-offset:3px !important;
  border-radius:4px;
}
html body :focus:not(:focus-visible){ outline:none; }


/* -- 9. ACCORDEONS <details>/<summary> ------------------------------------- */
html body #main-content details,
html body #left-area details{
  border:1px solid var(--nx-line);
  border-radius:10px;
  background:#fff;
  margin:0 0 12px;
  overflow:hidden;
}
html body #main-content details + details,
html body #left-area details + details{ margin-top:0; }
html body #main-content details > summary,
html body #left-area details > summary{
  cursor:pointer;
  list-style:none;
  display:block;
  position:relative;
  padding:18px 54px 18px 22px;
  font-family:var(--nx-sans) !important;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--nx-blue);
  transition:background-color .18s var(--nx-ease);
}
html body details > summary::-webkit-details-marker{ display:none; }
html body details > summary::marker{ content:""; }
html body #main-content details > summary:hover,
html body #left-area details > summary:hover{ background:var(--nx-bg); }
html body #main-content details > summary::after,
html body #left-area details > summary::after{
  content:"";
  position:absolute;
  right:24px; top:calc(50% - 6px);
  width:9px; height:9px;
  border-right:2px solid var(--nx-accent);
  border-bottom:2px solid var(--nx-accent);
  transform:rotate(45deg);
  transition:transform .25s var(--nx-ease);
}
html body #main-content details[open] > summary::after,
html body #left-area details[open] > summary::after{
  transform:rotate(-135deg); top:calc(50% - 2px);
}
html body #main-content details[open] > summary,
html body #left-area details[open] > summary{ border-bottom:1px solid var(--nx-line); }
html body .nx-acc-body{ padding:18px 22px 22px; }
html body #main-content details > *:not(summary):not(.nx-acc-body),
html body #left-area details > *:not(summary):not(.nx-acc-body){ margin-left:22px; margin-right:22px; }
html body #main-content details > *:not(summary):not(.nx-acc-body):last-child,
html body #left-area details > *:not(summary):not(.nx-acc-body):last-child{ margin-bottom:20px; }
html body .nx-acc-body > *:last-child{ margin-bottom:0; }
html body .nx-acc-body p{ font-size:17px; line-height:1.65; }
html body #main-content .et_pb_toggle{
  border:1px solid var(--nx-line) !important;
  border-radius:10px !important;
  background:#fff !important;
}
html body #main-content .et_pb_toggle_title{ font-family:var(--nx-sans) !important; color:var(--nx-blue) !important; }


/* -- 10. ETAT DE BASE DES REVELATIONS -------------------------------------- */
/* Bloc generique : fondu + montee de 24px. Les etats particuliers (rideau des
   images .nxa-clip, cartes .nxa-lift, H3 .nxa-fade-up) sont en section 16. */
html.nx-js .nxa-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s var(--nx-ease), transform .65s var(--nx-ease);
}
html.nx-js .nxa-reveal.nxa-in{ opacity:1; transform:none; }


/* -- 11. BARRE DE PROGRESSION DE LECTURE ----------------------------------- */
.nx-progress{
  position:fixed; inset:0 0 auto 0;
  height:3px;
  z-index:100000;
  background:transparent;
  pointer-events:none;
}
.nx-progress > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--nx-blue) 0%,var(--nx-accent) 100%);
  transition:width .08s linear;
}


/* -- 15. REPRISE DES BLOCS <style> ET DU CSS ADDITIONNEL -------------------- */
/* Regles qui n'existaient que dans le bloc <style> des 11 pages, le CSS
   additionnel du Customizer et le widget HTML du Pied de page #1. */

/* 15.1 Classes utilitaires posees dans le contenu des pages ---------------- */
/* .nx-accent, .nx-serif, .nx-uppercase et .nx-quote-box ont rejoint le socle
   typographique (section 17) : elles y sont ecrites avec le contrat de
   variables. Ne restent ici que les blocs sans equivalent typographique. */
html body .nx-pill{
  display:inline-block;
  background:var(--nx-accent);
  color:#fff !important;
  padding:14px 32px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s;
  font-family:var(--nx-sans) !important;
  font-size:16px;
}
html body .nx-pill:hover{ background:var(--nx-accent-dark); color:#fff; }
.nx-card-valeur{
  background:#fff;
  border-left:3px solid var(--nx-accent);
  padding:14px 18px;
  font-family:var(--nx-sans);
  color:var(--nx-ink);
  font-size:15px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.nx-partner-card{
  background:#fff;
  padding:28px 16px;
  text-align:center;
  color:var(--nx-ink);
  font-family:var(--nx-sans);
  font-size:13px;
  letter-spacing:1px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  border-radius:2px;
}

/* 15.2 Bouton Divi orange -------------------------------------------------- */
html body .et_pb_button.nx-orange-btn,
html body a.et_pb_button.nx-orange-btn{
  background:var(--nx-accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:30px !important;
  padding:14px 32px !important;
  font-family:var(--nx-sans) !important;
  font-weight:600 !important;
}
html body .et_pb_button.nx-orange-btn:after,
html body a.et_pb_button.nx-orange-btn:after{ display:none !important; }
html body .et_pb_button.nx-orange-btn:hover{ background:var(--nx-accent-dark) !important; padding:14px 32px !important; }

/* 15.3 Carrousel de partenaires -------------------------------------------- */
.nx-banderole-track{ overflow:hidden; width:100%; }
.nx-banderole{ display:flex; gap:60px; align-items:center; animation:nx-scroll 30s linear infinite; width:max-content; }
.nx-logo-partenaire{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:200px; padding:16px; }
.nx-logo-partenaire img{ max-height:60px; width:auto; opacity:.65; filter:grayscale(100%); transition:opacity .3s, filter .3s; }
.nx-logo-partenaire:hover img{ opacity:1; filter:grayscale(0); }
.nx-logo-partenaire .nx-logo-nom{ font-family:var(--nx-sans); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#1a2638; opacity:.7; }
@keyframes nx-scroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* 15.4 Pied de page --------------------------------------------------------- */
#main-footer .container{ max-width:var(--nx-row-max) !important; width:90% !important; }
#footer-bottom{ display:none !important; }
#footer-widgets{ padding:60px 0 60px !important; }
#footer-widgets .footer-widget{ padding:24px 16px; }
#main-footer{ background-color:var(--nx-navy) !important; }
#main-footer .footer-widget a{ color:#fff !important; }
.footer-widget h4.title{ display:none !important; }

/* 15.5 Article seul : pas de barre laterale, pas de meta ------------------- */
body.single-post .et_post_meta_wrapper{ display:none !important; }
body.single-post #left-area{ padding-top:0 !important; width:100% !important; max-width:100% !important; float:none !important; }
body.single-post #sidebar{ display:none !important; }

/* 15.6 Cadrage du portrait du president ------------------------------------ */
html body #main-content .et_pb_image_wrap > img[src*="accueil-president-candotti"],
html body #main-content .et_pb_image_wrap > img[src*="apropos-fondateur"],
html body #left-area .et_pb_image_wrap > img[src*="accueil-president-candotti"],
html body #left-area .et_pb_image_wrap > img[src*="apropos-fondateur"]{
  object-position:center 18% !important;
}

/* 15.7 Garde-fous globaux --------------------------------------------------- */
*{ box-sizing:border-box; }
html, body{ overflow-x:hidden; max-width:100vw; }
/* .et_pb_row a ete RETIRE de ce garde-fou : a specificite egale et ecrit
   apres la section 3, son `max-width:100%` y ecrasait le plafond de largeur
   de ligne des que celui-ci a cesse d'etre !important. Le debordement des
   lignes est deja empeche par leur `width:min(90%,...)`. */
.et_pb_section{ max-width:100%; }

/* 15.8 En-tete : conteneur de menu et hauteur de barre --------------------- */
#main-header .container.et_menu_container{ max-width:1320px; }
#main-header{ min-height:90px; }


/* -- 16. ANIMATIONS -------------------------------------------------------- */
/* Toutes pilotees par une classe posee par nexus-ux.js. Sans JS, aucune classe
   n'est posee : rien n'est masque, rien n'est anime.
   Seules `opacity` et `transform` sont animees. */

/* 16.0 Titre H1 a l'ouverture de la page : montee + resserrement de
   l'interlettrage (tracking-in), puis le chapeau et le bouton du hero avec un
   seul leger decalage. Pure CSS, declenche au premier rendu : la classe
   .nx-js est posee dans <head> par nexus-ux-head.php, donc aucun eclair. */
@keyframes nx-title-in{
  0%{   opacity:0; transform:translateY(28px); letter-spacing:.06em; }
  100%{ opacity:1; transform:none;             letter-spacing:-.01em; }
}
@keyframes nx-sub-in{
  0%{   opacity:0; transform:translateY(20px); }
  100%{ opacity:1; transform:none; }
}
html.nx-js #main-content h1,
html.nx-js #left-area h1,
html.nx-js .entry-title{
  animation:nx-title-in .9s var(--nx-ease) both;
}
/* ce qui suit le H1 dans le meme module de texte (chapeau, liste) */
html.nx-js #main-content .et_pb_text_inner > h1 ~ *,
html.nx-js #left-area .entry-content > h1 ~ *{
  animation:nx-sub-in .7s var(--nx-ease) .18s both;
}
/* bouton du hero : premier module bouton de la premiere section */
html.nx-js #main-content .et_pb_section:not(.et_pb_section ~ .et_pb_section) .et_pb_button_module_wrapper,
html.nx-js #main-content .nx-hero-cta{
  animation:nx-sub-in .7s var(--nx-ease) .32s both;
}

/* 16.1 Ombre des images. Deux niveaux : une ombre de repos, toujours la,
   qui assoit l'image dans la page ; et une ombre portee plus profonde au
   defilement vers le bas (classe .nxa-shadow posee par le JS selon le sens),
   qui se retire en remontant. Le ::after porte l'ombre pour ne jamais
   toucher le cadre (overflow:hidden + ratio fixe). */
html body #main-content .et_pb_image,
html body #left-area .et_pb_image{ position:relative; }
html body #main-content .et_pb_image::after,
html body #left-area .et_pb_image::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--nx-img-radius);
  box-shadow:0 12px 28px -10px rgba(2,53,107,.30), 0 3px 8px -2px rgba(2,53,107,.12);
  opacity:1;
  transition:opacity .45s var(--nx-ease), box-shadow .45s var(--nx-ease);
  pointer-events:none;
}
html body #main-content .et_pb_image.nxa-shadow::after,
html body #left-area .et_pb_image.nxa-shadow::after{
  box-shadow:0 30px 48px -16px rgba(2,53,107,.55), 0 10px 20px -8px rgba(2,53,107,.28);
}
/* pas d'ombre tant que le rideau (16.4) n'est pas leve */
html.nx-js #main-content .et_pb_image.nxa-clip:not(.nxa-in)::after,
html.nx-js #left-area .et_pb_image.nxa-clip:not(.nxa-in)::after{ opacity:0; }
/* logos, pictos et opt-out : jamais d'ombre */
html body #main-content .et_pb_image.nx-img-free::after,
html body #main-content .et_pb_image:has(> .et_pb_image_wrap > img[src$=".svg"])::after{ display:none; }

/* 16.1bis Zoom continu des images (pilote image par image en JS, section 3ter).
   Pas de transition : la valeur est reecrite a chaque trame. */
html.nx-js #main-content .et_pb_image_wrap > img.nxa-zoom,
html.nx-js #left-area .et_pb_image_wrap > img.nxa-zoom,
html.nx-js .nx-media > img.nxa-zoom{
  transform-origin:center center;
}

/* 16.2 scale-up-center discret (3 %) : conserve pour compatibilite. */
html.nx-js .nxa-scale{
  opacity:0;
  transform:scale(.97);
  transition:opacity .5s var(--nx-ease), transform .5s var(--nx-ease);
}
html.nx-js .nxa-scale.nxa-in{ opacity:1; transform:none; }

/* 16.4 Rideau des images : le cadre se devoile de bas en haut, pendant que le
   zoom continu (16.1bis) travaille l'image a l'interieur. */
html.nx-js .nxa-clip .et_pb_image_wrap{
  clip-path:inset(0 0 100% 0 round var(--nx-img-radius));
  transition:clip-path .9s var(--nx-ease);
}
html.nx-js .nxa-clip.nxa-in .et_pb_image_wrap{
  clip-path:inset(0 0 0 0 round var(--nx-img-radius));
}

/* 16.5 Cartes et encarts (cartes-liens, cartes valeurs, partenaires,
   blurbs, encadres, citations) : montee + leger scale, et l'ombre de la carte
   n'apparait qu'a l'arrivee, ce qui la fait "se poser" sur la page.
   Le JS pose AUSSI la classe .nx-lift sur ces memes blocs : elle n'est plus
   stylee ici, elle sert uniquement de point d'accroche a nexus-listes.php
   (hors perimetre A3), qui s'en sert comme contexte dans deux regles de
   survol. A retirer du JS le jour ou ce fichier passera a .nxa-lift. */
html.nx-js .nxa-lift{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .7s var(--nx-ease), transform .7s var(--nx-ease);
}
html.nx-js .nxa-lift.nxa-in{ opacity:1; transform:none; }
html.nx-js .nxa-lift .nx-card-link,
html.nx-js .nxa-lift .nx-card-valeur,
html.nx-js .nxa-lift .nx-partner-card{
  box-shadow:0 0 0 rgba(2,53,107,0);
  transition:box-shadow .8s var(--nx-ease) .15s, transform .25s var(--nx-ease);
}
html.nx-js .nxa-lift.nxa-in .nx-card-link,
html.nx-js .nxa-lift.nxa-in .nx-card-valeur,
html.nx-js .nxa-lift.nxa-in .nx-partner-card{
  transition:box-shadow .4s var(--nx-ease), transform .25s var(--nx-ease);
}
html.nx-js .nxa-lift.nxa-in .nx-card-link{ box-shadow:0 6px 18px -4px rgba(2,53,107,.16), 0 1px 3px rgba(0,0,0,.06); }
html.nx-js .nxa-lift.nxa-in .nx-card-valeur{ box-shadow:0 8px 20px -10px rgba(2,53,107,.22), 0 1px 3px rgba(0,0,0,.05); }
html.nx-js .nxa-lift.nxa-in .nx-partner-card{ box-shadow:0 6px 16px -8px rgba(2,53,107,.18), 0 1px 4px rgba(0,0,0,.05); }
/* survol des cartes-liens : un peu plus marque qu'avant (17.6) */
.nx-card-link:hover,
html.nx-js .nxa-lift.nxa-in .nx-card-link:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -10px rgba(2,53,107,.24), 0 4px 10px -4px rgba(2,53,107,.12);
}
.nx-quote-box, .nx-callout{ box-shadow:0 14px 32px -16px rgba(2,53,107,.32); }
/* cartes ecrites en ligne dans le contenu (grille inline > a / div) : meme
   survol sur les cartes-liens. Leur ombre est en style inline, d'ou le
   !important au survol. */
html.nx-js .nxa-lift .et_pb_text_inner > [style*="grid"] > a,
html.nx-js .nxa-lift .et_pb_text_inner > [style*="grid"] > div{ transition:box-shadow .3s var(--nx-ease), transform .25s var(--nx-ease); }
html.nx-js .nxa-lift .et_pb_text_inner > [style*="grid"] > a:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -10px rgba(2,53,107,.24), 0 4px 10px -4px rgba(2,53,107,.12) !important;
}

/* 16.6 H3 : fondu + montee courte, en complement de la revelation du module. */
html.nx-js .nxa-fade-up{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--nx-ease) .08s, transform .5s var(--nx-ease) .08s;
}
html.nx-js .nxa-fade-up.nxa-in{ opacity:1; transform:none; }

/* 16.7 Texte courant (paragraphes, items de liste, citations) : chaque bloc
   apparait en entrant dans la zone de lecture et s'estompe en sortant par le
   haut (sous l'en-tete), puis reapparait si l'on remonte. Le JS pose .nxa-text
   et bascule .nxa-in / .nxa-out (section 3quater). Les modules de texte ne
   prennent donc plus de revelation globale : le rythme vient du defilement. */
html.nx-js .nxa-text{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--nx-ease), transform .6s var(--nx-ease);
}
html.nx-js .nxa-text.nxa-in{ opacity:1; transform:none; }
html.nx-js .nxa-text.nxa-out{ opacity:.22; transform:translateY(-4px); transition-duration:.45s; }

/* 16.3 swing-in-left-fwd sur les H2, fondu d'opacite explicitement associe. */
@keyframes nx-swing-in-left-fwd{
  0%{   transform:perspective(800px) rotateY(100deg); opacity:0; }
  100%{ transform:perspective(800px) rotateY(0deg);   opacity:1; }
}
html.nx-js .nxa-swing{
  opacity:0;
  transform-origin:left center;
  backface-visibility:hidden;
}
html.nx-js .nxa-swing.nxa-in{
  animation:nx-swing-in-left-fwd .6s cubic-bezier(.175,.885,.32,1.275) both;
}


/* -- 17. SOCLE TYPOGRAPHIQUE ET CLASSES DE CONTENU ------------------------- */
/* Objectif : rendre redondants les ~1 500 styles en ligne du contenu.
     - un <p>, <li>, <h1>..<h4> nu prend automatiquement la bonne forme ;
     - tout ce qui a une forme PARTICULIERE passe par une classe .nx-* ;
     - la COULEUR n'est pas sure globalement sur fond sombre : Divi marque
       TOUTES les sections `et_pb_bg_layout_light`, y compris celles a fond
       sombre. Un bloc pose sur fond sombre doit recevoir .nx-on-dark dans la
       meme passe, sinon il deviendrait illisible.

   COMMENT ECRIRE UNE CLASSE ICI (contrat, voir aussi section 1)
   Chaque classe typographique declare ses variables PUIS les applique :
       .nx-machin{
         --nx-fs:15px; --nx-lh:1.6; --nx-mb:12px; --nx-col:#333;
         font-size:var(--nx-fs); line-height:var(--nx-lh);
         margin:0 0 var(--nx-mb); color:var(--nx-col);
       }
   Les deux moities servent :
     - les VARIABLES sont lues par le socle (sections 3 et 4) quand le bloc
       est enfant direct d'un module de texte — la ou le socle ecrit en
       !important pour battre les styles en ligne ;
     - les PROPRIETES s'appliquent partout ailleurs (bloc imbrique dans une
       carte, une grille, un <details>...), ou le socle ne va pas.
   Les deux donnent la meme valeur : aucune divergence possible.
   Il n'y a plus AUCUNE liste de :not() a tenir a jour. */

/* 17.1 Corps de texte et titres par defaut --------------------------------- */
html body #main-content .et_pb_text_inner > p,
html body #left-area .entry-content > p{
  color:var(--nx-col,var(--nx-ink));
}
html body #main-content .et_pb_text_inner > ul,
html body #main-content .et_pb_text_inner > ol,
html body #left-area .entry-content > ul,
html body #left-area .entry-content > ol{
  color:var(--nx-col,var(--nx-ink));
  margin:var(--nx-mt,0) 0 var(--nx-mb,24px) var(--nx-ul-indent,28px);
  padding:0;
}
html body #main-content .et_pb_text_inner > h1,
html body #left-area .entry-content > h1{
  color:var(--nx-col-h,var(--nx-blue));
  font-weight:var(--nx-fw-h,600);
  margin:var(--nx-mt-h,0) 0 var(--nx-mb-h,24px);
}
html body #main-content .et_pb_text_inner > h2{
  color:var(--nx-col-h,var(--nx-blue));
  font-weight:var(--nx-fw-h,600);
  margin:var(--nx-mt-h,48px) 0 var(--nx-mb-h,24px);
}
html body #main-content .et_pb_text_inner > h3,
html body #main-content .et_pb_text_inner > h4{
  color:var(--nx-col-h,var(--nx-blue));
  font-weight:var(--nx-fw-h,600);
  margin:var(--nx-mt-h,36px) 0 var(--nx-mb-h,16px);
}
html body #main-content .et_pb_text_inner > h1:first-child,
html body #main-content .et_pb_text_inner > h2:first-child,
html body #main-content .et_pb_text_inner > h3:first-child,
html body #main-content .et_pb_text_inner > h4:first-child{ margin-top:0; }

/* Titres qui ne sont PAS enfants directs du module : rangee a numero, carte,
   encart, grille ecrite en ligne. Ils etaient hors socle et retombaient au
   style de Divi. */
html body #main-content .nx-numero-row h2,
html body #main-content .nx-numero-row h3,
html body #main-content .nx-encart h2,
html body #main-content .nx-encart h3,
html body #main-content .nx-callout h2,
html body #main-content .nx-callout h3,
html body #main-content .nx-fondateur h3{
  color:var(--nx-col-h,var(--nx-blue));
  font-weight:var(--nx-fw-h,600);
  margin:var(--nx-mt-h,0) 0 var(--nx-mb-h,12px);
}
html body #main-content .nx-numero-row h2{ margin:0; }

/* Corps de texte a l'INTERIEUR d'un encadre. Le socle ne vise que les enfants
   DIRECTS d'un module de texte : un paragraphe denude place dans un encart
   retombait a 14px. Ces conteneurs sont donc rattaches au meme contrat. */
html body #main-content .nx-callout p,
html body #main-content .nx-encart p,
html body #main-content .nx-note p,
html body #main-content .nx-fondateur p,
html body #main-content .nx-numero-row p,
html body #left-area .nx-callout p,
html body #left-area .nx-encart p,
html body .nx-p{
  font-size:var(--nx-fs,var(--nx-fs-base)) !important;
  line-height:var(--nx-lh,var(--nx-lh-base)) !important;
  color:var(--nx-col,var(--nx-ink));
  margin-top:var(--nx-mt,0);
  margin-bottom:var(--nx-mb,24px);
}

/* 17.2 Bloc pose sur fond sombre ------------------------------------------- */
/* Les variables se posent sur le conteneur et HERITENT : tout ce qui est a
   l'interieur (paragraphes imbriques compris) devient lisible d'un coup.
   C'est ce qui manquait : la regle `.nx-on-dark p` ne pesait que (1,1,3) et
   perdait contre le socle. */
html body #main-content .nx-on-dark,
html body #left-area .nx-on-dark,
.nx-on-dark{
  --nx-col:rgba(255,255,255,.92);
  --nx-col-h:#fff;
  color:var(--nx-col);
}
html body #main-content .nx-on-dark h1,
html body #main-content .nx-on-dark h2,
html body #main-content .nx-on-dark h3,
html body #main-content .nx-on-dark h4,
.nx-on-dark h1, .nx-on-dark h2, .nx-on-dark h3, .nx-on-dark h4{ color:var(--nx-col-h,#fff); }
html body #main-content .nx-on-dark p,
html body #main-content .nx-on-dark li,
.nx-on-dark p, .nx-on-dark li{ color:var(--nx-col,rgba(255,255,255,.92)); }
/* L'orange de marque ne passe pas le contraste AA sur le bleu sombre :
   sur fond sombre, les surtitres et accents prennent l'orange eclairci. */
.nx-on-dark .nx-kicker,
.nx-on-dark .nx-kicker-sm,
.nx-on-dark .nx-kicker-xs,
.nx-on-dark .nx-accent,
.nx-on-dark .nx-card-meta-accent{ --nx-col:var(--nx-accent-on-dark); color:var(--nx-accent-on-dark) !important; }

/* Bloc pose sur le bandeau ciel (--nx-sky). Symetrique de .nx-on-dark :
   le fond est clair, mais l'orange de marque y est illisible. */
html body #main-content .nx-on-sky,
.nx-on-sky{
  --nx-col:var(--nx-blue-deep);
  --nx-col-h:var(--nx-blue);
  color:var(--nx-col);
}
html body #main-content .nx-on-sky p,
html body #main-content .nx-on-sky li,
.nx-on-sky p, .nx-on-sky li{ color:var(--nx-col,var(--nx-blue-deep)); }
p.nx-on-sky, li.nx-on-sky{ color:var(--nx-blue-deep); }
/* Intention, une seule et explicite : SUR LE BANDEAU CIEL LA COULEUR NE
   PORTE PLUS D'INFORMATION, SAUF POUR L'ACCENT. Le texte et les liens
   passent en bleu (le lien garde son souligne, qui suffit a l'annoncer), et
   le seul ecart colore autorise est --nx-accent-on-sky, assez sombre pour
   rester lisible. C'est ce qui leve la contradiction entre « liens bleus »
   et « accents orange ».
   Les selecteurs existent en DEUX formes : descendante (pose sur la section)
   et COMPOSEE (posee sur l'element lui-meme). Seule la seconde est atteignable
   depuis le post_content quand le bandeau couvre toute la page. */
.nx-on-sky .nx-kicker,    .nx-kicker.nx-on-sky,
.nx-on-sky .nx-kicker-sm, .nx-kicker-sm.nx-on-sky,
.nx-on-sky .nx-kicker-xs, .nx-kicker-xs.nx-on-sky,
.nx-on-sky .nx-accent,    .nx-accent.nx-on-sky,
.nx-on-sky .nx-card-meta-accent,
.nx-card-meta-accent.nx-on-sky,
.nx-link-accent.nx-on-sky{ --nx-col:var(--nx-accent-on-sky); color:var(--nx-accent-on-sky) !important; }
html body #main-content .et_pb_text_inner a.nx-link-accent.nx-on-sky,
html body #left-area .entry-content a.nx-link-accent.nx-on-sky{ color:var(--nx-accent-on-sky); }
/* .nx-numero n'est VOLONTAIREMENT pas repris ci-dessus : les 7 grands
   chiffres orange de /a-propos/nos-valeurs/ sont un motif signature, et
   .nx-on-sky pose sur la section les repeindrait tous. Qui veut les corriger
   pose .nx-numero-sky explicitement, chiffre par chiffre. */
.nx-numero-sky{ color:var(--nx-accent-on-sky); }

/* 17.2bis Reparation de contraste sur le bandeau ciel.
   Ces deux classes sont posees par nexus-ux.js (section 3quinquies) APRES
   mesure du contraste reel de chaque bloc de texte contre son fond effectif.
   Pourquoi par mesure et pas par selecteur : la section ciel de l'accueil
   contient aussi un encadre bleu sombre (#1a3a5c, texte blanc a 11,6:1) et
   un cartouche orange — une regle qui repeindrait « tout le blanc pose dans
   .nx-on-sky » rendrait ces deux-la illisibles a leur tour. Le JS ne corrige
   que ce qui est REELLEMENT pose sur le ciel et REELLEMENT sous 4,5:1.
   Si le contenu finit par porter .nx-on-sky et des couleurs correctes, la
   mesure passe et le JS ne pose plus rien : l'operation est idempotente. */
html body #main-content .nx-sky-fix{ color:var(--nx-blue-deep) !important; }
html body #main-content .nx-sky-fix-accent{ color:var(--nx-accent-on-sky) !important; }

/* Garde-fou d'heritage. --nx-col et --nx-col-h heritent : c'est exactement ce
   qu'on veut a l'interieur d'une section sombre, mais un bloc a fond CLAIR
   pose DANS cette section (carte, encart, note) heriterait du blanc et
   deviendrait illisible. On y remet donc les couleurs de fond clair. */
.nx-on-dark .nx-card-link,
.nx-on-dark .nx-card-valeur,
.nx-on-dark .nx-partner-card,
.nx-on-dark .nx-encart,
.nx-on-dark .nx-note,
.nx-on-dark .nx-callout,
.nx-on-dark .nx-fondateur{
  --nx-col:var(--nx-ink);
  --nx-col-h:var(--nx-blue);
  color:var(--nx-col);
}
/* Symetrique : .nx-quote-box a un fond sombre sans porter .nx-on-dark. */
.nx-quote-box{
  --nx-col:rgba(255,255,255,.92);
  --nx-col-h:#fff;
}

/* 17.3 Chapeaux, ledes, titres de bloc ------------------------------------- */
/* .nx-lede : paragraphe d'introduction sur fond clair. */
.nx-lede{
  --nx-fs:19px; --nx-lh:1.7; --nx-mb:24px; --nx-col:var(--nx-ink);
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
/* .nx-chapeau-hero : chapeau d'ouverture pose sur un fond sombre.
   Motif releve 12 fois dans le contenu (pages 223/224/225/226/307/520/521 et
   les pages de rapport) : rgba(255,255,255,.92), 17-18px, mesure 720-760.
   La mesure se regle avec .nx-w-720 / .nx-w-760 / .nx-w-880 / .nx-w-none. */
.nx-chapeau-hero{
  --nx-fs:18px; --nx-lh:1.7; --nx-mb:0; --nx-col:rgba(255,255,255,.92);
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
  max-width:var(--nx-chapeau-max,760px);
}
.nx-chapeau-hero.nx-center{ margin-left:auto; margin-right:auto; }
/* .nx-chapeau-serif : chapeau Playfair italique SANS filet (219/220/221).
   A ne pas confondre avec .nx-quote, qui porte un filet a gauche. */
.nx-chapeau-serif{
  --nx-fs:24px; --nx-lh:1.5; --nx-mb:0; --nx-col:var(--nx-blue);
  font-family:var(--nx-serif) !important;
  font-style:italic;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-on-dark .nx-chapeau-serif{ --nx-col:rgba(255,255,255,.92); color:var(--nx-col); }
/* .nx-title : grand titre de bloc, plus fort que l'echelle courante (48px). */
.nx-title{
  --nx-fs-h:clamp(32px,4.4vw,48px); --nx-lh-h:1.1; --nx-fw-h:600;
  --nx-mt-h:0; --nx-mb-h:32px; --nx-col-h:var(--nx-blue);
  font-family:var(--nx-serif) !important;
  font-size:var(--nx-fs-h); line-height:var(--nx-lh-h); font-weight:var(--nx-fw-h);
  margin:var(--nx-mt-h) 0 var(--nx-mb-h); color:var(--nx-col-h);
}

/* 17.4 Surtitres / etiquettes ---------------------------------------------- */
.nx-kicker{
  --nx-fs:13px; --nx-lh:1.35; --nx-mb:16px; --nx-col:var(--nx-accent);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
  text-transform:uppercase; letter-spacing:3px; font-weight:600;
}
.nx-kicker-sm{
  --nx-fs:13px; --nx-lh:1.35; --nx-mb:8px; --nx-col:var(--nx-accent);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:24px 0 var(--nx-mb); color:var(--nx-col);
  text-transform:uppercase; letter-spacing:2px; font-weight:700;
}
/* Variante fine, relevee 18 fois (383/559/560) et sur 218 : 12px. */
.nx-kicker-xs{
  --nx-fs:12px; --nx-lh:1.4; --nx-mb:12px; --nx-col:var(--nx-accent);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
  text-transform:uppercase; letter-spacing:1.5px; font-weight:600;
}
/* Interlettrage composable : le motif 12px/600/ls 2px (307, 383, 559, 560)
   s'ecrit .nx-kicker-xs.nx-ls-2, sans creer une classe de plus. */
.nx-ls-1{ letter-spacing:1px; }
.nx-ls-15{ letter-spacing:1.5px; }
.nx-ls-2{ letter-spacing:2px; }
.nx-ls-3{ letter-spacing:3px; }

.nx-uppercase{
  --nx-fs:13px; --nx-lh:1.35; --nx-mb:16px;
  font-size:var(--nx-fs); line-height:var(--nx-lh); margin-bottom:var(--nx-mb);
  text-transform:uppercase; letter-spacing:3px; font-weight:500;
}

/* 17.5 Citations ----------------------------------------------------------- */
.nx-quote{
  --nx-fs:21px; --nx-lh:1.5; --nx-mb:24px; --nx-col:var(--nx-blue);
  font-family:var(--nx-serif) !important;
  font-style:italic;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
  border-left:3px solid var(--nx-accent);
  padding-left:20px;
}
.nx-quote-lg{ --nx-fs:24px; font-size:var(--nx-fs); padding-left:24px; }
.nx-on-dark .nx-quote{ --nx-col:rgba(255,255,255,.92); color:var(--nx-col); }

.nx-quote-box{
  background:var(--nx-blue-deep);
  color:#fff;
  padding:28px 32px;
  border-radius:4px;
  margin:32px 0;
}
.nx-quote-box p.q{
  --nx-fs:22px; --nx-lh:1.5; --nx-mb:12px;
  font-family:var(--nx-serif) !important;
  font-style:italic;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  color:#fff;
  margin:0 0 var(--nx-mb);
}
.nx-quote-box p.src{
  --nx-fs:11px; --nx-lh:1.4; --nx-mb:0; --nx-col:var(--nx-accent-on-dark);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
  letter-spacing:2px; text-transform:uppercase; font-weight:600;
}

/* 17.6 Encadres ------------------------------------------------------------ */
/* .nx-note : mention courte, PASTILLE bleu clair. La migration demandee etait
   #cfdae8 -> --nx-sky ; une premiere version l'avait transformee en encadre
   gris a filet orange, ce qui changeait la forme et pas seulement la couleur.
   Forme d'origine retablie, couleurs prises dans les tokens.
   Contraste #162d4d sur #9cc8e5 : 7,78:1. */
.nx-note{
  --nx-fs:13px; --nx-lh:1.45; --nx-mb:0; --nx-col:var(--nx-navy);
  background:var(--nx-sky);
  padding:14px 18px;
  border-radius:4px;
  margin:16px 0;
  font-family:var(--nx-sans);
  font-size:var(--nx-fs); line-height:var(--nx-lh); color:var(--nx-col);
  font-weight:600;
}
/* .nx-callout : encart gris a filet orange. Valeurs alignees sur le motif
   dominant du contenu (page 307) : padding 28/32, marge 56. */
.nx-callout{
  background:var(--nx-bg);
  border-left:4px solid var(--nx-accent);
  padding:28px 32px;
  border-radius:4px;
  margin:56px 0;
}
/* .nx-encart : meme geometrie, mais fond BLANC (pages 218 et 226). */
.nx-encart{
  background:#fff;
  border-left:4px solid var(--nx-accent);
  padding:36px 32px;
  border-radius:4px;
  margin:32px 0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.nx-callout > *:last-child,
.nx-encart > *:last-child,
.nx-note > *:last-child{ margin-bottom:0; }

/* 17.7 Cartes -------------------------------------------------------------- */
.nx-card-link{
  display:block;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none !important;
  color:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .25s var(--nx-ease), box-shadow .25s var(--nx-ease);
}
.nx-card-link:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(2,53,107,.14); }
.nx-card-body{ display:block; padding:20px 22px; }
.nx-card-title{
  --nx-fs:19px; --nx-lh:1.3; --nx-mb:10px; --nx-col:var(--nx-blue);
  display:block;
  font-family:var(--nx-serif);
  font-size:var(--nx-fs); line-height:var(--nx-lh); font-weight:600;
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
/* .nx-card-meta est une mention NEUTRE (date, nombre de pages, rubrique).
   Elle repeignait en orange 600 ce que le contenu affiche en gris 500 :
   l'orange est reserve aux accents, pas aux metadonnees. */
.nx-card-meta{
  --nx-fs:13px; --nx-lh:1.5; --nx-mb:0; --nx-col:#6b6f76;
  display:block;
  font-family:var(--nx-sans);
  font-size:var(--nx-fs); line-height:var(--nx-lh); font-weight:500;
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-card-meta-accent{ --nx-col:var(--nx-accent); color:var(--nx-col); font-weight:600; }

/* Cartes fondateurs (page 218) : 4 motifs, 3 occurrences chacun. */
.nx-fondateur{
  background:#fff;
  padding:36px 32px;
  border-left:4px solid var(--nx-accent);
  border-radius:4px;
}
.nx-fondateur-nom{
  --nx-fs:22px; --nx-lh:1.3; --nx-mb:4px; --nx-col:var(--nx-accent);
  font-family:var(--nx-serif) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh); font-weight:500;
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-fondateur-role{
  --nx-fs:15px; --nx-lh:1.4; --nx-mb:4px; --nx-col:var(--nx-blue);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh); font-weight:600;
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-fondateur-detail{
  --nx-fs:13px; --nx-lh:1.4; --nx-mb:4px; --nx-col:var(--nx-ink);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh); font-weight:600;
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
/* .nx-mention : ligne de credit d'un ARTICLE — romain 13px, marge HAUTE
   (motif `DM Sans;13px;margin:14px 0 0`). A ne pas confondre avec
   .nx-credit ci-dessous, qui est la mention italique 12px a marge basse des
   cartes fondateurs. Les deux motifs existent, ils sont distincts. */
.nx-mention{
  --nx-fs:13px; --nx-lh:1.5; --nx-mt:14px; --nx-mb:0; --nx-col:var(--nx-ink);
  font-family:var(--nx-sans) !important;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:var(--nx-mt) 0 var(--nx-mb); color:var(--nx-col);
}

/* .nx-credit : mention de credit / source, en bas d'une carte ou d'une image. */
.nx-credit{
  --nx-fs:12px; --nx-lh:1.5; --nx-mb:24px; --nx-col:#666;
  font-family:var(--nx-sans) !important;
  font-style:italic;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}

/* 17.8 Filets et titres a filet -------------------------------------------- */
/* Separateur horizontal. Motif releve 3 fois (page 218). */
.nx-filet{
  height:1px;
  background:var(--nx-filet);
  border:0;
  margin:48px 0 0;
}
.nx-filet-bas{ margin:0 0 48px; }
/* H2 a filet HAUT : 15 occurrences (pages de rapport 378/379/380/381/536). */
.nx-h2-filet{
  --nx-fw-h:700; --nx-mt-h:64px; --nx-mb-h:28px;
  font-weight:var(--nx-fw-h);
  margin:var(--nx-mt-h) 0 var(--nx-mb-h);
  letter-spacing:-.01em;
  border-top:3px solid var(--nx-accent);
  padding-top:32px;
}
/* H2 a filet BAS : 7 occurrences (page 307). */
.nx-h2-filet-bas{
  --nx-fs-h:clamp(26px,3.2vw,34px); --nx-lh-h:1.2; --nx-fw-h:600;
  --nx-mt-h:56px; --nx-mb-h:24px;
  font-size:var(--nx-fs-h); line-height:var(--nx-lh-h); font-weight:var(--nx-fw-h);
  margin:var(--nx-mt-h) 0 var(--nx-mb-h);
  border-bottom:2px solid var(--nx-accent);
  padding-bottom:12px;
}
.nx-h2-filet:first-child,
.nx-h2-filet-bas:first-child{ --nx-mt-h:0; margin-top:0; }

/* 17.9 Cadre d'image ecrit en ligne dans le contenu ------------------------ */
.nx-media{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:var(--nx-img-radius);
  aspect-ratio:var(--nx-img-ratio);
  background:var(--nx-bg);
  line-height:0;
}
.nx-media > img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}

/* 17.10 Divers et utilitaires ---------------------------------------------- */
.nx-accent{ --nx-col:var(--nx-accent); color:var(--nx-accent) !important; }
/* .nx-fort : <strong> colore en bleu de marque, graisse laissee telle quelle
   (elle vient deja de la section 2). 55 occurrences dans la ligne de credit
   des articles. Uniformise --nx-blue la ou #02356b et #162d4d coexistaient. */
.nx-fort{ color:var(--nx-blue); }
.nx-on-dark .nx-fort, .nx-fort.nx-on-dark{ color:#fff; }
.nx-on-sky .nx-fort, .nx-fort.nx-on-sky{ color:var(--nx-blue); }
/* .nx-p : corps de texte partout ou le socle ne va pas (cellule de tableau,
   grille ecrite en ligne, conteneur inconnu). Voir aussi 17.1. */
/* Largeur de la mesure d'un chapeau : le defaut est 760px, ces crans
   couvrent les analyses longues (880), les pages legales (720) et le cas
   « pas de plafond ». */
.nx-w-600{ --nx-chapeau-max:600px; }
.nx-w-720{ --nx-chapeau-max:720px; }
.nx-w-760{ --nx-chapeau-max:760px; }
.nx-w-880{ --nx-chapeau-max:880px; }
.nx-w-none{ --nx-chapeau-max:none; }
.nx-serif{ font-family:var(--nx-serif) !important; }
.nx-italique{ font-style:italic; }
.nx-link{ color:var(--nx-blue); font-weight:600; }
.nx-link-accent{ color:var(--nx-accent); font-weight:600; }
.nx-muted{
  --nx-fs:13px; --nx-lh:1.7; --nx-mb:24px; --nx-col:#6b6f76;
  font-family:var(--nx-sans);
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-legende{
  --nx-fs:13px; --nx-lh:1.5; --nx-mb:24px; --nx-col:#666;
  font-family:var(--nx-sans);
  font-style:italic;
  font-size:var(--nx-fs); line-height:var(--nx-lh);
  margin:0 0 var(--nx-mb); color:var(--nx-col);
}
.nx-mark{ background:#fff3cd; color:#7a4300; padding:2px 6px; border-radius:3px; font-weight:600; }
.nx-numero{
  font-family:var(--nx-serif);
  color:var(--nx-accent);
  font-size:64px;
  font-weight:600;
  line-height:1;
  margin-right:20px;
}
.nx-numero-row{ display:flex; align-items:baseline; margin:48px 0 24px; }
.nx-center{ text-align:center; }
/* Reglages de marge, pour les variantes d'un meme motif : au lieu de creer
   une classe par valeur, on compose (.nx-kicker.nx-mb-20, .nx-h2-filet.nx-mt-32).
   Chaque cran pose la variable du CORPS (--nx-mt/--nx-mb) ET celle des TITRES
   (--nx-mt-h/--nx-mb-h) : une seule famille couvre les deux, et la propriete
   est ecrite en plus pour les blocs que le socle n'atteint pas.
   Ces classes se posent sur l'ELEMENT, jamais sur un conteneur : les
   variables heritent, un conteneur les diffuserait a tous ses enfants.
   Couvre les motifs releves : h3 32/16, 36/14, 32/6, 28/10 ; h2 40/16 ;
   h1 0/32 ; paragraphes 48/0 et 14/0. */
.nx-mt-0{ --nx-mt:0; --nx-mt-h:0; margin-top:0; }
.nx-mt-4{ --nx-mt:4px; --nx-mt-h:4px; margin-top:4px; }
.nx-mt-6{ --nx-mt:6px; --nx-mt-h:6px; margin-top:6px; }
.nx-mt-8{ --nx-mt:8px; --nx-mt-h:8px; margin-top:8px; }
.nx-mt-10{ --nx-mt:10px; --nx-mt-h:10px; margin-top:10px; }
.nx-mt-12{ --nx-mt:12px; --nx-mt-h:12px; margin-top:12px; }
.nx-mt-14{ --nx-mt:14px; --nx-mt-h:14px; margin-top:14px; }
.nx-mt-16{ --nx-mt:16px; --nx-mt-h:16px; margin-top:16px; }
.nx-mt-18{ --nx-mt:18px; --nx-mt-h:18px; margin-top:18px; }
.nx-mt-20{ --nx-mt:20px; --nx-mt-h:20px; margin-top:20px; }
.nx-mt-24{ --nx-mt:24px; --nx-mt-h:24px; margin-top:24px; }
.nx-mt-28{ --nx-mt:28px; --nx-mt-h:28px; margin-top:28px; }
.nx-mt-32{ --nx-mt:32px; --nx-mt-h:32px; margin-top:32px; }
.nx-mt-36{ --nx-mt:36px; --nx-mt-h:36px; margin-top:36px; }
.nx-mt-40{ --nx-mt:40px; --nx-mt-h:40px; margin-top:40px; }
.nx-mt-48{ --nx-mt:48px; --nx-mt-h:48px; margin-top:48px; }
.nx-mt-56{ --nx-mt:56px; --nx-mt-h:56px; margin-top:56px; }
.nx-mt-64{ --nx-mt:64px; --nx-mt-h:64px; margin-top:64px; }
.nx-mb-0{ --nx-mb:0; --nx-mb-h:0; margin-bottom:0; }
.nx-mb-4{ --nx-mb:4px; --nx-mb-h:4px; margin-bottom:4px; }
.nx-mb-6{ --nx-mb:6px; --nx-mb-h:6px; margin-bottom:6px; }
.nx-mb-8{ --nx-mb:8px; --nx-mb-h:8px; margin-bottom:8px; }
.nx-mb-10{ --nx-mb:10px; --nx-mb-h:10px; margin-bottom:10px; }
.nx-mb-12{ --nx-mb:12px; --nx-mb-h:12px; margin-bottom:12px; }
.nx-mb-14{ --nx-mb:14px; --nx-mb-h:14px; margin-bottom:14px; }
.nx-mb-16{ --nx-mb:16px; --nx-mb-h:16px; margin-bottom:16px; }
.nx-mb-18{ --nx-mb:18px; --nx-mb-h:18px; margin-bottom:18px; }
.nx-mb-20{ --nx-mb:20px; --nx-mb-h:20px; margin-bottom:20px; }
.nx-mb-24{ --nx-mb:24px; --nx-mb-h:24px; margin-bottom:24px; }
.nx-mb-28{ --nx-mb:28px; --nx-mb-h:28px; margin-bottom:28px; }
.nx-mb-32{ --nx-mb:32px; --nx-mb-h:32px; margin-bottom:32px; }
.nx-mb-36{ --nx-mb:36px; --nx-mb-h:36px; margin-bottom:36px; }
.nx-mb-40{ --nx-mb:40px; --nx-mb-h:40px; margin-bottom:40px; }
.nx-mb-48{ --nx-mb:48px; --nx-mb-h:48px; margin-bottom:48px; }
.nx-mb-56{ --nx-mb:56px; --nx-mb-h:56px; margin-bottom:56px; }
.nx-mb-64{ --nx-mb:64px; --nx-mb-h:64px; margin-bottom:64px; }


/* -- 13. PREFERS-REDUCED-MOTION -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.nx-js .nxa-reveal,
  html.nx-js .nxa-scale,
  html.nx-js .nxa-swing,
  html.nx-js .nxa-lift,
  html.nx-js .nxa-fade-up,
  html.nx-js .nxa-text,
  html.nx-js #main-content h1,
  html.nx-js #left-area h1,
  html.nx-js .entry-title,
  html.nx-js #main-content .et_pb_text_inner > h1 ~ *,
  html.nx-js #main-content .nx-hero-cta{
    opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important;
  }
  html.nx-js .nxa-clip .et_pb_image_wrap{ clip-path:none !important; transition:none !important; }
  /* l'ombre portee des images est neutralisee elle aussi */
  html body #main-content .et_pb_image::after,
  html body #left-area .et_pb_image::after{ opacity:0 !important; transition:none !important; }
  /* le zoom continu est neutralise : le JS ne pose rien, ceci est le filet */
  html body img.nxa-zoom{ transform:none !important; will-change:auto !important; }
  html body *, html body *::before, html body *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}


/* -- 12. MOBILE ------------------------------------------------------------ */
/* Cette section est volontairement placee APRES le socle (17) : elle en
   corrige les valeurs, elle doit donc etre lue apres lui. Ecrite avant, ses
   surcharges de meme specificite ne s'appliquaient jamais.
   Elle ne fixe pas de font-size en dur sur les paragraphes : elle deplace la
   VALEUR PAR DEFAUT (--nx-fs-base, --nx-h1..h4). Une classe qui a pose son
   propre --nx-fs garde donc sa taille sur mobile, comme il se doit. */
@media (max-width:980px){
  :root{
    --nx-section-y:var(--nx-space-s);
    --nx-hero-top:var(--nx-space-m);
    --nx-hero-bottom:var(--nx-space-s);
    --nx-h1:34px;
    --nx-h2:28px;
    --nx-h3:22px;
    --nx-chapeau-max:100%;
    /* Sous 980px Divi cesse de fixer les deux barres : verifie au DOM, a
       980px #top-header et #main-header repassent en position:absolute et
       defilent avec la page. Il n'y a donc plus AUCUN chrome collant, et
       scroll-padding-top retombe aux seuls 24px de respiration. */
    --nx-sticky-h:0px;
    --nx-header-h:90px;
  }
  html body #main-content h1, html body #left-area h1, html body .entry-title{ line-height:var(--nx-lh-h,1.18) !important; }
  html body #main-content .et_pb_row{ width:90% !important; }
  html body #main-content [style*="display:grid"],
  html body #main-content [style*="display: grid"],
  html body #left-area [style*="display:grid"],
  html body #left-area [style*="display: grid"]{
    grid-template-columns:1fr !important;
  }
  /* Les classes DECLARENT (elles ne posent pas une marge en dur) : c'est ce
     qui permet a .nx-mt-* / .nx-mb-* de continuer a les surcharger ici. */
  .nx-h2-filet{ --nx-mt-h:48px; --nx-mb-h:20px; padding-top:24px; margin:var(--nx-mt-h) 0 var(--nx-mb-h); }
  .nx-h2-filet-bas{ --nx-mt-h:40px; --nx-mb-h:18px; margin:var(--nx-mt-h) 0 var(--nx-mb-h); }
  .nx-callout{ --nx-mt:40px; --nx-mb:40px; padding:24px 22px; margin:var(--nx-mt) 0 var(--nx-mb); }
  .nx-encart{ padding:28px 22px; }
  .nx-fondateur{ padding:24px 20px; }
}
@media (max-width:640px){
  :root{
    --nx-fs-base:17px;
    --nx-h1:29px;
    --nx-h2:24px;
    --nx-h4:19px;
  }
  html body #main-content details > summary,
  html body #left-area details > summary{ font-size:16px; padding:16px 46px 16px 18px; }
  html body .nx-acc-body{ padding:16px 18px 18px; }
  .nx-quote{ --nx-fs:19px; padding-left:16px; }
  .nx-quote-lg{ --nx-fs:21px; }
  .nx-chapeau-serif{ --nx-fs:21px; }
  .nx-numero{ font-size:48px; margin-right:14px; }
  /* Ces generiques pesent (1,2,3) et battaient les classes en (0,1,0) :
     mesure a 600px, .nx-h2-filet rendait 36/18 au lieu de 48/20. Elles lisent
     donc les MEMES variables que le socle : la classe garde le dernier mot. */
  html body #main-content .et_pb_text_inner > h2{ margin:var(--nx-mt-h,36px) 0 var(--nx-mb-h,18px); }
  html body #main-content .et_pb_text_inner > h3,
  html body #main-content .et_pb_text_inner > h4{ margin:var(--nx-mt-h,28px) 0 var(--nx-mb-h,14px); }
  .nx-quote-box{ padding:22px 20px; }
  .nx-quote-box p.q{ --nx-fs:19px; }
}
@media (max-width:400px){
  html, html body{ overflow-x:hidden; }
  html body #main-content .et_pb_row{
    width:auto !important;
    max-width:100% !important;
    margin-left:16px !important;
    margin-right:16px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  :root{ --nx-h1:27px; --nx-h2:22px; }
  html body #main-content .et_pb_column{ margin-bottom:24px !important; }
  html body #main-content table, html body #left-area table{ display:block; overflow-x:auto; max-width:100%; }
  html body .nx-progress{ height:2px; }
}


/* -- 14. IMPRESSION -------------------------------------------------------- */
@media print{
  .nx-progress, #main-header, #main-footer{ display:none !important; }
  html.nx-js .nxa-reveal, html.nx-js .nxa-scale, html.nx-js .nxa-swing, html.nx-js .nxa-lift, html.nx-js .nxa-fade-up, html.nx-js .nxa-text,
  html.nx-js #main-content h1, html.nx-js #left-area h1, html.nx-js .entry-title,
  html.nx-js #main-content .et_pb_text_inner > h1 ~ *, html.nx-js #main-content .et_pb_button_module_wrapper{ opacity:1 !important; transform:none !important; animation:none !important; }
  html.nx-js .nxa-clip .et_pb_image_wrap{ clip-path:none !important; }
  html body #main-content .et_pb_image::after{ display:none !important; }
  html body #main-content .et_pb_section{ padding:16px 0 !important; }
  html body #main-content details{ border:none; }
  html body #main-content details > *:not(summary){ display:block !important; }
}


/* -- 18. RETOUCHES DU 12/09/2026 -------------------------------------------
   Placees en toute fin de feuille : elles doivent gagner sur la section 15.8
   (#main-header{min-height:90px}) et sur la feuille du theme Divi.

   18.1 Barre du haut aux couleurs Nexus.
   Divi peint #top-header avec sa couleur d'accent par defaut (#2EA3F2), ecrite
   en dur dans la feuille du theme (regle "#top-header,#et-secondary-nav li ul").
   Ce n'est PAS une option de theme : get_option('et_divi') ne porte ni
   `secondary_nav_bg` ni `accent_color`, il n'y a donc rien a corriger dans le
   Customizer — la surcharge se fait ici. Bleu profond de la charte : #184088.

   18.2 Hauteur de la barre de menu ramenee de 90px a 65px (chrome plus discret).
   --nx-sticky-h (section 1) suit : #top-header (33px) + #main-header (65px).
   ----------------------------------------------------------------------- */

/* 18.1 ---------------------------------------------------------------------- */
#top-header,
#top-header.et-fixed-header,
.et_fixed_nav #top-header{ background-color:#184088 !important; }

/* 18.2 ---------------------------------------------------------------------- */
#main-header{ min-height:65px; }
/* Divi ne tire pas la hauteur de la barre de `min-height` mais du padding haut
   de #et-top-navigation (34px) + la hauteur du menu (54px) = 88px : la regle
   ci-dessus ne suffit donc pas a la reduire. On ramene ce padding pour que la
   barre atteigne reellement 65px, logo compris. Desktop seulement : sous 981px
   Divi repasse l'en-tete en position statique avec son propre gabarit. */
@media (min-width:981px){
  html body #page-container #main-header #et-top-navigation,
  html body #page-container #main-header.et-fixed-header #et-top-navigation{ padding-top:11px !important; }
  html body #page-container #main-header .logo_container #logo{ max-height:44px !important; }
  html body #page-container #main-header.et-fixed-header .logo_container #logo{ max-height:40px !important; }
}

/* 18.3 ---------------------------------------------------------------------- */
/* Sous-menus deroulants (A propos, Domaines) : Divi fixe le lien a 200px de large,
   ce qui casse « Infrastructures et institutions » et « Societe et demographie »
   sur deux lignes alors que les entrees d'A propos tiennent sur une. Les deux
   sous-menus partagent desormais le meme gabarit : une ligne par entree, largeur
   au contenu (minimum 240px), liseret superieur au bleu de la charte (#184088)
   au lieu du bleu d'accent par defaut de Divi. Desktop seulement. */
@media (min-width:981px){
  html body #et-top-navigation #top-menu li ul.sub-menu{ width:auto; min-width:240px; border-top-color:#184088; }
  html body #et-top-navigation #top-menu li li{ padding:0; display:block; float:none; width:100%; clear:both; }
  html body #et-top-navigation #top-menu li li a{ width:auto; white-space:nowrap; padding:6px 20px; display:block; }
}

/* 18.4 ---------------------------------------------------------------------- */
/* En-tete collant sur mobile et tablette. Sous 981px Divi repasse #main-header
   en position:absolute (il defile avec la page). Demande d'Alex : le menu du
   haut doit rester visible comme sur desktop. On le fixe ; Divi pose deja le
   padding-top de #page-container a la hauteur de l'en-tete (JS), et
   nexus-ux.js recalcule --nx-sticky-h a partir de ce qui est reellement fixe,
   donc les ancres retombent d'elles-memes sous la barre. Le menu mobile
   deroule reste lisible sur un ecran court : il defile dans sa propre zone. */
@media (max-width:980px){
  html body.et_fixed_nav #page-container #main-header{ position:fixed !important; top:0 !important; left:0; right:0; }
  html body.admin-bar.et_fixed_nav #page-container #main-header{ top:46px !important; }
  html body #page-container #main-header .et_mobile_menu{ max-height:calc(100vh - 110px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
}


/* -- 19. PIED DE PAGE : RESEAUX SOCIAUX, NOM ACCESSIBLE, CARTOUCHE ---------
   Demande d'Alex (12/09) : « Fais un lien en pied de page egalement vers les
   reseaux sociaux. »

   Deux voies etaient possibles.
   NON RETENUE : reecrire les quatre liens a la main dans un widget de pied de
   page. Elle aurait cree une SECONDE copie des URL, a maintenir en parallele
   de celles que Divi lit dans et_divi, et elle aurait laisse LinkedIn a part
   puisque Divi ne connait pas ce reseau.
   RETENUE : reparer la barre basse que la section 15.4 masquait. Les icones y
   sont deja rendues par Divi a partir des URL d'et_divi — source unique —,
   nexus-ux.js y injecte deja LinkedIn exactement comme dans l'en-tete, et le
   gabarit responsive de la barre est deja ecrit dans le theme. Surtout, le
   `display:none` de 15.4 visait le credit « Designed by Elegant Themes » ;
   ce credit a depuis ete remplace par la mention de copyright Nexus, si bien
   que la regle cachait un contenu legitime en meme temps que les quatre
   reseaux. On repare donc la cause au lieu de la contourner.
   ----------------------------------------------------------------------- */

/* 19.1 La barre basse revient ---------------------------------------------- */
/* Surcharge assumee du `#footer-bottom{display:none}` de la section 15.4. */
html body #footer-bottom{ display:block !important; }
/* Divi laisse cette mention en gris moyen, illisible sur le bleu du pied de
   page. Blanc a 75 % sur le fond effectif (#162d4d assombri de 32 %) : 9,8:1. */
html body #footer-bottom #footer-info{
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1.5;
}

/* 19.2 Nom accessible des icones sociales ---------------------------------- */
/* Divi ecrit le nom du reseau dans un <span> qu'il masque en `display:none`
   (feuille critique en ligne). `display:none` le retire AUSSI de l'arbre
   d'accessibilite : les quatre icones, en en-tete comme en pied de page,
   etaient donc annoncees « lien » et rien de plus. On remplace le masquage
   par un masquage VISUEL : le texte reste dans l'arbre, il n'occupe plus de
   place. Le <a> etant deja `position:relative` chez Divi, le span reste borne
   a l'icone et ne peut pas decaler la mise en page. */
html body .et-social-icon a > span{
  display:block !important;
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

/* 19.3 Geometrie commune des cinq icones ----------------------------------- */
/* Cloture le point laisse ouvert le 11/09 : l'icone LinkedIn retombait 2px
   plus bas que ses voisines.
   Cause : les <li> sont des inline-block, donc alignes sur la LIGNE DE BASE,
   et une boite flex contenant un <svg> ne derive pas sa ligne de base comme
   un glyphe de police. Le JS compensait l'ecart par une mesure au chargement —
   remede fragile, puisque la mesure tombait avant la police d'icones de Divi.
   Correction structurelle : on supprime la dependance a la ligne de base
   (alignement sur le HAUT) et on donne aux CINQ ancres la meme boite, glyphe
   de Divi et SVG confondus — un conteneur flex centre, d'une hauteur de 1em.
   Plus rien ne se mesure a l'execution : voir nexus-ux.js section 6.
   EFFET DE BORD MESURE : les ancres passent de 28,5px a 24px de haut, donc
   #top-header perd 4px (35,5 -> 31,5px). --nx-sticky-h est recalcule par le JS
   a partir du rendu reel, les ancres de page ne bougent donc pas. */
html body ul.et-social-icons > li{ vertical-align:top; }
html body ul.et-social-icons > li > a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
}
html body ul.et-social-icons > li.nx-social-linkedin > a > svg{
  display:block;
  width:1em; height:1em;
  fill:currentColor;
}

/* 19.4 Focus visible sur fond sombre --------------------------------------- */
/* La regle generale (section 8) trace l'anneau en --nx-accent (#dd6917) :
   4,03:1 sur le bleu du pied de page — au-dessus des 3:1 exiges par le
   critere 1.4.11, mais sans marge. Sur les trois zones sombres du site on
   prend l'orange eclairci (--nx-accent-on-dark, 6,23:1 mesures sur le fond
   effectif de la barre basse). Seule la COULEUR change : l'epaisseur et le
   decalage restent ceux de la section 8, pour que l'anneau reste le meme
   objet partout. */
html body #top-header a:focus-visible,
html body #footer-bottom a:focus-visible,
html body #main-footer a:focus-visible{
  outline-color:var(--nx-accent-on-dark) !important;
}
/* Les icones sociales sont carrees et serrees : l'anneau les epouse. */
html body .et-social-icon a:focus-visible{
  outline-offset:2px !important;
  border-radius:50% !important;
}

/* 19.5 Cartouche du portrait ----------------------------------------------- */
/* « Ludwig CANDOTTI / President », blanc 18px/600 pose sur
   rgba(222,105,22,.55) par-dessus la photo : 3,42:1 mesures, sous le seuil AA
   de 4,5:1 (18px en 600 n'atteint pas le palier « grand texte », qui commence
   a 18,66px gras). Le fond repasse en --nx-accent-dark opaque (#b5560f) :
   blanc dessus donne 4,88:1.
   CE QUI SE PERD : la translucidite de 55 %, donc la photo ne transparait
   plus derriere le cartouche. C'est un arbitrage de lisibilite, pas une
   correction sans effet de bord. */
html body figcaption[style*="222,105,22"],
html body figcaption[style*="222, 105, 22"]{
  background:var(--nx-accent-dark) !important;
}

/* 19.6 Couleur des icones du pied de page ---------------------------------- */
/* Divi peint `.et-social-icon a` en #666 : un gris pense pour un pied de page
   CLAIR. Sur le fond effectif du bandeau bas (#0f1f34, soit --nx-navy que
   Divi assombrit de 32 %) il ne donne que 2,90:1 — sous le seuil de 3:1 du
   critere 1.4.11, alors que l'icone est ici le SEUL indice du reseau vise.
   Tant que la barre etait masquee le defaut ne se voyait pas ; en la
   reaffichant il fallait le corriger. Blanc a 75 % : 9,79:1, et c'est le ton
   exact de la mention de copyright juste a cote.
   Le survol de Divi part sur son bleu d'accent par defaut (#2EA3F2), hors
   charte comme celui traite en 18.1 : il passe a l'orange eclairci (6,23:1). */
html body #footer-bottom .et-social-icon a{ color:rgba(255,255,255,.75) !important; }
html body #footer-bottom .et-social-icon a:hover,
html body #footer-bottom .et-social-icon a:focus{ color:var(--nx-accent-on-dark) !important; }

/* 19.7 Confort tactile sur mobile ------------------------------------------ */
/* La normalisation de 19.3 ramene l'ancre a 1em, soit 24x24px : tout juste la
   cible minimale du critere 2.5.8 (24x24 CSS px), sans marge, alors que Divi
   lui en donnait 28,5. On rend au doigt ce que la normalisation lui a pris,
   en padding : le glyphe, lui, ne bouge pas. Le pas entre deux centres est de
   47,6px, les cibles de 40px ne peuvent donc pas se toucher. */
@media (max-width:980px){
  html body #footer-bottom ul.et-social-icons > li > a{ padding:8px; }
}

/* 19.8 Cadrage des portraits ----------------------------------------------- */
/* Defaut signale par Alex le 12/09 sur /a-propos/ : le haut du crane des trois
   fondateurs est coupe. Ce n'est pas une affaire de padding mais de CADRAGE.

   Geometrie exacte. Le systeme d'images (section 6) impose a tout cadre le
   ratio --nx-img-ratio = 1.3 avec object-fit:cover. Or les trois portraits
   sont CARRES — a-propos-img-07/08/09.png, 1254x1254 mesures, Ludwig compris.
   Pour remplir une boite plus large que haute, le navigateur cale sur la
   largeur et retire 1 - 1/1,3 = 23,08 % de la HAUTEUR. object-position etant
   centre (50 %), cette perte se partage en deux : 11,54 % en haut, 11,54 % en
   bas. Le sommet du crane tombe, mesure image par image, entre 11 % et 13,5 %
   de la hauteur : il est donc DANS la bande superieure supprimee, ou a un
   cheveu de l'etre. D'ou le symptome, et d'ou le fait qu'il touche les trois.

   Valeur retenue : 20 %. Le haut de la fenetre visible se situe a
   0,2308 x Y de la hauteur de l'image, soit 4,62 % pour Y=20 % contre 11,54 %
   pour Y=50 % : les cranes les plus hauts conservent ainsi 6 a 9 points de
   marge. Rendus compares a 35 / 30 / 25 / 20 / 15 % sur les trois images :
   20 % est le premier cran qui degage franchement les trois.
   UNE valeur et non trois, alors que les trois cadrages d'origine different :
   les trois sommets de crane tiennent dans un intervalle de 2,5 points, et
   surtout les trois portraits sont affiches COTE A COTE — un reglage par
   image y decalerait les lignes de regard les unes par rapport aux autres.
   La coherence de la rangee vaut mieux ici que l'optimum par photo.

   Pourquoi viser l'attribut alt et non le nom de fichier : la section 15.6
   fait exactement cela (`img[src*="accueil-president-candotti"]`,
   `img[src*="apropos-fondateur"]`) et elle est aujourd'hui MORTE — verifie sur
   les 160 images referencees par les 95 URL du sitemap : aucun fichier ne
   porte plus ces noms, la regle ne s'applique a rien. Un selecteur sur le nom
   de fichier ne survit pas a un reversement de media. L'alt, lui, decrit le
   SUJET : il reste juste tant que l'image est un portrait. Releve sur tout le
   site : 4 images portent un alt commencant par « Portrait », ce sont
   exactement les 4 portraits, et aucune autre (les couvertures disent
   « Couverture — », les vignettes de domaine portent le nom du domaine).
   Zero faux positif, et tout portrait futur correctement decrit sera cadre
   juste sans qu'on ait a y revenir.

   Portee volontairement etroite : la regle generale du systeme d'images n'est
   pas touchee, le cadrage des images editoriales ne bouge pas. Les couvertures
   de rapport ne sont pas concernees du tout — leur conteneur .nx-rapport-visuel
   impose son propre ratio (0,707 mesure), identique a celui des fichiers :
   elles ne subissent aucune coupe. Le portrait de la fiche de Ludwig
   (ludwig-candotti-img-01.jpg, 1448x1086 = 1,333) est plus LARGE que la boite :
   il n'a aucun debordement vertical, la regle ne lui change donc rien.
   Les deux selecteurs sont separes a dessein : si un navigateur ne comprenait
   pas le drapeau `i` de [alt^="Portrait" i], il jetterait toute la regle — la
   voie par classe .nx-portrait, elle, resterait debout. */
html body #main-content .et_pb_image_wrap > img[alt^="Portrait" i],
html body #left-area .et_pb_image_wrap > img[alt^="Portrait" i],
html body #main-content .nx-media > img[alt^="Portrait" i]{
  object-position:center 20% !important;
}
html body #main-content .et_pb_image_wrap > img.nx-portrait,
html body #left-area .et_pb_image_wrap > img.nx-portrait,
html body #main-content .nx-portrait .et_pb_image_wrap > img,
html body #main-content .nx-media > img.nx-portrait{
  object-position:center 20% !important;
}

/* 20. Pastilles de domaines des pages fondateurs ([nexus_domaines_auteur]), 14/09/2026.
   Variante compacte de .nx-pill : une rangee de tags, pas une rangee de boutons. */
html body .nx-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
html body .nx-pills .nx-pill{ padding:8px 18px; font-size:14px; line-height:1.4; }
html body .nx-pills .nx-pill .nx-muted{ color:rgba(255,255,255,.78) !important; font-weight:400; }