@charset "UTF-8";
/* ==================================================================
   CIVILITA conseil · feuille de style du site
   Conforme à la charte graphique V3 (juillet 2026).

   Poppins seule ; Constantia au seul logotype, vectorisé dans les SVG.
   Or mat en filets, puces et mentions de rubrique, jamais en aplat.
   Jade et or foncés dès qu'ils portent du texte (seuil AA).
   Aucune ombre portée, aucun dégradé, aucun contour, aucun reflet.
   Transitions de 150 à 250 ms, sans rebond.
   Mesure de texte limitée, corps justifié, interligne au-delà de 1,5.

   Composition : piste B « le tracé » sur l'accueil et les pages de pôle,
   discipline de la piste C « le dossier » sur les pages de contenu.
   ================================================================== */

@import url("../fonts/poppins.css");

/* ---------- Jetons ---------------------------------------------- */
:root{
  --bleu:#222266; --rouge:#FF3333; --jade:#66CC99; --or:#C6A664;
  --rouge-texte:#D91F1F; --jade-texte:#357F58; --or-texte:#8A6C31;
  --bleu-fonce:#161644; --anthracite:#3A3A3A; --noir:#000000;
  --papier:#F7F8FB; --blanc:#FFFFFF;
  --filet:rgba(34,34,102,.16); --filet-clair:rgba(255,255,255,.20);
  --mesure:70ch; --mesure-courte:62ch; --page:1220px; --t:200ms;
}

/* ---------- Socle ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
body{
  font-family:'Poppins',Arial,Helvetica,sans-serif;font-weight:400;
  font-size:17px;line-height:1.75;color:var(--anthracite);background:var(--blanc);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
strong{font-weight:500}
em{font-style:italic}

.contenu{width:min(var(--page),calc(100% - 48px));margin-inline:auto;position:relative;z-index:1}
.mesure{max-width:var(--mesure)}
p{max-width:var(--mesure);text-align:justify;text-wrap:pretty;hyphens:auto}
p + p{margin-top:1.05em}
.gauche,.gauche p{text-align:left}

a{color:var(--bleu);text-decoration:none;transition:color var(--t) ease,text-decoration-color var(--t) ease}
a:hover,a:focus-visible{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:.25em}
:focus-visible{outline:3px solid var(--or-texte);outline-offset:3px}

h1,h2,h3,h4{color:var(--bleu);line-height:1.14;text-align:left;text-wrap:balance}
h1{font-weight:200;font-size:clamp(2.3rem,5.2vw,4.4rem);letter-spacing:-.025em}
h1 + p,h2 + p,h3 + p,h2 + ol,h2 + ul,h2 + div,h3 + ul{margin-top:20px}
h2 + .livrables,h2 + .citation{margin-top:26px}
h2{font-weight:200;font-size:clamp(1.85rem,3.6vw,3rem);letter-spacing:-.02em}
h3{font-weight:300;font-size:1.28rem;letter-spacing:-.01em}
h4{font-weight:500;font-size:1.02rem}

.evitement{position:absolute;left:-9999px}
.evitement:focus{left:16px;top:16px;z-index:200;background:var(--bleu);color:#fff;padding:13px 20px}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Rubriques et filets --------------------------------- */
.rubrique{display:flex;align-items:baseline;gap:13px;margin-bottom:20px;font-size:.79rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.rubrique .no{color:var(--or-texte);letter-spacing:.06em}
.rubrique .no::after{content:" /"}
.sombre .rubrique{color:rgba(255,255,255,.82)}
.sombre .rubrique .no{color:var(--or)}

.deplie{display:flex;height:3px;width:206px;margin:0 0 28px}
.deplie i{display:block;height:100%}
.deplie i:nth-child(1){width:44%;background:var(--bleu)}
.deplie i:nth-child(2){width:28%;background:var(--rouge)}
.deplie i:nth-child(3){width:18%;background:var(--jade)}
.deplie i:nth-child(4){width:10%;background:var(--or)}

.arc-fond{position:absolute;pointer-events:none;z-index:0;user-select:none}

/* ---------- Boutons --------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;
  font-size:.98rem;font-weight:500;background:var(--bleu);color:var(--blanc);
  border:2px solid var(--bleu);text-align:center;cursor:pointer;
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease;
}
.bouton:hover,.bouton:focus-visible{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:#fff;text-decoration:none}
.bouton.creux{background:transparent;color:var(--bleu)}
.bouton.creux:hover,.bouton.creux:focus-visible{background:var(--bleu);color:#fff}
.bouton.clair{background:var(--blanc);color:var(--bleu);border-color:var(--blanc)}
.bouton.clair:hover,.bouton.clair:focus-visible{background:var(--papier);border-color:var(--papier);color:var(--bleu)}
.bouton.fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.bouton.fantome:hover,.bouton.fantome:focus-visible{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:38px}

.vers{display:inline-flex;align-items:center;min-height:44px;font-size:.96rem;font-weight:500}
.vers::after{content:"\203A";color:var(--or-texte);margin-left:.4em;transition:transform var(--t) ease;display:inline-block}
.vers:hover::after{transform:translateX(3px)}
.sombre .vers,.appel .vers{color:#fff}
.sombre .vers::after,.appel .vers::after{color:var(--or)}

/* ---------- Navigation ------------------------------------------ */
.entete{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--filet)}
.entete .contenu{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:88px}
.marque img{width:196px;height:auto}
.menu{display:flex;align-items:center;gap:30px;font-size:.97rem}
.menu > li{list-style:none;position:relative}
.menu-contact{display:none}
.menu a{display:inline-flex;align-items:center;min-height:44px}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:.25em}

