/* ==========================================================================
   Alive — le one-pager, section par section
   Les sections alternent sombre et clair. Dans une « scène », le visuel reste
   en place et le texte défile de côté, étape par étape (voir « le fil »).
   La page, elle, se descend d'un trait : rien n'est épinglé.
   ========================================================================== */

.theme-sombre, .theme-clair { background: var(--noir); color: var(--blanc); position: relative; }

/* ---------- Scène épinglée ---------- */
.scene { position: relative; }
.scene__colle {
  position: relative;
  min-height: 100svh;
  padding: clamp(72px, 10vh, 120px) 0 clamp(96px, 14vh, 150px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.scene__grille {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

/* Les visuels alternent : à droite, puis à gauche, pour donner du rythme */
.scene__grille--inverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.scene__grille--inverse > :first-child { order: 2; }

/* Titre de section + étapes textuelles */
.scene__titre { margin-bottom: clamp(22px, 3vh, 36px); font-size: clamp(2rem, 3.7vw, 3.35rem); max-width: 560px; }

/* ---------- Le fil : le texte défile de côté, le visuel reste en place ----------
   Chaque étape glisse horizontalement, toute seule au bout d'un temps de
   lecture, ou à la main (glisser, flèches, points). L'étape suivante dépasse
   à droite pour inviter à glisser. Sous le texte, le point de l'étape en
   cours s'étire en barre qui se remplit : le temps qu'il reste avant la suite. */
.fil { --largeur: 88%; position: relative; max-width: 520px; }
.fil__piste {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  transform: translateX(calc(var(--i, 0) * var(--largeur) * -1 + var(--tire, 0px)));
  transition: transform .8s var(--sortie);
}
.scene__colle { touch-action: pan-y; }
.scene.tire .scene__colle { cursor: grabbing; user-select: none; }
.scene.tire .fil__piste { transition: none; cursor: grabbing; }
.fil__pas {
  flex: 0 0 var(--largeur);
  padding-right: 28px;
  opacity: .16;
  transition: opacity .6s var(--sortie);
  cursor: pointer;
}
.fil__pas.actif { opacity: 1; cursor: inherit; }
.fil__num { display: block; font-size: .78rem; letter-spacing: .08em; color: var(--gris-bas); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.fil__titre { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.2; margin: 0 0 10px; color: var(--blanc); }
.fil--titres .fil__titre { font-size: clamp(1.35rem, 1.85vw, 1.7rem); font-weight: 700; text-wrap: pretty; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 12px; max-width: 22ch; }
.fil--titres .fil__num { margin-bottom: 10px; }
/* un grand titre ne dépasse pas à droite : l'étape suivante arrive en glissant */
.fil--titres .fil__pas:not(.actif) { opacity: 0; }
.fil__pas p { margin: 0; color: var(--gris); line-height: 1.55; font-size: 1rem; max-width: 40ch; }
.fil__piste-cadre { overflow: hidden; margin: -12px 0; padding: 12px 0; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }

.scene__colle { flex-direction: column; justify-content: center; }
.fil__commandes {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vh, 40px);
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
.fil__points {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 16px; border-radius: 99px;
  background: color-mix(in srgb, var(--blanc) 8%, transparent);
  backdrop-filter: blur(12px);
}
.fil__point {
  position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px;
  background: var(--trait-fort); cursor: pointer; overflow: hidden;
  transition: width .5s var(--sortie), background .3s;
}
.fil__point:hover { background: var(--gris-bas); }
.fil__point.actif { width: 44px; background: var(--trait-fort); }
.fil__point.actif::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--degrade);
  transform-origin: left; transform: scaleX(0);
}
.scene.joue .fil__point.actif::after { animation: fil-remplit var(--duree, 6s) linear forwards; }
.scene.joue.attente .fil__point.actif::after,
.scene.joue.survol .fil__point.actif::after { animation-play-state: paused; }
.scene:not(.joue) .fil__point.actif::after { transform: none; background: var(--blanc); }
@keyframes fil-remplit { to { transform: scaleX(1); } }

.fil__lecture, .fil__fleche {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--blanc) 8%, transparent); color: var(--blanc);
  backdrop-filter: blur(12px);
  cursor: pointer; font: inherit; font-size: .9rem;
  transition: background .2s, opacity .2s;
}
.fil__lecture:hover, .fil__fleche:hover { background: color-mix(in srgb, var(--blanc) 16%, transparent); }
.fil__fleche:disabled { opacity: .3; cursor: default; background: color-mix(in srgb, var(--blanc) 8%, transparent); }
.fil__lecture { margin-left: 6px; }
.fil__lecture svg { width: 12px; height: 12px; fill: currentColor; }
.scene .i-lire { display: none; }
.scene:not(.joue) .i-lire { display: inline; }
.scene:not(.joue) .i-pause { display: none; }
.fil__lecture:focus-visible, .fil__fleche:focus-visible, .fil__point:focus-visible { outline: 1px solid var(--blanc); outline-offset: 3px; }

/* ==========================================================================
   HERO (retouches)
   ========================================================================== */
.hero .t-geant { font-size: clamp(3rem, 8.2vw, 7.4rem); line-height: .9; }
.hero__ligne { max-width: 560px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--blanc); opacity: .8; }
.hero h1 { margin-bottom: 16px; }
.hero__actions { margin-top: 28px; }

/* ==========================================================================
   LE CONSTAT — le désordre qui se range
   ========================================================================== */
.desordre {
  position: relative;
  height: min(560px, 68svh);
  overflow-x: clip;
  overflow-clip-margin: 30px;
}
.bulle {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: rotate(var(--r, 0deg));
  max-width: 250px;
  padding: 10px 13px;
  font-size: .84rem;
  line-height: 1.35;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4);
  transition: opacity .6s var(--doux), transform .9s var(--sortie), left .9s var(--sortie), top .9s var(--sortie);
  animation: flotte 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes flotte { 50% { translate: 0 -6px; } }
