/* ============================================================================
   RC Car Avignon — feuille de style du site
   Direction artistique validée le 22/10/2026 : fond quasi noir, accent rouge du
   logo, Archivo condense italique en titres, Barlow en texte, angles vifs.
   Le CSS critique (jusqu'au hero) est dupliqué en ligne dans le <head> par
   build.py ; ce fichier est chargé sans bloquer le rendu.
   ========================================================================= */

:root{
  --bg:#0a0b0d; --bg-soft:#141517; --bg-card:#17181a; --bg-deep:#050607;
  --line:#2c2d2f; --line-strong:#4c4d4e;
  /* Demande de Yann, 22/10/2026 : sur fond noir, pas de typo grise — du blanc.
     --text sert tout le texte courant. --soft ne sert QUE les petites étiquettes
     (sur-titres, légendes, fil d'Ariane) : assez clair pour ne pas lire « gris »,
     juste assez en retrait pour que la hiérarchie tienne encore. */
  --text:#ffffff; --soft:#d6d6d8; --muted:#d6d6d8; --ink:#fff;
  --accent:#c32914;          /* rouge du logo : aplats, boutons */
  --accent-br:#ff5436;       /* même rouge, éclairci pour rester lisible sur noir */
  --accent-soft:#1d0f0c;
  --on-accent:#fff;
  --radius:4px;
  --fs-hero:clamp(2.4rem,7vw,5.4rem);
  --fs-h1:clamp(2rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.6rem,3.2vw,2.5rem);
  --fs-h3:clamp(1.2rem,2vw,1.5rem);
  --shadow:0 20px 50px -30px rgba(0,0,0,.9);
  --util-h:34px; --nav-h:110px;   /* 34 de bandeau + 76 de navigation */
  --ease:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
/* Titres : Archivo condensé en italique noire. La vraie italique de la famille,
   pas une déformation — elle reprend l'inclinaison du logo du club, qui est penché
   avec des traits de vitesse. Repli métrique pour éviter le saut au chargement. */
h1,h2,h3,h4,.titrage{font-family:'Archivo','Archivo-repli',Impact,'Arial Narrow',sans-serif;font-weight:900;font-style:italic;
  font-stretch:75%;text-transform:uppercase;letter-spacing:.004em;color:var(--ink);line-height:1.04}
h3,h4{font-weight:800}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-br)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-br);outline-offset:2px}
.wrap{width:min(1240px,100% - 2rem);margin-inline:auto}
@media(min-width:768px){.wrap{width:min(1240px,100% - 4rem)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;top:-60px;left:1rem;z-index:200;background:var(--accent);color:#fff;
  padding:.8rem 1.2rem;border-radius:var(--radius);text-decoration:none;transition:top .25s var(--ease)}
.skip:focus{top:1rem}
.ico-inline{width:1em;height:1em;vertical-align:-.12em;margin-right:.25em}

/* ── eyebrow ───────────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-br);margin:0 0 1.1rem}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--accent-br)}

/* ── boutons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.85rem 1.5rem;min-height:46px;border:0;cursor:pointer;text-decoration:none;
  font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-radius:var(--radius);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#e0301a;transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.btn .ico{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.14);transition:transform .3s var(--ease)}
/* Sans cette règle, un SVG posé directement dans un bouton prend toute la place
   disponible : l'icône du téléphone s'affichait en énorme. */
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn .ico svg{width:12px;height:12px}
.btn:hover .ico{transform:translate(3px,-1px)}

/* ── navigation ────────────────────────────────────────────────────────── */
/* Deux étages depuis le 22/10/2026 : bandeau d'utilité, puis navigation. */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;flex-direction:column;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease)}
.nav-bar{flex:1;display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(10,11,13,.9),rgba(10,11,13,0))}
.nav.is-stuck .nav-bar,.nav.is-solid .nav-bar{background:none}
.nav.is-stuck,.nav.is-solid{background:rgba(10,11,13,.82);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line)}
/* Menu ouvert : la barre repasse au-dessus du panneau, sinon la croix de fermeture
   se retrouve dessous et devient inatteignable. */
