/* ==========================================================================
   Accueil visiteur d'eve (lot tools/accueil-integration-20260928) : port de la V13 gelée (gel/prototype-v13.tar,
   src/styles.css), style de la maquette « accueil visiteur » : crème, sable et papier, encre presque noire, un seul
   rouge-orange, titres Big Shoulders en capitales, texte Figtree, notes manuscrites Caveat Brush. Thème clair ou sombre
   selon le système seulement (data-theme posé par le gabarit et suivi par contrejour-accueil.js).
   Retirés par rapport à la V13 : vert du labo, labo, écrans d'ancien compte et de charte, vignettes du compteur,
   « Chiffres d'exemple », « Exemple », lien « ancien site ».
   Lot accueil-inscription-20260929 (B) : tiroir de compte (coquille, étapes, formulaires, petit message) et pages de
   compte (bienvenue, confirmation, nouveau mot de passe), portés de la V13 ; cadrages des photos inversées (§8).
   Ajoutés : bulle de la liste des villes avec la mention OpenStreetMap, « Profils d'illustration », écran 18+ en
   document à part (contrejour_accueil_18.html) sur fond uni. Empreinte du nom posée par release.py (prepare).
   ========================================================================== */

@font-face { font-family: 'Big Shoulders'; src: url('../fonts/accueil/big-shoulders-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('../fonts/accueil/big-shoulders-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; src: url('../fonts/accueil/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/accueil/figtree-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat Brush'; src: url('../fonts/accueil/caveat-brush-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --script: 'Caveat Brush', 'Segoe Print', 'Comic Sans MS', cursive;
  /* Fonds */
  --creme: #F4EEE4; --sable: #EAE1D3; --papier: #FFFCF6; --gres: #E6DED1; --nuit: #121722; --encre: #17140F;
  /* Textes */
  --texte: #17140F; --texte-2: #4A443B; --texte-3: #6B6358; --placeholder: #756C60; --texte-nuit: #B9C0CC; --texte-pied: #B9B2A6;
  /* Accent rouge-orange (maquette) */
  --accent: #D63A1B; --accent-texte: #B42D13; --accent-fort: #8F220E; --accent-pale: #FFE3D6; --peche: #FFD2BF;
  --accent-nuit: #FF8A6B; --accent-nuit-fond: rgb(255 138 107 / .14); --logo-nuit: #FF6A45; --logo-nuit-tache: #3A2119;
  --glow: rgb(214 58 27 / .75);
  /* Pavés d'encre (compteur, bande défilante, pied, messages) : sombres dans les deux thèmes */
  --ink: #17140F; --ink-2: #2A251D; --on-ink: #F4EEE4; --foot: #17140F;
  --nav-bg: rgb(244 238 228 / .94); --sticky-bg: rgb(244 238 228 / .96);
  --t2: #4A443B; /* texte secondaire du thème, repris sur les cartes « papier » posées sur la nuit */
  --accent-survol: #B42D13; /* fond des boutons au survol (texte blanc) */
  --accent-titre: var(--accent); /* mots en couleur des grands titres, note manuscrite, ovale */
  --logo-crew: var(--accent); --logo-tache: var(--peche);
  --focus: var(--accent);
  --ombre: 23 20 15; /* teinte des ombres : rgb(var(--ombre) / α) */
  --voile: rgb(18 23 34 / .62); --voile-l: rgb(18 23 34 / .56); --poignee: #CFC6B8;
  --o-feuille: 0 -24px 60px rgb(0 0 0 / .35); --o-feuille-l: -30px 0 80px rgb(0 0 0 / .35);
  --t-box: rgb(23 20 15 / .55); --t03: rgb(23 20 15 / .03);
  /* États */
  --dispo: #2FB36B; --succes: #17683E; --erreur: #A61B1B; --piste: #DCD3C5;
  /* Traits : de l'encre en transparence */
  --t08: rgb(23 20 15 / .08); --t10: rgb(23 20 15 / .10); --t12: rgb(23 20 15 / .12); --t14: rgb(23 20 15 / .14);
  --t16: rgb(23 20 15 / .16); --t20: rgb(23 20 15 / .20); --t22: rgb(23 20 15 / .22); --t30: rgb(23 20 15 / .30);
  --t-nuit: rgb(244 238 228 / .14);
  --t-champ: rgb(23 20 15 / .50); /* bord des champs : 3,4:1 sur papier (WCAG 1.4.11 ; .42 ne donnait que 2,7:1) */
  /* Ombres longues, décalées vers le bas */
  --o-cta: 0 12px 26px -12px var(--glow);
  --o-blanc: 0 16px 30px -16px rgb(23 20 15 / .6);
  --o-champ: 0 16px 34px -20px rgb(23 20 15 / .5);
  --o-bulle: 0 18px 40px -20px rgb(23 20 15 / .5);
  --o-photo-l: 0 30px 60px -28px rgb(23 20 15 / .55);
  --o-photo-s: 0 22px 44px -24px rgb(23 20 15 / .6);
  --o-carte: 0 34px 70px -30px rgb(23 20 15 / .6);
  --o-nuit: 0 24px 50px -20px rgb(0 0 0 / .6);
  /* Rayons */
  --r-pill: 999px; --r-photo: 30px; --r-xl: 26px; --r-l: 24px; --r-m: 22px; --r-card: 20px; --r-s: 16px; --r-xs: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
/* ---------- Thème sombre ----------
   data-theme="dark" est posé avant le premier rendu par le script du <head> (prefers-color-scheme) et suivi en direct
   par contrejour-accueil.js. Brun-noir chaud plutôt que gris froid. --accent, --accent-survol, --accent-nuit, --logo-nuit,
   --logo-nuit-tache, --on-ink et --nuit restent ceux du clair : le sombre en dérive par var().
   Contrastes mesurés en V13 (96 paires) : aucun échec ; blanc sur bouton 4,7:1, bord des champs 3,5:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --creme: #15120E; --sable: #1E1A15; --papier: #29231C; --gres: #352D24;
  --encre: #F3ECE1;
  --texte: #F3ECE1; --texte-2: #CEC5B7; --texte-3: #A59C8E; --placeholder: #9A9183; --texte-pied: #B9B2A6;
  --t2: #CEC5B7;
  --accent-texte: var(--accent-nuit); --accent-titre: var(--logo-nuit); --accent-fort: #FFB29C; --accent-pale: #3A2119;
  --peche: var(--logo-nuit-tache);
  --logo-crew: var(--logo-nuit); --logo-tache: var(--logo-nuit-tache);
  --focus: var(--accent-nuit);
  --glow: rgb(214 58 27 / .45);
  --ink: #221C16; --ink-2: #2E271F; --foot: #0D0B08;
  --nav-bg: rgb(21 18 14 / .94); --sticky-bg: rgb(21 18 14 / .96);
  --succes: #62CC8F; --erreur: #FF7D86; --piste: #3A3229;
  --t03: rgb(243 236 225 / .04);
  --t08: rgb(243 236 225 / .08); --t10: rgb(243 236 225 / .10); --t12: rgb(243 236 225 / .12); --t14: rgb(243 236 225 / .14);
  --t16: rgb(243 236 225 / .16); --t20: rgb(243 236 225 / .20); --t22: rgb(243 236 225 / .22); --t30: rgb(243 236 225 / .30);
  --t-champ: rgb(243 236 225 / .42); --t-box: rgb(243 236 225 / .55);
  --voile: rgb(0 0 0 / .72); --voile-l: rgb(0 0 0 / .66); --poignee: #4F463B;
  --ombre: 0 0 0;
  --o-blanc: 0 16px 30px -16px rgb(0 0 0 / .7);
  --o-champ: 0 16px 34px -20px rgb(0 0 0 / .7);
  --o-bulle: 0 18px 40px -20px rgb(0 0 0 / .75), 0 0 0 1px rgb(243 236 225 / .08);
  --o-photo-l: 0 30px 60px -28px rgb(0 0 0 / .8);
  --o-photo-s: 0 22px 44px -24px rgb(0 0 0 / .8);
  --o-carte: 0 34px 70px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(243 236 225 / .08);
  --o-nuit: 0 24px 50px -20px rgb(0 0 0 / .7);
  --o-feuille: 0 -24px 60px rgb(0 0 0 / .6), 0 0 0 1px rgb(243 236 225 / .10);
  --o-feuille-l: -30px 0 80px rgb(0 0 0 / .6), 0 0 0 1px rgb(243 236 225 / .10);
}
:root[data-theme="dark"] .night { border-block: 1px solid var(--t-nuit); }
:root[data-theme="dark"] .nav.is-solid { box-shadow: 0 1px 0 var(--t10), 0 6px 20px -12px rgb(0 0 0 / .7); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
html.has-sticky { scroll-padding-bottom: 96px; }
html.sheet-open { overflow: hidden; }
body { margin: 0; background: var(--creme); color: var(--texte); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent-fort); }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--focus-ring, var(--focus)); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 80px; } }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dispo); }
.night { --texte: #F4EEE4; --texte-2: var(--texte-nuit); --texte-3: #8E97A6; background: var(--nuit); color: #F4EEE4; }

/* ---------- Typographie ---------- */
.h1, .h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; text-wrap: balance; }
.h1 { font-size: clamp(58px, calc(32px + 6.67vw), 128px); line-height: .86; }
.h2 { font-size: clamp(44px, calc(33px + 2.86vw), 76px); line-height: .98; }
.h1 .accent, .h2 .accent { display: block; }
.h1__comma { display: inline-block; transform: translateY(-.14em); } /* sinon la virgule de « Viens, » descend dans la ligne suivante */
.h2--xl { font-size: clamp(56px, calc(32.2px + 6.1vw), 120px); line-height: .86; }
.accent { color: var(--accent-titre); }
.night .accent { color: var(--accent-nuit); }
.lead { max-width: 36em; margin-top: 14px; color: var(--texte-2); font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 900px) { .lead { margin-top: 20px; font-size: 19px; line-height: 1.55; } }
.script-tag { display: inline-block; padding: 6px 14px 8px; border-radius: 14px; background: var(--accent); color: #FFFFFF; font-family: var(--script); font-size: 24px; line-height: 1; white-space: nowrap; transform: rotate(-4deg); box-shadow: 0 14px 30px -14px rgb(var(--ombre) / .6); }

/* ---------- Boutons (pilules, flèche à droite) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-pill); font: 800 16px/1.15 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .i { width: 20px; height: 20px; stroke-width: 2.4; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn--xl { min-height: 60px; padding: 0 30px; font-size: 18px; }
.btn--block { width: 100%; }
.btn--cta { background: var(--accent); color: #FFFFFF; }
.btn--cta:hover { background: var(--accent-survol); color: #FFFFFF; }
.btn--cta.btn--lg, .btn--cta.btn--block { box-shadow: var(--o-cta); }
.btn--white { background: #FFFFFF; color: #17140F; box-shadow: var(--o-blanc); }
.btn--white:hover { color: #17140F; background: #FFF6EE; }
.btn--white .i { color: var(--accent); }
.btn--line { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--t22); font-weight: 700; }
.btn--line:hover { color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.btn--ghost { background: var(--sable); color: var(--encre); font-weight: 700; }
.btn--text { min-height: 44px; padding: 0 8px; background: none; color: var(--accent-texte); text-decoration: underline; font-weight: 700; }
.btn[aria-disabled="true"] { background: var(--piste); color: var(--texte-3); box-shadow: none; transform: none; cursor: default; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sable); color: var(--encre); text-decoration: none; cursor: pointer; }
.iconbtn:hover { background: var(--gres); color: var(--encre); }
.iconbtn .i { width: 20px; height: 20px; stroke-width: 2.4; }

/* ---------- Logo (tracé servi par eve) ---------- */
.brand { display: inline-flex; align-items: center; line-height: 0; color: var(--encre); text-decoration: none; }
.brand svg { display: block; width: 184px; height: auto; overflow: visible; fill: currentColor; }
.brand .cj-brand-tache { fill: var(--logo-tache); }
.brand .cj-brand-crew { fill: var(--logo-crew); }
.brand .cj-brand-tache-drop { opacity: 0; }
.brand .cj-brand-b--full { display: none; }
@media (min-width: 900px) { .brand svg { width: 258px; } .brand .cj-brand-b--full { display: block; } .brand .cj-brand-b--min { display: none; } }

/* ---------- Barre du haut ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 16px 0 20px; transition: background-color .25s, box-shadow .25s; }
.nav.is-solid { background: var(--nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--t10), 0 6px 20px -12px rgb(var(--ombre) / .35); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__join { display: none; }
@media (max-width: 899px) {
  .nav:not(.is-solid) { --focus-ring: #FFFFFF; }
  .nav:not(.is-solid) .brand { color: #FFFFFF; }
  .nav:not(.is-solid) .brand .cj-brand-crew { fill: var(--accent-nuit); }
  .nav:not(.is-solid) .brand .cj-brand-tache { fill: rgb(0 0 0 / .3); }
  .nav:not(.is-solid) .nav__login { background: rgb(0 0 0 / .22); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@media (min-width: 900px) { .nav { height: 84px; padding: 0 80px; } .nav__login { min-height: 46px; padding: 0 20px; font-size: 15px; } .nav__join { display: inline-flex; min-height: 46px; padding: 0 22px; font-size: 15px; } }
/* Sélecteur de langue de l'en-tête (demande du 30/09, CONCEPTION §19) : « FR ▾ » comme « Me connecter », menu comme la
   liste des villes ; présent seulement quand plusieurs langues sont servies. */
.nav__langue { position: relative; }
.nav__langue-bouton { gap: 4px; padding: 0 10px 0 14px; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.nav__langue-bouton::-webkit-details-marker { display: none; }
.nav__langue-bouton::marker { content: ""; }
.nav__chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav__langue[open] .nav__chevron { transform: rotate(180deg); }
.nav__langue-liste { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 176px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--papier); color: var(--encre); box-shadow: 0 24px 50px -16px rgb(var(--ombre) / .5), 0 0 0 1px var(--t10); }
.nav__langue-liste a, .nav__langue-liste span[aria-current] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 10px; color: var(--encre); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav__langue-liste a::before, .nav__langue-liste span[aria-current]::before { content: ""; flex: 0 0 16px; text-align: center; }
.nav__langue-liste span[aria-current] { font-weight: 800; }
.nav__langue-liste span[aria-current]::before { content: "\2713"; color: var(--accent-texte); }
.nav__langue-liste a:hover, .nav__langue-liste a:focus-visible { background: var(--sable); }
@media (max-width: 899px) { .nav:not(.is-solid) .nav__langue-bouton { background: rgb(0 0 0 / .22); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }
@media (min-width: 900px) { .nav__langue-bouton { min-height: 46px; font-size: 15px; } }
/* Téléphone : bouton resserré ; le logo « branle entre potes » (184 px) rétrécit avec le sélecteur pour que « Me
   connecter » tienne (390 px : 150 ; 379 px et moins : 136, marges réduites ; 339 px et moins : 104). batecrew (101 px)
   garde sa taille. Sans sélecteur (une seule langue servie), rien ne change. */
@media (max-width: 899px) { .nav__langue-bouton { gap: 2px; padding: 0 8px 0 11px; } .nav__chevron { width: 14px; height: 14px; } }
@media (max-width: 429px) { .nav:has(.nav__langue) .brand .cj-brand-word--bep { width: 150px; } }
@media (max-width: 379px) { .nav:has(.nav__langue) { gap: 8px; padding: 0 12px 0 14px; } .nav:has(.nav__langue) .nav__actions { gap: 6px; } .nav:has(.nav__langue) .brand .cj-brand-word--bep { width: 136px; } }
@media (max-width: 339px) { .nav:has(.nav__langue) .brand .cj-brand-word--bep { width: 104px; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0 0 30px; overflow: hidden; }
.hero__in { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0; }
.hero__txt { min-width: 0; }
.hero__txt > :not(.hero__top) { margin-left: 20px; margin-right: 20px; }
/* Téléphone et tablette : la photo fait toute la largeur, passe sous la barre du haut et porte le titre */
.hero__top { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, calc(100svh - 190px), 600px); padding: 150px 20px 24px; overflow: hidden; background: var(--ink); }
.hero__mimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos-m, 50% 18%); }
.hero__top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 150px; background: linear-gradient(180deg, rgb(12 10 8 / .6) 0%, rgb(12 10 8 / 0) 100%); }
.hero__top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 360px; background: linear-gradient(180deg, rgb(18 16 13 / 0) 0%, rgb(18 16 13 / .6) 40%, rgb(18 16 13 / .94) 100%); }
/* Hauteur de l'autocollant selon la photo (--tag-m, posé par app.js) : il ne doit pas tomber sur un visage. Sous 340 px,
   le titre remonte sur la photo et il n'y a plus de place : il est masqué (copie sr-only dans le titre). */
.script-tag--m { position: absolute; top: var(--tag-m, 40%); right: 16px; }
@media (max-width: 339px) { .script-tag--m { display: none; } }
.hero__head { position: relative; color: #FFFFFF; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 12px; padding: 0 14px 0 12px; border-radius: var(--r-pill); background: rgb(18 16 13 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 14px; font-weight: 700; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dispo); box-shadow: 0 0 0 4px rgb(47 179 107 / .2); }
.hero .h1 { color: #FFFFFF; }
.hero .h1 .accent { color: var(--accent-nuit); }
.hero__sub { max-width: 34em; margin-top: 18px; color: var(--texte-2); font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.hero__ask { max-width: 650px; margin-top: 18px; }
.proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; color: var(--texte-2); font-size: 14px; line-height: 1.35; }
.proof b { color: var(--encre); font-weight: 800; }
.proof__faces { display: flex; flex: none; }
.proof__faces img { width: 38px; height: 38px; margin-left: -11px; border: 2.5px solid var(--creme); border-radius: 50%; object-fit: cover; }
.proof__faces img:first-child { margin-left: 0; }
.collage { display: none; }
@media (max-width: 699px) {
  /* Téléphone : la ville et le bouton juste sous la photo, la phrase après (le bouton reste dans l'écran visible de Safari) */
  .hero__txt { display: flex; flex-direction: column; }
  .hero__ask { order: 1; }
  .hero__sub { order: 2; }
  .proof { order: 3; }
}
@media (min-width: 700px) and (max-width: 899px) { .hero__top { min-height: min(78svh, 760px); padding: 160px max(40px, calc(50% - 320px)) 40px; } .script-tag--m { top: 100px; right: max(40px, calc(50% - 320px)); } .hero .h1 { font-size: 92px; } .hero__txt > :not(.hero__top) { margin-left: max(40px, calc(50% - 320px)); margin-right: max(40px, calc(50% - 320px)); } }
/* À partir de 900 px (tablette paysage comprise) : le collage, comme sur ordinateur (MP-04) */
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: min(100svh, 900px); padding: 104px 0 60px; }
  .hero__top { display: block; min-height: 0; padding: 0; }
  .hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 24px; align-items: center; padding: 0 60px 0 80px; }
  .hero__txt > :not(.hero__top) { margin-left: 0; margin-right: 0; }
  .hero__top { height: auto; overflow: visible; border-radius: 0; background: none; isolation: auto; }
  .hero__mimg, .hero__top::before, .hero__top::after, .script-tag--m { display: none; }
  .hero__head { position: static; color: var(--encre); }
  .hero .h1 { color: var(--encre); font-size: clamp(96px, calc(8.5vw - 6px), 128px); }
  .hero .h1 .accent { color: var(--accent-titre); }
  .chip { height: 36px; margin-bottom: 24px; padding: 0 16px 0 14px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--t12); color: var(--texte-2); font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip__dot { width: 8px; height: 8px; }
  .hero__sub { max-width: 600px; margin-top: 28px; font-size: 20px; line-height: 1.5; }
  .hero__ask { margin-top: 30px; }
  .proof { justify-content: flex-start; margin-top: 28px; font-size: 15px; }
  .proof__faces img { width: 46px; height: 46px; margin-left: -13px; border-width: 3px; }
  .collage { position: relative; display: block; width: 604px; height: 760px; margin-right: -44px; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) 400px; padding: 0 40px; }
  .hero .h1 { font-size: 84px; }
  .collage { transform: scale(.64); transform-origin: 0 50%; margin-block: -130px; }
  .collage .bubble { transform: rotate(-2deg) scale(1.3); transform-origin: 0 0; }
}
@media (min-width: 1180px) { .hero { padding: 92px 0 12px; min-height: min(calc(100svh - 48px), 860px); } }
@media (min-width: 1180px) and (max-width: 1379px) { .hero__in { grid-template-columns: minmax(0, 1fr) 480px; } .collage { transform: scale(.82); transform-origin: 0 50%; margin-block: -60px; } }
@media (min-width: 1380px) { .hero__in { padding-right: 80px; } .collage .script-note { left: 300px; } }