.bulle small { display: block; font-size: .7rem; color: #777; margin-bottom: 3px; }
.bulle--wa    { background: #DCF8C6; border-radius: 8px 8px 8px 2px; }
.bulle--insta { background: #fff; border-radius: 14px; }
.bulle--appel { background: #1c1c1e; color: #fff; border-radius: 12px; z-index: 2; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); }
.bulle--appel small { color: #ff6961; }
.bulle--note  { background: #FFF4A8; font-family: 'Marker Felt', 'Comic Sans MS', cursive; font-size: .92rem; z-index: 2; }

/* étape 1 : les messages arrivent l'un après l'autre */
.desordre .bulle:not([data-vague]) { opacity: 0; transform: translateY(14px) rotate(var(--r, 0deg)); }
[data-etape='0'] .desordre .bulle:not([data-vague]),
[data-etape='1'] .desordre .bulle:not([data-vague]) { opacity: 1; transform: rotate(var(--r, 0deg)); }
[data-etape='0'] .desordre .bulle:not([data-vague]) { transition-delay: calc(var(--d) * .35); }
/* étape 2 : les appels manqués se posent par-dessus, les messages passent au second plan */
.bulle[data-vague='2'] { opacity: 0; transform: scale(.85) rotate(var(--r, 0deg)); }
[data-etape='1'] .bulle[data-vague='2'] { opacity: 1; transform: rotate(var(--r, 0deg)); transition-delay: var(--t, 0s); }
[data-etape='1'] .desordre .bulle:not([data-vague]) { opacity: .45; filter: blur(1px); }

/* étape 3 : tout se range */
[data-etape='2'] .bulle {
  opacity: 0 !important;
  left: 45% !important; top: 45% !important;
  transform: scale(.4);
  animation: none;
  transition-delay: 0s !important;
}
.liste-propre {
  position: absolute; inset: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .6s var(--doux) .25s;
}
[data-etape='2'] .liste-propre { opacity: 1; }
.liste-propre .ligne-demande { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--sortie); }
[data-etape='2'] .liste-propre .ligne-demande { opacity: 1; transform: none; }
[data-etape='2'] .liste-propre .ligne-demande:nth-child(2) { transition-delay: .35s; }
[data-etape='2'] .liste-propre .ligne-demande:nth-child(3) { transition-delay: .45s; }
[data-etape='2'] .liste-propre .ligne-demande:nth-child(4) { transition-delay: .55s; }
[data-etape='2'] .liste-propre .ligne-demande:nth-child(5) { transition-delay: .65s; }
.liste-propre__titre { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.liste-propre__titre b { font-size: 1.05rem; letter-spacing: -.02em; }

/* ==========================================================================
   VENDRE — le téléphone
   ========================================================================== */
.telephone-zone { display: grid; justify-items: center; }

/* ---------- Un iPhone réaliste ----------
   Proportions de l'iPhone 14 Pro reprises de devices.css (Yan Zhu, licence MIT,
   github.com/picturepan2/devices.css), redessiné ici : cadre en titane, verre
   noir, Dynamic Island, barre d'état, boutons et reflet. L'appareil est dessiné
   à taille réelle (428 × 868 px) puis réduit par --k. Les écrans de l'appli,
   conçus sur 290 px de large, sont agrandis pour remplir la dalle. */
.appareil {
  --k: .68;
  width: calc(428px * var(--k)); height: calc(868px * var(--k));
  position: relative;
}
.appareil::before {                 /* l'ombre portée et la lueur du club */
  content: ''; position: absolute; inset: 6% 4% -2%;
  border-radius: 20%;
  box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .95), 0 0 140px -30px color-mix(in srgb, var(--g2) 55%, transparent);
}
.iphone {
  position: absolute; left: 0; top: 0;
  width: 428px; height: 868px;
  transform: scale(var(--k)); transform-origin: 0 0;
  border-radius: 68px;
  padding: 5px;
  background:                       /* le titane, avec ses reflets */
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 3%, transparent 97%, rgba(255,255,255,.14)),
    linear-gradient(160deg, #6b6a70 0%, #2b2a2f 16%, #4a4950 34%, #1d1c21 55%, #5c5b62 78%, #2a292e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 2px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.8);
}
.iphone__verre {
  width: 100%; height: 100%;
  border-radius: 63px;
  padding: 14px;
  background: #030304;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 6px rgba(0,0,0,.9);
}
.iphone__ecran {
  position: relative;
  width: 390px; height: 830px;
  margin: -2px 0 0 -2px;
  border-radius: 49px;
  overflow: hidden;
  background: #050507;
  color: #F1F0ED;
}
.iphone__ile {
  position: absolute; top: 11px; left: 50%; z-index: 6;
  width: 122px; height: 36px; margin-left: -61px;
  border-radius: 20px; background: #000;
}
.iphone__ile i {                    /* la caméra, sous le verre */
  position: absolute; right: 13px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4a8a 0, #121526 45%, #050508 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}
.iphone__etat {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 30px 0 44px;
  font: 600 17px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.01em;
  color: #fff;
}
.iphone__icones { display: flex; gap: 6px; align-items: center; }
.iphone__icones svg { height: 12px; width: auto; fill: currentColor; }
.iphone__icones .iphone__batterie { height: 13px; }
.iphone__ecrans {
  position: absolute; left: 0; top: 0;
  width: 290px; height: 617.2px;
  transform: scale(1.3448); transform-origin: 0 0;
  font-size: 13px;
}
.iphone__reflet {                   /* le verre accroche la lumière */
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 28%, transparent 42%);
}
.iphone__bouton {
  position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #1d1c21, #5d5c63 50%, #2a292e);
}
.iphone__bouton--action { left: -3px; top: 150px; height: 32px; }
.iphone__bouton--plus   { left: -3px; top: 212px; height: 62px; }
.iphone__bouton--moins  { left: -3px; top: 290px; height: 62px; }
.iphone__bouton--veille { right: -3px; top: 240px; height: 100px; }

.ecran {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateX(8%);
  transition: opacity .5s var(--doux), transform .7s var(--sortie);
}
.ecran.actif { opacity: 1; transform: none; }
.ecran.passe { transform: translateX(-8%); }
.ecran__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecran__haut { position: absolute; top: 48px; left: 18px; right: 18px; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.7); z-index: 2; }

/* écran 1 : l'affiche de la soirée */
.affiche { position: absolute; inset: 0; background: #050507; }
.affiche__visuel {
  position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: url('../img/demo-apercu.jpg') center 35% / cover;
}
.affiche__visuel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,7,.1), #050507 96%);
}
.affiche__texte { position: absolute; left: 18px; right: 18px; bottom: 22px; display: grid; gap: 8px; }
.affiche__date { font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.affiche__nom { font-size: 25px; font-weight: 900; letter-spacing: -.045em; line-height: .95; }
.affiche__lineup { font-size: 12px; color: rgba(255,255,255,.7); }
.appli-btn {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px; font-size: 13px; font-weight: 700;
  background: #F1F0ED; color: #0B0B0E; border-radius: 3px;
}
.appli-btn--trait { background: transparent; color: #F1F0ED; border: 1px solid rgba(255,255,255,.25); }
.appli-btn--noir { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* écran 2 : la salle */
.repere {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -100%);
  padding: 5px 8px;
  font-size: 10.5px; font-weight: 700;
  background: rgba(10,10,12,.86);
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
}
.repere--choisi { background: var(--g3); border-color: transparent; color: #fff; }
.repere--choisi::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 12px; height: 12px; margin: 6px 0 0 -6px;
  border-radius: 50%; background: var(--g3);
  animation: pouls 1.6s var(--doux) infinite;
}
@keyframes pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g3) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.ecran__bas {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  padding: 14px;
  background: rgba(14,14,18,.92);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  display: grid; gap: 10px;
}
.ecran__bas b { font-size: 15px; letter-spacing: -.02em; }
.ecran__ligne { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.65); }
.ecran__ligne strong { color: #fff; font-weight: 700; }

/* écran 3 : la table */
.bouteille-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.bouteille-ligne span:last-child { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); font-size: 14px; }
.bouteille-ligne.ajoutee span:last-child { background: var(--g3); border-color: transparent; }

/* écran 4 : paiement et confirmation */
.confirme {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 12px;
  text-align: center;
  background: radial-gradient(60% 40% at 50% 40%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 70%), #050507;
}
.confirme__coche {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--degrade);
}
.confirme__coche svg { width: 30px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; }
.ecran.actif .confirme__coche svg { animation: trace .6s var(--sortie) .5s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   PILOTER — l'interface d'administration
   ========================================================================== */
.admin {
  border: 1px solid var(--trait);
  background: var(--noir-2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
}
.admin__corps { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 380px; }
.admin__liste { border-right: 1px solid var(--trait); padding: 14px; display: grid; gap: 8px; align-content: start; }
.admin__plan { padding: 14px; display: grid; align-content: start; gap: 10px; }
.admin__entete { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: var(--gris-bas); }
.admin__entete b { color: var(--blanc); font-size: .95rem; }

.admin .ligne-demande { grid-template-columns: 30px 1fr auto; padding: 10px 11px; }
.admin .ligne-demande__init { width: 30px; height: 30px; }

.ligne-demande.nouvelle { border-color: var(--g3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g3) 18%, transparent); }
.ligne-demande.nouvelle .etat { transition: background .4s, color .4s; }
[data-etape='0'] .ligne-demande.nouvelle, [data-etape='0'] .toast-demande { animation: arrive .7s var(--sortie) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(-14px); } }

.etat-bascule .apres { display: none; }
[data-etape='1'] .etat-bascule .avant, [data-etape='2'] .etat-bascule .avant, [data-etape='3'] .etat-bascule .avant { display: none; }
[data-etape='1'] .etat-bascule .apres, [data-etape='2'] .etat-bascule .apres, [data-etape='3'] .etat-bascule .apres { display: inline; }
[data-etape='1'] .ligne-demande.nouvelle, [data-etape='2'] .ligne-demande.nouvelle, [data-etape='3'] .ligne-demande.nouvelle {
  border-color: color-mix(in srgb, var(--g1) 60%, transparent);
  box-shadow: none;
}

.toast-demande {
  position: absolute; right: 14px; top: 52px;
  padding: 10px 14px;
  background: var(--blanc); color: var(--noir);
  font-size: .8rem; font-weight: 700;
  display: flex; gap: 10px; align-items: center;
  z-index: 3;
  transition: opacity .4s, transform .5s var(--sortie);
}
.toast-demande i { width: 8px; height: 8px; border-radius: 50%; background: var(--g3); }
[data-etape='1'] .toast-demande, [data-etape='2'] .toast-demande { opacity: 0; transform: translateY(-8px); }
.toast-export { opacity: 0; transform: translateY(8px); top: auto; bottom: 14px; }
[data-etape='3'] .toast-export { opacity: 1; transform: none; }
[data-etape='3'] .toast-arrivee { opacity: 0; }

.mini-plan { width: 100%; height: auto; }
.mini-plan .t { fill: var(--noir-4); stroke: var(--trait-fort); stroke-width: 1; transition: fill .5s var(--doux); }
.mini-plan .t.prise { fill: color-mix(in srgb, var(--blanc) 40%, var(--noir-2)); }
[data-etape='2'] .mini-plan .t.a-remplir, [data-etape='3'] .mini-plan .t.a-remplir { fill: color-mix(in srgb, var(--blanc) 40%, var(--noir-2)); }
[data-etape='1'] .mini-plan .t.la, [data-etape='2'] .mini-plan .t.la, [data-etape='3'] .mini-plan .t.la { fill: var(--g3); }
.mini-plan .zone { fill: transparent; stroke: none; transition: fill .6s var(--doux); }
[data-etape='3'] .mini-plan .zone-1 { fill: color-mix(in srgb, var(--g1) 22%, transparent); }
[data-etape='3'] .mini-plan .zone-2 { fill: color-mix(in srgb, var(--g3) 20%, transparent); }
[data-etape='3'] .mini-plan .zone-3 { fill: color-mix(in srgb, var(--g2) 24%, transparent); }
.mini-plan text { font-size: 9px; fill: var(--gris-bas); font-family: inherit; }
.mini-plan .libelle-zone { font-size: 10px; font-weight: 700; opacity: 0; transition: opacity .5s; }
[data-etape='3'] .mini-plan .libelle-zone { opacity: 1; }
.admin__compteur { display: flex; gap: 20px; font-size: .8rem; color: var(--gris-bas); }
.admin__compteur b { display: block; font-size: 1.3rem; color: var(--blanc); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   FAIRE REVENIR — le nuage de clients
   ========================================================================== */
.nuage { position: relative; height: min(560px, 68svh); border: 1px solid var(--trait); background: var(--noir-2); overflow: hidden; }
.nuage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nuage__carte {
  position: absolute;
  padding: 14px 16px;
  background: var(--noir);
  border: 1px solid var(--trait-fort);
  font-size: .84rem;
  display: grid; gap: 6px;
  min-width: 220px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--doux), transform .6s var(--sortie);
  z-index: 2;
}
.nuage__carte b { font-size: 1rem; letter-spacing: -.02em; }
.nuage__carte .ecran__ligne { color: var(--gris); }
.nuage__carte .ecran__ligne strong { color: var(--blanc); }
.carte-fiche { left: 24px; top: 24px; }
.carte-campagne { right: 24px; top: 24px; }
.carte-remplissage { right: 24px; bottom: 24px; }
[data-etape='0'] .carte-fiche,
[data-etape='2'] .carte-campagne,
[data-etape='3'] .carte-campagne,
[data-etape='3'] .carte-remplissage { opacity: 1; transform: none; }
.jauge { height: 6px; background: var(--noir-4); position: relative; overflow: hidden; }
.jauge i { position: absolute; inset: 0; background: var(--degrade); transform-origin: left; transform: scaleX(.38); transition: transform 1.4s var(--sortie) .3s; }
[data-etape='3'] .jauge i { transform: scaleX(.86); }
.etiquette-seg {
  position: absolute;
  font-size: .78rem; font-weight: 700;
  padding: 4px 9px;
  border: 1px solid var(--trait-fort);
  background: var(--noir);
  transform: translate(-50%, 0);
  opacity: 0; transition: opacity .5s var(--doux) .5s;
  z-index: 2;
  white-space: nowrap;
}
.etiquette-seg span { color: var(--gris-bas); font-weight: 400; margin-left: 5px; }
[data-etape='1'] .etiquette-seg, [data-etape='2'] .etiquette-seg { opacity: 1; }
[data-etape='3'] .etiquette-seg { opacity: .35; }

/* ==========================================================================
   À CHAQUE CLUB SON USAGE
   ========================================================================== */
.usages { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait); }
.usage {
  padding: clamp(28px, 4vw, 56px);
  display: grid; gap: 18px; align-content: start;
  transition: background .6s var(--doux), color .6s var(--doux);
  position: relative;
}
.usage + .usage { border-left: 1px solid var(--trait); }
.usage h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -.04em; line-height: 1; }
.usage__pour { font-size: .82rem; color: var(--gris-bas); }
.usage ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.usage li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; color: var(--gris); }
.usage li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--g2); }
.usage__scenario { padding-top: 18px; border-top: 1px solid var(--trait); font-size: .92rem; color: var(--gris); }
.usage__scenario b { color: var(--blanc); }
.usage::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--degrade); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--sortie);
}
.usage:hover::before { transform: scaleX(1); }
.usage:hover { background: var(--noir-2); }