body.menu-open .nav{z-index:102;background:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;border-bottom-color:transparent}
.nav .wrap{display:flex;align-items:center;gap:.9rem;width:min(1400px,100% - 2rem)}
.nav-logo{flex:0 0 auto;display:flex;align-items:center;min-height:44px}
.nav-logo img{height:38px;width:auto}
.nav-list{display:none;margin:0 0 0 auto;padding:0;list-style:none;align-items:center;gap:.1rem}
@media(min-width:1340px){.nav-list{display:flex}}
.nav-list>li{position:relative}
.nav-list>li>a,.nav-list>li>button{position:relative;display:flex;align-items:center;gap:.3rem;
  white-space:nowrap;font-size:.76rem;
  background:none;border:0;cursor:pointer;font-family:'Barlow',sans-serif;font-size:.8rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  text-decoration:none;height:46px;line-height:1;padding:0 .5rem;
  transition:color .25s var(--ease)}
.nav-list>li>a:hover,.nav-list>li>button:hover,
.nav-list>li:focus-within>button,.nav-list>li.on>a{color:var(--ink)}
.nav-list>li>button svg{width:11px;height:11px;transition:transform .3s var(--ease)}
.nav-list>li:hover>button svg,.nav-list>li:focus-within>button svg{transform:rotate(180deg)}
.nav-list>li>a::after,.nav-list>li>button::after{content:"";position:absolute;
  left:.5rem;right:.5rem;bottom:.5rem;height:2px;background:var(--accent-br);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-list>li:hover>a::after,.nav-list>li:hover>button::after,
.nav-list>li:focus-within>button::after,.nav-list>li.on>a::after,
.nav-list>li.on>button::after{transform:scaleX(1)}
.dropdown{position:absolute;top:100%;right:0;min-width:300px;max-width:min(92vw,660px);
  padding:.5rem;margin:0;list-style:none;background:rgba(16,17,19,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nav-list>li:first-child .dropdown,.nav-list>li:nth-child(2) .dropdown{right:auto;left:0}
.nav-list>li:hover>.dropdown,.nav-list>li:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown.is-wide{width:620px;display:grid;grid-template-columns:1fr 1fr;gap:0 .4rem;align-content:start}
.dropdown a{display:block;padding:.55rem .8rem;font-size:.88rem;line-height:1.35;
  text-decoration:none;color:var(--text);border-radius:var(--radius);
  transition:background .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
.dropdown a:hover,.dropdown a.here{background:var(--accent-soft);color:var(--ink);padding-left:1.05rem}
.dropdown .dd-head{padding:.8rem .8rem .25rem;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dropdown .dd-sep{height:1px;background:var(--line);margin:.45rem .8rem}
.dropdown.is-wide .dd-head,.dropdown.is-wide .dd-sep{grid-column:1/-1}
.nav-cta{display:none;padding-inline:1.1rem}
@media(min-width:1340px){.nav-cta{display:inline-flex;margin-left:.5rem;flex:0 0 auto}}

.burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;z-index:102}
@media(min-width:1340px){.burger{display:none}}
.burger span{display:block;width:26px;height:2px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .25s var(--ease)}
.burger span+span{margin-top:7px}
body.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.mobile{position:fixed;inset:0;z-index:101;background:rgba(10,11,13,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--nav-h) + 1rem) 1.5rem 3rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
body.menu-open .mobile{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.mobile details{border-bottom:1px solid var(--line)}
.mobile summary{list-style:none;cursor:pointer;padding:1rem .2rem;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:'Archivo','Archivo-repli',Impact,'Arial Narrow',sans-serif;font-style:italic;font-stretch:75%;font-weight:900;font-size:1.25rem;text-transform:uppercase;color:var(--ink)}
.mobile summary::-webkit-details-marker{display:none}
.mobile summary svg{width:18px;height:18px;flex:0 0 auto;transition:transform .3s var(--ease)}
.mobile details[open] summary svg{transform:rotate(180deg)}
.mobile details a{display:flex;align-items:center;padding:.6rem .2rem;min-height:44px;
  font-size:.98rem;line-height:1.35;text-decoration:none;color:var(--text)}
.mobile>a{display:flex;align-items:center;font-family:'Archivo','Archivo-repli',Impact,'Arial Narrow',sans-serif;font-style:italic;font-stretch:75%;font-weight:900;font-size:1.25rem;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:1rem .2rem;min-height:48px;border-bottom:1px solid var(--line)}
.mobile details a:hover,.mobile details a.here{color:var(--accent-br)}
.mobile .dd-head{padding:.8rem .2rem .2rem;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mobile .btn{width:100%;margin-top:1.6rem}

/* ── hero d'accueil ────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 3rem) 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  animation:kb 22s ease-out forwards}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,11,13,.62) 0%,rgba(10,11,13,.25) 38%,
    rgba(10,11,13,.92) 86%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:var(--fs-hero);max-width:16ch;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.hero h1 .br{color:var(--accent-br)}
.hero .lead{max-width:48ch;font-size:1.08rem;color:#dcdcdd;margin:1.4rem 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.stats{position:relative;z-index:1;margin-top:3.2rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:1.4rem 1rem 1.6rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.stat{border-bottom:0}.stat:last-child{border-right:0}}
.stat b{display:block;font-family:'Archivo','Archivo-repli',Impact,'Arial Narrow',sans-serif;font-style:italic;font-stretch:75%;font-weight:900;font-size:clamp(1.9rem,4vw,2.8rem);
  color:var(--ink);line-height:1}
.stat span{display:block;margin-top:.3rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ── hero des pages intérieures ────────────────────────────────────────── */
.hero-page{position:relative;padding:calc(var(--nav-h) + 3.4rem) 0 2.8rem;
  background:var(--bg-deep);border-bottom:1px solid var(--line);overflow:hidden}
.hero-page::before{content:"";position:absolute;inset:0;opacity:.16;
  background:radial-gradient(70ch 40ch at 82% -10%,var(--accent) 0%,transparent 62%)}
.hero-page .wrap{position:relative}
.hero-page h1{font-size:var(--fs-h1);max-width:22ch}
.fil{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none;
  font-size:.76rem;letter-spacing:.06em;color:var(--muted)}
.fil li{display:flex;align-items:center;gap:.4rem}
.fil a{color:var(--muted);text-decoration:none}
.fil a:hover{color:var(--accent-br)}
.fil svg{width:10px;height:10px;opacity:.6}

/* ── corps de page ─────────────────────────────────────────────────────── */
main{display:block}
.page{padding:clamp(2.6rem,5vw,4.4rem) 0 clamp(3.5rem,7vw,6rem)}
.layout{display:grid;gap:2.6rem}
@media(min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 320px;gap:3.2rem;align-items:start}}

.prose{max-width:74ch;font-size:1.03rem}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-size:var(--fs-h2);margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--fs-h3);margin-top:2rem;color:var(--ink)}
.prose h4{font-size:1.05rem;margin-top:1.6rem;color:var(--ink)}
/* ⚠️ Ne PAS remettre « .prose p{margin:0} » ici : à spécificité égale, cette règle
   passait après .prose>*+* et annulait l'espacement de TOUS les paragraphes du site.
   Les marges sont gérées par .prose>*+* au-dessus. */
.prose p{margin-bottom:0}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose a{color:var(--accent-br);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .2s var(--ease)}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{margin:0;padding-left:0;list-style:none}
.prose ol{counter-reset:n}
.prose li{position:relative;padding-left:1.7rem;margin-top:.55rem}
.prose ul>li::before{content:"";position:absolute;left:.1rem;top:.72em;width:7px;height:7px;
  background:var(--accent);transform:rotate(45deg)}
.prose ol>li{counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.05em;
  font-family:'Archivo','Archivo-repli',Impact,'Arial Narrow',sans-serif;font-style:italic;font-stretch:75%;font-weight:900;font-size:.82rem;color:var(--accent-br)}
.prose img{margin:1.8rem 0;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.prose blockquote{margin:1.8rem 0;padding:1.1rem 1.4rem;background:var(--bg-card);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0}
.prose table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.94rem;
  display:block;overflow-x:auto}
.prose th,.prose td{padding:.65rem .8rem;border:1px solid var(--line);text-align:left;
  font-variant-numeric:tabular-nums}
.prose th{background:var(--bg-card);color:var(--ink);font-weight:600;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}

/* ── colonne latérale ──────────────────────────────────────────────────── */
.aside{display:flex;flex-direction:column;gap:1rem}
@media(min-width:1000px){.aside{position:sticky;top:calc(var(--nav-h) + 1.5rem)}}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.card h2,.card h3{font-size:1.1rem;margin:0 0 1rem;padding-bottom:.8rem;border-bottom:2px solid var(--accent)}
.card ul{list-style:none;margin:0;padding:0}
.card li+li{border-top:1px solid var(--line)}
.card li a{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;min-height:44px;
  font-size:.92rem;line-height:1.35;color:var(--text);text-decoration:none;
  transition:color .2s var(--ease),gap .2s var(--ease)}
.card li a:hover{color:var(--ink);gap:.95rem}
.card li a svg{width:13px;height:13px;flex:0 0 auto;color:var(--accent-br)}
.card li a.here{color:var(--accent-br);font-weight:600}
.card .btn{width:100%;margin-top:.9rem}
.card p{margin:0 0 .8rem;font-size:.93rem;color:var(--text)}
.card-contact strong{display:block;color:var(--ink);font-size:1.15rem;margin-bottom:.2rem}

/* ── calculateurs : commandes de formulaire ────────────────────────────── */
.prose label{display:block;margin-top:1rem;font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prose input,.prose select,.prose textarea{width:100%;max-width:26rem;min-height:46px;
  margin-top:.35rem;padding:.6rem .8rem;background:var(--bg-deep);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-family:'Barlow',sans-serif;font-size:1rem;font-variant-numeric:tabular-nums}
.prose input[type=checkbox],.prose input[type=radio]{width:auto;min-height:auto;margin-right:.5rem}
.prose button{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.6rem;
  min-height:46px;padding:.8rem 1.4rem;background:var(--accent);color:#fff;border:0;
  border-radius:var(--radius);cursor:pointer;font-family:'Barlow',sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.prose button:hover{background:#e0301a;transform:translateY(-2px)}
.prose output,.prose .resultat{display:block;margin-top:1.2rem;padding:1rem 1.2rem;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);
  color:var(--ink);font-variant-numeric:tabular-nums}

/* ── pied de page ──────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:3.4rem 0 2.2rem;font-size:.92rem;color:var(--text);
  background:var(--bg-deep)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
/* Intitulés du pied de page : volontairement PAS des titres. Ils n'ont rien à faire
   dans le plan du document, que Google lit pour comprendre le contenu de la page. */
.foot-titre{font-family:'Archivo','Archivo-repli',Impact,sans-serif;font-style:italic;
  font-stretch:75%;font-weight:900;text-transform:uppercase;color:var(--ink);
  font-size:.95rem;margin:0 0 .4rem;letter-spacing:.06em}
footer p{margin:0 0 .8rem}
.foot-links{list-style:none;margin:0;padding:0}
/* En ligne, ces liens tombaient à 17 px de haut, sous le minimum tactile. */
.foot-links a{display:flex;align-items:center;min-height:44px;color:var(--text);
  text-decoration:none;line-height:1.3}
.foot-links a:hover{color:var(--accent-br)}
.foot-social{display:flex;gap:.6rem;margin-top:.4rem}
.foot-social a{display:grid;place-items:center;width:44px;height:44px;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.foot-social a:hover{color:var(--accent-br);border-color:var(--accent)}
.foot-social svg{width:18px;height:18px}
.foot-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;font-size:.82rem}
.foot-bottom a{color:var(--muted);text-decoration:none}
.foot-bottom a:hover{color:var(--accent-br)}

/* ── apparition au défilement ──────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.seen{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .hero-bg img{animation:none}
}

/* ── formulaire de contact ─────────────────────────────────────────────── */
#form-contact{margin-top:1.4rem;max-width:40rem}
.form-grid{display:grid;gap:0 1rem;grid-template-columns:1fr;margin:0}
@media(min-width:620px){.form-grid{grid-template-columns:1fr 1fr}}
#form-contact textarea{max-width:none}
.form-rgpd{margin-top:1.4rem}
.form-rgpd label{display:flex;gap:.65rem;align-items:flex-start;text-transform:none;
  letter-spacing:0;font-size:.95rem;font-weight:400;color:var(--text);line-height:1.5}
.form-rgpd input{margin-top:.35rem;width:18px;height:18px;min-height:0;flex:0 0 auto;accent-color:var(--accent)}
/* Pot de miel : masqué à l'œil, laissé lisible par les robots, qui le remplissent. */
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-retour{display:block;margin-top:1rem;font-size:.95rem;color:var(--muted)}
.form-retour.est-erreur{color:#ff8a72}
#form-contact button[disabled]{opacity:.55;cursor:progress}
/* La question de vérification est une phrase, pas un nom de champ : elle garde
   sa casse, sinon elle s'affiche en capitales et se lit mal. */
#form-contact label[for="f-captcha"]{text-transform:none;letter-spacing:.01em;
  font-size:.95rem;font-weight:600;color:var(--text)}

/* ══ Page d'accueil ═══════════════════════════════════════════════════════
   L'accueil n'utilise pas le gabarit « article + colonne » des autres pages :
   c'est une suite de sections, chacune avec son fond et son rythme. */
.sec{padding:clamp(3.4rem,6.5vw,6rem) 0}
.sec--fond{background:var(--bg-soft);border-block:1px solid var(--line)}
.sec h2{font-size:var(--fs-h2);margin:0 0 1.6rem;max-width:20ch}
.sec p{margin:0 0 1rem;max-width:68ch}
.sec-duo{display:grid;gap:2.4rem}
@media(min-width:960px){.sec-duo{grid-template-columns:minmax(0,1fr) 360px;gap:3.4rem;align-items:start}}
.sec-cta{margin-top:2.2rem}

/* encart latéral de section */
.encart{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow)}
.sec--fond .encart{background:var(--bg)}
.encart h3{font-size:1.15rem;margin:0 0 1rem;padding-bottom:.8rem;border-bottom:2px solid var(--accent)}
.encart p{font-size:.95rem}
.encart .btn{width:100%;margin-top:1rem}
.encart--regle{border-color:var(--accent)}
.jalons,.regle,.chemins,.itineraires{list-style:none;margin:0;padding:0}
.jalons li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.95rem}
.jalons li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--accent-br);transform:rotate(45deg)}
.regle li{position:relative;padding-left:1.6rem;margin-top:.6rem;font-size:.97rem}
.regle li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;
  border:2px solid var(--accent-br);border-top:0;border-right:0;transform:rotate(-45deg)}
