:root,[data-theme="light"]{--fond:#F3F2EE;--surface:#FFFFFF;--surface-2:#E8E7E1;--texte:#111110;--texte-doux:#56564F;--trait:rgba(17,17,16,0.13);--trait-fort:rgba(17,17,16,0.34);--bouton:#111110;--sur-bouton:#F7F7F5;--encre:#111110;--papier:#F7F7F5;--blanc:#FFFFFF;--lumiere:#F2B176;--lumiere-claire:#FBD9B6;--focus:#111110;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:140px;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:36px;--radius-pill:999px;--ombre-boite:0 1px 2px rgba(17,17,16,0.06), 0 28px 60px -24px rgba(150,95,30,0.34);--ombre-cadre:0 40px 80px -40px rgba(80,50,10,0.35);--duree-courte:200ms;--duree-douce:700ms;--duree-page:16s;--duree-bande:150s;--duree-brume-cycle:12s;--duree-brume-tour:33s;--font-texte:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--font-titre:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fond:#161615;--surface:#242423;--surface-2:#2F2F2D;--texte:#FCFBF8;--texte-doux:#CDC9C2;--trait:rgba(252,251,248,0.15);--trait-fort:rgba(252,251,248,0.38);--bouton:#FCFBF8;--sur-bouton:#161615;--encre:#111110;--papier:#F7F7F5;--blanc:#FFFFFF;--lumiere:#F2B176;--lumiere-claire:#FBD9B6;--focus:#FCFBF8}}
[data-theme="dark"]{--fond:#161615;--surface:#242423;--surface-2:#2F2F2D;--texte:#FCFBF8;--texte-doux:#CDC9C2;--trait:rgba(252,251,248,0.15);--trait-fort:rgba(252,251,248,0.38);--bouton:#FCFBF8;--sur-bouton:#161615;--encre:#111110;--papier:#F7F7F5;--blanc:#FFFFFF;--lumiere:#F2B176;--lumiere-claire:#FBD9B6;--focus:#FCFBF8}

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.woff2) format('woff2')}
/* Composants du site. Aucune couleur en dur : tout vient de tokens.css (design-system/project/tokens.json).
   Classes en vt-*. Le site suit le réglage clair ou sombre de l'appareil ; data-theme="dark" ou "light" sur un élément force un thème. */

.vt, .vt *, .vt *::before, .vt *::after { box-sizing: border-box; }
.vt { font: 400 18px/1.55 var(--font-texte); color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.vt :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.vt img, .vt video, .vt svg, .vt iframe { display: block; max-width: 100%; }
.vt a:where(:not(.vt-bouton, .btn-primary, .skip)) { color: inherit; }
.vt :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[data-theme] { color: var(--texte); }
.vt [hidden] { display: none !important; }
:root { color-scheme: light dark; }
:root[data-theme="light"], [data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; }
/* Taille du carreau de grain : un point par pixel de l'écran, quel que soit le zoom de l'appareil. C'est ce qui le garde net. */
:root { --grain-t: 256px; }
@media (min-resolution: 1.2dppx) { :root { --grain-t: 204.8px; } }
@media (min-resolution: 1.45dppx) { :root { --grain-t: 170.667px; } }
@media (min-resolution: 1.7dppx) { :root { --grain-t: 146.286px; } }
@media (min-resolution: 1.95dppx) { :root { --grain-t: 128px; } }
@media (min-resolution: 2.9dppx) { :root { --grain-t: 85.333px; } }

/* Titres et chapeau */
.vt-titre { font-family: var(--font-titre); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.vt-titre-hero { font-size: clamp(38px, 5.3vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.vt-titre-1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; }
.vt-titre-2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; }
.vt-titre-3 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.vt-chapo { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--texte-doux); text-wrap: balance; }
:is(.vt-mention, .note) { font-size: 14px; color: var(--texte-doux); }
.fine { font-size: 14px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-5); }
.wrap-s { max-width: 860px; }

/* Bouton : pilule. Encre en clair, papier en sombre ; --clair sur la carte d'encre. .btn-primary : nom produit par les pages de commande partagées. */
:is(.vt-bouton, .btn-primary) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-pill); background: var(--bouton); color: var(--sur-bouton);
  font: 600 17px/1 var(--font-texte); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: opacity var(--duree-courte), transform var(--duree-courte); }
:is(.vt-bouton, .btn-primary):hover { opacity: .86; }
.vt-bouton svg { width: 16px; height: 16px; flex: none; }
.vt-bouton--grand { min-height: 56px; padding: 0 30px; font-size: 18px; }
.vt-bouton--compact { min-height: 44px; padding: 0 20px; font-size: 16px; }
.vt-bouton--contour { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.vt-bouton--clair { background: var(--blanc); color: var(--encre); }
:is(.vt-bouton, .btn-primary)[disabled], :is(.vt-bouton, .btn-primary)[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Champ, case à cocher, message. .field, .consent et .form-msg : noms produits par les pages de commande partagées. */
:is(.vt-champ, .field) { display: grid; gap: var(--space-2); margin: 0; }
:is(.vt-champ, .field) :is(label, legend) { font-size: 16px; font-weight: 600; }
:is(.vt-champ, .field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--texte); font: 400 18px/1.3 var(--font-texte); }
:is(.vt-champ, .field) textarea { min-height: 120px; resize: vertical; }
:is(.vt-champ, .field) :is(input, select, textarea):focus { outline: none; border-color: var(--texte); box-shadow: 0 0 0 3px var(--trait); }
fieldset.field { padding: 0; border: 0; }
:is(.vt-consent, .consent) { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 44px; font-size: 16px; line-height: 1.5; }
:is(.vt-consent, .consent) input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--texte); }
.consent label { padding: 2px 0; }
:is(.vt-message, .form-msg) { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; }
:is(.vt-message, .form-msg):empty { display: none; }
/* piège à robots : hors écran, hors tabulation (tabindex="-1"), caché des lecteurs d'écran (aria-hidden) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Boîte de conversation : le seul geste de la page. overflow: clip (et non hidden) pour que le récapitulatif collant se colle à l'écran, pas à la boîte. */
.vt-chat { max-width: 760px; margin: 0 auto; overflow: hidden; overflow: clip; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--radius-lg); box-shadow: var(--ombre-boite); text-align: left; }
.vt-chat-fil { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-2); }
.vt-tour { max-width: 92%; font-size: 18px; line-height: 1.45; }
.vt-tour--moi { align-self: flex-end; }
.vt-tour b { font-weight: 600; }
.vt-tour .note { margin-top: var(--space-1); }
.vt-reponse { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--texte); font: 600 17px/1.2 var(--font-texte); cursor: pointer; text-align: left; }
.vt-reponse small { font-size: 14px; font-weight: 400; color: var(--texte-doux); }
.vt-reponse img { height: 28px; width: auto; max-width: 96px; object-fit: contain; border-radius: 6px; }
.vt-chat-saisie { padding: var(--space-2) var(--space-3) var(--space-3); }
/* Le champ où écrire est le premier geste de la page : il doit se voir au premier regard, avec son bord, son fond et sa loupe. */
.vt-chat-ligne { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.vt-chat-ligne input[type="text"], .vt-chat-ligne input[type="search"] { flex: 1; min-width: 0; height: 60px; padding: 0 var(--space-5); border: 1.5px solid var(--trait-fort); border-radius: var(--radius-pill); background: var(--fond); color: var(--texte); font: 400 19px/1 var(--font-texte); letter-spacing: -.01em; transition: border-color var(--duree-courte), box-shadow var(--duree-courte); }
.vt-chat-ligne input[type="search"] { padding-left: 56px; }
.vt-chat-ligne:has(> input[type="search"])::before { content: ""; position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); background: var(--texte-doux); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.vt-chat-ligne input:hover { border-color: var(--texte-doux); }
.vt-chat-ligne input:focus { outline: none; border-color: var(--texte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lumiere) 45%, transparent); }
.vt-chat-ligne input::placeholder { color: var(--texte-doux); opacity: 1; }
.vt-chat-aide { padding: 0 var(--space-4) var(--space-2); }

/* Puces : réponses à un clic */
.vt-chat .vt-encadre { grid-template-columns: 1fr; padding: var(--space-5); }
.vt-chat .vt-encadre h3 { font-size: 22px; }
.vt-puces-groupe { margin: var(--space-2) 0 var(--space-3); }
.vt-puces-titre { padding: 0 var(--space-2) var(--space-2); font-size: 14px; color: var(--texte-doux); }
.vt-puces { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-puce { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--texte); font: 400 16px/1 var(--font-texte); cursor: pointer; transition: background var(--duree-courte), color var(--duree-courte); }
.vt-puce:hover, .vt-puce[aria-pressed="true"] { background: var(--bouton); color: var(--sur-bouton); }

