/* ==========================================================================
   EXPLORER IMPRA — CE QUI APPARTIENT À LA DÉMONSTRATION
   Les écrans sont IMPRA (impra/css/explorer-v3.css, règles réelles de la
   coque V3). Cette feuille n'habille que ce que le produit n'a pas : le
   portail (la porte du garage) et l'entrée, le ruban qui dit
   « démonstration », la visite guidée, ce qui est réservé au compte,
   l'invitation à l'essai, les retours des gestes simulés. Mêmes jetons que
   la V3 (navy #0F172E, bleu #1F74E7, surfaces ardoise), mêmes polices.
   ========================================================================== */

:root {
  --x-ruban-h: 44px;
  --x-encre: #0F172E;
  --x-encre-2: #1C2A44;
  --x-sur-encre: #F4F7FA;
  --x-sur-encre-doux: rgba(244, 247, 250, 0.72);
  --x-bleu: #1F74E7;
  --x-bleu-encre: #4D94F5;
  --x-bleu-texte: #155FC4;
  --x-bleu-pale: #F5F9FF;
  --x-bleu-doux: #EAF2FF;
  --x-ardoise: #F5F7FB;
  --x-trait: #DCE3F0;
  --x-texte: #0F172E;
  --x-texte-2: #475467;
  --x-texte-3: #5E6A80;
  --x-vert: #157A4A;
  --x-rouge: #B42536;
  --x-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --x-police: "Schibsted Grotesk Variable", "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --x-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

html { background: #FFFFFF; }
body.explorer {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--x-police);
  color: var(--x-texte);
  background: var(--x-ardoise);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.explorer ::selection { background: var(--x-bleu-doux); color: var(--x-encre); }
.explorer [hidden] { display: none !important; }

/* La coque V3 occupe la fenêtre sous le ruban. */
.explorer .coque-v3 { top: var(--x-ruban-h); }

.explorer-evitement {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--x-sur-encre); color: var(--x-encre);
  font: 600 14px/20px var(--x-police); text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.explorer-evitement:focus { top: 8px; }

.ph-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.explorer svg use { pointer-events: none; }
.explorer svg:not([fill]) { fill: currentColor; }

/* Le rail : le symbole remplace le logo, comme dans le produit. */
.explorer .coque-v3__nav .coque-v3__symbole { display: none; }
.explorer .coque-v3__nav.is-collapsed .coque-v3__symbole { display: block; }
.explorer .coque-v3__nav.is-collapsed .coque-v3__logo,
.explorer .coque-v3__nav.is-collapsed .it-sidebar__orgtext,
.explorer .coque-v3__nav.is-collapsed .it-sidebar__orgchev,
.explorer .coque-v3__nav.is-collapsed .it-nav__count,
.explorer .coque-v3__nav.is-collapsed .it-sidebar__usage { display: none; }

/* Défaut du SaaS relevé sur le banc (impra-web, fiche au téléphone) : le menu
   « ⋯ » est posé en absolu sur .x-f3, il s'ouvre donc au bas de la fiche,
   loin du bouton. La démonstration l'accroche à la ligne du titre ; le
   correctif reste à faire dans le produit (voir le rapport). */
@media (max-width: 767px) {
  .explorer .x-f3-band__l2 { position: relative; }
}

/* ══ LE RUBAN ══════════════════════════════════════════════════════════════ */
.x-demo-ruban {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--x-ruban-h);
  background: var(--x-encre);
  color: var(--x-sur-encre);
  font: 500 13px/18px var(--x-police);
}
.x-demo-ruban__in {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 12px 0 16px;
}
.x-demo-ruban__etat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.x-demo-ruban__puce {
  flex: none;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(77, 148, 245, 0.18); color: #CFE2FD;
  font: 600 12px/16px var(--x-police); letter-spacing: 0.01em;
}
.x-demo-ruban__texte { min-width: 0; color: var(--x-sur-encre-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-demo-ruban__court { display: none; }
.x-demo-ruban__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.x-demo-ruban__lien {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--x-sur-encre);
  font: inherit; text-decoration: none; cursor: pointer;
  transition: background-color 0.18s var(--x-ease), color 0.18s var(--x-ease);
}
.x-demo-ruban__lien svg { width: 16px; height: 16px; flex: none; opacity: 0.86; }
.x-demo-ruban__lien:hover { background: rgba(244, 247, 250, 0.08); }
.x-demo-ruban__lien[aria-expanded="true"] { background: rgba(244, 247, 250, 0.12); }
.x-demo-ruban__progres {
  min-width: 26px; padding: 1px 6px; border-radius: 999px;
  background: rgba(244, 247, 250, 0.12); color: var(--x-sur-encre);
  font: 500 11.5px/16px var(--x-mono); text-align: center;
}
.x-demo-ruban__essai {
  display: inline-flex; align-items: center; height: 32px; margin-left: 6px; padding: 0 14px;
  border-radius: 9px;
  background: var(--x-sur-encre); color: var(--x-encre);
  font: 600 13.5px/18px var(--x-police); text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s var(--x-ease), transform 0.18s var(--x-ease);
}
.x-demo-ruban__essai:hover { background: #FFFFFF; }
.x-demo-ruban__essai:active { transform: translateY(1px); }
.x-demo-ruban__essai-court { display: none; }
.x-demo-ruban__guide-court { display: none; }
/* Au doigt, chaque commande du ruban offre 44 px de haut. */
@media (pointer: coarse) {
  .x-demo-ruban__lien, .x-demo-ruban__essai { position: relative; }
  .x-demo-ruban__lien::after, .x-demo-ruban__essai::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
.x-demo-ruban :focus-visible { outline: 2px solid var(--x-bleu-encre); outline-offset: 2px; }

@media (max-width: 1100px) {
  .x-demo-ruban__long { display: none; }
  .x-demo-ruban__court { display: inline; }
}
@media (max-width: 860px) {
  .x-demo-ruban__lien span:not(.x-demo-ruban__progres) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .x-demo-ruban__lien { width: 36px; padding: 0; justify-content: center; position: relative; }
  .x-demo-ruban__guide { width: auto; padding: 0 8px; }
}
@media (max-width: 480px) {
  /* Réinitialiser et Retour au site vivent alors dans « Plus » : plus d'icônes muettes côte à côte. */
  .x-demo-ruban__lien--large { display: none; }
  .x-demo-ruban__lien.x-demo-ruban__guide { width: auto; padding: 0 10px; gap: 6px; }
  .x-demo-ruban__lien.x-demo-ruban__guide span.x-demo-ruban__guide-court { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; white-space: nowrap; }
  .x-demo-ruban__in { padding: 0 8px 0 12px; gap: 8px; }
  .x-demo-ruban__texte { display: none; }
  .x-demo-ruban__essai-long { display: none; }
  .x-demo-ruban__essai-court { display: inline; }
  .x-demo-ruban__essai { padding: 0 12px; margin-left: 2px; }
}

/* ══ LE PORTAIL — l'entrée dans le cockpit ═══════════════════════════════
   26/10/2026 : la porte navy plein écran cède la place à la lumière de
   l'accueil, dont le portail reprend le hero — le même champ (blanc, dégradé
   ardoise et rayures), le même titre (Inter), la même fenêtre produit. Sauf
   qu'ici la fenêtre est le vrai tableau de bord d'Orvalis Automobiles, déjà
   dessiné, flouté derrière la vitre : on voit où l'on va entrer. Devant :
   le titre et la carte d'entrée (e-mail, téléphone, « Entrer dans IMPRA »,
   trois garanties, l'information légale) ; rien d'autre (27/10/2026).
   À l'entrée, la vitre se dissipe et la fenêtre s'avance jusqu'à remplir
   l'écran en faisant le point ; le ruban de la démonstration arrive en
   dernier. Venu du site, le passage commence avant même la page : la
   fenêtre du hero de l'accueil devient celle-ci (« Le passage », plus bas).
   Sans JavaScript, rien de tout cela ne s'affiche. */
:root {
  --x-gout: clamp(20px, 2.2vw, 56px);                 /* la gouttière du site */
  --x-fen-haut: clamp(430px, 52vh, 560px);           /* où la fenêtre commence */
  --x-fen-echelle: 0.86;
  --x-fen-flou: 6px;
  --x-hero-police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --x-hero-encre: #1A1B1E;
  --x-hero-phrase: #5B6478;
}
.x-portail { display: none; }
html.x-js:not(.x-portail-passe) .x-portail { display: block; }
html.x-js:not(.x-portail-passe) .explorer-evitement { display: none; }
html.x-portail-ouvert { overflow: hidden; }
.x-portail { position: fixed; inset: 0; z-index: 100; }
.x-portail__porte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transition: opacity 0.16s ease-out;
}

/* Le champ : celui du hero de l'accueil (dégradé et rayures à 40 %, voile
   blanc en haut), posé sous la fenêtre. Le corps devient transparent le temps
   du portail : le champ, en z-index -1, se peint juste au-dessus du fond. */
html.x-js:not(.x-portail-passe) body.explorer { background: transparent; }
html.x-js:not(.x-portail-passe) body.explorer::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(150% 84% at 50% 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 78%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.31) 0 1px, rgba(255, 255, 255, 0) 1px 8px),
    radial-gradient(90% 80% at 50% 100%, rgba(233, 242, 254, 0.4) 0%, rgba(187, 214, 250, 0.4) 45%, rgba(111, 167, 240, 0.4) 100%);
}

/* La fenêtre : la coque V3 entière, réduite et floutée, avec le cadre et
   l'ombre de la fenêtre du hero. Le flou porte sur son contenu, pas sur son
   bord, qui reste net. */
html.x-js:not(.x-portail-passe):not(.x-entree) .coque-v3 {
  transform-origin: 50% 0;
  transform: translateY(calc(var(--x-fen-haut) - var(--x-ruban-h))) scale(var(--x-fen-echelle));
  border-radius: 24px;
  background: var(--surface-canvas, #F2F4F8);
  box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.08), 0 2px 4px rgba(11, 13, 24, 0.04),
              0 24px 48px -24px rgba(11, 13, 24, 0.2), 0 70px 120px -60px rgba(29, 107, 213, 0.3);
}
html.x-js:not(.x-portail-passe):not(.x-entree) .coque-v3 > * { filter: blur(var(--x-fen-flou)) saturate(1.04); }
/* Le ruban de la démonstration attend que l'on soit entré. */
html.x-js:not(.x-portail-passe):not(.x-entree) .x-demo-ruban { transform: translateY(-100%); }

/* La tête : la marque et la sortie, aux places de l'en-tête du site. */
.x-portail__tete {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 78px; padding: 0 var(--x-gout);
}
.x-portail__accueil { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; color: var(--x-encre); }
.x-portail__logo { flex: none; width: 139px; height: auto; color: currentColor; }
/* La sortie : le bouton clair de l'en-tête du site, toujours atteignable. */
.x-portail__sortie {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 12px; border-radius: 10px;
  border: 1px solid #D3DCEA; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 46, 0.05);
  font: 500 15px/20px var(--x-police); color: var(--x-encre); text-decoration: none;
  transition: background-color 0.18s var(--x-ease), border-color 0.18s var(--x-ease);
}
.x-portail__sortie svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.22s var(--x-ease); }
.x-portail__sortie:hover { background: #F7F9FC; border-color: #B9C6DB; }
.x-portail__sortie:hover svg { transform: translateX(-3px); }
.x-portail__sortie:focus-visible, .x-portail__accueil:focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 3px; }

