/* ============================================================
   En Renfort - initiative citoyenne
   Identite : encre profonde, braise, acier.
   Aucune ressource externe : polices systeme, visuels en CSS.
   ============================================================ */

:root{
  /* Fonds */
  --ink-900:#080706;
  --ink-800:#0d0b0a;
  --ink-700:#141110;
  --ink-600:#1c1817;
  --ink-500:#262120;
  --line:#2e2826;
  --line-soft:#221d1c;

  /* Textes */
  --text:#f5f1ed;
  --text-2:#b8afa8;
  --text-3:#8a807a;

  /* Braise */
  --ember:#ff6b35;
  --ember-bright:#ff8b52;
  --ember-deep:#c8410f;
  --gold:#ffb454;

  /* Signalisation */
  --danger:#e5484d;
  --steel:#5b9dd9;
  --sage:#6fbf8f;

  /* Structure */
  --radius:14px;
  --radius-sm:9px;
  --maxw:1180px;
  --gutter:clamp(20px, 5vw, 56px);

  /* Rythme typographique */
  --step--1:clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0:clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-2:clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3:clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4:clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-0.02em;font-weight:650}
h1{font-size:var(--step-4);letter-spacing:-0.035em}
h2{font-size:var(--step-3);letter-spacing:-0.03em}
h3{font-size:var(--step-1)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}

::selection{background:var(--ember);color:#fff}

:focus-visible{
  outline:2px solid var(--ember-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Primitives ---------- */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.section{padding-block:clamp(64px, 9vw, 128px);position:relative}
.section--tight{padding-block:clamp(48px, 6vw, 84px)}
.section--alt{background:var(--ink-800);border-block:1px solid var(--line-soft)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ember);
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--ember);opacity:.7;
}
.eyebrow--steel{color:var(--steel)}
.eyebrow--steel::before{background:var(--steel)}
.eyebrow--sage{color:var(--sage)}
.eyebrow--sage::before{background:var(--sage)}

.lede{font-size:var(--step-1);color:var(--text-2);max-width:60ch;line-height:1.55}
.prose{color:var(--text-2);max-width:68ch}
.prose p + p{margin-top:1em}
.prose strong{color:var(--text);font-weight:600}

.section-head{max-width:72ch;margin-bottom:clamp(32px,4vw,56px)}
.section-head p{margin-top:18px}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--radius-sm);
  font-weight:600;font-size:0.97rem;letter-spacing:-0.01em;
  text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(135deg,var(--ember) 0%,var(--ember-deep) 100%);
  color:#fff;
  box-shadow:0 8px 28px -12px rgba(255,107,53,.7);
}
.btn--primary:hover{box-shadow:0 14px 38px -12px rgba(255,107,53,.85)}

.btn--ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  color:var(--text);
}
.btn--ghost:hover{border-color:var(--text-3);background:rgba(255,255,255,.06)}

