@charset "UTF-8";
/* ===== SyndiLibre — socle de la charte DA06 (partagé par toutes les pages) =====
   Référence : uploads/SPECIFICATIONS-DIRECTION-06.md · Plan : Chantier - Bascule du site en DA06.md
   Porte : jetons, base, feuille centrée, en-tête + méga-menu + tiroir + login,
   boutons, sections, blocs de bibliothèque, citation, CTA, pied.
   Ce qui est propre à une page va dans sa propre feuille (ex. accueil-da06.css). */
/* ===== SyndiLibre — Accueil « Édition » × direction artistique 06 =====
   Couleurs, boutons, fonds et conception des blocs : § 2, 2.2, 2.4 des spécifications.
   Contenu et type de blocs : inchangés (repris de « Accueil - Style Edition »). */
:root{
  --creme:#FBF6EC; --creme-2:#F3E9D6; --blanc:#FFFDF8;
  --navy:#1D4263; --violet:#6D28D9; --lilas:#A78BFA; --or:#EFBF6E; --or-f:#9A7328;
  --vert:#1F8A5B; --bleu:#2A6FDB;
  --encre:#1B1426; --encre-2:#514863; --encre-3:#8C8299; --filet:#E3D8C2;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Libre Franklin",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --nav-h:72px; --pad:clamp(20px,4vw,34px); --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme-2);color:var(--encre);font-family:var(--sans);font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;text-wrap:pretty;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* La colonne de contenu C1 est peinte par section (voir « SOL »), pas par un conteneur :
   c'est ce qui permet aux blocs de ponctuation (navy, encre) de couper les bandes sur
   toute la largeur. `.sheet` reste accepté dans le HTML mais ne contraint plus rien. */
.sheet{max-width:none;margin:0;background:none;border:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
.wrap-n{max-width:880px;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.02em;margin:0}
.sur{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--or-f)}
.sur .chat{width:17px;height:17px;fill:var(--or-f);flex:none}
.on-navy .sur,.sur.on-navy{color:var(--or)}
.on-navy .sur .chat{fill:var(--or)}
.dit{font-size:16px;line-height:1.68;max-width:64ch;color:var(--encre-2)}
.on-navy .dit{color:rgba(251,246,236,.78)}
@media(max-width:860px){:root{--pad:20px}}

/* ---------- EN-TÊTE COLLANTE ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;color:var(--blanc);background:transparent;border-bottom:3px solid transparent;transition:background .16s,border-bottom-color .16s,color .16s}
.nav-in{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:clamp(14px,2.4vw,40px)}
.brand{display:flex;align-items:center;color:inherit;font-family:"Geist",var(--sans);font-weight:600;font-size:26px;letter-spacing:-.025em}
.brand img{width:38px;height:38px;object-fit:contain;margin-right:12px}
.brand .s2{color:var(--lilas)}
.nav.is-solid .brand{color:var(--navy)}
.nav.is-solid .brand .s2{color:var(--violet)}
.nav-links{display:flex;gap:clamp(10px,1.8vw,26px);margin-left:auto;align-items:center}
.mega-wrap{position:relative}
.mega-trigger{background:none;border:0;color:inherit;font-family:var(--sans);font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:6px;min-height:44px;padding:11px 0;border-bottom:2px solid transparent;cursor:pointer}
.mega-trigger:hover,.mega-trigger[aria-expanded="true"]{border-bottom-color:var(--or)}
.nav.is-solid .mega-trigger:hover,.nav.is-solid .mega-trigger[aria-expanded="true"]{color:var(--violet);border-bottom-color:var(--violet)}
.mega{position:absolute;top:calc(100% + 12px);left:-16px;z-index:61;width:380px;background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:8px;display:grid;gap:1px}
.mega.wide{width:720px;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 8px}
/* Panneau à trois colonnes : une colonne par groupe (grille du 19 sept. 2026). */
.mega.trio{width:min(1020px,94vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 10px}
.mega.flip{left:auto;right:-16px}
.mega .mg{display:grid;gap:1px;align-content:start}
.mega .mg-t{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--or-f);padding:8px 12px 7px;margin-bottom:2px;border-bottom:1px solid var(--filet)}
.mega[hidden]{display:none}
.mega a{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--r);color:var(--navy)}
.mega a:hover{background:var(--creme-2);color:var(--violet)}
/* Entrées de menu : Libre Franklin demi-gras, pas le serif de titre. Instrument Serif
   n'a qu'une graisse, dessinée pour les grands corps ; à 19 px sur deux colonnes il
   rendait une couleur de gris trop faible et se lisait à l'effort (planche du 19 sept. 2026,
   variante D). Une entrée de menu se balaie, elle ne se lit pas. */