/* Le contenu : centré, comme le hero de l'accueil. */
.x-portail__in {
  position: relative; z-index: 1; flex: 1 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: clamp(8px, 3.4vh, 40px) 20px clamp(28px, 5vh, 56px);
}
.x-portail__marque {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 5px 12px 5px 10px; border-radius: 13px;
  border: 1px solid #EEEFF1; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 46, 0.04);
  font: 500 13px/18px var(--x-hero-police); letter-spacing: -0.01em; color: #232529;
}
.x-portail__voyant { width: 7px; height: 7px; border-radius: 50%; background: var(--x-bleu); box-shadow: 0 0 0 3px rgba(31, 116, 231, 0.16); }
.x-portail__titre {
  margin: 26px 0 0; max-width: 13em;
  font-family: var(--x-hero-police); font-optical-sizing: auto; font-variation-settings: "opsz" 32;
  font-feature-settings: "ss03", "calt";
  font-size: clamp(36px, 1.6vw + 30px, 60px); font-weight: 600; line-height: 0.98; letter-spacing: -0.02em;
  color: var(--x-hero-encre); text-wrap: balance;
}
.x-portail__titre:focus { outline: none; }
.x-portail__texte {
  margin: 20px 0 0; max-width: 32em;
  font: 500 18px/1.38 var(--x-hero-police); letter-spacing: -0.01em;
  color: var(--x-hero-phrase); text-wrap: balance;
}

/* La carte d'entrée : blanche, au rayon des cartes du site, posée sur la
   fenêtre comme le téléphone du hero de l'accueil. */
