/* Cercle vertueux du bâtiment et de la mobilité — feuille de style issue de DESIGN.md */
@font-face{font-family:"Rozha One";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rozha-one-400.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/work-sans-400.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/work-sans-600.woff2) format("woff2")}

@font-face{font-family:"Rozha One Fallback";src:local("Times New Roman"),local("Times");size-adjust:117%;ascent-override:85.3%;descent-override:36.1%;line-gap-override:0%}
@font-face{font-family:"Work Sans Fallback";src:local("Arial"),local("Helvetica");size-adjust:114.5%;ascent-override:81.2%;descent-override:21.2%;line-gap-override:0%}

:root{
  --fond:#fafafa;
  --surface:#f0f3ed;
  --texte:#2e2f2d;
  --primaire:#d90d80;
  --accent:#1b96f3;
  --filet:#c3cbb9;
  --titres:"Rozha One","Rozha One Fallback",serif;
  --corps:"Work Sans","Work Sans Fallback",sans-serif;
  --reglure:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,var(--filet) 39px,var(--filet) 40px);
  --marge:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:16px;line-height:1.55;font-weight:400}
img{max-width:100%;height:auto;display:block;border-radius:0}
h1,h2,h3{font-family:var(--titres);font-weight:400;margin:0}
h1{font-size:clamp(40px,5.2vw,76px);line-height:1;color:var(--accent);letter-spacing:-0.01em}
h2{font-size:34px;line-height:1.1;margin:0 0 24px calc(2 * 100% / 12)}
h3{font-size:22px;line-height:1.2;margin:0 0 12px}
h4{font-family:var(--corps);font-weight:600;font-size:16px;margin:0 0 8px}
p{margin:0 0 16px}
a{color:var(--primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover,a:focus-visible{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--primaire);outline-offset:2px}
ul,ol{margin:0 0 16px;padding-left:20px}
strong{font-weight:600}
mark{background:transparent;color:var(--texte);box-shadow:inset 0 -0.42em 0 var(--accent);padding:0 2px}
h1 mark{box-shadow:inset 0 -0.3em 0 var(--accent);color:var(--texte)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--marge);top:-60px;background:var(--surface);padding:8px 12px;font-weight:600}
.skip:focus{top:8px;z-index:50}

.page{max-width:1360px;margin:0 auto;padding:0 var(--marge)}

/* ---------- En-tête : 160 px, logo seul à gauche, sommaire en colonne à droite ---------- */
.entete{border-bottom:4px double var(--filet);background:var(--fond)}
.entete .page{height:160px;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;width:392px;height:78px}
.logo img{width:392px;height:78px}
.sommaire-btn{display:none}
.sommaire{margin:0;padding:0;list-style:none;font-size:14px;line-height:22px;font-weight:600}
.sommaire li{display:flex;gap:10px;justify-content:flex-end}
.sommaire .num{font-family:var(--titres);font-weight:400;color:var(--primaire);min-width:22px;text-align:right}
.sommaire a{color:var(--texte);text-decoration:none;border-bottom:2px solid transparent}
.sommaire a:hover,.sommaire a:focus-visible{border-bottom-color:var(--primaire)}
.sommaire a[aria-current="page"]{border-bottom-color:var(--primaire)}
.sommaire .don a{box-shadow:inset 0 -0.42em 0 var(--accent);padding:0 2px}

/* ---------- Hero : titre à gauche puis bandeau photo étroit 30 vh ---------- */
.hero{padding:56px 0 32px;background-image:var(--reglure)}
.hero h1{max-width:calc(10 * 100% / 12)}
.hero .filet-accent{width:96px;height:6px;background:var(--accent);margin:20px 0 16px}
.hero .mission{font-size:22px;line-height:1.45;max-width:60ch;margin:0}
.bandeau{height:30vh;min-height:180px;max-height:360px;border-top:4px double var(--filet);border-bottom:4px double var(--filet);margin:0}
.bandeau img{width:100%;height:100%;object-fit:cover}