.regle strong{color:var(--ink)}

/* les pistes */
.pistes{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.6rem}
@media(min-width:700px){.pistes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.pistes{grid-template-columns:repeat(3,1fr)}}
.piste{position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.5rem 1.3rem;overflow:hidden;
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.sec--fond .piste{background:var(--bg)}
.piste:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.piste::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line-strong)}
.piste--ouverte::before{background:#3ddc84}
.piste--travaux::before{background:var(--accent-br)}
.piste--projet::before{background:var(--line-strong)}
.piste-num{font-family:'Archivo','Archivo-repli',sans-serif;font-style:italic;font-stretch:75%;
  font-weight:900;font-size:2.4rem;line-height:1;color:var(--line-strong);margin:0 0 .3rem}
.piste h3{font-size:1.15rem;margin:0 0 .5rem}
.piste-txt{font-size:.93rem;color:var(--text);margin:0 0 1rem}
.piste-etat{display:inline-flex;align-items:center;gap:.45rem;margin:0;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.piste-etat::before{content:"";width:7px;height:7px;border-radius:50%}
.piste--ouverte .piste-etat{color:#3ddc84}
.piste--ouverte .piste-etat::before{background:#3ddc84}
.piste--travaux .piste-etat{color:var(--accent-br)}
.piste--travaux .piste-etat::before{background:var(--accent-br)}
.piste--projet .piste-etat{color:var(--muted)}
.piste--projet .piste-etat::before{background:var(--muted)}

/* les façons d'aider */
.aides{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.6rem}
@media(min-width:700px){.aides{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.aides{grid-template-columns:repeat(3,1fr)}}
.aide{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem;transition:border-color .35s var(--ease)}
.aide:hover{border-color:var(--accent)}
.aide-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--accent-br)}
.aide-ico svg{width:19px;height:19px}
.aide h3{font-size:1.1rem;margin:0 0 .35rem}
.aide-sous{font-size:.7rem!important;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem!important}
.aide p{font-size:.93rem;margin:0 0 1.2rem;color:var(--text)}
.aide-lien{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-br);text-decoration:none;transition:gap .25s var(--ease)}
.aide-lien:hover{gap:.9rem}
.aide-lien svg{width:14px;height:14px}

/* accès */
.alerte{display:flex;gap:.7rem;padding:.9rem 1.1rem;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem;color:var(--ink)}
.chemins li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;
  padding:.8rem 0;border-bottom:1px solid var(--line)}
.chemins strong{color:var(--ink);font-size:1.02rem}
.chemins span{font-size:.88rem;color:var(--soft)}
.itineraires li{position:relative;padding-left:1.6rem;margin-top:.7rem;font-size:.95rem}
.itineraires li::before{content:"";position:absolute;left:0;top:.56em;width:8px;height:8px;
  border-top:2px solid var(--accent-br);border-right:2px solid var(--accent-br);transform:rotate(45deg)}
.itineraires span{color:var(--soft)}
.qr{display:block;margin-top:1rem;max-width:200px}
.qr img{border:1px solid var(--line);border-radius:var(--radius)}

/* partenaires */
.sec--partenaires{padding-block:clamp(2.4rem,4vw,3.4rem)}
.partenaires{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem;
  list-style:none;margin:.6rem 0 0;padding:0}
.partenaires img{height:44px;width:auto;opacity:.75;filter:grayscale(1);
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.partenaires li:hover img{opacity:1;filter:none}

/* ── Widget de don HelloAsso ───────────────────────────────────────────────
   La hauteur est ajustée par le widget lui-même, qui l'envoie par postMessage.
   On pose une hauteur de départ pour que la page ne saute pas au chargement. */
.ha-embed{margin:1.6rem 0;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem}
.ha-embed iframe{display:block;width:clamp(300px,100%,26rem);height:620px;
  margin:0 auto;border:0}
.ha-repli{font-size:.9rem;color:var(--text)}

/* ── Vidéos ────────────────────────────────────────────────────────────────
   Façade cliquable : rien n'est chargé depuis YouTube avant le clic. */
.videos{display:grid;gap:1.4rem;grid-template-columns:1fr;margin:1.4rem 0 0}
@media(min-width:760px){.videos{grid-template-columns:repeat(2,1fr)}}
.video h3{font-size:1.08rem;margin:.9rem 0 .3rem}
.video p{margin:0;font-size:.93rem;color:var(--text)}
.video-face,.video iframe{display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-deep)}
.video-face{position:relative;padding:0;cursor:pointer;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.video-face img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .3s var(--ease)}
.video-face:hover{border-color:var(--accent);transform:translateY(-3px)}
.video-face:hover img{transform:scale(1.04);opacity:.78}
.video-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:68px;height:68px;border-radius:50%;
  background:var(--accent);color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),background .3s var(--ease)}
