/* =========================================================
   CNRIA 2026 — Feuille de style
   Site multipage : bandeau supérieur, menu déroulant,
   bannière illustrée en tête de chaque page, sections
   alternées blanc / crème, cartes arrondies.
   ========================================================= */
:root {
  --vert-f: #0b5036;
  --vert: #0e7a4e;
  --teal: #13a889;
  --lime: #8cc63f;
  --orange: #f7941d;
  --orange-f: #e07b06;
  --encre: #13261e;
  --texte: #3d5249;
  --doux: #6b7d75;
  --creme: #f8f5f0;
  --filet: #e6e0d6;
  --blanc: #fff;
  --degrade: linear-gradient(135deg, #0b5036 0%, #13a889 65%, #0d6b45 100%);
  --font: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --max: 1200px;
  --r: 16px;
  --ombre: 0 18px 50px -24px rgba(11, 80, 54, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); }
a:hover { color: var(--orange-f); }
h1, h2, h3, h4 { color: var(--encre); margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--vert-f); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
b, strong { color: var(--encre); font-weight: 700; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--orange); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.small { font-size: 14px; }
.muted { color: var(--doux); }
.mt { margin-top: 24px; } .mt2 { margin-top: 48px; } .mb0 { margin-bottom: 0; }
.center { text-align: center; }
.lead { font-size: 18px; color: var(--texte); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 2px solid var(--vert); background: transparent; color: var(--vert);
  font: 700 15px/1 var(--font); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--vert); color: #fff; transform: translateY(-2px); }
.btn--plein { background: var(--vert); color: #fff; }
.btn--plein:hover { background: var(--vert-f); border-color: var(--vert-f); box-shadow: var(--ombre); }
.btn--orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-f); border-color: var(--orange-f); color: #fff; }
.btn--blanc { border-color: #fff; color: #fff; }
.btn--blanc:hover { background: #fff; color: var(--vert-f); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .fl { transition: transform .2s; }
.btn:hover .fl { transform: translateX(3px); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lien { font-weight: 700; text-decoration: none; color: var(--vert); display: inline-flex; gap: 8px; }
.lien::after { content: "→"; transition: transform .2s; }
.lien:hover::after { transform: translateX(3px); }

/* ---------- Bandeau supérieur ---------- */
.topbar { background: var(--vert-f); color: rgba(255, 255, 255, .85); font-size: 13px; }
.topbar .container { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 40px; }
.topbar-infos { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-infos span { display: inline-flex; align-items: center; gap: 7px; }
.topbar-infos svg { width: 14px; height: 14px; color: var(--lime); }
.topbar a { color: #fff; font-weight: 700; text-decoration: none; }
.topbar a:hover { color: var(--lime); }

/* ---------- En-tête & menu ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(19, 38, 30, .25); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; flex: none; }
.brand-logo img { width: 108px; }
.brand-year { font: 800 24px/1 var(--font); color: var(--orange); margin-top: -4px; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav > ul > li { position: relative; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none; cursor: pointer; font: 600 14px/1 var(--font); color: var(--encre); text-decoration: none; border-radius: 8px; }
.nav-top svg { width: 10px; height: 10px; transition: transform .2s; }
.nav-top:hover, .nav li:hover > .nav-top, .nav-top.actif { color: var(--vert); }
.nav li:hover > .nav-top svg, .nav li.open > .nav-top svg { transform: rotate(180deg); }
.sous { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(19, 38, 30, .35); border: 1px solid var(--filet); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.sous::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav li:hover > .sous, .nav li:focus-within > .sous, .nav li.open > .sous { opacity: 1; visibility: visible; transform: none; }
.sous a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--encre); text-decoration: none; }
.sous a:hover, .sous a[aria-current] { background: var(--creme); color: var(--vert); }
.sous a[aria-current] { font-weight: 700; }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { min-height: 42px; padding: 0 22px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--vert-f); }
.burger span { display: block; width: 24px; height: 2px; margin: 5px auto; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Accueil ---------- */
.accueil { padding: 28px 0 0; }
.hero-carte { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 56px; border-radius: 28px; background: var(--degrade); color: #fff; overflow: hidden; isolation: isolate; }
.hero-logo { width: 400px; max-width: 100%; margin-bottom: 24px; }
.hero-carte::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background: url("../img/illustrations/reseau.svg") right center / cover no-repeat; }
.hero-carte .eyebrow { color: var(--lime); }
.hero-carte h1 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; margin-bottom: 18px; }
.hero-carte h1 em { font-style: normal; color: var(--lime); }
.hero-carte .lead { color: rgba(255, 255, 255, .88); }
.hero-visuel { position: relative; }
.hero-carte > *, .page-hero .container > *, .deux > * { min-width: 0; }
.hero-visuel img { border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); max-width: 80%; margin: 0 auto; }
.hero-badge { position: absolute; left: -28px; bottom: 28px; padding: 16px 20px; border-radius: 14px; background: #fff; color: var(--encre); box-shadow: var(--ombre); }
.hero-badge b { display: block; font-size: 22px; color: var(--vert-f); }
.hero-badge span { font-size: 13px; color: var(--doux); }
/* Visuel d'accueil : robot détouré posé sur le bas de la carte, carte date/lieu en surimpression */
.hero-titre { margin: 0 0 20px; line-height: 0; }
/* Étiquette d'édition : même forme que la carte de date (coin replié en haut à droite), en orange */
.hero-tag { position: relative; display: inline-block; margin: 0 0 28px; padding: 10px 42px 12px 20px; border-radius: 12px; background: linear-gradient(135deg, #f7941d 0%, #e07b06 100%); color: #fff; font: 800 26px/1 "Outfit", "Montserrat", sans-serif; letter-spacing: -.01em; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .55); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.hero-tag::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(225deg, transparent 50%, #ffc067 50%); border-bottom-left-radius: 6px; }
.hero-tag sup { font-size: .5em; vertical-align: .9em; line-height: 0; margin-right: 4px; }
/* Arrière-plan : basilique Notre-Dame de la Paix de Yamoussoukro (Wikimedia Commons, Didierwiki, CC0) sous un voile vert */
.hero-carte { background:
  linear-gradient(95deg, rgba(8, 62, 42, .97) 0%, rgba(11, 80, 54, .94) 38%, rgba(11, 80, 54, .8) 62%, rgba(11, 80, 54, .86) 100%),
  url("../img/basilique-yamoussoukro.jpg") 62% 30% / cover no-repeat, var(--vert-f); }
.hero-carte::before { opacity: .25; }
.hero-carte .hero-visuel { align-self: end; margin-bottom: -56px; }
.hero-visuel .hero-robot { display: block; width: auto; max-width: 82%; max-height: 640px; margin: 0 0 0 auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 40px rgba(3, 38, 26, .45)); -webkit-mask: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, #000 82%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, #000 82%, transparent); mask-composite: intersect; }
.hero-visuel .hero-carte-date { position: absolute; left: 0; bottom: 64px; width: 44%; max-width: 250px; margin: 0; border-radius: 0; box-shadow: none; transform: rotate(-4deg); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .4)); }
/* Compteur façon « flip clock » : tuiles sombres coupées à mi-hauteur, chiffres argentés, libellés dorés */
.decompte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; max-width: 520px; perspective: 600px; }
.decompte div { text-align: center; }
.decompte b {
  position: relative; display: block; overflow: hidden; padding: 12px 0 10px; border-radius: 12px;
  font: 700 clamp(44px, 4.6vw, 64px)/1 "Oswald", "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: #ececec; text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #343434 0%, #2a2a2a 49.5%, #1a1a1a 50.5%, #202020 100%);
  box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .6);
}
.decompte b::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)); pointer-events: none; }
.decompte b::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #0b0b0b; box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.decompte b.flip { animation: flip .5s cubic-bezier(.3, .7, .3, 1); }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(-14deg) scaleY(.94); filter: brightness(.8); } 100% { transform: none; } }
.decompte small { display: block; margin-top: 10px; font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #f2a516; }
.decompte-label { margin: 28px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }

/* Chiffres clés : quatre colonnes de la grille, ouvertes par un filet épais de couleur */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; margin-top: 56px; }
.stats > div { padding-top: 20px; border-top: 6px solid var(--vert-f); }
.stats > div:nth-child(2) { border-top-color: var(--teal); }
.stats > div:nth-child(3) { border-top-color: var(--lime); }
.stats > div:nth-child(4) { border-top-color: var(--orange); }
.stats .stat-k { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-f); }
.stats b { display: flex; align-items: baseline; gap: 8px; font-size: clamp(64px, 8vw, 112px); line-height: .9; letter-spacing: -.04em; color: var(--vert-f); font-weight: 800; font-variant-numeric: tabular-nums; }
.stats b small { font-size: 18px; letter-spacing: .04em; font-weight: 800; color: var(--orange-f); }
.stats p { margin: 16px 0 0; max-width: 24ch; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--texte); }

