/* Sifflo : blanc, noir, et l'appli au centre. Mobile d'abord. */
:root {
  --noir: #000;
  --carte: #101213;
  --bord: rgb(255 255 255 / .09);
  --blanc: #fff;
  --gris-clair: #f4f4f2;
  --encre: #0b0b0c;
  --gris: #6e6e73;
  --gris-sombre: #98989f;
  --vert: #2fd06f;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --vite: cubic-bezier(.2, .8, .2, 1);

  /* Couleurs de l'appli (mode sombre) */
  --a-fond: #101a15;
  --a-carte: #17231c;
  --a-encre: #f1f1e8;
  --a-muet: #a3b0a4;
  --a-trait: #304036;
  --club: #1b6b34;
  --club-accent: #f0e80a;
  --sur-club: #fff;
  --club-profond: color-mix(in srgb, var(--club) 36%, #081b13);
  --a-titre: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --a-texte: "Geist", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--texte); background: var(--blanc); color: var(--encre); line-height: 1.4; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ol, ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #0a84ff; outline-offset: 2px; }
.largeur { width: min(1120px, 100% - 40px); margin-inline: auto; }
.largeur-etroite { width: min(760px, 100% - 40px); }

/* Navigation flottante */
.nav { position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; width: min(1120px, 100% - 24px); padding: 8px 8px 8px 12px; border-radius: 999px; border: 1px solid transparent; color: var(--encre); transition: background .3s, border-color .3s, color .3s; }
.nav.colle { background: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-color: rgb(0 0 0 / .08); }
.nav.sombre { background: rgb(22 22 24 / .72); border-color: var(--bord); color: var(--blanc); }
.marque { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.icone { display: block; width: 34px; height: 34px; overflow: hidden; border-radius: 9px; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / .14); }
.icone img { width: 100%; height: 100%; }
.icone-grande { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 26px; }
.pilule { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--encre); color: var(--blanc); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .2s var(--vite), background .2s, color .2s; }
.pilule:hover { transform: scale(1.04); }
.nav.sombre .pilule { background: var(--blanc); color: var(--encre); }
.pilule-large { min-height: 54px; width: 100%; font-size: 17px; background: var(--blanc); color: var(--encre); margin-top: 20px; }