/* ==========================================================================
   TOUT AU MÊME ENDROIT
   ========================================================================== */
.reseau { width: 100%; max-width: 760px; margin-inline: auto; display: block; overflow: visible; }
.reseau .lien { stroke: var(--trait-fort); stroke-width: 1.2; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s var(--sortie); }
.reseau.vu .lien { stroke-dashoffset: 0; }
.reseau.vu .lien:nth-of-type(2) { transition-delay: .12s; }
.reseau.vu .lien:nth-of-type(3) { transition-delay: .24s; }
.reseau.vu .lien:nth-of-type(4) { transition-delay: .36s; }
.reseau.vu .lien:nth-of-type(5) { transition-delay: .48s; }
.reseau.vu .lien:nth-of-type(6) { transition-delay: .6s; }
.reseau .noeud rect { fill: var(--noir-2); stroke: var(--trait-fort); }
.reseau .noeud text { fill: var(--blanc); font-size: 14px; font-weight: 700; font-family: inherit; letter-spacing: -.01em; }
.reseau .noeud text.sous { fill: var(--gris-bas); font-size: 11px; font-weight: 400; }
.reseau .noeud { opacity: 0; transition: opacity .6s var(--doux); }
.reseau.vu .noeud { opacity: 1; transition-delay: .45s; }
.reseau .centre-halo { fill: url(#halo-reseau); }
.reseau .impulsion { fill: var(--g3); }

/* ==========================================================================
   MISE EN PLACE — le plan qui se lève
   ========================================================================== */
.maquette3d { perspective: 1400px; height: min(520px, 62svh); display: grid; place-items: center; }
.sol3d {
  width: min(520px, 90%);
  aspect-ratio: 1.3;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateZ(0deg) scale(1);
  transition: transform 1.3s var(--sortie);
  background:
    linear-gradient(var(--trait) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--trait) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--noir-2);
  border: 1.5px solid var(--blanc);
}
[data-etape='1'] .sol3d, [data-etape='2'] .sol3d { transform: rotateX(56deg) rotateZ(-32deg) scale(.92); }
.cote { position: absolute; font-size: 10px; color: var(--gris-bas); font-family: ui-monospace, Menlo, monospace; transition: opacity .5s; }
[data-etape='1'] .cote, [data-etape='2'] .cote { opacity: 0; }
.bloc3d {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--l); height: var(--p);
  transform-style: preserve-3d;
}
.bloc3d i {
  position: absolute; inset: 0;
  border: 1px solid var(--blanc);
  background: transparent;
  transition: transform 1.1s var(--sortie), background .8s var(--doux), border-color .8s;
  transform: translateZ(0);
}
[data-etape='1'] .bloc3d i, [data-etape='2'] .bloc3d i { background: var(--noir-3); border-color: var(--trait-fort); }
[data-etape='1'] .bloc3d i:nth-child(2), [data-etape='2'] .bloc3d i:nth-child(2) { transform: translateZ(calc(var(--h) * .33)); }
[data-etape='1'] .bloc3d i:nth-child(3), [data-etape='2'] .bloc3d i:nth-child(3) { transform: translateZ(calc(var(--h) * .66)); }
[data-etape='1'] .bloc3d i:nth-child(4), [data-etape='2'] .bloc3d i:nth-child(4) { transform: translateZ(var(--h)); background: var(--noir-2); border-color: var(--blanc); }
[data-etape='2'] .bloc3d i:nth-child(4) { background: var(--teinte, var(--noir-2)); border-color: transparent; }
[data-etape='2'] .bloc3d--lum i:nth-child(4) { box-shadow: 0 0 24px color-mix(in srgb, var(--g3) 70%, transparent); }
.bloc3d:nth-child(3) i { transition-delay: .05s; }
.bloc3d:nth-child(5) i { transition-delay: .1s; }
.bloc3d:nth-child(7) i { transition-delay: .15s; }
.bloc3d:nth-child(9) i { transition-delay: .2s; }


