/* Drop League — site public. Charte SPECS §4 ter : le vert ne teinte que le
   bandeau haut, les surfaces sont neutres, l'orange est l'accent. */
:root{
  --vert:#193925; --vert-haut:#1F5636; --orange:#F28E00; --blanc:#F5F7FA;
  --bg:#F3F5EF; --surface:#FFFFFF; --surface-2:#EAEEE3;
  --text:#171C18; --text-soft:#57604F; --accent:#8F5400; --line:#D8DCCF;
  --shadow:0 1px 2px rgba(23,28,24,.06);
  --ok:#17663A; --bouton-a:#FFB54B; --bouton-b:#FF9703;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101312; --surface:#191D1B; --surface-2:#151917;
    --text:#F5F7FA; --text-soft:#93A395; --accent:#F28E00; --line:#2A302D;
    --shadow:none;
    --ok:#52D17E;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
::selection{background:var(--accent);color:var(--vert)}

/* Bandeau — le seul endroit vert */
header{background:var(--vert-haut);color:var(--blanc);border-bottom:4px solid var(--vert)}
header .in{max-width:800px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header a.marque{display:flex;align-items:center;gap:12px;color:var(--blanc);text-decoration:none}
header img{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.3)}
header .nom{font-weight:800;font-size:19px;letter-spacing:.12em;text-transform:uppercase}
header nav{margin-left:auto;display:flex;gap:18px;font-size:14px;font-weight:600;flex-wrap:wrap}
header nav a{color:rgba(245,247,250,.82);text-decoration:none}
header nav a:hover,header nav a[aria-current]{color:var(--blanc);text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){ header nav{margin-left:0;width:100%;gap:14px;font-size:13.5px} }

main{max-width:800px;margin:0 auto;padding:36px 20px 28px}

/* Tête de page */
.sur-titre{display:inline-block;color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
h1{font-size:clamp(26px,4.4vw,38px);line-height:1.15;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.maj{color:var(--text-soft);font-size:14px;margin:0 0 22px}
.maj code{font:inherit;color:var(--text)}
.chapo{font-size:17.5px;line-height:1.6;color:var(--text);margin:0 0 20px}

/* Cartes */
.carte{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin:0 0 18px}
.carte h2{margin:0 0 10px}
.carte > :last-child{margin-bottom:0}
h2{font-size:20px;line-height:1.3;margin:36px 0 12px;letter-spacing:-.005em}
h3{font-size:15.5px;margin:18px 0 8px}
p,li{color:var(--text)}
p{margin:0 0 12px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
ul{padding-left:20px;margin:0 0 12px}
li{margin:0 0 6px}
strong{font-weight:700}
.legende,.note{color:var(--text-soft);font-size:14px;line-height:1.5}
.note{margin-top:14px}

/* Encadré positionnement */
.encadre{border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:12px;padding:12px 16px;margin:0 0 26px;background:var(--surface);font-size:15px}
.encadre p{margin:0}

/* En bref : grille de promesses */
.bref{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 30px}
@media (max-width:560px){ .bref{grid-template-columns:1fr} }
.bref .item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.bref .ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.bref .ico svg{display:block}
.bref b{display:block;font-size:15px;margin-bottom:2px}
.bref span{display:block;color:var(--text-soft);font-size:14px;line-height:1.45}

/* Lignes de données */
.donnees{list-style:none;padding:0;margin:0}
.donnees li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:11px 0;border-top:1px solid var(--line);margin:0}
.donnees li:first-child{border-top:0;padding-top:0}
.donnees b{display:block;font-size:15.5px}
.donnees span{display:block;color:var(--text-soft);font-size:14.5px}
.donnees .base{display:inline-block;align-self:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);
  background:var(--surface-2);border:1px solid color-mix(in srgb,var(--text-soft) 35%,transparent);border-radius:999px;padding:3px 10px;white-space:nowrap}
.donnees .base.choix{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
@media (max-width:480px){ .donnees li{grid-template-columns:1fr} .donnees .base{justify-self:start} }
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Prestataires */
.presta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 0}
@media (max-width:560px){ .presta{grid-template-columns:1fr} }
.presta .p{background:var(--surface-2);border-radius:12px;padding:12px 14px}
.presta b{display:block;font-size:15px}
.presta span{display:block;font-size:14px;color:var(--text-soft);line-height:1.45}
.presta .ou{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.presta .ou.ue{color:var(--ok)}

/* Pas à pas (droits) */
.pas{list-style:none;padding:0;margin:0;counter-reset:pas}
.pas li{position:relative;padding:0 0 10px 40px;margin:0;counter-increment:pas}
.pas li::before{content:counter(pas);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,var(--bouton-a),var(--bouton-b));color:var(--vert);font-weight:800;font-size:13px;display:grid;place-items:center}

/* Boutons */
.bouton{display:inline-block;background:linear-gradient(180deg,var(--bouton-a),var(--bouton-b));color:var(--vert);
  font-weight:800;text-decoration:none;border-radius:12px;padding:12px 18px;margin:6px 0 4px;transition:filter .15s}
.bouton:hover{filter:brightness(1.04)}
.bouton:active{filter:brightness(.96)}
.bouton:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bouton.fantome{background:transparent;color:var(--text);border:1px solid var(--text-soft)}

/* Tableaux (support, ailleurs) */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--surface-2);padding:1px 6px;border-radius:6px}