.video-play svg{width:28px;height:28px;margin-left:3px}
.video-face:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:#e0301a}
.video iframe{border:1px solid var(--line)}
.videos-chaine{margin-top:1.4rem}
.videos-chaine a{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-br);text-decoration:none;transition:gap .25s var(--ease)}
.videos-chaine a:hover{gap:.9rem}
.videos-chaine svg{width:14px;height:14px}
/* Dans une page d'article, les vidéos restent dans la colonne de texte. */
.prose .videos{grid-template-columns:1fr}
@media(min-width:900px){.prose .videos{grid-template-columns:repeat(2,1fr)}}

/* ── Itinéraires ───────────────────────────────────────────────────────────
   Le plan n'est chargé qu'au clic : aucun appel à Google avant. */
.cartes{display:grid;gap:1.2rem;grid-template-columns:1fr;margin:1.2rem 0 0}
@media(min-width:860px){.cartes{grid-template-columns:repeat(2,1fr)}}
.carte h3{font-size:1.02rem;margin:0 0 .35rem}
.carte p{margin:0 0 .8rem;font-size:.9rem;color:var(--text)}
.carte-face,.carte iframe{display:block;width:100%;aspect-ratio:4/3;
  border:1px solid var(--line);border-radius:var(--radius)}
.carte-face{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;background:var(--bg-deep);color:var(--text);cursor:pointer;
  font-family:'Barlow',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;transition:border-color .3s var(--ease),color .3s var(--ease)}
