/* baptistemarclay.fr V4 : refresh du site. Noir pour le hero et le pied de page, gris très clair pour les sections,
   chaque projet dans la couleur de son client. Une seule police, Inter Tight. */
/* Inter Tight hébergée avec le site (police variable 100 à 900, deux sous-ensembles) */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-tight-latin-ext-8a39ba.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-tight-latin-6c70c7.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --page: #f4f4f2;
  --ink: #111111;
  --ink-2: rgba(17, 17, 17, .62);
  --black: #0a0a0a;
  --white: #ffffff;
  --white-2: rgba(255, 255, 255, .64);
  --white-line: rgba(255, 255, 255, .2);
  --lime: #BFFF00; /* l’accent, avec parcimonie : chargement, lignes de temps, cases cochées */
  --text: "Inter Tight", sans-serif;
  --grid: 75rem;
  --gutter: clamp(1rem, 3vw, 3rem);
  --radius: .75rem;
  --card-r: clamp(1.25rem, 2.6vw, 2.25rem); /* coins des cartes de section */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Lenis (défilement doux) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { overflow-x: clip; margin: 0; background: var(--black); color: var(--ink); font-family: var(--text); font-size: .95rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
h1, h2, h3, p, dl, dt, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.grid { max-width: calc(var(--grid) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* étiquette : petit carré, police courante, un cran plus petite */
.lab { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.lab::before { content: ""; width: .4rem; height: .4rem; background: currentColor; flex: none; }
.lab.is-plain::before { display: none; }

/* boutons : pilules, une pleine, une au trait */
.btn { display: inline-flex; align-items: center; gap: .65rem; height: 3rem; padding: 0 1.35rem; border-radius: 100vw; border: 1px solid currentColor; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: background-color .35s, color .35s, border-color .35s; }
.btn svg { width: .95rem; height: .95rem; flex: none; }
.btn.is-solid { background: var(--lime); color: var(--black); border-color: var(--lime); }
.btn.is-solid:hover { background: var(--white); border-color: var(--white); }
.btn.is-ghost { color: var(--white); border-color: var(--white-line); }
.btn.is-ghost:hover { border-color: var(--white); }
.btn.is-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.is-dark:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }

/* ===== chargement : la signature, puis le rideau se lève ===== */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--black); display: flex; align-items: center; justify-content: center; }
.loader_m { width: clamp(7rem, 16vw, 14rem); aspect-ratio: 52 / 22; background: var(--lime); -webkit-mask: url("assets/logo-m.svg") center / contain no-repeat; mask: url("assets/logo-m.svg") center / contain no-repeat; clip-path: inset(0 100% 0 0); }
html.no-loader .loader { display: none; }

/* ===== barre de navigation : fixe, blanche sur fond sombre, noire sur fond clair (site.js lit la section dessous) ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--white); pointer-events: none; transition: color .4s; }
.nav.on-light { color: var(--ink); }
.nav.on-video { color: var(--white); mix-blend-mode: difference; }
.nav_inner { display: flex; justify-content: space-between; align-items: center; height: 4.5rem; }
.nav_brand { pointer-events: auto; width: 2.6rem; aspect-ratio: 52 / 22; background: currentColor; -webkit-mask: url("assets/logo-m.svg") center / contain no-repeat; mask: url("assets/logo-m.svg") center / contain no-repeat; }
.nav_links { pointer-events: auto; display: flex; gap: 1.75rem; font-size: .95rem; font-weight: 500; }
.nav_links a { position: relative; padding: .25rem 0; }
.nav_links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.nav_links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ===== hero : noir, le titrage aéré en haut ; le showreel part de la largeur de la grille et grandit jusqu'au plein écran au défilement ===== */
.hero { background: var(--black); color: var(--white); position: relative; }
.hero_head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; gap: 1.5rem 4rem; padding-top: clamp(9rem, 26vh, 15rem); padding-bottom: 3.5rem; }
.hero_title { font-size: clamp(2.75rem, 4.8vw, 4.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
/* colonne de droite : le haut du texte sur le haut des capitales du titre, le bas des boutons sur sa ligne de base (marges calculées par site.js) */
.hero_row { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: .9rem; }
/* navigateurs récents : le texte est rogné au ras des capitales et de la ligne de base, avec la vraie police (taille optique comprise) */
@supports (text-box: trim-both cap alphabetic) {
  .hero_title { text-box: trim-both cap alphabetic; }
  .hero_text { text-box: trim-start cap alphabetic; }
}
@media (max-width: 1239px) { .hero_head { grid-template-columns: 1fr; } }
.hero_text { font-size: .98rem; line-height: 1.45; color: var(--white-2); max-width: 30rem; }
.hero_actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero_actions .btn { height: 2.85rem; }
.hero_facts { display: flex; flex-wrap: wrap; gap: .4rem 2.5rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); padding-top: .9rem; border-top: 1px solid var(--white-line); color: var(--white-2); font-size: .9rem; }
.hero_facts b { color: var(--white); font-weight: 500; }
.hero_rating { display: inline-flex; align-items: center; gap: .5rem; }
.stars { display: inline-flex; gap: .12rem; }
.stars svg { width: .78rem; height: .78rem; fill: var(--lime); }
/* la vidéo occupe toute la largeur dans la mise en page, en 16:9 sans recadrage ; site.js la réduit à la largeur de la grille au départ */
/* Le showreel part en 16:9 à la largeur de la grille, grandit jusqu'à remplir tout l'écran quand son haut touche le haut,
   reste collé le temps que la section suivante glisse par-dessus. site.js fixe la hauteur du conteneur et la tenue. */
.reel_wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.reel { position: sticky; top: 0; margin: 0 auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; cursor: pointer; }
.reel_video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero + .manifesto { margin-top: calc(-1 * max(var(--card-r), var(--reel-hold, 0px))); }
.reel_sound { position: absolute; right: max(var(--gutter), (100vw - var(--grid)) / 2); bottom: 1.5rem; display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; padding: 0 1rem; border-radius: 100vw; background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--white); font-size: .9rem; font-weight: 500; border: 1px solid var(--white-line); transition: background-color .35s, color .35s; }
.reel_sound:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }
.reel_sound svg { width: 1rem; height: 1rem; }
.reel_sound .ico-off, .reel_sound[aria-pressed="true"] .ico-on { display: none; }
.reel_sound[aria-pressed="true"] .ico-off { display: block; }