.sousmenu{position:absolute;top:100%;left:-20px;min-width:266px;background:var(--blanc);border:1px solid var(--filet);border-top:2px solid var(--or);padding:10px 0;display:none}
.menu li:hover > .sousmenu,.menu li:focus-within > .sousmenu{display:block}
.sousmenu li{list-style:none}
.sousmenu a{display:block;padding:9px 22px;width:100%;font-size:.95rem;min-height:44px;line-height:1.5;transition:background var(--t) ease}
.sousmenu a:hover{background:var(--papier);text-decoration:none}
.sousmenu .metier{display:block;font-size:.8rem;color:var(--anthracite)}

.bascule{display:none;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:1px solid var(--filet);cursor:pointer}
.bascule span{display:block;width:20px;height:2px;background:var(--bleu);position:relative;transition:background var(--t) ease}
.bascule span::before,.bascule span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--bleu);transition:transform var(--t) ease}
.bascule span::before{top:-6px}
.bascule span::after{top:6px}
.bascule[aria-expanded="true"] span{background:transparent}
.bascule[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.bascule[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Ouvertures ------------------------------------------ */
.hero{position:relative;padding:120px 0 108px;background:var(--blanc);overflow:hidden}
.hero .arc-fond{right:-320px;top:-260px;width:1060px;opacity:.11}
.hero .surtitre{font-size:.82rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu);margin-bottom:26px;max-width:none}
.hero .chapo{margin-top:32px;font-size:1.11rem;line-height:1.85;max-width:var(--mesure-courte)}

.ouverture{position:relative;padding:76px 0 62px;background:var(--papier);border-bottom:1px solid var(--filet);overflow:hidden}
.ouverture .arc-fond{right:-180px;top:-220px;width:640px;opacity:.10}
.ouverture h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.ouverture .chapo{margin-top:22px;font-size:1.08rem;max-width:var(--mesure-courte)}
.ouverture.pole-cabinet{border-top:4px solid var(--bleu)}
.ouverture.pole-studio{border-top:4px solid var(--rouge)}
.ouverture.pole-atelier{border-top:4px solid var(--jade)}
.ouverture.pole-academie{border-top:4px solid var(--or)}

.ariane{font-size:.86rem;color:var(--anthracite);margin-bottom:22px}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ariane li::after{content:"\203A";color:var(--or-texte);margin-left:8px}
.ariane li:last-child::after{content:""}
.ariane [aria-current="page"]{color:var(--bleu);font-weight:500}

/* ---------- Sections -------------------------------------------- */
section{padding:100px 0;position:relative}
.papier{background:var(--papier)}
.sombre{background:var(--bleu);color:#fff;overflow:hidden}
.sombre h1,.sombre h2,.sombre h3,.sombre h4{color:#fff}
.sombre p{color:rgba(255,255,255,.9)}
.sombre a{color:#fff}
.tres-sombre{background:var(--bleu-fonce)}
.intro{margin-bottom:52px}
.intro h2{margin-bottom:18px}

.colonnes{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:64px;align-items:start}
.marge{border-top:2px solid var(--or);padding-top:16px;font-size:.9rem;line-height:1.7}
.marge h3{font-size:.79rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or-texte);margin-bottom:10px}
.marge p{max-width:none;text-align:left;font-size:.9rem}
.marge p + p{margin-top:.7em}
.marge p + h3{margin-top:26px;padding-top:18px;border-top:1px solid var(--filet)}
.sombre .marge p + h3{border-top-color:var(--filet-clair)}
.sombre .marge h3{color:var(--or)}
.sombre .marge p{color:rgba(255,255,255,.84)}

/* ---------- Situations ------------------------------------------ */
.situations{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.situation{background:var(--blanc);border:1px solid var(--filet);padding:30px 26px 22px;display:flex;flex-direction:column;justify-content:space-between;min-height:252px;transition:border-color var(--t) ease,transform var(--t) ease}
.situation:hover{border-color:var(--bleu);transform:translateY(-3px)}
.situation .arc{width:38px;height:38px;margin-bottom:20px}
.situation q{display:block;font-size:1.1rem;font-weight:300;color:var(--bleu);line-height:1.38;quotes:"\00ab\00a0" "\00a0\00bb"}

/* ---------- Pôles ----------------------------------------------- */
.poles{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.pole{position:relative;background:var(--blanc);border:1px solid var(--filet);padding:40px 38px 32px;overflow:hidden;transition:border-color var(--t) ease}
.pole:hover{border-color:var(--bleu)}
.pole .arc{position:absolute;right:-70px;bottom:-96px;width:268px;opacity:.13;pointer-events:none;z-index:0}
.pole .nom{font-size:2.05rem;font-weight:200;color:var(--bleu);line-height:1;letter-spacing:-.025em;max-width:none}
.pole .metier{display:block;margin-top:12px;font-size:.9rem;font-weight:500}
.pole .barre{width:56px;height:3px;margin:22px 0}
.pole > *:not(.arc){position:relative;z-index:1}

[data-pole="cabinet"] .metier,.teinte-cabinet{color:var(--bleu)}
[data-pole="studio"] .metier,.teinte-studio{color:var(--rouge-texte)}
[data-pole="atelier"] .metier,.teinte-atelier{color:var(--jade-texte)}
[data-pole="academie"] .metier,.teinte-academie{color:var(--or-texte)}
[data-pole="cabinet"] .barre{background:var(--bleu)}
[data-pole="studio"] .barre{background:var(--rouge)}
[data-pole="atelier"] .barre{background:var(--jade)}
[data-pole="academie"] .barre{background:var(--or)}

/* ---------- Livrables ------------------------------------------- */
.livrables{margin-top:24px;padding-top:20px;border-top:1px solid var(--filet)}
.livrables .etiquette{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or-texte);margin-bottom:11px;max-width:none;text-align:left}
.livrables p{font-size:.96rem}
.livrables ul{list-style:none;font-size:.96rem;line-height:1.72;max-width:var(--mesure)}
.livrables li{padding-left:19px;position:relative;margin-bottom:3px}
.livrables li::before{content:"";position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--or)}
.sombre .livrables{border-top-color:var(--filet-clair)}
.sombre .livrables .etiquette{color:var(--or)}
.sombre .livrables li{color:rgba(255,255,255,.9)}

/* ---------- Fiches ---------------------------------------------- */
.fiche{border-top:1px solid var(--filet);padding:44px 0}
.fiche:last-of-type{border-bottom:1px solid var(--filet)}
.fiche-tete{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.fiche-tete .no{font-size:.8rem;font-weight:500;color:var(--or-texte);letter-spacing:.1em}
.fiche-tete .nom{font-size:1.72rem;font-weight:200;color:var(--bleu);letter-spacing:-.02em;line-height:1.05}
.fiche .metier{font-size:.92rem;font-weight:500;margin-bottom:20px;max-width:none}
.fiche .corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}

.interventions{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;list-style:none;margin-top:8px}
.interventions li{border-bottom:1px solid var(--filet);padding:17px 0}
.interventions .titre{font-weight:500;color:var(--bleu);display:block}
.interventions .detail{font-size:.94rem;display:block;margin-top:3px}

/* ---------- Sommaire -------------------------------------------- */
.sommaire{margin-top:56px;border-top:1px solid var(--filet);padding-top:24px;display:grid;grid-template-columns:repeat(4,1fr)}
.sommaire a{display:block;padding:20px 24px 20px 0;border-right:1px solid var(--filet);transition:background var(--t) ease}
.sommaire a:last-child{border-right:0}
.sommaire a:hover{background:var(--blanc);text-decoration:none}
.sommaire .no{font-size:.76rem;font-weight:500;color:var(--or-texte);letter-spacing:.12em;display:block;margin-bottom:5px}
.sommaire .titre{font-size:1.04rem;font-weight:300;color:var(--bleu);line-height:1.3}

/* ---------- Listes en filets ------------------------------------ */
.liste-filets{list-style:none;border-top:1px solid var(--filet)}
.liste-filets > li{border-bottom:1px solid var(--filet)}
.liste-filets a{display:grid;grid-template-columns:52px 1fr auto;gap:22px;align-items:center;padding:22px 6px 22px 0;min-height:44px;transition:background var(--t) ease}
.liste-filets a:hover{background:var(--papier);text-decoration:none}
.liste-filets .no{font-size:.8rem;font-weight:500;color:var(--or-texte);letter-spacing:.1em}
.liste-filets .libelle{font-size:1.12rem;font-weight:300;color:var(--bleu);line-height:1.35}
.liste-filets .cible{font-size:.9rem;font-weight:500;color:var(--anthracite);white-space:nowrap}
.liste-filets .cible::after{content:" \203A";color:var(--or-texte)}
.papier .liste-filets a:hover{background:var(--blanc)}

/* ---------- Grilles --------------------------------------------- */
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.carte{border-top:2px solid var(--bleu);padding-top:20px}
.carte:nth-child(4n+2){border-top-color:var(--rouge)}
.carte:nth-child(4n+3){border-top-color:var(--jade)}
.carte:nth-child(4n+4){border-top-color:var(--or)}
.carte h3{font-size:1.02rem;font-weight:500;margin-bottom:8px}
.carte p{font-size:.95rem;text-align:left}

.principe{border-top:1px solid var(--filet);padding-top:22px;margin-top:24px}
.principe:first-of-type{border-top:0;padding-top:0;margin-top:0}
.principe h3{font-size:1.04rem;font-weight:500;margin-bottom:8px}
.principe p{font-size:.97rem}
.sombre .principe{border-top-color:var(--filet-clair)}

.citation{border-left:2px solid var(--or);padding-left:26px;margin-top:32px}
.citation p{font-size:1.13rem;font-weight:300;line-height:1.7;text-align:left;max-width:var(--mesure-courte)}
.sombre .citation p{color:#fff}

/* ---------- Références ------------------------------------------ */
.reference{border-top:1px solid var(--filet);padding:42px 0;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.55fr);gap:56px;align-items:start}
.reference:last-of-type{border-bottom:1px solid var(--filet)}
.logo-reference{height:74px;display:flex;align-items:center;margin-bottom:20px}
.logo-reference img{max-height:74px;max-width:230px;width:auto;object-fit:contain}
.reference .nom{font-size:1.5rem;font-weight:200;color:var(--bleu);letter-spacing:-.02em;line-height:1.15}
.reference .qualite{display:block;margin-top:8px;font-size:.93rem;font-style:italic;font-weight:400;color:var(--anthracite)}
.reference .lien-ext{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;margin-top:4px}
.reference dl{display:grid;gap:14px}
.reference dt{font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte)}
.reference dd{font-size:.98rem;line-height:1.7}

/* ---------- Tableaux -------------------------------------------- */
.tableau-cadre{overflow-x:auto}
.tableau{width:100%;border-collapse:collapse;font-size:.97rem;min-width:520px}
.tableau caption{text-align:left;font-size:.86rem;margin-bottom:12px;color:var(--anthracite)}
.tableau thead th{text-align:left;font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);border-bottom:1px solid var(--or);padding:0 22px 12px 0;vertical-align:bottom}
.tableau td{border-bottom:1px solid var(--filet);padding:17px 22px 17px 0;vertical-align:top;line-height:1.7}
.tableau tbody th{text-align:left;color:var(--bleu);font-weight:500;font-size:.97rem;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--filet);padding:17px 22px 17px 0;vertical-align:top}