/* Grille de modèles : cartes à grands coins, un nom et une ligne */
.vt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-7) var(--space-5); }
.vt-carte { display: block; margin: 0; }
.vt-carte-cadre { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-md); background: var(--surface-2); box-shadow: 0 0 0 1px var(--trait); cursor: pointer; text-align: left; }
.vt-carte-cadre iframe, .vt-carte-cadre img { position: absolute; left: 0; top: 0; border: 0; pointer-events: none; }
.vt-carte-cadre iframe { width: 1280px; max-width: none; height: 800px; transform-origin: 0 0; transform: scale(var(--k, .27)); background: var(--surface); }
.vt-carte-cadre img { width: 100%; height: auto; }
.vt-carte-cadre:hover, .vt-carte-cadre:focus-visible { box-shadow: 0 0 0 2px var(--texte); }
.vt-carte-leg { margin-top: var(--space-3); }
.vt-carte-leg h3 { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.vt-carte-leg p { font-size: 16px; color: var(--texte-doux); }
/* Sous la grille : un bouton pour quatre modèles de plus ; au-dessus, le filtre par style (des puces) une fois d'autres modèles demandés */
.vt-grille-pied { display: flex; justify-content: center; margin-top: var(--space-8); }
.vt-filtre { margin-bottom: var(--space-5); }
.vt-carte.est-choisie .vt-carte-cadre { box-shadow: 0 0 0 3px var(--texte); }
.vt-carte-leg .vt-carte-choix { margin-top: var(--space-1); font-weight: 600; color: var(--texte); }

/* Vue en grand d'un modèle : fenêtre modale, ordinateur ou téléphone */
.vt-grand { width: min(1240px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100vh - 32px)); max-height: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--fond); color: var(--texte); overflow: hidden; }
.vt-grand::backdrop { background: rgba(0, 0, 0, .62); }
.vt-grand[open] { display: flex; flex-direction: column; }
.vt-grand-tete { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--trait); }
.vt-grand-tete h2 { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vt-grand-corps { position: relative; flex: 1; overflow: auto; background: var(--surface-2); }
.vt-grand-scene { position: relative; margin: var(--space-4) auto; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 0 0 1px var(--trait); }
.vt-grand-scene iframe { position: absolute; left: 0; top: 0; max-width: none; border: 0; transform-origin: 0 0; }
.vt-grand-scene img { width: 100%; height: auto; }
.vt-grand-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--trait); }
.vt-bascule { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); }
.vt-bascule button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--texte); font: 400 16px/1 var(--font-texte); cursor: pointer; }
.vt-bascule button[aria-pressed="true"] { background: var(--bouton); color: var(--sur-bouton); font-weight: 600; }

/* Adresse internet : trois propositions, leur disponibilité, un autre nom, ou le sien */
.vt-domaines { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.vt-domaine { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.vt-domaine input { width: 22px; height: 22px; margin: 0 var(--space-3) 0 0; flex: none; accent-color: var(--texte); }
.vt-domaine-nom { flex: 1; font-size: 18px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vt-domaine-etat { font-size: 16px; color: var(--texte-doux); white-space: nowrap; }
.vt-domaine:has(input:checked) { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
.vt-domaine-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 56px; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 1px solid var(--texte); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--texte); background: var(--surface); }
.vt-domaine-resume .vt-domaine-nom { flex: 1 1 14ch; }
.vt-options-titre { margin-top: var(--space-4); }
.vt-domaine[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Option : un interrupteur, son texte, son prix */
.vt-options { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.vt-option { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.vt-option strong { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.vt-option span.t { grid-column: 1; font-size: 16px; color: var(--texte-doux); }
.vt-option .prix { grid-column: 1; font-size: 16px; font-weight: 600; }
.vt-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vt-interrupteur { grid-column: 2; grid-row: 1 / span 3; position: relative; width: 52px; height: 32px; border-radius: var(--radius-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--trait-fort); transition: background var(--duree-courte); }
.vt-interrupteur::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--texte-doux); transition: transform var(--duree-courte), background var(--duree-courte); }
.vt-option input:checked ~ .vt-interrupteur { background: var(--bouton); }
.vt-option input:checked ~ .vt-interrupteur::after { transform: translateX(20px); background: var(--sur-bouton); }
.vt-option input:focus-visible ~ .vt-interrupteur { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Récapitulatif : toujours visible, collé en bas de l'écran pendant le parcours */
.vt-recap { position: sticky; bottom: var(--space-4); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); padding: var(--space-3) var(--space-5); border: 1px solid var(--trait-fort); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--ombre-boite); }
.vt-recap-total { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.vt-recap-total span { font-weight: 400; color: var(--texte-doux); }
.vt-recap-detail { font-size: 16px; color: var(--texte-doux); }

/* Logo : le créateur de logo (fenêtre, aperçu, dispositions, icônes) est plus bas, avec la personnalisation */

/* Aperçu : carte de modèle, capture réelle qui défile dans son cadre au survol */
.vt-modele { display: block; color: inherit; text-decoration: none; }
.vt-modele-cadre { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); box-shadow: 0 0 0 1px var(--trait); }
.vt-modele-cadre picture { display: block; }
.vt-modele-cadre img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(0); transition: top 1.1s cubic-bezier(.3, .1, .2, 1), transform 1.1s cubic-bezier(.3, .1, .2, 1); }
.vt-modele:hover .vt-modele-cadre img, .vt-modele:focus-visible .vt-modele-cadre img, .vt-modele.actif .vt-modele-cadre img { top: 100%; transform: translateY(-100%); transition: top var(--duree-page) linear, transform var(--duree-page) linear; }
.vt-modele-leg { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: 14px; }
.vt-modele-leg h3 { font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.vt-modele-leg p { font-size: 16px; color: var(--texte-doux); }
.vt-modele-fictif { font-size: 14px; color: var(--texte-doux); white-space: nowrap; }

/* Bande de captures : défile seule, s'arrête au survol, au focus et au toucher */
.vt-bande { overflow: hidden; }
.vt-bande-piste { display: flex; gap: 20px; width: max-content; margin: 0; padding: 0; list-style: none; animation: vt-bande var(--duree-bande) linear infinite; }
.vt-bande-piste > li { flex: 0 0 min(520px, 78vw); }
.vt-bande:hover .vt-bande-piste, .vt-bande:focus-within .vt-bande-piste, .vt-bande.en-pause .vt-bande-piste { animation-play-state: paused; }
@keyframes vt-bande { to { transform: translateX(calc(-50% - 10px)); } }

/* Étape */
.vt-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) 28px; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.vt-etape { display: grid; grid-template-columns: 36px 1fr; align-content: start; gap: var(--space-1) var(--space-2); }
/* Scène d'étape : un morceau du vrai parcours, posé sur la matière. Jamais de photo ici. */
.vt-scene { position: relative; grid-column: 1 / -1; overflow: hidden; margin: 0 0 var(--space-4); aspect-ratio: 16 / 11; border-radius: var(--radius-lg); background: var(--grain, none) 0 0 / var(--grain-t) var(--grain-t), var(--nappe-claire, none) 0 100% / 900px 100% repeat-x, var(--nappe-vive, none) var(--scene-x, 0) 100% / 1100px 100% repeat-x, var(--surface); background-blend-mode: overlay, normal, normal, normal; }
.vt-scene--couleurs { --scene-x: -320px; } .vt-scene--adresse { --scene-x: -640px; } .vt-scene--en_ligne { --scene-x: -880px; }
.vt-scene-carte { position: absolute; top: 50%; left: 50%; width: min(74%, 400px); padding: 20px 22px; transform: translate(-50%, -50%); background: var(--fond); border-radius: var(--radius-md, 18px); box-shadow: 0 24px 60px rgba(17, 17, 16, .16); font-size: 16px; line-height: 1.25; }
.vt-scene-q { margin: 0 0 8px; color: var(--texte-doux); }
.vt-scene-r { width: fit-content; margin: 0 0 16px auto; padding: 8px 14px; background: var(--bouton); color: var(--sur-bouton); border-radius: var(--radius-pill); }
.vt-scene-champ { display: flex; align-items: center; margin: 0; padding: 11px 14px; border: 1.5px solid var(--texte); border-radius: var(--radius-pill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lumiere) 45%, transparent); color: var(--texte); }
.vt-scene-champ b { width: 1.5px; height: 1.1em; margin-left: 2px; background: var(--texte); }
.vt-scene-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--trait); color: var(--texte); font-weight: 600; }
.vt-scene-ligne em { padding: 4px 10px; background: color-mix(in srgb, var(--lumiere) 40%, transparent); border-radius: var(--radius-pill); font-size: 16px; font-style: normal; font-weight: 400; white-space: nowrap; }
.vt-scene-ligne--doux { color: var(--texte-doux); font-weight: 400; }
.vt-scene-ligne--option { padding-bottom: 0; border-bottom: 0; font-weight: 400; }
.vt-scene-ligne u { position: relative; flex: none; width: 38px; height: 22px; background: var(--bouton); border-radius: var(--radius-pill); }
.vt-scene-ligne u::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; background: var(--sur-bouton); border-radius: 50%; }
.vt-scene-site { position: absolute; top: 12%; left: 12%; right: 12%; bottom: 0; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--fond); box-shadow: 0 24px 60px rgba(17, 17, 16, .18); }
.vt-scene-site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vt-scene-pastilles { position: absolute; bottom: 8%; left: 50%; display: flex; gap: 10px; padding: 10px 14px; transform: translateX(-50%); background: var(--fond); border-radius: var(--radius-pill); box-shadow: 0 14px 40px rgba(17, 17, 16, .2); }
.vt-scene-pastilles i { display: block; width: 24px; height: 24px; border-radius: 50%; }
.vt-scene-pastilles i:first-child { outline: 2px solid var(--texte); outline-offset: 2px; }
.vt-scene-navigateur { position: absolute; top: 10%; left: 10%; right: 10%; bottom: 0; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--fond); box-shadow: 0 24px 60px rgba(17, 17, 16, .18); }
.vt-scene-adresse { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--trait); font-size: 16px; color: var(--texte-doux); }
.vt-scene-adresse span { display: block; width: fit-content; padding: 4px 12px; background: var(--surface-2); border-radius: var(--radius-pill); }
.vt-scene-site--plein { position: absolute; top: 45px; right: 0; bottom: 0; left: 0; border-radius: 0; box-shadow: none; }
.vt-scene-enligne { position: absolute; right: 7%; bottom: 8%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; background: var(--bouton); color: var(--sur-bouton); border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; box-shadow: 0 14px 40px rgba(17, 17, 16, .24); }
.vt-scene-enligne::before { content: ""; width: 8px; height: 8px; background: var(--lumiere); border-radius: 50%; }
.vt-etape-n { padding-top: 5px; font-size: 16px; color: var(--texte-doux); }
.vt-etape h3 { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.vt-etape p { grid-column: 2; max-width: 32em; font-size: 17px; color: var(--texte-doux); }

/* Promesses : ce que nous promettons, en texte seul. Un titre et une phrase, puis six engagements sous un filet, en trois colonnes sur ordinateur, deux sur tablette, une sur téléphone. */
.vt-promesses { padding-top: var(--space-8); }
.vt-promesses-tete { max-width: 40em; }
.vt-promesses-tete .vt-chapo { margin-top: var(--space-3); }
.vt-promesses-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-7); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.vt-promesses-liste li { padding-top: var(--space-4); border-top: 1px solid var(--trait-fort); }
.vt-promesses-liste h3 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.vt-promesses-liste p { margin-top: var(--space-2); max-width: 24em; font-size: 16px; color: var(--texte-doux); }