/* ---------- Grille magazine 3 colonnes, filets entre les colonnes ---------- */
.grille{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:4px double var(--filet)}
.grille > *{padding:40px 24px 32px}
.grille > .c1{grid-column:1}
.grille > .c2{grid-column:2;border-left:1px solid var(--filet)}
.grille > .c3{grid-column:3;border-left:1px solid var(--filet)}
.grille > .c12{grid-column:1 / span 2}
.grille > .c23{grid-column:2 / span 2;border-left:1px solid var(--filet)}
.grille > .c123{grid-column:1 / span 3}
.grille > .haut2{grid-row:span 2}
.grille > .rang{border-top:1px solid var(--filet)}
.grille h2{margin-left:48px}
.grille .c123 h2,.grille .c12 h2,.grille .c23 h2{margin-left:calc(2 * 100% / 12)}
.grille > *:first-child{padding-left:0}
.grille > .c123{padding-left:0;padding-right:0}
.grille > .c1{padding-left:0}

/* ---------- Rythme des sections ---------- */
section{padding:56px 0}
.s-deux .deux{display:grid;grid-template-columns:7fr 5fr;gap:0}
.s-deux .deux > div{padding-right:40px}
.s-deux .deux figure{margin:0;border-left:1px solid var(--filet);padding-left:24px}
figure{margin:0}
figcaption{font-size:14px;line-height:1.45;border-top:1px solid var(--filet);padding-top:8px;margin-top:8px}

.s-dl dl{margin:0;background:var(--surface);background-image:var(--reglure);padding:16px 24px 8px}
.s-dl dt{font-weight:600;font-size:16px;padding-top:12px;display:flex;gap:12px;align-items:baseline}
.s-dl dt .num{font-family:var(--titres);font-weight:400;font-size:26px;color:var(--primaire);min-width:30px;line-height:1}
.s-dl dd{margin:4px 0 12px 42px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.s-dl dd:last-child{border-bottom:0}

.s-grand{padding:72px 0}
.s-grand .grand{font-size:22px;line-height:1.45;max-width:46em}
.s-grand .grand p{margin-bottom:22px}

.s-frise ol.frise{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--filet)}
.s-frise ol.frise li{position:relative;padding:0 0 24px 0}
.s-frise ol.frise li::before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;background:var(--primaire)}
.s-frise .date{display:block;font-family:var(--titres);font-size:18px;color:var(--primaire);line-height:1.2;margin-bottom:4px}
.s-frise ol.frise li h3{margin-bottom:6px}

.s-note .note-grille{display:grid;grid-template-columns:8fr 1fr 3fr;gap:0}
.s-note .note-grille > div{grid-column:1}
.s-note aside{grid-column:3;font-size:14px;line-height:1.45;border-left:1px solid var(--filet);padding-left:16px;align-self:start}
.s-note aside h3{font-size:18px}

.s-index ol.index{list-style:none;margin:0;padding:0;counter-reset:idx}
.s-index ol.index li{counter-increment:idx;display:grid;grid-template-columns:72px 1fr;gap:0;padding:16px 0;border-top:1px solid var(--filet)}
.s-index ol.index li:last-child{border-bottom:1px solid var(--filet)}
.s-index ol.index li::before{content:counter(idx);font-family:var(--titres);font-size:34px;line-height:1;color:var(--primaire)}
.s-index ol.index li p:last-child{margin-bottom:0}

.s-cite{padding:40px 0}
.s-cite blockquote{margin:0;border-top:4px double var(--filet);border-bottom:4px double var(--filet);padding:32px calc(1 * 100% / 12);font-family:var(--titres);font-size:clamp(28px,3.2vw,44px);line-height:1.15}
.s-cite blockquote p{margin:0}
.s-cite cite{display:block;font-family:var(--corps);font-style:normal;font-size:14px;margin-top:16px}