/* ---------- Fondateur ------------------------------------------- */
.fondateur{display:grid;grid-template-columns:270px 1fr;gap:58px;align-items:start}
.portrait{border:1px solid var(--filet);background:var(--papier)}
.portrait img{width:100%}
.portrait .attente{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;padding:22px;font-size:.85rem;text-align:center;line-height:1.6}
.signature{margin-top:24px;padding-top:15px;border-top:1px solid var(--or);font-size:.95rem;font-weight:500;color:var(--bleu);max-width:var(--mesure);text-align:left}

/* ---------- Formulaire ------------------------------------------ */
.formulaire{display:grid;gap:22px;max-width:640px}
.champ{display:grid;gap:7px}
.champ label{font-size:.92rem;font-weight:500;color:var(--bleu)}
.champ .aide{font-size:.85rem;color:var(--anthracite)}
.champ input,.champ select,.champ textarea{font-family:inherit;font-size:1rem;color:var(--anthracite);background:var(--blanc);border:1px solid var(--filet);padding:13px 15px;min-height:48px;width:100%;transition:border-color var(--t) ease}
.champ textarea{min-height:170px;resize:vertical;line-height:1.7}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);outline:3px solid var(--or-texte);outline-offset:2px}
.champ .obligatoire{color:var(--rouge-texte)}
.consentement{display:grid;grid-template-columns:24px 1fr;gap:13px;align-items:start;font-size:.92rem}
.consentement input{width:22px;height:22px;min-height:22px;margin-top:3px;accent-color:var(--bleu)}
.consentement label{font-weight:400;color:var(--anthracite);line-height:1.6}
.leurre{position:absolute;left:-9999px}
.formulaire p{max-width:none;text-align:left}
.message{border-left:3px solid var(--jade);background:var(--papier);padding:18px 22px;font-size:.97rem;margin-bottom:26px}
.message.erreur{border-left-color:var(--rouge)}
.message p{max-width:none;text-align:left}
.coordonnees{display:grid;gap:22px}
.coordonnees h3{font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--or-texte);margin-bottom:6px}
.coordonnees p{max-width:none;text-align:left}