.carte-face svg{width:30px;height:30px;color:var(--accent-br)}
.carte-face:hover{border-color:var(--accent);color:var(--ink)}
.carte iframe{border:1px solid var(--line);background:var(--bg-deep)}

/* Information manquante dans les mentions légales : doit sauter aux yeux, et ne
   doit jamais partir en production. `verifier.py` bloque si elle est encore là. */
.a-completer{background:#ffd400;color:#000;padding:.1em .45em;border-radius:3px;
  font-weight:700;font-size:.85em;letter-spacing:.06em;text-transform:uppercase}

/* Cibles tactiles : le fil d'Ariane et la mention de crédit tombaient sous
   les 40 px au doigt. On agrandit la zone cliquable sans grossir le texte. */
@media(max-width:860px){
  .fil a{display:inline-flex;align-items:center;min-height:44px;padding-block:.2rem}
  .fil li{min-height:44px}
}
.foot-bottom a{display:inline-flex;align-items:center;min-height:30px;padding-block:.35rem}

/* Cases à cocher et boutons radio : 18 px au doigt, c'est sous le minimum de
   24 px du critère WCAG 2.5.8. Les liens en plein milieu d'une phrase, eux,
   sont expressément exemptés : on n'y touche pas. */
.prose input[type=checkbox],.prose input[type=radio],
#form-contact input[type=checkbox],#form-contact input[type=radio]{
  width:24px;height:24px;min-height:24px;accent-color:var(--accent)}