/* ---------- Boutons, lettrines, divers ---------- */
.btn{display:inline-block;font-family:var(--corps);font-weight:600;font-size:18px;line-height:1.3;color:var(--texte);background:transparent;border:0;border-bottom:4px solid var(--primaire);padding:0 0 2px;margin:4px 0;cursor:pointer;text-decoration:none;border-radius:0}
.btn::after{content:"\2192";margin-left:0.4em}
.btn:hover,.btn:focus-visible{border-bottom-width:6px;padding-bottom:0}
.btn-sans-fleche::after{content:none}
.actions-liens{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:8px}
.lettrine::first-letter{font-family:var(--titres);font-size:72px;line-height:0.8;float:left;padding:6px 10px 0 0;color:var(--primaire)}
.encadre{background:var(--surface);background-image:var(--reglure);border-top:4px double var(--filet);border-bottom:4px double var(--filet);padding:24px}
.encadre h2,.encadre h3{margin-left:0}
.identite{font-size:14px;line-height:1.45;border-left:1px solid var(--filet);padding-left:16px}
.identite dt{font-weight:600}
.identite dd{margin:0 0 8px}
table{border-collapse:collapse;width:100%;margin:0 0 16px}
th,td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--filet)}
th{font-weight:600;font-size:14px}
thead th{border-bottom:4px double var(--filet)}