/* ---------- Bannière des pages ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--degrade); color: #fff; padding: 56px 0; }
.page-hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.page-hero h1 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin-bottom: 14px; }
.page-hero h1 em { font-style: normal; color: var(--lime); }
.page-hero .lead { color: rgba(255, 255, 255, .88); max-width: 520px; margin: 0; }
.page-hero .btns { margin-top: 26px; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.fil a { color: #fff; text-decoration: none; }
.fil a:hover { color: var(--lime); }
.fil span[aria-current] { color: var(--lime); font-weight: 600; }
.page-hero-img { justify-self: end; width: 100%; max-width: 560px; }
.page-hero-img img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section--alt { background: var(--creme); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-f); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.tete { max-width: 760px; margin-bottom: 48px; }
.tete.center { margin-left: auto; margin-right: auto; }
.tete.center .eyebrow::after { content: ""; width: 28px; height: 2px; background: currentColor; }
.tete .lead { margin-bottom: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.deux--centre { align-items: center; }
.cols-2, .cols-3, .cols-4 { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cartes : modules de grille (J. Müller-Brockmann) ----------
   Pas de boîte, d'arrondi ni d'ombre. Chaque module est un champ de la
   grille de 12 colonnes, ouvert par un filet, avec un numéro, un titre et
   un texte en drapeau. Les hauteurs suivent un interlignage de base de 8 px ;
   les gouttières sont égales (24 px). */