/* Frise : la promesse en cinq temps courts, en texte seul, juste sous la conversation. Un filet et un numéro discret au-dessus de chaque temps ; cinq colonnes sur ordinateur, trois sur tablette, une sur téléphone. */
.vt-frise { padding: var(--space-7) 0 0; }
.vt-frise-titre { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--texte-doux); }
.vt-frise-liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.vt-frise-liste li { padding-top: var(--space-3); border-top: 1px solid var(--trait-fort); }
.vt-frise-n { display: block; margin-bottom: var(--space-2); font-size: 16px; line-height: 1.2; color: var(--texte-doux); }
.vt-frise-liste h3 { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.vt-frise-liste p { margin-top: var(--space-1); font-size: 16px; color: var(--texte-doux); }

/* Bande de photo pleine largeur, et les cartes qui la chevauchent */
.vt-bande-photo { position: relative; margin-top: 120px; }
.vt-bande-photo > img { display: block; width: 100%; height: clamp(320px, 42vw, 620px); object-fit: cover; object-position: center 62%; }
.vt-bande-cartes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: -88px 0 0; padding: 0; list-style: none; }
.vt-bande-cartes li { padding: 28px 30px 30px; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--radius-lg); }
.vt-bande-cartes h3 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.vt-bande-cartes p { margin-top: var(--space-2); font-size: 16px; color: var(--texte-doux); }
@media (max-width: 1040px) {
  .vt-promesses-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); }
  .vt-frise-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
  .vt-bande-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: -56px; }
}
@media (max-width: 640px) {
  .vt-etapes { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
  .vt-scene-carte { width: 88%; padding: 14px; }
  .vt-scene-ligne em { padding: 3px 8px; }
  .vt-promesses { padding-top: var(--space-7); }
  .vt-promesses-liste { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
  .vt-frise { padding-top: var(--space-6); }
  .vt-frise-liste { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
  .vt-frise-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; column-gap: var(--space-2); }
  .vt-frise-n { margin: 0; }
  .vt-frise-liste h3 { grid-column: 2; }
  .vt-frise-liste p { grid-column: 2; margin-top: 2px; }
  .vt-bande-photo { margin-top: 80px; }
}

/* Offre : grande carte (la noire pour l'offre complète) et ligne pour les offres seules */
.vt-offre { position: relative; display: flex; flex-direction: column; padding: 36px 36px 32px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--radius-lg); }
.vt-offre h3 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.vt-offre-texte { margin-top: var(--space-1); font-size: 17px; color: var(--texte-doux); }
.vt-offre-prix { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 24px; }
.vt-offre-prix b { font-size: clamp(52px, 5.4vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.vt-offre-prix span { font-size: 17px; color: var(--texte-doux); }
.vt-offre-points { display: grid; align-content: start; gap: 11px; flex: 1; margin: 0 0 30px; padding: 0; list-style: none; font-size: 16px; }
.vt-offre-points li { position: relative; padding-left: 28px; line-height: 1.4; }
.vt-offre-points li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.vt-offre .vt-bouton { align-self: flex-start; }
.vt-offre--noire { overflow: hidden; background: var(--grain, none) 0 0 / var(--grain-t) var(--grain-t), var(--champ-noir, none) center bottom / 100% auto no-repeat, var(--encre); background-blend-mode: overlay, normal, normal; border-color: var(--encre); color: var(--papier); }
.vt-offre--noire > :not(.vt-orbe) { position: relative; }
.vt-offre--noire .vt-offre-texte, .vt-offre--noire .vt-offre-prix span { color: var(--papier); opacity: .72; }
.vt-offre--noire .vt-bouton { background: var(--blanc); color: var(--encre); }
.vt-offre--noire .vt-bouton--contour { background: transparent; color: var(--papier); box-shadow: inset 0 0 0 1px var(--papier); }
.vt-offre-actes { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.vt-offre-ligne { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 32px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--radius-lg); }
.vt-offre-ligne h3 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.vt-offre-ligne p { margin-top: 2px; font-size: 16px; color: var(--texte-doux); }
.vt-offre-ligne-prix { font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -.045em; text-align: right; white-space: nowrap; }
.vt-offre-ligne-prix span { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--texte-doux); }

/* Encadré « Avant de payer » : près des prix, jamais caché */
.vt-encadre { display: grid; grid-template-columns: 240px 1fr; gap: 20px 40px; padding: 34px 36px; border: 1px solid var(--trait-fort); border-radius: var(--radius-lg); background: transparent; }
.vt-encadre h3 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.vt-encadre ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.vt-encadre li { position: relative; padding-left: 22px; }
.vt-encadre li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--texte); }

/* Question fréquente */
.vt-question { border-bottom: 1px solid var(--trait); }
.vt-question:first-child { border-top: 1px solid var(--trait); }
.vt-question summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: 14px 0; font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; cursor: pointer; list-style: none; }
.vt-question summary::-webkit-details-marker { display: none; }
.vt-question summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--duree-courte); }
.vt-question[open] summary::after { transform: rotate(-135deg); }
.vt-question-reponse { padding: 0 0 24px; max-width: 42em; color: var(--texte-doux); font-size: 17px; }

/* Navigation fixe */
.vt-nav { position: sticky; top: 0; z-index: 40; background: var(--fond); transition: box-shadow var(--duree-courte); }
.vt-nav.ligne { box-shadow: 0 1px 0 var(--trait); }
.vt-nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 72px; }
.vt-nav .brand { display: flex; align-items: center; min-height: 44px; color: var(--texte); text-decoration: none; }
.vt-nav .logo-svg { display: block; height: 28px; width: auto; }
.vt-nav .links ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vt-nav .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--texte-doux); font-size: 16px; text-decoration: none; transition: color var(--duree-courte); }
.vt-nav .links a:hover, .vt-nav .links a[aria-current="page"] { color: var(--texte); }
.vt-nav .nav-cta { margin-left: auto; }
.vt-nav .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--texte); cursor: pointer; }
.lg-s, .lg-t { fill: currentColor; }
.nav .li-cta { display: none; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 200; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--bouton); color: var(--sur-bouton); }
.skip:focus { top: 8px; }

/* Pied de page */
.vt-pied { padding: 72px 0 48px; border-top: 1px solid var(--trait); background: var(--fond); color: var(--texte); }
.vt-pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); }
.vt-pied h2 { margin: 0 0 var(--space-3); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.vt-pied ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.vt-pied li a, .vt-pied li > span { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; text-decoration: none; color: var(--texte-doux); }
.vt-pied li a:hover { color: var(--texte); }
.vt-pied-texte { margin-top: var(--space-4); max-width: 30ch; font-size: 16px; color: var(--texte-doux); }
.vt-pied-fin { margin-top: var(--space-7); font-size: 14px; color: var(--texte-doux); }
.vt-pied li button.vt-pied-lien { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; text-align: left; color: var(--texte-doux); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait-fort); }
.vt-pied li button.vt-pied-lien:hover { color: var(--texte); }

/* Cookies : le bandeau de consentement. Il n'existe que si une mesure d'audience est réglée, et n'agit jamais avant le choix du visiteur ; « Tout refuser » et « Tout accepter » ont la même taille et le même poids.
   Dialogue non bloquant : la page reste utilisable derrière, le focus ne bouge que sur un geste du visiteur. Surface pleine : jamais d'opacité de groupe, de filtre, de masque ni de mode de fusion.
   Sur ordinateur et tablette, une carte fixe en bas à gauche ; la page garde, tant qu'elle est ouverte, une marge égale à sa hauteur (--mesure-h) : le bas du contenu reste atteignable.
   Sur téléphone (640 px et moins), un bloc en tête de page, dans le flux : il ne recouvre jamais la zone de saisie de la conversation, il la repousse. */
.vt-mesure { position: relative; box-sizing: border-box; margin: var(--space-2); padding: var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-lg); background: var(--surface); color: var(--texte);
  font-size: 16px; line-height: 1.5; }
