/* Accueil · même univers sombre et bleu, autre allure : barre de menu pleine, titre à gauche, filets fins,
   coins plus droits, étiquettes en monospace, chiffres et FAQ en colonnes réglées, fiche de prix sans bordure
   tournante. Chargée après site.css sur la page d'accueil seulement. */
:root {
  --filet: rgba(255, 255, 255, 0.09);
  --filet-fort: rgba(255, 255, 255, 0.18);
  --rayon: 12px;
}

/* Titres : le mot fort garde son bleu, sans reflet animé, avec un trait dessous */
.brille {
  animation: none; background: none; color: var(--bleu-clair);
  -webkit-background-clip: border-box; background-clip: border-box;
}
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em;
}
.surtitre::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.tete.centre .surtitre::after { content: ''; width: 22px; height: 1px; background: currentColor; }

/* Boutons : coins presque droits, pas de lueur bleue */
.btn { border-radius: 8px; box-shadow: none; }
.btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.btn-verre { box-shadow: inset 0 0 0 1px var(--filet-fort); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-verre:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }

/* Menu : une barre pleine collée en haut, filet dessous, à la place de la pilule en verre qui flotte */
.nav {
  top: 0; width: 100%; max-width: none; border-radius: 0; padding: 12px max(20px, calc(50% - 570px));
  background: rgba(5, 5, 7, 0.82); box-shadow: 0 1px 0 var(--filet);
}
.nav.ombre { background: rgba(5, 5, 7, 0.95); box-shadow: 0 1px 0 var(--filet-fort); }
.marque img { border-radius: 6px; box-shadow: none; }
.nav-liens a { border-radius: 0; }
.nav-liens a.actif { background: transparent; box-shadow: inset 0 -2px 0 var(--bleu); }
.burger { border-radius: 8px; }

/* Haut de page : titre aligné à gauche, une grille fine au lieu des halos qui flottent, sans les écrans flous */
.hero { padding-top: 140px; text-align: left; }
.aurore { opacity: 0.32; }
.aurore i:nth-child(2), .aurore i:nth-child(3) { display: none; }
.reseaux { display: none; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--filet) 1px, transparent 1px), linear-gradient(90deg, var(--filet) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 30% 18%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 55% at 30% 18%, #000 15%, transparent 72%);
}
.hero-texte { text-align: left; }
.pastille { border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-fort); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pastille .point { background: var(--bleu); box-shadow: none; }
.hero h1 { max-width: 14ch; letter-spacing: -0.055em; }
.chapeau { margin-left: 0; }
.hero-actions { justify-content: flex-start; }

/* Vitrine : coins plus droits, badges carrés */
.ecran-centre { border-radius: 12px; }
.ecran-carte { border-radius: 10px; }
.badge { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--filet-fort), 0 14px 40px -12px rgba(0, 0, 0, 0.8); }
.badge i { border-radius: 4px; }

/* Réseaux : bande encadrée de filets */
.defile { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.defile-titre { font: 500 12px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em; }

/* Chiffres : colonnes réglées au lieu de trois cartes */
.chiffres-grille { gap: 0; border-top: 1px solid var(--filet-fort); }
.chiffres-grille div { border-radius: 0; background: transparent; padding: 28px 28px 8px 0; }
.chiffres-grille div + div { border-left: 1px solid var(--filet); padding-left: 28px; }
.chiffres-grille div:first-child b { background: none; color: var(--bleu); -webkit-background-clip: border-box; background-clip: border-box; }

/* Carrousel */
.diapo { border-radius: 12px; }
.fleche-nav { border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-fort); }
.point-nav { border-radius: 2px; }

/* Cartes : filet fin, coins plus droits, numéros en monospace */
.recus article, .etapes li { border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet); }
.recus article:hover, .etapes li:hover { box-shadow: inset 0 0 0 1px var(--filet-fort); }
.num { font: 500 12px ui-monospace, 'SF Mono', Menlo, monospace; }
.etapes .visuel { border-radius: var(--rayon) var(--rayon) 0 0; }
.etiquette-pro, .etapes .valide, .etiquette { border-radius: 4px; }
.skills code { border-radius: 4px; }
.carte-verre { border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet); }
.coches li::before { border-radius: 4px; }

/* Prix : une fiche nette avec un liseré bleu en haut, à la place de la bordure lumineuse qui tourne */
.carte-prix, .carte-prix-int { border-radius: 14px; }
.carte-prix.pro { padding: 0; background: none; animation: none; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9); }
.carte-prix.pro .carte-prix-int { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-fort), inset 0 3px 0 var(--bleu); }
.prix-sortie, .compte div { border-radius: 6px; }
.mot { border-radius: 8px; }

/* FAQ : liste à filets, comme un sommaire */
.faq-liste { gap: 0; border-top: 1px solid var(--filet-fort); }
.faq details { border-radius: 0; background: transparent; border-bottom: 1px solid var(--filet); }
.faq details[open] { background: transparent; }
.faq summary { padding: 22px 4px; }
.faq details p { padding: 0 4px 22px; }

