/* Polices auto-hébergées (fichiers variables, sous-ensemble latin). */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/polices/unbounded.woff2) format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/polices/saira.woff2) format('woff2'); }
/* app.css donne à #root la hauteur de l'écran, même vide : sans cette règle,
   l'accueil commençait un écran plus bas, derrière un bloc noir. */
#root:empty { display: none; }
/* Le thème jour de l'application éclaircit html et body ; l'accueil, lui,
   est toujours nocturne. Sans ceci, le rebond du défilement sur iPhone
   laissait voir un bord clair au-dessus et en dessous de la page. */
html:not([data-mode='jour']):has(#accueil:not([hidden])) { background: #07070A; }
html:not([data-mode='jour']):has(#accueil:not([hidden])) body { background: #07070A; }
/* Feuille de la page d'accueil, hors application. Générée depuis les
   aperçus (apercu-landing/), préfixée par #accueil pour ne rien partager
   avec app.css. */
/* Socle partagé des quatre aperçus de landing.
   Chaque page pose ses propres couleurs et sa propre typo ; ici seulement
   ce qui ne change pas : reset, formulaire d'entrée, pied de page, cartouche
   « ce qui est fabriqué ». Fichier de maquette, pas de production. */
#accueil *, #accueil *::before, #accueil *::after { box-sizing: border-box; }
#accueil * { margin: 0; padding: 0; }
#accueil { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#accueil { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100dvh; }
#accueil button, #accueil input { font: inherit; color: inherit; }
#accueil button { background: none; border: 0; cursor: pointer; }
#accueil a { color: inherit; text-decoration: none; }
#accueil ul, #accueil ol { list-style: none; }
#accueil img, #accueil svg { display: block; max-width: 100%; }
#accueil ::selection { background: var(--sel, #E30613); color: var(--sel-tx, #fff); }
#accueil :focus-visible { outline: 2px solid var(--focus, #FF2A38); outline-offset: 3px; }
#accueil .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  #accueil *, #accueil *::before, #accueil *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Le logotype, image officielle ---- */
#accueil .marque {
  display: block; width: 132px; aspect-ratio: 780 / 124;
  background: url(/logo-sombre.png) left center / contain no-repeat;
}
#accueil .marque.clair { background-image: url(/logo-clair.png); }

/* ---- Le formulaire d'entrée, commun aux quatre ---- */
#accueil .entree { display: grid; gap: 12px; width: 100%; max-width: 420px; }
#accueil .entree .champ { display: grid; gap: 6px; }
#accueil .entree label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .72; }
#accueil .entree input {
  height: 48px; border-radius: 12px; padding: 0 14px; width: 100%;
  background: var(--in-bg, rgba(255,255,255,.06)); border: 1px solid var(--in-line, rgba(255,255,255,.14));
  caret-color: var(--focus, #FF2A38);
}
#accueil .entree input::placeholder { color: var(--ph, rgba(255,255,255,.42)); }
#accueil .entree input:focus { outline: 0; border-color: var(--focus, #FF2A38); box-shadow: 0 0 0 3px var(--focus-soft, rgba(227,6,19,.22)); }
#accueil .entree .cgu { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; opacity: .85; }
#accueil .entree .cgu input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent, #E30613); flex: none; }
#accueil .entree .cgu a { text-decoration: underline; text-underline-offset: 3px; }
#accueil .lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 16px;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s, box-shadow .18s;
  white-space: nowrap;
}
#accueil .lbtn:active { transform: scale(.97); }
#accueil .lbtn-plein { background: var(--accent, #E30613); color: #fff; box-shadow: 0 10px 28px -12px rgba(227,6,19,.7); }
#accueil .lbtn-plein:hover { background: #F0111F; box-shadow: 0 14px 32px -12px rgba(227,6,19,.8); }
#accueil .lbtn-contour { border: 1.5px solid currentColor; }
#accueil .lbtn-contour:hover { background: rgba(127,127,127,.12); }
#accueil .lbtn-google { background: #fff; color: #111; }
#accueil .lbtn-google:hover { background: #f2f2f2; }
#accueil .lbtn-bloc { width: 100%; }
#accueil .sep { display: flex; align-items: center; gap: 12px; font-size: 12px; opacity: .6; }
#accueil .sep::before, #accueil .sep::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* ---- Pied de page ---- */
#accueil .pied { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; opacity: .7; }
#accueil .pied a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* Registre commun de la deuxième série (F → J), hérité de E :
   salle de contrôle, verre, arête lumineuse, révélation au scroll.
   Chaque page n'ajoute que sa scène. Fichier de maquette. */
