/* ═════════ Hero « vue éclatée 2.5D » — page d'essai /accueil-v2/ ═════════
   Le téléphone est un empilement de couches dans un plan incliné (rotateX + rotateZ, preserve-3d) :
   chaque couche est décalée en Z de --i × --gap (+ --d, sa chute propre à l'arrivée, + --lift au survol). */
@property --gap { syntax: "<length>"; inherits: true; initial-value: 14px; }
@property --d { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lift { syntax: "<length>"; inherits: true; initial-value: 0px; }

.xpl { position: relative; min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr)); padding: 1.5rem 0 4rem; background: #F4F6FA; color: var(--n); overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.xpl__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#e2e6ee 1px, transparent 1px), linear-gradient(90deg, #e2e6ee 1px, transparent 1px); background-size: 56px 56px; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent); opacity: .8; }
.xpl__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; width: 100%; }
.xpl__intro { position: relative; z-index: 2; max-width: 700px; container-type: inline-size; }
.xpl__kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font-family: var(--ff-d); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--m); }
.xpl__kicker::before { content: ""; width: 28px; height: 2px; background: var(--o); }
/* Accroche sur 2 lignes : la 2e ligne mesure ~14 fois la taille du texte, d'où 6,9 % de la largeur de la colonne */
.xpl__title { font-size: clamp(2rem, 6.9cqi, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; margin: 0 0 1.4rem; }
.xpl__title em { font-style: normal; color: var(--o); }
.xpl__line { display: block; overflow: hidden; padding-bottom: .06em; }
.xpl__line > span { display: inline-block; }
.xpl__lead { max-width: 520px; margin: 0 0 1.75rem; font-size: 1.12rem; line-height: 1.55; color: var(--g); }
.xpl .diag { margin-bottom: 1.5rem; }
.xpl__trust { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; color: var(--g); }
.xpl__trust li { display: inline-flex; align-items: center; gap: .55rem; }

/* Scène 3D */
.xpl__stage { --w: clamp(170px, 16vw, 250px); position: relative; height: min(80vh, 700px); min-height: 560px; perspective: 2400px; display: grid; place-items: center; }
.xpl__tilt, .xpl__iso { transform-style: preserve-3d; }
.xpl__tilt { margin-right: 26%; }
.xpl__iso { transform: rotateX(56deg); }
.xpl__phone { position: relative; width: var(--w); aspect-ratio: 262 / 524; transform-style: preserve-3d; transform: rotateZ(34deg); }
.xpl__layer { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap) + var(--d) + var(--lift))); transition: --lift .5s var(--ease), opacity .35s; cursor: pointer; backface-visibility: hidden; }
.xpl__layer svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Seules les formes dessinées captent le survol (pas le rectangle entier de la couche) */
.xpl__layer, .xpl__layer svg { pointer-events: none; }
.xpl__layer svg * { pointer-events: visiblePainted; }
.xpl__layer.is-hot { --lift: 46px; }
.xpl.has-hot .xpl__layer:not(.is-hot) { opacity: .3; }
.xpl__shadow { position: absolute; inset: 6% 8%; border-radius: 34px; background: rgba(26,29,41,.28); filter: blur(24px); transform: translateZ(-40px); }
.xpl__anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* Repères */
.xpl__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.xpl__lines path { fill: none; stroke: #9aa2b3; stroke-width: 1.2; }
.xpl__lines path.is-hot { stroke: var(--o); stroke-width: 1.6; }
.xpl__lines circle { fill: #fff; stroke: var(--n); stroke-width: 1.5; }
.xpl__lines circle.is-hot { stroke: var(--o); fill: var(--o); }
.xpl__legend { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 3; }
.xpl__item { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.xpl__item a { display: flex; align-items: center; gap: .65rem; padding: .5rem .9rem .5rem .55rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--n); box-shadow: 0 6px 18px -10px rgba(26,29,41,.35); white-space: nowrap; transition: border-color .25s, transform .35s var(--ease-back); }
.xpl__item a:hover, .xpl__item.is-hot a { border-color: var(--o); color: var(--n); transform: translateX(4px); }
.xpl__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--l); font-family: var(--ff-d); font-size: .78rem; font-weight: 700; color: var(--g); transition: background .25s, color .25s; }
.xpl__item.is-hot .xpl__num, .xpl__item a:hover .xpl__num { background: var(--o); color: #fff; }
.xpl__lbl { display: flex; flex-direction: column; line-height: 1.2; }
.xpl__lbl strong { font-size: .92rem; font-weight: 700; }
.xpl__lbl small { font-size: .78rem; color: var(--o); font-weight: 650; }

.xpl__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m); }
.xpl__scroll i { width: 1.5px; height: 36px; background: linear-gradient(var(--o) 50%, transparent 50%) 0 0 / 100% 200%; animation: xplCue 1.8s var(--ease) infinite; }
@keyframes xplCue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* Avant l'arrivée (JS) : rien ne saute à l'affichage */
.xpl.is-ready:not(.is-in) .xpl__item, .xpl.is-ready:not(.is-in) .xpl__lines { opacity: 0; }