/* Appel final : bloc encadré avec un liseré bleu */
.final { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-fort), inset 0 3px 0 var(--bleu); }

/* Pied de page */
.pied { border-top: 1px solid var(--filet); margin-top: 90px; }

@media (max-width: 920px) {
  .nav { padding: 10px 16px; }
  .hero { padding-top: 110px; }
  .chiffres-grille div + div { border-left: 0; border-top: 1px solid var(--filet); padding-left: 0; }
  .barre-mobile { border-radius: 12px; }
}

/* ================= Nouvelle structure ================= */

/* Haut de page en deux colonnes : texte à gauche, téléphone et écrans à droite */
.hero-split { padding-bottom: 0; }
.hero-grille { max-width: var(--large); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: center; }
.hero-split .hero-texte { margin: 0; max-width: none; }
.hero-split h1 { font-size: clamp(42px, 5.4vw, 76px); }
.hero-chiffres { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--filet-fort); }
.hero-chiffres li { padding: 18px 16px 0 0; }
.hero-chiffres li + li { padding-left: 16px; border-left: 1px solid var(--filet); }
.hero-chiffres b { display: block; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-chiffres li:first-child b { color: var(--bleu); }
.hero-chiffres span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--doux); }

/* La scène : le téléphone devant, les deux écrans en retrait derrière */
.vitrine.scene { position: relative; width: 100%; max-width: none; height: clamp(460px, 44vw, 620px); margin: 0; perspective: 1600px; }
.scene .ecran-centre { left: auto; right: -4%; top: 4%; width: 78%; aspect-ratio: 16 / 9; transform: rotateY(-14deg) rotateZ(2deg); opacity: 0.85; }
.scene .ecran-carte { right: auto; left: -2%; bottom: 6%; width: 52%; transform: rotateY(16deg) rotateZ(-3deg); }
.scene .iphone { left: 32%; bottom: 0; width: 38%; transform: rotateY(-8deg) rotateZ(2deg); z-index: 2; }
.scene .b1 { top: -4%; right: 6%; }
.scene .b2 { top: auto; bottom: 18%; right: -2%; }
.scene .b3 { top: 34%; left: -4%; }

