/* ------------------------------------------------------------------
   L'Esprit de l'Effort — feuille de style commune
   Pages : index.html · contact.html · mentions-legales.html
   ------------------------------------------------------------------ */

:root{
  --paper:#f7f4ed; --paper2:#efeade; --ink:#1b1815; --ink2:#5d564c; --line:#d8d1c2;
  --acc:#a8451f;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{width:min(1080px,90vw);margin-inline:auto}
.narrow{width:min(760px,90vw);margin-inline:auto}

/* ---------- en-tête ---------- */
header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:40}
nav{display:flex;align-items:baseline;gap:2rem;padding:1.1rem 0;flex-wrap:wrap}
.logo{font:600 1.15rem/1 var(--serif);text-decoration:none;font-variation-settings:'opsz' 40;white-space:nowrap}
nav ul{display:flex;gap:1.4rem;list-style:none;padding:0;margin-left:auto;flex-wrap:wrap}
nav a{font:500 13.5px/1 var(--sans);text-decoration:none;color:var(--ink2)}
nav a:hover,nav a[aria-current="page"]{color:var(--acc)}

/* ---------- accueil : bandeau ---------- */
.hero{padding:5.5rem 0 3.5rem;text-align:center}
.rubric{font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:2rem}
h1{font:400 clamp(2.5rem,6.4vw,4.6rem)/1.06 var(--serif);font-variation-settings:'opsz' 120;letter-spacing:-.02em;max-width:24ch;margin-inline:auto}
h1 em{font-style:italic;color:var(--acc)}
.lede{font-size:1.16rem;color:var(--ink2);max-width:60ch;margin:1.8rem auto 0}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.4rem}
.cta-row.left{justify-content:flex-start}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:2rem;font:600 13.5px/1 var(--sans);text-decoration:none;background:var(--ink);color:var(--paper);border:1px solid var(--ink);transition:.15s}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:transparent;color:var(--acc);border-color:var(--acc)}
.hero-img{margin-top:3.5rem}
.caption{font:italic 400 .86rem/1.6 var(--serif);color:#8c8474;margin-top:.7rem;text-align:left}

/* ---------- sections ---------- */
section{padding:4.6rem 0;border-top:1px solid var(--line)}
.num{font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:1rem}
h2{font:400 clamp(1.75rem,3.3vw,2.5rem)/1.15 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.015em;max-width:28ch}
h3{font:600 1.2rem/1.3 var(--serif);font-variation-settings:'opsz' 40}
.drop{font-size:1.08rem}
.drop p+p{margin-top:1.1rem}
.side{display:grid;grid-template-columns:.72fr 1fr;gap:3.4rem;align-items:start}

/* ---------- missions ---------- */
.mlist{margin-top:2.6rem;border-top:1px solid var(--line)}
.m{display:grid;grid-template-columns:5.5rem 1fr 1.35fr;gap:2rem;padding:1.8rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.m .pct{font:600 2rem/1 var(--serif);color:var(--acc);font-variation-settings:'opsz' 60}
.m p{color:var(--ink2);font-size:.98rem}

/* ---------- projets ---------- */
.proj{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;align-items:center;padding:3rem 0;border-bottom:1px solid var(--line)}
.proj:last-child{border-bottom:0;padding-bottom:0}
.proj figure{margin:0}
.proj img{border:1px solid var(--line)}
.stamp{display:inline-block;font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--acc);padding-bottom:.3rem;margin-bottom:1.1rem}
.stamp.past{color:var(--ink2);border-color:var(--line)}
dl{margin:1.5rem 0 0;font-size:.94rem}
dl div{display:flex;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line)}
dt{color:var(--ink2);min-width:9rem;flex-shrink:0}
dd{margin:0}