.vt-mesure[hidden] { display: none; }
.vt-mesure-titre { margin: 0 calc(44px + var(--space-2)) var(--space-1) 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.vt-mesure-titre:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.vt-mesure-texte, .vt-mesure-etat { margin: 0 0 var(--space-3); font-size: 16px; color: var(--texte-doux); }
.vt-mesure-texte a { color: var(--texte); text-underline-offset: 3px; }
.vt-mesure-etat { color: var(--texte); font-weight: 600; }
.vt-mesure-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.vt-mesure-actions .vt-bouton { padding: 0 var(--space-3); white-space: nowrap; }
.vt-mesure-actions .vt-bouton:nth-child(3) { grid-column: 1 / -1; }
.vt-mesure-actions--empile { grid-template-columns: minmax(0, 1fr); }   /* réglages sur téléphone : « Enregistrer mon choix » ne tient pas en demi-largeur */
.vt-mesure-fermer { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--texte); cursor: pointer; }
.vt-mesure-fermer:hover { background: var(--surface-2); }
.vt-mesure :is(button, a, input):focus-visible, .vt-mesure .vt-option:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.vt-mesure .vt-options { margin: 0 0 var(--space-3); }
.vt-mesure .vt-option { margin: 0; }
@media (min-width: 641px) {
  .vt-mesure { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 60; width: min(680px, calc(100% - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-4)); margin: 0; overflow-y: auto; padding: var(--space-5); box-shadow: var(--ombre-boite); }
  .vt-mesure-titre { font-size: 18px; margin-bottom: var(--space-2); }
  .vt-mesure-actions { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .vt-mesure-actions .vt-bouton:nth-child(3) { grid-column: auto; }
  .vt-mesure-texte, .vt-mesure-etat { margin-bottom: var(--space-4); }
  .vt-mesure .vt-options { margin-bottom: var(--space-4); }
  .vt-mesure-ouverte body { padding-bottom: var(--mesure-h, 0px); }
}

/* Premier écran : titre, boîte de conversation, halo de lumière réelle. overflow: clip (et non hidden) : le récapitulatif collant de la boîte se colle à l'écran. */
.vt-hero { position: relative; overflow: hidden; overflow: clip; padding: 56px 0 96px; text-align: center; }
/* La matière : un fond fixe, trois nappes qui glissent, un grain fixe. Rien n'est recalculé : ni script, ni mode de fusion, ni masque sur ce qui bouge.
   La carte graphique déplace des images déjà prêtes : c'est fluide même sur un petit poste chargé. Le vent : une direction générale, des rafales, une nappe qui remonte à contre-courant. */
.vt-halo { position: absolute; left: 0; right: 0; bottom: 0; height: 780px; overflow: hidden; pointer-events: none; }
.vt-halo::before { content: ""; position: absolute; inset: 0; background: var(--halo, none) center bottom / 100% 100% no-repeat; opacity: var(--halo-alpha, 1); }
.vt-halo::after { content: ""; position: absolute; inset: 0; background: var(--grain-voile, none) 0 0 / var(--grain-t) var(--grain-t); image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 40%, black 66%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, black 40%, black 66%, transparent 100%); }
.vt-nappe { position: absolute; top: 0; bottom: 0; left: 0; display: block; width: calc(100% + 1400px); background: 0 0 / 1400px 100% repeat-x; will-change: transform; }
.vt-nappe--ombre { background-image: var(--nappe-ombre, none); opacity: var(--nappe-ombre-o, .5); animation: vt-vent-contre 340s cubic-bezier(.35, .2, .65, .8) infinite; }
.vt-nappe--vive { background-image: var(--nappe-vive, none); opacity: var(--nappe-vive-o, .7); animation: vt-vent-lent 430s cubic-bezier(.35, .2, .65, .8) infinite; }
.vt-nappe--claire { background-image: var(--nappe-claire, none); opacity: var(--nappe-claire-o, .9); animation: vt-vent 260s cubic-bezier(.35, .2, .65, .8) infinite; }
@keyframes vt-vent {
  0% { transform: translate3d(0, 0, 0); }
  17% { transform: translate3d(-150px, 12px, 0); }
  39% { transform: translate3d(-520px, -10px, 0); }
  58% { transform: translate3d(-700px, 16px, 0); }
  81% { transform: translate3d(-1150px, -8px, 0); }
  100% { transform: translate3d(-1400px, 0, 0); }
}
@keyframes vt-vent-lent {
  0% { transform: translate3d(0, 0, 0); }
  23% { transform: translate3d(-410px, -14px, 0); }
  46% { transform: translate3d(-560px, 9px, 0); }
  71% { transform: translate3d(-1010px, 15px, 0); }
  100% { transform: translate3d(-1400px, 0, 0); }
}
@keyframes vt-vent-contre {
  0% { transform: translate3d(-1400px, 0, 0); }
  28% { transform: translate3d(-1090px, 18px, 0); }
  52% { transform: translate3d(-940px, -12px, 0); }
  77% { transform: translate3d(-350px, 7px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Sphère : un marbre qui tourne lentement sur lui-même, à coups de vent, sous un grain et une ombre qui ne bougent pas. --orbe : l'image ; --t : le diamètre */
.vt-orbe { position: relative; display: block; flex: none; width: var(--t, 56px); height: var(--t, 56px); overflow: hidden; border-radius: 50%; background: var(--orbe, none) center / cover; }
.vt-orbe::before { content: ""; position: absolute; inset: -24%; background: var(--orbe, none) center / cover; opacity: .72; animation: vt-orbe-vent 74s ease-in-out infinite; will-change: transform; }
.vt-orbe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grain-voile, none) 0 0 / var(--grain-t) var(--grain-t), radial-gradient(circle closest-side, transparent 58%, color-mix(in srgb, var(--encre) 30%, transparent) 100%); image-rendering: pixelated; }
.vt-offre:nth-child(2n) > .vt-orbe::before, .vt-option:nth-child(2n) > .vt-orbe::before, li:nth-child(2n) > .vt-orbe::before { animation-delay: -31s; animation-direction: reverse; }
@keyframes vt-orbe-vent {
  0% { transform: rotate(0) translate(0, 0) scale(1); }
  19% { transform: rotate(64deg) translate(4%, -3%) scale(1.06); }
  37% { transform: rotate(118deg) translate(-3%, 4%) scale(1.01); }
  58% { transform: rotate(214deg) translate(-5%, -2%) scale(1.07); }
  79% { transform: rotate(287deg) translate(3%, 3%) scale(1.02); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1); }
}
.vt-offre > .vt-orbe { position: absolute; top: 28px; right: 28px; --t: 76px; }
.vt-option:has(> .vt-orbe) { position: relative; padding-left: 76px; }
.vt-option > .vt-orbe { position: absolute; left: var(--space-4); top: 50%; --t: 44px; transform: translateY(-50%); }
/* dans la conversation, la sphère se pose sur la dernière question : elle montre où on en est */
.vt-chat-fil > .vt-tour:not(.vt-tour--moi) { position: relative; padding-left: 34px; }
.vt-chat-fil > .vt-tour:not(.vt-tour--moi):not(:has(~ .vt-tour:not(.vt-tour--moi)))::before { content: ""; position: absolute; left: 0; top: .14em; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 58%, color-mix(in srgb, var(--encre) 22%, transparent) 100%), var(--orbe-abricot, none) center / cover; animation: vt-orbe-vent 74s ease-in-out infinite; }

/* Création : la forme ronde de brume qui tourne doucement et change de couleur pendant que le site se prépare, et dessous les phrases de ce qui se passe vraiment.
   Même règle de mouvement que la matière : ce qui bouge ne bouge que par transform (des disques de brume transparents qui tournent) ; la couleur change par des images
   fixes, déjà teintées, dont seule l'opacité change, jamais celle d'un parent qui bouge ; le grain et le bord adouci sont fixes, par-dessus (le bord adouci recouvre le grain : aucune poussière hors de la forme). Ni mix-blend-mode, ni mask-image, ni filter.
   --t : le diamètre. --voile : la couleur du fond de la zone, que le bord adouci rejoint. */
.vt-creation { --voile: var(--surface-2); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-7) var(--space-5); background: var(--voile); text-align: center; }
.vt-brume { position: relative; flex: none; width: var(--t, 288px); height: var(--t, 288px); border-radius: 50%; background: var(--orbe-abricot, none) center / cover; }
.vt-brume > i { position: absolute; inset: 0; display: block; border-radius: 50%; }
.vt-brume-fond { opacity: 0; will-change: opacity; }
.vt-brume-fond--lilas { background: var(--orbe-lilas, none) center / cover; animation: vt-fond-lilas var(--duree-brume-cycle, 12s) ease-in-out infinite; }
.vt-brume-fond--sauge { background: var(--orbe-sauge, none) center / cover; animation: vt-fond-sauge var(--duree-brume-cycle, 12s) ease-in-out infinite; }
.vt-brume-fond--cuivre { background: var(--orbe-cuivre, none) center / cover; animation: vt-fond-cuivre var(--duree-brume-cycle, 12s) ease-in-out infinite; }
.vt-brume-tour { will-change: transform; animation: vt-tour var(--tour, 24s) linear infinite; }
.vt-brume-tour--claire { --tour: calc(var(--duree-brume-tour, 33s) * .64); background: var(--nappe-claire, none) 22% 50% / auto 150%; }
.vt-brume-tour--vive { --tour: var(--duree-brume-tour, 33s); background: var(--nappe-vive, none) 30% 60% / auto 135%; opacity: .55; animation-direction: reverse; }
.vt-brume-tour--ombre { --tour: calc(var(--duree-brume-tour, 33s) * 1.48); background: var(--nappe-ombre, none) 16% 40% / auto 160%; opacity: .45; }
.vt-brume::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; image-rendering: pixelated;
  background: radial-gradient(circle closest-side, transparent 38%, color-mix(in srgb, var(--voile) 30%, transparent) 66%, color-mix(in srgb, var(--voile) 82%, transparent) 88%, var(--voile) 100%), var(--grain-voile, none) 0 0 / var(--grain-t) var(--grain-t); }