.mega .mt{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--encre)}
.mega a:hover .mt{color:var(--violet)}
.mega .md{font-size:13.5px;line-height:1.45;color:var(--encre-2)}
.mega a:hover .md{color:var(--encre-2)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-ghost,.nav-solid{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:var(--r);white-space:nowrap;color:inherit}
/* CTA : or plein, dans les deux états — c'est le seul bouton rempli de l'en-tête */
.nav-solid{background:var(--or);border-color:var(--or);color:var(--encre)}
.nav-solid:hover{background:var(--blanc);border-color:var(--blanc);color:var(--violet)}
/* Connexion : contour seul, il ne dispute rien à la CTA. Sur le hero, un voile encre
   garantit le contraste du texte clair quelle que soit la photo derrière. */
.nav-ghost{background:rgba(27,20,38,.42);border-color:rgba(251,246,236,.6)}
.nav-ghost:hover,#loginBtn[aria-expanded="true"]{background:var(--blanc);border-color:var(--blanc);color:var(--navy)}
.nav.is-solid{background:var(--creme-2);color:var(--navy);border-bottom-color:var(--navy)}
.nav.is-solid .nav-solid{background:var(--or);border-color:var(--or);color:var(--encre)}
.nav.is-solid .nav-solid:hover{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.nav.is-solid .nav-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.nav.is-solid .nav-ghost:hover,.nav.is-solid #loginBtn[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:var(--creme)}
/* ---------- MENU COMPACT ---------- */
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:1px solid currentColor;border-radius:var(--r);color:inherit;cursor:pointer;padding:0}
.nav-burger span{display:block;width:18px;height:1.5px;background:currentColor}
@media(max-width:1200px){.nav-links{display:none}.nav-burger{display:flex}.nav-outil{display:none}.nav-cta{margin-left:auto}}
/* Téléphone (24 sept. 2026) : l'en-tête débordait, le bouton du menu sortait de l'écran.
   Logotype réduit, CTA ramenée à « Démo » (le libellé complet reste dans le tiroir),
   compteur « enregistré » retiré sous 440 px (repris au pied de page). */
@media(max-width:700px){.nav-in{gap:10px}.brand{font-size:21px;flex:none}.brand img{width:30px;height:30px;margin-right:8px}.nav-cta{gap:8px}.nav-solid{padding:0 12px;font-size:0;letter-spacing:0}.nav-solid:after{content:"Démo";font-size:11px;letter-spacing:.12em}.nav .enr-nav{padding:0 10px}}
@media(max-width:440px){.nav .enr-nav{display:none}}
.drawer[hidden],.drawer-veil[hidden]{display:none}
.drawer-veil{position:fixed;inset:0;z-index:70;background:rgba(27,20,38,.6)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(430px,100%);background:var(--creme);border-left:3px solid var(--or);display:flex;flex-direction:column;overflow-y:auto}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--filet)}
.drawer-brand{font-family:"Geist",var(--sans);font-weight:600;font-size:20px;letter-spacing:-.025em;color:var(--navy)}
.drawer-brand .s2{color:var(--violet)}
.drawer-close{width:44px;height:44px;background:none;border:1px solid var(--filet);border-radius:var(--r);color:var(--navy);font-size:22px;line-height:1;cursor:pointer}
.drawer-close:hover{border-color:var(--navy);color:var(--violet)}
.drawer-nav{flex:1;padding:6px 0}
.drawer-nav details{border-bottom:1px solid var(--filet)}
.drawer-nav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;min-height:44px;font-family:var(--serif);font-size:23px;letter-spacing:-.02em;color:var(--navy)}
.drawer-nav summary::-webkit-details-marker{display:none}
.drawer-nav summary:after{content:"+";font-family:var(--mono);font-size:18px;color:var(--or-f)}
.drawer-nav details[open] summary:after{content:"\2013 "}
.drawer-nav details[open] summary{color:var(--violet)}
.dsub{padding:0 0 10px}
.dsub-t{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--or-f);padding:14px 20px 6px}
.dsub a{display:flex;flex-direction:column;gap:2px;padding:10px 20px;min-height:44px;color:var(--navy)}
.dsub a:hover{background:var(--creme-2);color:var(--violet)}
.dsub .mt{font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--encre)}
.dsub a:hover .mt{color:var(--violet)}
.dsub .md{font-size:13px;line-height:1.45;color:var(--encre-2)}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--filet);background:var(--creme-2);display:grid;gap:10px}
.drawer-foot .btn{width:100%;justify-content:center}