/* ==========================================================================
   LA DÉMONSTRATION EN GRAND
   ========================================================================== */
.demo {
  position: fixed; inset: 0; z-index: 150;
  background: #060608;
  display: grid; grid-template-rows: auto 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--doux), visibility .45s;
}
.demo.ouverte { opacity: 1; visibility: visible; }
.demo__haut {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--gouttiere);
  border-bottom: 1px solid var(--trait);
}
.demo__haut b { font-size: 1rem; }
.demo__haut small { color: var(--gris-bas); margin-left: 10px; }
.demo__fermer { background: none; border: 1px solid var(--trait-fort); color: var(--blanc); width: 38px; height: 38px; cursor: pointer; font-size: 1.2rem; }
.demo__fermer:hover { border-color: var(--blanc); }
.demo .plan-bloc { border: 0; min-height: 0; height: 100%; }
.demo .plan-scene { min-height: 0; }
.demo__attente { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gris-bas); font-size: .9rem; }

/* ==========================================================================
   RUPTURES
   ========================================================================== */
@media (max-width: 980px) {
  .scene__grille { grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: center; }
  .scene__grille > :first-child { order: 0; }
  .scene__grille--inverse { grid-template-columns: minmax(0, 1fr); }
  .scene__titre { margin-bottom: 12px; }
  .desordre, .nuage { height: 42svh; }
  .admin__corps { grid-template-columns: 1fr; min-height: 0; }
  .admin__liste { border-right: 0; border-bottom: 1px solid var(--trait); }
  .admin__liste .ligne-demande:nth-child(n+4) { display: none; }
  .maquette3d { height: 40svh; }
  .usages { grid-template-columns: 1fr; }
  .usage + .usage { border-left: 0; border-top: 1px solid var(--trait); }
  .scene .t-grand { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .demo .plan-bloc { grid-template-rows: 1fr auto; }
}
@media (max-width: 640px) {
  .bulle { max-width: 170px; font-size: .74rem; }
  .admin__plan { display: none; }
  .demo .plan-panneau { padding: 16px; }
  .demo .plan-fiche .plan-lignes, .demo .plan-vide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bulle { animation: none; }
}

/* ---------- Téléphone : tout doit tenir dans un seul écran ---------- */
@media (max-width: 640px) {
  .scene__titre { font-size: clamp(1.6rem, 7vw, 2.1rem); margin-bottom: 16px; }
  .scene__grille { gap: 16px; }
  .liste-propre .ligne-demande:nth-child(n+5) { display: none; }
  .liste-propre { gap: 6px; padding: 12px; }
  .nuage__carte { min-width: 0; padding: 9px 11px; font-size: .74rem; gap: 3px; }
  .carte-fiche { left: 10px; top: 10px; }
  .carte-campagne, .carte-remplissage { right: 10px; }
  .carte-campagne { top: 10px; }
  .carte-remplissage { bottom: 10px; }
  [data-etape='3'] .carte-campagne, [data-etape='3'] .etiquette-seg { opacity: 0; }
  .etiquette-seg { font-size: .68rem; }
}

/* ---------- Le fil sur écran étroit ---------- */
@media (max-width: 980px) {
  .fil { max-width: none; --largeur: 90%; }
}
@media (max-height: 820px) { .appareil { --k: .6; } }
@media (max-height: 720px) { .appareil { --k: .52; } }
@media (max-width: 980px) { .appareil { --k: .5; } }
@media (max-width: 640px) { .appareil { --k: .44; } }
@media (max-width: 640px) {
  .fil__pas p { font-size: .92rem; }
  .fil__titre, .fil--titres .fil__titre { font-size: 1.12rem; margin-bottom: 6px; }
  .fil__num { margin-bottom: 6px; }
  .fil__fleche { display: none; }
  .fil__commandes { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fil__piste, .fil__pas { transition: none; }
}

/* ==========================================================================
   UN SITE MODULAIRE — un gabarit gris, qu'on remplit puis qu'on habille
   Étape 1 : la page d'un club, à l'état de gabarit (gris, fil de fer).
   Étape 2 : une main glisse le plan 3D et deux modules dans la page.
   Étape 3 : la main lâche un seau de peinture : la page prend une vraie
   direction artistique, puis en change (data-da sur .gabarit).
   Le déroulé des glisser-déposer est dans scenes.js.
   ========================================================================== */
.atelier {
  position: relative;
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  gap: clamp(22px, 3.4vw, 48px);
}
.atelier__palette { display: grid; gap: 8px; justify-items: start; }
.atelier__legende { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-bas); margin-top: 8px; }
.atelier__legende:first-child { margin-top: 0; }
.piece {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--trait-fort); border-radius: 999px;
  background: var(--noir);
  font-size: .8rem; font-weight: 600; color: var(--blanc); white-space: nowrap;
  transition: opacity .4s, border-style 0s;
}
.piece svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.piece.prise { opacity: .32; border-style: dashed; }