@media (min-width: 992px) and (max-width: 1199.98px) { .xpl__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Écrans étroits : scène sous le texte, légende en liste sous le téléphone */
@media (max-width: 991.98px) {
  .xpl__title { font-size: clamp(1.75rem, 8.7cqi, 3.4rem); }
  .xpl { display: block; padding-bottom: 2.5rem; }
  .xpl__inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .xpl__inner > * { min-width: 0; }
  .xpl__stage { --w: min(40vw, 180px); height: auto; min-height: 0; margin-top: .5rem; overflow: visible; }
  .xpl__lines { display: none; }
  .xpl__legend { position: static; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; pointer-events: auto; margin-top: .5rem; }
  .xpl__stage { display: block; }
  .xpl__tilt { position: relative; height: min(96vw, 420px); display: grid; place-items: center; margin-right: 0; }
  .xpl__item { position: static; transform: none !important; }
  .xpl__item a { white-space: normal; height: 100%; border-radius: 16px; }
  .xpl__scroll { display: none; }
}
@media (max-width: 575.98px) {
  .xpl__legend { grid-template-columns: 1fr; }
  .xpl__lead { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xpl__layer { transition: opacity .2s; }
  .xpl__scroll i { animation: none; }
}

/* Suggestions sous le diagnostic : version claire (le style par défaut est fait pour le hero sombre) */
.xpl .diag__chip { background: #fff; border-color: var(--line); color: var(--g); box-shadow: 0 1px 2px rgba(26,29,41,.05); }
.xpl .diag__chip:hover { background: var(--o-soft, #fff1e5); border-color: var(--o); color: var(--n); }

/* Pendant l'arrivée : pas de transition CSS sur les couches (GSAP pilote opacité et position) */
.xpl.is-arriving .xpl__layer { transition: none; }

/* ═════════ Page d'essai /accueil-v2/ : fond sombre, sans quadrillage, robot du diagnostic ═════════ */
.xpl--dark { background: #12141c; color: #fff; }
.xpl--dark .xpl__kicker { color: #9aa3b8; }
.xpl--dark .xpl__lead, .xpl--dark .xpl__trust { color: #b9c0d0; }
.xpl--dark .xpl__trust strong { color: #fff; }
.xpl--dark .xpl__shadow { background: rgba(0,0,0,.55); }
/* le bord du téléphone se détache du fond */
.xpl--dark .xpl__layer--ecran svg > rect:first-of-type { stroke: #3a4054; stroke-width: 2; }
.xpl--dark .xpl__lines path { stroke: #4a5068; }
.xpl--dark .xpl__lines circle { fill: #12141c; stroke: #c3c8d6; }
.xpl--dark .xpl__item a { background: #1d2130; border-color: rgba(255,255,255,.1); color: #fff; box-shadow: 0 8px 22px -12px rgba(0,0,0,.6); }
.xpl--dark .xpl__item a:hover, .xpl--dark .xpl__item.is-hot a { border-color: var(--o); color: #fff; }
.xpl--dark .xpl__num { background: #2a2f40; color: #c3c8d6; }
.xpl--dark .xpl__scroll { color: #8891a5; }
.xpl--dark .diag__chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #d5d9e3; box-shadow: none; }
.xpl--dark .diag__chip:hover { background: rgba(255,121,0,.14); border-color: var(--o); color: #fff; }
.xpl--dark .diag__field { border-color: transparent; }

/* Zone de diagnostic encadrée : le robot à gauche, sa bulle, le champ et les résultats à droite */
.diagbot { --botcol: 210px; position: relative; z-index: 4; display: grid; grid-template-columns: var(--botcol) minmax(0, 1fr); gap: .25rem 1rem; align-items: start; max-width: 680px; margin: 0 0 1.6rem; padding: 1rem 1.25rem 1.15rem .5rem; border-radius: var(--r-lg); background: #1b1f2c; border: 1px solid rgba(255,255,255,.08); transition: border-color .4s; }
.diagbot[data-state="think"] { border-color: rgba(78,173,234,.55); }
.diagbot[data-state="found"] { border-color: rgba(255,121,0,.6); }
.diagbot__robot { position: relative; height: 230px; cursor: pointer; }
/* le robot déborde du cadre : tête au-dessus, bras par-dessus les bords (canevas transparent, sans clic) */
.diagbot__stage { --pad: 70px; position: absolute; inset: calc(-96px - var(--pad)) calc(-34px - var(--pad)) calc(-10px - var(--pad)) calc(-44px - var(--pad)); pointer-events: none; opacity: 0; transition: opacity .6s; }
.diagbot.has-bot .diagbot__stage { opacity: 1; }
.diagbot__stage canvas { display: block; }
/* Safari / iOS : le canevas transparent du robot sur son propre calque (sinon l'ombre et le fond scintillent quand la zone se redessine) */
.diagbot__stage { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.diagbot__main { min-width: 0; }
.diagbot__say { position: relative; display: inline-block; max-width: 100%; margin: .2rem 0 .85rem; padding: .55rem .9rem; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.07); color: #e6e9f0; font-size: .95rem; line-height: 1.4; }
.diagbot__say::before { content: ""; position: absolute; left: -7px; bottom: 6px; border: 7px solid transparent; border-right-color: rgba(255,255,255,.07); border-left: 0; }
.diagbot__say.is-new { animation: diagbotSay .45s var(--ease-back); }
@keyframes diagbotSay { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.diagbot .diag { margin: 0; max-width: none; position: static; }
.diagbot__main { position: static; }
/* Résultat : bulle posée sous la zone, par-dessus la page (la zone ne s'agrandit pas), fermable */
.diagbot > .diag__out { position: absolute; left: calc(var(--botcol) - 28px); right: .75rem; bottom: calc(100% - 46px); top: auto; margin: 0; z-index: 6; }
/* bulle de parole du robot : elle sort de sa tête (pointe vers la gauche, grandit depuis le coin bas gauche) */
.diagbot .diag__out .diag-card { position: relative; padding-right: 3.2rem; border-radius: 22px 22px 22px 6px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.7); transform-origin: 0 100%; animation: diagbotBulle .55s var(--ease-back) both; }
.diagbot .diag__out .diag-card::before { content: ""; position: absolute; left: -9px; bottom: 14px; width: 18px; height: 18px; background: inherit; border-left: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); transform: rotate(45deg); border-radius: 0 0 0 3px; }
@keyframes diagbotBulle { from { opacity: 0; transform: translate(-24px, 18px) scale(.35); } }
.diagbot .diag__out > .muted { transform-origin: 0 100%; animation: diagbotBulle .55s var(--ease-back) both; padding: .8rem 1rem; border-radius: var(--r); background: #fff; color: var(--g); }
.diagbot__x { position: absolute; top: .6rem; right: .6rem; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--l); color: var(--n); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s, transform .35s var(--ease-back); }
.diagbot__x:hover { background: var(--line); transform: rotate(90deg); }
.diagbot .diag__chips { margin-top: .75rem; flex-wrap: wrap; overflow: visible; }
/* résultat dans la zone : le bouton passe sous le texte */
.diagbot .diag-card { grid-template-columns: auto minmax(0, 1fr); }
.diagbot .diag-card > .btn-p21 { grid-column: 1 / -1; justify-self: start; }
.xpl--dark .diag-card { border-color: transparent; }

@media (max-width: 575.98px) {
  .diagbot { --botcol: 124px; gap: .25rem .6rem; padding: .8rem .8rem 1rem .25rem; }
  .diagbot__robot { height: 168px; }
  .diagbot__stage { --pad: 44px; inset: calc(-62px - var(--pad)) calc(-20px - var(--pad)) calc(-8px - var(--pad)) calc(-22px - var(--pad)); }
  .diagbot > .diag__out { left: calc(var(--botcol) - 34px); right: .25rem; bottom: calc(100% - 30px); }
  .diagbot__say { font-size: .88rem; }
  /* le champ passe sous le robot et sa bulle, sur toute la largeur */
  .diagbot__main { display: contents; }
  .diagbot__say { align-self: center; }
  .diagbot .diag { grid-column: 1 / -1; padding-left: .45rem; }
}
/* pendant que la bulle de résultat parle, la petite bulle se tait (elles se chevauchaient) */
.diagbot__say { transition: opacity .25s; }
.diagbot.has-out .diagbot__say { opacity: 0; }
/* champ de la zone : texte un peu plus petit, l'exemple animé tient entre l'icône et le bouton */
.diagbot .diag input, .diagbot .diag__ph { font-size: 1.05rem; }
.diagbot .diag__ph { left: 3.4rem; max-width: calc(100% - 3.4rem - 4.4rem); }
/* bouton rond à flèche (le libellé « Diagnostiquer » reste lu par les lecteurs d'écran) */
.diagbot .diag__btn { width: 56px; height: 56px; padding: 0; display: grid; place-items: center; }
.diagbot .diag__btn-l { font-size: 0; }
.diagbot .diag__btn-l::before { content: "→"; font-size: 1.5rem; line-height: 1; }
/* téléphone : bouton rond à flèche (le libellé reste lu par les lecteurs d'écran) pour laisser la place à l'exemple */
@media (max-width: 575.98px) {
  .diagbot .diag input, .diagbot .diag__ph { font-size: .88rem; }
  .diagbot .diag__field { padding-left: .85rem; }
  .diagbot .diag__ph { left: 2.75rem; max-width: calc(100% - 2.75rem - 3.8rem); }
  .diagbot .diag__btn { width: 48px; height: 48px; }
  .diagbot .diag__btn-l::before { font-size: 1.35rem; }
}
@media (max-width: 380px) { .diagbot .diag input, .diagbot .diag__ph { font-size: .76rem; } }
@media (min-width: 576px) and (max-width: 991.98px) { .diagbot { --botcol: 170px; } }
@media (prefers-reduced-motion: reduce) { .diagbot__say.is-new, .diagbot .diag__out .diag-card, .diagbot .diag__out > .muted { animation: none; } }

/* accueil-v2 : hero sur toute la largeur disponible, robot, téléphone et saisie agrandis */
@media (min-width: 992px) {
  .xpl--dark .xpl__inner { max-width: none; padding-inline: clamp(1.5rem, 4vw, 5rem); grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 2.5rem; }
  .xpl--dark .xpl__intro { max-width: 860px; }
  .xpl--dark .xpl__lead { max-width: 640px; font-size: 1.2rem; }
  .xpl--dark .xpl__stage { --w: clamp(200px, 19vw, 340px); height: min(88vh, 860px); }
  .xpl--dark .diagbot { --botcol: clamp(190px, 14vw, 250px); max-width: 860px; padding: 1.4rem 1.6rem 1.5rem .6rem; }
  .xpl--dark .diagbot__robot { height: clamp(230px, 17vw, 270px); }
  .xpl--dark .diagbot__stage { inset: calc(-112px - var(--pad)) calc(-40px - var(--pad)) calc(-12px - var(--pad)) calc(-52px - var(--pad)); }
  .xpl--dark .diagbot__say { font-size: 1.05rem; }
  .xpl--dark .diagbot .diag__field { padding: .55rem .55rem .55rem 1.35rem; }
  .xpl--dark .diagbot .diag input, .xpl--dark .diagbot .diag__ph { font-size: 1.1rem; }
  .xpl--dark .diagbot .diag input { padding: .95rem .3rem; }
  /* exemple animé : toute la place entre l'icône et le bouton */
  .xpl--dark .diagbot .diag__ph { left: 3.6rem; max-width: calc(100% - 3.6rem - 4.6rem); }
  .xpl--dark .diagbot .diag__btn { width: 60px; height: 60px; }
  .xpl--dark .diagbot .diag__ic .ic { width: 1.7em; height: 1.7em; }
  .xpl--dark .diagbot .diag__chip { font-size: .88rem; padding: .42rem .9rem; }
}
/* la tête du robot dépasse au-dessus de la zone : place gardée sous le texte d'intro */
.xpl--dark .diagbot { margin-top: 5.5rem; }
@media (max-width: 991.98px) { .xpl--dark .diagbot { margin-top: 4.5rem; } }
@media (max-width: 575.98px) { .xpl--dark .diagbot { margin-top: 3.6rem; } }

/* ═════════ accueil-v2 : chargeur = assemblage du téléphone (même fond que le hero) ═════════ */
/* même fond que le hero : l'effacement du chargeur ne se voit pas, seul le téléphone bouge */
html.js:not(.no-loader) .has-opening .loader { background: #12141c; animation-delay: 10s; }
.has-opening .loader__logo { display: none; }
.has-opening .loader__in { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(260px, 64vw); }
.ldr-phone { position: relative; perspective: 2400px; display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.ldr-phone .xpl__tilt { margin: 0; }
.ldr-phone .xpl__layer { cursor: default; transition: none; }