/* ---------- BOUTONS ---------- */
.btn{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:0 24px;min-height:48px;border:1px solid;border-radius:var(--r);display:inline-flex;align-items:center;gap:10px}
.btn-or{background:var(--or);border-color:var(--or);color:var(--encre)}
/* survol : le blanc disparaissait sur les fonds clairs (popup) — on passe au violet d'accent */
.btn-or:hover{background:var(--violet);border-color:var(--violet);color:var(--blanc)}
.btn-clair{background:transparent;border-color:rgba(251,246,236,.6);color:var(--blanc)}
.btn-clair:hover{background:rgba(251,246,236,.12);border-color:var(--blanc);color:var(--blanc)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.btn-navy:hover{background:var(--violet);border-color:var(--violet);color:var(--blanc)}
.btn-ligne{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ligne:hover{background:var(--navy);border-color:var(--navy);color:var(--creme)}
/* Visage 5 du système d'appels à l'action (cta.js) : le lien fléché de fin de bloc. */
.cta-lien{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:9px;min-height:44px}
.cta-lien:hover{color:var(--violet)}
.cta-lien:after{content:"→";color:var(--or-f)}
.cta-lien:hover:after{color:var(--violet)}
.on-navy .cta-lien{color:var(--creme)}
.on-navy .cta-lien:after{color:var(--or)}
.on-navy .cta-lien:hover{color:var(--or)}

/* ---------- SECTIONS ---------- */
/* SOL — les bandes latérales (C2) sont le fond de page ; TOUS les blocs, clairs comme
   sombres, ne peignent que la colonne de contenu de 1220 px. La couleur du bloc se
   déclare par --sol, jamais par un `background` écrit à la main. Aucun filet de colonne :
   la limite du contenu vient du seul changement de valeur avec les bandes. */
.sec,.quote,.cta,.sortie{--sol:var(--creme);background-color:transparent;background-repeat:no-repeat;background-position:top center;background-image:linear-gradient(var(--sol),var(--sol));background-size:1220px 100%}
@media(max-width:1220px){.sec,.quote,.cta,.sortie{background-size:100% 100%}}
.sec{padding:clamp(64px,8vw,112px) 0}
/* alternance des blocs clairs : crème C1 ↔ blanc cassé C5, sans filet de colonne */
.sec.tinted{--sol:var(--blanc)}
.sec.navy{--sol:var(--navy);color:var(--creme)}
/* EN-TÊTE DE SECTION — le titre, et éventuellement une description. Rien d'autre :
   plus de numéro de chapitre, plus d'intitulé de manchette, plus de surtitre.
   Avec description : titre à gauche, description à droite, en vis-à-vis.
   Sans description : le titre prend toute la mesure — aucune colonne ne reste vide.
   Détecté tout seul (:has), il n'y a aucune classe à penser en écrivant le HTML. */
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,4vw,64px);align-items:start}
.sec-head h2{font-size:clamp(28px,3.8vw,46px);line-height:1.06;letter-spacing:-.028em;max-width:20ch}
.sec-head .dit{margin-top:6px;max-width:46ch}
.sec-head:not(:has(.dit)){display:block}
/* Rien en face : le titre prend toute la mesure de la colonne (règle générale). */
.sec-head:not(:has(.dit)) h2,.sec-head:not(:has(.dit)) h1{max-width:none}
@media(max-width:900px){.sec-head{display:block}.sec-head h2{max-width:26ch}.sec-head .dit{margin-top:20px}}
.sec-head h2 i{font-style:italic;color:inherit}
.sec.navy .sec-head h2{color:var(--blanc)}
.sec.navy .sec-head h2 i{font-style:italic;color:inherit}