/* ===== cartes : chaque section après le hero monte par-dessus la précédente, coins arrondis en haut ===== */
.card { position: relative; border-radius: var(--card-r) var(--card-r) 0 0; margin-top: calc(-1 * var(--card-r)); }

/* ===== manifeste : le paragraphe s'allume au défilement, la signature hors grille à gauche ===== */
.manifesto { --mpad: clamp(6rem, 16vh, 10rem); padding: var(--mpad) 0 calc(var(--mpad) + var(--card-r)); background: var(--page); color: var(--ink); }
.manifesto_inner { position: relative; }
.manifesto_logo { width: 4rem; aspect-ratio: 52 / 22; margin-bottom: 2.5rem; background: currentColor; -webkit-mask: url("assets/logo-m.svg") center / contain no-repeat; mask: url("assets/logo-m.svg") center / contain no-repeat; }
.manifesto_text { font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; }
.manifesto_text .w { opacity: .14; }
.manifesto_line { position: relative; display: flex; justify-content: space-between; margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.1rem; font-size: .9rem; color: var(--ink-2); }
.manifesto_line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(17, 17, 17, .18); }
.manifesto_fill { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--lime); transform-origin: left; transform: scaleX(0); }
.manifesto_step { position: relative; transition: color .4s; }
.manifesto_step b { position: absolute; top: calc(-1.1rem - .3rem); left: 0; width: .5rem; height: .5rem; background: rgba(17, 17, 17, .25); transition: background-color .4s; }
.manifesto_step:not(:first-child):not(:last-child) { text-align: center; }
.manifesto_step:not(:first-child):not(:last-child) b { left: 50%; margin-left: -.25rem; }
.manifesto_step:last-child { text-align: right; }
.manifesto_step:last-child b { left: auto; right: 0; }
.manifesto_step.is-on { color: var(--ink); }
.manifesto_step.is-on b { background: var(--ink); }
.manifesto_step.is-loop.is-on b { background: var(--lime); box-shadow: 0 0 0 1px var(--ink); border-radius: 50%; }
@media (min-width: 1440px) {
  /* assez de marge : la signature sort de la grille, au bord gauche de la page */
  .manifesto_logo { position: absolute; top: .55em; left: calc((100% - 100vw) / 2 + var(--gutter)); margin: 0; width: clamp(3rem, calc((100vw - var(--grid)) / 2 - var(--gutter) - 1.5rem), 7rem); font-size: clamp(2rem, 4.4vw, 4.25rem); }
}