footer{max-width:800px;margin:20px auto 0;padding:18px 20px 40px;border-top:1px solid var(--line);color:var(--text-soft);font-size:14px;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer a{color:var(--text-soft)}
footer .droite{margin-left:auto}

@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#f2f2f2;--text:#000;--text-soft:#333;--accent:#000;--line:#999;--shadow:none}
  header,footer,.bouton{display:none}
  .carte,.bref .item,.donnees li,.pas li,.presta .p{break-inside:avoid}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.9em}
}

/* =====================================================================
   ACCUEIL — le sommet occupe la hauteur de l'écran, pour que le bouton
   de téléchargement soit lu SANS faire défiler, sur téléphone comme sur
   ordinateur. C'est la seule raison d'être de cette section.

   Le vert reste cantonné au sommet, comme l'exige la charte (SPECS §4 ter) :
   le reste de la page garde les surfaces neutres des autres pages.
   ===================================================================== */
.sommet{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#1F5636 0%,#193925 62%);
}
.sommet header{background:transparent;border-bottom:0}

.heros{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:18px;
  padding:28px 20px 44px; color:var(--blanc);
}
.heros .baniere{width:96px;height:96px;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.heros h1{
  margin:0; font-size:clamp(34px,8vw,60px); line-height:1.05;
  letter-spacing:-.02em; font-weight:800; color:var(--blanc);
}
.heros .accentue{color:#FFB54B}
.heros .accroche{
  margin:0; max-width:34rem; font-size:clamp(16px,2.4vw,19px); line-height:1.55;
  color:rgba(245,247,250,.86);
}
.heros .menue{margin:0; max-width:38rem; font-size:13px; line-height:1.5; color:rgba(245,247,250,.6)}

.magasins{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:2px 0 0}
.bouton.grand{display:inline-flex;align-items:center;gap:10px;font-size:16px;padding:14px 22px;margin:0}
.bouton.grand svg{display:block;flex:0 0 auto}
/* Bouton d'attente : il ne clique pas, mais il garde sa place et son rang.
   Le bouton Google Play reste la couleur principale même avant la sortie —
   c'est l'action de la page ; seul le mot change le jour de la publication.
   Le bouton Apple, lui, reste discret : il annonce, il ne réclame rien. */
.bouton.attente{cursor:default}
.bouton.attente:hover{filter:none}
.bouton.attente.secondaire{
  background:transparent;color:rgba(245,247,250,.92);
  border:1px solid rgba(245,247,250,.34);
}
/* L'interrupteur : voir le commentaire en tête de index.html. */
body[data-store="bientot"] .play{display:none}
body[data-store="en-ligne"] .play-bientot{display:none}

/* Le corps de l'accueil : pleine largeur, avec sa propre gouttière. */
main.accueil{max-width:none;padding:0}
main.accueil .in{max-width:900px;margin:0 auto;padding:34px 20px 8px}
main.accueil h2.centre{text-align:center;margin:34px 0 16px}
main.accueil .in > h2.centre:first-child{margin-top:6px}

/* Les compétitions, en pastilles */
.competitions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 30px}
.competitions span{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:600;box-shadow:var(--shadow);
}

footer .mention{width:100%;margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-soft)}

@media (max-width:640px){
  .heros{gap:15px;padding:20px 18px 34px}
  .heros .baniere{width:80px;height:80px;border-radius:20px}
  .magasins{flex-direction:column;align-self:stretch}
  .bouton.grand{justify-content:center;width:100%}
}

/* Téléphone tenu à l'horizontale, petit portable : la hauteur manque avant
   la largeur. On resserre le sommet plutôt que de laisser le bouton passer
   sous la ligne de flottaison — c'est toute la promesse de cette page. */
@media (max-height:560px){
  .heros{gap:10px;padding:14px 18px 22px}
  .heros .baniere{width:56px;height:56px;border-radius:14px}
  .heros h1{font-size:clamp(26px,5vw,36px)}
  .heros .accroche{font-size:15px;line-height:1.45}
  .heros .menue{display:none}
  .magasins{flex-direction:row;align-self:auto}
  .bouton.grand{width:auto;padding:11px 17px;font-size:14.5px}
}

@media print{
  .sommet{min-height:0;background:none}
  .heros{color:#000;padding:0 0 12px}
  .heros .accroche,.heros .menue{color:#333}
  .magasins{display:none}
}