.x-portail__carte {
  position: relative; box-sizing: border-box;
  display: grid; gap: 14px; width: 100%; max-width: 620px;
  margin-top: clamp(24px, 3.6vh, 40px); padding: 24px 24px 20px;
  border-radius: 20px; background: #FFFFFF; color: var(--x-texte); text-align: left;
  box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.07), 0 1px 2px rgba(11, 13, 24, 0.04),
              0 16px 32px -16px rgba(11, 13, 24, 0.16), 0 48px 96px -48px rgba(15, 23, 46, 0.4);
}
.x-portail__champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.x-champ { display: grid; gap: 8px; }
.x-champ__libelle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 15px/20px var(--x-police); color: var(--x-texte); }
.x-champ__statut { font: 500 13px/18px var(--x-police); color: var(--x-texte-3); }
.x-champ__statut:empty { display: none; }
.x-champ__saisie {
  box-sizing: border-box; width: 100%; height: 50px; padding: 0 15px;
  border: 1px solid #D3DAE6; border-radius: 12px;
  background: #FFFFFF; color: var(--x-texte); caret-color: var(--x-bleu);
  font: 400 16px/22px var(--x-police);
  transition: border-color 0.18s var(--x-ease), box-shadow 0.18s var(--x-ease);
}
.x-champ__saisie::placeholder { color: #6B7385; }
.x-champ__saisie:hover { border-color: #B7C2D4; }
.x-champ__saisie:focus { outline: none; border-color: var(--x-bleu); box-shadow: 0 0 0 4px rgba(31, 116, 231, 0.16); }
.x-champ__saisie[aria-invalid="true"] { border-color: var(--x-rouge); }
.x-champ__saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 37, 54, 0.14); }
.x-champ__erreur { margin: 0; font: 500 13.5px/19px var(--x-police); color: var(--x-rouge); text-wrap: pretty; }
.x-champ__erreur:empty { display: none; }
.x-champ__suggestion { margin: 0; font: 400 13.5px/19px var(--x-police); color: var(--x-texte-2); }
.x-champ__corriger {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 13.5px/19px var(--x-police); color: var(--x-bleu-texte);
  text-decoration: underline; text-underline-offset: 3px;
}
.x-portail__entrer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; margin-top: 2px; border: 0; border-radius: 14px;
  background: var(--x-encre); color: #FFFFFF;
  font: 600 16.5px/20px var(--x-police); letter-spacing: -0.01em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(15, 23, 46, 0.2), 0 10px 22px -12px rgba(15, 23, 46, 0.55);
  transition: background-color 0.18s var(--x-ease), transform 0.18s var(--x-ease), box-shadow 0.18s var(--x-ease);
}
.x-portail__entrer:hover { background: var(--x-encre-2); }
.x-portail__entrer svg { transition: transform 0.22s var(--x-ease); }
.x-portail__entrer:hover svg { transform: translateX(3px); }
.x-portail__entrer:active { transform: translateY(1px); }
.x-portail__entrer[aria-busy="true"] { cursor: progress; }
.x-portail__entrer[aria-busy="true"] svg { display: none; }
.x-portail__entrer[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.32); border-top-color: #FFFFFF;
  animation: x-tourne 0.8s linear infinite;
}
@keyframes x-tourne { to { transform: rotate(360deg); } }
.x-portail__carte :focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 2px; }
.x-portail__entrer:focus-visible { outline: 3px solid var(--x-bleu); outline-offset: 3px; }
.x-portail__retour { padding: 12px 14px; border-radius: 12px; background: #FDF1F2; color: #8A1C2A; font: 500 14px/20px var(--x-police); text-wrap: pretty; }
.x-portail__retour p { margin: 0; }
.x-portail__sans {
  margin-top: 10px; padding: 9px 12px; border: 1px solid rgba(138, 28, 42, 0.28); border-radius: 10px;
  background: #FFFFFF; color: #8A1C2A; font: 600 14px/18px var(--x-police); cursor: pointer;
}
.x-portail__sans:hover { background: #FFF7F8; }
.x-portail__rgpd { margin: 0; padding-top: 14px; border-top: 1px solid #EDF1F6; font: 400 12.5px/1.55 var(--x-police); color: var(--x-texte-3); text-wrap: pretty; }
.x-portail__rgpd a { color: var(--x-bleu-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; white-space: nowrap; }
.x-portail__rgpd a:hover { color: var(--x-encre); }
/* Les trois garanties : une ligne sous le bouton, chaque mot avec son
   pictogramme du jeu V3 (Phosphor, graisse « regular »), fin et discret. */
.x-portail__garanties { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 2px 0 0; padding: 0; list-style: none; }
.x-portail__garanties li { display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px/18px var(--x-police); color: var(--x-texte-2); white-space: nowrap; }
.x-portail__garanties svg { flex: none; width: 16px; height: 16px; fill: currentColor; color: var(--x-texte-3); }
.x-portail__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.x-portail ::selection { background: var(--x-bleu-doux); color: var(--x-encre); }

/* L'entrée : la vitre se dissipe d'abord (0,16 s), la fenêtre s'avance
   (0,52 s) en faisant le point, le ruban arrive avant qu'elle ne se pose.
   Moins de 0,6 s en tout ; la visite attend un temps de plus (portail.mjs). */
.x-portail.is-ouverture { pointer-events: none; }
.x-portail.is-ouverture .x-portail__porte { opacity: 0; }
.x-portail.is-ouverture .x-portail__in { transform: translateY(-10px) scale(0.99); transition: transform 0.3s var(--x-ease); }
html.x-entree .coque-v3 { transition: transform 0.52s var(--x-ease) 0.04s, border-radius 0.52s var(--x-ease) 0.04s, box-shadow 0.4s ease; }
html.x-entree .coque-v3 > * { transition: filter 0.42s var(--x-ease) 0.04s; }
html.x-entree body.explorer::before { transition: opacity 0.4s ease; opacity: 0; }
html.x-entree .x-demo-ruban { transition: transform 0.32s var(--x-ease) 0.2s; }

/* L'arrivée sans passage (lien direct, navigateur sans transition entre
   documents) : les textes et la carte sont là dès le premier rendu — aucun
   fondu depuis l'invisible, qu'un téléphone lent ferait attendre le temps que
   la démonstration se charge (mesuré : près d'une seconde) ; seule la fenêtre,
   derrière, monte et se pose. Venu du site, le passage s'en charge
   (html.x-vt-arrivee, qui reste : l'arrivée ne se rejoue pas à la fin du
   passage). Remplissage « backwards » : l'animation finie ne fige rien, la
   transition de l'entrée part bien de la fenêtre posée. */
@media (prefers-reduced-motion: no-preference) {
  html.x-js:not(.x-portail-passe):not(.x-vt-arrivee):not(.x-entree) .coque-v3 { animation: x-fenetre-arrive 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards; }
  @keyframes x-fenetre-arrive { from { opacity: 0; transform: translateY(calc(var(--x-fen-haut) - var(--x-ruban-h) + 28px)) scale(calc(var(--x-fen-echelle) * 0.98)); } }
}

/* Mouvement réduit : la même vitre et la même fenêtre, immobiles (une
   position fixe n'est pas un mouvement). L'entrée passe par le blanc : la
   porte devient opaque et son contenu s'efface (0,18 s), la fenêtre prend
   tout l'écran derrière elle, puis la porte s'efface (0,22 s). Rien ne se
   déplace à l'écran (js/explorer/portail.mjs, lever). */
@media (prefers-reduced-motion: reduce) {
  html.x-js:not(.x-portail-passe):not(.x-entree) .x-demo-ruban { transform: none; opacity: 0; }
  .x-portail.is-ouverture .x-portail__porte { opacity: 1; background: #FFFFFF; transition: background-color 0.18s ease; }
  .x-portail.is-ouverture .x-portail__tete, .x-portail.is-ouverture .x-portail__in { opacity: 0; transform: none; transition: opacity 0.18s ease; }
  .x-portail.is-levee .x-portail__porte { opacity: 0; transition: opacity 0.22s ease; }
  html.x-entree .coque-v3, html.x-entree .coque-v3 > *, html.x-entree body.explorer::before { transition: none; }
  html.x-entree .x-demo-ruban { transition: opacity 0.22s ease; }
}

@media (max-width: 899px) {
  :root { --x-fen-haut: 42vh; --x-fen-echelle: 0.92; }
  .x-portail__tete { height: 64px; padding: 0 18px; }
  .x-portail__logo { width: 116px; }
  /* La sortie se réduit à sa flèche. */
  .x-portail__sortie { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .x-portail__sortie span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .x-portail__in { padding: 20px 16px 32px; }
  .x-portail__titre { margin-top: 18px; max-width: 11em; font-size: clamp(29px, 7.6vw, 40px); line-height: 1.02; }
  .x-portail__texte { margin-top: 14px; font-size: 16px; line-height: 1.42; max-width: 24em; }
  .x-portail__carte { margin-top: 22px; padding: 18px 16px 16px; gap: 12px; border-radius: 18px; }
  .x-portail__champs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .x-champ__saisie { height: 50px; }
  .x-portail__entrer { height: 54px; }
}
/* Au téléphone, les trois garanties en trois colonnes égales, le
   pictogramme au-dessus du mot : une seule rangée, compacte. */
@media (max-width: 479px) {
  .x-portail__garanties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; margin-top: 0; }
  .x-portail__garanties li { flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 16px; text-align: center; white-space: normal; }
  .x-portail__garanties svg { width: 18px; height: 18px; }
}
/* Portable à écran bas (1 366 × 768, 1 280 × 720…) : tout le portail tient
   dans l'écran. */
@media (max-height: 820px) and (min-width: 900px) {
  :root { --x-fen-haut: 460px; }
  .x-portail__tete { height: 68px; }
  .x-portail__in { padding-top: 4px; }
  .x-portail__titre { font-size: clamp(34px, 0.8vw + 29px, 44px); margin-top: 16px; }
  .x-portail__texte { margin-top: 10px; }
  .x-portail__carte { margin-top: 18px; padding: 20px 22px 16px; gap: 12px; }
}

/* ══ LE PASSAGE — du site à la vitre ═════════════════════════════════════
   Le site (accueil, tarifs, aide) n'autorise le passage qu'à destination de
   l'Explorer (js/entete.impra.js, « pageswap »), et nomme sa fenêtre produit
   quand elle est à l'écran. Ici (js/explorer/portail-tete.js, « pagereveal »),
   html.x-vt-entree nomme la coque et le contenu du portail le temps du
   passage, puis s'efface : les transitions entre écrans de la démonstration
   gardent leurs règles (fin de feuille). html.x-vt-arrivee, posée en même
   temps, reste : les entrées que le passage remplace (la fenêtre qui monte,
   la feuille du tableau de bord) ne repartent pas quand il se termine.
     · la page quittée se traverse : elle grandit, se floute et s'efface ;
     · la fenêtre du hero devient la fenêtre du cockpit (même nom, x-cockpit) ;
       sans fenêtre à l'écran, celle du cockpit monte et se pose ;
     · le titre et la carte arrivent ensuite, comme sur l'accueil.
   0,56 s en tout. Mouvement réduit : pas de passage (le site ne l'autorise
   qu'en mouvement normal), la page s'ouvre simplement. */
@media (prefers-reduced-motion: no-preference) {
  html.x-vt-entree .coque-v3 { view-transition-name: x-cockpit; }
  html.x-vt-entree .x-portail__in { view-transition-name: x-portail; }
  html.x-vt-entree .x-portail__tete { view-transition-name: x-portail-tete; }
  html.x-vt-arrivee .coque-v3__feuille, html.x-vt-arrivee .coque-v3__nav { animation: none !important; }
  html.x-vt-entree::view-transition-old(root) { animation: x-vt-traverse 0.42s cubic-bezier(0.5, 0, 0.75, 0) both; }
  html.x-vt-entree::view-transition-new(root) { animation: x-vt-fondu 0.38s ease-out 0.04s both; }
  html.x-vt-entree::view-transition-group(x-cockpit) { animation-duration: 0.56s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  html.x-vt-entree::view-transition-image-pair(x-cockpit) { isolation: isolate; }
  html.x-vt-entree::view-transition-old(x-cockpit),
  html.x-vt-entree::view-transition-new(x-cockpit) { height: 100%; object-fit: cover; object-position: 50% 0; }
  /* Le fondu enchaîné des deux fenêtres, bref et linéaire (somme constante,
     plus-lighter) : il se fait pendant que la fenêtre file, sans moment où
     les deux images se lisent à parts égales. */
  html.x-vt-entree::view-transition-old(x-cockpit) { animation: x-vt-efface 0.2s linear both; }
  html.x-vt-entree::view-transition-new(x-cockpit) { animation: x-vt-fondu 0.2s linear both; }
  html.x-vt-entree::view-transition-new(x-cockpit):only-child { animation: x-vt-fenetre 0.56s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both; }
  html.x-vt-entree::view-transition-new(x-portail):only-child { animation: x-vt-contenu 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
  /* La tête n'arrive qu'une fois l'en-tête du site parti (0,23 s). */
  html.x-vt-entree::view-transition-new(x-portail-tete):only-child { animation: x-vt-fondu 0.3s ease 0.2s both; }
  @keyframes x-vt-traverse { 55% { opacity: 0; } to { opacity: 0; transform: scale(1.05); filter: blur(4px); } }
  @keyframes x-vt-fondu { from { opacity: 0; } }
  @keyframes x-vt-efface { to { opacity: 0; } }
  @keyframes x-vt-fenetre { from { opacity: 0; transform: translateY(48px) scale(0.96); } }
  @keyframes x-vt-contenu { from { opacity: 0; transform: translateY(18px); filter: blur(2px); } }
}
@media (prefers-reduced-motion: reduce) {
  html.x-vt-entree::view-transition-group(root) { animation-duration: 0.2s; }
}

/* ══ LA VISITE GUIDÉE ═════════════════════════════════════════════════════
   Le voile est un trou : une ombre immense autour de la cible, qui ne capte
   aucun clic. La cible reste nette, cerclée du bleu d'accent ; la bulle se
   pose à côté, et au téléphone en bas, au-dessus des barres. */
.x-tuto { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.x-tuto__voile {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--x-bleu-encre), 0 0 0 200vmax rgba(15, 23, 46, 0.34);
}
.x-tuto.is-sans-cible .x-tuto__voile { display: none; }
.x-tuto__bulle {
  position: fixed; left: 0; top: 0; box-sizing: border-box; width: 344px;
  padding: 16px 18px 14px; border-radius: 18px;
  background: #FFFFFF; color: var(--x-texte);
  box-shadow: 0 24px 56px -16px rgba(15, 23, 46, 0.42), 0 2px 8px rgba(15, 23, 46, 0.08);
  font-family: var(--x-police); pointer-events: auto;
}
.x-tuto__bulle:focus { outline: none; }
.x-tuto__bulle:focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 3px; }
.x-tuto__bulle::before { content: ""; position: absolute; display: none; width: 14px; height: 14px; background: #FFFFFF; transform: rotate(45deg); border-radius: 2px; }
.x-tuto__bulle[data-place="droite"]::before { display: block; left: -6px; top: calc(var(--x-fleche, 24px) - 7px); }
.x-tuto__bulle[data-place="gauche"]::before { display: block; right: -6px; top: calc(var(--x-fleche, 24px) - 7px); }
.x-tuto__bulle[data-place="dessous"]::before { display: block; top: -6px; left: calc(var(--x-fleche, 24px) - 7px); }
.x-tuto__bulle[data-place="dessus"]::before { display: block; bottom: -6px; left: calc(var(--x-fleche, 24px) - 7px); }
.x-tuto__tete { position: relative; display: flex; align-items: center; gap: 12px; }
.x-tuto__progres { margin: 0; font: 600 12.5px/16px var(--x-police); color: var(--x-texte-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-tuto__barre { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.x-tuto__barre i { height: 4px; border-radius: 4px; background: #E3E8F0; transition: background-color 0.3s var(--x-ease); }
.x-tuto__barre i.is-fait { background: var(--x-encre); }
.x-tuto__barre i.is-courant { background: var(--x-bleu); }
.x-tuto__fermer {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin: -10px -12px -10px 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--x-texte-2); cursor: pointer;
  transition: background-color 0.18s var(--x-ease), color 0.18s var(--x-ease);
}
.x-tuto__fermer:hover { background: var(--x-ardoise); color: var(--x-texte); }
.x-tuto__titre { margin: 12px 0 0; font: 600 17px/23px var(--x-police); letter-spacing: -0.012em; text-wrap: pretty; }
.x-tuto__texte { margin: 6px 0 0; font: 400 15px/21px var(--x-police); color: var(--x-texte-2); text-wrap: pretty; }
.x-tuto__consigne {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--x-bleu-pale); color: #124C9C;
  font: 600 14px/20px var(--x-police); text-wrap: pretty;
}
.x-tuto__consigne:empty { display: none; }
.x-tuto__bulle.is-consequence .x-tuto__texte { color: var(--x-texte); }
.x-tuto__bulle.is-consequence .x-tuto__consigne { background: var(--x-ardoise); color: var(--x-texte-2); font-weight: 500; }
.x-tuto__repli {
  display: inline-flex; align-items: center; height: 40px; margin: 12px 0 0; padding: 0 14px; border-radius: 10px;
  background: var(--x-encre); color: #FFFFFF; font: 600 14px/18px var(--x-police); text-decoration: none;
}
.x-tuto__repli:hover { background: var(--x-encre-2); }
.x-tuto__pied { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.x-tuto__precedent, .x-tuto__passer {
  height: 36px; padding: 0 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--x-texte-2); font: 600 14px/18px var(--x-police); cursor: pointer;
  transition: background-color 0.18s var(--x-ease), color 0.18s var(--x-ease);
}
.x-tuto__precedent { margin-left: -10px; }
.x-tuto__precedent:hover, .x-tuto__passer:hover { background: var(--x-ardoise); color: var(--x-texte); }
.x-tuto__passer { margin-left: auto; margin-right: -10px; }
.x-tuto__terminer {
  margin-left: auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--x-encre); color: #FFFFFF; font: 600 14.5px/18px var(--x-police); cursor: pointer;
  transition: background-color 0.18s var(--x-ease);
}
.x-tuto__terminer:hover { background: var(--x-encre-2); }
.x-tuto__bulle :focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 2px; }
/* Pendant la saisie dans la cible : la consigne seule. */
.x-tuto__bulle.is-compacte .x-tuto__titre,
.x-tuto__bulle.is-compacte .x-tuto__texte,
.x-tuto__bulle.is-compacte .x-tuto__repli,
.x-tuto__bulle.is-compacte .x-tuto__pied { display: none; }
.x-tuto__bulle.is-compacte .x-tuto__consigne { margin-top: 10px; }
/* L'onglet à ouvrir, souligné dans la barre des onglets éclairée. */
.x-tuto-accent { box-shadow: inset 0 -2px 0 var(--x-bleu); color: var(--x-bleu-texte) !important; }
@media (prefers-reduced-motion: no-preference) {
  .x-tuto.is-nouvelle .x-tuto__bulle { animation: x-bulle 0.38s var(--x-ease); }
  .x-tuto.is-nouvelle .x-tuto__voile { animation: x-anneau 0.6s var(--x-ease); }
  @keyframes x-bulle { from { opacity: 0; translate: 0 8px; } }
  @keyframes x-anneau { from { box-shadow: 0 0 0 10px rgba(77, 148, 245, 0), 0 0 0 200vmax rgba(15, 23, 46, 0); } }
}
@media (max-width: 767px) {
  .x-tuto__bulle { width: auto; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 12px; border-radius: 20px; }
  .x-tuto__titre { font-size: 16px; line-height: 22px; }
  .x-tuto__texte { font-size: 14.5px; line-height: 20px; }
  html.x-tuto-actif .coque-v3__contenu { padding-bottom: calc(var(--x-tuto-h, 220px) + 32px); }
}

/* L'exploration libre : la visite repliée en une ligne. */
.x-libre {
  position: fixed; right: 24px; bottom: 24px; z-index: 35;
  display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; border-radius: 16px;
  background: var(--x-encre); color: var(--x-sur-encre);
  box-shadow: 0 18px 40px -16px rgba(15, 23, 46, 0.5);
  font-family: var(--x-police);
}
.x-libre__ic { display: inline-grid; flex: none; color: #7FB2F8; }
.x-libre__texte { margin: 0; font: 500 14.5px/20px var(--x-police); text-wrap: pretty; }
.x-libre__revoir {
  flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 9px;
  background: rgba(244, 247, 250, 0.1); color: var(--x-sur-encre); font: 600 13.5px/18px var(--x-police); cursor: pointer;
}
.x-libre__revoir:hover { background: rgba(244, 247, 250, 0.16); }
.x-libre__fermer {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--x-sur-encre-doux); cursor: pointer;
}
.x-libre__fermer:hover { background: rgba(244, 247, 250, 0.1); color: #FFFFFF; }
.x-libre :focus-visible { outline: 2px solid var(--x-bleu-encre); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .x-libre:not([hidden]) { animation: x-entree 0.42s var(--x-ease); } }
@media (max-width: 767px) {
  .x-libre { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; gap: 8px; padding-left: 12px; }
  .x-libre__texte { font-size: 14px; line-height: 19px; }
  .x-libre__revoir { padding: 0 10px; }
}

/* ══ CE QUI EST RÉSERVÉ AU COMPTE ═════════════════════════════════════════
   Visible avant le clic, jamais barré : libellé plus discret et cadenas pour
   ce qui se fait dans un compte, « Aperçu » pour ce que la démonstration
   montre en partie. */
.x-verrou__marque { display: inline-flex; align-items: center; flex: none; margin-left: auto; color: #6B7385; }
.x-verrou__marque svg { display: block; }
.x-verrou__marque--apercu {
  padding: 1px 7px; border-radius: 999px;
  background: #EAF2FF; color: #155FC4;
  font: 600 11.5px/16px var(--x-police); letter-spacing: 0.005em;
}
.explorer .it-nav__item.x-verrou { position: relative; }
.explorer .it-nav__item.x-verrou--compte, .explorer .it-nav__item.x-verrou--compte > svg { color: #5E6A80; }
.explorer .it-nav__grouptoggle.x-verrou .x-verrou__marque { margin-left: 8px; }
.explorer .coque-v3__nav.is-collapsed .x-verrou__marque--apercu { display: none; }
.explorer .coque-v3__nav.is-collapsed .x-verrou__marque--compte {
  position: absolute; right: 12px; top: 6px;
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  background: var(--x-ardoise); box-shadow: 0 0 0 1px #DCE3F0;
}
.explorer .coque-v3__nav.is-collapsed .x-verrou__marque--compte svg { width: 10px; height: 10px; }
.explorer .it-sidebar__org.x-verrou .it-sidebar__orgchev { display: none; }
.explorer .it-sidebar__usagelink.x-verrou { display: inline-flex; align-items: center; gap: 6px; }
.explorer .it-sidebar__usagelink.x-verrou .x-verrou__marque { margin-left: 0; }
.explorer .it-sheetaction.x-verrou--compte .it-sheetaction__label { color: #5E6A80; }
.explorer .it-sheetaction.x-verrou { display: flex; align-items: center; }
.x-verrou__cadenas { display: inline-flex; align-items: center; margin-left: 6px; opacity: 0.72; }
.x-verrou__cadenas svg { display: block; }
.explorer .it-tabbar__icon { position: relative; }
.x-verrou__pastille {
  position: absolute; right: -7px; top: -5px;
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  background: #FFFFFF; color: #5E6A80; box-shadow: 0 0 0 1px #DCE3F0;
}
.it-tabbar__quick .x-verrou__pastille { right: -2px; top: -2px; }
.explorer .it-tabbar__quick { position: relative; }

.x-verrou-bulle {
  position: fixed; left: 0; top: 0; z-index: 75;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--x-encre); color: #F4F7FA;
  font: 500 12.5px/16px var(--x-police); white-space: nowrap;
  pointer-events: none; box-shadow: 0 8px 20px -8px rgba(15, 23, 46, 0.45);
}
.x-verrou-info {
  position: fixed; left: 0; top: 0; z-index: 60; box-sizing: border-box; width: 320px;
  padding: 16px 18px; border-radius: 16px;
  background: #FFFFFF; color: var(--x-texte);
  box-shadow: 0 22px 54px -16px rgba(15, 23, 46, 0.42), 0 2px 8px rgba(15, 23, 46, 0.08);
  font-family: var(--x-police);
}
.x-verrou-info:focus { outline: none; }
.x-verrou-info__etat { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 12.5px/16px var(--x-police); color: var(--x-texte-3); }
.x-verrou-info[data-etat="apercu"] .x-verrou-info__etat { color: var(--x-bleu-texte); }
.x-verrou-info__titre { margin: 8px 36px 0 0; font: 600 16px/22px var(--x-police); letter-spacing: -0.01em; }
.x-verrou-info__texte { margin: 6px 0 0; font: 400 14px/20px var(--x-police); color: var(--x-texte-2); text-wrap: pretty; }
.x-verrou-info__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.x-verrou-info__voir {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 9px;
  background: var(--x-encre); color: #FFFFFF; font: 600 13.5px/18px var(--x-police); text-decoration: none;
}
.x-verrou-info__voir:hover { background: var(--x-encre-2); }
.x-verrou-info__essai { font: 600 13.5px/18px var(--x-police); color: var(--x-bleu-texte); text-decoration: underline; text-underline-offset: 3px; }
.x-verrou-info__fermer {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--x-texte-2); cursor: pointer;
}
.x-verrou-info__fermer:hover { background: var(--x-ardoise); color: var(--x-texte); }
.x-verrou-info :focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .x-verrou-info:not([hidden]) { animation: x-info 0.22s var(--x-ease); }
  @keyframes x-info { from { opacity: 0; translate: 0 4px; } }
}
@media (max-width: 767px) { .x-verrou-info { width: auto; border-radius: 18px; } }
/* Dans la feuille « Plus », l'info se déplie sous la ligne. */
.x-plus-info { margin: -2px 4px 8px 58px; padding: 10px 12px; border-radius: 12px; background: var(--x-ardoise); font-family: var(--x-police); }
.x-plus-info__etat { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 12.5px/16px var(--x-police); color: var(--x-texte-3); }
.x-plus-info__texte { margin: 4px 0 0; font: 400 14px/20px var(--x-police); color: var(--x-texte-2); text-wrap: pretty; }
.x-plus-info__liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.x-plus-info__liens a { font: 600 14px/20px var(--x-police); color: var(--x-bleu-texte); text-underline-offset: 3px; }

/* ══ LES DIALOGUES ═════════════════════════════════════════════════════════ */
dialog.x-demo-dialog {
  padding: 0; margin: auto; border: 0; background: transparent;
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
  overflow: visible; color: inherit;
}
dialog.x-demo-dialog::backdrop { background: rgba(15, 23, 46, 0.46); }
dialog.x-demo-dialog > .it-root { width: min(520px, calc(100vw - 32px)); }
dialog.x-demo-dialog .it-dialog { max-width: none; }
/* Le voile n'est pas animé : une animation sur ::backdrop peut l'empêcher
   de se peindre (Chromium) — seul le dialogue entre et sort en mouvement. */
dialog.x-demo-dialog[open] { animation: x-entree 0.32s var(--x-ease); }
dialog.x-demo-dialog.is-sortie { animation: x-sortie 0.18s ease-in forwards; }
@keyframes x-entree { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes x-sortie { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes x-voile { from { opacity: 0; } to { opacity: 1; } }
html.x-demo-modal { overflow: hidden; }

/* Plus (téléphone) : la feuille des autres espaces. */
dialog.x-demo-plus { margin: auto 0 0; width: 100vw; max-width: 100vw; }
dialog.x-demo-plus > .it-root { width: 100%; }
dialog.x-demo-plus .it-sheet { border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom); }
dialog.x-demo-plus .x-demo-plus__liste { display: grid; gap: 4px; }
dialog.x-demo-plus .x-demo-plus__groupe { margin: 14px 4px 4px; font: 600 12.5px/16px var(--x-police); color: var(--x-texte-3); }
dialog.x-demo-plus .it-sheetaction { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
@media (max-width: 767px) {
  dialog.x-demo-plus[open] { animation: x-feuille 0.36s var(--x-ease); }
}
@keyframes x-feuille { from { transform: translateY(100%); } to { transform: none; } }

/* ══ L'INVITATION — le moment où l'on se projette ═════════════════════════
   Une surface navy, sans formulaire pour qui a déjà laissé ses coordonnées :
   ce que le visiteur vient de vivre (ses chiffres), l'offre dite entière,
   un geste plein (blanc sur navy) et une sortie toujours visible. */
dialog.x-demo-invitation { width: min(620px, calc(100vw - 32px)); }
dialog.x-demo-invitation::backdrop { background: rgba(8, 13, 28, 0.6); }
.x-demo-inv {
  position: relative;
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px;
  background: var(--x-encre); color: var(--x-sur-encre);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.55);
  font-family: var(--x-police);
}
.x-demo-inv ::selection { background: rgba(77, 148, 245, 0.36); color: #FFFFFF; }
.x-demo-inv__fermer {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: transparent; color: var(--x-sur-encre-doux); cursor: pointer;
  transition: background-color 0.18s var(--x-ease), color 0.18s var(--x-ease);
}
.x-demo-inv__fermer:hover { background: rgba(244, 247, 250, 0.08); color: #FFFFFF; }
.x-demo-inv__haut { padding: 36px 40px 0; }
.x-demo-inv__statut {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font: 700 12.5px/16px var(--x-police); letter-spacing: 0.08em; text-transform: uppercase; color: #8DBBFA;
}
.x-demo-inv__titre {
  margin: 0; max-width: 26ch;
  font: 600 clamp(28px, 3.4vw, 36px)/1.1 var(--x-police); letter-spacing: -0.03em;
  color: #FFFFFF; text-wrap: balance;
}
.x-demo-inv__titre:focus { outline: none; }
.x-demo-inv__texte { margin: 14px 0 0; max-width: 42ch; font: 400 17px/26px var(--x-police); color: var(--x-sur-encre-doux); text-wrap: pretty; }
/* Le rappel du geste : une ligne, ses chiffres, sans encadré. */
.x-demo-inv__vu { margin: 16px 0 0; max-width: 52ch; color: #D6E6FD; font: 500 14.5px/21px var(--x-police); text-wrap: pretty; }
.x-demo-inv__offre { padding: 28px 40px 28px; }
/* L'offre reste sous le titre dans la hiérarchie : le titre domine. */
.x-demo-inv__zero { margin: 0; font: 600 clamp(26px, 2.6vw, 32px)/1.05 var(--x-police); letter-spacing: -0.03em; color: #FFFFFF; }
.x-demo-inv__conditions { margin: 10px 0 22px; max-width: 46ch; font: 400 14.5px/21px var(--x-police); color: var(--x-sur-encre-doux); }
.x-demo-inv__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 20px; border-radius: 14px;
  background: #FFFFFF; color: var(--x-encre);
  font: 600 16.5px/20px var(--x-police); text-decoration: none;
  transition: background-color 0.18s var(--x-ease), transform 0.18s var(--x-ease);
}
.x-demo-inv__cta:hover { background: #EEF4FF; }
.x-demo-inv__cta svg { transition: transform 0.22s var(--x-ease); }
.x-demo-inv__cta:hover svg { transform: translateX(3px); }
.x-demo-inv__cta:active { transform: translateY(1px); }
.x-demo-inv__continuer {
  display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 12px;
  background: transparent; color: var(--x-sur-encre-doux);
  font: 600 15px/20px var(--x-police); cursor: pointer;
  transition: background-color 0.18s var(--x-ease), color 0.18s var(--x-ease);
}
.x-demo-inv__continuer:hover { background: rgba(244, 247, 250, 0.08); color: #FFFFFF; }
.x-demo-inv :focus-visible { outline: 2px solid var(--x-bleu-encre); outline-offset: 3px; }
/* Pour qui n'a rien laissé au portail : la carte blanche du contact. */
.x-demo-inv__contact { margin: 0 12px 12px; padding: 22px 24px 18px; border-radius: 20px; background: #FFFFFF; color: var(--x-texte); }
.x-demo-inv__contact-titre { margin: 0; font: 600 15px/20px var(--x-police); }
.x-demo-inv__contact-aide { margin: 4px 0 12px; font: 400 13.5px/19px var(--x-police); color: var(--x-texte-3); }
.x-demo-inv__ligne { display: flex; gap: 8px; }
.x-demo-inv__champ {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--x-trait); border-radius: 12px;
  background: #FFFFFF; color: var(--x-texte);
  font: 400 16px/22px var(--x-police);
  transition: border-color 0.18s var(--x-ease), box-shadow 0.18s var(--x-ease);
}
.x-demo-inv__champ::placeholder { color: #6B7385; }
.x-demo-inv__champ:focus { outline: none; border-color: var(--x-bleu); box-shadow: 0 0 0 3px rgba(31, 116, 231, 0.18); }
.x-demo-inv__champ[aria-invalid="true"] { border-color: var(--x-rouge); }
.x-demo-inv__envoyer {
  flex: none; height: 46px; padding: 0 16px; border: 1px solid var(--x-trait); border-radius: 12px;
  background: #FFFFFF; color: var(--x-encre);
  font: 600 14.5px/18px var(--x-police); cursor: pointer;
  transition: background-color 0.18s var(--x-ease), border-color 0.18s var(--x-ease);
}
.x-demo-inv__envoyer:hover { background: var(--x-ardoise); border-color: #C5CFE0; }
.x-demo-inv__envoyer:disabled { opacity: 0.6; cursor: progress; }
.x-demo-inv__contact :focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 2px; }
.x-demo-inv__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.x-demo-inv__accord { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font: 400 13.5px/19px var(--x-police); color: var(--x-texte-2); cursor: pointer; }
.x-demo-inv__accord input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--x-encre); }
.x-demo-inv__message { margin: 8px 0 0; min-height: 0; font: 500 13.5px/19px var(--x-police); text-wrap: pretty; }
.x-demo-inv__message:empty { display: none; }
.x-demo-inv__message[data-ton="succes"] { color: var(--x-vert); }
.x-demo-inv__message[data-ton="erreur"] { color: var(--x-rouge); }
.x-demo-inv__message[data-ton="info"] { color: var(--x-texte-3); }
.x-demo-inv__contact.is-envoye .x-demo-inv__ligne,
.x-demo-inv__contact.is-envoye .x-demo-inv__accord { display: none; }
.x-demo-inv__rgpd { margin: 10px 0 0; text-wrap: pretty; font: 400 12.5px/18px var(--x-police); color: var(--x-texte-3); }
.x-demo-inv__rgpd a { color: var(--x-bleu-texte); }
@media (max-width: 767px) {
  dialog.x-demo-invitation { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 94dvh; }
  dialog.x-demo-invitation[open] { animation: x-feuille 0.4s var(--x-ease); }
  .x-demo-inv { border-radius: 28px 28px 0 0; max-height: 94dvh; padding-bottom: env(safe-area-inset-bottom); }
  .x-demo-inv__haut { padding: 28px 22px 0; }
  .x-demo-inv__offre { padding: 22px 22px 16px; }
  .x-demo-inv__contact { margin: 0 8px 8px; padding: 20px 18px 16px; }
  .x-demo-inv__ligne { flex-direction: column; }
  .x-demo-inv__champ { flex: none; width: 100%; }
  .x-demo-inv__envoyer { width: 100%; }
}

/* ══ LES RETOURS DES GESTES ════════════════════════════════════════════════ */
.x-demo-toasts {
  /* En bas, au centre : jamais sur les actions du bandeau, ni sur le parcours. */
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  transform: translateX(-50%);
  pointer-events: none;
}
.x-demo-toasts .it-toast { pointer-events: auto; transition: opacity 0.24s ease, transform 0.24s ease; }
.x-demo-toasts .it-toast.is-sortie { opacity: 0; transform: translateY(6px); }
@media (max-width: 767px) {
  .x-demo-toasts { left: 8px; right: 8px; bottom: auto; top: calc(var(--x-ruban-h) + 64px); transform: none; }
  .x-demo-toasts .it-toast.is-sortie { transform: translateY(-6px); }
  .x-demo-toasts .it-toast { min-width: 0; max-width: none; width: 100%; }
}

/* ══ CE QUE LA DÉMONSTRATION AJOUTE AUX ÉCRANS ════════════════════════════ */
/* Le titre d'une priorité ouvre son sujet (vues/cockpit.mjs) : il garde
   l'allure du titre, le soulignement vient au survol. */
.x-dashboard-prio__lien { color: inherit; text-decoration: none; border-radius: 4px; }
.x-dashboard-prio__lien:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.x-dashboard-prio__lien:focus-visible { outline: 2px solid var(--x-bleu); outline-offset: 2px; }
.x-demo-simule {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  background: var(--x-bleu-doux); color: var(--x-bleu-texte);
  font: 500 11px/1 var(--x-mono); letter-spacing: 0.02em; vertical-align: middle;
}
.x-demo-astuce {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--x-bleu-pale); color: #124C9C;
  font: 500 13.5px/19px var(--x-police);
}
.x-demo-ajout .x-f3-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.x-demo-ajout__libelle { flex: 1 1 220px; min-width: 0; }
.x-demo-ajout__montant { flex: 0 1 130px; min-width: 110px; }
.x-demo-ajout__montant .it-input__el { font-variant-numeric: tabular-nums; }
.x-demo-ajout__erreur { margin: 6px 0 0; font: 500 13px/18px var(--x-police); color: var(--x-rouge); }
.x-demo-ajout__erreur:empty { display: none; }

.x-demo-fil { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; }
.x-demo-fil li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--border-subtle, #E9EDF5); }
.x-demo-fil li:last-child { box-shadow: none; }
.x-demo-fil__quand { font: 500 12.5px/20px var(--x-mono); color: var(--x-texte-3); }
.x-demo-fil__texte { display: grid; gap: 2px; min-width: 0; }
.x-demo-fil__texte b { font-weight: 500; font-size: 15px; line-height: 20px; }
.x-demo-fil__texte em { font-style: normal; font-size: 13.5px; line-height: 18px; color: var(--x-texte-3); }

.x-demo-lies { margin: 0; padding: 0; list-style: none; display: grid; }
.x-demo-lies a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 14px;
  padding: 10px 4px; border-radius: 12px; color: inherit; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--border-subtle, #E9EDF5);
}
.x-demo-lies li:last-child a { box-shadow: none; }
.x-demo-lies a:hover { background: var(--surface-hover, #FAFBFD); }
.x-demo-lies__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-sunken, #F0F3F8); color: var(--x-texte-2); }
.x-demo-lies__t { display: grid; gap: 2px; min-width: 0; }
.x-demo-lies__t b { font-weight: 500; font-size: 15px; line-height: 20px; }
.x-demo-lies__t em { font-style: normal; font-size: 13.5px; line-height: 18px; color: var(--x-texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-demo-lies a > svg { color: var(--x-texte-3); }

.x-demo-sansphoto {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: var(--surface-studio, #EEF0F3); color: #B3BCCB;
}
.x-demo-sansphoto .x-ix-thumb__epure svg { width: 58%; height: auto; }
.x-demo-sansphoto__legende { position: absolute; bottom: 56px; font: 500 13px/18px var(--x-police); color: #8A94A6; }

.x-demo-calme, .x-demo-vide { margin: 0; padding: 24px 4px; color: var(--x-texte-3); font: 400 15px/22px var(--x-police); }
.x-demo-vide { display: grid; justify-items: start; gap: 6px; padding: 32px 28px; }
.x-demo-vide p { margin: 0; }
.x-demo-vide b { color: var(--x-texte); font-weight: 600; }
.x-demo-vide button { margin-top: 8px; }
.x-demo-afaire { display: grid; gap: 16px; max-width: 880px; }
.x-demo-jauge-l { height: 10px; margin: 4px 0 12px; }

/* Un chiffre qui vient de bouger s'éclaire un instant. */
.x-demo-maj { position: relative; border-radius: 8px; animation: x-maj 1.6s ease-out; }
@keyframes x-maj { 0%, 30% { background-color: rgba(31, 116, 231, 0.12); } 100% { background-color: transparent; } }

/* Sans JavaScript */
.x-demo-sansjs { max-width: 560px; margin: 48px auto; padding: 0 20px; font: 400 16px/24px var(--x-police); }
.x-demo-sansjs h1 { font: 600 28px/34px var(--x-police); letter-spacing: -0.02em; }
.x-demo-sansjs a { color: var(--x-bleu-texte); }

/* Entrée dans l'application : la coque apparaît, puis le premier écran. */
@media (prefers-reduced-motion: no-preference) {
  html.x-demo-prete .coque-v3__feuille { animation: x-feuille-entre 0.6s var(--x-ease) both; }
  html.x-demo-prete .coque-v3__nav { animation: x-voile 0.5s ease-out both; }
  @keyframes x-feuille-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  ::view-transition-old(root) { animation: 0.18s ease-in both x-vt-sortie; }
  ::view-transition-new(root) { animation: 0.32s var(--x-ease) both x-vt-entree; }
  @keyframes x-vt-sortie { to { opacity: 0; } }
  @keyframes x-vt-entree { from { opacity: 0; transform: translateY(6px); } }
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.x-demo-dialog[open], dialog.x-demo-dialog.is-sortie, .x-demo-maj, .x-libre, .x-verrou-info, .x-tuto__bulle, .x-tuto__voile { animation: none !important; }
  /* La règle commune de la V3 (explorer-v3.css) ramène toute transition à
     0,01 ms : la bulle et le trou du voile, placés à chaque image, gardaient
     une image de retard (la bulle apparaissait un instant dans le coin). */
  .x-tuto__bulle, .x-tuto__voile { transition-property: none !important; }
}