/* ===== section projet : couleur du client ===== */
.pj { --pj-bg: #322fe1; --pj-fg: #ffffff; --pj-fg-2: rgba(255, 255, 255, .64); --pj-line: rgba(255, 255, 255, .2);
  background: var(--pj-bg); color: var(--pj-fg); padding: calc(5rem + var(--card-r)) 0 calc(6rem + var(--card-r)); }
.pj_count { color: var(--pj-fg-2); }
.pj.is-light .sl_stage { background: rgba(0, 0, 0, .08); }
.pj_title { display: block; text-wrap: pretty; margin: 1rem 0 1.6rem; font-weight: 400; font-size: clamp(2.25rem, 4.2vw, 4rem); line-height: 1.05; letter-spacing: -.025em; color: var(--pj-fg-2); }
.pj_name { font-weight: 700; color: var(--pj-fg); }
.pj_title em { font-style: normal; }

.sl { position: relative; }
.sl_stage { aspect-ratio: var(--sl-ratio, 3 / 2); width: 100%; border-radius: var(--radius); overflow: hidden; position: relative; background: rgba(0, 0, 0, .18); touch-action: pan-y; user-select: none; cursor: grab; }
.sl_stage.is-dragging { cursor: grabbing; }
.sl_track { display: flex; height: 100%; will-change: transform; }
.sl_slide { flex: 0 0 100%; height: 100%; position: relative; }
.sl_slide img, .sl_slide video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.sl_bar { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; gap: 1rem; }
.sl_counter { color: var(--pj-fg-2); }
.sl_counter b { color: var(--pj-fg); font-weight: 500; }
.sl_nav { display: flex; gap: .4rem; }
.sl_btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--pj-line); display: flex; align-items: center; justify-content: center; transition: background-color .35s, color .35s, border-color .35s; }
.sl_btn svg { width: .95rem; height: .95rem; }
.sl_btn:hover, .sl_btn:focus-visible { background: var(--pj-fg); color: var(--pj-bg); border-color: var(--pj-fg); outline: none; }
.sl_stage { overscroll-behavior-x: contain; }

