/* Les pages de présentation du bot. Tout suit le style choisi : couleurs, boutons, police du mot du titre.
   Légèreté avant tout (cartes graphiques modestes comprises) : aucun flou, aucun masque, et rien ne bouge en permanence
   hors de la vidéo de l'accueil et du mur des profils, qui s'arrêtent hors de l'écran. */
body.vitrine { --a:#d9b273; --a2:#b5853f; --encre:#1c1405; --t-fond:#120e09; --t-carte:#1b1610; --t-carte-2:#241d14; --t-halo:#d9b2732e; --rb:10px; --police-mot:'Grenze Gotisch', serif; --taille-mot:1.08em;
  background:var(--t-fond); overflow-x:clip; }
body.vitrine[data-theme=futuriste] { --a:#4fd1ff; --a2:#1f8fd6; --encre:#03121c; --t-fond:#070c15; --t-carte:#0d1520; --t-carte-2:#13202e; --t-halo:#4fd1ff2b; --rb:4px; --police-mot:'Orbitron', sans-serif; --taille-mot:.84em; }
body.vitrine[data-theme=minimaliste] { --a:#f1ecdf; --a2:#cfc8b6; --encre:#16171a; --t-fond:#111214; --t-carte:#191a1d; --t-carte-2:#222327; --t-halo:#f1ecdf1f; --rb:999px; --police-mot:'Instrument Serif', serif; --taille-mot:1.1em; }
body.vitrine[data-theme=nature] { --a:#9bdc8f; --a2:#55ad69; --encre:#0a1a0d; --t-fond:#0a120c; --t-carte:#111c14; --t-carte-2:#18261b; --t-halo:#9bdc8f29; --rb:18px; --police-mot:'Fraunces', serif; --taille-mot:1em; }
body.vitrine[data-theme=neon] { --a:#ff5ddc; --a2:#a93dff; --encre:#1a0417; --t-fond:#0d0614; --t-carte:#170c21; --t-carte-2:#20112e; --t-halo:#ff5ddc2e; --rb:12px; --police-mot:'Tilt Neon', sans-serif; --taille-mot:.9em; }
body.vitrine[data-theme=pixel] { --a:#ffcc4d; --a2:#f08a24; --encre:#1c1404; --t-fond:#12101b; --t-carte:#1b1827; --t-carte-2:#242033; --t-halo:#ffcc4d26; --rb:2px; --police-mot:'Press Start 2P', monospace; --taille-mot:.62em; }
.vitrine main { max-width:none; padding:0; }
.vitrine .carte { background:var(--t-carte); border-color:#ffffff14; }
.vitrine .appel { background:radial-gradient(120% 140% at 50% 0%, var(--t-halo), transparent 60%), var(--t-carte); border-color:#ffffff14; }
.vitrine .tableau-formules td b { color:var(--a); } .vitrine .tableau-formules td span { color:var(--texte-3); }
.vitrine h1, .vitrine h2 { font-family:'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.03em; }
.vitrine a { color:var(--a); }

/* D'une page à l'autre : le navigateur enchaîne, et le personnage de l'accueil devient celui du parcours (parcours.css) */
@view-transition { navigation:auto; }
::view-transition-group(p-guide) { animation-duration:.6s; animation-timing-function:cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(root) { animation-duration:.18s; }
::view-transition-new(root) { animation-duration:.22s; }
@media (prefers-reduced-motion:reduce) { ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation:none !important; } }

/* En-tête : transparent sur la vidéo, plein dès qu'on descend */
.vitrine .d-entete { position:fixed; left:0; right:0; background:#0a0a0ee8; backdrop-filter:none; transition:background-color .3s, border-color .3s; }
.vitrine .d-entete.v-en-haut { background:transparent; border-color:transparent; }
.vitrine .d-nav a, .vitrine .d-lien, .vitrine .d-marque, .vitrine .d-pied .d-marque { color:#ecece6; } .vitrine .d-nav a:hover, .vitrine .d-lien:hover { color:var(--a); }
.vitrine .d-pied-liens a { color:var(--texte-2); } .vitrine .d-pied-liens a:hover { color:var(--a); }
.vitrine .d-bouton { background:linear-gradient(180deg, var(--a), var(--a2)); color:var(--encre); border-radius:var(--rb); --lueur:var(--a); }
.vitrine .d-bouton.secondaire { background:#ffffff12; color:#fff; border:1px solid #ffffff33; }
.vitrine .d-bouton.secondaire:hover { background:#ffffff1f; border-color:#ffffff66; }
.v-discord { width:1.25em; height:auto; flex:none; }
.v-large { width:100%; }

/* ----- Le haut de page ----- */
.v-heros { position:relative; min-height:max(100vh, 600px); min-height:max(100svh, 600px); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; overflow:hidden; }
.v-heros-fond { position:absolute; inset:0; z-index:-1; background:var(--t-fond); }
.v-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s; }
.v-video.actif { opacity:1; }
.vitrine[data-theme=pixel] .v-video { image-rendering:pixelated; }
.v-voile { position:absolute; inset:0; background:linear-gradient(90deg, #06060bf2 0%, #06060bb8 38%, #06060b33 68%, #06060b1f 100%), linear-gradient(180deg, #06060b99 0%, transparent 22%, transparent 62%, var(--t-fond) 100%); }
.v-heros-grille { flex:1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:20px; align-items:center; width:100%; max-width:1320px; margin:0 auto; padding:84px clamp(20px, 4vw, 48px) 6px; }
.v-heros-texte { position:relative; z-index:2; }
.v-pastille { display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:7px 14px; border-radius:999px; background:#0a0a0f99; border:1px solid #ffffff26; font-size:14px; font-weight:700; color:#fff; }
.v-pastille i { width:8px; height:8px; border-radius:50%; background:var(--a); }
.v-heros h1 { font-size:clamp(34px, min(5.7vw, 10vh), 84px); line-height:1.04; margin:0 0 20px; color:#fff; text-wrap:balance; }
.v-heros h1 .v-ligne { display:block; white-space:nowrap; }
.v-heros h1 em { font-style:normal; color:var(--a); font-family:var(--police-mot); font-size:var(--taille-mot); font-weight:700; letter-spacing:0; line-height:0; }
.v-heros h1 em.change { animation:v-mot .5s ease-out; }
@keyframes v-mot { from { opacity:0; } }
.v-chapo { font-size:clamp(17px, 1.5vw, 21px); line-height:1.5; color:#e4e4e0; max-width:600px; margin:0 0 28px; }
.v-actions { display:flex; flex-wrap:wrap; gap:12px; } .v-actions.centre { justify-content:center; }
.v-rassure { display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:24px 0 0; padding:0; font-size:14px; font-weight:600; color:#d8d8d2; }
.v-rassure li::before { content:'✓'; margin-right:7px; color:var(--a); font-weight:800; }

/* La scène : le personnage et les vraies cartes du bot, immobiles (les faire flotter coûtait à chaque image). */
.v-scene { position:relative; align-self:stretch; min-height:0; }
.v-figure { position:absolute; right:-5%; bottom:-34px; height:min(106%, 800px); width:auto; max-width:none; view-transition-name:p-guide; }
.vitrine[data-theme=pixel] .v-figure { image-rendering:pixelated; }
.v-flotte { position:absolute; border-radius:14px; box-shadow:0 30px 60px -22px #000e, 0 0 0 1px #ffffff1f; height:auto; transition:opacity .4s; }
.v-flotte-profil { left:1%; bottom:5%; width:min(66%, 420px); transform:rotate(-2.5deg); }
.v-flotte-lecteur { left:-1%; top:10%; width:min(50%, 300px); transform:rotate(2deg); }

.v-styles-zone { position:relative; z-index:3; width:100%; max-width:1320px; margin:0 auto; padding:6px clamp(20px, 4vw, 48px) 26px; }
.v-styles-zone p { margin:0 0 9px; font-size:14px; font-weight:700; color:#e4e4e0; }
.v-styles { display:flex; gap:8px; overflow-x:auto; padding:3px; scrollbar-width:none; } .v-styles::-webkit-scrollbar { display:none; }
.v-style { flex:none; position:relative; display:inline-flex; align-items:center; gap:9px; padding:6px 16px 6px 6px; border-radius:999px; border:1px solid #ffffff2b; background:#0a0a0fb8; color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; overflow:hidden; transition:transform .18s, border-color .18s, background-color .18s; }
.v-style img { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#ffffff14; }
.v-style:hover { transform:translateY(-2px); border-color:#ffffff66; }
.v-style[aria-pressed=true] { border-color:var(--a); background:var(--a); color:var(--encre); }
.v-style[aria-pressed=true] img { background:#00000026; }
.v-style:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Chiffres */
.v-chiffres { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; max-width:1224px; margin:18px auto 0; background:#ffffff14; border-block:1px solid #ffffff14; }
.v-chiffres p { margin:0; padding:24px 16px; text-align:center; background:var(--t-fond); }
.v-chiffres strong { display:block; font-family:'Bricolage Grotesque', sans-serif; font-size:clamp(30px, 3.6vw, 46px); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--a); }
.v-chiffres span { color:var(--texte-2); font-size:15px; font-weight:600; }

/* Sections */
.v-section { max-width:1224px; margin:0 auto; padding:clamp(64px, 8vw, 110px) 20px 0; scroll-margin-top:50px; }
.v-tete { max-width:760px; margin:0 0 36px; } .v-tete h2, .v-duo h2 { font-size:clamp(30px, 4vw, 52px); line-height:1.06; margin:0 0 14px; color:#fff; text-wrap:balance; } .v-tete p:last-child { color:var(--texte-2); font-size:18px; margin:0; }
.v-surtitre { margin:0 0 12px; color:var(--a); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }

/* Démonstration : une fenêtre aux couleurs de Discord */
.v-discord-fenetre { display:grid; grid-template-columns:220px 1fr; border-radius:16px; overflow:hidden; background:#313338; border:1px solid #ffffff1a; box-shadow:0 40px 80px -40px #000; color:#dbdee1; font-size:15px; }
.v-dc-salons { display:flex; flex-direction:column; gap:2px; padding:14px 8px; background:#2b2d31; color:#949ba4; font-weight:600; }
.v-dc-salons strong { padding:2px 8px 14px; color:#f2f3f5; border-bottom:1px solid #1e1f22; margin-bottom:8px; }
.v-dc-salons span { padding:5px 8px; border-radius:5px; } .v-dc-salons .actif { background:#404249; color:#fff; } .v-dc-salons .vocal { margin-top:12px; }
.v-dc-principal { display:flex; flex-direction:column; min-width:0; }
.v-dc-fil { flex:1; display:grid; gap:18px; align-content:start; padding:18px 18px 8px; }
.v-dc-fil { min-height:540px; }
.v-dc-reponse[hidden] { display:none; }
.v-dc-reponse.entre { animation:v-entre .2s ease-out; }
@keyframes v-entre { from { opacity:0; } }
.v-dc-appel { margin:0 0 5px 52px; font-size:13px; color:#b5bac1; } .v-dc-appel b { color:#f2f3f5; font-weight:600; } .v-dc-appel code { background:none; color:#c9cdfb; padding:0; font-size:1em; font-family:inherit; }
.v-dc-message { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; }
.v-dc-avatar { width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--a), var(--a2)); }
.v-dc-nom { display:flex; align-items:center; gap:6px; margin:0 0 6px; } .v-dc-nom b { color:var(--a); font-weight:700; } .v-dc-nom i { font-style:normal; font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; background:#5865f2; color:#fff; }
.v-dc-carte { display:block; width:100%; max-width:720px; height:auto; border-radius:8px; background:#1e1f22; }
.v-dc-ligne { margin:8px 0 0; font-size:13px; color:#b5bac1; }
.v-dc-boutons { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.v-dc-boutons span { padding:6px 12px; border-radius:6px; background:#4e5058; color:#fff; font-size:14px; font-weight:600; } .v-dc-boutons .bleu { background:#5865f2; }
.v-dc-note { margin:9px 0 0; font-size:13px; color:#949ba4; }
.v-dc-embed { max-width:560px; padding:12px 16px; border-radius:6px; background:#2b2d31; border-left:4px solid var(--a); }
.v-dc-embed h4 { margin:0 0 10px; font-size:16px; color:#fff; } .v-dc-embed h5 { margin:12px 0 5px; font-size:14px; color:#fff; } .v-dc-embed p { margin:0 0 7px; font-size:14px; } .v-dc-embed small { color:#b5bac1; }
.v-dc-classement { list-style:none; margin:0; padding:0; display:grid; gap:5px; } .mention { color:#c9cdfb; background:#5865f24d; padding:0 3px; border-radius:3px; }
.v-dc-saisie { padding:6px 18px 16px; } .v-dc-saisie[hidden] { display:none; }
.v-dc-commandes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.v-dc-commandes button { padding:7px 13px; border:1px solid transparent; border-radius:7px; background:#404249; color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:transform .15s, background-color .15s; }
.v-dc-commandes button:hover { background:#4e5058; transform:translateY(-1px); } .v-dc-commandes button[aria-pressed=true] { background:var(--a); color:var(--encre); }
.v-dc-commandes button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.v-dc-champ { display:flex; align-items:center; margin:0; padding:11px 14px; border-radius:8px; background:#383a40; color:#dbdee1; min-height:44px; }
.v-dc-champ i { width:2px; height:18px; margin-left:2px; background:#dbdee1; }

/* Fonctions */
.v-grille { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.v-tuile { position:relative; display:flex; flex-direction:column; padding:24px; border-radius:18px; background:var(--t-carte); border:1px solid #ffffff14; overflow:hidden; transition:border-color .2s; min-width:0; }
.v-tuile:hover { border-color:#ffffff33; }
.v-tuile h3 { margin:0 0 8px; font-size:20px; color:#fff; letter-spacing:-.02em; } .v-tuile p { margin:0; color:var(--texte-2); font-size:15px; }
.v-tuile.large { grid-column:span 2; grid-row:span 2; }
.v-tuile-image { display:block; width:100%; height:auto; margin-top:auto; border-radius:10px; }
.v-tuile .v-noms { margin-bottom:18px; }
.v-marque { align-self:flex-start; margin-bottom:10px; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; color:var(--encre); background:var(--a); }
.v-marque.bientot { background:#ffffff1f; color:#fff; }
.v-dossiers { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:6px; font-size:14px; } .v-dossiers li { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:9px; background:var(--t-carte-2); } .v-dossiers span { color:var(--texte-2); }
.v-quiz { display:grid; gap:6px; margin-top:16px; font-size:14px; } .v-quiz p { color:#fff; font-weight:700; margin:0 0 2px; } .v-quiz span { padding:7px 12px; border-radius:9px; background:var(--t-carte-2); } .v-quiz .bon { background:var(--a); color:var(--encre); font-weight:800; }
.v-noms { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .v-noms span { padding:5px 11px; border-radius:999px; background:var(--t-carte-2); color:#fff; font-size:14px; font-weight:700; }
.v-bulles { display:grid; gap:6px; margin-top:16px; font-size:14px; } .v-bulles span { width:fit-content; max-width:92%; padding:8px 12px; border-radius:12px 12px 12px 3px; background:var(--t-carte-2); } .v-bulles .moi { justify-self:end; border-radius:12px 12px 3px 12px; background:var(--a); color:var(--encre); font-weight:700; }

/* Musique et site : le texte d'un côté, le produit de l'autre */
.v-duo { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:clamp(28px, 5vw, 64px); align-items:center; }
.v-duo.inverse { grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); }
.v-texte { color:var(--texte-2); font-size:18px; margin:0 0 20px; }
.v-liste { list-style:none; margin:0; padding:0; display:grid; gap:12px; color:var(--texte-2); } .v-liste li { padding-left:26px; position:relative; } .v-liste li::before { content:''; position:absolute; left:2px; top:.55em; width:10px; height:10px; border-radius:3px; background:var(--a); transform:rotate(45deg); } .v-liste b { color:#fff; }
.v-pile { position:relative; padding-bottom:9%; }
.v-pile-fond { display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 40px 80px -40px #000, 0 0 0 1px #ffffff1f; }
.v-pile-avant { position:absolute; right:-3%; bottom:0; width:66%; height:auto; border-radius:12px; box-shadow:0 26px 50px -18px #000, 0 0 0 1px #ffffff26; }
.v-navigateur { border-radius:14px; overflow:hidden; background:#16171b; box-shadow:0 40px 80px -40px #000, 0 0 0 1px #ffffff1f; }
.v-nav-barre { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#202126; } .v-nav-barre i { width:10px; height:10px; border-radius:50%; background:#ffffff2e; }
.v-nav-barre span { flex:1; margin-left:10px; padding:4px 12px; border-radius:999px; background:#111216; color:#fff; font-size:13px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .v-nav-barre b { color:var(--texte-3); font-weight:500; }
.v-nav-vues { position:relative; aspect-ratio:1400 / 875; } .v-nav-vues img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s; } .v-nav-vues img.actif { opacity:1; }
.v-onglets { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; } .v-onglets[hidden] { display:none; }
.v-onglets button { padding:8px 15px; border-radius:var(--rb); border:1px solid #ffffff2b; background:transparent; color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:transform .15s, background-color .15s; }
.v-onglets button:hover { transform:translateY(-1px); background:#ffffff14; } .v-onglets button[aria-pressed=true] { background:var(--a); border-color:var(--a); color:var(--encre); } .v-onglets button:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Le mur de personnages */
.v-mur { position:relative; display:grid; gap:0; margin-top:14px; overflow:hidden; }
.v-mur::before, .v-mur::after { content:''; position:absolute; top:0; bottom:0; z-index:1; width:12vw; pointer-events:none; }
.v-mur::before { left:0; background:linear-gradient(90deg, var(--t-fond), transparent); } .v-mur::after { right:0; background:linear-gradient(270deg, var(--t-fond), transparent); }
.v-mur-rang { overflow:hidden; padding:4px 0; border-bottom:1px solid #ffffff12; }
.v-mur-piste { display:flex; width:max-content; animation:v-mur 120s linear infinite; }
.v-mur-rang.inverse .v-mur-piste { animation-direction:reverse; animation-duration:140s; }
.v-mur:hover .v-mur-piste { animation-play-state:paused; }
.v-mur-piste img { display:block; flex:none; height:clamp(170px, 19vw, 250px); width:auto; aspect-ratio:2 / 3; object-fit:contain; object-position:bottom; margin-right:6px; }
.v-mur.arret .v-mur-piste { animation-play-state:paused; }
@keyframes v-mur { to { transform:translateX(-50%); } }

/* Étapes */
.v-etapes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; position:relative; }
.v-etapes li { padding:26px; border-radius:18px; background:var(--t-carte); border:1px solid #ffffff14; }
.v-etapes span { display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px; border-radius:var(--rb); background:var(--a); color:var(--encre); font-weight:800; font-size:18px; }
.v-etapes h3 { font-size:20px; color:#fff; margin:0 0 6px; } .v-etapes p { margin:0; color:var(--texte-2); }

/* Tarifs */
.v-formules { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:stretch; }
.v-formule { position:relative; display:flex; flex-direction:column; padding:28px 24px; border-radius:20px; background:var(--t-carte); border:1px solid #ffffff1a; }
.v-formule.conseillee { border:2px solid var(--a); background:linear-gradient(180deg, var(--t-carte-2), var(--t-carte)); box-shadow:0 30px 70px -40px var(--a); }
.v-formule-badge { position:absolute; top:-13px; left:24px; padding:3px 12px; border-radius:999px; background:var(--a); color:var(--encre); font-size:13px; font-weight:800; }
.v-formule h2 { font-family:'Bricolage Grotesque', sans-serif; font-size:26px; color:#fff; margin:0; } .v-formule-phrase { margin:2px 0 16px; color:var(--texte-2); font-size:15px; min-height:2.8em; }
.v-prix { margin:0 0 18px; } .v-prix strong { display:block; font-family:'Bricolage Grotesque', sans-serif; font-size:clamp(34px, 3.4vw, 44px); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:#fff; } .v-prix small { color:var(--texte-2); font-size:14px; }
.v-formule ul { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; font-size:15px; color:#e4e4e0; }
.v-formule li { padding-left:24px; position:relative; } .v-formule li::before { content:'✓'; position:absolute; left:0; color:var(--a); font-weight:800; }
.v-formule li.plus-tard { color:var(--texte-3); } .v-formule li.plus-tard::before { content:'○'; color:var(--texte-3); } .v-formule li em { font-style:normal; font-size:12px; font-weight:700; color:var(--texte-2); padding:1px 7px; border:1px solid #ffffff2b; border-radius:999px; white-space:nowrap; }
.v-note-tarifs { margin:20px 0 0; color:var(--texte-2); font-size:14px; max-width:860px; }

/* Questions */
.v-faq { max-width:860px; }
.v-faq details { background:var(--t-carte); border-color:#ffffff14; border-radius:14px; padding:0; }
.v-faq summary { display:flex; justify-content:space-between; gap:16px; padding:17px 20px; color:#fff; font-size:16px; list-style:none; } .v-faq summary::-webkit-details-marker { display:none; }
.v-faq summary::after { content:'+'; flex:none; color:var(--a); font-size:22px; font-weight:500; line-height:1.1; transition:transform .2s; } .v-faq details[open] summary::after { transform:rotate(45deg); }
.v-faq summary:focus-visible { outline:2px solid var(--a); outline-offset:-2px; border-radius:14px; }
.v-faq p { margin:0; padding:0 20px 18px; font-size:15.5px; }

/* Dernier appel */
.v-final { position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(64px, 8vw, 110px); padding:clamp(80px, 12vw, 150px) 20px; text-align:center; }
.v-final-fond { position:absolute; inset:0; z-index:-1; } .v-final-fond img { width:100%; height:100%; object-fit:cover; opacity:.6; }
.v-final-fond::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--t-fond) 0%, #06060bb3 35%, #06060bc7 70%, #0a0a0e 100%); }
.v-final-texte { max-width:860px; margin:0 auto; } .v-final h2 { font-size:clamp(34px, 5.4vw, 72px); line-height:1.03; color:#fff; margin:0 0 14px; text-wrap:balance; } .v-final p { color:#e4e4e0; font-size:19px; margin:0 0 28px; }
.vitrine .d-pied { max-width:1224px; margin-top:0; }

/* Le haut des pages intérieures, le bas qui propose la suite, et les portes de l'accueil */
.v-page-tete { max-width:1224px; margin:0 auto; padding:clamp(108px, 11vw, 140px) 20px 0; } .v-page-tete > * { max-width:820px; }
.v-page-tete h1 { font-size:clamp(34px, 5vw, 64px); line-height:1.05; margin:0 0 14px; color:#fff; text-wrap:balance; } .v-page-tete p:last-child:not(.v-surtitre) { margin:0; color:var(--texte-2); font-size:clamp(17px, 1.6vw, 20px); }
.v-section.serre { padding-top:32px; }
.v-page-tete + .v-mur { margin-top:28px; }
.v-suite { max-width:1184px; margin:clamp(56px, 7vw, 90px) auto 56px; padding:clamp(36px, 5vw, 60px) 20px; border-radius:22px; text-align:center; background:radial-gradient(120% 140% at 50% 0%, var(--t-halo), transparent 60%), var(--t-carte); border:1px solid #ffffff14; }
@media (max-width: 1224px) { .v-suite { margin-inline:20px; } }
.v-suite h2 { font-size:clamp(26px, 3.4vw, 40px); color:#fff; margin:0 0 8px; } .v-suite p { color:var(--texte-2); margin:0 0 22px; }
.v-portes { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.v-porte { display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:18px; background:var(--t-carte); border:1px solid #ffffff14; color:var(--texte); transition:transform .18s, border-color .18s; }
.vitrine a.v-porte { color:var(--texte); } .v-porte:hover { text-decoration:none; transform:translateY(-3px); border-color:var(--a); }
.v-porte:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.v-porte .v-surtitre { margin:0; } .v-porte strong { font-family:'Bricolage Grotesque', sans-serif; font-size:22px; line-height:1.15; letter-spacing:-.02em; color:#fff; } .v-porte-texte { color:var(--texte-2); font-size:15px; }
.v-porte-image { width:100%; height:auto; margin-top:auto; border-radius:9px; padding:0; } .v-porte-texte + .v-porte-image { margin-top:auto; }
.v-porte-prix { display:grid; gap:5px; margin-top:auto; } .v-porte-prix b { padding:6px 12px; border-radius:9px; background:var(--t-carte-2); color:#fff; font-size:15px; }
.v-porte-lien { margin-top:12px; color:var(--a); font-weight:800; font-size:15px; } .v-porte:hover .v-fleche { display:inline-block; transform:translateX(4px); }
.vitrine .d-menu summary { color:#fff; background:#0a0a0fb8; } .vitrine .d-nav a[aria-current=page], .vitrine .d-menu a[aria-current=page] { color:var(--a); }
.vitrine .d-menu nav a { color:#ecece6; } .vitrine .tableau-formules { margin-top:32px; } .vitrine .v-faq { margin-top:22px; }
@media (max-width: 1080px) { .v-portes { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .v-portes { grid-template-columns:minmax(0, 1fr); } }

/* Écrans peu hauts (petits portables) : le choix des styles reste visible sans descendre */
@media (min-width: 861px) and (max-height: 760px) {
  .v-pastille { margin-bottom:12px; padding:5px 12px; font-size:13px; }
  .v-heros h1 { margin-bottom:12px; }
  .v-chapo { font-size:16px; margin-bottom:16px; }
  .v-rassure { margin-top:14px; }
  .v-styles-zone { padding-bottom:14px; } .v-styles-zone p { margin-bottom:5px; font-size:13px; }
  .v-style { padding:3px 13px 3px 3px; font-size:14px; } .v-style img { width:32px; height:32px; }
  .v-actions .d-bouton.grand { min-height:48px; padding:11px 20px; font-size:16px; }
}
@media (max-width: 1080px) {
  .vitrine .d-nav { display:none; }
  .v-grille { grid-template-columns:repeat(2, minmax(0, 1fr)); } .v-tuile.large { grid-column:span 2; grid-row:auto; }
}
@media (max-width: 860px) {
  .vitrine .d-actions .d-bouton { padding:8px 13px; font-size:14px; }
  .vitrine .d-marque small { display:none; }
  .v-heros { min-height:0; justify-content:flex-start; }
  .v-heros-grille { display:contents; }
  .v-heros-texte { order:1; padding:84px 20px 0; }
  .v-styles-zone { order:2; padding:20px 20px 8px; }
  .v-scene { order:3; margin-inline:20px; }
  .v-heros h1 { font-size:clamp(34px, 10.5vw, 60px); }
  .v-voile { background:linear-gradient(180deg, #06060be6 0%, #06060bb3 48%, #06060b73 72%, var(--t-fond) 100%); }
  .v-actions .d-bouton { width:100%; }
  .vitrine .d-entete { gap:10px; }
  .v-scene { min-height:0; height:clamp(340px, 96vw, 520px); margin-top:6px; }
  .v-figure { right:-6%; left:auto; height:106%; bottom:-20px; }
  .v-flotte-profil { left:0; bottom:8%; width:74%; }
  .v-flotte-lecteur { display:none; }
  .v-chiffres { grid-template-columns:repeat(2, 1fr); }
  .v-discord-fenetre { grid-template-columns:minmax(0, 1fr); } .v-dc-salons { display:none; }
  .v-dc-fil { min-height:400px; }
  .v-dc-fil { padding:12px 12px 6px; } .v-dc-saisie { padding:6px 12px 12px; }
  .v-dc-appel { margin-left:0; } .v-dc-message { grid-template-columns:minmax(0, 1fr); } .v-dc-avatar { display:none; }
  .v-grille, .v-etapes, .v-formules { grid-template-columns:minmax(0, 1fr); } .v-tuile.large { grid-column:auto; }
  .v-formule.conseillee { order:-1; } .v-formule-phrase { min-height:0; }
  .v-duo, .v-duo.inverse { grid-template-columns:minmax(0, 1fr); } .v-duo.inverse > :first-child { order:2; }
  .v-pile-avant { right:0; width:78%; }
}
/* Téléphone : l'en-tête tient toujours sur une ligne */
@media (max-width: 560px) {
  .vitrine .d-entete { padding-inline:14px; }
  .vitrine .d-actions { gap:8px; }
  .vitrine .d-marque span { display:none; }
  .vitrine .d-actions .d-bouton { min-height:40px; padding:8px 11px; font-size:13px; }
  .vitrine .d-menu summary { padding:8px 10px; }
}
/* Petit téléphone : le choix des styles remonte */
@media (max-width: 860px) and (max-height: 700px) {
  .v-rassure { display:none; }
  .v-chapo { font-size:15px; margin-bottom:16px; }
  .v-pastille { margin-bottom:12px; }
  .v-heros-texte { padding-top:78px; }
  .v-actions .d-bouton.grand { min-height:46px; padding:10px 16px; font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-dc-champ i { animation:none; }
  .v-mur-rang { overflow-x:auto; } .v-mur-piste { animation:none; }
  .v-heros h1 em.change, .v-dc-reponse.entre { animation:none; }
}