#accueil {
  height: auto; min-height: 100dvh; overflow-x: clip;
  --bg: #07070A; --tx: #F3F5F9; --tx-2: #9AA3B5; --tx-3: #6B7382;
  --accent: #E30613; --accent-tx: #FF2A38; --pitch: #2BD98A; --cyan: #5EE7FF;
  --verre: rgba(255,255,255,.04); --verre-bord: rgba(255,255,255,.12);
  --sel: #E30613; --sel-tx: #fff; --focus: #FF2A38; --focus-soft: rgba(227,6,19,.25);
  --display: 'Unbounded', system-ui, sans-serif; --texte: 'Saira', system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
#accueil { background: var(--bg); color: var(--tx); font: 400 16px/1.5 var(--texte); overflow-x: clip; }
#accueil canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#accueil .cadre { width: min(1120px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
@media (max-width: 640px) { #accueil .cadre { width: calc(100% - 32px); } }

#accueil .barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
#accueil .barre nav { display: flex; align-items: center; gap: 8px 18px; }
#accueil .barre .lien { font-size: 13px; font-weight: 600; color: var(--tx-2); padding: 8px 4px; letter-spacing: .04em; text-transform: uppercase; }
#accueil .barre .lien:hover { color: var(--tx); }
#accueil .barre .lbtn { height: 42px; font-size: 14px; }
@media (max-width: 640px) { #accueil .barre .lien { display: none; } }

#accueil .heros { min-height: calc(100dvh - 80px); display: grid; align-content: center; gap: 22px; padding: 24px 0 60px; }
#accueil .statut { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--verre-bord); background: var(--verre); backdrop-filter: blur(12px); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-2); }
#accueil .statut i { width: 8px; height: 8px; border-radius: 50%; background: var(--pitch); box-shadow: 0 0 10px var(--pitch); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
#accueil h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.8vw, 78px); line-height: 1.02; letter-spacing: -.03em; max-width: 15ch; text-wrap: balance; }
#accueil h1 .mot { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(24px); animation: entre .9s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms); }
#accueil h1 em { font-style: normal; color: var(--accent-tx); }
@keyframes entre { to { opacity: 1; filter: blur(0); transform: none; } }
#accueil .lede { max-width: 50ch; color: var(--tx-2); font-size: clamp(16px, 1.5vw, 18px); }
#accueil .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
#accueil .lbtn-contour { border-color: var(--verre-bord); background: var(--verre); backdrop-filter: blur(12px); }
#accueil .sans { font-size: 14px; color: var(--tx-2); text-decoration: underline; text-underline-offset: 4px; }

#accueil .reveal { opacity: 0; transform: translateY(28px); filter: blur(10px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
#accueil .reveal.vu { opacity: 1; transform: none; filter: none; }
#accueil section { padding: clamp(40px, 7vw, 90px) 0 0; }
#accueil h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
#accueil h2 + p { margin-top: 12px; color: var(--tx-2); max-width: 56ch; }

#accueil .verre { position: relative; border-radius: 20px; padding: 22px; background: var(--verre); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--verre-bord); overflow: hidden; isolation: isolate; }
#accueil .verre.arete::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(255,42,56,.9) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tourne 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tourne { to { --a: 360deg; } }
#accueil .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
#accueil .v { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; margin-top: 8px; }
#accueil .v small { font-size: 15px; color: var(--tx-2); letter-spacing: 0; margin-left: 6px; font-family: var(--texte); font-weight: 600; }
#accueil .panneaux { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 860px) { #accueil .panneaux { grid-template-columns: repeat(3, 1fr); } }
#accueil .panneaux p { margin-top: 10px; font-size: 14px; color: var(--tx-2); line-height: 1.45; }

#accueil .entree-bloc { margin-top: clamp(56px, 8vw, 96px); padding: clamp(28px, 5vw, 56px); display: grid; gap: 28px; }
@media (min-width: 860px) { #accueil .entree-bloc { grid-template-columns: 1fr 1fr; align-items: center; } }
#accueil .entree-bloc p { margin-top: 12px; color: var(--tx-2); max-width: 46ch; }
#accueil footer { padding: 40px 0 60px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #accueil h1 .mot { animation: none; opacity: 1; filter: none; transform: none; } #accueil .reveal { opacity: 1; transform: none; filter: none; } #accueil .verre.arete::before { animation: none; } }


/*
  DIRECTION K — « Terrain + flux » (fusion demandée par Julen : le haut de F, le bas de G)
  Scène : un terrain de rugby en fil de lumière, vu en plongée, sur lequel
  quinze points s'assemblent en formation — le vrai XV d'Atlantic Blue Rugby
  Club, le club de Ben. Le terrain bascule avec le pointeur et se redresse au
  scroll. Ce que le visiteur retient : composer son XV est le geste central.
*/
#accueil .heros { grid-template-columns: 1fr; }
/* Le héros ne se centre plus dans la hauteur de l'écran : le titre arrive
   tout de suite sous la barre. La place en bas reste large pour laisser le
   terrain respirer sous les boutons. */
#accueil .heros { min-height: 0; align-content: start; padding-top: clamp(4px, 1.5vh, 20px); padding-bottom: clamp(140px, 30vh, 320px); gap: 16px; }

#accueil .xv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; }
#accueil .xv li { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--verre); border: 1px solid var(--verre-bord); }
#accueil .xv b { font-family: var(--display); font-weight: 800; color: var(--accent-tx); font-size: 13px; min-width: 18px; }
#accueil .xv span { color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accueil .xv li.d { grid-column: span 3; justify-content: center; background: rgba(227,6,19,.12); }
@media (max-width: 640px) { #accueil .xv { grid-template-columns: repeat(2, 1fr); } #accueil .xv li.d { grid-column: span 2; } }
#accueil .tunnel { position: relative; height: clamp(340px, 52vh, 520px); perspective: 900px; perspective-origin: 50% 40%; margin-top: 10px; }
#accueil .tunnel .m {
  position: absolute; left: 50%; top: 50%; width: min(420px, 78vw); padding: 14px 18px; border-radius: 14px;
  background: rgba(10,10,14,.72); border: 1px solid var(--verre-bord); backdrop-filter: blur(8px);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; font-size: 14px;
  transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), calc(var(--z) * 1px)); opacity: var(--o, 1);
  transition: transform .15s linear, opacity .15s linear;
}
#accueil .tunnel .m span:last-child { text-align: right; }
#accueil .tunnel .m b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--accent-tx); white-space: nowrap; }
#accueil .tunnel .m .g { color: var(--tx); font-weight: 600; }
#accueil .tunnel .m span { color: var(--tx-2); }
#accueil .tunnel .m.h { border-color: rgba(43,217,138,.5); }
#accueil .tunnel .m.h::after { content: 'vrai manager'; position: absolute; top: -9px; right: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pitch); background: var(--bg); padding: 0 6px; }
#accueil .flux-etat { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-top: 8px; }
#accueil .flux-etat b { color: var(--tx); }
#accueil .tunnel { margin-top: 24px; overflow: hidden; contain: layout paint; }
#accueil .tunnel::before { content: ''; position: absolute; inset: -10% -20%; background: radial-gradient(60% 50% at 50% 55%, rgba(227,6,19,.22), transparent 70%); pointer-events: none; }

/* ---- Animations au défilement (demandées) ----
   Chaque section se révèle quand elle entre à l'écran : le titre mot à mot,
   puis ses enfants en cascade (cartes, paragraphes, formulaire), avec un
   léger décalage. Le héros s'éloigne doucement quand on descend. Tout est
   transform / opacity / filter : rien ne recalcule la mise en page. */
#accueil .reveal { transition: none; opacity: 1; transform: none; filter: none; }
#accueil .reveal > * { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
#accueil .reveal.vu > * { opacity: 1; transform: none; filter: none; }
#accueil .reveal h2 .mot { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(6px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--j, 0) * 60ms); transform-origin: 0 100%; }
#accueil .reveal.vu h2 .mot { opacity: 1; transform: none; filter: none; }
#accueil .reveal .roles > *, #accueil .reveal .panneaux > *, #accueil .reveal .entree > * { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(200ms + var(--i, 0) * 120ms); }
#accueil .reveal.vu .roles > *, #accueil .reveal.vu .panneaux > *, #accueil .reveal.vu .entree > * { opacity: 1; transform: none; filter: none; }
#accueil .reveal .roles, #accueil .reveal .panneaux, #accueil .reveal .entree { transition-delay: 0s; }
#accueil .heros { will-change: transform, opacity; }
#accueil .tunnel .m { will-change: transform, opacity; }
#accueil .tunnel .m { transition: transform .15s linear, opacity .15s linear; }
#accueil .flux-etat { transition: opacity .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { #accueil .reveal > *, #accueil .reveal h2 .mot, #accueil .reveal .roles > *, #accueil .reveal .panneaux > *, #accueil .reveal .entree > * { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---- Les chiffres s'affichent en comptant ----
   Compteurs des panneaux : montée de 0 à la valeur, freinage en fin de course.
   Les scores du tunnel restent fixes (demandé). */
#accueil .v, #accueil .tunnel .m b { font-variant-numeric: tabular-nums; }
#accueil .compte-en-cours { filter: blur(.6px); }

/* ---- Téléphone (écran tactile) : ce que Safari mobile ne rend pas proprement ----
   1. Un flou (filter: blur) animé sur des blocs entiers saccade et clignote.
   2. Un verre dépoli (backdrop-filter) sous un parent transformé en 3D
      disparaît ou scintille ; les cartes du tunnel sont exactement ce cas.
   3. Quatre bordures en dégradé conique animées en continu pèsent trop.
   On garde le même dessin avec des fonds pleins et sans flou. */
@media (hover: none), (max-width: 700px) {
  #accueil .reveal > *, #accueil .reveal h2 .mot, #accueil .reveal .roles > *, #accueil .reveal .panneaux > *, #accueil .reveal .entree > * { filter: none !important; }
  #accueil .verre, #accueil .tunnel .m, #accueil .statut, #accueil .lbtn-contour { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #accueil .verre { background: rgba(20,20,26,.92); }
  #accueil .tunnel .m { background: rgba(12,12,16,.94); }
  #accueil .verre.arete::before { animation: none; background: linear-gradient(135deg, rgba(255,42,56,.5), transparent 40%, transparent 60%, rgba(255,42,56,.25)); }
  #accueil .heros { will-change: auto; }
}
#accueil h2 em { font-style: normal; color: var(--accent-tx); }
#accueil .legende { font-size: 12px; color: var(--tx-3); margin-top: 8px; }
#accueil .roles { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 860px) { #accueil .roles { grid-template-columns: repeat(3, 1fr); } }
#accueil .roles .verre b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
#accueil .roles .verre p { margin-top: 8px; font-size: 14px; color: var(--tx-2); }


/* ---- Thème jour ----
   L'accueil suit le mode appliqué par l'application (data-mode sur <html>,
   posé par initTheme avant le premier rendu). Même dessin, palette inversée :
   papier clair, encre sombre, le rouge de la marque en texte (4,52 de
   contraste sur ce fond) et en aplat. */
html[data-mode='jour'] #accueil {
  --bg: #F4F6FB; --tx: #0F172A; --tx-2: #55617A; --tx-3: #69727F;
  --accent-tx: #E30613; --pitch: #1F9D5C; --cyan: #0E7C9B;
  --verre: rgba(255,255,255,.72); --verre-bord: rgba(15,23,42,.10);
  --sel: #E30613; --sel-tx: #fff; --focus: #E30613; --focus-soft: rgba(227,6,19,.2);
  --in-bg: #fff; --in-line: rgba(15,23,42,.18); --ph: #8A93A6;
}
html[data-mode='jour'] #accueil .marque { background-image: url(/logo-clair.png); }
html[data-mode='jour'] #accueil .lbtn-google { border: 1px solid rgba(15,23,42,.14); }
html[data-mode='jour'] #accueil .lbtn-plein { box-shadow: 0 10px 24px -12px rgba(227,6,19,.5); }
html[data-mode='jour'] #accueil .tunnel .m { background: rgba(255,255,255,.9); border-color: rgba(15,23,42,.12); box-shadow: 0 12px 30px -18px rgba(15,23,42,.35); }
html[data-mode='jour'] #accueil .tunnel .m.h { border-color: rgba(31,157,92,.55); }
html[data-mode='jour'] #accueil .tunnel::before { background: radial-gradient(60% 50% at 50% 55%, rgba(227,6,19,.12), transparent 70%); }
html[data-mode='jour'] #accueil .verre { box-shadow: 0 10px 30px -22px rgba(15,23,42,.35); }
html[data-mode='jour'] #accueil .verre.arete::before { background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(227,6,19,.7) 85%, transparent 100%); }
html[data-mode='jour'] #accueil .statut i { box-shadow: 0 0 8px rgba(31,157,92,.6); }
html[data-mode='jour'] #accueil ::selection { background: #E30613; color: #fff; }
@media (hover: none), (max-width: 700px) {
  html[data-mode='jour'] #accueil .verre { background: rgba(255,255,255,.92); }
  html[data-mode='jour'] #accueil .tunnel .m { background: rgba(255,255,255,.96); }
}