.cols-2, .cols-3, .cols-4 { column-gap: 24px; row-gap: 48px; }
.card { position: relative; padding: 24px 0 0; border-top: 2px solid var(--encre); background: none; transition: border-color .2s; }
.card:hover { border-top-color: var(--orange); }
.card p:last-child { margin-bottom: 0; }
.card .ico { width: 32px; height: 32px; margin-bottom: 24px; color: var(--vert); }
.card .ico svg { width: 32px; height: 32px; }
.card .n { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-f); font-variant-numeric: tabular-nums; }
.card h3 { margin-bottom: 8px; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card h3 { color: var(--vert-f); }
a.card:hover h3 { color: var(--orange-f); }
.section--alt .card { border-top-color: var(--vert-f); }

/* Champs de couleur : aplats rectangulaires, numéro en grand corps aligné à gauche */
.carte-g { position: relative; min-height: 320px; padding: 24px; color: #fff; display: flex; flex-direction: column; text-decoration: none; transition: background-color .2s; }
.carte-g:hover { color: #fff; }
.carte-g .num { display: block; order: -1; font-size: 96px; font-weight: 800; line-height: .9; letter-spacing: -.04em; margin-bottom: 24px; color: #fff; }
.carte-g .k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .5); }
.carte-g .d { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--lime); text-transform: uppercase; letter-spacing: .08em; }
.carte-g h3 { color: #fff; font-size: 22px; margin: 16px 0 8px; }
.carte-g p { color: rgba(255, 255, 255, .88); font-size: 15px; }
.carte-g .bas { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 14px; }
.carte-g .bas::after { content: " →"; }
.g1 { background: var(--vert-f); }
.g2 { background: var(--teal); }
.g3 { background: #5d9a2a; }
.g4 { background: var(--orange-f); }
.carte-g:hover .bas { text-decoration: underline; text-underline-offset: 4px; }

/* Niveaux : quatre colonnes égales, un champ de couleur en tête, données en tableau de filets */
.niveau { display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.niveau .bande { padding: 16px 0 24px; color: var(--encre); }
.niveau .bande small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-f); }
.niveau .bande b { display: block; font-size: 96px; font-weight: 800; line-height: .9; letter-spacing: -.04em; margin: 16px 0 8px; }
.niveau:nth-child(1) .bande b { color: var(--orange); }
.niveau:nth-child(2) .bande b { color: var(--teal); }
.niveau:nth-child(3) .bande b { color: var(--vert); }
.niveau:nth-child(4) .bande b { color: var(--vert-f); }
.niveau .bande h3 { color: var(--encre); font-size: 24px; margin: 0; }
.niveau .theme { font-weight: 700; color: var(--encre); }
.niveau dl { margin: auto 0 0; padding-top: 16px; }
.niveau dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--filet); font-size: 14px; }
.niveau dt { color: var(--doux); }
.niveau dd { margin: 0; font-weight: 700; color: var(--vert-f); }

.liste { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid var(--filet); }
.liste li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--filet); }
.liste li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; background: var(--orange); }

/* Étapes : quatre modules ouverts par un filet épais */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 48px; }
.etape { padding-top: 16px; border-top: 6px solid var(--vert); }
.etape:nth-child(2) { border-top-color: var(--teal); }
.etape:nth-child(3) { border-top-color: var(--lime); }
.etape:nth-child(4) { border-top-color: var(--orange); }
.etape .n { display: block; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--encre); }
.etape .d { display: block; margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-f); }