/* la couleur : trois images fixes se succèdent sur la première, chacune fondue sur la précédente quand celle-ci est pleine (jamais un fond qui transparaît) ; la dernière se fond sur la première, qui revient */
@keyframes vt-fond-lilas { 0%, 4% { opacity: 0; } 25%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
@keyframes vt-fond-sauge { 0%, 29% { opacity: 0; } 50%, 75% { opacity: 1; } 75.1%, 100% { opacity: 0; } }
@keyframes vt-fond-cuivre { 0%, 54% { opacity: 0; } 75%, 79% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vt-tour { to { transform: rotate(360deg); } }
/* les phrases : une fenêtre de trois lignes, la nouvelle entre par le bas et fait remonter les autres (un seul mouvement : transform). Le haut s'estompe par un dégradé fixe posé par-dessus. */
.vt-phrases { position: relative; width: min(100%, 32em); height: 108px; overflow: hidden; font-size: 19px; line-height: 36px; letter-spacing: -.01em; }
.vt-phrases::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 56px; pointer-events: none; background: linear-gradient(var(--voile), color-mix(in srgb, var(--voile) 0%, transparent)); }
.vt-phrases ul { margin: 0; padding: 0; list-style: none; transition: transform 480ms cubic-bezier(.3, .1, .2, 1); }
.vt-phrases li { color: var(--texte-doux); }
.vt-phrases li:last-child { color: var(--texte); font-weight: 600; }
.vt-phrases li:not(:last-child)::before, .vt-phrases li.fait::before { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0 10px 4px 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Son site, en grand : une barre (le style montré, « Voir un autre style », « Continuer »), le cadre où la création puis la page du site apparaissent, ses couleurs en un clic dessous,
   et tout en bas, au second plan, « Voir tous les styles ». La page du site est celle du modèle, réduite (1280 px de large) ; sur téléphone, à sa vraie taille. */
.vt-site-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.vt-site-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
.vt-site-style { font-size: 16px; color: var(--texte-doux); }
.vt-site-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-monsite { position: relative; height: clamp(440px, 74vh, 740px); border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: 0 0 0 1px var(--trait), var(--ombre-cadre); }
.vt-monsite-cadre { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; text-align: left; }
.vt-monsite-cadre iframe { position: absolute; left: 0; top: 0; max-width: none; border: 0; transform-origin: 0 0; pointer-events: none; }
.vt-monsite-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vt-monsite .vt-creation { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.vt-creation.part { opacity: 0; transition: opacity 480ms ease; }
.vt-creation.termine .vt-brume > i, .vt-creation.termine .vt-phrases ul { animation-play-state: paused; }
.vt-site-perso { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.vt-site-perso .vt-palettes { margin: 0; }
.vt-site-perso .vt-bouton { height: auto; padding-block: 12px; line-height: 1.25; text-align: center; }
.vt-site-styles #styles { scroll-margin-top: 88px; }
.vt-site-styles { display: grid; gap: var(--space-5); justify-items: start; margin-top: var(--space-6); }
.vt-site-styles > #styles { justify-self: stretch; }
@media (max-width: 640px) {
  .vt-creation { padding: var(--space-6) var(--space-4); gap: var(--space-5); }
  .vt-brume { --t: 232px; }
  .vt-phrases { font-size: 17px; line-height: 32px; height: 96px; }
  .vt-site-actions { display: grid; grid-template-columns: 1fr auto; flex: 1 1 100%; }
  .vt-site-actions .vt-bouton { height: auto; padding: 10px 14px; line-height: 1.2; text-align: center; }
}

/* Carte d'encre : appel final */
.vt-final { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--grain, none) 0 0 / var(--grain-t) var(--grain-t), var(--champ-noir, none) center bottom / cover no-repeat, var(--encre); background-blend-mode: overlay, normal, normal; color: var(--papier); }
.vt-final > * { position: relative; }
.vt-final::before, .vt-offre--noire::before { content: ""; position: absolute; left: 0; bottom: 0; height: 46%; width: calc(100% + 1400px); background: var(--nappe-vive, none) 0 0 / 1400px 100% repeat-x; opacity: .5; pointer-events: none; will-change: transform; animation: vt-vent-lent 430s cubic-bezier(.35, .2, .65, .8) infinite; }
.vt-final .vt-chapo { color: var(--lumiere-claire); }

/* Personnaliser : couleurs en un clic, barre d'édition au-dessus du site, choix de photos */
.vt-palettes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.vt-perso-barre .vt-palettes { margin: 0; gap: 6px; }
.vt-perso-barre .vt-palette { padding: 0 12px 0 6px; gap: 8px; }
.vt-palette { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--texte); font: 400 16px/1 var(--font-texte); cursor: pointer; transition: background var(--duree-courte); }
.vt-palette:hover { background: var(--trait); }
.vt-palette[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--texte); font-weight: 600; }
.vt-palette-pastilles { position: relative; display: block; flex: none; width: 36px; height: 28px; }
.vt-palette-pastilles i { position: absolute; top: 3px; display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); }
.vt-palette-pastilles i:first-child { left: 0; background: var(--c1); }
.vt-palette-pastilles i:last-child { left: 12px; background: var(--c2); }
.vt-palette[aria-pressed="true"] .vt-palette-pastilles i { box-shadow: 0 0 0 2px var(--surface); }
.vt-palette--libre input { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vt-palette--libre input::-webkit-color-swatch-wrapper { padding: 0; }
.vt-palette--libre input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.vt-palette--libre input::-moz-color-swatch { border: 0; border-radius: 50%; }
.vt-perso-barre { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--trait); background: var(--surface); }
.vt-perso-aide { font-size: 16px; color: var(--texte-doux); }
.vt-perso-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-perso-barre .vt-perso-actions .vt-bouton:last-child { margin-left: auto; }
.vt-logo-panneau { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--trait); border-radius: var(--radius-sm); background: var(--surface); }
.vt-logo-etat { margin-top: var(--space-2); }
/* Le créateur de logo : une fenêtre. Sur grand écran l'aperçu est à gauche (le logo sur fond clair, sur fond sombre où il passe en blanc, dans l'onglet du navigateur) et les réglages à droite
   (disposition, icône, couleurs, police). Sur téléphone l'aperçu reste en haut, compact, et les réglages défilent dessous. Le fond clair est toujours blanc et le fond sombre toujours
   l'encre, dans les deux thèmes : un logo se juge sur du blanc. Aucune couleur de logo dans le CSS : les pastilles prennent la leur de --c, posée par le script. */
.vt-logo { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--fond); color: var(--texte); overflow: hidden; }
.vt-logo::backdrop { background: color-mix(in srgb, var(--encre) 62%, transparent); }
.vt-logo[open] { display: flex; flex-direction: column; height: min(760px, calc(100vh - 32px)); height: min(760px, calc(100dvh - 32px)); }
.vt-logo-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--trait); }
.vt-logo-tete h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vt-logo-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.vt-logo-scene { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border-right: 1px solid var(--trait); background: var(--surface); overflow: auto; }
.vt-logo-tuile { display: grid; justify-items: start; gap: var(--space-2); min-width: 0; margin: 0; padding: var(--space-4); overflow: hidden; border: 1px solid var(--trait-fort); border-radius: var(--radius-md); }
.vt-logo-tuile--clair { background: var(--blanc); color: var(--encre); }
.vt-logo-tuile--sombre { background: var(--encre); color: var(--blanc); }
.vt-logo-tuile img { display: block; width: auto; height: auto; max-width: 100%; min-height: 24px; }
.vt-logo-tuile--sombre img { filter: brightness(0) invert(1); }
.vt-logo-tuile figcaption { font-size: 16px; opacity: .8; }
.vt-logo-onglet { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--blanc); color: var(--encre); font-size: 16px; line-height: 1.3; }
.vt-logo-onglet img { flex: none; width: 20px; height: 20px; }
.vt-logo-reglages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; padding: var(--space-4); overflow: auto; }
.vt-logo-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.vt-logo-section > .vt-perso-sous-titre { margin: 0; }
.vt-logo-dispositions { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: var(--space-2); }
.vt-logo-dispo { display: grid; align-content: center; justify-items: start; gap: var(--space-2); min-height: 92px; padding: var(--space-3) var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm); background: var(--blanc); color: var(--encre); font: 400 16px/1.2 var(--font-texte); text-align: left; cursor: pointer; }
.vt-logo-dispo img { display: block; width: auto; max-width: 100%; height: 36px; object-fit: contain; object-position: left center; }
.vt-logo-dispo:hover { background: var(--blanc); box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--texte); }
.vt-logo-dispo[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--texte); }
.vt-logo-recherche { display: grid; gap: var(--space-1); }
.vt-logo-recherche label { font-size: 16px; font-weight: 600; }
.vt-logo-recherche input { width: 100%; min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm); background: var(--blanc); color: var(--encre); font: 400 16px/1 var(--font-texte); }
.vt-logo-categories { margin: var(--space-3) 0; }
.vt-logo-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.vt-logo-icone { display: grid; place-items: center; width: 100%; min-height: 56px; padding: 0; border: 1px solid var(--trait); border-radius: var(--radius-sm); background: var(--blanc); color: var(--encre); cursor: pointer; }
.vt-logo-icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vt-logo-icone:hover { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--texte); }
.vt-logo-icone[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--texte); }
.vt-logo-pied { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--trait); background: var(--fond); }
.vt-logo #logo-polices { max-height: 320px; overflow: auto; }
.vt-logo .vt-teintes { grid-template-columns: repeat(auto-fill, 44px); gap: 10px; }
.vt-logo .vt-nuancier { padding: var(--space-3); }
.vt-contact { display: grid; gap: var(--space-3); padding: var(--space-2) var(--space-3) 0; }
.vt-coord-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.vt-coord-champs { display: grid; gap: var(--space-4); }
.vt-perso-statut { min-height: 24px; font-size: 16px; }
.vt-lien { padding: 0 6px; min-height: 44px; border: 0; background: none; color: var(--texte); font: 600 16px/1 var(--font-texte); text-decoration: underline; cursor: pointer; }
.vt-grand.en-perso .vt-grand-pied { display: none; }
.vt-photos { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--fond); color: var(--texte); overflow: hidden; }
.vt-photos::backdrop { background: color-mix(in srgb, var(--encre) 62%, transparent); }
.vt-photos[open] { display: flex; flex-direction: column; }
.vt-photos-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--trait); }
.vt-photos-tete h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vt-photos-corps { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); }
.vt-photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.vt-photo-choix { position: relative; display: block; min-height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.vt-photo-choix img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vt-photo-choix:hover, .vt-photo-choix[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--texte); }
.vt-photos-pied { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--trait); }
.vt-rdv { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-4); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm); background: var(--surface); }
.vt-rdv legend { padding: 0 var(--space-2); font-size: 18px; font-weight: 600; }
.vt-naissance { display: grid; gap: var(--space-3); }
.siret-retour:not(:empty) { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font-size: 16px; }
@media (max-width: 640px) {
  .vt-grand.en-perso .vt-grand-tete { order: 1; }
  .vt-grand.en-perso .vt-grand-corps { order: 2; }
  .vt-grand.en-perso .vt-perso-barre { order: 3; border-top: 1px solid var(--trait); border-bottom: 0; padding: var(--space-3); }
  .vt-grand.en-perso .vt-perso-actions .vt-bouton { flex: 1 1 40%; }
  .vt-grand.en-perso .vt-perso-actions .vt-bouton:last-child { flex-basis: 50%; margin-left: 0; }
  .vt-grand.en-perso .vt-perso-aide { display: none; }
  .vt-grand.en-perso .vt-bascule { display: none; }
  .vt-grand.en-perso .vt-grand-tete { flex-wrap: nowrap; }
  .vt-grand.en-perso .vt-perso-barre { gap: var(--space-2); }
  .vt-grand.en-perso .vt-perso-barre .vt-palettes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .vt-grand.en-perso .vt-perso-barre .vt-palette { flex: none; scroll-snap-align: start; }
  .vt-photos { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .vt-logo, .vt-logo[open] { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .vt-logo-corps { display: flex; flex-direction: column; overflow: hidden; }
  .vt-logo-scene { grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--trait); overflow: visible; }
  .vt-logo-tuile { padding: var(--space-3); min-height: 84px; align-content: center; }
  .vt-logo-tuile figcaption, #logo-aide { display: none; }
  .vt-logo-onglet { grid-column: 1 / -1; padding: var(--space-2) var(--space-3); }
  .vt-logo-reglages { flex: 1; min-height: 0; padding: var(--space-3); }
  .vt-logo-pied .vt-puces { flex-wrap: nowrap; }
  .vt-logo-pied .vt-bouton { flex: 1 1 0; min-width: 0; padding-inline: var(--space-3); }
  .vt-logo-dispositions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-logo-dispo { padding: var(--space-2) var(--space-3); min-height: 80px; }
  .vt-logo-dispo img { height: 32px; }
  .vt-logo-categories { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-3) * -1); padding: 0 var(--space-3) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-3); }
  .vt-logo-categories .vt-puce { flex: none; scroll-snap-align: start; }
  .vt-chat-saisie .vt-palettes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .vt-chat-saisie .vt-palette { flex: none; scroll-snap-align: start; }
}
/* Le créateur de logo sur tablette : l'aperçu se rétrécit pour laisser deux colonnes de dispositions, et les catégories défilent sur une ligne comme sur téléphone. */
@media (min-width: 641px) and (max-width: 900px) {
  .vt-logo-corps { grid-template-columns: 300px minmax(0, 1fr); }
  .vt-logo-categories { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-4) * -1); padding: 0 var(--space-4) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-4); }
  .vt-logo-categories .vt-puce { flex: none; scroll-snap-align: start; }
}
/* Personnaliser : le panneau (onglets Couleurs, Polices, Photos). Sur grand écran il se tient à gauche du site, sur téléphone sous le site comme un tiroir. Aucune couleur en dur : les pastilles
   des palettes, des rôles et des teintes prennent leur couleur de la variable --c, posée par le script. Texte de 16 px au moins, cibles de 44 px au moins. */