/* origine — 2 colonnes à filets */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:52px;border-top:1px solid var(--filet)}
.two .col{padding:30px clamp(20px,2.4vw,34px) 26px;border-right:1px solid var(--filet)}
.two .col:last-child{border-right:none}
.two .col.hi{background:var(--blanc);border-top:3px solid var(--or);margin-top:-1px}
.two h3{font-size:25px;margin-bottom:10px}
.two .col.hi h3{color:var(--navy)}
.two p{margin:0;color:var(--encre-2)}
.two .side-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);margin-bottom:14px}
.two .col.hi .side-k{color:var(--or-f)}
@media(max-width:760px){.two{grid-template-columns:1fr}.two .col{border-right:none;border-bottom:1px solid var(--filet)}}

/* les libertés — rangée de 4 colonnes à filets */
.freedom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--filet);border-bottom:3px solid var(--or)}
.freedom>div{padding:26px clamp(16px,1.8vw,26px) 28px;border-right:1px solid var(--filet)}
.freedom>div:last-child{border-right:none}
.freedom .fk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:12px}
.freedom h4{font-size:23px;margin:0 0 8px}
.freedom p{margin:0;font-size:15px;color:var(--encre-2)}
@media(max-width:900px){.freedom{grid-template-columns:repeat(2,minmax(0,1fr))}.freedom>div:nth-child(2n){border-right:none}.freedom>div:nth-child(-n+2){border-bottom:1px solid var(--filet)}}
@media(max-width:520px){.freedom{grid-template-columns:1fr}.freedom>div{border-right:none;border-bottom:1px solid var(--filet)}}

/* les agents — liste tabulaire sur navy */
.agents{margin-top:56px;border-top:1px solid rgba(239,191,110,.4)}
.agent{display:grid;grid-template-columns:132px minmax(0,.9fr) minmax(0,1.35fr);gap:clamp(14px,2.6vw,44px);padding:24px 0;border-bottom:1px solid rgba(251,246,236,.16);align-items:baseline}
.agent .an{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;color:var(--or)}
.agent h3{font-size:26px;color:var(--blanc)}
.agent p{margin:0;color:rgba(251,246,236,.74);font-size:15.5px}
.serment{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);background:rgba(251,246,236,.06);border:1px solid rgba(239,191,110,.5);border-radius:var(--r);padding:18px 22px}
.serment b{color:var(--or);font-weight:500}
.serment i{font-style:normal;color:var(--or)}
.rule-foot{margin-top:22px;font-size:15.5px;color:rgba(251,246,236,.7);max-width:72ch}
@media(max-width:760px){.agent{grid-template-columns:1fr;gap:5px}}

/* index des modules */
.mods{margin-top:52px;column-count:3;column-gap:clamp(22px,3vw,56px);column-rule:1px solid var(--filet)}
.mods div{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--filet);font-size:15.5px;display:flex;gap:12px}
.mods div span{font-family:var(--mono);font-size:10.5px;color:var(--encre-3);padding-top:4px}
.mods-foot{margin-top:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline;color:var(--encre-2)}
.mods-foot strong{color:var(--encre)}
.mods-foot a{font-weight:600}
@media(max-width:900px){.mods{column-count:2}}
@media(max-width:560px){.mods{column-count:1}}

/* figure produit */
.figure{margin-top:48px;border:1px solid var(--filet);border-bottom:3px solid var(--or);padding:clamp(9px,1.2vw,16px);background:var(--blanc);border-radius:var(--r)}
.figure img{border-radius:2px}
.figcap{margin-top:12px;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}