.pj_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem 2.5rem; margin-top: 2.75rem; }
.pj_cell { padding-top: 1rem; border-top: 1px solid var(--pj-line); font-size: 1rem; line-height: 1.5; }
.pj_cell_k { color: var(--pj-fg-2); margin-bottom: .5rem; font-size: .9rem; }
/* compétences en étiquettes : fond teinté de la couleur du texte, angles à peine arrondis, pas de contour (ce ne sont pas des boutons) */
.pj_tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pj_tags li { font-size: .84rem; line-height: 1; padding: .42rem .55rem .4rem; border-radius: .3rem; background: color-mix(in srgb, var(--pj-fg) 9%, transparent); white-space: nowrap; }
.pj_meta { margin: .8rem 0 0; font-size: .84rem; color: var(--pj-fg-2); }
.pj_cell cite { display: block; margin-top: .5rem; font-style: normal; color: var(--pj-fg-2); }
.case_link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: 1rem; font-weight: 500; }
.case_link svg { width: .85rem; height: .85rem; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.case_link:hover svg { transform: translateX(.25rem); }

/* ===== sections communes ===== */
.sec_head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.sec_title { font-size: clamp(2.25rem, 4.2vw, 4rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; margin: .9rem 0 1rem; text-wrap: balance; }
.sec_text { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); max-width: 36rem; }

/* ===== process : cinq temps, un filet qui se tire au-dessus de chacun ===== */
.process { background: var(--page); color: var(--ink); padding: calc(clamp(6rem, 14vh, 9rem) + var(--card-r)) 0 calc(clamp(6rem, 14vh, 9rem) + var(--card-r)); }
.process .lab { color: var(--ink-2); }
/* frise horizontale : une seule barre continue, arrondie aux deux bouts, fines séparations entre les étapes ;
   chaque segment s'allonge depuis la gauche à son tour, ce qui remplit la barre d'un trait */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.step_bar { height: 3.4rem; background: var(--ink); color: var(--white); display: flex; align-items: center; gap: .55rem; padding: 0 1rem; transform-origin: left; white-space: nowrap; overflow: hidden; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }
.step:first-child .step_bar { border-radius: 100vw 0 0 100vw; padding-left: 1.4rem; box-shadow: none; }
.step:last-child .step_bar { border-radius: 0 100vw 100vw 0; padding-right: 1.4rem; }
.step.is-loop .step_bar { background: var(--lime); color: var(--ink); box-shadow: none; }
.step_num { font-size: .8rem; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
.step_title { font-size: .92rem; font-weight: 600; letter-spacing: -.015em; }
.step_text { font-size: .9rem; line-height: 1.45; color: var(--ink-2); margin: .9rem 1rem 0 1rem; }
.step:first-child .step_text { margin-left: 1.4rem; }

@media (max-width: 1300px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
  .step:first-child .step_bar, .step:last-child .step_bar { border-radius: 0; padding-left: 1rem; padding-right: 1rem; }
  .step:nth-child(3n + 1) .step_bar { border-radius: 100vw 0 0 100vw; padding-left: 1.4rem; box-shadow: none; }
  .step:nth-child(3n) .step_bar { border-radius: 0 100vw 100vw 0; padding-right: 1.4rem; }
  .step:first-child .step_text { margin-left: 1rem; }
  .step:nth-child(3n + 1) .step_text { margin-left: 1.4rem; }
}

/* ===== à propos (aperçu) ===== */
.about { background: var(--white); color: var(--ink); padding: calc(clamp(6rem, 14vh, 9rem) + var(--card-r)) 0 calc(clamp(6rem, 14vh, 9rem) + var(--card-r)); }
.about_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: end; }
.about_portrait { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #e9e9e6; }
.about_portrait img { width: 100%; height: 100%; object-fit: cover; }
.about_body .lab { color: var(--ink-2); }
.about_text { font-size: 1.05rem; line-height: 1.55; max-width: 36rem; }
.about_text + .about_text { margin-top: .9rem; }
.about_body .btn { margin-top: 2rem; }

/* ===== contact : noir, le formulaire à droite ===== */
.contact { background: var(--black); color: var(--white); padding: calc(clamp(6rem, 14vh, 9rem) + var(--card-r)) 0 clamp(4rem, 10vh, 6rem); }
.contact .lab, .contact .sec_text { color: var(--white-2); }
.contact_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; }
.contact_links { margin-top: 2rem; display: grid; gap: .7rem; justify-items: start; font-size: 1.05rem; }
.contact_links a { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .15rem; border-bottom: 1px solid var(--white-line); transition: border-color .3s; }
.contact_links a:hover { border-color: var(--white); }
.contact_links svg { width: .9rem; height: .9rem; }
.form { display: grid; gap: 1.4rem; }
.form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: grid; gap: .35rem; }
.field > span { font-size: .85rem; color: var(--white-2); }
.field em { font-style: normal; opacity: .6; }
.field input, .field textarea { font: inherit; font-size: 1.05rem; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--white-line); border-radius: 0; padding: .55rem 0; outline: none; transition: border-color .3s; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--white); }
.field.is-error input, .field.is-error textarea { border-color: #ff8a80; }
.field.is-error > span { color: #ff8a80; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { width: 100%; padding: 0; margin-bottom: .6rem; font-size: .85rem; color: var(--white-2); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; border-radius: 100vw; border: 1px solid var(--white-line); font-size: .9rem; transition: background-color .3s, color .3s, border-color .3s; }
.chip:hover span { border-color: var(--white); }
.chip input:checked + span { background: var(--lime); color: var(--black); border-color: var(--lime); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.form_foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .4rem; }
.form_note { font-size: .85rem; color: var(--white-2); }
.form_note.is-error { color: #ff8a80; }

/* ===== footer : noir, dans la continuité du contact ===== */
.footer { background: var(--black); color: var(--white); padding-bottom: 2rem; }
.footer_cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 3rem; border-top: 1px solid var(--white-line); }
.footer_cols .lab { color: var(--white-2); margin-bottom: 1rem; }
.footer ul { display: grid; gap: .45rem; font-size: 1rem; }
.footer ul a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16, 1, .3, 1); }
.footer ul a:hover { background-size: 100% 1px; }
.footer_word { font-weight: 700; letter-spacing: -.045em; line-height: .8; white-space: nowrap; margin: clamp(3rem, 8vh, 5rem) 0 0; padding-bottom: .26em; font-size: 12vw; } /* la marge basse laisse passer les jambages du p et du y */
.footer_bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--white-line); font-size: .85rem; color: var(--white-2); }
.footer_legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer_legal a { display: inline-flex; align-items: center; gap: .35rem; transition: color .3s; }
.footer_legal a:hover { color: var(--white); }
.footer_legal svg { width: .8rem; height: .8rem; }