/* ---------- Texte légal ----------------------------------------- */
.legal h2{font-size:1.5rem;margin:44px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.08rem;font-weight:500;margin:26px 0 8px}
.legal ul,.legal ol{margin:12px 0 12px 22px;max-width:var(--mesure)}
.legal li{margin-bottom:7px;line-height:1.7}
.legal .maj{font-size:.88rem;color:var(--anthracite);border-top:1px solid var(--or);padding-top:14px;margin-top:44px;max-width:none;text-align:left}

/* ---------- Appel ----------------------------------------------- */
.appel{background:var(--bleu);color:#fff;padding:108px 0;position:relative;overflow:hidden}
.appel .arc-fond{right:-190px;bottom:-300px;width:720px;opacity:.12}
.appel h2{color:#fff;max-width:19ch}
.appel p{color:rgba(255,255,255,.9);margin-top:20px}
.appel .rubrique{color:rgba(255,255,255,.82)}
.appel .rubrique .no{color:var(--or)}

/* ---------- Pied de page ---------------------------------------- */
.pied{background:var(--bleu-fonce);color:rgba(255,255,255,.78);padding:66px 0 28px;font-size:.94rem}
.pied img{width:200px;height:auto;margin-bottom:24px}
.pied-grille{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:44px}
.pied h3{color:#fff;font-size:.79rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.pied ul{list-style:none;display:grid;gap:10px}
.pied a{color:rgba(255,255,255,.88)}
.pied a:hover{color:#fff}
.pied p{max-width:none;text-align:left}
.pied-bas{margin-top:50px;padding-top:23px;border-top:1px solid var(--or);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.88rem}

/* ---------- Mention d'attente ----------------------------------- */
.attente{background:#FFF6BF;padding:0 .3em;color:var(--anthracite)}

/* ---------- Adaptation aux écrans ------------------------------- */
@media (max-width:1080px){
  .bascule{display:inline-flex}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--blanc);border-bottom:1px solid var(--filet);padding:8px 24px 22px;max-height:calc(100dvh - 88px);overflow-y:auto}
  .menu.ouvert{display:flex}
  .menu > li{border-bottom:1px solid var(--filet)}
  .menu > li:last-child{border-bottom:0}
  .menu > li > a{padding:6px 0;font-size:1.05rem;width:100%}
  .sousmenu{position:static;display:block;border:0;border-top:1px solid var(--filet);padding:4px 0 12px;min-width:0}
  .sousmenu a{padding:8px 0 8px 18px}
  .entete .bouton{display:none}
  .menu-contact{display:block}
  .situations{grid-template-columns:repeat(2,1fr)}
  .poles,.fiche .corps,.interventions,.grille-2{grid-template-columns:1fr}
  .colonnes,.fondateur,.reference{grid-template-columns:1fr;gap:34px}
  .grille-3{grid-template-columns:repeat(2,1fr)}
  .sommaire{grid-template-columns:1fr 1fr}
  .sommaire a{border-right:0;border-bottom:1px solid var(--filet)}
  .pied-grille{grid-template-columns:1fr 1fr;gap:34px}
  .fondateur .portrait{max-width:270px}
}
@media (max-width:640px){
  .contenu{width:calc(100% - 32px)}
  section,.hero,.appel{padding:62px 0}
  .ouverture{padding:52px 0 44px}
  .situations,.grille-3,.sommaire,.pied-grille{grid-template-columns:1fr}
  .hero .arc-fond{width:620px;right:-290px;top:-170px}
  .liste-filets a{grid-template-columns:1fr;gap:9px}
  .pole{padding:32px 26px 26px}
  p,.tableau td,.tableau th{text-align:left}
  p{hyphens:none}
  .marque img{width:168px}
  .bouton{width:100%}
  .actions{align-items:stretch}
}

/* ---------- Impression ------------------------------------------ */
@media print{
  .entete,.appel,.actions,.bascule,.arc-fond{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  a{color:#000;text-decoration:underline}
  .pied{background:#fff;color:#000;border-top:1px solid var(--or)}
}

/* ---------- 26. Illustrations et pièces d'identité --------------- */
.illustration{margin:0;border:1px solid var(--filet);background:var(--papier);overflow:hidden}
.illustration img{width:100%;display:block}
.illustration .legende{font-size:.83rem;line-height:1.6;color:var(--anthracite);padding:11px 16px;border-top:1px solid var(--filet);background:var(--blanc);text-align:left;max-width:none}
.sombre .illustration{border-color:var(--filet-clair)}
.illustration.bandeau{margin-top:0}
.illustration.marge-haute{margin-top:40px}

.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px;align-items:start}
.figures .illustration img{width:auto;max-width:100%;margin-inline:auto}

/* acceptions numérotées de la page Civilitas */
.acceptions{list-style:none;counter-reset:acc;margin:34px 0 0;padding:0;border-top:1px solid var(--filet);max-width:var(--mesure)}
.acceptions li{counter-increment:acc;border-bottom:1px solid var(--filet);padding:26px 0 26px 62px;position:relative;margin:0}
.acceptions li::before{content:counter(acc,decimal-leading-zero);position:absolute;left:0;top:30px;font-size:.8rem;font-weight:500;color:var(--or-texte);letter-spacing:.1em}
.acceptions h3{font-size:1.1rem;font-weight:500;margin-bottom:9px}
.acceptions p{font-size:.99rem}

/* logothèque */
.logotheque{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
.logotheque .cadre{border:1px solid var(--filet);padding:34px 30px;display:flex;align-items:center;justify-content:center;min-height:158px;background:var(--blanc)}
.logotheque .cadre.sur-bleu{background:var(--bleu);border-color:var(--bleu)}
.logotheque .cadre.sur-papier{background:var(--papier)}
.logotheque .cadre img{width:auto;max-width:100%;max-height:78px}
.logotheque .sigles{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.logotheque .sigles img{width:66px;max-height:66px}
.logotheque .etiquette{font-size:.78rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-top:12px;text-align:left;max-width:none}

/* nuancier */
.nuancier{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px}
.teinte{border:1px solid var(--filet-clair);background:rgba(255,255,255,.04)}
.teinte .aplat{height:112px}
.teinte .detail{padding:14px 16px;font-size:.86rem;line-height:1.6}
.teinte .nom{display:block;font-weight:500;color:#fff}
.teinte .code{display:block;font-size:.79rem;color:rgba(255,255,255,.7);margin-bottom:7px}
.sombre .teinte .detail{color:rgba(255,255,255,.84)}

/* bloc de téléchargement */
.document{border:1px solid var(--filet);border-left:3px solid var(--or);padding:26px 30px;margin-top:34px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;background:var(--blanc)}
.document p{max-width:46ch;margin:0;text-align:left}

/* logos clients */
.logo-reference{height:76px;display:flex;align-items:center;margin-bottom:20px}
.logo-reference img{max-height:76px;max-width:232px;width:auto;object-fit:contain}
.logos-clients{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:34px;align-items:center}
.logos-clients .cadre{border:1px solid var(--filet);min-height:118px;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--blanc)}
.logos-clients img{max-height:74px;max-width:100%;width:auto;object-fit:contain}

@media (max-width:1080px){
  .figures,.nuancier{grid-template-columns:repeat(2,1fr)}
  .logotheque{grid-template-columns:1fr}
  .logos-clients{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .figures,.nuancier{grid-template-columns:1fr}
  .logos-clients{grid-template-columns:repeat(2,1fr)}
  .acceptions li{padding-left:0;padding-top:38px}
  .acceptions li::before{top:14px}
  .document{flex-direction:column;align-items:stretch}
}

/* ---------- 27. Entrées de tête du menu -------------------------- */
/* « Nos pôles » et « À propos » ne sont pas des pages : ce sont des
   entrées de tête qui ouvrent leur sous-menu. */
.tete-menu{
  font:inherit;color:var(--bleu);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
}
.tete-menu::after{
  content:"";width:6px;height:6px;border-right:1.5px solid var(--or-texte);
  border-bottom:1.5px solid var(--or-texte);transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t) ease;
}
.menu li:hover > .tete-menu::after,.tete-menu[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.tete-menu[data-actif="true"]{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:.25em}
.menu li.deplie > .sousmenu{display:block}
.sousmenu a[aria-current="page"]{background:var(--papier);text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:.25em}

@media (max-width:1080px){
  .tete-menu{width:100%;justify-content:space-between;padding:6px 0;font-size:1.05rem}
  .menu li > .sousmenu{display:none}
  .menu li.deplie > .sousmenu{display:block}
}

/* ---------- 28. Chronologie du parcours -------------------------- */
.parcours{background:var(--papier)}
.chronologie{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--filet);max-width:var(--mesure)}
.chronologie li{border-bottom:1px solid var(--filet);padding:24px 0 24px 118px;position:relative}
.chronologie .periode{position:absolute;left:0;top:27px;font-size:.8rem;font-weight:500;color:var(--or-texte);letter-spacing:.06em;white-space:nowrap}
.chronologie .poste{display:block;font-weight:500;color:var(--bleu);line-height:1.35}
.chronologie .structure{display:block;font-size:.93rem;font-style:italic;margin-top:3px}
.chronologie .detail{display:block;font-size:.95rem;line-height:1.7;margin-top:9px}
@media (max-width:640px){
  .chronologie li{padding-left:0;padding-top:44px}
  .chronologie .periode{top:22px}
}

/* ---------- 29. Spécimens typographiques et gamme chromatique ----- */
.specimen{border:1px solid var(--filet);background:var(--blanc);padding:28px 30px 22px;margin:28px 0 30px}
.specimen .alphabet{font-size:1.24rem;font-weight:300;color:var(--bleu);letter-spacing:.02em;line-height:1.7;max-width:none;text-align:left;word-break:break-word}
.specimen-antique .alphabet{font-family:Constantia,Georgia,"Times New Roman",serif;font-weight:400;font-size:1.42rem;letter-spacing:.05em}
.specimen .etiquette{font-size:.78rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-top:18px;padding-top:14px;border-top:1px solid var(--filet);max-width:none;text-align:left}
.specimen .graisses{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px}
.specimen .graisses span{font-size:1.6rem;color:var(--bleu);display:flex;align-items:baseline;gap:9px}
.specimen .graisses small{font-size:.76rem;font-weight:400;color:var(--anthracite);letter-spacing:.02em}

.couleurs{display:grid;gap:24px;margin-top:40px}
.couleur{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center;border-top:1px solid var(--filet);padding-top:24px}
.couleur:first-child{border-top:0;padding-top:0}
.couleur .illustration{border:0;background:transparent}
.couleur .illustration img{width:100%}
.couleur h3{font-size:1.34rem;font-weight:300;margin-bottom:5px}
.couleur .code{font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--or-texte);margin-bottom:12px;max-width:none;text-align:left}

@media (max-width:1080px){
  .couleur{grid-template-columns:200px minmax(0,1fr);gap:28px}
}
@media (max-width:640px){
  .couleur{grid-template-columns:1fr;gap:18px}
  .specimen{padding:22px 20px 18px}
  .specimen .alphabet{font-size:1.05rem}
  .specimen .graisses{gap:18px}
}

/* ---------- 30. Corrections ------------------------------------- */
/* Le sous-menu se posait à mi-hauteur de l'en-tête, par-dessus son
   propre libellé. Les entrées occupent désormais toute la hauteur de
   la barre, de sorte que « top:100% » tombe sur son bord inférieur. */
.entete .contenu{align-items:stretch}
.marque,.entete .bouton,.bascule{align-self:center}
.menu{align-items:stretch}
.menu > li{display:flex;align-items:center}
.sousmenu{top:100%;margin-top:-1px;border-top:2px solid var(--or)}

/* Le bloc de téléchargement était en texte blanc sur fond blanc
   dès qu'il figurait dans une section sombre. */
.sombre .document{background:transparent;border-color:var(--filet-clair);border-left-color:var(--or)}
.sombre .document p{color:#fff}

@media (max-width:1080px){
  .menu{align-items:stretch}
  .menu > li{display:block}
}

/* L'entrée Contact du menu ne sert qu'au petit écran, où le bouton
   « Nous écrire » est masqué. La règle générale sur les entrées de
   menu prenait le dessus sur son masquage. */
.menu > li.menu-contact{display:none}
@media (max-width:1080px){
  .menu > li.menu-contact{display:block}
}