/* barème — cartes sur navy */
.prices{margin-top:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(251,246,236,.22);border:1px solid rgba(251,246,236,.22);border-radius:var(--r);overflow:hidden}
.price{background:var(--navy);padding:clamp(22px,2.2vw,32px)}
.price.hi{background:var(--blanc);color:var(--encre)}
.price .pk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.price.hi .pk{color:var(--or-f)}
.price h3{font-size:29px;margin:12px 0 4px;color:var(--blanc)}
.price.hi h3{color:var(--navy)}
.price .pt{font-size:14.5px;color:rgba(251,246,236,.7);margin:0 0 22px}
.price.hi .pt{color:var(--encre-2)}
.price .amount{font-family:var(--serif);font-size:50px;line-height:1;letter-spacing:-.02em;color:var(--or)}
.price.hi .amount{color:var(--violet)}
.price .unit{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,246,236,.7);margin-top:10px}
.price.hi .unit{color:var(--encre-2)}
.price ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(251,246,236,.2)}
.price.hi ul{border-top-color:var(--filet)}
.price li{padding:6px 0;font-size:15px;color:rgba(251,246,236,.84);display:flex;gap:10px}
.price.hi li{color:var(--encre-2)}
.price li:before{content:"\2014 ";color:var(--or)}
.price.hi li:before{color:var(--or-f)}
.price .pcta{margin-top:24px;display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;color:var(--or)}
.price .pcta:hover{color:var(--blanc)}
.price.hi .pcta{color:var(--navy)}
.price.hi .pcta:hover{color:var(--violet)}
.prices-foot{margin-top:24px;color:rgba(251,246,236,.74)}
.prices-foot strong{color:var(--blanc)}
.prices-foot a{color:var(--or);font-weight:600}
.prices-foot a:hover{color:var(--blanc)}
@media(max-width:900px){.prices{grid-template-columns:1fr}}

/* étapes */
.steps{margin-top:52px;border-top:1px solid var(--filet)}
.step{display:grid;grid-template-columns:104px minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(14px,2.6vw,44px);padding:22px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.step .sn{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;color:var(--or-f)}
.step h3{font-size:24px;color:var(--navy)}
.step p{margin:0;color:var(--encre-2);font-size:15.5px}
@media(max-width:760px){.step{grid-template-columns:1fr;gap:5px}}

/* écosystème */
.eco{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden}
.eco a{background:var(--blanc);padding:28px 24px;color:var(--encre);display:flex;flex-direction:column;gap:11px;border-top:3px solid transparent}
.eco a:hover{border-top-color:var(--violet);color:var(--encre)}
.eco a.p-locatif:hover{border-top-color:var(--vert)}
.eco a.p-transaction:hover{border-top-color:var(--bleu)}
.eco img{width:38px;height:38px;object-fit:contain}
.eco .ek{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.eco h3{font-size:24px;color:var(--navy)}
.eco h3 em{font-style:normal}
.eco a.p-locatif h3 em{color:var(--vert)}
.eco a.p-transaction h3 em{color:var(--bleu)}
.eco p{margin:0;font-size:15px;color:var(--encre-2);flex:1}
.eco .el{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--or-f)}
@media(max-width:860px){.eco{grid-template-columns:1fr}}

/* citation */
.quote{--sol:var(--encre);padding:clamp(64px,8vw,112px) 0;color:var(--creme)}
.quote blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.14;letter-spacing:-.022em}
.quote blockquote i{font-style:italic;color:inherit}
.quote .qby{margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,246,236,.55)}

/* CTA */
.cta{--sol:var(--creme);padding:clamp(70px,9vw,124px) 0;color:var(--encre)}
.cta.tinted{--sol:var(--blanc)}
/* RÈGLE GÉNÉRALE DES TITRES : un titre est bridé en mesure UNIQUEMENT quand
   quelque chose lui fait face (description en vis-à-vis). Sans vis-à-vis, il
   occupe toute la largeur de sa colonne. Voir aussi .sec-head ci-dessus. */
.cta h2{font-size:clamp(28px,4vw,54px);line-height:1.05;letter-spacing:-.028em;max-width:none;color:var(--navy)}
.cta h2 i{font-style:italic;color:inherit}
.cta p{color:var(--encre-2);max-width:58ch;margin:20px 0 0}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* pied */
/* Pied de page : C4 encre, et seul bloc qui s'étire d'un bord à l'autre de la page,
   contenu compris (sa mesure suit la largeur de l'écran, pas la colonne de 1220 px). */