.citation { margin: 0; padding: 24px 0 0; border-top: 6px solid var(--orange); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; font-weight: 700; color: var(--vert-f); letter-spacing: -.01em; }

/* Bandeau d'appel */
.appel { padding: 0 0 88px; }
.appel-carte { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding: 48px 56px; border-radius: 24px; background: var(--degrade); color: #fff; isolation: isolate; }
.appel-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background: url("../img/illustrations/reseau.svg") right center / cover no-repeat; }
.appel-carte h2 { color: #fff; margin-bottom: 6px; }
.appel-carte p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 560px; }
.section--alt + .appel { padding-top: 88px; background: #fff; }

/* Pages voisines : deux champs séparés par un filet */
.suite { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 64px 0 88px; }
.suite a { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--encre); text-decoration: none; }
.suite a:hover { border-top-color: var(--orange); }
.suite small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.suite b { font-size: 24px; color: var(--vert-f); }
.suite a:hover b { color: var(--orange-f); }
.suite .next { text-align: right; grid-column: 2; }

/* ---------- Tableaux ---------- */
.tableau { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--filet); background: #fff; }
.tableau table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tableau th, .tableau td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau thead th { background: var(--vert-f); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.tableau tbody tr:nth-child(even) { background: #fbfaf7; }
.tableau .num { text-align: right; white-space: nowrap; }
.tableau tfoot td { font-weight: 700; background: rgba(247, 148, 29, .1); color: var(--encre); border-bottom: 0; }
.tableau tr:last-child td { border-bottom: 0; }

.info { padding: 16px 20px; border-radius: 12px; background: rgba(247, 148, 29, .1); color: var(--encre); }
.info p { margin: 0; }
.info:empty { display: none; }
.info--ok { background: rgba(19, 168, 137, .1); }
.etat { display: none; margin-bottom: 20px; }
.etat.show { display: block; }

/* ---------- Barème & budget ---------- */
.bareme, .budget { list-style: none; margin: 0; padding: 0; }
.bareme li, .budget li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.bareme .crit { font-weight: 700; color: var(--encre); }
.bareme .pts { font-size: 26px; font-weight: 800; color: var(--vert); grid-row: span 2; align-self: center; }
.bareme .barre, .budget .barre { grid-column: 1; height: 8px; border-radius: 8px; background: var(--creme); overflow: hidden; }
.budget .barre { grid-column: 1 / -1; background: #fff; }
.bareme .barre i, .budget .barre i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--vert), var(--teal)); transition: width 1.3s cubic-bezier(.2, .7, .2, 1); }
.bareme small { grid-column: 1; color: var(--doux); font-size: 14px; }
.bareme .total, .budget .total { border-bottom: 0; font-weight: 800; color: var(--encre); }
.bareme .total .pts { font-size: 40px; color: var(--orange-f); }
.budget b { color: var(--vert-f); }
.budget .total b { font-size: 26px; color: var(--orange-f); }

/* ---------- Chronologie ---------- */
.chrono { list-style: none; margin: 0; padding: 0; position: relative; }

.chrono li { position: relative; display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; padding: 24px 0; border-top: 1px solid var(--filet); }
.chrono li.cle { border-top: 2px solid var(--encre); }

.chrono li.cle time::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--orange); vertical-align: 1px; }
.chrono time { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-f); padding-top: 3px; }
.chrono .txt { padding: 0; }
.chrono h3 { margin-bottom: 4px; }
.chrono p { margin: 0; }
.chrono li.fait { opacity: .5; }

.chrono li.encours h3::after { content: "En cours"; margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11px; vertical-align: middle; }