.vt-onglets { display: flex; gap: var(--space-1); padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); }
.vt-onglet { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--texte); font: 400 16px/1 var(--font-texte); cursor: pointer; transition: background var(--duree-courte), color var(--duree-courte); }
.vt-onglet:hover { background: var(--trait); }
.vt-onglet[aria-selected="true"] { background: var(--bouton); color: var(--sur-bouton); font-weight: 600; }
.vt-perso-panneau { display: grid; gap: var(--space-3); align-content: start; }
.vt-perso-panneau[hidden] { display: none; }
.vt-perso-panneau.vt-puces { display: flex; }
.vt-segments { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); }
.vt-segments button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--texte); font: 400 16px/1 var(--font-texte); cursor: pointer; transition: background var(--duree-courte), color var(--duree-courte); }
.vt-segments button:hover { background: var(--trait); }
.vt-segments button[aria-pressed="true"] { background: var(--bouton); color: var(--sur-bouton); font-weight: 600; }
.vt-perso-sous-titre { margin: var(--space-2) 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.vt-perso-aide-courte { font-size: 16px; color: var(--texte-doux); }
.vt-ambiances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.vt-ambiances .vt-ambiance { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 76px; padding: 12px; border-radius: var(--radius-sm); line-height: 1.2; text-align: left; }
.vt-palette-pastilles.vt-palette-pastilles--quatre { width: 64px; }
.vt-palette-pastilles--quatre i { top: 4px; width: 20px; height: 20px; }
.vt-palette-pastilles.vt-palette-pastilles--quatre i:nth-child(1) { left: 0; background: var(--c1); }
.vt-palette-pastilles.vt-palette-pastilles--quatre i:nth-child(2) { left: 14px; background: var(--c2); }
.vt-palette-pastilles.vt-palette-pastilles--quatre i:nth-child(3) { left: 28px; background: var(--c3); }
.vt-palette-pastilles.vt-palette-pastilles--quatre i:nth-child(4) { left: 42px; background: var(--c4); }
.vt-roles { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vt-role-item { display: grid; gap: 4px; }
.vt-role { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: 6px var(--space-3) 6px var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font: 400 16px/1.25 var(--font-texte); text-align: left; cursor: pointer; transition: background var(--duree-courte); }
.vt-role:hover { background: var(--trait); }
.vt-role[aria-expanded="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--texte); }
.vt-role-pastille { width: 36px; height: 36px; border-radius: 50%; background: var(--c, none); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.vt-role-nom { font-weight: 600; overflow-wrap: anywhere; }
.vt-role-etat { font-size: 16px; color: var(--texte-doux); text-align: right; }
.vt-role[data-ajustee] .vt-role-etat { color: var(--texte); font-weight: 600; }
.vt-nuancier { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); }
.vt-nuancier[hidden] { display: none; }
.vt-teintes { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vt-teinte { display: block; width: 100%; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; font: 400 16px/1 var(--font-texte); background: var(--c); box-shadow: inset 0 0 0 1px var(--trait-fort); cursor: pointer; }
.vt-teinte:hover { box-shadow: inset 0 0 0 1px var(--trait-fort), 0 0 0 3px var(--trait-fort); }
.vt-teinte[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--texte); }
.vt-nuancier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vt-ajustement { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font-size: 16px; line-height: 1.4; }
.vt-ajustement[hidden] { display: none; }
.vt-associations { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.vt-association { display: grid; align-content: start; gap: 2px; min-height: 88px; padding: var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font: 400 16px/1.25 var(--font-texte); text-align: left; cursor: pointer; transition: background var(--duree-courte); }
.vt-association:hover { background: var(--trait); }
.vt-association[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--texte); }
.vt-association-apercu { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.vt-association-nom { font-weight: 600; }
.vt-association-paire { color: var(--texte-doux); overflow-wrap: anywhere; }
.vt-polices { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vt-polices[hidden] { display: none; }
.vt-police { display: grid; gap: 2px; width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font: 400 16px/1.25 var(--font-texte); text-align: left; cursor: pointer; transition: background var(--duree-courte); }
.vt-police:hover { background: var(--trait); }
.vt-police[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--texte); }
.vt-police-apercu { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.vt-polices--texte .vt-police-apercu { font-size: 18px; line-height: 1.35; }
.vt-police-nom { color: var(--texte-doux); }
.vt-photo-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.vt-photo-case { display: grid; align-content: start; gap: 2px; width: 100%; padding: 0 0 var(--space-2); overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--texte); font: 400 16px/1.25 var(--font-texte); text-align: left; cursor: pointer; transition: background var(--duree-courte); }
.vt-photo-case:hover { background: var(--trait); }
.vt-photo-case img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.vt-photo-case span { padding: 0 var(--space-2); }
.vt-photo-case-nom { font-weight: 600; margin-top: 4px; }
.vt-photo-case-etat { color: var(--texte-doux); }
.vt-perso-barre .vt-perso-actions { position: sticky; bottom: 0; margin: 0 calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--trait); }
@media (min-width: 900px) {
  .vt-grand.en-perso { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .vt-grand.en-perso .vt-grand-tete { grid-column: 1 / -1; }
  .vt-grand.en-perso .vt-perso-barre { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; align-content: start; border-bottom: 0; border-right: 1px solid var(--trait); }
  .vt-grand.en-perso .vt-grand-corps { grid-column: 2; grid-row: 2; min-height: 0; }
  .vt-grand.en-perso .vt-perso-barre { padding-bottom: 0; }
  .vt-grand.en-perso .vt-perso-barre .vt-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-grand.en-perso .vt-perso-barre .vt-palette { min-width: 0; }
}
@media (max-width: 899px) {
  .vt-grand.en-perso .vt-grand-tete { order: 1; }
  .vt-grand.en-perso .vt-grand-corps { order: 2; min-height: 0; }
  .vt-grand.en-perso .vt-perso-barre { order: 3; flex: 0 1 auto; max-height: 50vh; max-height: 50dvh; overflow-y: auto; border-top: 1px solid var(--trait); border-bottom: 0; padding: var(--space-3) var(--space-3) 0; }
  .vt-grand.en-perso .vt-perso-barre .vt-perso-actions { margin: 0 calc(var(--space-3) * -1); padding: var(--space-3); }
  .vt-grand.en-perso .vt-perso-aide { display: none; }
  .vt-grand.en-perso .vt-perso-barre .vt-palettes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .vt-grand.en-perso .vt-perso-barre .vt-palette { flex: none; scroll-snap-align: start; }
  .vt-grand.en-perso .vt-perso-barre .vt-ambiances { display: flex; }
  .vt-grand.en-perso .vt-perso-barre .vt-ambiances .vt-ambiance { flex: 0 0 156px; }
  .vt-grand.en-perso .vt-perso-actions .vt-bouton { flex: 0 1 auto; }
  .vt-grand.en-perso .vt-perso-actions .vt-bouton:last-child { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .vt-teintes { gap: 6px; }
  .vt-associations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-photo-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .vt-orbe::before, .vt-chat-fil > .vt-tour::before, .vt-nappe, .vt-final::before, .vt-offre--noire::before, .vt-brume > i { animation: none; }
  .vt-phrases ul, .vt-creation.part { transition: none; }
  .vt-bande-piste { animation: none; }
  .vt-bande { overflow-x: auto; }
  .vt-bande-piste > li[data-copie] { display: none; }
  .vt-modele:hover .vt-modele-cadre img, .vt-modele:focus-visible .vt-modele-cadre img, .vt-modele.actif .vt-modele-cadre img { transition: none; top: 0; transform: none; }
  .vt-interrupteur, .vt-interrupteur::after { transition: none; }
}
@media (max-width: 980px) {
  .vt-encadre { grid-template-columns: 1fr; }
  .vt-pied-grille { grid-template-columns: 1fr 1fr; }
  .vt-nav .links { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 8px var(--space-5) 28px; background: var(--fond); border-bottom: 1px solid var(--trait); }
  .vt-nav.open .links { display: block; }
  .vt-nav .links ul { flex-direction: column; align-items: stretch; gap: 0; }
  .vt-nav .links a { display: flex; min-height: 56px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--trait); color: var(--texte); font-size: 19px; }
  .vt-nav .burger { display: inline-flex; margin-left: var(--space-2); }
  .nav .li-cta { display: block; margin-top: var(--space-4); }
  .nav .li-cta a { justify-content: center; width: 100%; min-height: 56px; border-bottom: 0; border-radius: var(--radius-pill); color: var(--sur-bouton); font-size: 18px; }
}
@media (max-width: 640px) {
  .vt-nav-in { height: 64px; }
  .vt-nav .links { top: 64px; }
  .vt-nav .logo-svg { height: 24px; }
  .vt-nav .nav-cta { display: none; }
  .vt-nav .burger { margin-left: auto; }
  .vt-chat-fil { padding: var(--space-4) var(--space-4) var(--space-2); }
  .vt-tour { max-width: 100%; }
  .vt-chat-ligne input[type="text"], .vt-chat-ligne input[type="search"] { height: 56px; padding: 0 var(--space-4); }
  .vt-chat-ligne input[type="search"] { padding-left: 50px; }
  .vt-chat-ligne:has(> input[type="search"])::before { left: 18px; }
  .vt-grand { width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; border-radius: 0; }
  .vt-grand-pied { flex-wrap: wrap; }
  .vt-grand-tete { flex-wrap: wrap; row-gap: var(--space-2); }
  .vt-grand-tete h2 { order: 1; min-width: 0; }
  .vt-grand-tete [data-fermer] { order: 2; }
  .vt-bascule { order: 3; flex: 1 0 100%; }
  .vt-bascule button { flex: 1; }
  .vt-domaine { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: var(--space-3) var(--space-4); }
  .vt-domaine input { grid-row: 1 / span 2; }
  .vt-domaine-etat { grid-column: 2; white-space: normal; }
  .vt-modele-cadre { aspect-ratio: 4 / 5; }
  .vt-offre { padding: 28px 24px; }
  .vt-offre-ligne { flex-wrap: wrap; padding: 22px; }
  .vt-encadre { padding: 26px 22px; }
  .vt-pied-grille { grid-template-columns: 1fr; gap: var(--space-5); }
  .vt-final { border-radius: 32px; }
  .vt-recap { padding: var(--space-3) var(--space-4); bottom: var(--space-2); }
  .vt-recap-detail { display: none; }
  .vt-recap-total { font-size: 18px; }
  .vt-option:has(> .vt-orbe) { padding-left: var(--space-4); }
  .vt-option > .vt-orbe { display: none; }
  .vt-grand:not(.en-perso) .vt-grand-tete h2 { display: none; }
  .vt-grand:not(.en-perso) .vt-grand-tete [data-fermer] { margin-left: auto; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------------
   Article et PageMetier : pages de lecture (guides, comparatifs, pages par métier, index). Voir components/Article et components/PageMetier.
   Texte courant de 18 px, mentions de 14 px, aucune couleur en dur. Ajouté à la suite : les règles plus haut ne changent pas. */

/* Fil d'Ariane */
.vt-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: 16px; color: var(--texte-doux); }
.vt-fil li { display: inline-flex; align-items: center; min-height: 44px; }
.vt-fil li:not(:last-child)::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: var(--space-2); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.vt-fil a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; }
.vt-fil a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.vt-fil [aria-current="page"] { color: var(--texte); }

/* Texte de l'article */
.vt-article { min-width: 0; font-size: 18px; line-height: 1.65; }
.vt-article > * + * { margin-top: var(--space-4); }
.vt-article h2 { margin-top: var(--space-8); font: 600 clamp(26px, 3vw, 34px)/1.12 var(--font-titre); letter-spacing: -.035em; text-wrap: balance; scroll-margin-top: 88px; }
.vt-article h3 { margin-top: var(--space-6); font: 600 21px/1.25 var(--font-titre); letter-spacing: -.02em; scroll-margin-top: 88px; }
.vt-article :where(p, li) { max-width: 68ch; }
.vt-article :where(ul, ol) { padding-left: 1.3em; }
.vt-article :where(li + li) { margin-top: .4em; }
.vt-retenir li + li, .vt-sources li + li { margin-top: .4em; }
.vt-article :is(p, li, td, th) a { text-underline-offset: 3px; }
.vt-article blockquote { padding: var(--space-3) var(--space-5); border-left: 3px solid var(--texte); border-radius: var(--radius-sm); background: var(--surface); }
.vt-article-meta { margin-top: var(--space-2); }
.vt-article-photo { margin-inline: 0; margin-bottom: 0; }
.vt-article-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--surface-2); }
.vt-article-photo figcaption { margin-top: var(--space-2); }

/* La réponse en tête, le sommaire, l'encadré « à retenir », l'exemple fictif, la mise en garde */
.vt-article-reponse { padding: var(--space-5); border: 1px solid var(--trait); border-radius: var(--radius-lg); background: var(--surface); font-size: 20px; line-height: 1.5; }
.vt-article-reponse > * + * { margin-top: var(--space-3); }
.vt-sommaire, .vt-lies { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-2); }
.vt-sommaire-titre { font-size: 16px; font-weight: 600; }
.vt-sommaire ol, .vt-lies ul { display: grid; gap: 0; margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: s; }
.vt-sommaire li { counter-increment: s; }
.vt-sommaire a, .vt-lies a { display: flex; align-items: center; min-height: 44px; color: var(--texte); font-size: 16px; line-height: 1.35; text-decoration: none; }
.vt-sommaire a::before { content: counter(s) ". "; flex: none; width: 1.8em; color: var(--texte-doux); }
.vt-sommaire a:hover, .vt-lies a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vt-retenir { padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-2); }
.vt-retenir-titre { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.vt-retenir ul { margin-top: var(--space-2); }
.vt-exemple { padding: var(--space-5); border: 1px dashed var(--trait-fort); border-radius: var(--radius-md); background: transparent; }
.vt-exemple-etiquette { display: inline-block; margin-bottom: var(--space-2); padding: 2px 12px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 16px; font-weight: 600; }
.vt-exemple > * + * { margin-top: var(--space-3); }
.vt-attention { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--texte); border-radius: var(--radius-sm); background: var(--surface); }