.prose label:has(input[type=checkbox]),.prose label:has(input[type=radio]){
  display:inline-flex;align-items:center;gap:.5rem;min-height:32px}

/* Liens seuls dans leur paragraphe : ils ne bénéficient pas de l'exemption
   « lien en plein texte », et faisaient 20 px de haut au doigt. */
.prose p > a:only-child{display:inline-flex;align-items:center;min-height:24px}
.aide-lien{min-height:24px}

/* ── Appel au don ──────────────────────────────────────────────────────────
   Le paiement se fait sur la page sécurisée de l'association, pas dans un
   cadre : le visiteur doit voir la vraie adresse avant de donner sa carte. */
.don-carte{margin:1.6rem 0;padding:1.8rem;background:var(--bg-card);
  border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow)}
.don-intro{margin:0 0 1.4rem;font-size:1.04rem;color:var(--text)}
/* Un bouton dans le corps de page héritait du soulignement et de la couleur
   des liens de contenu (.prose a) : il ne ressemblait plus à un bouton. */
.prose .btn,.don-cta{text-decoration:none}
.prose .btn-primary,.don-cta{color:var(--on-accent)}
.prose .btn-primary:hover,.don-cta:hover{color:var(--on-accent);text-decoration:none}
.don-cta{font-size:.88rem;padding:1.05rem 1.8rem}
.don-note{margin:1.3rem 0 0;font-size:.9rem;color:var(--text)}