/* Ouverture */
.ouverture { position: relative; overflow: hidden; background: linear-gradient(#fff 0, #fff 76%, #000 99%); padding-top: 104px; }
.ouverture-texte { width: min(980px, 100% - 40px); margin-inline: auto; text-align: center; }
h1 { font-size: clamp(50px, 17vw, 104px); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; }
.ouverture-texte > p { max-width: 560px; margin: 20px auto 0; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.32; letter-spacing: -.01em; color: var(--gris); }
.reperes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-top: 30px; font-size: 14px; line-height: 1.25; }
.reperes strong { display: block; font-weight: 600; }
.reperes span { color: var(--gris); }
.reperes > div:first-child { text-align: center; }
.repere-club { display: flex; align-items: center; gap: 9px; text-align: left; }
.repere-club img { width: 34px; height: auto; }
.ouverture-tel { display: flex; justify-content: center; margin-top: 40px; transform-origin: 50% 100%; will-change: transform; }

/* Main gantée : l'écran est glissé sous l'image, dont la zone verte est percée */
.main { --l: 580; --tw: calc(var(--l) * .442); position: relative; left: -1.9%; flex: none; width: calc(var(--l) * 1px); }
.main-ecran { position: absolute; z-index: 1; left: 29.77%; top: 1.98%; width: 44.2%; height: 81.1%; overflow: hidden; border-radius: 9% / 4.5%; background: var(--a-fond); }
.main-ecran::after { content: ""; position: absolute; z-index: 3; top: 1.7%; left: 36%; width: 28%; height: 3.6%; border-radius: 99px; background: #000; }
.main-image { position: relative; z-index: 2; width: 100%; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }

/* Téléphone : la toile fait 390 × 844, comme les captures */
.tel { --cadre: calc(var(--tw) * 1px); position: relative; flex: none; width: calc(var(--cadre) + 22px); height: calc(var(--cadre) * 2.164 + 22px); padding: 11px; border-radius: calc(var(--cadre) * .165); background: linear-gradient(135deg, #4b4d50, #1b1c1e 22%, #111 78%, #3c3e41); box-shadow: inset 0 0 0 2px #000, 0 40px 80px -30px rgb(0 0 0 / .55); }
.tel::before { content: ""; position: absolute; z-index: 3; top: 22px; left: 50%; translate: -50% 0; width: calc(var(--cadre) * .29); height: calc(var(--cadre) * .083); border-radius: 99px; background: #000; }
/* Les vraies captures n'ont pas de marge pour l'encoche : on ne la dessine pas */
.tel:has(> .ecran > img)::before { display: none; }
.ecran { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--cadre) * .13); background: var(--a-fond); }
.ecran > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.toile { position: relative; width: 390px; height: 844px; transform: scale(calc(var(--tw) / 390)); transform-origin: 0 0; background: var(--a-fond); color: var(--a-encre); font-family: var(--a-texte); font-size: 16px; line-height: 1.3; }

/* Écrans reconstruits avec les réglages de l'appli */
.a-tete { display: flex; align-items: center; gap: 12px; padding: 58px 16px 13px; background: var(--a-carte); border-bottom: 1px solid var(--a-trait); border-radius: 0 0 26px 26px; }
.a-tete img { width: 40px; height: auto; }
.a-tete strong { display: block; font-family: var(--a-titre); font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.a-tete small { display: block; margin-top: 4px; color: var(--a-muet); font-size: 12px; }
.a-compte { margin-left: auto; padding: 9px 16px; border: 1px solid var(--a-trait); border-radius: 99px; font-size: 14px; font-weight: 600; }
.a-corps { padding: 0 16px; }
.a-haut { padding-top: 62px; }
.a-section { margin: 20px 0 11px; padding-bottom: 10px; border-bottom: 1px solid var(--a-trait); font-family: var(--a-titre); font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.a-carte { padding: 16px; background: var(--a-carte); border: 1px solid var(--a-trait); border-radius: 20px; }
.a-carte > strong { display: block; margin: 4px 0 2px; font-size: 17px; font-weight: 600; }
.a-carte > span { color: var(--a-muet); font-size: 14px; }
.a-trait { border-left: 4px solid var(--club-accent); }
.a-tag { color: var(--club-accent); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.a-choix { display: flex; gap: 8px; margin-top: 14px; }
.a-choix b { flex: 1; padding: 12px 0; border: 1px solid var(--a-trait); border-radius: 13px; font-size: 15px; font-weight: 600; text-align: center; }
.a-choix .on { background: var(--club-accent); border-color: var(--club-accent); color: var(--club-profond); }
.a-tuile { position: relative; overflow: hidden; padding: 16px; border-radius: 20px; background: linear-gradient(150deg, var(--club), var(--club-profond)); color: var(--sur-club); }
.a-tuile::after { content: ""; position: absolute; top: -44px; right: -44px; width: 140px; height: 140px; border-radius: 50%; background: rgb(255 255 255 / .1); }
.a-ligne { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.a-live { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; background: rgb(0 0 0 / .3); }
.a-live i, .a-chrono i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a50; animation: battre 1.3s infinite; }
@keyframes battre { 50% { opacity: .25; } }
.a-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0 10px; text-align: center; }
.a-score > span { display: grid; justify-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.a-score img { width: 40px; height: auto; }
.a-score em { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #3f6b52; color: #fff; font-family: var(--a-titre); font-size: 17px; font-style: normal; font-weight: 800; }
.a-score b { font-family: var(--a-titre); font-size: 58px; font-weight: 700; line-height: 1; }
.a-score output { font: inherit; }
.a-tuile p { padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .2); font-size: 14px; }
.a-reac { display: flex; gap: 7px; margin-top: 10px; }
.a-reac span { padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / .15); font-size: 13px; }
.a-nav { position: absolute; inset: auto 0 0; display: flex; height: 92px; padding-top: 13px; background: var(--a-carte); border-top: 1px solid var(--a-trait); border-radius: 26px 26px 0 0; color: var(--a-muet); font-size: 12.5px; font-weight: 500; }
.a-nav span { flex: 1; display: grid; justify-items: center; align-content: start; gap: 5px; }
.a-nav svg { width: 25px; height: 25px; }
.a-nav .on { color: var(--club-accent); }
.a-retour { color: var(--a-muet); font-size: 14px; }
.a-titre { margin-top: 8px; font-family: var(--a-titre); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.a-sous { margin: 5px 0 16px; color: var(--a-muet); font-size: 15px; }
.a-tableau { text-align: center; }
.a-grand { margin: 4px 0 6px; }
.a-chrono { display: inline-flex; align-items: center; gap: 7px; color: #ff9a92; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.a-boutons[hidden] { display: none; }
.a-boutons button { min-height: 62px; border: 0; border-radius: 15px; background: var(--club-accent); color: var(--club-profond); font-size: 19px; font-weight: 700; transition: transform .15s; }
.a-boutons button:active { transform: scale(.96); }
.a-boutons .sec { background: var(--a-carte); color: var(--a-encre); box-shadow: inset 0 0 0 1px var(--a-trait); }
.a-noms { grid-template-columns: repeat(3, 1fr); }
.a-noms button { font-size: 15px; background: var(--a-encre); color: #101a15; }
.a-faits { display: grid; gap: 7px; margin-top: 12px; }
.a-faits li { display: flex; gap: 12px; padding: 12px 14px; background: var(--a-carte); border: 1px solid var(--a-trait); border-radius: 14px; font-size: 15px; }
.a-faits b { flex: none; width: 32px; color: var(--club-accent); font-family: var(--a-titre); font-size: 18px; line-height: 1.1; }
.a-faits .nouveau { animation: eclair 1.1s var(--vite); }
@keyframes eclair { from { background: var(--club-accent); color: #101a15; } }
.a-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 11px; color: var(--a-muet); font-size: 13px; }
.a-chiffres div { padding: 13px; background: var(--a-carte); border: 1px solid var(--a-trait); border-radius: 16px; }
.a-chiffres b { display: block; font-family: var(--a-titre); font-size: 44px; font-weight: 800; line-height: 1; color: var(--a-encre); }
.a-chiffres .r b { color: #ff7a70; }
.a-liste { padding-block: 5px; }
.a-liste div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--a-trait); font-size: 16px; font-weight: 500; }
.a-liste div:last-child { border: 0; }
.a-liste em { font-size: 14px; font-style: normal; font-weight: 600; color: var(--club-accent); }
.a-liste em.r { color: #ff7a70; }
.a-liste em.g { color: var(--a-muet); }
.a-terrain { position: relative; height: 470px; border-radius: 18px; background: repeating-linear-gradient(0deg, #1f7a44 0 47px, #1b6f3d 47px 94px); overflow: hidden; }
.a-terrain::before { content: ""; position: absolute; inset: 14px; border: 2px solid rgb(255 255 255 / .55); border-radius: 4px; background: linear-gradient(rgb(255 255 255 / .55), rgb(255 255 255 / .55)) center / 100% 2px no-repeat; }
.a-terrain::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: 96px; border: 2px solid rgb(255 255 255 / .55); border-radius: 50%; }
.a-terrain i { position: absolute; z-index: 1; translate: -50% -50%; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: var(--club-accent); color: #101a15; font-family: var(--a-titre); font-size: 20px; font-style: normal; font-weight: 800; }

/* Phrase */
.phrase { background: var(--noir); padding: 50px 20px 110px; }
.phrase p { max-width: 980px; margin-inline: auto; color: var(--blanc); font-size: clamp(36px, 7vw, 74px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.js .phrase span { opacity: .2; transition: opacity .35s linear; }
.js .phrase span.allume { opacity: 1; }

/* Cartes de fonctions */
.fonctions { background: var(--noir); padding: 0 12px 90px; }
.grille { display: grid; gap: 12px; width: min(1120px, 100%); margin-inline: auto; }
.carte { position: relative; overflow: hidden; background: var(--carte); border: 1px solid var(--bord); border-radius: 30px; color: var(--blanc); }
.carte-large { background: linear-gradient(rgb(8 9 10 / .88), rgb(8 9 10 / .35)), url("../img/pelouse.webp") center / cover; }
.carte-texte { padding: 30px 26px 0; }
.carte h2 { font-size: clamp(28px, 7vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.carte p { margin-top: 12px; max-width: 480px; color: var(--gris-sombre); font-size: 18px; line-height: 1.34; letter-spacing: -.01em; }
.carte p b { color: var(--blanc); font-weight: 600; }
.carte-tel { display: flex; justify-content: center; height: 480px; margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.pile-notifs { display: grid; gap: 9px; padding: 30px 22px 34px; }
.notif { display: flex; gap: 11px; align-items: center; padding: 13px 14px; border-radius: 22px; background: rgb(255 255 255 / .1); color: var(--blanc); font-family: var(--texte); font-size: 15px; line-height: 1.28; }
.notif > img { flex: none; width: 36px; height: auto; }
.notif small { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.notif small b { font-weight: 600; }
.notif time { color: rgb(255 255 255 / .55); }
.notif p, .carte .notif p { margin: 1px 0 0; color: inherit; font-size: 15px; letter-spacing: 0; }
.lu { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding: 15px 16px; border-radius: 18px; border: 1px solid var(--bord); font-size: 15px; }
.lu span { color: var(--vert); font-weight: 600; }

/* Photo pleine largeur, fondue dans le noir au-dessus */
.photo-touche { position: relative; overflow: hidden; height: 78vh; min-height: 520px; background: var(--noir); }
.photo-touche img { width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%; }
.photo-touche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#000 0, transparent 30%, transparent 48%, rgb(0 0 0 / .78) 100%); }
.photo-touche p { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 34px; color: var(--blanc); font-size: clamp(34px, 6.2vw, 68px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }

/* Sections blanches */
.blanc { padding: 90px 0; background: var(--blanc); }
.blanc-suite { padding-top: 0; }
.grand { font-size: clamp(40px, 8.4vw, 76px); font-weight: 700; line-height: 1.05; letter-spacing: -.033em; }
.sous { max-width: 620px; margin-top: 16px; color: var(--gris); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.32; letter-spacing: -.01em; }
.roles { display: grid; gap: 10px; margin-top: 36px; }
.roles div { padding: 22px; background: var(--gris-clair); border-radius: 24px; }
.roles h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.roles p { margin-top: 5px; color: var(--gris); font-size: 16px; line-height: 1.32; }

/* Couleurs */
.carte-couleurs { margin-top: 34px; background: #0c0d0e; }
.reglage { margin-top: 24px; max-width: 420px; }
.reglage label { display: block; margin-bottom: 8px; color: var(--gris-sombre); font-size: 14px; font-weight: 500; }
.reglage input { width: 100%; min-height: 54px; padding: 0 18px; border: 1px solid var(--bord); border-radius: 16px; background: rgb(255 255 255 / .07); color: var(--blanc); font-size: 17px; }
.reglage input::placeholder { color: var(--gris-sombre); }
.nuancier { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 16px; }
.nuancier button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); transition: transform .2s var(--vite); }
.nuancier button:hover { transform: scale(1.1); }
.nuancier .actif { outline: 2px solid var(--blanc); outline-offset: 3px; }
.apercu { padding: 66px 18px 0; background: linear-gradient(170deg, var(--club-profond), #0a0d0b); transition: background .3s; }
.adresse { padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .94); color: #111; font-family: var(--texte); font-size: 15px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 26px; text-align: center; font-family: var(--texte); }
.icones > div { display: grid; justify-items: center; gap: 6px; }
.icones small { font-size: 12.5px; }
.ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 17px; background: #fff; }
.ic.vide { background: rgb(255 255 255 / .15); }
.blason { flex: none; display: block; width: 44px; height: 50px; padding: 2px; background: var(--club-accent); clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%); }
.blason i { display: grid; place-items: center; width: 100%; height: 100%; padding-bottom: 10%; background: var(--club); color: var(--sur-club); font-family: var(--a-titre); font-size: 16px; font-style: normal; font-weight: 800; clip-path: polygon(50% 0, 100% 12%, 100% 62%, 50% 100%, 0 62%, 0 12%); }
.apercu .notif { background: rgb(255 255 255 / .92); color: #111; backdrop-filter: none; }
.apercu .notif time { color: #666; }
.apercu-tuile { display: grid; gap: 8px; margin-top: 12px; }
.apercu-tuile small { font-size: 14px; font-weight: 600; }
.apercu-tuile b { font-family: var(--a-titre); font-size: 52px; font-weight: 800; line-height: 1; }

/* Mineurs */
.mineurs { padding: 100px 0; background: var(--noir); color: var(--blanc); }
.mineurs .sous { color: var(--gris-sombre); }
.carte-tableau { margin-top: 36px; padding: 10px 16px; }
.carte-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.25; }
.carte-tableau thead th { padding: 14px 8px; color: var(--gris-sombre); font-size: 13px; font-weight: 500; text-align: left; }
.carte-tableau tbody th { padding: 15px 8px; font-weight: 500; text-align: left; }
.carte-tableau td { padding: 15px 8px; }
.carte-tableau tbody tr { border-top: 1px solid var(--bord); }
.oui { color: var(--vert); font-weight: 500; }
.non { color: var(--gris-sombre); }

/* Partenaires : la zone entourée sur la vraie capture */
.grille-partenaires { margin-top: 34px; }
.zone { position: absolute; z-index: 2; border: 3px solid #ffd60a; border-radius: 16px; box-shadow: 0 0 0 0 rgb(255 214 10 / .45); animation: signal 2.2s ease-out infinite; }
@keyframes signal { to { box-shadow: 0 0 0 14px rgb(255 214 10 / 0); } }

/* Tarif */
.tarif { max-width: 620px; margin-top: 34px; padding: 28px 24px; background: var(--gris-clair); border-radius: 30px; }
.tarif-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 17px; font-weight: 500; }
.tarif-ligne output { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tarif input { display: block; width: 100%; min-height: 44px; margin-top: 6px; accent-color: var(--encre); cursor: pointer; }
.tarif-total { margin-top: 14px; }
.tarif-total strong { display: block; font-size: clamp(60px, 13vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tarif-total span { display: block; margin-top: 8px; color: var(--gris); font-size: 18px; }

/* Questions */
.faq { margin-top: 30px; }
.faq details { border-top: 1px solid #e3e3e0; }
.faq details:last-child { border-bottom: 1px solid #e3e3e0; }
.faq summary { position: relative; padding: 21px 44px 21px 0; font-size: 19px; font-weight: 600; line-height: 1.26; letter-spacing: -.015em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 16px; color: var(--gris); font-size: 28px; font-weight: 300; line-height: 1.2; transition: rotate .25s var(--vite); }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 44px 22px 0; color: var(--gris); font-size: 17px; line-height: 1.4; }

/* Final */
.final { padding: 100px 0; background: linear-gradient(rgb(0 0 0 / .35), rgb(0 0 0 / .6)), url("../img/fond-stade.webp") 50% 60% / cover var(--noir); color: var(--blanc); }
.final-grille { display: grid; gap: 40px; }
.final-texte > p { margin-top: 14px; color: var(--gris-sombre); font-size: 21px; letter-spacing: -.01em; }
.final .contact { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 17px; }
.final .contact a { color: var(--blanc); font-weight: 500; text-underline-offset: 4px; overflow-wrap: anywhere; }
.engagement { display: grid; padding: 26px 22px; background: rgb(16 18 19 / .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--bord); border-radius: 30px; }
.engagement label { margin: 14px 0 7px; color: var(--gris-sombre); font-size: 14px; font-weight: 500; }
.engagement label:first-child { margin-top: 0; }
.engagement input, .engagement select { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid var(--bord); border-radius: 16px; background: rgb(255 255 255 / .07); color: var(--blanc); font-size: 17px; }
.engagement select option { color: #111; }
.engagement small { margin-top: 12px; color: var(--gris-sombre); font-size: 13px; text-align: center; }

.pied { padding: 28px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--noir); border-top: 1px solid var(--bord); color: var(--gris-sombre); font-size: 14px; }
.pied .largeur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* Apparition */
.js .apparait { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s var(--vite), transform .8s var(--vite); }
.js .apparait.vue { opacity: 1; transform: none; }

@media (min-width: 620px) {
  .main { --l: 700; }
  .roles { grid-template-columns: repeat(2, 1fr); }
  .carte-tableau table { font-size: 17px; }
}

@media (min-width: 900px) {
  br.m { display: none; }
  .nav { padding-left: 14px; }
  .ouverture { padding-top: 138px; background: linear-gradient(#fff 0, #fff 74%, #000 99%); }
  .ouverture-tel { margin-top: 56px; }
  .main { --l: 860; }
  .phrase { padding: 90px 40px 170px; }
  .grille { grid-template-columns: 1fr 1fr; gap: 16px; }
  .carte-large { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: linear-gradient(90deg, rgb(8 9 10 / .85), rgb(8 9 10 / .25)), url("../img/pelouse.webp") center / cover; }
  .photo-touche p { left: max(40px, calc((100% - 1120px) / 2)); bottom: 60px; }
  .carte-large .carte-texte { padding: 56px; }
  .carte-large .carte-tel { height: 560px; margin-top: 40px; }
  .carte-texte { padding: 44px 44px 0; }
  .carte h2 { font-size: 42px; }
  .carte p { font-size: 20px; }
  .carte-tel { height: 520px; margin-top: 40px; }
  .pile-notifs { padding: 44px; }
  .blanc { padding: 150px 0; }
  .blanc-suite { padding-top: 0; }
  .roles { grid-template-columns: repeat(5, 1fr); }
  .roles-3 { grid-template-columns: repeat(3, 1fr); }
  .carte-couleurs { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; }
  .carte-couleurs .carte-texte { padding: 56px; }
  .carte-couleurs .carte-tel { height: 560px; margin-top: 40px; }
  .mineurs { padding: 150px 0; }
  .carte-tableau { padding: 16px 32px; }
  .final { padding: 150px 0; }
  .final-grille { grid-template-columns: 1fr 440px; gap: 80px; align-items: center; }
  .engagement { padding: 36px; }
}

/* Grand écran : titre à gauche, main à droite, le tout sur un seul écran */
@media (min-width: 1000px) {
  br.m { display: inline; }
  .ouverture { display: flex; align-items: center; min-height: max(100vh, 680px); padding: 0; background: linear-gradient(#fff 88%, #000 100%); }
  .ouverture-texte { position: relative; z-index: 2; width: auto; margin: 0 0 9vh max(46px, calc((100vw - 1120px) / 2 + 14px)); padding-top: 72px; text-align: left; }
  h1 { font-size: clamp(72px, min(7.2vw, 11.5vh), 116px); }
  .ouverture-texte > p { max-width: min(38vw, 470px); margin: 22px 0 0; font-size: clamp(18px, 1.6vw, 22px); }
  .reperes { justify-content: flex-start; gap: 14px 30px; }
  .reperes > div:first-child { text-align: left; }
  .ouverture-tel { position: absolute; inset: 0; display: block; margin: 0; transform-origin: 72% 100%; pointer-events: none; }
  .main { --l: 640; position: absolute; left: 72%; bottom: 0; translate: -51.9% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .apparait { opacity: 1; transform: none; }
  .js .phrase span { opacity: 1; }
}