/* Page d'accueil provisoire de dlgcompetition.fr, en attendant le site complet.
   Charte : 01-charte/CHARTE.md (Archivo seule, en trois largeurs ; carbone, fumée, chromes, jaune DLG). */
@font-face {
  font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/archivo-italic-100-900-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/archivo-normal-100-900-latin.woff2) format('woff2');
}
:root {
  --carbone: #08090C; --fumee: #F2F2F0; --gris: #9AA0A9;
  --chrome-1: #E9EBEE; --chrome-2: #C6C9CE; --chrome-3: #868E97;
  --jaune: #FAC502; --jaune-vif: #FDE403;
  --glisse: cubic-bezier(.16, 1, .3, 1);
  --marge: clamp(16px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--carbone); color: var(--fumee); color-scheme: dark; }
body { font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

/* La photo de l'arrivée en glisse occupe le haut de l'écran et se fond dans le noir ;
   le texte se pose dessous, sur l'asphalte : la voiture reste entière et dégagée. */
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; overflow: hidden; }
.scene picture { display: contents; }
.barre { grid-row: 1; } main { grid-row: 2; } .pied { grid-row: 3; }   /* placement explicite : le contenu de <picture> n'a pas de rangée */
.fond {
  position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: max(68vh, 420px); object-fit: cover; object-position: 45% 42%;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,0) 18%);
}

.barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--marge) 0; }
.logo img { display: block; height: clamp(34px, 3.6vw, 46px); width: auto; }
.reseaux { display: flex; gap: 8px; }
.reseaux a { display: grid; place-items: center; width: 42px; height: 42px; color: var(--fumee); background: rgba(8,9,12,.35); box-shadow: inset 0 0 0 1px rgba(233,235,238,.3); transition: color .2s, box-shadow .2s; }
.reseaux a:hover { color: var(--jaune); box-shadow: inset 0 0 0 1px var(--jaune); }
.reseaux svg { width: 18px; height: 18px; }

main { align-self: end; max-width: 1180px; padding: 0 var(--marge) clamp(24px, 4vh, 44px); animation: monter .9s var(--glisse) .15s both; }
@keyframes monter { from { opacity: 0; transform: translateY(18px); } }
.discipline { display: flex; align-items: center; gap: 12px; font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-2); }
.discipline::before { content: ""; width: 22px; height: 2px; background: var(--jaune); flex: none; }
h1 {
  margin-top: 14px; font-stretch: 62%; font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, min(7.4vw, 12vh), 132px); line-height: .84; letter-spacing: -.01em; padding-right: .06em;
  text-shadow: 0 6px 40px rgba(0,0,0,.45);
}
h1 span { white-space: nowrap; }
.texte { margin-top: 24px; max-width: 36em; padding-left: 16px; border-left: 2px solid var(--jaune); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.btn {
  display: inline-flex; align-items: center; padding: 16px 28px; text-decoration: none;
  background: var(--jaune); color: var(--carbone);
  font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background .18s, transform .18s var(--glisse);
}
.btn:hover { background: var(--jaune-vif); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible { outline: none; background: var(--fumee); }
.mail { font-size: 15px; text-decoration: none; color: var(--chrome-1); border-bottom: 1px solid rgba(250,197,2,.7); padding-bottom: 2px; }
.mail:hover { color: var(--jaune); }
.en { margin-top: 26px; max-width: 44em; font-size: 13px; line-height: 1.5; color: var(--gris); }
.en a { color: var(--chrome-2); }
.pied { padding: 0 var(--marge) max(18px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--chrome-3); }

/* Téléphone : photo verticale, la voiture dans la moitié haute, le nom sur deux lignes. */
@media (max-aspect-ratio: 3/4) {
  .fond { height: max(62vh, 380px); object-position: 50% 44%; }
  h1 span { display: block; }
}
@media (max-width: 480px) {
  .btn { padding: 15px 22px; }
  .mail { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .btn { transition: none; }
}