/* Un élément de grille a `min-width: auto` par défaut : il refuse de descendre
   sous la largeur de son contenu. Un seul bloc large dans la colonne de texte
   (ici le cadre d'un calculateur) élargissait toute la page sur téléphone. */
.layout > *{min-width:0}
.prose > *{max-width:100%}
.prose table,.prose pre{display:block;max-width:100%;overflow-x:auto}

/* ── Calculateurs sur petit écran ──────────────────────────────────────────
   Les calculateurs viennent de l'ancien site avec leurs propres rangées
   flexibles et leurs grilles, pensées pour un écran large et déclarées
   `nowrap`. Sur un téléphone, elles poussaient la page hors de l'écran.
   On les autorise à passer à la ligne et à rétrécir. */
@media(max-width:700px){
  .prose .rc-mode-selector,.prose .eff-selector,.prose .header-master,
  .prose .main-wrapper,.prose .res-panel{flex-wrap:wrap}
  .prose .calc-container,.prose .info-grid,.prose .res-info-grid{
    grid-template-columns:1fr}
  .prose .rc-mode-selector > *,.prose .eff-selector > *{flex:1 1 auto;min-width:0}
  /* Aucun bloc du contenu ne dépasse sa colonne : certains cadres des
     calculateurs portent une largeur fixe plus large que leur parent. */
  .prose div,.prose form,.prose table,.prose fieldset{max-width:100%}
}

/* ── Pages courtes ─────────────────────────────────────────────────────────
   Quand le texte est plus court que la colonne latérale, celle-ci écrase la
   page. Sur ces pages la liste de la rubrique passe sous le contenu, en
   pleine largeur : les liens restent, l'équilibre revient. */
.rubrique-bas{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.rubrique-bas h2{font-size:1.2rem;margin:0 0 1.2rem}
.rubrique-bas ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem 1.6rem;
  grid-template-columns:1fr}
/* Ce bloc vit dans .prose : sans cette remise à zéro, chaque entrée portait DEUX
   repères, le losange des listes de contenu et le chevron du lien. */