/* ---------- Formulaires ---------- */
form{margin:0}
.champ{margin:0 0 18px}
.champ label,.groupe legend{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.champ input[type="text"],.champ input[type="email"],.champ input[type="tel"],.champ input[type="number"],.champ select,.champ textarea{width:100%;height:44px;border:1px solid var(--filet);background:var(--fond);color:var(--texte);font:inherit;padding:8px 12px;border-radius:0}
.champ textarea{height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border:2px solid var(--primaire);outline:0}
.champ input:disabled{background:var(--surface);border-style:dashed}
.aide{font-size:14px;margin:6px 0 0}
.erreur{display:none;font-size:14px;font-weight:600;color:var(--primaire);margin:6px 0 0}
input:user-invalid ~ .erreur,textarea:user-invalid ~ .erreur,select:user-invalid ~ .erreur{display:block}
.groupe{border:0;padding:0;margin:0 0 18px}
.groupe .choix{display:flex;flex-wrap:wrap;gap:12px 24px}
.groupe .choix label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:16px;margin:0}
.groupe input[type="radio"],.consent input[type="checkbox"]{width:22px;height:22px;margin:0;accent-color:var(--primaire)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin:0 0 18px}
.consent label{margin:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formulaire{background:var(--surface);background-image:var(--reglure);border-top:4px double var(--filet);border-bottom:4px double var(--filet);padding:24px}
.formulaire h2,.formulaire h3{margin-left:0}
.message-envoi{display:none;border-top:4px double var(--filet);border-bottom:4px double var(--filet);padding:16px 0;margin:0 0 24px;font-weight:600}
.message-envoi.visible{display:block}
.carte-btn{margin-top:8px}
.carte{display:none;margin-top:16px;border-top:4px double var(--filet);border-bottom:4px double var(--filet)}
.carte.visible{display:block}
.carte iframe{width:100%;height:360px;border:0;display:block}

/* ---------- Pied de page ---------- */
.pied{background:var(--surface);background-image:var(--reglure);border-top:4px double var(--filet);padding:40px 0 48px;margin-top:56px}
.pied .denomination{font-family:var(--titres);font-size:clamp(28px,6vw,96px);line-height:0.95;color:var(--accent);margin:0 0 32px;max-width:14em}
.pied-grille{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;font-size:14px;line-height:1.45}
.pied-grille > div{padding:0 24px}
.pied-grille > div:first-child{padding-left:0}
.pied-grille > div + div{border-left:1px solid var(--filet)}
.pied-grille ul{list-style:none;margin:0;padding:0}
.pied-grille li{margin:0 0 6px}
.pied-grille a{color:var(--texte)}
.pied-grille address{font-style:normal}
.pied-grille button{font:inherit;font-weight:600;color:var(--texte);background:transparent;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ---------- Bandeau cookies ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:4px double var(--filet);padding:16px var(--marge);display:none}
.cookies.visible{display:block}
.cookies .page{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0}
.cookies p{margin:0;font-size:14px;max-width:70ch}
.cookies .choix-cookies{display:flex;gap:32px;align-items:center}
.cookies .btn{font-size:16px}

/* ---------- Pages simples ---------- */
.simple{max-width:46em}
.simple h2{margin-left:0;font-size:28px;margin-top:40px}
.simple h3{margin-top:24px}
.deux-colonnes-liens{display:flex;gap:40px;flex-wrap:wrap}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  :root{--marge:16px}
  .entete .page{height:88px;position:relative}
  .logo,.logo img{width:220px;height:44px}
  .sommaire-btn{display:inline-block;font:inherit;font-weight:600;font-size:14px;background:transparent;border:0;border-bottom:3px solid var(--primaire);padding:0 0 2px;color:var(--texte);cursor:pointer;border-radius:0}
  .sommaire{display:none;position:absolute;left:0;right:0;top:88px;background:var(--surface);border-top:4px double var(--filet);border-bottom:4px double var(--filet);padding:8px var(--marge);font-size:18px;line-height:44px;z-index:30}
  .sommaire.ouvert{display:block}
  .sommaire li{justify-content:flex-start}
  h2{margin-left:24px;font-size:28px}
  .grille{grid-template-columns:1fr}
  .grille > *{grid-column:1 !important;grid-row:auto !important;border-left:0;padding:32px 0 24px;border-top:4px double var(--filet)}
  .grille > *:first-child{border-top:0}
  .grille h2,.grille .c123 h2,.grille .c12 h2,.grille .c23 h2{margin-left:24px}
  .hero{padding:32px 0 24px}
  .hero .mission{font-size:18px}
  .s-deux .deux{grid-template-columns:1fr}
  .s-deux .deux > div{padding-right:0}
  .s-deux .deux figure{border-left:0;padding-left:0;border-top:1px solid var(--filet);padding-top:16px}
  .s-grand{padding:48px 0}
  .s-grand .grand{font-size:19px}
  .s-note .note-grille{grid-template-columns:1fr}
  .s-note aside{grid-column:1;border-left:0;border-top:1px solid var(--filet);padding:12px 0 0;margin-top:16px}
  .s-cite blockquote{padding:24px 0}
  .s-index ol.index li{grid-template-columns:48px 1fr}
  .s-index ol.index li::before{font-size:28px}
  .pied-grille{grid-template-columns:1fr}
  .pied-grille > div{padding:16px 0 0}
  .pied-grille > div + div{border-left:0;border-top:1px solid var(--filet);margin-top:16px}
  .pied .denomination{font-size:28px}
  .cookies{padding:12px var(--marge)}
  .cookies .choix-cookies{gap:24px}
  .deux-colonnes-liens{gap:16px}
}

/* ---------- Compléments ---------- */
.montre-erreurs input:invalid ~ .erreur,.montre-erreurs textarea:invalid ~ .erreur,.montre-erreurs select:invalid ~ .erreur,.montre-erreurs input:invalid ~ label .erreur{display:block}
.landing-haut{padding-top:32px}
.landing-haut .deux{grid-template-columns:6fr 6fr}
.landing-haut .texte-landing{border-left:1px solid var(--filet);padding-left:24px;padding-right:0}
.landing-hero{padding-bottom:16px}
.landing-hero h1{font-size:clamp(36px,4.2vw,60px)}
.entete .sommaire.simple-nav{display:block;position:static;background:transparent;border:0;padding:0;font-size:14px;line-height:22px}
@media (max-width:900px){
  .landing-haut .deux{grid-template-columns:1fr}
  .landing-haut .texte-landing{border-left:0;padding-left:0;border-top:1px solid var(--filet);padding-top:16px;margin-top:24px}
}

.page:has(.bandeau) + .page .grille{border-top:0}

/* Liens en petit corps sur fond --surface : texte anthracite pour le contraste */
.cookies a,.formulaire a,.s-dl dl a,.encadre a,.pied-grille a{color:var(--texte)}