/* Réseaux : une ligne fixe, centrée, sans défilement */
.defile.fixe { margin-top: 64px; }
.defile.fixe .defile-piste { animation: none; width: auto; justify-content: center; -webkit-mask-image: none; mask-image: none; }
.defile.fixe .defile-piste > div { flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.defile.fixe .defile-piste > div + div { display: none; }
.defile.fixe .reseau { padding-right: 0; font-size: 16px; }
.defile.fixe .reseau svg { width: 24px; height: 24px; }

/* Vidéos : un mur de vignettes, la première en grand */
.mur { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 14px; }
.mur .diapo { height: auto; width: 100%; max-width: none; aspect-ratio: 16 / 10; opacity: 1; transform: none; cursor: pointer; scroll-snap-align: none; }
.mur .diapo:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.mur .diapo:hover { box-shadow: inset 0 0 0 1px var(--filet-fort), 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
.mur .diapo-infos { padding: 46px 16px 14px; }
.mur .diapo-infos h3 { font-size: 15px; }
.mur .diapo-infos p:not(.meta):not(.mention) { display: none; }
.mur .diapo-infos .mention { display: none; }
.mur .diapo:first-child .diapo-infos { padding: 80px 24px 22px; }
.mur .diapo:first-child .diapo-infos h3 { font-size: clamp(20px, 2.2vw, 28px); }
.mur .diapo:first-child .diapo-infos p:not(.meta) { display: block; }
.mur .diapo .badge { font-size: 12px; padding: 6px 10px; }
.mur .diapo:not(:first-child) .badge { display: none; }
.mur .btn-son { opacity: 1; pointer-events: auto; padding: 8px; }
.mur .btn-son span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mur .diapo:first-child .btn-son { padding: 9px 14px 9px 11px; }
.mur .diapo:first-child .btn-son span:last-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

/* Contenu : le titre reste à gauche pendant que la liste défile à droite */
.colonnes { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.tete.colle { position: sticky; top: 110px; margin-bottom: 0; }
.recus.liste { grid-template-columns: 1fr; gap: 10px; }
.recus.liste article { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: auto auto 1fr; column-gap: 24px; padding: 18px 22px 18px 18px; }
.recus.liste .apercu { grid-row: 1 / -1; height: 120px; margin: 0; border-radius: 8px; -webkit-mask-image: none; mask-image: none; }
.recus.liste .apercu img { top: 12px; width: 70%; }
.recus.liste .apercu img + img { display: none; }
.recus.liste .num { margin-bottom: 6px; }
.recus.seul { margin-top: 14px; grid-template-columns: 1fr; }

/* Méthode : une bande à faire glisser */
.glisser { margin-top: 14px; font: 500 12px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em; color: var(--tres-doux); text-transform: uppercase; }
.glisser span { display: inline-block; color: var(--bleu); animation: glisser 1.6s ease-in-out infinite; }
@keyframes glisser { 50% { transform: translateX(5px); } }
.etapes.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(50% - 50vw); padding: 4px max(20px, calc(50vw - 570px)) 14px; scroll-padding-inline: max(20px, calc(50vw - 570px)); scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent; }
.etapes.rail li { scroll-snap-align: start; }

/* Prix : « pour toi » à gauche, la fiche à droite */
.prix-grille { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: 48px; align-items: start; }
.prix-grille .tete { margin-bottom: 28px; }
.duo.pile { grid-template-columns: 1fr; gap: 12px; }
.prix-grille .carte-prix.unique { margin: 0; max-width: none; position: sticky; top: 100px; }

/* FAQ : titre à gauche, questions à droite */
.faq-grille { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; }
.faq-grille .faq-liste { max-width: none; margin: 0; }

/* Appel final : le titre à gauche, le bouton à droite */
.final.final-ligne { display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; padding: 64px 56px; }
.final.final-ligne h2 { margin: 0; max-width: 640px; font-size: clamp(32px, 4vw, 52px); }
.final.final-ligne .hero-actions { flex: none; }

@media (max-width: 920px) {
  .hero-grille, .colonnes, .prix-grille, .faq-grille { grid-template-columns: 1fr; gap: 32px; }
  .vitrine.scene { height: auto; aspect-ratio: 1 / 1; margin-top: 8px; }
  .scene .iphone { left: 30%; width: 40%; }
  .scene .b2, .scene .b3 { display: none; }
  .tete.colle, .prix-grille .carte-prix.unique { position: static; }
  .mur { grid-template-columns: 1fr 1fr; }
  .mur .diapo:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .mur .diapo video { bottom: auto; }
  .recus.liste article { grid-template-columns: 110px 1fr; column-gap: 16px; }
  .recus.liste .apercu { height: 96px; }
  .etapes.rail { grid-auto-columns: 78%; }
  .final.final-ligne { flex-direction: column; align-items: flex-start; padding: 48px 24px; }
}
@media (max-width: 520px) {
  .hero-chiffres span { font-size: 12px; }
  .mur { grid-template-columns: 1fr; }
  .mur .diapo { aspect-ratio: 16 / 10; }
  .final.final-ligne .hero-actions, .final.final-ligne .btn { width: 100%; }
}

/* Ajustements après relecture */
.scene .iphone { left: 30%; width: 44%; bottom: -2%; }
.scene .ecran-centre { opacity: 1; }
.scene .b3 { top: auto; bottom: 4%; left: 2%; }
.scene .b1 { top: 0; right: 2%; }
.scene .b2 { bottom: 30%; right: -4%; }
.mur .diapo:last-child:nth-child(4n + 4) { grid-column: span 2; aspect-ratio: auto; }
.mur .diapo:not(:first-child) .meta { display: none; }
.mur .diapo:not(:first-child) .diapo-infos { padding: 40px 14px 12px; }
@media (max-width: 920px) {
  .scene .iphone { left: 28%; width: 44%; }
  .mur .diapo:last-child:nth-child(4n + 4) { aspect-ratio: 16 / 10; }
  .mur .diapo:last-child:nth-child(even) { grid-column: 1 / -1; }
}
.scene .badge { z-index: 3; }
.scene .b2 { bottom: 34%; right: -6%; }
.scene .b3 { bottom: 2%; left: -4%; }

/* Vignettes en plus dans la scène (Higgsfield, G63) */
.ecran-mini { aspect-ratio: 16 / 10; border-radius: 10px; border: 3px solid #16161c; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.9); animation: flotteEcran 6s ease-in-out infinite alternate; }
.scene .m1 { left: 4%; top: -2%; width: 30%; transform: rotate(-6deg); }
.scene .m2 { right: 0; bottom: -4%; width: 32%; transform: rotate(5deg); animation-delay: -3s; z-index: 1; }

/* Téléphone : la scène de vidéos passe AVANT le texte, en grand, comme une affiche */
@media (max-width: 920px) {
  .hero-split { padding-top: 76px; }
  .hero-grille { display: flex; flex-direction: column; gap: 0; }
  .vitrine.scene { order: -1; width: calc(100% + 40px); margin: 0 -20px 6px; aspect-ratio: 1 / 1.08; height: auto; overflow: visible; }
  .scene .ecran-centre { right: -10%; top: 6%; width: 74%; }
  .scene .ecran-carte { left: -6%; bottom: 20%; width: 50%; }
  .scene .iphone { left: 27%; width: 46%; bottom: 0; }
  .scene .m1 { left: -4%; top: 2%; width: 40%; }
  .scene .m2 { right: -6%; bottom: 6%; width: 42%; }
  .scene .b1 { top: auto; bottom: -2%; left: 50%; right: auto; translate: -50% 0; }
  .hero-split .pastille { margin-top: 10px; }
  .hero-split h1 { text-align: center; }
  .hero-split .hero-texte { text-align: center; }
  .hero-split .chapeau { margin-left: auto; margin-right: auto; }
  .hero-split .hero-actions { justify-content: center; }
}