/* ---------- Onglets & horaires ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.onglet { cursor: pointer; padding: 12px 22px; border-radius: 14px; border: 1px solid var(--filet); background: #fff; color: var(--encre); font: 700 16px/1.2 var(--font); text-align: left; }
.onglet small { display: block; font-size: 12px; font-weight: 500; color: var(--doux); }
.onglet[aria-selected="true"] { background: var(--vert-f); border-color: var(--vert-f); color: #fff; }
.onglet[aria-selected="true"] small { color: rgba(255, 255, 255, .75); }
.horaire { list-style: none; margin: 0; padding: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--filet); background: #fff; }
.horaire li { display: grid; grid-template-columns: 150px 1fr 200px; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--filet); align-items: center; }
.horaire li:last-child { border-bottom: 0; }
.horaire .h { font-weight: 800; color: var(--vert); }
.horaire .t { color: var(--encre); }
.horaire .p { color: var(--doux); font-size: 14px; text-align: right; }
.horaire .fort { background: rgba(247, 148, 29, .07); }
.horaire .fort .t { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--filet); }
.faq details { border-top: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 18px; font-weight: 700; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 400; line-height: 1; color: var(--vert); transition: transform .25s; }
.faq details[open] { border-top: 2px solid var(--encre); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--orange-f); }
.faq details > div { padding: 0 0 24px; max-width: 66ch; }

/* ---------- Formules ---------- */
.formule { display: flex; flex-direction: column; padding-top: 16px; border-top: 2px solid var(--encre); }
.formule.principale { background: var(--vert-f); color: #fff; border-top-color: var(--orange); padding: 16px 24px 24px; }
.formule.principale h3, .formule.principale .prix, .formule.principale b { color: #fff; }
.formule.principale .n { color: var(--lime); }
.formule.principale .places, .formule.principale .liste li { color: rgba(255, 255, 255, .88); }
.formule.principale .liste { border-color: rgba(255, 255, 255, .2); }
.formule.principale .liste li { border-color: rgba(255, 255, 255, .2); }
.formule.principale .liste li::before { background: var(--lime); }
.formule.principale .btn { background: var(--orange); border-color: var(--orange); color: #fff; }
.formule .n { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-f); }
.formule h3 { font-size: 24px; margin: 10px 0; }
.formule .prix { font-size: 48px; font-weight: 800; letter-spacing: -.03em; color: var(--vert-f); line-height: 1; margin-top: 8px; }
.formule .places { font-size: 13px; color: var(--doux); }
.formule .liste { flex: 1; margin: 16px 0 24px; font-size: 15px; }
.formule .liste li { padding-top: 6px; padding-bottom: 6px; }
.formule .liste li::before { top: 9px; }

/* ---------- Galerie & visionneuse ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 32px; }
.galerie a { display: block; text-decoration: none; border-top: 2px solid var(--encre); padding-top: 8px; }
.galerie .cadre { display: block; overflow: hidden; aspect-ratio: 1; background: var(--creme); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galerie--large .cadre { aspect-ratio: 16 / 10; }
.galerie a:hover img { transform: scale(1.05); }
.galerie figure { margin: 0; }
.galerie .legende { display: block; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--encre); }
.visionneuse { position: fixed; inset: 0; z-index: 400; display: none; place-items: center; padding: 40px; background: rgba(11, 30, 22, .92); }
.visionneuse.open { display: grid; }
.visionneuse img { max-height: 86vh; width: auto; border-radius: 12px; }
.visionneuse button { position: absolute; top: 20px; right: 20px; padding: 10px 18px; border: 0; border-radius: 999px; background: #fff; color: var(--encre); font: 700 14px/1 var(--font); cursor: pointer; }

.soutien { display: flex; flex-direction: column; gap: 10px; }
.soutien img { width: 130px; }
.logo-blanc { background: #fff; padding: 10px; border-radius: 10px; }

/* ---------- Contact ---------- */
.contacts { list-style: none; margin: 0; padding: 0; }
.contacts li { display: grid; grid-template-columns: 32px 1fr; gap: 24px; align-items: start; padding: 24px 0; border-top: 1px solid var(--filet); }
.contacts li:first-child { border-top: 2px solid var(--encre); }
.contacts .ic { width: 32px; height: 32px; color: var(--vert); }
.contacts .ic svg { width: 22px; height: 22px; }
.contacts .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.contacts .v { color: var(--encre); font-weight: 600; }
.carte { width: 100%; height: 440px; border: 0; border-radius: 20px; }
.colonne { position: sticky; top: 100px; padding-top: 16px; border-top: 2px solid var(--encre); }
.label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-f); }