/* Le collage (ordinateur) : objets posés à la main, bordure crème comme des tirages découpés */
.collage__blob { position: absolute; left: 42px; top: 226px; width: 600px; height: 430px; border-radius: 50%; background: var(--peche); }
.collage__dot { position: absolute; left: 34px; top: 194px; width: 30px; height: 30px; border-radius: 50%; background: var(--peche); }
.collage__dot--2 { left: 4px; top: 236px; width: 16px; height: 16px; }
.collage figure { position: absolute; overflow: hidden; border: 6px solid var(--creme); background: var(--sable); }
.collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage__main { left: 92px; top: 82px; width: 400px; height: 560px; border-radius: var(--r-photo); transform: rotate(2deg); box-shadow: var(--o-photo-l); }
.collage__main img { object-position: var(--collage-pos, 50% 30%); }
.collage__small { border-radius: var(--r-l); box-shadow: var(--o-photo-s); }
.collage__small--a { left: 368px; top: 4px; width: 236px; height: 190px; transform: rotate(6deg); }
.collage__small--a img { object-position: 40% 35%; }
.collage__small--b { left: 0; top: 548px; width: 300px; height: 200px; transform: rotate(-4deg); }
.collage__small--b img { object-position: 50% 30%; } /* trio entier (700 × 426) : ~6 % de la largeur rognés ; remplaçant v12-hero (portrait) cadré à 30 % */
.collage figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 11px; border-radius: var(--r-pill); background: rgb(23 20 15 / .8); color: #FFFFFF; font-size: 12.5px; font-weight: 700; }
.paper { background: var(--papier); color: var(--encre); }
.bubble { position: absolute; z-index: 2; left: 12px; top: 0; display: flex; gap: 10px; width: 300px; padding: 14px 16px; border-radius: 22px 22px 6px 22px; transform: rotate(-2deg); box-shadow: var(--o-bulle); font-size: 16px; font-weight: 600; line-height: 1.4; }
.bubble img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.bubble small { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--texte-3); font-size: 12.5px; font-weight: 700; }
.script-note { position: absolute; z-index: 2; left: 322px; top: 684px; color: var(--accent-titre); font-family: var(--script); font-size: 40px; line-height: 1; white-space: nowrap; transform: rotate(-6deg); }
.script-note svg { position: absolute; left: 120px; bottom: 100%; width: 80px; height: 72px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- La ville du hero et le compteur ---------- */
.search__q { display: block; margin-bottom: 10px; color: var(--encre); font-size: 16px; font-weight: 800; }
.search__box { display: flex; flex-direction: column; gap: 10px; }
.search__combo { position: relative; min-width: 0; }
.search__pin { position: absolute; z-index: 1; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--texte-3); pointer-events: none; }
.search__input { width: 100%; min-height: 56px; padding: 0 56px 0 48px; border: 2px solid var(--encre); border-radius: var(--r-pill); background: var(--papier); color: var(--encre); font: 500 17px var(--font); }
.search__input::placeholder { color: var(--placeholder); opacity: 1; }
.search__input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.search__loc { position: absolute; z-index: 1; right: 6px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: var(--sable); color: var(--encre); cursor: pointer; }
.search__loc:hover { background: var(--gres); }
.search__loc .i { width: 20px; height: 20px; }
.search__loc.is-busy { animation: locPulse 1s ease-in-out infinite; }
@keyframes locPulse { 50% { opacity: .45; } }
.search__go { min-height: 56px; font-size: 17px; box-shadow: var(--o-cta); }
/* Libellé long (« Voir le nombre de potes potentiels ») : il tient dans la pastille jusqu'à 320 px. */
@media (max-width: 359px) { .search__go { padding-inline: 16px; font-size: 15px; } }
.search__note { margin-top: 12px; color: var(--texte-2); font-size: 13.5px; font-weight: 600; text-align: center; }
.search__note.is-warn { color: var(--erreur); font-weight: 800; }
@media (min-width: 700px) {
  .search__box { flex-direction: row; align-items: center; gap: 12px; padding: 6px 6px 6px 0; border: 2px solid var(--encre); border-radius: var(--r-pill); background: var(--papier); box-shadow: var(--o-champ); }
  .search__box:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
  .search__combo { flex: 1; }
  .search__pin { left: 22px; width: 22px; height: 22px; margin-top: -11px; }
  .search__q { margin-bottom: 12px; font-size: 18px; }
  .search__input { min-height: 54px; padding-left: 54px; padding-right: 54px; border: 0; background: none; font-size: 18px; }
  .search__loc { right: 2px; }
  .search__input:focus { outline: none; }
  .search__go { min-height: 54px; padding: 0 24px; box-shadow: none; }
  .search__note { margin-top: 16px; text-align: left; }
}
@media (min-width: 700px) and (max-width: 1379px) {
  .search__box { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none; box-shadow: none; }
  .search__box:focus-within { outline: none; }
  .search__input { border: 2px solid var(--encre); background: var(--papier); }
  .search__input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
  .search__loc { right: 6px; }
  .search__go { box-shadow: var(--o-cta); }
}
.count { padding: 22px 22px 18px; border-radius: var(--r-card); background: var(--ink); color: #FFFFFF; box-shadow: var(--o-carte); }
.count__head { display: block; margin: 0; font: inherit; }
.count__head > span { display: block; }
.count__head:focus { outline: none; }
.count__where { color: var(--accent-nuit); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.count__num { margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 34px + 1.4vw, 52px); line-height: .92; text-transform: uppercase; }
.count__km { margin-top: 6px; color: var(--texte-nuit); font-size: 15px; }
.count__facts { display: grid; gap: 6px; padding: 0; list-style: none; font-size: 15px; font-weight: 700; }
.count__facts li { display: flex; align-items: center; gap: 10px; text-wrap: pretty; }
.count__facts li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-nuit); }
.count__lock { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--texte-nuit); font-size: 13px; }
.count__rassure { margin-top: 10px; color: var(--accent-nuit); font-family: var(--script); font-size: 22px; line-height: 1.1; transform: rotate(-2deg); transform-origin: 0 50%; }
.count__lock .i { width: 16px; height: 16px; }
.count__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--t-nuit); }
.count__actions .btn--text { color: #FFFFFF; }
.count.is-new { animation: countIn .5s var(--ease) both; }
@keyframes countIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) { .count__actions .btn--cta { width: 100%; } }