/* ----- le gabarit : une page verticale, grise, sans décor ----- */
.gabarit {
  --g-fond: #fbfaf7; --g-bord: #d2d0cb; --g-plein: #e1dfda; --g-module: #cfccc6; --g-texte: #9d9b96;
  --g-accent: #cfccc6; --g-cta: #e1dfda; --g-cta-texte: #9d9b96;
  --g-rayon: 14px; --g-barre: 999px; --g-police: inherit; --g-casse: none; --g-espace: 0;
  position: relative;
  height: min(480px, 60svh); aspect-ratio: 9 / 13.6;
  display: grid; grid-template-rows: auto minmax(0, 1fr) repeat(4, auto); gap: 9px;
  padding: 16px;
  background: var(--g-fond);
  border: 2px solid var(--g-bord); border-radius: 22px;
  overflow: hidden;
  font-family: var(--g-police);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .35);
}
.gabarit, .gabarit * { transition: background .5s var(--doux), color .5s var(--doux), border-color .5s var(--doux), border-radius .5s var(--doux), opacity .5s var(--doux), filter .5s var(--doux); }
.gabarit__entete { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.gabarit__marque { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--g-bord); background: transparent; }
.gabarit__entete b { font-size: .74rem; font-weight: 600; color: var(--g-texte); letter-spacing: var(--g-espace); text-transform: var(--g-casse); }
.gabarit__menu { margin-left: auto; display: grid; gap: 3px; }
.gabarit__menu i { width: 16px; height: 2px; border-radius: 2px; background: var(--g-bord); }