.btn--sage{background:var(--sage);color:#06150d;box-shadow:0 8px 28px -14px rgba(111,191,143,.8)}
.btn--sm{padding:11px 18px;font-size:0.88rem}
.btn--full{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Cartes */
.card{
  background:var(--ink-700);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(22px,2.4vw,32px);
}
.card--raised{background:var(--ink-600);border-color:var(--line)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* Note de source */
.src{
  font-size:0.74rem;color:var(--text-3);line-height:1.5;
  margin-top:14px;
}
.src a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.src a:hover{color:var(--ember);text-decoration-color:var(--ember)}

/* ============================================================
   Bandeau de non-affiliation (permanent)
   ============================================================ */
.disclaimer-bar{
  background:var(--ink-600);
  border-bottom:1px solid var(--line);
  font-size:0.76rem;color:var(--text-2);
  text-align:center;
  padding:9px var(--gutter);
  line-height:1.45;
}
.disclaimer-bar strong{color:var(--text);font-weight:600}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(8,7,6,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line-soft);background:rgba(8,7,6,.94)}
.nav__inner{
  display:flex;align-items:center;gap:20px;
  height:66px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand__mark{
  width:34px;height:34px;flex-shrink:0;display:block;
  filter:drop-shadow(0 3px 10px rgba(255,107,53,.45));
}
.brand__text{
  display:flex;flex-direction:column;line-height:1;
}
.brand__name{
  font-weight:680;letter-spacing:-0.035em;font-size:1.08rem;
  color:var(--text);
}
.brand__name em{font-style:normal;color:var(--ember)}
.brand__tag{
  font-size:0.58rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--text-3);margin-top:4px;font-weight:600;
}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{
  padding:8px 12px;border-radius:7px;
  text-decoration:none;color:var(--text-2);
  font-size:0.88rem;font-weight:500;
  /* Un libelle ne doit JAMAIS se couper sur deux lignes : la barre a une
     hauteur fixe, un retour a la ligne la fait deborder. */
  white-space:nowrap;
  flex-shrink:0;
  transition:color .16s ease, background .16s ease;
}

/* Sous 1200 px, la baseline de la marque est sacrifiee pour rendre
   de la place horizontale aux liens. */
@media (max-width:1200px){
  .brand__tag{display:none}
  .brand__name{font-size:1.02rem}
}
/* Zone intermediaire : on resserre avant de basculer sur le burger. */
@media (max-width:1140px) and (min-width:1041px){
  .nav__links a{padding:8px 9px;font-size:0.85rem}
  .nav__cta{margin-left:4px}
}
.nav__links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav__cta{margin-left:8px}

.nav__burger{
  display:none;margin-left:auto;
  background:none;border:1px solid var(--line);border-radius:8px;
  width:40px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav__burger span{
  display:block;width:17px;height:1.6px;background:var(--text);position:relative;
}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--text);
}
.nav__burger span::before{top:-5.5px}
.nav__burger span::after{top:5.5px}

/* Le menu horizontal ne s'affiche que s'il tient reellement sur une ligne.
   Cinq liens plus le bouton d'appel demandent environ 1040 px. */
@media (max-width:1040px){
  .nav__links{
    display:none;
    position:absolute;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink-800);border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 20px;
    box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 4px;font-size:0.98rem;white-space:normal}
  .nav__cta{margin:12px 0 0;justify-content:center}
  .nav__burger{display:flex}
  .brand__tag{display:block}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(64px,10vw,124px) clamp(48px,7vw,88px);
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  isolation:isolate;
}

/* Photographie de fond : sapeurs-pompiers en intervention de nuit */
.hero__photo{
  position:absolute;inset:0;z-index:-2;
  background-image:url("images/hero-pompiers.jpg");
  background-size:cover;
  background-position:62% 45%;
  /* La photo est chaude et bleutee : on la desature un peu et on la fonce
     pour qu'elle porte le texte sans le concurrencer. */
  filter:saturate(1.08) contrast(1.06) brightness(.62);
  transform:scale(1.03);
}
/* Voile de lisibilite : sombre a gauche ou vit le texte, transparent a droite */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.88) 32%, rgba(8,7,6,.55) 62%, rgba(8,7,6,.42) 100%),
    linear-gradient(to bottom, rgba(8,7,6,.55) 0%, transparent 22%, transparent 62%, var(--ink-900) 100%);
}
@media (max-width:820px){
  .hero__photo{background-position:58% 40%;filter:saturate(1.05) contrast(1.05) brightness(.5)}
  .hero__scrim{background:
    linear-gradient(180deg, rgba(8,7,6,.86) 0%, rgba(8,7,6,.78) 45%, rgba(8,7,6,.92) 78%, var(--ink-900) 100%)}
}

.hero__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(255,107,53,.22), transparent 62%),
    radial-gradient(700px 460px at 8% 8%, rgba(200,65,15,.15), transparent 60%),
    radial-gradient(600px 400px at 50% 108%, rgba(255,180,84,.08), transparent 60%);
  mix-blend-mode:screen;
}
/* Fines braises montantes, discretes */
.hero__embers{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero__embers i{
  position:absolute;bottom:-8px;
  width:2.5px;height:2.5px;border-radius:50%;
  background:var(--gold);
  opacity:0;
  animation:rise linear infinite;
  box-shadow:0 0 6px 1px rgba(255,180,84,.7);
}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--dx,14px),-88vh,0) scale(1.15)}
}

.hero__inner{position:relative;z-index:1}