/* ---------- chiffres en encarts ---------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.results div{background:var(--paper2);border:1px solid var(--line);border-radius:4px;padding:1rem .9rem;text-align:center}
.results .n{font:600 1.7rem/1 var(--serif);color:var(--acc);font-variation-settings:'opsz' 60}
.results .l{font-size:.8rem;color:var(--ink2);margin-top:.35rem;line-height:1.4}

/* ---------- illustration Rouge contre Bleu ---------- */
.illus{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin-bottom:1.2rem}
.illus text{fill:var(--ink)}
.il-eyebrow{font:600 19px var(--sans);letter-spacing:.16em;text-transform:uppercase;fill:#8c8474}
.il-big{font:600 84px var(--serif);font-variation-settings:'opsz' 120;letter-spacing:-.02em}
.il-mid{font:400 italic 42px var(--serif);font-variation-settings:'opsz' 60;fill:#8c8474}
.illus text.il-r{fill:#b2402a}
.illus text.il-b{fill:#26597f}
.illus text.il-mid{fill:#8c8474}
.illus text.il-eyebrow{fill:#8c8474}
.illus text.il-tick{fill:#8c8474}
.il-tick{font:600 17px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:#8c8474}
text.il-tick[x="748"]{text-anchor:end}
.il-foot{font:600 19px var(--sans);letter-spacing:.06em;fill:var(--ink);text-anchor:end}

/* ---------- duel deux équipes ---------- */
.duel{--rouge:#b2402a;--bleu:#26597f;
  background:#fbf9f5;border:1px solid var(--line);border-radius:6px;padding:1.7rem 1.6rem}
.duel h4{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:1.5rem}
.duel .team{margin-bottom:1.35rem}
.duel .team:last-of-type{margin-bottom:0}
.duel .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.duel .name{font:600 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.duel .score{font:600 1.1rem/1 var(--serif);font-variation-settings:'opsz' 40}
.duel .track{position:relative;height:12px;border-radius:6px;background:#eae4d8;overflow:hidden}
.duel .fill{position:absolute;inset:0 auto 0 0;width:4px;border-radius:6px}
.duel .r .name,.duel .r .score{color:var(--rouge)}
.duel .r .fill{background:var(--rouge)}
.duel .b .name,.duel .b .score{color:var(--bleu)}
.duel .b .fill{background:var(--bleu)}
.duel .foot{font:italic 400 .85rem/1.6 var(--serif);color:#8c8474;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.duel .foot b{font-style:normal;font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink)}

/* ---------- étapes numérotées ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding-left:2.6rem;font-size:.98rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1em;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--paper2);border:1px solid var(--line);color:var(--acc);
  font:600 .82rem/1.7rem var(--sans);text-align:center}
.steps b{display:block}

/* ---------- encadrés ---------- */
.box{background:var(--paper2);border:1px solid var(--line);border-radius:4px;padding:2.4rem 2.2rem;margin-top:2.2rem}
.checks{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.65rem}
.checks li{position:relative;padding-left:1.6rem;font-size:.98rem}
.checks li::before{content:"—";position:absolute;left:0;color:var(--acc)}

/* ---------- transparence ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;margin-top:2rem}
.facts div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.facts b{color:var(--ink2);font-weight:500}
.note{font:italic 400 .9rem/1.7 var(--serif);color:#7d7566;margin-top:1.5rem;max-width:72ch}

/* ---------- pages intérieures ---------- */
.page-head{padding:4rem 0 2.4rem;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2rem,4.6vw,3.1rem);text-align:left;margin-inline:0;max-width:30ch}
.page-body{padding:3.2rem 0 5rem}
.page-body h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-top:2.8rem}
.page-body h2:first-child{margin-top:0}
.page-body h3{margin-top:1.8rem}
.page-body p{margin-top:1rem;color:var(--ink)}
.page-body ul{margin:1rem 0 0;padding-left:1.2rem;color:var(--ink)}
.page-body li{margin-top:.45rem}
.page-body dl{margin-top:1.2rem}
.back{display:inline-block;font:500 13px/1 var(--sans);color:var(--ink2);text-decoration:none;margin-bottom:1.4rem}
.back:hover{color:var(--acc)}

/* ---------- pied de page ---------- */
footer{padding:3.2rem 0 4rem;border-top:1px solid var(--line);background:var(--paper2);font-size:.87rem;color:var(--ink2)}
footer .side{gap:2.5rem;align-items:start}
footer a{color:var(--ink2)}
footer a:hover{color:var(--acc)}

@media(max-width:820px){
  .side,.proj,.facts{grid-template-columns:1fr;gap:2rem}
  .m{grid-template-columns:1fr;gap:.5rem}
  .results{grid-template-columns:1fr}
  section{padding:3.4rem 0}
  .hero{padding:3.2rem 0 2rem}
}