.gabarit__une {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border: 2px solid var(--g-bord); border-radius: var(--g-rayon);
  background: transparent;
}
/* les plans 3D simples : un seul visible à la fois (le 0 en gabarit, puis un par DA) */
.plan-iso { position: absolute; left: 7%; top: 8%; width: 86%; height: 84%; opacity: 0; transform: scale(.92); transition: opacity .45s var(--doux), transform .6s var(--sortie); }
.plan-iso .sol { fill: var(--p-sol); stroke: var(--p-trait); stroke-width: 1; }
.plan-iso .f1 { fill: var(--p-t1); } .plan-iso .f2 { fill: var(--p-t2); } .plan-iso .f3 { fill: var(--p-t3); }
.plan-iso .scene.f1 { fill: var(--p-s1); } .plan-iso .scene.f2 { fill: var(--p-s2); } .plan-iso .scene.f3 { fill: var(--p-s3); }
.plan-iso path { stroke: var(--p-arete, none); stroke-width: .8; stroke-linejoin: round; transition: fill .45s var(--doux), stroke .45s var(--doux); }
.gabarit[data-da="0"] .gabarit__une.plein [data-plan="0"],
.gabarit[data-da="1"] [data-plan="1"], .gabarit[data-da="2"] [data-plan="2"],
.gabarit[data-da="3"] [data-plan="3"], .gabarit[data-da="4"] [data-plan="4"] { opacity: 1; transform: none; }

.barre {
  height: 30px; padding: 0 14px;
  display: flex; align-items: center;
  border: 2px solid transparent; border-radius: var(--g-barre);
  background: var(--g-plein);
  font-size: .64rem; font-weight: 600; color: var(--g-texte);
  letter-spacing: var(--g-espace); text-transform: var(--g-casse);
}
.barre--vide { background: transparent; border: 2px dashed var(--g-bord); }
.barre--vide span { opacity: 0; }
.barre--vide.plein { background: var(--g-module); border-style: solid; border-color: var(--g-module); animation: barre-pose .5s var(--sortie); }
.barre--vide.plein span { opacity: 1; }
@keyframes barre-pose { from { transform: scale(.94); } }

/* la tache de peinture, au point où le seau est lâché */
.gabarit__tache {
  position: absolute; left: var(--tx, 50%); top: var(--ty, 50%);
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--g-cta); pointer-events: none; opacity: 0; transform: scale(0);
}
.gabarit__tache.eclate { animation: tache .75s var(--sortie) forwards; }
@keyframes tache { 0% { opacity: .7; transform: scale(0); } 45% { opacity: .45; } 100% { opacity: 0; transform: scale(60); } }

/* ----- les directions artistiques : seules les couleurs changent ----- */
.gabarit {   /* le gabarit gris et son plan en fil de fer */
  --p-sol: #f3f1ed; --p-trait: #cfccc6; --p-arete: #c4c1bb;
  --p-t1: #eceae5; --p-t2: #dedbd5; --p-t3: #d3d0ca; --p-s1: #e2dfda; --p-s2: #d3d0ca; --p-s3: #c8c5bf;
}
.gabarit:not([data-da="0"]) { --p-arete: none; }
.gabarit:not([data-da="0"]) .gabarit__une { background: var(--g-plein); border-color: var(--g-bord); }
.gabarit:not([data-da="0"]) .barre--cta { background: var(--g-cta); color: var(--g-cta-texte); border-color: transparent; }
.gabarit:not([data-da="0"]) .gabarit__marque { background: var(--g-cta); border-color: transparent; }
.gabarit:not([data-da="0"]) .barre--vide.plein { border-color: transparent; }