.rubrique-bas li{padding-left:0;margin-top:0}
.rubrique-bas li::before{content:none}
@media(min-width:620px){.rubrique-bas ul{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rubrique-bas ul{grid-template-columns:repeat(3,1fr)}}
.rubrique-bas a{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;min-height:44px;
  font-size:.93rem;line-height:1.35;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .2s var(--ease),gap .2s var(--ease)}
.rubrique-bas a:hover{color:var(--ink);gap:.95rem}
.rubrique-bas a svg{width:13px;height:13px;flex:0 0 auto;color:var(--accent-br)}
.rubrique-bas a.here{color:var(--accent-br);font-weight:600}

/* ── Bandeau d'utilité, au-dessus de la navigation ──────────────────────────
   Demande de Yann, 22/10/2026 : le téléphone de l'association et le don doivent
   se voir EN HAUT, sans dérouler. Ils ne pouvaient pas entrer dans la barre de
   navigation : elle réclamait déjà 1 328 px pour 1 248 disponibles sur un écran
   de 1 280, et c'est pour cette raison qu'« Accueil » en avait été retiré.

   La barre passe donc à deux étages. Comme `--nav-h` commande le décalage du
   héros, des ancres et de la colonne latérale, il suffit de l'augmenter d'autant :
   tout le reste suit sans aucune autre retouche.

   Le bandeau reste visible sur téléphone — c'est même là qu'appeler et donner en
   un geste sert le plus. Seul le libellé du numéro s'efface sous 420 px, pas le
   bouton d'appel. */
.utilite{height:var(--util-h);display:flex;align-items:center;
  background:var(--bg-deep);border-bottom:1px solid var(--line);font-size:.8rem}
.utilite .wrap{display:flex;align-items:center;gap:.4rem;width:100%}
.utilite-asso{margin-right:auto;color:var(--soft);letter-spacing:.04em;
  text-transform:uppercase;font-size:.68rem;font-weight:700}
.utilite a{display:inline-flex;align-items:center;gap:.4rem;min-height:30px;
  padding:0 .6rem;color:var(--text);text-decoration:none;font-weight:600;
  border-radius:var(--radius);transition:color .2s var(--ease),background .2s var(--ease)}
.utilite a:hover{color:var(--accent-br);background:rgba(255,255,255,.05)}
.utilite a .ico{display:inline-flex}
.utilite a svg{width:14px;height:14px}
/* Le don est l'action à ne pas rater : on la tient en couleur, pas en gris. */
.utilite-don{color:var(--accent-br)!important;border:1px solid rgba(255,84,54,.4)}
.utilite-don:hover{background:rgba(255,84,54,.12)!important;color:var(--accent-br)!important}
/* Sous 560 px le nom de l'association sort : c'est le logo qui le porte, juste
   dessous. Le téléphone reprend alors la poussée vers la gauche, pour que l'appel
   et le don se tiennent aux deux bords plutôt que de se coller l'un à l'autre. */
@media(max-width:560px){.utilite-asso{display:none}.utilite-tel{margin-right:auto}}
/* Le numéro ne s'efface qu'au tout dernier moment : à 360 px il tient encore, et
   un numéro qu'on peut lire vaut mieux qu'un combiné qu'il faut deviner. */
@media(max-width:359px){.utilite-tel span{display:none}}

/* Le seuil de bascule est passé de 1 300 à 1 340 px le 22/10/2026 : avec le picto
   accueil, la barre réclame 1 248 px pour 1 253 disponibles à 1 300 — cinq pixels
   de marge, que la moindre variation de rendu des polices ferait sauter. */

/* ── Picto accueil dans la navigation ───────────────────────────────────────
   « Accueil » revient dans la barre, en icône seule : 40 px au lieu des 86 px
   qu'aurait pris le libellé, donc la barre tient toujours. Le nom reste porté
   par l'aria-label et l'infobulle, pour qui navigue au clavier ou au lecteur
   d'écran. */
.nav-home{display:grid;place-items:center;width:40px;min-height:44px;color:var(--text)}
.nav-home svg{width:18px;height:18px}
.nav-home:hover,.nav-list>li.on>.nav-home{color:var(--accent-br)}

/* ── Sections reprises dans le corps d'une page intérieure ──────────────────
   « Ils nous soutiennent » et « Comment nous aider » existaient déjà, mais
   seulement sur l'accueil. Huit pages les portaient aussi sur l'ancien site, avec
   les mêmes intitulés et aucun lien. Les voici réutilisables, séparées du texte
   par un filet plutôt que par un fond : dans une colonne de prose, un bloc teinté
   ferait « encart publicitaire » au milieu d'un article. */
.sec-inline{margin:3.2rem 0 0;padding-top:2.4rem;border-top:1px solid var(--line)}
.sec-inline>h2{margin:0 0 1.6rem;font-size:1.35rem}
.sec-inline .aides{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sec-inline--partenaires .partenaires{gap:1.2rem 2rem}

/* Un bouton d'action posé seul entre deux paragraphes : il respire au-dessus et
   en dessous, sinon il se lit comme la suite du texte. */
.prose .action{margin:1.4rem 0 2rem}
.prose .action .btn{text-transform:none;letter-spacing:.01em}

/* ── Encart graphique repris de l'ancien site ───────────────────────────────
   Dans WebAcappella, « Entreprise ou Particulier — Déductions d'impôts de 60 % à
   66 % » était une mention posée à côté du texte, éclatée en calques. Recollée,
   elle reste une mention : elle se voit, mais elle ne figure pas au plan de la
   page comme le ferait un titre. */
.prose .encart{margin:1.6rem 0;padding:1rem 1.2rem;border-left:3px solid var(--accent-br);
  background:var(--bg-card);font-weight:600;color:var(--text)}