@media (max-width: 991px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem .4rem; }
  .about_grid, .contact_grid { grid-template-columns: 1fr; }
  .form_done { grid-column: auto; }
  .about_portrait { max-width: 26rem; }
}

@media (max-width: 767px) {
  .nav_inner { height: 4rem; }
  .nav_links { gap: 1.1rem; font-size: .9rem; }
  .hero_head { grid-template-columns: 1fr; }
  .hero_head { padding-top: 8rem; padding-bottom: 2.25rem; }
  .reel_sound { bottom: .75rem; height: 2.3rem; padding: 0 .85rem; font-size: .85rem; }
  .hero_facts { gap: .3rem 1.5rem; }
  .pj { padding: 3.5rem 0 4rem; }
  .pj_grid { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2rem; }
  .manifesto_line { font-size: .8rem; }
  .manifesto_step:nth-child(3), .manifesto_step:nth-child(5) { display: none; }
  .sl_btn { width: 2.25rem; height: 2.25rem; }
  .steps { grid-template-columns: 1fr; gap: 1.1rem; }
  .step .step_bar, .step:nth-child(n) .step_bar { height: 3rem; border-radius: 100vw; padding: 0 1.1rem; box-shadow: none; }
  .step:nth-child(n) .step_text { margin: .6rem 1.1rem 0; }
  .form_row { grid-template-columns: 1fr; }
  .footer_cols { grid-template-columns: 1fr 1fr; }
}