/* Tableau : défile de côté sur un petit écran, au clavier aussi (la région prend le focus) */
.vt-tableau { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--radius-md); background: var(--surface); }
.vt-tableau table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.vt-tableau caption { padding: var(--space-3) var(--space-4) 0; font-weight: 600; text-align: left; }
.vt-tableau :is(th, td) { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.vt-tableau thead th { font-weight: 600; background: var(--surface-2); }
.vt-tableau tbody th { font-weight: 600; }
.vt-tableau tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* FAQ de l'article : les questions restent ouvertes, le texte est lu tel quel */
.vt-faq-article { margin-top: var(--space-8); }
.vt-faq-article h2 { margin-top: 0; margin-bottom: var(--space-3); }

/* Sources et renvois */
.vt-sources { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--trait); }
.vt-sources h2 { margin-top: 0; font-size: 24px; }
.vt-sources ol { margin: var(--space-3) 0 0; padding-left: 1.6em; font-size: 16px; color: var(--texte-doux); }
.vt-sources li { max-width: 72ch; overflow-wrap: anywhere; }
.vt-sources a { color: var(--texte); text-underline-offset: 3px; }
.vt-renvoi { font-size: 16px; line-height: 0; }
.vt-renvoi a { padding: 0 1px; }
.vt-avertissement { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--trait); border-radius: var(--radius-md); }

/* Brouillon : une marque discrète, visible en local seulement */
.vt-brouillon-zone { margin: 0 0 var(--space-3); }
.vt-brouillon { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 2px 12px; border: 1px dashed var(--trait-fort); border-radius: var(--radius-pill); }
.vt-brouillon span, .vt-brouillon-pastille { font-weight: 600; }
.vt-brouillon-pastille { margin-left: var(--space-2); }
.vt-brouillon-notes { margin-top: var(--space-2); max-width: 68ch; }
.vt-brouillon-notes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.vt-brouillon-notes ul { margin: 0 0 var(--space-2); padding-left: 1.3em; }

/* Colonne de droite : un appel et des lectures liées */
.vt-cote-carte { padding: var(--space-5); border: 1px solid var(--trait); border-radius: var(--radius-lg); background: var(--surface); }
.vt-cote-titre { font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.vt-cote-texte { margin: var(--space-2) 0 var(--space-4); font-size: 16px; color: var(--texte-doux); }

/* Index : cartes d'articles, puces de métiers, liens */
.vt-groupe { margin-top: var(--space-8); }
.vt-groupe h2 { margin-top: 0; margin-bottom: var(--space-4); }
.vt-cartes-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.vt-cartes-articles li { max-width: none; margin: 0; }
.vt-carte-article a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); border: 1px solid var(--trait); border-radius: var(--radius-md); background: var(--surface); color: var(--texte); text-decoration: none; transition: box-shadow var(--duree-courte); }
.vt-carte-article a:hover, .vt-carte-article a:focus-visible { box-shadow: 0 0 0 2px var(--texte); }
.vt-carte-article-titre { font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.vt-carte-article-texte { font-size: 16px; line-height: 1.45; color: var(--texte-doux); }
.vt-puces-metiers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.vt-puces-metiers li { max-width: none; margin: 0; }
.vt-puce-metier { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--texte); font: 400 16px/1 var(--font-texte); text-decoration: none; transition: background var(--duree-courte), color var(--duree-courte); }
.vt-puce-metier:hover, .vt-puce-metier:focus-visible { background: var(--bouton); color: var(--sur-bouton); }
.vt-liste-liens { display: grid; gap: 0; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.vt-liste-liens a { display: flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.35; color: var(--texte); text-underline-offset: 3px; }
.vt-ressources { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-7); margin-top: var(--space-6); }
.vt-ressources-col .vt-titre-3 { margin-bottom: var(--space-3); }