.hero h1{max-width:19ch;text-shadow:0 2px 24px rgba(8,7,6,.7)}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--gold),var(--ember) 55%,var(--ember-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero__lede{margin-top:26px;font-size:var(--step-1);color:var(--text-2);max-width:56ch;line-height:1.58}
.hero__lede strong{color:var(--text);font-weight:600}

/* Compteurs */
.counters{
  margin-top:clamp(44px,5vw,68px);
  display:grid;gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr));
}
.counter{background:var(--ink-800);padding:24px 22px}
.counter__val{
  font-size:clamp(1.7rem,1.2rem+1.6vw,2.5rem);
  font-weight:700;letter-spacing:-0.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.counter__val--danger{color:#ff8f92}
.counter__val--ember{color:var(--gold)}
.counter__label{margin-top:11px;font-size:0.82rem;color:var(--text-2);line-height:1.4}
.counter__date{margin-top:7px;font-size:0.71rem;color:var(--text-3);letter-spacing:.01em}

/* ============================================================
   Hommage
   ============================================================ */
.tribute{
  border-left:3px solid var(--danger);
  background:linear-gradient(90deg, rgba(229,72,77,.08), transparent 70%);
  padding:26px clamp(20px,3vw,34px);
  border-radius:0 var(--radius) var(--radius) 0;
}
.tribute h3{color:#ffb3b5;font-size:var(--step-0);letter-spacing:0;font-weight:600}
.tribute p{margin-top:12px;color:var(--text-2);max-width:66ch}

/* ============================================================
   Argument central
   ============================================================ */
.argument{
  display:grid;gap:clamp(28px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  align-items:start;
}
.argument__big{
  font-size:var(--step-2);
  line-height:1.32;letter-spacing:-0.025em;
  font-weight:600;
  color:var(--text);
  max-width:34ch;
}
.argument__big span{color:var(--ember)}

.callout{
  border:1px solid var(--line);
  background:var(--ink-700);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
}
.callout__title{
  display:flex;align-items:center;gap:10px;
  font-weight:650;font-size:0.98rem;margin-bottom:12px;
}
.callout__title::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--steel);flex-shrink:0;
}
.callout--warn .callout__title::before{background:var(--gold)}
.callout p{color:var(--text-2);font-size:0.95rem}

/* ============================================================
   Verite sur l'engagement : deux colonnes
   ============================================================ */
.truth{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.truth__col{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
  background:var(--ink-700);
}
.truth__col--give{border-color:rgba(255,107,53,.28);background:linear-gradient(180deg,rgba(255,107,53,.05),var(--ink-700) 45%)}
.truth__col--get{border-color:rgba(111,191,143,.24);background:linear-gradient(180deg,rgba(111,191,143,.05),var(--ink-700) 45%)}
.truth__col h3{font-size:var(--step-0);letter-spacing:0;margin-bottom:18px}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tlist li{display:flex;gap:12px;font-size:0.94rem;color:var(--text-2);line-height:1.55}
.tlist li b{color:var(--text);font-weight:600}
.tlist__icon{
  flex-shrink:0;width:20px;height:20px;border-radius:5px;
  display:grid;place-items:center;
  font-size:0.72rem;font-weight:700;margin-top:2px;
}
.tlist__icon--give{background:rgba(255,107,53,.16);color:var(--ember-bright)}
.tlist__icon--get{background:rgba(111,191,143,.16);color:var(--sage)}

/* ============================================================
   Test d'orientation
   ============================================================ */
.quiz{
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.quiz__head{
  padding:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.quiz__head h3{font-size:var(--step-0);letter-spacing:0}
.quiz__progress{
  font-size:0.78rem;color:var(--text-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.quiz__body{padding:clamp(20px,2.4vw,28px)}
.qstep{display:none}
.qstep.is-active{display:block;animation:fadeUp .32s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qstep__q{font-size:var(--step-1);font-weight:600;letter-spacing:-0.02em;max-width:34ch}
.qstep__hint{margin-top:10px;color:var(--text-3);font-size:0.86rem;max-width:56ch}
.qopts{display:grid;gap:10px;margin-top:24px}
.qopt{
  display:flex;align-items:center;gap:13px;
  text-align:left;width:100%;
  padding:16px 18px;
  background:var(--ink-600);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.qopt:hover{border-color:var(--ember);background:var(--ink-500);transform:translateX(3px)}
.qopt__key{
  flex-shrink:0;width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,.06);
  display:grid;place-items:center;
  font-size:0.76rem;font-weight:700;color:var(--text-2);
}
.qopt:hover .qopt__key{background:var(--ember);color:#fff}

.qresult{display:none}
.qresult.is-active{display:block;animation:fadeUp .32s ease}
.qresult__verdict{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:100px;
  font-size:0.79rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:18px;
}
.qresult__verdict--go{background:rgba(111,191,143,.15);color:var(--sage);border:1px solid rgba(111,191,143,.3)}
.qresult__verdict--wait{background:rgba(255,180,84,.13);color:var(--gold);border:1px solid rgba(255,180,84,.3)}
.qresult__verdict--other{background:rgba(91,157,217,.13);color:var(--steel);border:1px solid rgba(91,157,217,.3)}
.qresult h4{font-size:var(--step-1);letter-spacing:-0.02em;margin-bottom:14px;max-width:38ch}
.qresult__body{color:var(--text-2);max-width:64ch}
.qresult__body p + p{margin-top:12px}
.qresult__body ul{margin:12px 0 0;padding-left:20px}
.qresult__body li{margin-bottom:7px}
.qreset{
  margin-top:22px;background:none;border:none;padding:0;
  color:var(--text-3);font-size:0.85rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.qreset:hover{color:var(--text)}

/* ============================================================
   Parcours
   ============================================================ */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.5vw,30px);
  padding-block:clamp(22px,2.6vw,32px);
  border-bottom:1px solid var(--line-soft);
}
.step:first-child{border-top:1px solid var(--line-soft)}
.step__num{
  width:42px;height:42px;border-radius:11px;
  background:var(--ink-600);border:1px solid var(--line);
  display:grid;place-items:center;
  font-weight:700;font-size:0.95rem;color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.step__num::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:var(--step-0);letter-spacing:-0.01em;margin-bottom:9px}
.step p{color:var(--text-2);font-size:0.94rem;max-width:64ch}
.step__meta{
  display:inline-block;margin-top:11px;
  font-size:0.74rem;color:var(--text-3);
  border:1px solid var(--line);border-radius:100px;
  padding:4px 11px;
}

/* ============================================================
   Selecteur de departement
   ============================================================ */
.finder{
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);
}
.finder__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{flex:1 1 260px;min-width:0}
.field label{
  display:block;font-size:0.78rem;font-weight:600;
  color:var(--text-2);margin-bottom:8px;letter-spacing:.02em;
}
.field input,.field select{
  width:100%;
  padding:14px 15px;
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:0.96rem;
  font-family:inherit;
  appearance:none;
}
.field input::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus{border-color:var(--ember);outline:none}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
  cursor:pointer;
}
.field select option{background:var(--ink-800);color:var(--text)}

.result{
  margin-top:24px;
  border-top:1px solid var(--line-soft);
  padding-top:24px;
  display:none;
}
.result.is-active{display:block;animation:fadeUp .3s ease}
.result__dept{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:6px;
}
.result__num{
  font-size:0.76rem;font-weight:700;color:var(--ember);
  border:1px solid rgba(255,107,53,.35);border-radius:6px;padding:2px 8px;
  font-variant-numeric:tabular-nums;
}
.result__name{font-size:var(--step-1);font-weight:650;letter-spacing:-0.02em}
.result__org{color:var(--text-2);font-size:0.92rem;margin-bottom:20px}
.result__note{
  font-size:0.86rem;color:var(--text-2);
  background:rgba(91,157,217,.08);
  border:1px solid rgba(91,157,217,.22);
  border-radius:var(--radius-sm);
  padding:14px 16px;margin-bottom:20px;
}
.result__note--warn{background:rgba(255,180,84,.08);border-color:rgba(255,180,84,.25)}
.result__actions{display:flex;flex-wrap:wrap;gap:12px}
.result__meta{margin-top:18px;font-size:0.79rem;color:var(--text-3)}
.badge-verified{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.71rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sage);
}
.badge-verified::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sage)}

/* ============================================================
   Dons
   ============================================================ */
/* Deux colonnes sur grand ecran : quatre cartes font un carre propre,
   sans carte orpheline sur la derniere ligne. */
.give{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.give__card{
  display:flex;flex-direction:column;
  background:var(--ink-700);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
}
.give__card--lead{
  border-color:rgba(255,107,53,.35);
  background:linear-gradient(180deg,rgba(255,107,53,.07),var(--ink-700) 50%);
}
.give__tag{
  align-self:flex-start;
  font-size:0.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);border:1px solid rgba(255,107,53,.35);
  border-radius:100px;padding:4px 11px;margin-bottom:16px;
}
.give__card h3{font-size:var(--step-0);letter-spacing:-0.01em;margin-bottom:6px}
.give__who{font-size:0.79rem;color:var(--text-3);margin-bottom:14px;flex-grow:0}
/* flex-grow ne doit toucher QUE le paragraphe de corps, sinon la ligne de
   sous-titre s'etire aussi et le texte des cartes ne demarre plus a la meme
   hauteur d'une carte a l'autre. */
.give__card p{color:var(--text-2);font-size:0.93rem}
.give__card p:not(.give__who){flex-grow:1}
.give__card .btn{margin-top:22px}

.fiscal{
  margin-top:clamp(24px,3vw,36px);
  display:grid;gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.fiscal__box{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(20px,2.2vw,26px);background:var(--ink-800);
}
.fiscal__box h4{font-size:0.95rem;margin-bottom:12px;letter-spacing:-0.01em}
.fiscal__box p,.fiscal__box li{color:var(--text-2);font-size:0.9rem}
.fiscal__box ul{margin:0;padding-left:19px}
.fiscal__box li{margin-bottom:7px}
.fiscal__calc{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:0.9rem;color:var(--text-2);
}
.fiscal__calc input{
  width:96px;padding:9px 11px;
  background:var(--ink-900);border:1px solid var(--line);
  border-radius:7px;color:var(--text);font:inherit;font-size:0.9rem;
  font-variant-numeric:tabular-nums;
}
.fiscal__calc input:focus{border-color:var(--ember);outline:none}
.fiscal__calc b{color:var(--sage);font-variant-numeric:tabular-nums;font-size:1.05rem}

/* ============================================================
   Autres soutiens
   ============================================================ */
.support{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.support__card{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(20px,2.2vw,26px);background:var(--ink-700);
}
.support__icon{
  width:36px;height:36px;border-radius:9px;margin-bottom:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  display:grid;place-items:center;font-size:1rem;
}
.support__card h3{font-size:0.98rem;letter-spacing:-0.01em;margin-bottom:9px}
.support__card p{color:var(--text-2);font-size:0.9rem}
.support__card a{
  display:inline-block;margin-top:14px;font-size:0.86rem;
  color:var(--ember);text-decoration:none;font-weight:500;
}
.support__card a:hover{text-decoration:underline;text-underline-offset:3px}

/* Gestes de prevention */
.dos{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;margin-top:clamp(24px,3vw,34px)}
.do{background:var(--ink-800);padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.do__mark{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;font-size:0.78rem;font-weight:700;margin-top:1px;
}
.do__mark--yes{background:rgba(111,191,143,.16);color:var(--sage)}
.do__mark--no{background:rgba(229,72,77,.16);color:#ff8f92}
.do p{font-size:0.91rem;color:var(--text-2)}
.do p b{color:var(--text);font-weight:600}

/* ============================================================
   CTA final
   ============================================================ */
.final{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line-soft);
  padding-block:clamp(72px,10vw,130px);
  text-align:center;
}
.final__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 380px at 50% 110%, rgba(255,107,53,.20), transparent 65%);
}
.final__inner{position:relative}
.final h2{max-width:22ch;margin-inline:auto}
.final p{margin-top:22px;color:var(--text-2);max-width:52ch;margin-inline:auto;font-size:var(--step-1);line-height:1.55}
.final .btn-row{justify-content:center}

/* ============================================================
   Pied de page
   ============================================================ */
.footer{
  background:var(--ink-800);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(44px,5vw,64px) 32px;
  font-size:0.86rem;
}
.footer__top{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin-bottom:40px;
}
.footer h4{
  font-size:0.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:15px;font-weight:700;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{color:var(--text-2);text-decoration:none}
.footer a:hover{color:var(--ember)}
.footer__about p{color:var(--text-2);max-width:44ch;font-size:0.88rem}
.footer__legal{
  border-top:1px solid var(--line-soft);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  color:var(--text-3);font-size:0.79rem;line-height:1.6;
}
.footer__legal p{max-width:70ch}
.footer__emergency{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.25);
  border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:34px;
  font-size:0.9rem;color:var(--text-2);
}
.footer__emergency b{color:#ff8f92;font-size:1.05rem;letter-spacing:.02em}

/* ============================================================
   Photographies
   Toutes les images sont sous licence libre, creditees dans le
   pied de page et dans CREDITS.md. Traitement commun : legere
   desaturation et voile chaud pour rester dans la charte.
   ============================================================ */

.figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink-700)}
.figure img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.05) brightness(.86);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, rgba(255,107,53,.12), transparent 42%, rgba(8,7,6,.5) 100%);
}
.figure:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.06) brightness(.94)}