/* ---------- Formulaires ---------- */
.form fieldset { margin: 0 0 48px; padding: 16px 0 0; border: 0; border-top: 2px solid var(--encre); background: none; }
.form legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 20px; font-weight: 700; color: var(--vert-f); }
.form legend .n { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--vert); color: #fff; font-size: 15px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; clear: both; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; clear: both; }
.field.plein { grid-column: 1 / -1; }
.field label, .label-champ { font-size: 14px; font-weight: 600; color: var(--encre); }
.req { color: var(--orange-f); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 6px; border: 1.5px solid var(--filet); background: #fff; color: var(--encre); font: 400 16px/1.4 var(--font); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(19, 168, 137, .15); background: #fff; }
.aide { font-size: 13px; color: var(--doux); }
.err { display: none; font-size: 13px; font-weight: 600; color: #c0392b; }
.invalid .err { display: block; }
.invalid input, .invalid select, .invalid textarea { border-color: #c0392b; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--filet); font-weight: 600; color: var(--encre); transition: background .2s, border-color .2s, color .2s; }
.choix label:hover span { border-color: var(--teal); }
.choix input:checked + span { background: var(--vert); border-color: var(--vert); color: #fff; }
.choix input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; cursor: pointer; clear: both; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--vert); }
.check .err { grid-column: 2; }
.membre { padding: 16px 0 8px; border-top: 1px solid var(--filet); margin-bottom: 8px; clear: both; }
.membre .tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; max-width: none; font-weight: 700; color: var(--vert-f); }
.membre .champs { grid-template-columns: 2fr 1.3fr .8fr 1fr; }
.rm { background: none; border: 0; color: #c0392b; cursor: pointer; font: 600 13px/1 var(--font); text-decoration: underline; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--vert-f); color: rgba(255, 255, 255, .72); border-radius: 24px 24px 0 0; padding: 72px 0 0; }
.footer-haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-logo { width: 240px; max-width: 100%; margin-bottom: 20px; }
.footer-jisaa img { width: 110px; background: #fff; padding: 8px 10px; border-radius: 8px; margin-top: 16px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 4px 0; font-size: 14px; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.footer-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; }

.haut { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; font: 700 18px/1 var(--font); cursor: pointer; box-shadow: var(--ombre); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.haut.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Apparition ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .burger { display: block; }
  .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 200; overflow-y: auto; background: #fff; padding: 84px 20px 30px; box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .3); transform: translateX(100%); transition: transform .3s; }
  .nav { visibility: hidden; transition: transform .3s, visibility .3s; }
  .nav.open { transform: none; visibility: visible; }
  .burger { position: relative; z-index: 210; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--filet); }
  .nav-top { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 16px; }
  .sous { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 12px; min-width: 0; }
  .nav li:hover > .sous { display: none; }
  .nav li.open > .sous { display: block; }
  .nav-cta { margin: 20px 0 0; border: 0 !important; }
  .nav-cta .btn { width: 100%; }
  .cols-4, .etapes { grid-template-columns: repeat(2, 1fr); }
  .footer-haut { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero-carte, .page-hero .container, .deux { grid-template-columns: 1fr; }
  .hero-carte { padding: 36px 24px; }
  .hero-badge { left: 12px; }
  .hero-carte .hero-visuel { margin-bottom: -36px; }
  .hero-visuel .hero-robot { max-height: 480px; }
  .hero-visuel .hero-carte-date { width: 42%; bottom: 40px; }
  .page-hero-img { justify-self: center; max-width: 440px; }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .chrono li { grid-template-columns: 1fr; gap: 8px; }
  .horaire li { grid-template-columns: 1fr; gap: 4px; }
  .horaire .p { text-align: left; }
  .colonne { position: static; }
  .section { padding: 64px 0; }
  .appel-carte { padding: 36px 26px; }
  .champs, .membre .champs { grid-template-columns: 1fr; }
  .suite { grid-template-columns: 1fr; }
  .suite .next { grid-column: 1; }
}
@media (max-width: 600px) {
  .topbar-infos span + span { display: none; }
  .cols-4, .etapes, .galerie { grid-template-columns: 1fr; }
  .footer-haut { grid-template-columns: 1fr; }

  .decompte b { font-size: 34px; border-radius: 8px; }
  .decompte small { font-size: 10px; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.soutien .logo-ministere { width: 100%; max-width: 300px; }

/* =========================================================
   Menu latéral mobile
   ========================================================= */
.nav-tete, .nav-pied { display: none; }
@media (max-width: 1080px) {
  .nav { width: min(340px, 86vw); padding: 0 0 24px; border-radius: 20px 0 0 20px; display: flex; flex-direction: column; box-shadow: -24px 0 60px -20px rgba(3, 38, 26, .45); transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility .35s; }
  .nav-tete { display: flex; align-items: center; gap: 4px; min-height: 76px; padding: 0 20px; border-bottom: 1px solid var(--filet); }
  .nav-tete img { width: 78px; }
  .nav-tete span { font-weight: 800; font-size: 16px; color: var(--orange); }
  .nav > ul { padding: 8px 20px 0; }
  .nav > ul > li:not(.nav-cta) { border-bottom: 1px solid var(--filet); }
  .nav-top { padding: 14px 2px; font-size: 15px; font-weight: 700; }
  .nav-top.actif, .nav-top[aria-current] { color: var(--vert); }
  .nav li.open > .nav-top { color: var(--vert); }
  .sous { margin: 0 0 10px; padding: 6px; border-radius: 12px; background: var(--creme); }
  .sous a { padding: 10px 12px; font-size: 14px; }
  .sous a[aria-current] { background: #fff; }
  .nav-cta { margin-top: 18px; }
  .nav-cta .btn { min-height: 48px; }
  .nav-pied { display: block; margin-top: auto; padding: 20px 20px 0; font-size: 13px; line-height: 1.6; color: var(--doux); }
  .nav-pied p { margin: 0 0 10px; }
  .nav-pied b { color: var(--vert-f); }
  .nav-pied a { color: var(--vert); text-decoration: none; font-weight: 600; }
  .burger { width: 42px; height: 42px; border-radius: 12px; background: var(--creme); }
  .burger span { width: 20px; margin: 4px auto; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  body::after { content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(8, 40, 28, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  body.nav-ouverte { overflow: hidden; }
  body.nav-ouverte::after { opacity: 1; visibility: visible; }
}

/* =========================================================
   Mobile : tailles réduites
   ========================================================= */
@media (max-width: 600px) {
  body { font-size: 15px; line-height: 1.6; }
  .container { padding: 0 18px; }
  h2 { font-size: 24px; }
  h3 { font-size: 17px; }
  .lead { font-size: 15.5px; }
  .section { padding: 48px 0; }
  .tete { margin-bottom: 28px; }
  .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
  .topbar { font-size: 12px; }
  .topbar .container { min-height: 34px; }
  .site-header .container { min-height: 64px; }
  .brand-logo img { width: 84px; }
  .brand-year { font-size: 19px; }

  /* Accueil */
  .accueil { padding-top: 14px; }
  .hero-carte { padding: 26px 20px 0; border-radius: 22px; gap: 0; }
  .hero-tag { font-size: 20px; padding: 8px 34px 9px 14px; margin-bottom: 18px; }
  .hero-logo { width: 210px; }
  .hero-titre { margin-bottom: 14px; }
  .hero-carte .lead { font-size: 15px; }
  .hero-carte .btns { margin-top: 18px; }
  .hero-carte .btns .btn { flex: 1 1 auto; justify-content: center; }
  .decompte-label { margin-top: 22px; font-size: 11px; }
  .decompte { gap: 8px; margin-top: 12px; }
  .decompte b { font-size: 30px; padding: 9px 0 8px; border-radius: 8px; }
  .decompte small { font-size: 9.5px; margin-top: 7px; }
  .hero-carte .hero-visuel { margin: 18px 0 0; }
  .hero-visuel .hero-robot { max-height: 300px; max-width: 70%; }
  .hero-visuel .hero-carte-date { width: 40%; max-width: 150px; bottom: 26px; }
  .stats { margin-top: 32px; column-gap: 16px; row-gap: 24px; }
  .stats > div { padding-top: 12px; border-top-width: 4px; }
  .stats .stat-k { font-size: 10.5px; margin-bottom: 10px; }
  .stats b { font-size: 46px; }
  .stats b small { font-size: 13px; }
  .stats p { font-size: 13px; margin-top: 10px; }
  .carte-g { min-height: 0; padding: 20px; }
  .carte-g .num { font-size: 52px; margin-bottom: 14px; }
  .carte-g h3 { font-size: 19px; margin-top: 12px; }
  .carte-g p { font-size: 14px; }
  .cols-2, .cols-3, .cols-4 { row-gap: 28px; }
  .etape .n { font-size: 38px; }
  .appel { padding-bottom: 48px; }
  .section--alt + .appel { padding-top: 48px; }
  .appel-carte { padding: 28px 22px; border-radius: 20px; gap: 20px; }
  .appel-carte h2 { font-size: 22px; }

  /* Pages intérieures */
  .page-hero { padding: 30px 0 34px; }
  .page-hero .container { gap: 20px; }
  .page-hero h1 { font-size: 30px; }
  .page-hero .lead { font-size: 15px; }
  .page-hero-img { max-width: 280px; }
  .fil { font-size: 12px; margin-bottom: 10px; }
  .niveau .bande b { font-size: 64px; }
  .niveau .bande h3 { font-size: 21px; }
  .citation { font-size: 20px; }
  .bareme .pts { font-size: 22px; }
  .bareme .total .pts { font-size: 32px; }
  .chrono li { padding: 18px 0; }
  .chrono h3 { font-size: 16px; }
  .onglet { padding: 10px 16px; font-size: 14px; }
  .horaire li { padding: 14px 16px; }
  .faq summary { font-size: 16px; padding: 18px 0; }
  .formule .prix { font-size: 36px; }
  .formule h3 { font-size: 20px; }
  .tableau th, .tableau td { padding: 12px 14px; font-size: 14px; }
  .suite { padding: 40px 0 48px; row-gap: 20px; }
  .suite b { font-size: 18px; }
  .carte { height: 300px; }
  .form legend { font-size: 18px; }

  /* Pied de page : listes sur deux colonnes */
  .site-footer { padding-top: 44px; border-radius: 20px 20px 0 0; }
  .footer-haut { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-haut > div:first-child { grid-column: 1 / -1; }
  .footer-haut > div:last-child { grid-column: 1 / -1; }
  .footer-logo { width: 170px; }
  .site-footer h4 { font-size: 13px; margin-bottom: 10px; }
  .site-footer li { font-size: 13px; padding: 3px 0; }
  .footer-bas { margin-top: 32px; font-size: 12px; flex-direction: column; gap: 6px; }
  .haut { width: 42px; height: 42px; right: 14px; bottom: 14px; }
}
@media (max-width: 600px) {
  .etapes { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 28px; }
  .etape { padding-top: 12px; border-top-width: 4px; }
  .etape .n { font-size: 32px; }
  .etape .d { font-size: 10.5px; margin: 10px 0 6px; }
  .etape h3 { font-size: 15px; }
  .etape p { font-size: 13px; }
}
/* Menu ouvert : l'en-tête (qui contient le menu) passe au-dessus du voile */
body.nav-ouverte .site-header { z-index: 160; }

/* Grilles à colonnes inégales (ordinateur) ; une seule colonne sur mobile */
.deux--4-8 { grid-template-columns: 4fr 8fr; }
.deux--5-7 { grid-template-columns: 5fr 7fr; }
.deux--8-4 { grid-template-columns: 8fr 4fr; }
@media (max-width: 860px) {
  .deux--4-8, .deux--5-7, .deux--8-4 { grid-template-columns: 1fr; }
}
/* Adresses e-mail et numéros longs : retour à la ligne propre */
.colonne a, .contacts .v a, .site-footer a, .nav-pied a { overflow-wrap: anywhere; }
.colonne a[href^="tel:"] { white-space: nowrap; }

/* Icônes illustrées de la bibliothèque CNRIA (assets/icones/) */
.card .ico { display: block; width: 56px; height: 56px; margin-bottom: 16px; }
.card .ico img { width: 100%; height: 100%; display: block; }
.contacts .ic { width: 40px; height: 40px; }
.contacts .ic img { width: 100%; height: 100%; display: block; }
.contacts li { grid-template-columns: 40px 1fr; gap: 20px; }
@media (max-width: 600px) {
  .card .ico { width: 48px; height: 48px; margin-bottom: 12px; }
  .contacts .ic { width: 34px; height: 34px; }
  .contacts li { grid-template-columns: 34px 1fr; gap: 16px; }
}

/* Envoi de fichiers (dossier PDF, pitch vidéo) */
.field.fichier input[type=file] { padding: 12px; min-height: 0; background: #fff; border-style: dashed; cursor: pointer; font-size: 14px; }
.field.fichier input[type=file]::file-selector-button { margin-right: 14px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--vert); color: #fff; font: 700 13px/1 var(--font); cursor: pointer; }
.field.fichier input[type=file]::file-selector-button:hover { background: var(--vert-f); }
.envoi { display: grid; gap: 6px; margin-top: 4px; }
.envoi[hidden] { display: none; }
.envoi-barre { display: block; height: 8px; border-radius: 8px; background: var(--creme); overflow: hidden; }
.envoi-barre i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--vert), var(--teal)); transition: width .3s; }
.envoi-txt { font-size: 13px; font-weight: 600; color: var(--vert-f); }
.envoi.fini .envoi-barre i { background: var(--lime); }

/* Espace presse : documents officiels (couverture + texte), modules de grille */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; }
.doc { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: start; padding-top: 20px; border-top: 2px solid var(--encre); }
.doc-couv { display: block; box-shadow: 0 14px 30px -14px rgba(11, 80, 54, .55); transition: transform .25s; }
.doc-couv:hover { transform: translateY(-4px); }
.doc-couv img { width: 100%; height: auto; display: block; }
.doc .n { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-f); }
.doc h3 { font-size: 20px; color: var(--vert-f); margin-bottom: 8px; }
.doc p { font-size: 14.5px; margin-bottom: 16px; }
.doc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.doc-btns .btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .doc { grid-template-columns: 104px 1fr; gap: 16px; } .doc h3 { font-size: 17px; } }