/* ===== 404 ===== */
.hero.nf { min-height: 72vh; display: flex; align-items: center; }
.nf_inner { max-width: 44rem; padding: 6rem 0 4rem; }
.nf_inner .lab { margin-bottom: 1.2rem; }
.nf_inner .hero_title { font-size: clamp(2.4rem, 5vw, 4.4rem); margin: 0 0 1.4rem; }
.nf_inner .hero_text { margin: 0 0 1.8rem; max-width: 36rem; }

/* ===== formulaire : envoi réel ===== */
.form[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }
.form_done { grid-column: 2; align-self: center; padding: 2.5rem; border: 1px solid var(--line-dark, rgba(255, 255, 255, .14)); border-radius: var(--card-r, 1.5rem); }
.form_done h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; margin: .8rem 0 .8rem; }
.form_done p { color: var(--ink-3, rgba(255, 255, 255, .7)); line-height: 1.5; margin: 0 0 1.6rem; max-width: 30rem; }

/* ===== pages légales ===== */
.legal_head { padding: clamp(9rem, 22vh, 12rem) 0 calc(clamp(4rem, 10vh, 6rem) + var(--card-r)); }
.legal_head .hero_title { font-size: clamp(2.6rem, 5vw, 4.4rem); margin: 1.2rem 0 1.2rem; }
.legal_head .hero_text { max-width: 36rem; margin: 0; }
.legal { background: var(--page); color: var(--ink); padding: clamp(4rem, 10vh, 6.5rem) 0 calc(clamp(4rem, 10vh, 6.5rem) + var(--card-r)); }
.legal_body { max-width: 46rem; }
.legal_body h2 { scroll-margin-top: 6rem; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 3rem 0 1rem; }
.legal_body h2:first-child { margin-top: 0; }
.legal_body p, .legal_body dd { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 1rem; }
.legal_body dl { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: .65rem 1.5rem; margin: 0; }
.legal_body dt { font-weight: 500; }
.legal_body dd { margin: 0; }
.legal_body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 767px) { .legal_body dl { grid-template-columns: 1fr; gap: .2rem; } .legal_body dd { margin-bottom: .8rem; } }

/* ===== cookies : bandeau en bas à gauche, deux boutons de même taille ===== */
.ck { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 80; width: min(24rem, calc(100vw - 2 * var(--gutter))); padding: 1.25rem 1.25rem 1.1rem; border-radius: 1rem; background: var(--black); color: var(--white); border: 1px solid var(--white-line); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28); opacity: 0; transform: translateY(1rem); visibility: hidden; transition: opacity .4s, transform .4s, visibility 0s .4s; }
.ck.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .4s, transform .4s; }
.ck_t { margin: 0 0 .4rem; font-size: 1rem; font-weight: 600; }
.ck_d { margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; color: var(--white-2); }
.ck_d a { color: var(--white); text-decoration: underline; text-underline-offset: .2em; }
.ck_btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ck_b { display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; text-align: center; height: 2.6rem; border-radius: 100vw; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; border: 1px solid var(--white-line); background: transparent; color: var(--white); transition: background-color .3s, color .3s, border-color .3s; }
.ck_b:hover { border-color: var(--white); }
.ck_b.is-ok { background: var(--lime); border-color: var(--lime); color: var(--black); }
.ck_b.is-ok:hover { background: var(--white); border-color: var(--white); }
.ck_b:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* tableau des cookies et boutons de choix sur la page Confidentialité */
.legal_table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.25rem; font-size: .92rem; }
.legal_table th, .legal_table td { text-align: left; vertical-align: top; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid rgba(17, 17, 17, .12); }
.legal_table th { font-weight: 500; color: var(--ink); }
.legal_table td { color: var(--ink-2); line-height: 1.5; }
.legal_table td:first-child { color: var(--ink); white-space: nowrap; }
.legal_btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.btn.is-ghost-dark { background: transparent; color: var(--ink); border: 1px solid rgba(17, 17, 17, .25); }
.btn.is-ghost-dark:hover { border-color: var(--ink); }
@media (max-width: 767px) { .legal_table td:first-child { white-space: normal; } }