/* Page de métier : les modèles du métier */
.vt-modeles-metier { margin-top: var(--space-8); }
.vt-modeles-metier h2 { margin-top: 0; }
.vt-modeles-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); padding: 0; list-style: none; }
.vt-modeles-grille li { max-width: none; margin: 0; }
.vt-modele-lien { display: block; color: var(--texte); text-decoration: none; }
.vt-modele-lien img { width: 100%; height: auto; border-radius: var(--radius-md); background: var(--surface-2); box-shadow: 0 0 0 1px var(--trait); }
.vt-modele-lien:hover img, .vt-modele-lien:focus-visible img { box-shadow: 0 0 0 2px var(--texte); }
.vt-modele-nom { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); font-size: 16px; font-weight: 600; }
.vt-modele-nom small { font-size: 14px; font-weight: 400; color: var(--texte-doux); }

@media (max-width: 980px) {
  .vt-ressources { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 640px) {
  .vt-article { font-size: 17px; }
  .vt-article-reponse { padding: var(--space-4); font-size: 19px; }
  .vt-retenir, .vt-exemple { padding: var(--space-4); }
}

/* Feuille de style du site du studio : mise en page des pages. Les composants sont dans design-system/project/components/bundle.css.
   Aucune couleur en dur : uniquement les variables de tokens.json. */
:root { --halo: url(medias/champ-haut.webp); --halo-alpha: .66; --grain: url(medias/grain.webp); --grain-voile: url(medias/grain-voile.webp); --champ-noir: url(medias/champ-noir.webp);
  --nappe-claire: url(medias/nappe-claire.webp); --nappe-vive: url(medias/nappe-vive.webp); --nappe-ombre: url(medias/nappe-ombre.webp);
  --nappe-claire-o: .7; --nappe-vive-o: .42; --nappe-ombre-o: .16;
  --orbe-abricot: url(medias/orbe-abricot.webp); --orbe-lilas: url(medias/orbe-lilas.webp); --orbe-sauge: url(medias/orbe-sauge.webp); --orbe-cuivre: url(medias/orbe-cuivre.webp); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --halo-alpha: .34; --nappe-claire-o: .12; --nappe-vive-o: .3; --nappe-ombre-o: .34; } }
:root[data-theme="dark"] { --halo-alpha: .34; --nappe-claire-o: .12; --nappe-vive-o: .3; --nappe-ombre-o: .34; }
html { scroll-behavior: smooth; }
body.vt { margin: 0; }

/* Premier écran */
.hero-in { position: relative; z-index: 1; }
.vt-hero { padding: 28px 0 24px; }
.vt-hero h1 { max-width: 21em; margin: 0 auto; font-size: clamp(34px, 4.2vw, 54px); }
.vt-hero .vt-chapo { margin-top: 14px !important; }
.vt-halo { height: 560px; }
.micro { margin: 12px auto 0; max-width: 60em; }
/* Son site, en grand : juste sous la conversation, avant les promesses. Pas de .bloc : ses marges ne changent pas avec la largeur de l'écran. */
.vt-site { padding: var(--space-5) 0 var(--space-8); scroll-margin-top: 84px; }
.vt-site:focus { outline: none; }
.bloc.vt-promesses { padding-top: var(--space-8); }
.grille-tete { max-width: 40em; margin-bottom: var(--space-5); }
.grille-tete .vt-chapo { margin-top: var(--space-2); font-size: 17px; text-wrap: pretty; }
/* l'étape du paiement s'ouvre sur son haut, juste sous l'en-tête collant */
#chat-saisie form { scroll-margin-top: 104px; }
/* le SIRET en cours de vérification : un petit cercle qui tourne (seulement par transform), immobile si le mouvement est réduit */
.siret-attente::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vt-tourne .8s linear infinite; }
@keyframes vt-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .siret-attente::before { animation: none; } }
.prix-options { margin-top: var(--space-8); }
.prix-options li { display: flex; gap: var(--space-4); align-items: flex-start; }
.prix-options .vt-orbe { --t: 44px; }
.prix-options ul { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; max-width: 52em; color: var(--texte-doux); }
.prix-options strong { color: var(--texte); font-weight: 600; }

/* Sections */
.bloc { padding: var(--space-10) 0; }
.bloc--haut { padding-top: var(--space-5); }
.entete { max-width: 40em; }
.entete .vt-chapo { margin-top: var(--space-4); text-wrap: pretty; }
.vt-bande-zone { margin-top: var(--space-7); }
.note-fictive { margin-top: var(--space-5); }
.deux { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.collant { position: sticky; top: 112px; }
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: var(--space-8); }
.offres-suite { display: flex; flex-direction: column; gap: 20px; }
.offres-suite .prix-options { flex: 1; margin-top: 0; padding: 36px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--radius-lg); }
.prix-avant { margin-top: 20px; }
.prix-notes { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.faq { margin-top: var(--space-7); }
.grille-modeles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) 28px; }

/* Bande de captures : un décalage à gauche pour s'aligner sur la page, deux rangées sur la page des exemples */
.vt-bande-piste { padding-left: max(var(--space-5), calc((100vw - 1240px) / 2 + var(--space-5))); }
.vt-bande--retour .vt-bande-piste { animation-direction: reverse; margin-top: 20px; }
.vt-bande-aide { margin-top: var(--space-4); }

/* Page intérieure */
.page-tete { padding: 72px 0 var(--space-5); }
.page-tete .vt-chapo { max-width: 36em; margin-top: var(--space-4); }
.page-texte { padding: var(--space-8) 0 var(--space-10); }

/* Page de modification du site (/modifier/) : le titre de chaque carte est serré contre son texte ; le reste vient des composants */
#edition .card h2 { margin: 0 0 var(--space-2); }
#edition .vt-bouton { padding-block: 10px; text-align: center; }
.sans-coupure { white-space: nowrap; }
@media (max-width: 640px) { #edition .vt-puces .vt-bouton { flex: 1 1 100%; } }

/* Appel final et formulaire d'aperçu */
.bloc--final { padding: 0 0 var(--space-9); }
.final-carte { padding: 96px 56px 120px; }
.final-carte h2 { max-width: 11em; }
.final-carte .vt-chapo { margin-top: var(--space-4); }

/* Texte courant, pages légales et pages de commande */
.prose { max-width: 46rem; font-size: 18px; }
.prose h1 { margin: 0 0 var(--space-5); font: 600 clamp(32px, 6vw, 48px)/1.05 var(--font-titre); letter-spacing: -.04em; }
.prose h2 { margin: 2em 0 .6em; font: 600 26px/1.15 var(--font-titre); letter-spacing: -.03em; }
.prose h3 { margin: 1.6em 0 .5em; font: 600 20px/1.2 var(--font-titre); letter-spacing: -.02em; }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose a { text-underline-offset: 3px; }
.prose blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 3px solid var(--texte); border-radius: var(--radius-sm); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: .6em .8em; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.prose .lead { font-size: 20px; color: var(--texte-doux); }
.card { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--trait); border-radius: var(--radius-lg); background: var(--surface); }
.card h2 { margin-top: 0; }
.form { display: grid; gap: var(--space-4); }
.clause { margin: 0; }

/* Apparitions au défilement : seulement quand le script tourne */
html.js:not(.snap) .vt-reveal:not(.est-visible) { opacity: 0; transform: translateY(14px); }
.vt-reveal { transition: opacity var(--duree-douce) ease, transform var(--duree-douce) ease; }

/* Mode capture (?snap=1) : tout est posé, rien ne bouge */
html.snap .vt-nav { position: relative; }
html.snap .vt-bande-piste, html.snap .vt-orbe::before, html.snap .vt-chat-fil > .vt-tour::before, html.snap .vt-nappe, html.snap .vt-final::before, html.snap .vt-offre--noire::before, html.snap .vt-brume > i { animation: none; }
html.snap .vt-reveal { transition: none; }
html.snap { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vt-reveal { transition: none; }
  html.js .vt-reveal:not(.est-visible) { opacity: 1; transform: none; }
  .vt-bande--retour { display: none; }
}
@media (max-width: 980px) {
  .deux { grid-template-columns: 1fr; gap: var(--space-7); }
  .collant { position: static; }
  .offres { grid-template-columns: 1fr; }
  .offres-suite .prix-options { padding: 24px; }
  .bloc { padding: var(--space-9) 0; }
  .grille-modeles { grid-template-columns: repeat(2, 1fr); }
  .final-carte { padding: 72px 32px 96px; }
}
@media (max-width: 640px) {
  body.vt { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .vt-hero { padding-top: 36px; }
  .bloc { padding: 80px 0; }
  .vt-bande-piste { padding-left: 20px; }
  .grille-modeles { grid-template-columns: 1fr; gap: var(--space-7); }
  .final-carte { padding: 56px 20px 80px; }
  .vt-etape h3 { font-size: 22px; }
}

/* Pages éditoriales (guides, comparatifs, pages par métier) : mise en page. Les composants sont dans design-system/project/components/bundle.css. */
.vt-article-tete { padding-bottom: var(--space-3); }
.vt-article-tete .wrap { max-width: 1240px; }
.vt-article-tete h1 { max-width: 20em; }
.vt-article-bloc { padding-top: var(--space-4); }
.vt-article-grille { display: grid; grid-template-columns: minmax(0, 760px) 300px; justify-content: center; gap: 80px; align-items: start; }
.vt-article-cote { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
.vt-article-cote .vt-lies a { min-height: 44px; }
body.vt .vt-article.wrap-s { max-width: 860px; }
.vt-puces-metiers + .vt-article-photo { margin-top: var(--space-6); }

@media (max-width: 980px) {
  .vt-article-grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .vt-article-cote { position: static; }
}
@media (max-width: 640px) {
  .vt-article-tete { padding-top: 40px; }
}