.figure__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:34px 20px 15px;
  font-size:0.78rem;line-height:1.45;color:var(--text-2);
  background:linear-gradient(to top, rgba(8,7,6,.92), transparent);
}
.figure__cap b{color:var(--text);font-weight:600;display:block;margin-bottom:2px}

/* Bloc image + texte cote a cote */
.split{
  display:grid;gap:clamp(24px,3.5vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  align-items:center;
}
.split--reverse .split__media{order:2}
@media (max-width:760px){.split--reverse .split__media{order:0}}
.split__media{min-height:280px}
.split__media .figure{height:100%;min-height:280px}

/* Bandeau pleine largeur */
.band{
  position:relative;overflow:hidden;
  min-height:clamp(240px,32vw,420px);
  display:grid;align-items:end;
  border-block:1px solid var(--line-soft);
}
.band__img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:saturate(.85) contrast(1.05) brightness(.5);
}
.band__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,7,6,.96) 0%, rgba(8,7,6,.55) 45%, rgba(8,7,6,.25) 100%);
}
.band__inner{position:relative;padding-block:clamp(32px,4vw,56px)}
.band__inner h3{font-size:var(--step-2);max-width:22ch;letter-spacing:-0.028em}
.band__inner p{margin-top:14px;color:var(--text-2);max-width:56ch}