.foot .wrap{max-width:none;padding:0 clamp(24px,4vw,64px)}
.foot{background:var(--encre);background-image:none;padding:clamp(38px,5vw,58px) 0 32px;font-size:14.5px;color:rgba(251,246,236,.74);border-top:3px solid var(--or)}
.foot a{color:rgba(251,246,236,.82)}
.foot a:hover{color:var(--or)}
.foot-grid{border-bottom-color:rgba(251,246,236,.18)}
.foot-brand{color:var(--blanc)}
.foot-brand .s2{color:var(--lilas)}
.foot-contact li{color:rgba(251,246,236,.7)}
.foot-contact span,.foot-col .ft{color:var(--or)}
.foot-col a,.foot-nav a{color:rgba(251,246,236,.78)}
.foot-col a:hover,.foot-nav a:hover{color:var(--or)}
.foot-end span{color:rgba(251,246,236,.5)}
.foot-top{border-color:rgba(251,246,236,.3);color:var(--creme)}
.foot-top:hover{border-color:var(--or);color:var(--or)}
.note{background:var(--or);color:#2a1c00;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px var(--pad);text-align:center}

/* ---------- PIED DE PAGE ---------- */
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);padding:0 0 34px;border-bottom:1px solid var(--filet)}
.foot-brand{display:flex;align-items:center;font-family:"Geist",var(--sans);font-weight:600;font-size:20px;letter-spacing:-.025em;color:var(--navy)}
.foot-brand img{width:28px;height:28px;object-fit:contain;margin-right:10px}
.foot-brand .s2{color:var(--violet)}
.foot-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px}
.foot-contact li{display:flex;flex-wrap:wrap;gap:8px;font-size:14.5px;color:var(--encre-2)}
.foot-contact span{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);min-width:56px}
.foot-col{display:flex;flex-direction:column;gap:7px}
.foot-col .ft{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-f);margin-bottom:4px}
.foot-col a{color:var(--encre-2);font-size:14.5px}
.foot-col a:hover{color:var(--violet)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;align-items:center;padding-top:22px;font-size:13.5px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px;flex:1}
.foot-nav a{font-size:13.5px}
.foot-end{display:flex;align-items:center;gap:20px}
.foot-end span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--encre-3)}
.foot-top{background:none;border:1px solid var(--filet);border-radius:var(--r);min-height:44px;padding:0 14px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);cursor:pointer}
.foot-top:hover{border-color:var(--navy);color:var(--violet)}
@media(max-width:1100px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-me{grid-column:1/-1}}
@media(max-width:700px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
/* ---------- MENU LOGIN ---------- */
.login-wrap{position:relative}
.login-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:61;width:230px;background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:8px;display:grid;gap:1px}
.login-menu[hidden]{display:none}
/* Connexion déplacée dans le pied (21 sept. 2026) : même mécanique, le panneau
   s'ouvre vers le haut et s'aligne à gauche, le pied étant en bas de page. */
.foot-login{margin-top:4px}
.foot-cnx{font-family:var(--sans);font-size:14.5px;color:rgba(251,246,236,.78);background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;text-align:left}
.foot-cnx:hover,.foot-login #loginBtn[aria-expanded="true"]{color:var(--or)}
.foot-login .login-menu{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
.login-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r);font-size:14.5px;color:var(--navy)}
.login-menu a:hover{background:var(--creme-2);color:var(--violet)}
.lcode-ov{position:fixed;inset:0;z-index:90;background:rgba(27,20,38,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.lcode-ov[hidden]{display:none}
.lcode-box{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--or);border-radius:var(--r);padding:26px;width:min(380px,100%)}
.lcode-title{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;color:var(--navy)}
.lcode-sub{margin:8px 0 18px;font-size:14.5px;color:var(--encre-2)}
.lcode-input{width:100%;min-height:48px;padding:0 12px;font-family:var(--mono);font-size:14px;background:var(--creme);border:1px solid var(--filet);border-radius:var(--r);color:var(--encre)}
.lcode-input:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.lcode-err{min-height:20px;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9B1C1C}
.lcode-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}