.gabarit[data-da="1"] {   /* nuit : indigo et orange */
  --g-fond: #101018; --g-bord: #262633; --g-plein: #1b1b26; --g-module: #242432; --g-texte: #c9c8d6;
  --g-cta: linear-gradient(90deg, #4F4FC4, #9A6BA8 55%, #F59B3C); --g-cta-texte: #fff;
  --p-sol: #1b1b26; --p-trait: #34344a; --p-t1: #F59B3C; --p-t2: #b8691f; --p-t3: #8f4f14; --p-s1: #6d6de0; --p-s2: #4F4FC4; --p-s3: #3a3a99;
}
.gabarit[data-da="2"] {   /* bordeaux et or */
  --g-fond: #2b0b14; --g-bord: #4a1a26; --g-plein: #3a1320; --g-module: #4a1a28; --g-texte: #e8d3a8;
  --g-cta: #d4a857; --g-cta-texte: #2b0b14;
  --p-sol: #3a1320; --p-trait: #5c2434; --p-t1: #e2bb6c; --p-t2: #b08a45; --p-t3: #86672f; --p-s1: #f1e3c2; --p-s2: #cbb996; --p-s3: #a6977a;
}
.gabarit[data-da="3"] {   /* crème et corail */
  --g-fond: #f6ece1; --g-bord: #eadccb; --g-plein: #ffffff; --g-module: #ffe3d9; --g-texte: #7a6554;
  --g-cta: #ff6b4a; --g-cta-texte: #fff;
  --p-sol: #ffffff; --p-trait: #eadccb; --p-t1: #ff7b5c; --p-t2: #e0512f; --p-t3: #c24124; --p-s1: #3a3a3a; --p-s2: #262626; --p-s3: #171717;
}
.gabarit[data-da="4"] {   /* noir et vert acide */
  --g-fond: #0b0b0b; --g-bord: #1f1f1f; --g-plein: #151515; --g-module: #1d2410; --g-texte: #b9c7a0;
  --g-cta: #c6ff3d; --g-cta-texte: #0b0b0b;
  --p-sol: #151515; --p-trait: #2c2c2c; --p-t1: #c6ff3d; --p-t2: #93c21f; --p-t3: #6c8f16; --p-s1: #f2f2f2; --p-s2: #bdbdbd; --p-s3: #8a8a8a;
}

/* ----- la main qui glisse : un curseur bien visible, qui reste à l'écran pendant l'étape ----- */
.atelier__main { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.atelier__main.visible { opacity: 1; }
.atelier__fantome { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .15s; }
.atelier__main.tient .atelier__fantome { opacity: 1; }
.atelier__fantome .piece { box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .5); transform: rotate(-4deg) scale(1.04); background: var(--noir); }
.atelier__curseur { position: absolute; left: -4px; top: -3px; width: 30px; height: 30px; fill: #111; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); transition: transform .15s; }
.atelier__main.tient .atelier__curseur { transform: scale(.88); }
/* la règle générale « une image ne dépasse pas son conteneur » écraserait le curseur (conteneur de largeur nulle) */
.atelier__curseur, .atelier__fantome svg, .piece svg { max-width: none; flex-shrink: 0; }
.atelier__fantome .piece { width: max-content; }

@media (max-width: 980px) {
  .atelier { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .atelier__palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .atelier__legende { display: none; }
  .piece { padding: 6px 10px; font-size: .68rem; gap: 6px; }
  .piece svg { width: 12px; height: 12px; }
}
@media (max-width: 640px) {
  .gabarit { height: calc(var(--visuel) - 40px); padding: 11px; gap: 6px; border-radius: 16px; }
  .gabarit__entete b { font-size: .64rem; }
  .barre { height: 22px; font-size: .54rem; padding: 0 10px; }
  .gabarit__titre { font-size: .72rem; left: 9px; bottom: 7px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .atelier { grid-template-columns: auto auto; }
  .atelier__palette { display: grid; }
  .gabarit { height: 72svh; padding: 9px; gap: 5px; }
  .barre { height: 18px; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gabarit, .gabarit * { transition: none; }
}

/* ==========================================================================
   FINITIONS RESPONSIVE
   Du petit téléphone au grand écran : chaque section occupe tout l'écran,
   rien ne déborde, rien ne se chevauche.

   Sur iPhone, Safari pose ses barres par-dessus la page. 100lvh est la
   hauteur de l'écran barres masquées : la section remplit tout l'écran.
   100svh est la hauteur visible barres affichées : l'écart (100lvh - 100svh)
   est ajouté en bas pour que contenu et commandes restent au-dessus de la
   barre. Sur ordinateur, les deux sont égales et l'écart vaut zéro.
   ========================================================================== */
.hero, .scene__colle, .section--ecran { min-height: 100vh; min-height: 100lvh; }
.hero__int { padding-top: 96px; padding-bottom: calc(clamp(44px, 8vh, 96px) + (100lvh - 100svh)); }
.scene__colle { padding-bottom: calc(clamp(96px, 14vh, 150px) + (100lvh - 100svh)); }
.fil__commandes { bottom: calc(clamp(20px, 4vh, 40px) + (100lvh - 100svh)); }
.section--ecran { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(clamp(84px, 11vw, 160px) + (100lvh - 100svh)); }
.section--ecran > .page { width: 100%; }
.hero, .scene, .section--ecran { scroll-snap-align: start; }

/* Le grand titre du haut de page suit aussi la hauteur de l'écran : jamais sous le logo */
.hero .t-geant { font-size: min(clamp(3rem, 8.2vw, 7.4rem), 12.5svh); }

/* Le schéma des outils : large sur ordinateur, redessiné en hauteur sur téléphone */
.reseau--hauteur { display: none; max-width: 400px; }
.reseau--hauteur .noeud text { font-size: 15px; }
.reseau--hauteur .noeud text.sous { font-size: 11.5px; }
@media (max-width: 640px) {
  .reseau:not(.reseau--hauteur) { display: none; }
  .reseau--hauteur { display: block; }
}

/* Tablette en hauteur : les visuels restent à taille humaine, centrés */
@media (min-width: 641px) and (max-width: 980px) {
  .scene__grille > :last-child { width: 100%; max-width: 600px; justify-self: center; }
  .admin__corps { grid-template-columns: 1fr 1.05fr; }
  .admin__liste { border-right: 1px solid var(--trait); border-bottom: 0; }
}

/* ---------------- Téléphone ---------------- */
@media (max-width: 640px) {
  /* Le haut de page : texte et boutons posés en bas, boutons de même largeur */
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero__actions .btn { justify-content: center; width: 100%; }
  .hero__int { padding-bottom: calc(28px + (100lvh - 100svh)); }

  /* Les scènes : le visuel prend la place qui reste sous le texte */
  .scene { --visuel: clamp(220px, calc(100svh - 400px), 420px); }
  .scene__colle { padding-top: 76px; padding-bottom: calc(84px + (100lvh - 100svh)); }
  .fil__commandes { bottom: calc(18px + (100lvh - 100svh)); }
  .desordre, .nuage, .maquette3d { height: var(--visuel); }

  /* WhatsApp : la liste Alive se range sous le texte, sans remonter dessus */
  .liste-propre { align-content: start; gap: 6px; padding: 4px 0 0; }
  .liste-propre .ligne-demande { padding: 8px 10px; }
  .liste-propre .ligne-demande__det { font-size: .72rem; }

  /* Pilotage : le back-office complet, en version compacte (demandes | salle) */
  .admin__corps { grid-template-columns: 1.3fr 1fr; min-height: 0; }
  .admin__liste { border-right: 1px solid var(--trait); border-bottom: 0; padding: 9px; gap: 6px; }
  .admin__liste .ligne-demande:nth-child(-n+4) { display: grid; }
  .admin__liste .ligne-demande:nth-child(n+5) { display: none; }
  .admin__plan { display: grid; padding: 9px; gap: 6px; }
  .admin__entete { font-size: .62rem; }
  .admin__entete b { font-size: .78rem; }
  .admin .ligne-demande { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 7px; gap: 6px; }
  .admin .ligne-demande__init { display: none; }
  .admin .ligne-demande__nom { font-size: .72rem; }
  .admin .ligne-demande__det { font-size: .6rem; }
  .admin .etat { font-size: .56rem; padding: 3px 5px; }
  .admin__entete span { display: none; }
  .admin__compteur { gap: 6px; font-size: .54rem; justify-content: space-between; }
  .admin__compteur > div { white-space: nowrap; }
  .admin__compteur b { font-size: .78rem; white-space: nowrap; }
  .admin .maquette__barre { padding: 6px 9px; }
  .admin .maquette__url { font-size: .56rem; }
  .toast-demande { right: 8px; top: 30px; padding: 6px 9px; font-size: .64rem; gap: 7px; }
  .toast-export { top: auto; bottom: 8px; }
  .mini-plan .libelle-zone { font-size: 16px; }

  /* Clientèle : les fiches restent lisibles sans écraser le nuage */
  .nuage__carte { min-width: 0; padding: 8px 10px; font-size: .7rem; gap: 2px; max-width: 58%; }
  .nuage__carte b { font-size: .82rem; }
  .etiquette-seg { font-size: .66rem; }

  /* Offres : une carte par formule, nom et prix sur une ligne, bouton pleine largeur */
  .offre { grid-template-columns: 1fr; gap: 12px; padding-block: 22px; }
  .offre__nom { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
  .offre__nom h3 { font-size: 1.35rem; }
  .offre__nom p { grid-column: 1; grid-row: 2; margin-top: 2px; }
  .offre__prix { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .offre__prix b { font-size: 1.2rem; }
  .offre__prix span { font-size: .72rem; }
  .offre__contenu { font-size: .9rem; }
  .offre .btn { width: 100%; justify-content: center; justify-self: stretch; }
}

/* La taille du téléphone dessiné suit la hauteur disponible */
@media (max-width: 640px) { .appareil { --k: .46; } }
@media (max-width: 640px) and (max-height: 820px) { .appareil { --k: .4; } }
@media (max-width: 640px) and (max-height: 740px) { .appareil { --k: .34; } }
@media (max-width: 640px) and (max-height: 660px) { .appareil { --k: .29; } }
@media (max-width: 640px) and (max-height: 600px) { .appareil { --k: .26; } }

/* Petit téléphone (iPhone SE, iPhone 8, avec les barres de Safari) : tout se resserre */
@media (max-width: 640px) and (max-height: 620px) {
  .scene { --visuel: clamp(170px, calc(100svh - 360px), 260px); }
  .nuage { height: max(var(--visuel), 230px); }
  .etiquette-seg { font-size: .6rem; padding: 3px 6px; }
  .scene__colle { padding-top: 62px; padding-bottom: calc(70px + (100lvh - 100svh)); }
  .scene .scene__titre { font-size: 1.3rem; margin-bottom: 8px; }
  .fil--titres .fil__titre { font-size: 1rem; margin-bottom: 4px; }
  .fil__pas p { font-size: .82rem; line-height: 1.42; }
  .scene__grille { gap: 12px; }
  .fil__commandes { bottom: calc(10px + (100lvh - 100svh)); }
  .fil__points, .fil__lecture { height: 32px; }
  .fil__lecture { width: 32px; }
  .bulle { font-size: .66rem; max-width: 140px; padding: 6px 8px; }
  .liste-propre .ligne-demande:nth-child(n+4) { display: none; }
  .admin__liste .ligne-demande:nth-child(n+4) { display: none; }
  .hero__ligne { font-size: .92rem; }
}

/* Téléphone à l'horizontale : deux colonnes compactes, comme sur ordinateur */
@media (max-height: 520px) and (orientation: landscape) {
  .hero .t-geant { font-size: min(clamp(2.4rem, 7vw, 4rem), 17svh); }
  .hero__int { padding-top: 64px; padding-bottom: calc(22px + (100lvh - 100svh)); }
  .hero__ligne { font-size: .9rem; max-width: 520px; }
  .hero h1 { margin-bottom: 10px; }
  .hero__actions { margin-top: 16px; }

  .scene__colle { padding: 50px 0 calc(50px + (100lvh - 100svh)); }
  .scene__grille, .scene__grille--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .scene__grille--inverse > :first-child { order: 2; }
  .scene .scene__titre { font-size: clamp(1.2rem, 3.2vw, 1.6rem); margin-bottom: 8px; }
  .fil--titres .fil__titre { font-size: .98rem; margin-bottom: 4px; }
  .fil__pas p { font-size: .8rem; line-height: 1.45; }
  .desordre, .nuage { height: 68svh; }
  .maquette3d { height: 64svh; }
  .appareil { --k: .31; }
  .admin__plan { display: none; }
  .admin__corps { grid-template-columns: 1fr; }
  .admin .ligne-demande:nth-child(n+3) { display: none; }
  .admin .maquette__barre { display: none; }
  .bulle { font-size: .66rem; max-width: 150px; padding: 6px 9px; }
  .fil__commandes { bottom: calc(8px + (100lvh - 100svh)); }
  .fil__points, .fil__lecture, .fil__fleche { height: 30px; }
  .fil__lecture, .fil__fleche { width: 30px; }
  .fil__fleche { display: grid; }
  .nuage__carte { font-size: .66rem; padding: 7px 9px; min-width: 0; gap: 2px; }
  .nuage__carte b { font-size: .8rem; }
}

/* Grand écran : la page s'élargit et le texte grandit un peu */
@media (min-width: 1680px) {
  :root { --page: 1480px; }
  html { font-size: 17px; }
  .appareil { --k: .74; }
  .desordre, .nuage { height: min(640px, 66svh); }
  .maquette3d { height: min(600px, 60svh); }
  .admin { max-width: 640px; }
}
@media (min-width: 1900px) {
  :root { --page: 1640px; }
  html { font-size: 18px; }
}
@media (min-width: 1680px) and (max-height: 900px) { .appareil { --k: .64; } }
/* Le plus étroit des téléphones (320 px) : la barre décorative du back-office cède sa place */
@media (max-width: 360px) and (max-height: 620px) {
  .admin .maquette__barre { display: none; }
  .toast-arrivee { top: 8px; }
  .fil__pas p { font-size: .78rem; }
  .admin .ligne-demande { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .admin .etat, .admin .etat-bascule { justify-self: start; }
}