/* ---------- Bandes inclinées : ruban rouge immobile, ruban d'encre qui défile ---------- */
.marquee-wrap { position: relative; }
.marquee { position: relative; height: 80px; overflow: hidden; }
.marquee__back, .marquee__front { position: absolute; left: -30px; right: -30px; top: 18px; height: 44px; }
.marquee__back { background: var(--accent); transform: rotate(3deg); }
.marquee__front { display: flex; align-items: center; overflow: hidden; padding-left: 40px; background: var(--ink); box-shadow: 0 0 0 1px rgb(255 255 255 / .06); transform: rotate(-3deg); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite paused; color: var(--on-ink); font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.marquee__track i { display: inline-block; width: 14px; height: 14px; background: var(--accent); font-size: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9l7.9 2.6l-7.9 2.6l-2.6 7.9l-2.6-7.9l-7.9-2.6l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9l7.9 2.6l-7.9 2.6l-2.6 7.9l-2.6-7.9l-7.9-2.6l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.marquee__track > * { margin-right: 16px; }
.marquee-wrap.is-on .marquee__track { animation-play-state: running; }
.marquee-wrap.is-paused .marquee__track, .marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__pause { position: absolute; z-index: 1; right: 12px; bottom: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--on-ink); border-radius: 50%; background: var(--ink); color: var(--on-ink); cursor: pointer; }
.marquee__pause .i { width: 18px; height: 18px; }
.marquee__pause:focus-visible { outline: 3px solid var(--on-ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
@media (max-width: 899px) { .marquee__front { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 40px)); mask: linear-gradient(90deg, #000 calc(100% - 90px), transparent calc(100% - 40px)); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .marquee { height: 110px; } .marquee__back, .marquee__front { left: -60px; right: -60px; top: 24px; height: 62px; } .marquee__back { transform: rotate(1.4deg); } .marquee__front { padding-left: 70px; transform: rotate(-1.4deg); } .marquee__track { font-size: 32px; letter-spacing: .02em; } .marquee__track > * { margin-right: 26px; } .marquee__pause { right: 24px; bottom: 12px; } .marquee__track i { width: 18px; height: 18px; } }

/* ---------- Sections ---------- */
.sec { padding: 44px 0; }
@media (min-width: 900px) { .sec { padding: 104px 0; } }

/* Ce que tu trouves ici : le fil dans un téléphone, six fonctions (maquette « accueil visiteur ») */
.reseau { overflow-x: clip; background: var(--sable); }
.reseau__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.reseau__in > * { min-width: 0; }
.reseau .h2 .accent { display: inline; }
.reseau__phone { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
.reseau__blob { position: absolute; top: 12%; left: 50%; width: min(520px, 118%); height: 74%; border-radius: 50%; background: var(--peche); transform: translateX(-50%); }
.feats { display: grid; gap: 22px 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .feats { grid-template-columns: 1fr 1fr; } }
.feats li { display: flex; gap: 16px; align-items: flex-start; color: var(--texte-2); font-size: 15px; line-height: 1.45; }
.feats li > span:last-child, .bubble span { text-wrap: pretty; }
.feats b { display: block; margin: 2px 0 4px; color: var(--encre); font-size: 18px; font-weight: 800; }
.feats__ic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: var(--papier); color: var(--accent-texte); }
.feats__ic .i { width: 24px; height: 24px; }
.reseau__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.reseau__cta p { color: var(--texte-2); font-size: 15px; line-height: 1.5; }
.star-note { color: var(--encre); font-weight: 700; }
@media (max-width: 599px) { .reseau__cta .btn { width: 100%; } }
@media (min-width: 1000px) {
  .reseau__in { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "phone head" "phone feats" "phone cta"; column-gap: clamp(56px, 6vw, 96px); row-gap: 36px; align-items: start; }
  .reseau__head { grid-area: head; }
  .reseau__phone { grid-area: phone; align-self: center; }
  .feats { grid-area: feats; }
  .reseau__cta { grid-area: cta; }
  .feats li { font-size: 16px; }
  .feats b { font-size: 20px; }
}
@media (min-width: 1000px) and (max-width: 1179px) {
  .reseau__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .reseau__in > * { grid-area: auto; }
  .feats li { font-size: 15px; }
  .feats b { font-size: 18px; }
}
@media (min-width: 1180px) and (max-width: 1239px) { .feats { grid-template-columns: 1fr; } }
/* Le téléphone : écran clair comme l'appli, couleurs fixes (fil d'exemple) */
.phone { position: relative; z-index: 1; width: 296px; height: 600px; padding: 10px; border-radius: 46px; background: #17140F; box-shadow: 0 50px 90px -40px rgb(var(--ombre) / .7), inset 0 0 0 2px #3A332A; transform: rotate(-3deg); }
@media (min-width: 1000px) { .phone { width: 330px; height: 668px; } }
/* Téléphone (sous 560 px), après les règles de base qu'il remplace : fonctions en deux colonnes, bas du téléphone effacé
   sous les fonctions, la carte d'apéro restant lisible au-dessus des onglets. */
@media (max-width: 559px) {
  .feats { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .feats li { flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
  .feats b { margin: 0 0 2px; font-size: 16px; }
  .feats__ic { width: 42px; height: 42px; border-radius: 13px; }
  .feats__ic .i { width: 21px; height: 21px; }
  .reseau__phone { margin: 0; }
  .phone { margin: -36px 0 -122px; -webkit-mask: linear-gradient(#000 84%, transparent 91%); mask: linear-gradient(#000 84%, transparent 91%); }
}
.phone__screen { position: relative; height: 100%; overflow: hidden; padding: 16px 12px 0; border-radius: 36px; background: #F4EEE4; color: #17140F; font-size: 12px; line-height: 1.35; }
.phone .i { width: 18px; height: 18px; }
.phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.phone__brand svg { display: block; width: 118px; height: auto; fill: #17140F; }
.phone__brand .cj-brand-crew { fill: var(--accent); }
.phone__brand .cj-brand-tache { fill: #FFD2BF; }
.phone__brand .cj-brand-tache-drop { opacity: 0; }
.phone__brand .cj-brand-b--full { display: none; }
.phone__icons { display: flex; align-items: center; gap: 12px; color: #4A443B; }
.phone__bell { position: relative; }
.phone__bell b, .phone__msg b { position: absolute; top: -6px; right: -7px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #FFFFFF; font-size: 10px; font-weight: 800; }
.phone__label { margin: 16px 4px 10px; color: #6B6358; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.phone__dispo { display: flex; gap: 10px; margin: 0; padding: 0 4px; list-style: none; }
.phone__dispo li { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 46px; color: #4A443B; font-size: 11px; font-weight: 700; }
.phone__av { position: relative; display: block; width: 46px; height: 46px; padding: 2px; border-radius: 50%; box-shadow: 0 0 0 2px #2FB36B; }
.phone__av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.phone__av em { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #17140F; box-shadow: 0 0 0 2px #F4EEE4; color: #3CC8E0; }
.phone__av em .i { width: 12px; height: 12px; stroke-width: 2.4; }
.phone__post { margin-top: 12px; padding: 12px; border-radius: 18px; background: #FFFCF6; box-shadow: 0 0 0 1px rgb(var(--ombre) / .06); }
.phone__who { display: flex; align-items: center; gap: 9px; }
.phone__who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.phone__who b { display: block; font-size: 12.5px; }
.phone__who small { display: block; color: #6B6358; font-size: 10.5px; }
.phone__text { margin-top: 8px; color: #2A251D; }
.phone__apero { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 14px; background: #FFE3D6; }
.phone__apero .date { width: 42px; height: 42px; border-radius: 11px; font-size: 15px; }
.phone__apero .date small { font-size: 9px; }
.phone__apero b { display: block; font-size: 12.5px; }
.phone__apero small { display: block; color: #4A443B; font-size: 10.5px; }
.phone__btn { display: block; margin-top: 8px; padding: 8px; border-radius: var(--r-pill); background: #17140F; color: #FFFFFF; font-size: 12px; font-weight: 800; text-align: center; }
@media (max-width: 999px) { .phone__btn { display: none; } }
.phone__pic { display: block; width: 100%; height: 100px; margin-top: 9px; border-radius: 12px; object-fit: cover; }
.phone__likes { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: #6B6358; font-size: 10.5px; font-weight: 700; }
.phone__likes .i { width: 13px; height: 13px; }
.phone__likes .i:first-child { color: var(--accent); fill: currentColor; }
.phone__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 2px; padding: 9px 12px 16px; background: #FFFCF6; box-shadow: 0 -1px 0 rgb(var(--ombre) / .1); }
.phone__tabs > span { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 3px; color: #6B6358; font-size: 10px; font-weight: 700; }
.phone__tabs > span.is-on { color: var(--accent); }
.phone__tabs .phone__msg { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #EAE1D3; color: #17140F; }
.phone__msg b { top: -3px; right: -3px; }

/* L'apéro branle */
.apero { overflow-x: clip; }
.apero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.apero__media { position: relative; }
.apero__photo { height: 230px; overflow: hidden; border-radius: var(--r-m); background: var(--sable); }
.apero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Les cinq potes (3:2) occupent toute la largeur, du premier au dernier visage : sur téléphone, le cadre suit la photo
   (390 px : 350 × 233, comme les 230 px d'avant ; 320 px : aucun visage coupé). */
@media (max-width: 639px) { .apero__photo { height: auto; aspect-ratio: 3 / 2; } }
.badge { position: absolute; z-index: 2; top: -22px; right: -8px; display: grid; place-content: center; width: 108px; height: 108px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .9; text-align: center; transform: rotate(-10deg); box-shadow: 0 14px 28px -14px var(--glow); }
.badge small { display: block; font-family: var(--font); font-size: 11px; font-weight: 800; line-height: 1.2; }
.acard { position: relative; z-index: 1; margin: -62px 10px 0; padding: 18px; border-radius: var(--r-l); box-shadow: var(--o-carte); }
.acard__top { display: flex; align-items: center; gap: 12px; }
.acard__top b { display: block; font-size: 17px; font-weight: 800; }
.acard__top small { display: block; color: var(--texte-3); font-size: 13.5px; }
.date { display: grid; place-content: center; flex: none; width: 52px; height: 58px; border-radius: 14px; background: var(--accent); color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 25px; line-height: .95; text-align: center; text-transform: uppercase; }
.date small, .acard__top .date small { display: block; color: inherit; font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.acard__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-xs); background: var(--creme); font-size: 14px; }
.acard__row span { color: var(--texte-2); font-weight: 600; }
.acard__row b { display: inline-flex; align-items: center; gap: 6px; }
.acard__row .i { width: 16px; height: 16px; color: var(--accent-texte); stroke-width: 3; }
.acard__who { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.acard__faces { display: flex; flex: none; }
.acard__faces img { width: 32px; height: 32px; margin-left: -9px; border: 2px solid var(--papier); border-radius: 50%; object-fit: cover; }
.acard__faces img:first-child { margin-left: 0; }
.acard__lock { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--texte-2); font-size: 14px; text-wrap: pretty; }
.acard__lock .i { width: 17px; height: 17px; color: var(--texte-3); }
/* « Notre concept ! » : une bulle de BD, fière d'elle (le seul autocollant de la section) */
.concept { margin: 0 0 22px; }
.concept__bulle { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px 11px 16px; border: 2.5px solid var(--encre); border-radius: 22px; background: var(--accent); color: #FFFFFF; font-family: var(--script); font-size: 28px; line-height: 1; transform: rotate(-4deg); box-shadow: 4px 4px 0 var(--encre); }
.concept__bulle::after { content: ''; position: absolute; left: 30px; bottom: -15px; width: 22px; height: 16px; background: var(--encre); clip-path: polygon(0 0, 100% 0, 15% 100%); }
.concept__bulle::before { content: ''; position: absolute; z-index: 1; left: 33px; bottom: -9px; width: 15px; height: 10px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 15% 100%); }
.concept__bulle .i { width: 22px; height: 22px; fill: #FFE08A; stroke: #FFE08A; stroke-width: 1.5; }
html.js .concept.is-in .concept__bulle { animation: bullePop .7s var(--ease) .15s both; }
@keyframes bullePop { 0% { transform: rotate(-4deg) scale(.6); } 60% { transform: rotate(-6deg) scale(1.08); } 100% { transform: rotate(-4deg) scale(1); } }
@media (min-width: 900px) { .concept { margin-bottom: 28px; } .concept__bulle { font-size: 32px; padding: 9px 24px 12px 18px; } }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 14px; padding: 0 14px; border-radius: var(--r-pill); background: var(--accent-pale); color: var(--accent-texte); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) { .pill { height: 36px; margin-bottom: 18px; padding: 0 16px; font-size: 13.5px; } }
.asteps { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.asteps li { position: relative; min-height: 30px; padding-left: 44px; color: var(--texte-2); font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }
.asteps li::before { content: '✓'; content: '✓' / ''; position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 800; }
.asteps b { color: var(--encre); font-weight: 800; }
@media (min-width: 900px) { .asteps { gap: 16px; margin-top: 28px; } .asteps li { font-size: 17px; } }
@media (max-width: 599px) { .apero__cta .btn { width: 100%; white-space: normal; text-align: center; text-wrap: balance; } }
@media (max-width: 639px) { .apero__media { margin-top: 40px; } .badge { top: -70px; right: -6px; width: 104px; height: 104px; font-size: 30px; } }
@media (min-width: 640px) { .apero__photo { height: 400px; } .acard { width: 364px; margin: -140px 0 0 auto; } }
@media (min-width: 1000px) {
  .apero__in { grid-template-columns: minmax(0, 680px) minmax(340px, 1fr); grid-template-areas: "media head" "media rest"; column-gap: clamp(56px, 6.7vw, 96px); row-gap: 32px; align-items: start; }
  .apero__head { grid-area: head; align-self: end; }
  .apero__media { grid-area: media; padding-bottom: 150px; }
  .apero__rest { grid-area: rest; }
  /* Le cadre suit la photo des cinq potes (3:2) : à 1200 px, une hauteur fixe de 460 px (620 × 460) coupait les visages
     des deux bouts ; à 1440 px, 680 × 453. */
  .apero__photo { height: auto; aspect-ratio: 3 / 2; border-radius: var(--r-photo); }
  .acard { position: absolute; right: clamp(-40px, -3vw, 0px); bottom: 0; width: 364px; margin: 0; padding: 20px; border-radius: var(--r-xl); }
  .badge { top: -48px; left: -40px; right: auto; width: 158px; height: 158px; font-size: 52px; box-shadow: 0 18px 36px -16px var(--glow); }
  .badge small { font-size: 14px; }
  .date { width: 58px; height: 64px; border-radius: 16px; font-size: 28px; }
  .acard__top b { font-size: 19px; }
}

/* Discrétion (nuit) */
.discret { position: relative; overflow: hidden; }
.discret__bg { position: absolute; left: -14%; bottom: -16%; width: min(96vw, 780px); height: auto; fill: none; stroke: #F4EEE4; stroke-width: .45; stroke-linecap: round; stroke-linejoin: round; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
@media (min-width: 1000px) { .discret__bg { left: -6%; bottom: -30%; width: 820px; } }
@media (max-width: 999px) { .discret__bg { left: auto; right: -22%; top: -20px; bottom: auto; width: min(78vw, 340px); } }
@media (min-width: 1000px) and (max-width: 1179px) { .badge { top: 210px; left: -56px; } }
.discret__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.discret .h2 .accent { display: inline; }
.fcards { margin: 0; padding: 0; list-style: none; }

.discret__note a { color: var(--accent-nuit); font-weight: 700; white-space: nowrap; }
.discret__note { max-width: 34em; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--t-nuit); color: var(--texte-nuit); font-size: 15px; line-height: 1.5; }
.discret__media { position: relative; margin: 0; }
.discret__photo { height: 340px; overflow: hidden; border-radius: var(--r-m); background: #1E2533; }
.discret__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fcard { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 270px; padding: 12px 14px 12px 12px; border-radius: var(--r-s); box-shadow: var(--o-nuit); font-size: 14.5px; line-height: 1.3; }
.fcard b { display: block; font-weight: 800; }
.fcard small { display: block; margin-top: 2px; color: var(--t2); font-size: 12px; line-height: 1.35; text-wrap: pretty; }
.fcard__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-pale); color: var(--accent-texte); }
.fcard__ic .i { width: 19px; height: 19px; }
.fcard--a { top: 18px; left: -6px; transform: rotate(-3deg); }
.fcard--b { top: 42%; right: -6px; transform: rotate(3deg); }
.fcard--c { bottom: 18px; left: 4px; transform: rotate(-2deg); }
.fcard--d { bottom: 18px; right: -6px; transform: rotate(2deg); }
@media (min-width: 1000px) {
  .discret__in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(48px, 7vw, 140px); align-items: center; }
  .discret__note { margin-top: 30px; padding-top: 22px; font-size: 16px; }
  .discret__media { margin: 0; }
  .discret__photo { height: 620px; border-radius: var(--r-photo); }
  .fcard { max-width: 300px; padding: 16px; gap: 12px; border-radius: var(--r-card); font-size: 16px; }
  .fcard__ic { width: 48px; height: 48px; }
  .fcard--a { top: 40px; left: clamp(-84px, -5vw, -40px); }
  .fcard--b { top: 27%; right: -24px; }
  .fcard--c { bottom: 170px; left: clamp(-60px, -4vw, -30px); }
  .fcard--d { bottom: 36px; right: -18px; }
}

/* Téléphone et tablette : la photo s'efface, les trois cartes passent en liste sous le texte */
@media (max-width: 999px) {
  .discret__photo { display: none; }
  .fcards { display: grid; gap: 10px; }
  .fcards .fcard { position: static; max-width: none; transform: none; }
}

/* Ici, pas d'étiquette */
.tag__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tag__sub { max-width: 34em; margin-top: 18px; color: var(--texte-2); font-size: clamp(19px, 15px + .8vw, 26px); font-weight: 600; line-height: 1.45; text-wrap: balance; }
@media (max-width: 599px) { .tag .h2--xl { line-height: 1.02; } }
.rotator { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: .45em; margin-top: 18px; color: var(--texte-2); font-size: clamp(22px, 16px + 1.6vw, 34px); font-weight: 600; line-height: 1.3; }
.rotator__box { display: inline-block; height: 1.3em; clip-path: inset(0 -100vw); }
.rotator__list { display: flex; flex-direction: column; transform: translateY(-7.8em); }
.rotator__list > * { display: block; width: max-content; height: 1.3em; color: var(--encre); font-weight: 800; white-space: nowrap; }
.rotator__list > span { width: 0; } /* seuls « potes. » donne la largeur : la ligne finale est centrée */
.rotator.is-done .rotator__box { clip-path: none; }
.rotator.is-done .rotator__list > span { visibility: hidden; }
.circled { position: relative; padding: 0 .1em; }
.circled::after { content: ''; position: absolute; left: -16%; top: -26%; width: 132%; height: 152%; background: var(--accent-titre); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' preserveAspectRatio='none'%3E%3Cpath d='M112 8 C 44 6 6 26 10 50 C 14 76 80 86 138 80 C 196 74 216 52 208 32 C 200 12 150 4 96 10' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' preserveAspectRatio='none'%3E%3Cpath d='M112 8 C 44 6 6 26 10 50 C 14 76 80 86 138 80 C 196 74 216 52 208 32 C 200 12 150 4 96 10' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; clip-path: inset(0 0 0 0); transform: rotate(-3deg); pointer-events: none; }
html.js .rotator:not(.is-in) .rotator__list { transform: none; }
html.js .rotator.is-in .rotator__list { animation: rot 4.9s var(--ease) .3s both; }
html.js .rotator:not(.is-done) .circled::after { clip-path: inset(0 100% 0 0); }
html.js .rotator.is-done .circled::after { transition: clip-path .9s var(--ease); }
/* 7 mots, ~0,6 s de tenue chacun, glissement doux entre deux */
@keyframes rot { 0%, 11% { transform: translateY(0); } 14.5%, 25.5% { transform: translateY(-1.3em); } 29%, 40% { transform: translateY(-2.6em); } 43.5%, 54.5% { transform: translateY(-3.9em); } 58%, 69% { transform: translateY(-5.2em); } 72.5%, 83.5% { transform: translateY(-6.5em); } 87%, 100% { transform: translateY(-7.8em); } }
.faces { display: flex; gap: 14px; margin: 30px -20px 0; padding: 14px 20px 22px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.faces::-webkit-scrollbar { display: none; }
.faces li { flex: 0 0 150px; scroll-snap-align: center; }
.faces figure { position: relative; overflow: hidden; height: 188px; border: 4px solid var(--papier); border-radius: 18px; background: var(--sable); transform: rotate(var(--tilt, -2deg)); transition: transform .35s var(--ease); }
.faces li:nth-child(2) figure { --tilt: 2deg; } .faces li:nth-child(3) figure { --tilt: -1.5deg; } .faces li:nth-child(4) figure { --tilt: 2deg; } .faces li:nth-child(5) figure { --tilt: -1.5deg; } .faces li:nth-child(6) figure { --tilt: 2.5deg; }
.faces img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.faces figcaption { position: absolute; left: 8px; bottom: 8px; display: grid; gap: 1px; padding: 6px 10px; border-radius: 12px; background: rgb(23 20 15 / .82); color: #FFFFFF; line-height: 1.25; white-space: nowrap; }
.faces figcaption b { font-size: 11.5px; font-weight: 800; }
.faces figcaption span { color: #E6DED1; font-size: 11px; font-weight: 600; }
.faces__lock { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); background: rgb(23 20 15 / .82); color: #FFFFFF; font-size: 12px; font-weight: 700; max-width: calc(100% - 16px); }
.faces__lock .i { width: 12px; height: 12px; stroke-width: 2.4; }
.tag__note { display: flex; align-items: flex-start; gap: 10px; max-width: 40em; margin: 14px auto 0; color: var(--texte-2); font-size: 15px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.tag__note .i { flex: none; width: 22px; height: 22px; margin-top: 0; color: var(--accent-texte); }
@media (min-width: 900px) { .tag__note { justify-content: center; margin-top: 26px; font-size: 17px; } }
@media (min-width: 900px) { .rotator { margin-top: 26px; } }
@media (min-width: 900px) and (max-width: 1239px) { .faces { margin-inline: -80px; padding-inline: 80px; scroll-padding-inline: 80px; justify-content: safe center; } }
@media (min-width: 1240px) {
  .faces { justify-content: center; gap: 22px; margin: 56px 0 0; padding: 14px 0 22px; overflow: visible; }
  .faces li { flex: 0 1 176px; }
  .faces figure { height: 234px; border-width: 5px; border-radius: var(--r-m); box-shadow: 0 20px 40px -22px rgb(var(--ombre) / .5); }
  .faces li:nth-child(1) figure { --tilt: -3deg; } .faces li:nth-child(2) figure { --tilt: 2deg; translate: 0 10px; } .faces li:nth-child(3) figure { --tilt: -2deg; } .faces li:nth-child(4) figure { --tilt: 3deg; translate: 0 8px; } .faces li:nth-child(5) figure { --tilt: -1.5deg; } .faces li:nth-child(6) figure { --tilt: 2.5deg; translate: 0 10px; }
  .faces figure:hover { transform: rotate(0) translateY(-6px); }
  .faces figcaption { left: 10px; bottom: 10px; padding: 7px 12px; }
}

/* Nouveau : le dick code */
.dcode { display: grid; gap: 14px; margin-top: 24px; padding: 18px 16px; border-radius: var(--r-l); background: var(--sable); }
.dcode__new { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent); color: #FFFFFF; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dcode__t { margin-top: 8px; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .95; text-transform: uppercase; }
.dcode__d { margin-top: 6px; color: var(--texte-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.dcode__ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dcode__ex li { overflow: hidden; aspect-ratio: 3 / 4; border: 3px solid var(--papier); border-radius: 14px; background: var(--papier); box-shadow: var(--o-photo-s); transform: rotate(var(--tilt, -2deg)); }
.dcode__ex li:nth-child(2) { --tilt: 2deg; } .dcode__ex li:nth-child(3) { --tilt: -1.5deg; } .dcode__ex li:nth-child(4) { --tilt: 2.5deg; }
.dcode__ex img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .dcode { gap: 24px; margin-top: 44px; padding: 36px 40px; border-radius: var(--r-xl); }
  .dcode__t { font-size: 56px; }
  .dcode__d { font-size: 18px; }
  .dcode__ex { gap: 16px; }
  .dcode__ex li { border-width: 4px; border-radius: 18px; }
}
@media (min-width: 1200px) { .dcode { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 40px; } }

/* Questions */
.faqsec { background: var(--sable); }
.faqsec__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.faqsec__photo { position: relative; display: none; height: 270px; margin-top: 36px; }
.faqsec__photo img { width: 100%; height: 100%; border-radius: var(--r-l); object-fit: cover; }
.faqsec__photo .script-tag { position: absolute; right: 16px; bottom: -16px; padding: 8px 16px 10px; font-size: 30px; }
@media (min-width: 1000px) { .faqsec__in { grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; } .faqsec__photo { display: block; } }
.faq { border-top: 1.5px solid var(--t16); }
.faq details { border-bottom: 1.5px solid var(--t16); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--t30); background: linear-gradient(var(--encre), var(--encre)) center / 14px 2.4px no-repeat, linear-gradient(var(--encre), var(--encre)) center / 2.4px 14px no-repeat; transition: background-color .2s; }
.faq details[open] summary::after { box-shadow: none; background: linear-gradient(var(--creme), var(--creme)) center / 14px 2.4px no-repeat, var(--encre); }
.faq details p { max-width: 42em; padding: 0 30px 18px 0; color: var(--texte-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 900px) { .faq summary { padding: 24px 0; font-size: 21px; } .faq summary::after { width: 34px; height: 34px; } .faq details p { padding: 0 60px 26px 0; font-size: 18px; line-height: 1.55; } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* Appel final */
.final { display: grid; grid-template-columns: minmax(0, 1fr); }
.final__photo { position: relative; height: 200px; overflow: hidden; background: var(--sable); }
.final__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.final__txt { --focus-ring: #FFFFFF; padding: 36px 20px 44px; background: var(--accent); color: #FFFFFF; }
.final__photo picture { display: contents; }
.final .h2 { color: #FFFFFF; font-size: clamp(60px, calc(43.7px + 4.19vw), 104px); line-height: .86; }
.final__lead { margin-top: 16px; font-size: 17px; font-weight: 600; }
.final .btn { margin-top: 26px; }
.final .star { display: inline-block; font-size: .62em; transform: translateY(-.42em); }
.final__foot { margin-top: 16px; font-size: 14px; font-weight: 600; }
@media (max-width: 599px) { .final .btn { width: 100%; font-size: 17px; } }
@media (min-width: 900px) {
  .final { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 600px; }
  .final__photo { height: auto; }
  .final__photo img { object-position: 45% 50%; }
  .final__txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 86px 80px; }
  .final__lead { margin-top: 22px; font-size: 20px; }
  .final .btn { margin-top: 34px; }
}

/* Pied de page */
.foot { padding: 36px 0 calc(30px + env(safe-area-inset-bottom)); background: var(--foot); color: var(--on-ink); }
html.has-sticky .foot { padding-bottom: 110px; }
.foot__in { display: grid; gap: 24px; }
.foot .brand { color: var(--on-ink); }
.foot .brand svg { width: 200px; }
.foot .brand .cj-brand-crew { fill: var(--logo-nuit); }
.foot .brand .cj-brand-tache { fill: var(--logo-nuit-tache); }
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.foot__links a:hover { color: #FFFFFF; text-decoration: underline; }
.foot__legal { padding-top: 18px; border-top: 1px solid var(--t-nuit); color: var(--texte-pied); font-size: 13px; line-height: 1.6; }
@media (min-width: 900px) { .foot { padding: 50px 0 40px; } .foot__in { grid-template-columns: auto 1fr; align-items: center; gap: 30px; } .foot .brand svg { width: 220px; } .foot__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 28px; } .foot__legal { grid-column: 1 / -1; padding-top: 22px; font-size: 14px; } }

/* Bouton collant (téléphone) */
.sticky { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--sticky-bg); box-shadow: 0 -1px 0 var(--t10), 0 -10px 30px -14px rgb(var(--ombre) / .4); transform: translateY(110%); transition: transform .25s var(--ease); }
.sticky .btn { min-height: 56px; font-size: 17px; }
.sticky.is-on { transform: none; }
@media (min-width: 900px) { .sticky { display: none; } }

/* Apparitions au défilement */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms); }
html.js .rv.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Tiroir « Les prochains apéros » : à droite sur ordinateur, feuille sur téléphone
   ========================================================================== */
.sheet { position: fixed; z-index: 90; inset: 0; display: grid; place-items: end center; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--voile); }
.sheet__panel { position: relative; display: flex; width: 100%; height: calc(100% - 54px); overflow: hidden; border-radius: 28px 28px 0 0; background: var(--creme); color: var(--encre); box-shadow: var(--o-feuille); animation: sheetUp .45s var(--ease) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.sheet__grab { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--poignee); }
.sheet__top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; padding: 6px 16px 6px; }
.sheet__close { grid-column: 3; }
.sheet__body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; outline: none; }
.screen { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.screen__in { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 24px 24px; -webkit-mask: linear-gradient(#000 calc(100% - 24px), transparent); mask: linear-gradient(#000 calc(100% - 24px), transparent); }
.screen__foot { position: static; flex: none; padding: 12px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--t08); background: var(--creme); text-align: center; }
.screen__foot .btn--cta, .screen__foot .btn--ghost { width: 100%; min-height: 56px; font-size: 17px; box-shadow: var(--o-cta); }
.screen__foot .btn--ghost { box-shadow: none; }
.screen__foot small { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--texte-3); font-size: 13.5px; line-height: 1.4; }
.screen__foot small a { position: relative; color: var(--accent-texte); font-weight: 700; }
.screen__foot small a::after { content: ''; position: absolute; inset: -13px -8px; }
.screen__foot .btn--text { min-height: 44px; margin-top: 4px; font-size: 14px; }
@media (min-width: 900px) {
  .sheet { place-items: stretch end; }
  .sheet__backdrop { background: var(--voile-l); }
  .sheet__panel { width: 560px; height: 100%; border-radius: 28px 0 0 28px; box-shadow: var(--o-feuille-l); animation-name: sheetIn; }
  .sheet__grab { display: none; }
  .sheet__top { grid-template-columns: auto 1fr 44px; gap: 12px; min-height: 92px; padding: 0 28px 0 40px; border-bottom: 1px solid var(--t08); }
  .screen__in { padding: 30px 40px 24px; }
  .screen__foot { padding: 18px 40px 26px; }
}

/* Contenu du tiroir */
.stitle { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .92; text-transform: uppercase; outline: none; text-wrap: balance; }
@media (min-width: 900px) { .stitle { font-size: 52px; } }
.slead { margin-top: 10px; color: var(--texte-2); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 900px) { .slead { font-size: 17px; } }
.citycard { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 7px 6px 14px; border: 2px solid var(--succes); border-radius: var(--r-xs); background: var(--papier); }
.citycard > .i { width: 20px; height: 20px; color: var(--texte-3); }
.citycard > span { flex: 1; min-width: 0; }
.citycard b { display: block; font-size: 17px; font-weight: 700; }
.citycard small { display: flex; align-items: center; gap: 5px; color: var(--succes); font-size: 13px; font-weight: 600; }
.citycard small .i { width: 14px; height: 14px; stroke-width: 3; }
.citycard .btn--text { min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--sable); color: var(--encre); text-decoration: none; font-size: 14px; }
/* Champs de formulaire */
.field { margin-top: 18px; }
.label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; }
@media (min-width: 900px) { .label { font-size: 14.5px; } }
.input { display: block; width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--t-champ); border-radius: var(--r-xs); background: var(--papier); color: var(--encre); font: 600 17px var(--font); transition: border-color .15s; }
@media (min-width: 900px) { .input { min-height: 54px; padding: 0 16px; } }
.input::placeholder { color: var(--placeholder); font-weight: 500; opacity: 1; }
.input:hover { border-color: var(--texte-3); }
.input:focus { outline: none; border-color: var(--encre); box-shadow: inset 0 0 0 .5px var(--encre); }
.input[aria-invalid="true"] { border-color: var(--erreur); box-shadow: inset 0 0 0 .5px var(--erreur); }
.input[aria-invalid="true"]:focus { outline: 2px solid var(--erreur); outline-offset: 2px; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; color: var(--texte-2); font-size: 13.5px; font-weight: 600; }
.status:empty { display: none; }
.status--ok { color: var(--succes); }
.status .i { width: 15px; height: 15px; stroke-width: 3; }
.status__why { display: flex; flex-basis: 100%; align-items: center; gap: 6px; color: var(--erreur); font-weight: 700; }
.cityrow { display: flex; align-items: center; gap: 8px; padding: 0 5px 0 0; border: 1.5px solid var(--t-champ); border-radius: var(--r-xs); background: var(--papier); }
.cityrow:focus-within { border-color: var(--encre); box-shadow: inset 0 0 0 .5px var(--encre); }
.cityrow .combo { flex: 1; min-width: 0; }
.cityrow .input, .cityrow .input:focus { border: 0; box-shadow: none; background: none; padding-left: 44px; }
.cityrow .search__pin { left: 14px; }
.locate { flex: none; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--sable); box-shadow: none; font-size: 13.5px; font-weight: 700; }
@media (max-width: 380px) { .locate span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .locate { width: 44px; padding: 0; } }
.combo { position: relative; }
.combo__pop { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; padding: 6px; border-radius: 16px; background: var(--papier); color: var(--encre); box-shadow: 0 24px 50px -16px rgb(var(--ombre) / .5), 0 0 0 1px var(--t10); text-align: left; }
.combo__list { max-height: 280px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.combo__credit { padding: 6px 14px 4px; color: var(--texte-3); font-size: 12.5px; font-weight: 600; }
.combo__credit a { color: inherit; }
.combo__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.combo__list li small { color: var(--texte-3); font-weight: 500; font-size: 13px; white-space: nowrap; }
.combo__list li:hover, .combo__list li[aria-selected="true"] { background: var(--sable); }
.combo__list li[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--encre); }
/* Les prochains apéros de ta ville (aperçu agrégé, sans compte) */
.count--ap { margin-top: 18px; }
.count--ap .count__num { font-size: clamp(40px, 34px + 1.4vw, 52px); }
.apweeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 6px; padding: 0; list-style: none; }
.apweeks li { display: grid; gap: 2px; padding: 10px 8px; border-radius: 14px; background: rgb(255 255 255 / .08); text-align: center; }
.apweeks b { font-family: var(--display); font-size: 30px; font-weight: 900; line-height: 1; }
.apweeks small { color: var(--texte-nuit); font-size: 12px; font-weight: 700; }

/* ---------- Écran « 18 ans et plus » : document à part (contrejour_accueil_18.html), servi avant tout le reste ----------
   La carte de la V13, mais sur un fond uni : aucune page derrière (rien de la page n'est envoyé avant l'accord). Le fond
   reprend la teinte moyenne que donnait le voile de la V13 sur le téléphone, au-dessus de la photo du hero (mesurée sur
   les captures de la V13 : clair environ rgb(38 34 30), sombre rgb(17 14 11)). */
:root { --gate-fond: #26221E; }
:root[data-theme="dark"] { --gate-fond: #110E0B; }
.gate-page { background: var(--gate-fond); }
.gate { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; min-height: 100svh; padding: 20px; background: var(--gate-fond); }
.gate__form { margin: 0; }
.gate__card { position: relative; width: min(100%, 460px); padding: 32px 26px 26px; border-radius: 28px; background: var(--creme); color: var(--encre); text-align: center; box-shadow: 0 40px 90px rgb(0 0 0 / .6); }
.gate__brand { display: inline-flex; line-height: 0; color: var(--encre); }
.gate__brand svg { width: 200px; height: auto; fill: currentColor; }
.gate__brand .cj-brand-tache { fill: var(--logo-tache); } .gate__brand .cj-brand-crew { fill: var(--logo-crew); } .gate__brand .cj-brand-tache-drop { opacity: 0; } .gate__brand .cj-brand-b--full { display: none; }
.gate__age { display: grid; place-items: center; width: 84px; height: 84px; margin: 22px auto 0; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 38px; transform: rotate(-8deg); box-shadow: 4px 4px 0 var(--encre); }
.gate__t { margin-top: 18px; font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .95; text-transform: uppercase; }
.gate__d { margin-top: 12px; color: var(--texte-2); font-size: 16px; line-height: 1.5; }
.gate__acts { display: grid; gap: 10px; margin-top: 22px; }
.gate__acts .btn { width: 100%; }
@media (max-width: 599px) { .final .btn, .gate__acts .btn { white-space: normal; text-align: center; text-wrap: balance; } }
@media (max-width: 359px) { .nav .brand svg { width: 150px; } }
.gate__small { margin-top: 14px; color: var(--texte-3); font-size: 13px; line-height: 1.45; }

/* ---------- Relecture V11 : lisibilité (14 px pour tout ce qui n'est pas une mention), cibles tactiles, tablette ---------- */
.status, .fcard small, .count__lock, .screen__foot small, .search__note { font-size: 14px; }
.faces figcaption b { font-size: 13px; }
.faces figcaption span { font-size: 12.5px; }
.nav .brand { min-height: 44px; }
.foot .brand { position: relative; }
.foot .brand::after { content: ''; position: absolute; inset: -11px 0; }
@media (min-width: 700px) and (max-width: 899px) {
  .wrap { --g: max(40px, calc(50% - 320px)); padding: 0 var(--g); }
  .faces { margin-inline: calc(-1 * max(40px, 50vw - 320px)); padding-inline: max(40px, 50vw - 320px); }
  .tag { overflow-x: clip; }
  .search__note { text-align: center; }
  .final__txt { padding-inline: var(--g); }
}
/* ---------- Port sur eve ---------- */
/* « Profils d'illustration » (CONCEPTION §4) : sous le téléphone et sous les profils de « Ici, pas d'étiquette ». */
.illus { margin: 10px 0 0; color: var(--texte-3); font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: center; }
.illus--phone { position: relative; z-index: 2; }
.illus--faces { margin-top: 0; }
/* Téléphone (sous 560 px) : le bas du téléphone s'efface sous les fonctions ; la mention se pose là où il est devenu
   transparent (91 % de sa hauteur), sur le fond de la section (explicite : le masque n'est pas vu par les outils). */
@media (max-width: 559px) { .illus--phone { margin-top: 68px; padding: 0 6px; border-radius: 6px; background: var(--sable); } }
/* Liste des villes du géocodeur : noms et détails plus longs que dans la V13 (« Saint-Sébastien-sur-Loire »,
   « 44230, Pays de la Loire ») ; le détail passe à la ligne plutôt que de couper le nom. Dans le tiroir, la bulle
   prend toute la largeur du champ (bouton « Trouver ma ville » compris). */
.combo__list li { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.combo__list li > span { min-width: 0; overflow-wrap: anywhere; }
.cityrow { position: relative; }
.cityrow .combo { position: static; }
/* Compteur : attente de la réponse (le bouton ne part pas deux fois) */
.search[aria-busy="true"] .search__go { opacity: .7; cursor: progress; }

/* ==========================================================================
   Tiroir de compte (lot accueil-inscription-20260929, CONCEPTION §6.13) : coquille de la V13 (retour, progression,
   statut), écrans d'inscription, de connexion et de demande de lien, petit message. Portés de src/styles.css de la
   V13 (700-921, 983-1027), hors labo.
   ========================================================================== */
.sheet__top #sheet-back { background: none; }
.progress { grid-column: 2; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; }
.progress__bar { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.progress__bar i { height: 5px; border-radius: 3px; background: var(--piste); }
.progress__bar i.is-done { background: var(--accent); }
.progress__t { color: var(--texte-3); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.progress__steps { display: none; }
.sheet__status { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--succes); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sheet__status .i { width: 16px; height: 16px; stroke-width: 3; }
.screen__foot .err { justify-content: center; margin: 0 0 10px; }
@media (min-width: 900px) {
  .sheet__top #sheet-back { width: 44px; height: 44px; margin-left: -14px; }
  .sheet__status { justify-content: flex-start; font-size: 14px; }
  .sheet__top #sheet-back[hidden] + .progress[hidden] + .sheet__status { grid-column: 1 / 3; }
  .sheet__top #sheet-back[hidden] + .progress { grid-column: 1 / 3; }
  .progress { align-items: flex-start; }
  .progress__bar { display: none; }
  .progress__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .progress__steps { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
  .progress__steps li { display: flex; align-items: center; gap: 9px; color: var(--texte-3); font-size: 14px; font-weight: 700; white-space: nowrap; counter-increment: st; }
  .progress__steps li::before { content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--t30); font-size: 13px; font-weight: 800; }
  .progress__steps li:not(:last-child)::after { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--piste); }
  .progress__steps li.is-done:not(:last-child)::after { background: var(--accent); }
  .progress__steps li.is-on { color: var(--encre); }
  .progress__steps li.is-on::before, .progress__steps li.is-done::before { background: var(--accent); box-shadow: none; color: #FFFFFF; }
  .progress__steps li.is-done::before { content: '✓'; }
}

/* Contenu des étapes */
.fromchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 16px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--papier); box-shadow: inset 0 0 0 1px var(--t12); font-size: 14px; font-weight: 700; }
.fromchip .i { width: 17px; height: 17px; color: var(--accent-texte); }
.fromchip small { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--sable); color: var(--texte-2); font-size: 12.5px; font-weight: 700; }
.opts { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
@media (min-width: 600px) { .opts--2 { grid-template-columns: 1fr 1fr; gap: 12px; } }
.opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--t16); border-radius: var(--r-s); background: var(--papier); cursor: pointer; transition: border-color .15s, background-color .15s; }
@media (min-width: 600px) { .opt { min-height: 64px; } }
.opt:hover { border-color: var(--t30); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.opt__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--t-box); border-radius: 8px; color: transparent; }
.opt__box .i { width: 15px; height: 15px; stroke-width: 3; }
.opt:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-pale); padding: 9.5px 13.5px; }
.opt:has(input:checked) .opt__box { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lockline { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--texte-3); font-size: 14px; }
.lockline .i { width: 16px; height: 16px; }
/* Mini-compteur de l'étape 2 */
.count--mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 14px; align-items: center; margin-top: 18px; padding: 16px 18px; box-shadow: none; }
.count--mini .count__num { margin: 0; font-family: var(--font); font-weight: 800; font-size: 16px; line-height: 1.3; text-transform: none; }
.count--mini .count__km { display: block; margin: 0; font-weight: 600; font-size: 14px; }
.count--mini .count__ap { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.count--mini .count__ap .i { flex: none; width: 18px; height: 18px; color: var(--accent-nuit); }
/* Interrupteur (role=switch) */
.toggle { position: relative; flex: none; width: 50px; height: 30px; border: 0; border-radius: var(--r-pill); background: var(--papier); box-shadow: inset 0 0 0 2px var(--texte-3); cursor: pointer; transition: background-color .2s; }
.toggle::before { content: ''; position: absolute; inset: -7px -4px; }
.toggle::after { content: ''; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--texte-3); transition: transform .2s var(--ease), background-color .2s; }
.toggle[aria-checked="true"] { background: var(--accent); box-shadow: none; }
.toggle[aria-checked="true"]::after { top: 3px; left: 3px; width: 24px; height: 24px; background: #FFFFFF; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transform: translateX(20px); }
.sublabel { margin-top: 22px; color: var(--texte-3); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hello__head { position: relative; isolation: isolate; }
.hello__head ~ * { position: relative; }
.hello__head::before { content: ''; position: absolute; z-index: -1; right: -24px; top: 0; width: 300px; height: 190px; border-radius: 50%; background: var(--peche); }
.hello__head .stitle { font-size: 44px; line-height: .9; }
@media (min-width: 900px) { .hello__head .stitle { font-size: 52px; } .hello__head::before { right: -40px; } }
.hello__script { display: inline-block; margin-top: 10px; color: var(--accent-texte); font-family: var(--script); font-size: 26px; line-height: 1; transform: rotate(-7deg); }

/* Champs (en plus de ceux du tiroir des apéros) */
.control { position: relative; }
.input--pass { padding-right: 104px; }
.show { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--sable); color: var(--encre); font: 700 14px var(--font); cursor: pointer; }
.show:hover { background: var(--gres); }
.meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.meter__bars { display: grid; flex: 1; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter__bars i { height: 5px; border-radius: 3px; background: var(--piste); }
.meter[data-s="2"] .meter__bars i:nth-child(-n+2), .meter[data-s="3"] .meter__bars i:nth-child(-n+3), .meter[data-s="4"] .meter__bars i { background: var(--succes); }
.meter[data-s="1"] .meter__bars i:nth-child(1) { background: var(--erreur); }
.meter__t { min-width: 5.5em; color: var(--succes); font-size: 14px; font-weight: 700; text-align: right; }
.meter[data-s="1"] .meter__t { color: var(--erreur); }
.hint { margin-top: 6px; color: var(--texte-3); font-size: 14px; line-height: 1.45; }
.err { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--erreur); font-size: 14px; font-weight: 700; line-height: 1.45; }
.err .i { width: 16px; height: 16px; margin-top: 1px; }
.fixbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 8px 8px 8px 12px; border-radius: var(--r-xs); background: var(--sable); color: var(--texte-2); font-size: 14px; }
.fixbox > .i { width: 16px; height: 16px; }
.fixbox b { color: var(--encre); }
.fixbox__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.mini { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--t22); border-radius: var(--r-pill); background: var(--papier); color: var(--encre); font: 700 13.5px var(--font); cursor: pointer; }
.mini:hover { border-color: var(--encre); }
.mini--ink { border: 0; border-radius: 12px; background: var(--ink); color: #FFFFFF; font-weight: 800; }
/* Piège à robots : hors écran, jamais atteint au clavier */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset.field { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; }
.dob { display: grid; grid-template-columns: 72px 72px 104px; gap: 10px; }
@media (min-width: 900px) { .dob { grid-template-columns: 80px 80px 116px; } }
.dob label { display: block; margin-bottom: 4px; color: var(--texte-3); font-size: 14px; font-weight: 700; }
.dob .input { padding: 0 6px; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.accords { display: grid; gap: 14px; margin-top: 22px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; align-content: center; min-height: 44px; color: var(--texte-2); font-size: 14px; line-height: 1.45; cursor: pointer; }
/* Une seule case, dessinée comme celles de l'étape 1 */
.check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--t-box); border-radius: 8px; background: var(--papier); cursor: pointer; }
.check input:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 15px no-repeat; }
.check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check a { color: var(--accent-texte); font-weight: 700; }
.check b { color: var(--encre); }
.check small { display: block; margin-top: 3px; color: var(--texte-3); font-size: 12.5px; } /* mention juridique */
.check.is-invalid input { outline: 2px solid var(--erreur); outline-offset: 2px; }
.check--reste { margin-top: 18px; }
.notebox { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--t10); color: var(--texte-2); font-size: 14px; line-height: 1.45; }
.notebox:empty { display: none; }
.notebox > .i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--sable); color: var(--encre); }
.notebox b { display: block; color: var(--encre); font-size: 15px; font-weight: 800; }
.falt { margin-top: 18px; color: var(--texte-2); font-size: 14px; line-height: 1.7; text-align: center; }
.falt a { position: relative; color: var(--accent-texte); font-weight: 700; }
.falt a::after { content: ''; position: absolute; inset: -14px -4px; } /* cible de 44 px (lien de 17 px) */
.falt--list { display: grid; justify-items: center; gap: 2px; }
.falt--list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.falt--list a::after { inset: 0; }
/* Étape 3 : la discrétion des e-mails, sous l'adresse */
.notif { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-s); background: var(--papier); box-shadow: inset 0 0 0 1px var(--t12); }
.notif b { display: block; font-size: 15px; font-weight: 800; line-height: 1.35; }
.notif small { display: block; margin-top: 4px; color: var(--texte-2); font-size: 14px; line-height: 1.45; }
.notif .toggle { margin-top: 2px; }
.alertbox { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-xs); background: var(--accent-pale); color: var(--encre); font-size: 14px; font-weight: 600; line-height: 1.45; }
.alertbox .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-texte); }
/* Envoi en cours (aria-busy) : le bouton reste lisible, il ne repart pas deux fois */
.btn[aria-busy="true"] { cursor: progress; }

/* Bienvenue : une photo ou ton dick code (page de compte) */
.choice-wrap { position: relative; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.choice li { display: flex; }
.choice__card { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 14px; border: 1.5px solid var(--t16); border-radius: var(--r-card); background: var(--papier); color: var(--encre); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s; }
.choice__card:hover { border-color: var(--t30); color: var(--encre); }
.choice__media { display: flex; align-items: center; justify-content: center; height: 118px; margin-bottom: 4px; overflow: hidden; border-radius: 14px; background: var(--sable); color: var(--texte-3); }
/* Le dessin du dick code (nu et en boxer) se voit en entier à toutes les largeurs : contain, le fond sable comble les côtés. */
.choice__media img { width: 100%; height: 100%; object-fit: contain; }
.choice__media .i { width: 40px; height: 40px; stroke-width: 1.6; }
.choice__card b { padding: 0 4px; font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.choice__card small { padding: 0 4px; color: var(--texte-2); font-size: 14px; line-height: 1.4; }
.choice__or { position: absolute; left: 50%; top: 59px; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 3px var(--creme); pointer-events: none; }
.choice__card--done { cursor: default; }
.choice__card--done .choice__media { color: var(--succes); }
@media (min-width: 900px) { .choice__media { height: 140px; } .choice__or { top: 70px; } }
@media (max-width: 359px) { .choice { gap: 10px; } .choice__card { padding: 8px 8px 12px; } }

/* Petit message (V13) : au-dessus du pied du tiroir quand il est ouvert (placé par le JS) */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600; line-height: 1.45; box-shadow: 0 20px 50px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .08); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }
html.has-sticky .toast { bottom: 96px; }

/* ==========================================================================
   Pages de compte (contrejour_compte.gabarit.php de B1 : bienvenue, confirmation, nouveau mot de passe) : même charte
   que l'accueil, une colonne de 560 px ; les contenus reprennent les classes du tiroir (.stitle, .field, .input, .err,
   .hint, .notebox, .btn, .choice*, .hello__*). Aucun script : la barre du haut est posée, jamais transparente.
   ========================================================================== */
body.compte { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow-x: clip; }
.nav.compte__nav { position: sticky; background: var(--nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--t10); --focus-ring: var(--focus); }
.nav.compte__nav .brand { color: var(--encre); }
.nav.compte__nav .brand .cj-brand-crew { fill: var(--logo-crew); }
.nav.compte__nav .brand .cj-brand-tache { fill: var(--logo-tache); }
.compte__main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 20px 48px; outline: none; }
@media (min-width: 900px) { .compte__main { padding: 56px 20px 72px; } }
.compte__carte { position: relative; }
.compte__statut { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--succes); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compte__statut::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.compte__titre { outline: none; }
.compte__texte { margin-top: 10px; color: var(--texte-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 900px) { .compte__texte { font-size: 17px; } }
.hint.compte__texte { margin-top: 14px; color: var(--texte-3); font-size: 14px; }
.compte__alerte { margin-top: 18px; }
.compte__form { margin-top: 8px; }
.compte__champ .input--pass { padding-right: 14px; } /* pas de bouton « Afficher » : les pages de compte n'ont pas de script */
.compte__actions { display: grid; gap: 10px; margin-top: 26px; }
.compte__bouton { width: 100%; min-height: 56px; margin-top: 22px; font-size: 17px; white-space: normal; text-align: center; text-wrap: balance; }
.compte__actions .compte__bouton { margin-top: 0; }
.btn--cta.compte__bouton { box-shadow: var(--o-cta); }
.compte__lien { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
.compte__actions + .hint.compte__texte { margin-top: 12px; text-align: center; }
.foot.compte__pied { padding-block: 24px calc(24px + env(safe-area-inset-bottom)); }
.foot.compte__pied .foot__legal { padding-top: 0; border-top: 0; }

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .opt__box { color: Canvas; }
  .opt:has(input:checked) .opt__box { color: CanvasText; }
  .toggle { border: 2px solid ButtonText; }
  .toggle::after { forced-color-adjust: none; background: ButtonText; }
  .toggle[aria-checked="true"] { forced-color-adjust: none; background: Highlight; }
  .toggle[aria-checked="true"]::after { background: HighlightText; }
  .check input:checked { forced-color-adjust: none; background-color: Highlight; border-color: Highlight; }
  .combo__list li[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .combo__list li[aria-selected="true"] small { color: HighlightText; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .marquee__pause { display: none; }
  html.js .rv { opacity: 1; transform: none; }
  html.js .rotator .rotator__list, html.js .rotator.is-in .rotator__list { animation: none; transform: translateY(-7.8em); }
  .rotator .rotator__box { clip-path: none; }
  .rotator .rotator__list > span { visibility: hidden; }
  html.js .rotator:not(.is-done) .circled::after { clip-path: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Lot accueil-suite-20260929, vague V2b (CONCEPTION §5.7) : la marque suit la langue rendue, sélecteur de langue.
   ========================================================================== */
/* Les deux mots-symboles sont dans le markup (bep, puis batecrew copié de _header.html) ; html[data-marque], posé par le
   serveur d'après la langue rendue, n'en laisse voir qu'un : bep par défaut (aucun attribut, ou toute autre valeur). */
html[data-marque="batecrew"] .cj-brand-word--bep,
html:not([data-marque="batecrew"]) .cj-brand-word--batecrew { display: none; }
/* Largeurs du mot batecrew : mêmes tracés de lettres que le mot bep, donc même échelle (638 / 1167 de la largeur du mot
   bep au même endroit) et même hauteur visuelle, sans toucher à la place laissée aux boutons. */
.brand .cj-brand-word--batecrew { width: 101px; }                                            /* bep 184 */
@media (min-width: 900px) { .brand .cj-brand-word--batecrew { width: 141px; } }             /* bep 258 */
@media (max-width: 359px) { .nav .brand .cj-brand-word--batecrew { width: 82px; } }         /* bep 150 */
.phone__brand .cj-brand-word--batecrew { width: 65px; }                                     /* bep 118 */
.foot .brand .cj-brand-word--batecrew { width: 109px; }                                     /* bep 200 */
@media (min-width: 900px) { .foot .brand .cj-brand-word--batecrew { width: 120px; } }       /* bep 220 */
.gate__brand .cj-brand-word--batecrew { width: 109px; }                                     /* bep 200 */

/* Sélecteur de langue ({cj_langues} : vide quand une seule langue est servie) : liens discrets, comme ceux du pied,
   cibles de 44 px ; la langue courante n'est pas un lien (aria-current). Pied de la page, puis écran 18+. */
.foot__langues { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.foot__langues a, .foot__langues span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.foot__langues a { color: var(--on-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot__langues a:hover { color: #FFFFFF; text-decoration-thickness: 2px; }
.foot__langues span[aria-current], .foot__langues span[aria-hidden] { color: var(--texte-pied); }
@media (min-width: 900px) { .foot__langues { grid-column: 1 / -1; justify-content: flex-end; margin-top: -24px; } }
.gate__card .foot__langues { justify-content: center; margin-top: 6px; font-size: 14px; }
.gate__card .foot__langues a { color: var(--encre); }
.gate__card .foot__langues a:hover { color: var(--accent-texte); }
.gate__card .foot__langues span[aria-current], .gate__card .foot__langues span[aria-hidden] { color: var(--texte-3); }

/* Longueurs (CONCEPTION §6.8), espagnol seulement, sans couleur nouvelle. 1) Titre du hero : quatre lignes voulues
   (« | » de hero.titre.2) ; la plus longue, « QUE NOS HACEMOS », fait 6,9 em (mesuré dans Big Shoulders 900 : 401 px à
   58 px), plus que la colonne de texte du hero à toutes les largeurs. Corps réglé sur la largeur de cette colonne
   (divisée par 7,1), jamais plus grand qu'en français, 46 px au moins (sous 360 px, une ligne se coupe, comme « ON SE
   BRANLE » en français à 320 px). Colonne : 100vw − 40 px sous 700 px ; 620 à 640 px de 700 à 899 ; 100vw − 504 px de
   900 à 1179 ; 100vw − 644 px de 1180 à 1379 ; 100vw − 744 px au-delà. */
/* Interligne un peu plus ouvert qu'en français (0,86) : la queue du « Q » de « QUE » touchait le « U » de « UNAS ». */
html:lang(es) .hero .h1 { line-height: .92; }
@media (max-width: 699px) { html:lang(es) .hero .h1 { font-size: max(46px, min(max(58px, calc(32px + 6.67vw)), calc((100vw - 40px) / 7.1))); } }
@media (min-width: 700px) and (max-width: 899px) { html:lang(es) .hero .h1 { font-size: 86px; } }
@media (min-width: 900px) and (max-width: 1179px) { html:lang(es) .hero .h1 { font-size: max(46px, min(84px, calc((100vw - 504px) / 7.1))); } }
@media (min-width: 1180px) and (max-width: 1379px) { html:lang(es) .hero .h1 { font-size: min(max(96px, calc(8.5vw - 6px)), calc((100vw - 644px) / 7.1)); } }
@media (min-width: 1380px) { html:lang(es) .hero .h1 { font-size: min(128px, max(96px, calc(8.5vw - 6px)), calc((100vw - 744px) / 7.1)); } }
/* 2) Champ de ville du hero : au-delà de 1380 px, le bouton espagnol (« Ver cuántos colegas potenciales hay ») ne laisse
   que 140 à 154 px au texte d'aide (« Ciudad o código postal », 187 px) : bouton sous le champ, comme de 700 à 1379 px. */
@media (min-width: 1380px) {
  html:lang(es) .search__box { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none; box-shadow: none; }
  html:lang(es) .search__box:focus-within { outline: none; }
  html:lang(es) .search__input { border: 2px solid var(--encre); background: var(--papier); }
  html:lang(es) .search__input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
  html:lang(es) .search__loc { right: 6px; }
  html:lang(es) .search__go { box-shadow: var(--o-cta); }
}