/* Grille de vignettes */
.gallery{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.gallery .figure{aspect-ratio:4/3}

/* Credits images */
.credits{
  border-top:1px solid var(--line-soft);
  padding-top:22px;margin-top:26px;
  font-size:0.76rem;color:var(--text-3);line-height:1.6;
}
.credits h5{
  font-size:0.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 10px;font-weight:700;
}
.credits ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.credits a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.credits a:hover{color:var(--ember)}

/* ============================================================
   Page de mentions legales
   ============================================================ */
.legal__h1{font-size:var(--step-3);margin:0 0 20px}
.legal__body{max-width:74ch;margin-top:clamp(32px,4vw,52px)}
.legal__body h2{
  font-size:var(--step-0);letter-spacing:-0.01em;font-weight:650;
  margin:clamp(30px,3.4vw,44px) 0 12px;
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-soft);
  color:var(--text);
}
.legal__body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.legal__body p{color:var(--text-2);font-size:0.96rem;line-height:1.7}
.legal__body p + p{margin-top:12px}
.legal__body strong{color:var(--text);font-weight:600}
.legal__body ul{margin:12px 0 0;padding-left:20px;color:var(--text-2)}
.legal__body li{margin-bottom:5px;font-size:0.95rem}
.legal__body a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}

.legal__date{
  margin-top:clamp(30px,3.4vw,44px) !important;
  padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:0.84rem;color:var(--text-3);
}

/* Revelation au scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
}

/* Impression : version sobre et lisible */
@media print{
  body{background:#fff;color:#000}
  .nav,.hero__glow,.hero__embers,.final__glow{display:none}
  .card,.give__card,.truth__col,.finder{border-color:#ccc}
}