@charset "utf-8";
/* ===================================================================
   green-dc.ai — feuille de style du site
   Charte graphique Esiense v3. Palette, typographie et composants
   repris a l'identique de la maquette validee.
   Les styles propres a chaque element restent en attribut style dans
   le HTML ; ce fichier porte les jetons, les resets, les etats et les
   paliers responsives, c'est-a-dire ce qu'un attribut ne peut pas faire.
   =================================================================== */

/* ------------------------------------------------------------------
   POLICES : auto-hebergees dans /polices/ (Work Sans 400/600/700, Source
   Serif 4 400 normal et italique, sous-ensembles latin + latin-ext).
   Aucun appel a un service externe (charte Esiense v3, interdit 13.3).
   ------------------------------------------------------------------ */
@font-face{font-family:"Work Sans";src:url("/polices/work-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("/polices/work-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("/polices/work-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/polices/source-serif-4-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/polices/source-serif-4-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
--bleu:#007c9e;--vert:#00843e;--jaune:#fcc200;--noir:#1d1d1b;
--vert-clair:#e8f2ec;--vert-sombre:#00552a;--jaune-clair:#fdf3d4;--jaune-sombre:#5c4600;
--aplat:#00843e;--aplat-2:#00662f;--filet-sombre:#1f8f52;
--gris:#6f6c67;--gris-clair:#a9aeaf;--filet:#e4e2de;--papier:#f5f4f2;--blanc:#fff;
/* EXTENSION ECRITE DE LA TABLE 2.2, requise par le §2.5.
   L'aplat dominant de Green DC est #00843E, absent des tableaux de la charte.
   Mesures sur ce fond : #FFFFFF 4,81:1 — seule valeur conforme AA.
   #E2E5E6 3,79 · #D6D9DA 3,39 · #A9AEAF 2,14 · #FCC200 2,94 · #FDF3D4 4,34 : tous ecartes.
   Consequences tenues dans toute la page :
   1. tout texte pose sur --aplat est en #FFFFFF, sans opacite ;
   2. l'echelle de gris du §2.4 reste reservee a l'aplat #16191A, ou elle a ete calibree ;
   3. le jaune reste un FOND portant du noir (#1D1D1B sur #FCC200 = 10,34:1),
      jamais un texte sur vert ;
   4. --aplat-2 #00662F (blanc 7,14:1) porte les etats de survol et les panneaux replies. */
--sans:"Work Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
--wrap:1280px;--gout:60px;--mesure:62ch;--mesure-l:74ch}
*{box-sizing:border-box}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--noir)}
a:hover{color:#000}
a:focus-visible,button:focus-visible{outline:3px solid var(--noir);outline-offset:2px}
.navlist{align-items:center;gap:24px}
.menu{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font:600 14px var(--sans);padding:8px 14px;cursor:pointer}
.menu:hover{background:rgba(255,255,255,.12)}
/* Menu mobile sans JavaScript : la case .menu-etat, invisible mais focalisable,
   porte l'etat ; l'etiquette .menu la commande ; .menu-etat:checked ~ .navlist
   deplie la liste (palier 1180 px). La case precede la liste dans le HTML :
   le combinateur ~ ne remonte pas. Tab atteint la case, Espace la bascule. */
.menu{user-select:none;-webkit-user-select:none}
.menu-etat{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.menu-etat:focus-visible ~ .menu{outline:3px solid var(--noir);outline-offset:2px}
.menu-etat:checked ~ .menu{border-color:var(--jaune);color:var(--jaune)}
@media (max-width:1180px){
.navlist{display:none!important}
.menu-etat:checked ~ .navlist{display:flex!important;flex-direction:column;align-items:flex-start;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--aplat-2);padding:8px var(--gout) 20px;z-index:40}
.menu-etat:checked ~ .navlist a{padding:13px 0!important;width:100%;border-bottom:1px solid var(--filet-sombre)}
.menu{display:inline-flex;align-items:center;min-height:44px}
.navcta{min-height:44px;align-items:center}
.navlang{order:8;min-height:44px}
.navbar{position:relative}
.navcta{order:9;margin-left:auto}
}
@media (max-width:1100px){
:root{--gout:36px}
.duo-l,.niv,.photo{grid-template-columns:1fr!important;gap:24px!important}
.schema,.schema-retour{grid-template-columns:1fr!important}
.schema-retour>div{grid-column:1!important}
.fleche{padding:18px 0!important;flex-direction:row!important;gap:14px!important}
.fleche-ligne{width:2px!important;height:34px!important;flex:none}
.fleche-pointe{right:auto!important;left:-5px!important;top:auto!important;bottom:-1px!important;border-left:6px solid transparent!important;border-right:6px solid transparent!important;border-top:9px solid currentColor!important;border-bottom:0!important;color:inherit}

}
@media (max-width:860px){
:root{--gout:24px}
body{font-size:16px}
.g3,.g4,.duo{grid-template-columns:1fr!important;gap:0!important}
.duo{gap:44px!important}
.g3{gap:24px!important}
.g4>div{border-right:0!important;border-left:0!important;border-bottom:1px solid var(--filet);padding:24px 0!important}
.bande{padding-top:44px!important;padding-bottom:40px!important}
.navcta{padding:13px 20px!important}
.portrait{width:100%!important;height:300px!important}
.cta-fin{flex-direction:column;align-items:flex-start!important}
}
@media print{.saut,nav,.btn{display:none!important}}


/* Etats de survol et de focus, issus des attributs de maquette.
   !important est requis : les proprietes concurrentes (left, background,
   color, border-bottom-color, text-decoration) sont declarees dans
   l'attribut style inline de chaque element, qui bat toute regle de classe.
   Sans cette precedence, aucun de ces etats ne s'appliquerait. */
.hv1:hover{background:var(--aplat-2)!important}
.hv2:hover{text-decoration:underline!important}
.hv3:hover{background:#e3af00!important;text-decoration:none!important}
.hv4:hover{border-bottom-color:var(--noir)!important;text-decoration:none!important}
.hv5:hover{background:#000!important;text-decoration:none!important}
.hv6:hover{text-decoration:none!important}
.hv7:hover{color:var(--vert-sombre)!important;text-decoration:none!important}
.fc1:focus,.fc1:focus-visible{left:0!important}