/* =============================================================================
   Velaine Studio : style « Fil de laine » (octobre 2026)
   Chargé APRÈS style.css par toutes les pages publiques, JAMAIS par l'admin
   (admin.html ne charge que style.css : ne rien changer aux règles partagées
   de style.css, tout le nouveau style vit ici).

   1. SOCLE (toutes les pages publiques)
   -------------------------------------------------------------------------
   Polices auto-hébergées (assets/fonts/, licences OFL à côté) :
     --vl-titre  Bricolage Grotesque variable (wght 400..800, opsz 36..96,
                 largeur figée à 96) : titres, logo, prix.
     --vl-texte  Hanken Grotesk variable (wght 400..700) + 400 italique.
     style.css garde ses @font-face Newsreader/Karla (servent à l'admin) ;
     ici --serif et --sans sont redirigées, donc tout composant de style.css
     prend les nouvelles polices sans règle de plus.

   Couleurs (2 accents maximum par zone : haut violet + corail, bas violet +
   anis ; le corail ne sert ailleurs qu'aux boutons d'action) :
     --vl-violet #3A1B5E   --vl-violet-fonce #2A1246   --vl-violet-clair #5B3A83
     --vl-corail #FF5B37 (aplats, jamais en petit texte)
     --vl-corail-texte #C93A17 (texte corail sur fond clair, AA)
     --vl-lilas #CBB6E0    --vl-lilas-pale #EDE3F6     --vl-surface #F5EFFA
     --vl-anis #D2E88C     --vl-anis-pale #EEF6D2      --vl-anis-fonce #5E7A1C
     --vl-anis-texte #4F6716 (texte anis sur clair)     --vl-anis-logo #4F6A12
     --vl-perle #F7F2FC (fond de page)  --vl-encre #221533  --vl-texte-2 #584C63
   Variables de style.css redirigées : --papier (cartes blanches), --encre,
   --encre-douce, --laine, --laine-ligne, --source, --garance (= violet),
   --rayon (14px), --serif, --sans.

   Formes et mouvement :
     --vl-rayon 32px (panneaux)  --vl-rayon-moyen 20px  --vl-rayon-petit 14px
     --vl-ombre (ombre douce lilas des panneaux)
     --vl-courbe cubic-bezier(.22,1,.36,1) (toutes les animations)
     --vl-rebond (enfoncement des boutons, seul léger rebond permis)

   Composants :
     .vs > .vs-laine         logo-nom « Velaine Studio » (« laine » en anis).
                             Dans le texte courant il garde la police du texte.
     .site-nav               barre de menu en pilule de verre, collante.
                             .marque (logo), .liens (liens), .lang-switch.
                             < 960px : les liens d'ancre se replient ;
                             < 700px : le bouton « Commander » de la nav aussi.
     .bouton                 bouton en relief blanc (secondaire)
       .bouton--creux        idem (secondaire, ancien bouton contour)
       .bouton--vif, .vl-btn, .vl-btn--rose   relief corail (action principale)
       .vl-btn--mauve        relief violet, texte blanc
       .bouton--grand / .bouton--petit         tailles 64px / 44px (52 par défaut)
       .bouton .arr          flèche qui glisse au survol
     .vl-verre               panneau de verre clair (flou + filet blanc + ombre)
     .vl-card, .carte-prix, .recap-paiement : déjà en verre.
     .vl-surtitre            petit surtitre (trait violet > corail ; > anis
                             dans une zone .bas)
     .vl-etiquette           étiquette pilule anis (corail dans une zone .haut)
     .vl-puce                bulle en relief avec coche (corail par défaut,
                             .vl-puce--violet, .vl-puce--anis)
     .bloc, .bloc--laine, .hero (en-tête des pages intérieures), .enveloppe
     .avis, .jeton, .etapes, .onglets, .formule : repeints.
     Formulaires : label, input (text/email/password/tel/number/date),
       select, textarea, .champ, .champ-aide : champs blancs arrondis de 48px,
       anneau violet au focus.
     .site-pied              pied de page en panneau de verre.
     .vl-retour              bouton « haut de page » (posé par vitrine.js).
   Fond : body::before pose des taches floues fixes (lilas + pêche) ; la page
   d'accueil les remplace par son propre fond (.fond, positionné par fil.js).
   Accessibilité : focus visible partout (anneau violet 3px) ;
   prefers-reduced-motion coupe toutes les animations.

   2. PAGE D'ACCUEIL (body.accueil) : section plus bas, script public/fil.js
   (fil de laine en canvas, anneau de lumière, bascule des tarifs, apparitions).
   Sans JavaScript tout le contenu reste visible : les états « caché avant
   apparition » ne s'appliquent que sous html.fil, classe posée par fil.js.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-latin-400-italic.woff2') format('woff2');
}

/* --- jetons ---------------------------------------------------------------- */

:root {
  --vl-violet: #3A1B5E;
  --vl-violet-fonce: #2A1246;
  --vl-violet-clair: #5B3A83;
  --vl-corail: #FF5B37;
  --vl-corail-fonce: #C9421F;
  --vl-corail-texte: #C93A17;
  --vl-lilas: #CBB6E0;
  --vl-lilas-pale: #EDE3F6;
  --vl-surface: #F5EFFA;
  --vl-anis: #D2E88C;
  --vl-anis-pale: #EEF6D2;
  --vl-anis-fonce: #5E7A1C;
  --vl-anis-texte: #4F6716;
  --vl-anis-logo: #4F6A12;
  --vl-perle: #F7F2FC;
  --vl-creme: #FFFCF7;
  --vl-encre: #221533;
  --vl-texte-2: #584C63;
  --vl-filet: #E2D7EC;

  --vl-verre: rgba(255, 255, 255, 0.55);
  --vl-verre-fort: rgba(255, 255, 255, 0.74);
  --vl-rayon: 32px;
  --vl-rayon-moyen: 20px;
  --vl-rayon-petit: 14px;
  --vl-ombre: 0 40px 90px -34px rgba(90, 58, 131, 0.32), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
  --vl-ombre-legere: 0 10px 24px -18px rgba(58, 27, 94, 0.5), inset 0 1px 0 #fff;
  --vl-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --vl-rebond: cubic-bezier(0.3, 0.7, 0.4, 1.4);

  --vl-titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --vl-texte: 'Hanken Grotesk', system-ui, sans-serif;

  /* le petit V tricoté, en masque (rangées des cartes de tarifs) */
  --vl-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M8 1C9 9 12 13 15 16C15 9 12 3 8 1ZM22 1C21 9 18 13 15 16C15 9 18 3 22 1Z'/%3E%3C/svg%3E");
}

/* Variables de style.css : tous ses composants se repeignent d'eux-mêmes.
   Le thème sombre de style.css cible :root:not([data-theme='light']) dans une
   media query : on rejoue ce sélecteur pour garder la palette claire. */
:root,
:root:not([data-theme='light']) {
  --papier: #FFFDFF;
  --encre: var(--vl-encre);
  --encre-douce: var(--vl-texte-2);
  --laine: var(--vl-surface);
  --laine-ligne: var(--vl-filet);
  --source: var(--vl-surface);
  --garance: var(--vl-violet);
  --garance-fonce: var(--vl-violet-fonce);
  --rayon: var(--vl-rayon-petit);
  --serif: var(--vl-titre);
  --sans: var(--vl-texte);
  --large: 70rem;
  color-scheme: light;
}

/* --- base ------------------------------------------------------------------ */

html { background: var(--vl-perle); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative;
  overflow-x: clip;
  background: transparent;
  color: var(--vl-encre);
  font: 400 1.0625rem/1.6 var(--vl-texte);
  font-feature-settings: normal;
}
/* Fond des pages : taches floues lilas et pêche, fixes, sous tout le contenu. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at -8% -12%, rgba(203, 182, 224, 0.75), rgba(203, 182, 224, 0) 62%),
    radial-gradient(52vmax 52vmax at 108% 18%, rgba(255, 190, 168, 0.45), rgba(255, 190, 168, 0) 60%),
    radial-gradient(56vmax 56vmax at 20% 112%, rgba(214, 196, 240, 0.6), rgba(214, 196, 240, 0) 62%);
}

h1, h2, h3, h4 {
  font-family: var(--vl-titre);
  color: var(--vl-violet);
  font-weight: 700;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 72;
}
h1 { font-weight: 680; line-height: 1.06; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); }
h2 { line-height: 1.06; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
h3 { line-height: 1.15; font-variation-settings: "opsz" 36; }
strong { font-weight: 650; }

a { color: var(--vl-violet); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(91, 58, 131, 0.45); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--vl-violet); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--vl-lilas); color: var(--vl-violet-fonce); }

/* --- logo-nom -------------------------------------------------------------- */

.vs { white-space: nowrap; color: var(--vl-violet); }
.vs-laine { color: var(--vl-anis-logo); }

/* Logo-nom en tête et en pied de page : « Velaine » en grand, « Studio » en
   petites capitales espacées, pour que le nom se lise d'un coup d'œil. Dans le
   texte courant, .vs reste à la taille du paragraphe. */
.site-nav .marque .vs { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; }
.site-nav .marque .vs-studio,
.site-pied .vs-studio {
  font: 700 0.4em/1 var(--vl-texte);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vl-violet-clair);
  margin-left: 0.1em;
}

/* --- barre de menu : pilule de verre --------------------------------------- */

.site-nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  width: min(1240px, 100% - 32px);
  max-width: none;
  margin: 16px auto 0;
  padding: 10px 10px 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px -30px rgba(90, 58, 131, 0.38), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
}
.site-nav .marque {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  font: 700 20px/1 var(--vl-titre);
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav .liens { margin-left: auto; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }
.site-nav .liens a:not(.marque):not(.bouton),
.site-nav .liens .bouton--creux {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--vl-violet-fonce);
  font: 600 15px/1 var(--vl-texte);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  box-shadow: none;
  transition: background-color 0.4s var(--vl-courbe);
}
.site-nav .liens a:not(.marque):not(.bouton):hover,
.site-nav .liens .bouton--creux:hover { background: rgba(255, 255, 255, 0.85); color: var(--vl-violet-fonce); transform: none; }
.site-nav a[aria-current] { box-shadow: none; background: var(--vl-lilas-pale); }
.site-nav .liens .bouton--creux[aria-current] { background: var(--vl-lilas-pale); }
.site-nav .lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid rgba(58, 27, 94, 0.25);
  border-radius: 999px;
  color: var(--vl-violet-fonce);
  font: 700 15px/1 var(--vl-texte);
  text-decoration: none;
}
.site-nav > .lang-switch { margin-left: auto; }
.site-nav .lang-switch:hover { background: rgba(255, 255, 255, 0.85); }
.site-nav .bouton:not(.bouton--creux) { --h: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }

@media (max-width: 1100px) {
  .site-nav .liens a[href*="#"]:not(.bouton),
  .site-nav .liens a[href$="offre.html"]:not(.bouton):not(.lang-switch) { display: none; }
}
/* Mobile (≤ 820px) : une seule ligne, sur toutes les pages publiques. Restent le
   logo, « Mon espace » en petit lien texte, le bouton principal « Commander une
   traduction » et le sélecteur de langue ; les autres liens se replient. Tailles et
   espacements réduits pour tenir à 390px avec le libellé entier (FR compris). */
@media (max-width: 820px) {
  .site-nav { top: 8px; width: calc(100% - 16px); margin-top: 8px; padding: 6px 6px 6px 14px; gap: 6px; }
  .site-nav .marque { font-size: 17px; }
  .site-nav .marque .vs { font-size: 17px; }
  .site-nav .liens { gap: 2px; }
  .site-nav .liens a:not(.bouton):not(.lang-switch),
  .site-nav .liens .bouton--creux:not([href$="compte.html"]) { display: none; }
  .site-nav .liens .bouton--creux[href$="compte.html"] {
    min-height: 40px;
    padding: 0 7px;
    font-size: 13px;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(91, 58, 131, 0.4);
    text-underline-offset: 3px;
  }
  .site-nav .liens .bouton--creux[href$="compte.html"][aria-current] { background: none; text-decoration-color: currentColor; }
  .site-nav .bouton:not(.bouton--creux) { --h: 40px; padding: 0 12px; font-size: 13px; letter-spacing: -0.01em; }
  .site-nav .liens a.lang-switch:not(.marque):not(.bouton), .site-nav > .lang-switch { min-height: 36px; padding: 0 9px; font-size: 13px; }
}
@media (max-width: 440px) {
  .site-nav { width: calc(100% - 12px); padding: 5px 4px 5px 10px; gap: 3px; }
  .site-nav .marque { font-size: 14.5px; letter-spacing: -0.03em; }
  .site-nav .marque .vs { font-size: 16px; }
  .site-nav .marque .vs-studio { letter-spacing: 0.16em; }
  .site-nav .liens .bouton--creux[href$="compte.html"] { padding: 0 4px; font-size: 12px; }
  .site-nav .bouton:not(.bouton--creux) { padding: 0 9px; font-size: 12px; letter-spacing: -0.012em; }
  .site-nav .liens a.lang-switch:not(.marque):not(.bouton), .site-nav > .lang-switch { min-height: 34px; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 379px) {
  .site-nav .marque { font-size: 13px; }
  .site-nav .marque .vs { font-size: 14.5px; }
  .site-nav .marque .vs-studio { letter-spacing: 0.1em; }
  .site-nav .bouton:not(.bouton--creux) { padding: 0 7px; font-size: 11px; }
  .site-nav .liens .bouton--creux[href$="compte.html"] { font-size: 11px; }
}
/* Très petits écrans (moins de 360px) : « Studio » se replie pour que la barre tienne. */
@media (max-width: 359px) {
  .site-nav .marque .vs-studio { display: none; }
}

/* 320 à 340px : quelques pixels de marge pour que le sélecteur de langue reste dans la barre */
@media (max-width: 340px) {
  .site-nav { gap: 2px; padding-right: 3px; }
  .site-nav .bouton:not(.bouton--creux) { padding: 0 6px; }
}

/* --- boutons en relief ----------------------------------------------------- */

.bouton, .vl-btn, .vl-btn--rose, .vl-btn--mauve {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--h);
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: 700 16px/1.15 var(--vl-texte);
  letter-spacing: -0.003em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--vl-violet-fonce);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -5px 10px rgba(58, 27, 94, 0.12), inset 0 3px 6px rgba(255, 255, 255, 0.95),
    0 12px 26px -12px rgba(58, 27, 94, 0.45), 0 3px 0 rgba(58, 27, 94, 0.18);
  transition: transform 0.22s var(--vl-rebond), box-shadow 0.22s, background-color 0.3s;
}
.bouton:hover, .vl-btn:hover, .vl-btn--rose:hover, .vl-btn--mauve:hover,
.bouton--creux:hover {
  transform: translateY(-2px);
  color: var(--vl-violet-fonce);
  background-color: rgba(255, 255, 255, 0.86);
  border-color: transparent;
}
.bouton:active, .vl-btn:active, .vl-btn--rose:active, .vl-btn--mauve:active {
  transform: translateY(3px) scale(0.97);
  box-shadow: inset 0 5px 12px rgba(58, 27, 94, 0.28), 0 2px 6px -2px rgba(58, 27, 94, 0.3);
}
.bouton--creux { background: rgba(255, 255, 255, 0.72); color: var(--vl-violet-fonce); }
.bouton--vif, .vl-btn, .vl-btn--rose,
.bouton--vif:hover, .vl-btn:hover, .vl-btn--rose:hover {
  color: var(--vl-violet-fonce);
  background: radial-gradient(120% 90% at 30% 15%, #FFD2C4 0%, #FF8A6A 32%, #FF5B37 70%, #E9481F 100%);
  box-shadow: inset 0 -6px 12px rgba(150, 30, 0, 0.3), inset 0 4px 8px rgba(255, 255, 255, 0.6),
    0 14px 30px -12px rgba(58, 27, 94, 0.38), 0 3px 0 #C9421F;
}
.vl-btn--mauve, .vl-btn--mauve:hover {
  color: #fff;
  background: radial-gradient(120% 90% at 30% 15%, #B99BDA 0%, #6E4FA3 40%, #3A1B5E 100%);
  box-shadow: inset 0 -6px 12px rgba(20, 4, 40, 0.35), inset 0 4px 8px rgba(255, 255, 255, 0.3),
    0 14px 30px -12px rgba(58, 27, 94, 0.5), 0 3px 0 #2A1246;
}
.bouton:disabled, .bouton[disabled], .bouton:disabled:hover, .bouton[disabled]:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.bouton--grand { --h: 64px; padding: 0 36px; font-size: 19px; }
.bouton--petit { --h: 44px; padding: 0 20px; font-size: 15px; }
.bouton .arr { transition: transform 0.4s var(--vl-courbe); }
.bouton:hover .arr { transform: translateX(4px); }
button.bouton { font-family: var(--vl-texte); }

/* --- panneaux de verre ----------------------------------------------------- */

.vl-verre, .vl-card, .carte-prix, .recap-paiement {
  position: relative;
  background: var(--vl-verre);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon);
  box-shadow: var(--vl-ombre);
}
.vl-card { padding: 34px 38px; }
.carte-prix { border-left: 1px solid rgba(255, 255, 255, 0.95); padding: 28px 30px; }
.carte-prix__montant { font-family: var(--vl-titre); color: var(--vl-violet); }
.recap-paiement { padding: 26px 30px; }

.vl-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 13px/1 var(--vl-texte);
  letter-spacing: 0.18em;
  color: var(--vl-violet-clair);
}
.vl-surtitre::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vl-violet-clair), var(--vl-corail));
}
.bas .vl-surtitre::before { background: linear-gradient(90deg, var(--vl-violet-clair), #A9C94A); }

.vl-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(94, 122, 28, 0.2);
  border-radius: 999px;
  font: 700 12px/1 var(--vl-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vl-anis-texte);
  background: var(--vl-anis-pale);
}
.vl-etiquette::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #A9C94A; }
.haut .vl-etiquette { color: #9E2F12; background: #FFE9E1; border-color: rgba(201, 66, 31, 0.2); }
.haut .vl-etiquette::before { background: var(--vl-corail); }

.vl-puce {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4F0, #FFA58C 55%, #F2502B);
  box-shadow: inset -2px -3px 5px rgba(150, 30, 0, 0.25), 0 3px 8px -2px rgba(150, 60, 40, 0.4);
}
.vl-puce svg { width: 11px; height: 11px; }
.vl-puce--violet { background: radial-gradient(circle at 35% 30%, #FBF6FF, #BFA3DE 55%, #6E4FA3); box-shadow: inset -2px -3px 5px rgba(30, 8, 50, 0.25), 0 3px 8px -2px rgba(58, 27, 94, 0.4); }
.vl-puce--anis { background: radial-gradient(circle at 35% 30%, #F8FCEB, #C5DE6E 55%, #86A43A); box-shadow: inset -2px -3px 5px rgba(40, 60, 0, 0.2), 0 3px 8px -2px rgba(94, 122, 28, 0.4); }

/* --- ossature des pages intérieures ------------------------------------------ */

.bloc { position: relative; }
.bloc + .bloc { border-top: 0; }
.bloc--laine { background: none; }
.hero { padding: clamp(3rem, 2rem + 5vw, 5.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.hero h1 { max-width: 22ch; }
.hero h1 em { font-style: normal; color: var(--vl-corail-texte); }
.hero p.chapo { font-size: 1.2rem; color: var(--vl-texte-2); max-width: 40em; }
.garanties li::before { color: var(--vl-corail-fonce); }

/* .avis : voir « pages intérieures » plus bas (verre teinté lilas, pastille). */
.jeton { background: var(--vl-lilas-pale); color: var(--vl-violet-fonce); font-weight: 600; }
.jeton--pret { background: var(--vl-violet); color: #fff; }
.jeton--erreur { background: var(--vl-violet-fonce); color: #fff; }
.etapes li { border-top-width: 4px; border-radius: 2px; }
.onglets { border-bottom-color: var(--vl-filet); }
.onglets button { font-weight: 600; }
.formule { background: var(--vl-verre-fort); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 24px; box-shadow: var(--vl-ombre-legere); }
.formule--phare { border: 2px solid var(--vl-violet-clair); }
.formule .prix, .tarif-mesure__prix { font-family: var(--vl-titre); font-weight: 700; color: var(--vl-violet); }
.vl-shell-top { margin-top: 0; }

/* --- formulaires ----------------------------------------------------------- */

label { font-weight: 600; color: var(--vl-violet-fonce); }
input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
input[type='number'], input[type='date'], input[type='url'], select, textarea,
input.champ, select.champ, textarea.champ {
  font: 400 1rem/1.4 var(--vl-texte);
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(91, 58, 131, 0.24);
  border-radius: var(--vl-rayon-petit);
  background: rgba(255, 255, 255, 0.92);
  color: var(--vl-encre);
  box-shadow: inset 0 2px 4px rgba(58, 27, 94, 0.06);
  transition: border-color 0.3s var(--vl-courbe), box-shadow 0.3s var(--vl-courbe);
}
textarea, textarea.champ { min-height: 7rem; }
input:hover, select:hover, textarea:hover { border-color: rgba(91, 58, 131, 0.45); }
input:focus, select:focus, textarea:focus {
  border-color: var(--vl-violet-clair);
  box-shadow: 0 0 0 4px rgba(91, 58, 131, 0.16);
}
input[type='checkbox'], input[type='radio'] { accent-color: var(--vl-violet); width: 1.1rem; height: 1.1rem; }
input[type='file'] { font: 400 0.95rem var(--vl-texte); }
.champ-aide { color: var(--vl-texte-2); }

/* Dépôt du patron : le champ natif reste dans la page (il porte le fichier et le
   focus clavier passe par le bouton qui le pilote), mais n'est plus visible. */
input.champ.champ-fichier--masque {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.depot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 0.4rem; }
.depot #f-nom-fichier { color: var(--vl-texte-2); font-size: 0.95rem; }

/* Tarif mesuré après dépôt du patron : le montant qu'on s'apprête à engager. */
.tarif-mesure { color: var(--vl-encre); font-size: 0.95rem; }
.tarif-mesure__prix { display: block; margin-top: 0.15rem; font-size: 2.4rem; line-height: 1.1; }

/* Consignes de préparation, juste avant le dépôt du fichier. */
.prep-patron {
  background: var(--vl-verre-fort);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon-moyen);
  box-shadow: var(--vl-ombre-legere);
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 1.8rem 0;
  max-width: 46rem;
}
.prep-patron h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.prep-patron ul { margin: 0; padding-left: 1.1rem; }
.prep-patron li { margin-bottom: 0.45rem; font-size: 0.95rem; color: var(--vl-texte-2); }
.prep-patron li:last-child { margin-bottom: 0; }

/* --- pied de page ---------------------------------------------------------- */

.site-pied {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  width: min(1180px, 100% - 32px);
  max-width: none;
  margin: clamp(48px, 8vw, 96px) auto 40px;
  padding: 24px 34px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon);
  background: var(--vl-verre);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--vl-ombre);
  color: var(--vl-texte-2);
  font-size: 15.5px;
}
.site-pied > span:first-child { margin-right: auto; }
.site-pied .vs { font: 800 26px/1 var(--vl-titre); letter-spacing: -0.035em; }
.site-pied a { color: var(--vl-texte-2); text-decoration: none; font-weight: 500; }
.site-pied a:hover { color: var(--vl-violet); text-decoration: underline; text-decoration-color: var(--vl-anis-fonce); }
@media (max-width: 700px) {
  .site-pied { padding: 24px; gap: 12px 20px; border-radius: 28px; }
  .site-pied > span:first-child { flex-basis: 100%; }
}

/* --- retour en haut (posé par vitrine.js) ----------------------------------- */

.vl-retour {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  min-height: 44px;
  padding: 0 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--vl-violet-fonce);
  font: 600 0.92rem/1 var(--vl-texte);
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(58, 27, 94, 0.45);
}
.vl-retour:hover { background: #fff; }

/* =============================================================================
   2. PAGE D'ACCUEIL
   ========================================================================== */

@property --vl-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --vl-sx { syntax: "<percentage>"; initial-value: 0%; inherits: true; }

body.accueil { font-size: 18px; line-height: 1.6; }
.accueil::before { display: none; }
.accueil main { position: relative; z-index: 1; display: block; }
.accueil .wrap { --gut: clamp(56px, 9.7vw, 150px); width: calc(100% - 2 * var(--gut)); max-width: 1180px; margin: 0 auto; }
.accueil .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.accueil h2 {
  margin: 18px 0 0;
  font-size: clamp(36px, 4.1vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 96;
}
.accueil h3 { letter-spacing: -0.012em; }
.accueil p { margin: 0; }
.accueil section.band { position: relative; padding: 200px 0 0; }

/* --- fond : fondus par zone (haut lilas + pêche, bas lilas + anis) et grandes photos */
.fond { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
.fond .zone { position: absolute; left: 0; width: 100%; }
.fond .zone-haut { top: 0; height: 46%; }  /* recouvre la zone basse, fondu sur 4 % */
.fond .zone-bas { top: 42%; bottom: 0; }
.fond .zone i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: vl-respire var(--t, 22s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
}
.zone-haut .b1 { width: 80vmax; height: 80vmax; left: -32vmax; top: -30vmax; background: radial-gradient(circle, rgba(203, 182, 224, 0.85), rgba(203, 182, 224, 0) 62%); }
.zone-haut .b2 { width: 70vmax; height: 70vmax; right: -30vmax; top: 22vmax; background: radial-gradient(circle, rgba(255, 190, 168, 0.6), rgba(255, 190, 168, 0) 60%); --t: 26s; --dl: -6s; }
.zone-haut .b3 { width: 60vmax; height: 60vmax; left: -18vmax; top: 48%; background: radial-gradient(circle, rgba(222, 196, 246, 0.75), rgba(222, 196, 246, 0) 62%); --t: 24s; --dl: -10s; }
.zone-haut .b4 { width: 56vmax; height: 56vmax; right: -22vmax; bottom: -18vmax; background: radial-gradient(circle, rgba(255, 206, 188, 0.5), rgba(255, 206, 188, 0) 62%); --t: 20s; --dl: -3s; }
.zone-bas .b1 { width: 70vmax; height: 70vmax; right: -30vmax; top: -14vmax; background: radial-gradient(circle, rgba(203, 182, 224, 0.8), rgba(203, 182, 224, 0) 62%); --t: 24s; }
.zone-bas .b2 { width: 64vmax; height: 64vmax; left: -28vmax; top: 18%; background: radial-gradient(circle, rgba(210, 232, 140, 0.5), rgba(210, 232, 140, 0) 60%); --t: 27s; --dl: -8s; }
.zone-bas .b3 { width: 66vmax; height: 66vmax; right: -26vmax; top: 46%; background: radial-gradient(circle, rgba(226, 240, 178, 0.5), rgba(226, 240, 178, 0) 62%); --t: 22s; --dl: -12s; }
.zone-bas .b4 { width: 70vmax; height: 70vmax; left: -24vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(214, 196, 240, 0.75), rgba(214, 196, 240, 0) 62%); --t: 25s; --dl: -5s; }
@keyframes vl-respire {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vmax, 3vmax, 0) scale(1.1); }
  100% { transform: translate3d(-3vmax, 4vmax, 0) scale(0.95); }
}
/* grandes photos pleine largeur, fondues, teintées vers le lilas de la zone */
.bgp {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  display: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  mask: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}
.fil .bgp.on { display: block; }
.bgp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; }
.bgp::after { content: ""; position: absolute; inset: 0; }
.bgp-svc { background: #D9C8EE; }
.bgp-svc img { opacity: 0.42; object-position: 50% 40%; }
.bgp-svc::after { background: linear-gradient(180deg, rgba(247, 242, 252, 0.5), rgba(247, 242, 252, 0.3) 50%, rgba(255, 236, 228, 0.4)); }
.bgp-rep { background: #D7C6EC; }
.bgp-rep img { opacity: 0.5; filter: brightness(1.75) contrast(0.85); }
.bgp-rep::after { background: linear-gradient(180deg, rgba(247, 242, 252, 0.35), rgba(247, 242, 252, 0.22) 50%, rgba(238, 246, 210, 0.35)); }
.bgp-fin { background: linear-gradient(120deg, #DCCDF0, #E8F0CC); }
.bgp-fin img { opacity: 0.4; object-position: 50% 45%; }
.bgp-fin::after { background: rgba(247, 242, 252, 0.32); }
/* petite lumière sous la souris, très discrète */
.lueur {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--vl-courbe);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
}
@media (pointer: fine) { .lueur.on { opacity: 0.6; } }

/* --- le fil : un seul canvas, sous le contenu --- */
.fil-calque { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.fil-calque canvas { position: absolute; left: 0; top: 0; display: block; }
.fil-dessus { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: block; }

/* --- premier écran --- */
.accueil .hero { position: relative; padding: 22px 0 0; }
#fibres { position: absolute; left: 0; top: -120px; width: 100%; height: calc(100% + 200px); z-index: 0; pointer-events: none; }
/* centré sur la photo, 1,32 fois sa hauteur (posé en CSS : aucun décalage au chargement) */
.anneau { position: absolute; z-index: -1; pointer-events: none; height: 132%; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; }
.anneau i { position: absolute; inset: 0; border-radius: 50%; display: block; }
.anneau .t1 {
  background: conic-gradient(from 0deg, #A98BE6, #FFB9A2, #FF8A6B, #C9B0EE, #8E6BD6, #FFC9B8, #A98BE6);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 66%, #000 76%, transparent 86%);
  mask: radial-gradient(closest-side, transparent 58%, #000 66%, #000 76%, transparent 86%);
  filter: blur(26px);
  opacity: 0.55;
  animation: vl-tourne 48s linear infinite;
}
.anneau .t2 {
  inset: 8%;
  background: conic-gradient(from 120deg, transparent 0 10%, rgba(122, 79, 192, 0.75) 22%, transparent 34%, transparent 55%, rgba(242, 90, 60, 0.6) 68%, transparent 80%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 92%, transparent 96%);
  mask: radial-gradient(closest-side, transparent 88%, #000 92%, transparent 96%);
  filter: blur(2px);
  opacity: 0.6;
  animation: vl-tourne 30s linear infinite reverse;
}
.anneau .t3 { inset: 22%; background: radial-gradient(circle, rgba(255, 200, 184, 0.4), rgba(203, 182, 224, 0.3) 40%, transparent 65%); filter: blur(40px); animation: vl-pulse 9s ease-in-out infinite; }
@keyframes vl-tourne { to { transform: rotate(360deg); } }
@keyframes vl-pulse { 50% { transform: scale(1.1); opacity: 0.75; } }
.accueil .hero .grid { position: relative; z-index: 1; align-items: start; grid-template-rows: auto 1fr; }
.accueil h1 {
  margin: 30px 0 0;
  max-width: none;
  font-size: clamp(38px, 4.15vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72;
  color: var(--vl-violet);
}
.accueil h1 em { font-style: normal; color: var(--vl-corail-texte); }
.accueil h1 .l { display: inline; }
@media (min-width: 821px) { .accueil h1 .l { display: block; } .accueil h1 em .l:last-child { display: inline; } }
.hero-txt { grid-column: 1 / 9; grid-row: 1; }
.hero-txt2 { grid-column: 1 / 8; grid-row: 2; align-self: start; }
.hero-low { margin-top: 30px; }
.accueil .hero p.chapo { margin: 0; font-size: 19.5px; line-height: 1.6; color: var(--vl-texte-2); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.hero-art { grid-column: 9 / 13; grid-row: 1 / 3; position: relative; margin-right: calc(var(--gut) * -0.4); margin-top: 4px; height: min(600px, 70vh); min-height: 470px; }
.cliche {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 44% 56% 42% 58% / 36% 40% 60% 64%;
  background: var(--vl-lilas-pale);
  box-shadow: 0 50px 90px -40px rgba(91, 58, 131, 0.45), 0 20px 50px -30px rgba(150, 70, 60, 0.22);
  animation: vl-morphe 22s ease-in-out infinite alternate;
}
.cliche img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.14); }
.cliche::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: linear-gradient(150deg, #FFFFFF, rgba(203, 182, 224, 0.95) 40%, rgba(255, 160, 130, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cliche::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 25%); mix-blend-mode: soft-light; }
@keyframes vl-morphe {
  0% { border-radius: 44% 56% 42% 58% / 36% 40% 60% 64%; }
  50% { border-radius: 56% 44% 52% 48% / 44% 34% 66% 56%; }
  100% { border-radius: 48% 52% 60% 40% / 40% 46% 54% 60%; }
}
.pastilles { position: absolute; z-index: 3; left: -120px; bottom: 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pastilles li { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 13px; border-radius: 999px; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--vl-violet-fonce); background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66)); }
.pastilles li:nth-child(2) { margin-left: 34px; }
.pastilles li:nth-child(3) { margin-left: 12px; }

/* --- pour qui --- */
.svc .head { grid-column: 1 / 7; grid-row: 1; }
.ph { margin: 0; position: relative; overflow: hidden; background: var(--vl-lilas-pale); box-shadow: 0 40px 80px -34px rgba(90, 58, 131, 0.45); }
.ph img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; display: block; }
.ph-svc { grid-column: 1 / 6; grid-row: 2; height: 440px; margin-top: 70px; border-radius: 220px 220px 48px 48px; }
.svc-lede { grid-column: 7 / 13; grid-row: 1; align-self: end; font-family: var(--vl-titre); font-variation-settings: "opsz" 36; font-weight: 500; font-size: clamp(21px, 1.75vw, 25px); line-height: 1.45; color: var(--vl-violet-fonce); letter-spacing: -0.01em; }
.accueil .svc-lede { margin: 0; }
.svc-panel { grid-column: 7 / 13; grid-row: 2; align-self: start; margin-top: 56px; padding: 40px 42px 42px; }
.svc-panel p { font-size: 18px; line-height: 1.62; color: var(--vl-encre); }
.svc-panel p.intro { font-weight: 500; color: var(--vl-violet-fonce); }
.atouts { list-style: none; margin: 22px 0 24px; padding: 0; display: grid; gap: 10px; }
.atouts li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--vl-ombre-legere); font-size: 17.5px; line-height: 1.45; color: var(--vl-violet-fonce); font-weight: 500; }
.atouts li:nth-child(2) { margin-left: 22px; }
.atouts li:nth-child(3) { margin-left: 44px; }
.atouts .vl-puce { width: 26px; height: 26px; margin-top: -1px; }
.atouts .vl-puce svg { width: 12px; height: 12px; }
.svc-panel p.corpus { color: var(--vl-texte-2); padding-top: 20px; border-top: 1px solid rgba(91, 58, 131, 0.16); }
.svc strong { color: var(--vl-violet-fonce); }
.svc-trust { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-top: 84px; padding: 34px 36px 36px; }
.svc-trust p { font-size: 19px; line-height: 1.55; color: var(--vl-encre); }
.svc-rev { grid-column: 1 / 6; grid-row: 4; align-self: start; margin-top: 22px; padding: 30px 36px 34px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.74), rgba(255, 232, 224, 0.6)); }
.accueil .svc-rev p { margin: 14px 0 0; color: var(--vl-texte-2); }
.svc .echo { grid-column: 7 / 13; grid-row: 3; position: relative; margin: 96px 0 0; padding: 0 0 0 76px; }
/* grand guillemet décoratif corail (pseudo-élément : jamais lu par les lecteurs d'écran) */
.svc .echo::before {
  content: "\201C";
  position: absolute;
  left: -6px;
  top: -0.18em;
  font: 800 128px/1 var(--vl-titre);
  font-variation-settings: "opsz" 96;
  color: var(--vl-corail);
  opacity: 0.9;
  pointer-events: none;
}
.svc .echo p { font-family: var(--vl-titre); font-variation-settings: "opsz" 72; font-weight: 600; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.18; color: var(--vl-violet); letter-spacing: -0.02em; }
.abrev { grid-column: 7 / 13; grid-row: 4; list-style: none; margin: 40px 0 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.abrev li { display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px; border-radius: 999px; font-weight: 600; font-size: 16px; background: rgba(255, 255, 255, 0.72); }
.abrev .tag { font: 700 11px/1 var(--vl-texte); letter-spacing: 0.14em; padding: 7px 9px; border-radius: 999px; background: var(--vl-lilas-pale); color: var(--vl-violet); }
.abrev .tag.fr { background: #FFE9E1; color: #9E2F12; }
.abrev .to { color: var(--vl-corail-texte); }

/* --- étapes --- */
.how-head { grid-column: 8 / 13; }
.track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); margin-top: 80px; padding-bottom: 10px; }
.step { position: relative; grid-column: 1; padding: 34px 38px 36px; max-width: 480px; justify-self: end; width: 100%; }
.step:nth-of-type(1) { grid-row: 1; }
.step:nth-of-type(2) { grid-row: 2; grid-column: 3; justify-self: start; }
.step:nth-of-type(3) { grid-row: 3; }
.step:nth-of-type(4) { grid-row: 4; grid-column: 3; justify-self: start; }
.step:nth-of-type(n+2) { margin-top: -24px; }
.step .num {
  position: absolute;
  top: 26px;
  right: -117px;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  z-index: 3;
  font: 700 32px/1 var(--vl-titre);
  color: #fff;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 34% 28%, #C9A6EE 0%, #7A4EAE 45%, #3A1B5E 100%);
  box-shadow: inset -8px -10px 16px rgba(20, 4, 40, 0.4), inset 6px 8px 12px rgba(255, 255, 255, 0.35), 0 18px 30px -12px rgba(58, 27, 94, 0.55), 0 0 0 7px rgba(247, 242, 252, 0.92);
  animation: vl-bulle 9s ease-in-out infinite alternate;
  transition: transform 1.2s var(--vl-courbe);
}
.step:nth-of-type(even) .num { right: auto; left: -117px; }
.step:nth-of-type(2) .num, .step:nth-of-type(4) .num { background: radial-gradient(circle at 34% 28%, #FFD2C4 0%, #FF6A47 45%, #B8381A 100%); color: var(--vl-violet-fonce); }
.step:nth-of-type(3) .num { background: radial-gradient(circle at 34% 28%, #E2C4F2 0%, #8A5BB8 45%, #4A2373 100%); }
@keyframes vl-bulle {
  0% { border-radius: 58% 42% 55% 45% / 46% 52% 48% 54%; }
  33% { border-radius: 44% 56% 40% 60% / 58% 40% 60% 42%; }
  66% { border-radius: 60% 40% 50% 50% / 40% 58% 42% 60%; }
  100% { border-radius: 48% 52% 44% 56% / 54% 46% 58% 42%; }
}
.step.lit .num { transform: scale(1.08); }
.step h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.1; }
.step p { color: var(--vl-texte-2); font-size: 18px; }
.step::after { content: ""; position: absolute; top: 66px; right: -33px; width: 33px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 160, 130, 0.9)); }
.step:nth-of-type(even)::after { right: auto; left: -33px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.9), rgba(255, 160, 130, 0.9)); }
.fil:not(.static) .step { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--vl-courbe), transform 1.5s var(--vl-courbe); }
.fil:not(.static) .step:nth-of-type(even) { transform: translateX(70px); }
.fil:not(.static) .step .num { opacity: 0; scale: 0.3; transition: opacity 1s var(--vl-courbe) 0.3s, scale 1.4s var(--vl-courbe) 0.3s; }
.fil:not(.static) .step h3, .fil:not(.static) .step p { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--vl-courbe), transform 1.2s var(--vl-courbe); }
.fil:not(.static) .step h3 { transition-delay: 0.55s; }
.fil:not(.static) .step p { transition-delay: 0.8s; }
.fil .step.in, .fil .step.in h3, .fil .step.in p { opacity: 1; transform: none; }
.fil .step.in .num { opacity: 1; scale: 1; }

/* --- rapport : grand fond écheveaux + verre --- */
.qr-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; padding: 64px 70px 70px; border-radius: 44px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); }
.qr-panel .head { grid-column: 1 / 3; max-width: 820px; }
.accueil .qr-panel .col p { margin: 26px 0 0; font-size: 18px; color: var(--vl-texte-2); line-height: 1.68; }
.accueil .qr-panel .col p.first { font-size: 19.5px; color: var(--vl-encre); font-weight: 500; line-height: 1.6; }
.qr-panel em { font-style: italic; color: var(--vl-violet); }

/* --- tarifs --- */
.price-head { align-items: start; }
.price-head .head { grid-column: 1 / 6; }
.bascule { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 34px; padding: 6px; border-radius: 999px; }
.bascule button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 700 16px var(--vl-texte); color: var(--vl-violet-fonce); padding: 14px 28px; border-radius: 999px; transition: color 0.5s var(--vl-courbe); }
.bascule .knob {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: radial-gradient(130% 100% at 30% 15%, #F7FCE4, #D2E88C 55%, #A8C64E);
  box-shadow: inset 0 -4px 8px rgba(60, 80, 10, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.7), 0 10px 20px -8px rgba(94, 122, 28, 0.55);
  transition: transform 0.8s var(--vl-courbe);
}
.tarifs[data-mode="rev"] .bascule .knob { transform: translateX(100%); }
.incl { grid-column: 7 / 13; padding: 34px 38px 36px; }
.accueil .incl p { margin: 12px 0 0; font-size: 17px; color: var(--vl-texte-2); line-height: 1.6; }
.accueil .incl p.covers, .accueil .rev-fallback p.covers { margin-top: 16px; font-size: 18px; color: var(--vl-encre); font-weight: 500; line-height: 1.58; }
.incl .in { animation: vl-entre 0.8s var(--vl-courbe); }
@keyframes vl-entre { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.tiers { list-style: none; margin: 90px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: end; }
.tier { display: flex; flex-direction: column; padding: 0 0 30px; overflow: hidden; transition: transform 0.7s var(--vl-courbe), box-shadow 0.7s var(--vl-courbe), opacity 0.9s var(--vl-courbe); }
.tier:nth-child(1) { min-height: 300px; }
.tier:nth-child(2) { min-height: 345px; }
.tier:nth-child(3) { min-height: 405px; }
.tier:nth-child(4) { min-height: 450px; }
.tier:hover { transform: translateY(-10px); }
.band-box { background: linear-gradient(180deg, rgba(237, 227, 246, 0.9), rgba(237, 227, 246, 0.2)); border-bottom: 1px solid rgba(91, 58, 131, 0.12); padding: 2px 0; }
.vband {
  height: calc(var(--n) * 15px + 12px);
  background: radial-gradient(150px 80px at var(--vl-sx) 50%, #3A1B5E 0%, #6E4FA3 30%, transparent 75%), linear-gradient(90deg, #A98BE6, #A9C94A);
  -webkit-mask: var(--vl-v) 6px 6px / 26px 15px repeat;
  mask: var(--vl-v) 6px 6px / 26px 15px repeat;
  animation: vl-balaye 7s linear infinite;
}
@keyframes vl-balaye { from { --vl-sx: -10%; } to { --vl-sx: 110%; } }
.tier-body { padding: 24px 28px 0; display: flex; flex-direction: column; flex: 1; }
.lvl { display: flex; gap: 6px; margin-bottom: 16px; }
.lvl i { width: 12px; height: 12px; border-radius: 50%; background: rgba(91, 58, 131, 0.18); }
.lvl i.f { background: radial-gradient(circle at 34% 30%, #fff 0 14%, #D2E88C 50%, #86A43A); }
.tier .name { margin: 0; font-size: 22px; }
.accueil .tier .price { margin: auto 0 0; padding-top: 26px; font-family: var(--vl-titre); font-variation-settings: "opsz" 96; font-weight: 700; font-size: clamp(46px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.03em; color: var(--vl-violet); transition: filter 0.5s var(--vl-courbe), transform 0.7s var(--vl-courbe); white-space: nowrap; }
.tier .price.blur { filter: blur(8px); transform: scale(0.9) translateY(6px); }
.accueil .tier .range { margin: 10px 0 0; color: var(--vl-texte-2); }
.tier.feat { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 246, 210, 0.72)); box-shadow: 0 46px 90px -34px rgba(90, 58, 131, 0.45); }
.tier.feat .vband { background: radial-gradient(150px 80px at var(--vl-sx) 50%, #F4FADF 0%, #E3F1B4 35%, transparent 75%), linear-gradient(90deg, #86A43A, #5E7A1C); }
.tier.feat .band-box { background: linear-gradient(180deg, rgba(226, 240, 178, 0.85), rgba(226, 240, 178, 0.15)); }
.accueil .tier.feat .price { color: var(--vl-violet-fonce); }
.iris { border-color: transparent; }
.iris::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from var(--vl-ang), #B99BDA, #D2E88C, #8D63C2, #E6F3B5, #CBB6E0, #A9C94A, #B99BDA);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vl-iris 9s linear infinite;
}
@keyframes vl-iris { to { --vl-ang: 360deg; } }
.fil:not(.static) .tier.rv { opacity: 0; transform: translateY(60px); }
.fil .tier.rv.in { opacity: 1; transform: none; }
.fil .tier.rv.in:hover { transform: translateY(-10px); }
.tiers .tier:nth-child(2) { transition-delay: 0.12s; }
.tiers .tier:nth-child(3) { transition-delay: 0.24s; }
.tiers .tier:nth-child(4) { transition-delay: 0.36s; }
.tiers.done .tier { transition-delay: 0s; }
.notes { max-width: 760px; margin: 56px auto 0; text-align: center; color: var(--vl-texte-2); }
.accueil .notes p { margin: 0 0 12px; }
.accueil .notes .dep { color: var(--vl-encre); font-weight: 600; }
.notes a, .about .small a, .faq-list p a { color: var(--vl-violet-clair); font-weight: 700; text-decoration-color: var(--vl-anis-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.order { text-align: center; margin-top: 34px; }
.rev-fallback { margin-top: 70px; padding: 36px 40px; }
.rev-fallback h3 { margin: 0; font-size: 30px; }
.rev-fallback .vl-etiquette { margin-top: 14px; }
.accueil .rev-fallback p { margin: 14px 0 0; }
.rev-fallback ul { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rev-fallback li { display: flex; flex-direction: column; color: var(--vl-texte-2); font-size: 15px; }
.rev-fallback li b { font-family: var(--vl-titre); font-size: 34px; line-height: 1.1; color: var(--vl-violet); }
.fil .rev-fallback { display: none; }

/* --- à propos : verre posé sur photo --- */
.about { align-items: start; }
.about .head { grid-column: 1 / 13; }
.accueil .about .big { grid-row: 2; grid-column: 1 / 7; margin: 70px 0 0; font-family: var(--vl-titre); font-variation-settings: "opsz" 72; font-weight: 600; font-size: clamp(26px, 2.45vw, 36px); line-height: 1.2; letter-spacing: -0.02em; color: var(--vl-violet); }
.about .big span { color: var(--vl-violet-clair); }
.accueil .about .small { grid-row: 3; grid-column: 1 / 7; margin: 40px 0 0; color: var(--vl-texte-2); font-size: 17px; }
.ph-about { grid-column: 8 / 13; grid-row: 2 / 4; height: 470px; margin-top: 50px; border-radius: 50%; }
.ph-about img { object-position: 50% 40%; filter: hue-rotate(-38deg) saturate(0.75); }
.about .side { grid-row: 2 / 4; grid-column: 9 / 13; align-self: end; position: relative; z-index: 1; margin-bottom: -70px; padding: 36px 38px; background: rgba(255, 255, 255, 0.72); }
.about .side p { color: var(--vl-texte-2); }

/* --- questions fréquentes --- */
.faq-grid .head { grid-column: 1 / 13; }
.faq-list { grid-column: 3 / 12; margin-top: 60px; display: grid; gap: 14px; }
.faq-list details { border-radius: 30px; transition: background-color 0.5s var(--vl-courbe); }
.faq-list details[open] { background: rgba(255, 255, 255, 0.74); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px 22px 30px; font: 700 19.5px/1.3 var(--vl-titre); color: var(--vl-violet); border-radius: 30px; }
.faq-list summary::-webkit-details-marker { display: none; }
.pm { flex: none; width: 42px; height: 42px; border-radius: 50%; position: relative; background: radial-gradient(circle at 34% 30%, #fff 0 10%, #D8C5EC 45%, #9C7EC2 100%); box-shadow: inset -3px -4px 6px rgba(30, 8, 50, 0.2), 0 6px 12px -6px rgba(58, 27, 94, 0.5); transition: transform 0.7s var(--vl-courbe), background 0.5s; }
details[open] .pm { transform: rotate(180deg); background: radial-gradient(circle at 34% 30%, #fff 0 10%, #E3F1B4 45%, #9DB94A 100%); }
summary:active .pm { transform: scale(0.9); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; background: var(--vl-violet-fonce); border-radius: 2px; }
.pm::after { transform: rotate(90deg); transition: transform 0.6s var(--vl-courbe); }
details[open] .pm::after { transform: rotate(0); }
.accueil .faq-list details p { margin: 0; padding: 0 30px 26px; color: var(--vl-texte-2); }
.faq-list code { font: 600 0.88em/1 ui-monospace, Menlo, Consolas, monospace; background: var(--vl-anis-pale); color: var(--vl-violet-fonce); padding: 2px 6px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] > p { animation: vl-deplie 0.5s var(--vl-courbe) both; }
  @keyframes vl-deplie { from { opacity: 0; transform: translateY(-6px); } }
  @supports (interpolate-size: allow-keywords) {
    .accueil { interpolate-size: allow-keywords; }
    .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--vl-courbe), content-visibility 0.5s allow-discrete; }
    .faq-list details[open]::details-content { block-size: auto; }
  }
}

/* --- appel final --- */
.final { padding: 220px 0 120px; }
.final-panel { position: relative; margin: 0 auto; width: min(980px, 100%); padding: 76px 60px 70px; border-radius: 52px; text-align: center; display: grid; justify-items: center; gap: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)); }
.accueil .final-panel .big { margin: 0; font-family: var(--vl-titre); font-variation-settings: "opsz" 96; font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--vl-violet); max-width: 20ch; }
.final-panel .big em { font-style: normal; color: var(--vl-violet-clair); }
#final-btn { margin-top: 16px; }
.final-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-panel li { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 11px; border-radius: 999px; font-weight: 600; font-size: 15.5px; color: var(--vl-violet-fonce); background: rgba(255, 255, 255, 0.78); box-shadow: 0 8px 20px -14px rgba(91, 58, 131, 0.4); }
.accueil .site-pied { margin-top: 0; }

/* --- apparitions --- */
.fil:not(.static) .rv-up { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--vl-courbe), transform 1.1s var(--vl-courbe); }
.fil .rv-up.in { opacity: 1; transform: none; }

/* --- tablette --- */
@media (max-width: 1100px) {
  .tiers { gap: 16px; }
  .tier-body { padding: 22px 20px 0; }
  .qr-panel { padding: 50px 44px 54px; column-gap: 36px; }
  .pastilles { left: -90px; }
}

/* --- mobile : le fil se range dans un couloir à gauche --- */
@media (max-width: 820px) {
  body.accueil { font-size: 17px; }
  .accueil .wrap { width: auto; max-width: none; margin: 0 16px 0 52px; }
  .accueil .grid { display: block; }
  .accueil section.band { padding-top: 120px; }
  .accueil .hero { padding-top: 24px; }
  .accueil h1 { font-size: clamp(33px, 9.4vw, 44px); line-height: 1.07; margin-top: 12px; }
  .hero-low { margin-top: 42px; }
  .accueil .hero p.chapo { font-size: 17px; }
  .cta-row { margin-top: 24px; }
  .accueil .bouton--grand { --h: 54px; padding: 0 24px; font-size: 16px; }
  .hero-art { height: 400px; min-height: 0; margin: 44px -6px 0 18%; }
  .anneau .t1 { filter: blur(18px); }
  .pastilles { left: -22%; bottom: -18px; }
  .pastilles li { font-size: 14.5px; padding: 10px 14px 10px 10px; }
  .pastilles li:nth-child(n) { margin-left: 0; }
  .ph-svc { height: 250px; margin-top: 30px; border-radius: 140px 140px 32px 32px; }
  .accueil .svc-lede { margin-top: 24px; font-size: 20px; }
  .svc-panel { margin-top: 30px; padding: 26px 20px; }
  .svc-panel p { font-size: 17px; }
  .atouts li { font-size: 16.5px; padding: 12px 14px 12px 12px; }
  .atouts li:nth-child(n) { margin-left: 0; }
  .svc-trust { margin-top: 30px; padding: 26px 22px; }
  .svc-trust p { font-size: 18px; }
  .svc-rev { margin-top: 16px; padding: 26px 22px; }
  .svc .echo { margin-top: 48px; padding-left: 50px; }
  .svc .echo::before { font-size: 88px; left: -4px; }
  .svc .echo p { font-size: 25px; }
  .abrev { margin-top: 30px; gap: 10px; }
  .abrev li { font-size: 15px; padding: 9px 14px 9px 9px; }
  .track { display: block; margin-top: 44px; }
  .step, .step:nth-of-type(n) { margin: 0 0 24px; max-width: none; padding: 26px 22px; }
  .step .num, .step:nth-of-type(even) .num { left: -50px; right: auto; top: 22px; width: 40px; height: 40px; font-size: 16px; box-shadow: inset -4px -5px 8px rgba(20, 4, 40, 0.3), inset 3px 4px 6px rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(247, 242, 252, 0.95); }
  .step::after, .step:nth-of-type(even)::after { display: none; }
  .fil:not(.static) .step, .fil:not(.static) .step:nth-of-type(even) { transform: translateX(40px); }
  .step h3 { font-size: 22px; }
  .step p { font-size: 17px; }
  .qr-panel { display: block; padding: 32px 22px 34px; border-radius: 30px; }
  .accueil .qr-panel .col p { font-size: 17px; margin-top: 20px; }
  .accueil .qr-panel .col p.first { font-size: 18px; }
  .bascule { margin-top: 26px; width: 100%; }
  .bascule button { padding: 12px 10px; }
  .incl { margin-top: 26px; padding: 26px 22px; }
  .tiers { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .tier:nth-child(n) { min-height: 0; }
  .tier-body { padding: 20px 22px 0; }
  .accueil .tier .price { font-size: 50px; padding-top: 18px; }
  .notes { margin-top: 36px; }
  .rev-fallback { padding: 26px 22px; }
  .rev-fallback ul { grid-template-columns: repeat(2, 1fr); }
  .accueil .about .big { margin-top: 30px; font-size: 24px; }
  .accueil .about .small { margin-top: 24px; }
  .ph-about { height: 300px; margin-top: 34px; border-radius: 999px; }
  .about .side { margin: -60px 10px 0; padding: 26px 22px; }
  .faq-list { margin-top: 36px; }
  .faq-list summary { padding: 18px 16px 18px 20px; font-size: 17.5px; }
  .pm { width: 36px; height: 36px; }
  .accueil .faq-list details p { padding: 0 20px 22px; }
  .final { padding: 130px 0 90px; }
  .final-panel { padding: 44px 22px 40px; border-radius: 34px; }
  .fond .zone i { animation: none; }
}

/* =============================================================================
   3. PAGES INTÉRIEURES ET ESPACE CLIENT (body:not(.accueil))
   Pages de tâche (commander, payer, suivre) : la tâche avant l'effet. Même
   grammaire que l'accueil (fond à taches, verre, relief), sans fil de laine ;
   un seul rappel : le petit brin ondulé sous le titre de page.
   Aucune classe, id ni data-attribut n'est renommé : on repeint ce que
   génèrent les pages et public/app.js (.etapes, .jeton, .avis, .extrait*,
   .carte-prix, .onglets*, .visionneuse*, .liste-patrons, tableaux…).
   ========================================================================== */

/* --- ossature --------------------------------------------------------------- */
body:not(.accueil) { font-size: 17px; line-height: 1.62; }
body:not(.accueil) .enveloppe { max-width: 74rem; padding: 0 clamp(16px, 4vw, 40px); }
body:not(.accueil) .bloc { padding: clamp(2.2rem, 1.5rem + 3vw, 4rem) 0; }
body:not(.accueil) > main.bloc,
body:not(.accueil) > header.bloc { padding-top: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
body:not(.accueil) .hero { padding: clamp(2.6rem, 1.6rem + 4vw, 5rem) 0 clamp(1rem, 0.6rem + 1.5vw, 2rem); }
body:not(.accueil) .hero + .bloc { padding-top: clamp(1rem, 0.6rem + 1.5vw, 2rem); }

body:not(.accueil) h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 96;
  overflow-wrap: break-word;
}
/* Le seul rappel du fil : un brin ondulé violet > corail sous le titre de page. */
body:not(.accueil) h1::after {
  content: "";
  display: block;
  width: 116px;
  height: 14px;
  margin-top: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 14'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%235B3A83'/%3E%3Cstop offset='.6' stop-color='%23A98BE6'/%3E%3Cstop offset='1' stop-color='%23FF8A6A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 7c9-7 18-7 27 0s18 7 27 0 18-7 27 0 18 7 27 0' fill='none' stroke='url(%23g)' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
body:not(.accueil) h1 .champ-aide { display: block; margin-top: 0.6rem; font: 500 1rem/1.4 var(--vl-texte); letter-spacing: 0; color: var(--vl-texte-2); }
body:not(.accueil) h2 { margin: 2.2rem 0 0.9rem; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem); line-height: 1.12; }
body:not(.accueil) h3 { margin: 1.6rem 0 0.55rem; font-size: 1.25rem; color: var(--vl-violet); }
body:not(.accueil) .hero p.chapo { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; max-width: 38em; }
.champ-aide { font-size: 0.92rem; line-height: 1.55; color: var(--vl-texte-2); }
body:not(.accueil) code {
  font: 600 0.86em/1 ui-monospace, Menlo, Consolas, monospace;
  padding: 0.18em 0.45em;
  border-radius: 7px;
  background: var(--vl-lilas-pale);
  color: var(--vl-violet-fonce);
}

/* Pages de tâche : une colonne centrée, lisible, comme un guichet. */
body:not(.accueil) .enveloppe:has(> #form-commande),
body:not(.accueil) .enveloppe:has(> #form-contact),
body:not(.accueil) .enveloppe:has(> form[data-demande]),
body:not(.accueil) .enveloppe:has(> [data-devis-cliente]),
body:not(.accueil) .enveloppe:has(> #recap),
body:not(.accueil) .enveloppe:has(> section[data-rowtine]) { max-width: 52rem; }

/* contact : le titre de page s'aligne sur le formulaire, juste au-dessus */
body:not(.accueil):has(#form-contact) .hero .enveloppe { max-width: 52rem; }
body:not(.accueil):has(#form-contact) .hero + .bloc { padding-top: 0; }
#form-contact { margin-top: 0.4rem; }

/* Le panneau de verre qui porte la tâche. */
#form-commande, #form-contact, form[data-demande], [data-devis-cliente], #form-rowtine, [data-zone],
body:not(.accueil) .comparatif-cadre {
  position: relative;
  margin-top: 1.8rem;
  padding: clamp(22px, 1rem + 2.6vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--vl-ombre);
}
#form-rowtine:not([hidden]) { display: block; }
[data-zone] > :first-child, #form-commande > :first-child, #form-contact > :first-child,
form[data-demande] > :first-child, [data-devis-cliente] > :first-child, #form-rowtine > :first-child { margin-top: 0; }
[data-zone] > :last-child, [data-devis-cliente] > :last-child { margin-bottom: 0; }
/* le message d'attente avant rendu : discret, sans gros panneau vide */
[data-zone]:has(> .champ-aide:only-child), [data-devis-cliente]:has(> .champ-aide:only-child) { padding-block: 20px; }

/* Chapô des formulaires (texte d'aide placé avant le formulaire). */
body:not(.accueil) .enveloppe > h1 + .champ-aide,
body:not(.accueil) .enveloppe > section > h1 + p,
body:not(.accueil) .enveloppe > section > h1 + p + .champ-aide { font-size: 1.04rem; color: var(--vl-texte-2); max-width: 44em; }
body:not(.accueil) .enveloppe > section > h1 + p { color: var(--vl-encre); }

/* --- champs de formulaire ------------------------------------------------------ */
body:not(.accueil) label { display: block; margin: 1.35rem 0 0.45rem; font: 600 0.98rem/1.35 var(--vl-texte); color: var(--vl-violet-fonce); }
body:not(.accueil) input[type='text'], body:not(.accueil) input[type='email'], body:not(.accueil) input[type='password'],
body:not(.accueil) input[type='tel'], body:not(.accueil) input[type='number'], body:not(.accueil) input[type='date'],
body:not(.accueil) input[type='url'], body:not(.accueil) select, body:not(.accueil) textarea,
body:not(.accueil) input.champ, body:not(.accueil) select.champ, body:not(.accueil) textarea.champ {
  width: 100%;
  max-width: none;
  min-height: 52px;
  padding: 0.75rem 1.05rem;
  border: 1.5px solid rgba(91, 58, 131, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vl-encre);
  font: 400 1.02rem/1.4 var(--vl-texte);
  box-shadow: inset 0 2px 5px rgba(58, 27, 94, 0.06);
}
body:not(.accueil) textarea, body:not(.accueil) textarea.champ { min-height: 8.5rem; max-width: none; line-height: 1.55; resize: vertical; }
body:not(.accueil) select, body:not(.accueil) select.champ {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%235B3A83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.1rem center / 14px 9px;
}
body:not(.accueil) input::placeholder, body:not(.accueil) textarea::placeholder { color: #7A6E86; opacity: 1; }
body:not(.accueil) input:focus-visible, body:not(.accueil) select:focus-visible, body:not(.accueil) textarea:focus-visible {
  outline: none;
  border-color: var(--vl-violet-clair);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(91, 58, 131, 0.2), inset 0 2px 5px rgba(58, 27, 94, 0.04);
}
/* erreur de saisie, seulement après interaction (pas de rouge sur un champ vierge) */
body:not(.accueil) input:user-invalid, body:not(.accueil) select:user-invalid, body:not(.accueil) textarea:user-invalid {
  border-color: var(--vl-corail-texte);
  background-color: #FFF6F3;
}
body:not(.accueil) input:disabled, body:not(.accueil) select:disabled, body:not(.accueil) textarea:disabled {
  cursor: not-allowed;
  border-style: dashed;
  background-color: rgba(245, 239, 250, 0.8);
  box-shadow: none;
}
/* cases à cocher : carrés doux, coche blanche sur violet */
body:not(.accueil) input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0.05rem 0 0 !important;
  border: 1.5px solid rgba(91, 58, 131, 0.4);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(58, 27, 94, 0.08);
  cursor: pointer;
  transition: background-color 0.25s var(--vl-courbe), border-color 0.25s;
}
body:not(.accueil) input[type='checkbox']:checked {
  border-color: var(--vl-violet);
  background: var(--vl-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5l3.7 3.5L12.5 2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 11px;
}
body:not(.accueil) input[type='checkbox']:disabled { opacity: 0.45; cursor: not-allowed; }
body:not(.accueil) input[type='checkbox']:focus-visible { outline: 3px solid var(--vl-violet); outline-offset: 2px; }
/* libellé d'une case : la ligne entière est cliquable, posée sur un léger verre */
body:not(.accueil) label:has(> input[type='checkbox']) {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem !important;
  margin-top: 1.5rem;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  font-weight: 500 !important;
  line-height: 1.5;
  color: var(--vl-encre);
  cursor: pointer;
}
body:not(.accueil) label:has(> input[type='checkbox']:checked) { background: rgba(237, 227, 246, 0.75); border-color: rgba(91, 58, 131, 0.25); }
body:not(.accueil) label:has(> input[type='checkbox']) + .champ-aide { margin: 0.55rem 0 0 16px; }
.champ-aide { margin: 0.45rem 0 0; }

/* fichier : sans JS, le champ natif garde un vrai bouton en relief */
body:not(.accueil) input[type='file'] { width: 100%; font: 500 0.95rem var(--vl-texte); color: var(--vl-texte-2); }
body:not(.accueil) input[type='file']::file-selector-button {
  margin-right: 14px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--vl-violet-fonce);
  font: 700 0.95rem var(--vl-texte);
  cursor: pointer;
  box-shadow: inset 0 -4px 8px rgba(58, 27, 94, 0.12), 0 8px 18px -10px rgba(58, 27, 94, 0.5), 0 2px 0 rgba(58, 27, 94, 0.16);
}
/* champ natif piloté par le bouton « Choisir un fichier » : reste masqué */
body input.champ.champ-fichier--masque { position: absolute; width: 1px !important; height: 1px; min-height: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }
/* un champ fichier porteur de .champ (ligne .rowtine) : pas de boîte autour du bouton */
body:not(.accueil) input[type='file'].champ { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* dépôt (avec JS) : une zone pointillée, le bouton et le nom du fichier choisi */
body:not(.accueil) .depot {
  display: flex;
  align-items: center;
  gap: 0.9rem 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 20px;
  border: 2px dashed rgba(91, 58, 131, 0.3);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(237, 227, 246, 0.7), rgba(255, 255, 255, 0.55));
}
body:not(.accueil) .depot .bouton { --h: 46px; padding: 0 22px; font-size: 15px; }
body:not(.accueil) .depot span { min-width: 0; overflow-wrap: anywhere; font-weight: 500; color: var(--vl-texte-2); }
.depot + .champ-aide, input[type='file'] + .depot + .champ-aide { margin-top: 0.6rem; }

/* tarif mesuré après dépôt : le montant qu'on s'apprête à engager */
body:not(.accueil) .tarif-mesure {
  margin: 1rem 0 0;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(237, 227, 246, 0.7));
  box-shadow: var(--vl-ombre-legere);
  color: var(--vl-violet-fonce);
  font-size: 0.98rem;
}
body:not(.accueil) .tarif-mesure__prix { font: 700 2.6rem/1.05 var(--vl-titre); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--vl-violet); }

/* consignes de préparation : liste à pastilles violettes */
body:not(.accueil) .prep-patron {
  max-width: none;
  margin: 1.8rem 0 0.4rem;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(237, 227, 246, 0.6));
}
body:not(.accueil) .prep-patron h3 { margin: 0 0 0.8rem; font-size: 1.15rem; }
body:not(.accueil) .prep-patron ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
body:not(.accueil) .prep-patron li { position: relative; margin: 0; padding-left: 1.6rem; font-size: 0.97rem; color: var(--vl-encre); }
body:not(.accueil) .prep-patron li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FBF6FF, #BFA3DE 55%, #6E4FA3);
}

/* boutons posés dans un paragraphe : rangée qui passe à la ligne proprement */
body:not(.accueil) p:has(> .bouton) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
body:not(.accueil) p:has(> .bouton) > .champ-aide { margin: 0; }
body:not(.accueil) .bouton[disabled], body:not(.accueil) .bouton:disabled {
  opacity: 0.55;
  filter: saturate(0.4);
  box-shadow: inset 0 2px 6px rgba(58, 27, 94, 0.12);
}
#form-commande > p:has(> #f-bouton-principal), #form-contact > p:has(> #f-bouton),
form[data-demande] > p:has(> .bouton), #form-rowtine > p:has(> #rowtine-payer) { margin-top: 2rem !important; }

/* --- sélecteurs à onglets ------------------------------------------------------- */
/* #selecteur-service (Traduction | Révision), onglets de la fiche patron et onglets de
   l'espace client : une pilule de verre, l'onglet actif en bulle violette en relief. */
.onglets, body:not(.accueil) .onglets-espace {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  margin: 0 0 1.6rem;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: rgba(237, 227, 246, 0.72);
  box-shadow: inset 0 2px 6px rgba(58, 27, 94, 0.1), 0 10px 26px -18px rgba(58, 27, 94, 0.4);
}
.onglets button, .onglets-espace a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--vl-violet-fonce);
  font: 650 15.5px/1.1 var(--vl-texte);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--vl-courbe), color 0.35s var(--vl-courbe), transform 0.22s var(--vl-rebond);
}
.onglets button:hover, .onglets-espace a:hover { background: rgba(255, 255, 255, 0.7); color: var(--vl-violet-fonce); }
.onglets button[aria-selected='true'], .onglets-espace a[aria-current='page'],
.onglets button[aria-selected='true']:hover, .onglets-espace a[aria-current='page']:hover {
  color: #fff;
  font-weight: 700;
  background: radial-gradient(120% 90% at 30% 15%, #B99BDA 0%, #6E4FA3 42%, #3A1B5E 100%);
  box-shadow: inset 0 -4px 9px rgba(20, 4, 40, 0.35), inset 0 3px 6px rgba(255, 255, 255, 0.28), 0 8px 18px -10px rgba(58, 27, 94, 0.6);
}
.onglets button:active, .onglets-espace a:active { transform: scale(0.97); }
.onglets button:focus-visible, .onglets-espace a:focus-visible { outline: 3px solid var(--vl-violet); outline-offset: 2px; border-radius: 999px; }
/* le choix du service ouvre le bon de commande : pleine largeur, deux moitiés égales */
#selecteur-service { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 1.4rem; }
#selecteur-service [role='tab'] { min-height: 52px; font-size: 1.05rem; }

/* --- avis (messages) ----------------------------------------------------------- */
/* Verre légèrement teinté lilas et petite pastille en tête : aucun filet latéral. */
.avis {
  position: relative;
  margin: 1rem 0;
  padding: 15px 20px 15px 50px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(237, 227, 246, 0.86), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--vl-ombre-legere);
  color: var(--vl-encre);
  font-size: 0.98rem;
  line-height: 1.55;
}
.avis::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FBF6FF, #BFA3DE 55%, #6E4FA3);
  box-shadow: inset -2px -2px 4px rgba(30, 8, 50, 0.22), 0 3px 7px -2px rgba(58, 27, 94, 0.45);
}
.avis > :first-child { margin-top: 0; }
.avis > :last-child { margin-bottom: 0; }
.avis h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.avis p { margin: 0 0 0.6rem; }
/* récapitulatif avant validation de la commande : il porte la décision, il ressort */
#etape-recap.avis {
  margin-top: 1.8rem;
  padding: 24px 26px 24px 26px;
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(237, 227, 246, 0.8));
}
#etape-recap.avis::before { display: none; }
#etape-recap #f-recap-texte { font: 600 1.15rem/1.45 var(--vl-titre); color: var(--vl-violet); }

/* --- devis (page publique) ------------------------------------------------------ */
[data-devis-cliente] > p { margin: 0 0 0.9rem; }

/* --- espace client : en-tête --------------------------------------------------- */
body:not(.accueil) .entete-espace { align-items: center; gap: 14px 18px; margin-bottom: 1.6rem; }
body:not(.accueil) .entete-espace h1 { margin: 0 auto 0 0; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem); }
body:not(.accueil) .entete-espace [data-actions-titre] p { margin: 0; }
body:not(.accueil) .entete-espace [data-actions-titre]:empty { display: none; }
body:not(.accueil) .entete-espace [data-connexion] {
  flex-basis: 100%;
  order: 3;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
}
body:not(.accueil) .entete-espace [data-connexion]:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px 12px; }
body:not(.accueil) .entete-espace [data-connexion] .bouton { --h: 38px; padding: 0 16px; font-size: 14px; }
body:not(.accueil) .entete-espace [data-connexion-echouee] { flex-basis: 100%; order: 3; margin: 0; }
body:not(.accueil) .onglets-espace { margin-bottom: 0; }
body:not(.accueil) .onglets-espace + [data-zone] { margin-top: 1.4rem; }

/* contenu de l'espace (liste, fiche commande, coordonnées, dépôt) */
[data-zone] > p, [data-zone] > form > p { margin: 0 0 0.6rem; }
[data-zone] h2 { margin: 2.2rem 0 1rem !important; font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); }
[data-zone] > h2:first-child, [data-zone] > section:first-child > h2:first-child { margin-top: 0 !important; }
[data-zone] > h3 { margin: 1.8rem 0 0.7rem; padding-top: 1.4rem; border-top: 1px solid rgba(91, 58, 131, 0.14); }
[data-zone] > .etapes + p > strong:only-child,
[data-zone] > p:first-child > strong:only-child { font: 700 1.4rem/1.25 var(--vl-titre); font-variation-settings: "opsz" 48; color: var(--vl-violet); }
/* formulaires de l'espace (coordonnées, dépôt) : champs à mesure lisible */
body:not(.accueil) [data-zone] form .champ:not([type='file']) { max-width: 36rem; }
[data-zone] ul { padding-left: 1.2rem; }
[data-zone] li { margin: 0.3rem 0; }
[data-zone] li::marker { color: var(--vl-violet-clair); }

/* --- étapes : jalons reliés par un fil -------------------------------------------- */
.etapes { display: flex; flex-wrap: nowrap; gap: 0; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.etapes li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 36px 4px 0;
  border: 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--vl-texte-2);
  overflow-wrap: break-word;
  hyphens: auto;
}
/* le fil entre deux jalons (du centre de celui-ci au centre du suivant) */
.etapes li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(91, 58, 131, 0.16);
}
.etapes li:last-child::after { display: none; }
.etapes li.faite::after { background: linear-gradient(90deg, #6E4FA3, #8D6BC0); }
/* la pastille du jalon */
.etapes li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(91, 58, 131, 0.25);
  box-sizing: border-box;
}
.etapes li.faite { color: var(--vl-violet-fonce); }
.etapes li.faite::before {
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5l3.7 3.5L12.5 2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 9px,
    radial-gradient(circle at 35% 30%, #C9A6EE, #7A4EAE 55%, #3A1B5E);
  box-shadow: inset -2px -3px 5px rgba(20, 4, 40, 0.3), 0 4px 10px -3px rgba(58, 27, 94, 0.5);
}
.etapes li.en-cours { color: var(--vl-violet); font-weight: 700; }
.etapes li.en-cours::before {
  top: -1px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: 0;
  background: radial-gradient(circle at 35% 30%, #FFE3D9 0%, #FF8A6A 45%, #E9481F 100%);
  box-shadow: inset -2px -3px 6px rgba(150, 30, 0, 0.3), 0 0 0 5px rgba(255, 138, 106, 0.2), 0 6px 14px -4px rgba(201, 66, 31, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .etapes li.en-cours::before { animation: vl-jalon 2.6s var(--vl-courbe) infinite; }
  @keyframes vl-jalon { 50% { box-shadow: inset -2px -3px 6px rgba(150, 30, 0, 0.3), 0 0 0 9px rgba(255, 138, 106, 0.08), 0 6px 14px -4px rgba(201, 66, 31, 0.5); } }
}

/* --- jetons d'état -------------------------------------------------------------- */
.jeton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--vl-lilas-pale);
  color: var(--vl-violet-fonce);
  font: 650 0.82rem/1.2 var(--vl-texte);
  white-space: normal;
}
.jeton::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vl-violet-clair); }
.jeton--pret { background: var(--vl-violet); color: #fff; }
.jeton--pret::before { background: var(--vl-anis); }
.jeton--erreur { background: #FFE9E1; color: #8E2A10; }
.jeton--erreur::before { background: var(--vl-corail); }

/* --- listes (commandes, patrons, devis en attente) ---------------------------------- */
.liste-patrons { display: grid; gap: 10px; border: 0; }
.liste-patrons .ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 24px -20px rgba(58, 27, 94, 0.55);
  transition: background-color 0.3s var(--vl-courbe), transform 0.4s var(--vl-courbe);
}
.liste-patrons .ligne > :first-child { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.liste-patrons .ligne > .champ-aide { margin: 0; }
.liste-patrons .ligne a { color: var(--vl-violet); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(91, 58, 131, 0.3); }
.liste-patrons .ligne a:hover { text-decoration-color: currentColor; }
.liste-patrons .ligne:has(> a):hover { background: #fff; }
.liste-patrons .ligne .bouton { --h: 42px; padding: 0 18px; font-size: 14.5px; }
.liste-patrons .ligne > span:last-child:has(.bouton) { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- coordonnées bancaires --------------------------------------------------- */
.coordonnees-bancaires {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.4rem 0 1rem;
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--vl-ombre-legere);
}
.coordonnees-bancaires th, .coordonnees-bancaires td { padding: 0.55rem 1rem; vertical-align: baseline; }
.coordonnees-bancaires tr + tr > * { border-top: 1px solid rgba(91, 58, 131, 0.1); }
.coordonnees-bancaires th { font: 600 0.88rem/1.4 var(--vl-texte); color: var(--vl-texte-2); }
.coordonnees-bancaires td { font-weight: 500; overflow-wrap: anywhere; }
body .coordonnees-bancaires code { padding: 0; background: none; font: 600 1rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--vl-violet-fonce); }

/* --- carte prix (outil automatique) ------------------------------------------ */
.carte-prix { max-width: 32rem; margin: 0 0 1.4rem; padding: 26px 30px; border-left: 1px solid rgba(255, 255, 255, 0.95); background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(237, 227, 246, 0.6)); }
.carte-prix__resume { font: 500 1.05rem/1.4 var(--vl-texte); color: var(--vl-violet-fonce); }
.carte-prix__montant { margin: 0.3rem 0 0.7rem; font: 700 3rem/1 var(--vl-titre); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--vl-violet); }
.carte-prix__actions { gap: 12px; margin: 1.1rem 0 0.8rem; }

/* --- extrait bilingue et vue Texte ------------------------------------------- */
.extrait {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--vl-ombre-legere);
}
.extrait__cols { border-bottom: 1px solid rgba(91, 58, 131, 0.12); }
.extrait__col { padding: 0.85rem 1.2rem; font: 700 0.74rem/1 var(--vl-texte); letter-spacing: 0.14em; }
.extrait__col--en { background: rgba(237, 227, 246, 0.7); color: var(--vl-violet-clair); border-right: 1px solid rgba(91, 58, 131, 0.12); }
.extrait__col--fr { background: transparent; color: var(--vl-violet-fonce); }
.extrait__seg + .extrait__seg { border-top: 1px solid rgba(91, 58, 131, 0.1); }
.extrait__titre { padding: 0.9rem 1.2rem 0.4rem; border-bottom: 0; font: 700 1.05rem/1.3 var(--vl-titre); color: var(--vl-violet); background: rgba(237, 227, 246, 0.35); }
.extrait__en { padding: 0.9rem 1.2rem; background: rgba(245, 239, 250, 0.75); border-right: 1px solid rgba(91, 58, 131, 0.12); color: var(--vl-texte-2); }
.extrait__fr { padding: 0.9rem 1.2rem; background: transparent; color: var(--vl-encre); }
.extrait__suite { padding: 1.5rem 1.4rem; border-top: 1px solid rgba(91, 58, 131, 0.12); background: linear-gradient(135deg, rgba(237, 227, 246, 0.85), rgba(255, 233, 225, 0.55)); }
.extrait__suite p { margin: 0 0 1rem; color: var(--vl-violet-fonce); font-weight: 500; }
form[data-paiement] { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 1rem 0; }
body:not(.accueil) form[data-paiement] .champ { flex: 1 1 16rem; width: auto; }
@media (max-width: 640px) {
  .extrait__en { border-right: 0; border-bottom: 1px solid rgba(91, 58, 131, 0.1); }
  .extrait__en::before, .extrait__fr::before { font: 700 0.7rem/1 var(--vl-texte); letter-spacing: 0.14em; margin-bottom: 0.45rem; }
  .extrait__en::before { color: var(--vl-violet-clair); }
  .extrait__fr::before { color: var(--vl-violet-fonce); }
}
.rubrique-section { margin: 1.6rem 0 0.6rem; font: 700 0.8rem/1.2 var(--vl-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vl-violet-clair); }
.extrait > .rubrique-section { margin: 0; padding: 0.9rem 1.2rem 0.5rem; border-top: 1px solid rgba(91, 58, 131, 0.12); }
.segment, .segment:first-child { border: 0; }
.extrait .segment + .segment { border-top: 1px solid rgba(91, 58, 131, 0.08); }
.segment > div { padding: 0.8rem 1.2rem; }
.segment .s-en { background: rgba(245, 239, 250, 0.75); border-right: 1px solid rgba(91, 58, 131, 0.12); color: var(--vl-texte-2); }
.segment .s-fr { background: transparent; }
/* segment à vérifier : fond pêche très pâle et étiquette, sans filet latéral */
.segment.faible .s-fr { box-shadow: none; background: rgba(255, 233, 225, 0.55); }
.segment .s-fr .drapeau {
  display: inline-flex;
  margin-top: 0.45rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFE9E1;
  color: #8E2A10;
  font: 650 0.76rem/1.2 var(--vl-texte);
}
@media (max-width: 640px) { .segment .s-en { border-right: 0; border-bottom: 1px solid rgba(91, 58, 131, 0.1); } }

/* --- visionneuse du document traduit ------------------------------------------ */
.visionneuse__barre { gap: 10px 12px; margin-bottom: 1rem; }
.visionneuse__fichier {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(237, 227, 246, 0.8);
  color: var(--vl-violet-fonce);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.visionneuse__barre .bouton { --h: 44px; padding: 0 20px; font-size: 15px; }
.visionneuse__cadre {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  background: rgba(245, 239, 250, 0.85);
  box-shadow: var(--vl-ombre-legere), 0 0 0 6px rgba(255, 255, 255, 0.45);
}
.visionneuse--texte-seul { padding: 1.6rem 1.6rem 1.2rem; background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(237, 227, 246, 0.6)); }
.visionneuse--texte-seul h3 { margin-top: 0; }

/* --- récapitulatif de paiement (paiement-simule) --------------------------------- */
.recap-paiement { max-width: none; margin: 1.6rem 0; padding: clamp(22px, 1rem + 2vw, 36px); }
.recap-paiement h2 { margin: 0 0 1rem !important; font-size: 1.4rem; }
.recap-paiement__lignes > div { gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(91, 58, 131, 0.12); }
.recap-paiement__lignes dt { font-size: 0.95rem; color: var(--vl-texte-2); }
.recap-paiement__lignes dd { font-weight: 600; color: var(--vl-encre); overflow-wrap: anywhere; }
.recap-paiement__du { align-items: center; margin: 1.2rem 0 0.4rem; padding: 16px 20px; border-radius: 20px; background: rgba(237, 227, 246, 0.75); font-weight: 600; color: var(--vl-violet-fonce); }
.recap-paiement__du strong { font: 700 2.2rem/1 var(--vl-titre); letter-spacing: -0.03em; color: var(--vl-violet); }
body[data-page='paiement-simule'] #msg { font-size: 1rem; }
body[data-page='paiement-simule'] #attente { margin-top: 1.4rem; }
/* le mot de la fin : verre anis pâle, sans filet latéral */
.merci {
  max-width: none;
  margin: 1.6rem 0 0;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(238, 246, 210, 0.75));
  box-shadow: var(--vl-ombre-legere);
}
.merci p:first-child strong { font: 700 1.3rem/1.3 var(--vl-titre); color: var(--vl-violet); }

/* --- .rowtine seul : une carte par langue ------------------------------------- */
.ligne-rowtine {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 16px;
  margin: 0 0 12px;
  padding: 6px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
}
.ligne-rowtine > label { margin: 0.8rem 0 0; }
.ligne-rowtine > label > .champ { display: block; width: 100%; margin-top: 0.45rem; }
.ligne-rowtine > .bouton { --h: 48px; padding: 0 18px; font-size: 15px; }
.ligne-rowtine > .champ-aide { grid-column: 1 / -1; margin: 0.2rem 0 0; }
.ligne-rowtine > .champ-aide:empty { display: none; }
#rowtine-total:not(:empty) { font: 700 1.4rem/1.3 var(--vl-titre); color: var(--vl-violet); }
@media (max-width: 640px) { .ligne-rowtine { grid-template-columns: 1fr; } }

/* --- offre et achat (outil automatique) --------------------------------------- */
body:not(.accueil) .comparatif {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon-moyen);
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--vl-ombre);
}
.comparatif th, .comparatif td { padding: 0.95rem 1.1rem; border-bottom: 1px solid rgba(91, 58, 131, 0.1); }
.comparatif tr:last-child > * { border-bottom: 0; }
.comparatif thead th { font: 700 1.1rem/1.25 var(--vl-titre); color: var(--vl-violet); background: rgba(237, 227, 246, 0.6); }
.comparatif tbody th { font-weight: 600; color: var(--vl-violet-fonce); }
@media (max-width: 640px) {
  .comparatif { font-size: 0.9rem; }
  .comparatif th, .comparatif td { padding: 0.7rem 0.55rem; overflow-wrap: break-word; hyphens: auto; }
  .comparatif thead th { font-size: 0.98rem; }
}
body:not(.accueil) .colonnes { gap: 18px; }
body:not(.accueil) .etape {
  padding: 26px 26px 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--vl-ombre-legere);
}
body:not(.accueil) .etape h3 { margin-top: 0; }
body:not(.accueil) .etape p { margin: 0; color: var(--vl-texte-2); }
body:not(.accueil) .actions { display: flex; flex-wrap: wrap; gap: 14px; }
body:not(.accueil) .rapport-mise-en-avant { align-items: start; gap: clamp(1.4rem, 3vw, 2.5rem); }
body:not(.accueil) .rapport-mise-en-avant h2 { margin-top: 0; }
body:not(.accueil) .faux-rapport {
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon);
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--vl-ombre);
  font-size: 1rem;
}
body:not(.accueil) .faux-rapport h4 { margin: 0 0 0.8rem; font: 700 1.3rem/1.2 var(--vl-titre); color: var(--vl-violet); }
[data-recap] h3 { margin-top: 0; }
[data-recap] .prix { color: var(--vl-violet); font-weight: 700; }

/* --- pages de lecture (CGPS, confidentialité) -------------------------------- */
/* Fond plus calme (lilas + anis), une seule feuille de verre, mesure ~70 signes. */
.vl-lecture::before {
  background:
    radial-gradient(60vmax 60vmax at -8% -12%, rgba(203, 182, 224, 0.7), rgba(203, 182, 224, 0) 62%),
    radial-gradient(50vmax 50vmax at 108% 30%, rgba(210, 232, 140, 0.32), rgba(210, 232, 140, 0) 60%),
    radial-gradient(56vmax 56vmax at 20% 112%, rgba(214, 196, 240, 0.55), rgba(214, 196, 240, 0) 62%);
}
.vl-lecture > header.bloc { padding-bottom: 1.4rem; }
.vl-lecture > header.bloc .enveloppe, .vl-feuille { max-width: 50rem; }
.vl-lecture > header.bloc .champ-aide { font-size: 1.04rem; max-width: 40em; }
.vl-feuille {
  margin: 0 auto;
  padding: clamp(10px, 1vw, 20px) clamp(22px, 1rem + 4vw, 64px) clamp(28px, 1rem + 3vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--vl-rayon);
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--vl-ombre);
}
@media (max-width: 860px) { .vl-feuille { margin: 0 clamp(12px, 3vw, 24px); } }
body .vl-feuille > .bloc { padding: 0; }
body .vl-feuille .enveloppe { max-width: none; padding: 0; }
body .vl-feuille > .bloc + .bloc { margin-top: 1.8rem; padding-top: 0.2rem; border-top: 1px solid rgba(91, 58, 131, 0.1); }
.vl-feuille h2 { margin: 1.9rem 0 0.8rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.2; }
.vl-feuille p, .vl-feuille li { max-width: 68ch; font-size: 1.04rem; line-height: 1.72; color: var(--vl-encre); }
.vl-feuille p { margin: 0 0 1rem; }
.vl-feuille ul, .vl-feuille ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.vl-feuille li { margin: 0.35rem 0; }
.vl-feuille li::marker { color: var(--vl-violet-clair); }
.vl-feuille a { color: var(--vl-violet-clair); font-weight: 600; }

/* --- mobile ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body:not(.accueil) h1::after { width: 92px; height: 12px; margin-top: 12px; }
  #form-commande, #form-contact, form[data-demande], [data-devis-cliente], #form-rowtine, [data-zone] { border-radius: 26px; }
  .avis { padding: 14px 16px 14px 44px; }
  .avis::before { left: 15px; top: 16px; width: 16px; height: 16px; }
  .etapes li { font-size: 0.74rem; padding: 34px 1px 0; letter-spacing: -0.01em; }
  .onglets, body:not(.accueil) .onglets-espace { width: 100%; }
  .onglets button, .onglets-espace a { padding: 0 12px; font-size: 15px; white-space: normal; }
  .carte-prix { padding: 22px; }
  .carte-prix__montant { font-size: 2.5rem; }
  body:not(.accueil) .entete-espace [data-actions-titre] { flex-basis: 100%; }
  body:not(.accueil) .tarif-mesure__prix { font-size: 2.2rem; }
  /* une ligne par donnée : l'IBAN reste d'un seul tenant, lisible à recopier */
  .coordonnees-bancaires, .coordonnees-bancaires tbody, .coordonnees-bancaires tr, .coordonnees-bancaires th, .coordonnees-bancaires td { display: block; }
  .coordonnees-bancaires { padding: 6px 0; }
  .coordonnees-bancaires th { padding: 0.6rem 1rem 0; }
  .coordonnees-bancaires td { padding: 0.15rem 1rem 0.6rem; }
  body .coordonnees-bancaires code { font-size: clamp(0.7rem, 3.3vw, 0.92rem); letter-spacing: 0; white-space: nowrap; }
  .recap-paiement__lignes > div { flex-wrap: wrap; gap: 0.2rem 1rem; }
  .vl-feuille p, .vl-feuille li { font-size: 1rem; }
}

/* =============================================================================
   4. GRANDES PHOTOS EN TRANSPARENCE DES PAGES INTÉRIEURES
   Même principe que les .bgp de l'accueil, posé en CSS (aucune balise ajoutée) :
   body::after porte une ou deux photos pleine largeur, fondues en mode
   « luminosité » sur un aplat lilas (seule leur lumière compte), masquées en
   dégradé haut/bas et voilées de clair. Empilement sous le contenu :
   taches floues (body::before, -3) < photos (body::after, -2) < brin (-1).
   Photos : lecture CGPS = jersey rose + crochet 1 ; confidentialité = pelotes +
   crochet 2 ; espace client (compte, achat, connexion) = mohair.
   ========================================================================== */
.vl-lecture::before,
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::before { z-index: -3; }
.vl-lecture::after,
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* --- lecture : une photo en tête, une autre en bas de page --- */
.vl-lecture::after {
  bottom: 0;
  --h-haut: 980px;
  --h-bas: 1100px;
  background-image:
    linear-gradient(rgba(247, 242, 252, 0.38), rgba(247, 242, 252, 0.38)),
    var(--vl-photo-haut),
    var(--vl-photo-bas),
    linear-gradient(180deg, #D9C8EE, #E3D6F2 40%, #E6EFCB);
  background-size: 100% 100%, 100% var(--h-haut), 100% var(--h-bas), 100% 100%;
  background-position: 0 0, 50% 0, 50% 100%, 0 0;
  background-blend-mode: normal, luminosity, luminosity, normal;
  opacity: 0.62;
  -webkit-mask:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 18%, #000 52%, transparent) 0 0 / 100% var(--h-haut) no-repeat,
    linear-gradient(180deg, transparent, #000 40%, #000 82%, transparent) 0 100% / 100% var(--h-bas) no-repeat;
  mask:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 18%, #000 52%, transparent) 0 0 / 100% var(--h-haut) no-repeat,
    linear-gradient(180deg, transparent, #000 40%, #000 82%, transparent) 0 100% / 100% var(--h-bas) no-repeat;
}
.vl-lecture--cgps { --vl-photo-haut: image-set(url('assets/photos/mailles-jersey-rose-960.webp') 1x, url('assets/photos/mailles-jersey-rose-1600.webp') 2x); --vl-photo-bas: image-set(url('assets/photos/crochet-tissu-1-800.webp') 1x, url('assets/photos/crochet-tissu-1-1600.webp') 2x); }
.vl-lecture--confidentialite { --vl-photo-haut: image-set(url('assets/photos/pelotes-lilas-960.webp') 1x, url('assets/photos/pelotes-lilas-1600.webp') 2x); --vl-photo-bas: image-set(url('assets/photos/crochet-tissu-2-800.webp') 1x, url('assets/photos/crochet-tissu-2-1600.webp') 2x); }
@media (min-width: 821px) {
  .vl-lecture--cgps { --vl-photo-haut: url('assets/photos/mailles-jersey-rose-1600.webp'); --vl-photo-bas: url('assets/photos/crochet-tissu-1-1600.webp'); }
  .vl-lecture--confidentialite { --vl-photo-haut: url('assets/photos/pelotes-lilas-1600.webp'); --vl-photo-bas: url('assets/photos/crochet-tissu-2-1600.webp'); }
}
@media (max-width: 820px) { .vl-lecture::after { --h-haut: 620px; --h-bas: 760px; opacity: 0.52; } }
/* la feuille de lecture s'épaissit un peu : le texte reste sur un fond quasi blanc (AA) */
.vl-lecture .vl-feuille { background: rgba(255, 255, 255, 0.8); }

/* --- espace client : en-tête chaleureux --- */
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::before {
  background:
    radial-gradient(58vmax 58vmax at -10% -14%, rgba(203, 182, 224, 0.95), rgba(203, 182, 224, 0) 62%),
    radial-gradient(48vmax 48vmax at 106% 8%, rgba(255, 186, 160, 0.62), rgba(255, 186, 160, 0) 60%),
    radial-gradient(52vmax 52vmax at 92% 92%, rgba(222, 196, 246, 0.75), rgba(222, 196, 246, 0) 62%),
    radial-gradient(44vmax 44vmax at 8% 78%, rgba(255, 206, 188, 0.4), rgba(255, 206, 188, 0) 62%);
}
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::after {
  height: 860px;
  background-image:
    linear-gradient(180deg, rgba(247, 242, 252, 0.46), rgba(247, 242, 252, 0.3) 60%),
    image-set(url('assets/photos/mohair-violet-rose-900.webp') 1x, url('assets/photos/mohair-violet-rose-1600.webp') 2x),
    linear-gradient(120deg, #D6C2EE, #F1D2DA 70%, #FFD8CB);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: 0 0, 50% 38%, 0 0;
  background-blend-mode: normal, luminosity, normal;
  opacity: 0.66;
  -webkit-mask: linear-gradient(180deg, #000, #000 42%, rgba(0, 0, 0, 0.4) 72%, transparent);
  mask: linear-gradient(180deg, #000, #000 42%, rgba(0, 0, 0, 0.4) 72%, transparent);
}
@media (min-width: 821px) {
  body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::after {
    background-image:
      linear-gradient(180deg, rgba(247, 242, 252, 0.46), rgba(247, 242, 252, 0.3) 60%),
      url('assets/photos/mohair-violet-rose-1600.webp'),
      linear-gradient(120deg, #D6C2EE, #F1D2DA 70%, #FFD8CB);
  }
}
@media (max-width: 820px) {
  body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander'])::after { height: 600px; opacity: 0.5; }
}
/* textes posés directement sur la photo : un ton plus sombre, contraste AA garanti */
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) :is(.hero p.chapo, .enveloppe > h1 + .champ-aide, .entete-espace .champ-aide),
.vl-lecture > header.bloc .champ-aide { color: #3E3349; }

/* un tronçon de fil de laine, en haut à droite (décor, sous le contenu) */
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) > nav + .bloc::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: -4px;
  width: min(470px, 36vw);
  aspect-ratio: 560 / 170;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 170'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23A98BE6' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23A98BE6'/%3E%3Cstop offset='.7' stop-color='%23FF9C80'/%3E%3Cstop offset='1' stop-color='%23FF8A6A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%235B3A83' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%236E4FA3'/%3E%3Cstop offset='.75' stop-color='%23E9603E'/%3E%3Cstop offset='1' stop-color='%23FF5B37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 120C80 150 130 60 210 70S330 160 410 120 500 30 560 46' fill='none' stroke='url(%23a)' stroke-width='16' stroke-linecap='round' opacity='.32'/%3E%3Cpath d='M4 120C80 150 130 60 210 70S330 160 410 120 500 30 560 46' fill='none' stroke='url(%23b)' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M10 116C84 142 134 56 212 64S334 154 412 114 502 26 560 40' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat right center / contain;
  opacity: 0.85;
}
@media (max-width: 640px) {
  body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) > nav + .bloc::before { width: 56vw; top: 10px; opacity: 0.6; }
}
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) > nav + .bloc { padding-top: clamp(3rem, 2rem + 5vw, 6rem); }
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) h1 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.2rem); }
body[data-page='compte'] .entete-espace { margin-bottom: 2rem; }
/* ligne de session : une pilule de verre */
/* saut de ligne : la pilule de session passe sous le titre et les boutons */
body[data-page='compte'] .entete-espace::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
body[data-page='compte'] .entete-espace [data-connexion]:not([hidden]) {
  flex-basis: auto;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px -18px rgba(58, 27, 94, 0.5);
}
@media (max-width: 640px) {
  body[data-page='compte'] .entete-espace [data-connexion]:not([hidden]) { border-radius: 22px; padding: 10px 12px 10px 16px; }
}

/* panneaux principaux : verre plus riche et liseré irisé discret */
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) :is([data-zone], form[data-demande], .faux-rapport) {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.6) 55%, rgba(250, 238, 246, 0.66));
  box-shadow: 0 50px 100px -40px rgba(90, 58, 131, 0.42), 0 18px 40px -30px rgba(201, 66, 31, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.8);
}
body:is([data-page='compte'], [data-page='achat'], [data-page='connexion-demander']) :is([data-zone], form[data-demande], .faux-rapport)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from 210deg, rgba(185, 155, 218, 0.9), rgba(255, 185, 162, 0.85), rgba(255, 255, 255, 0.9), rgba(201, 176, 238, 0.9), rgba(255, 201, 184, 0.8), rgba(185, 155, 218, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
body[data-page='compte'] .liste-patrons .ligne:has(> a):hover { transform: translateY(-2px); }
body[data-page='compte'] .onglets-espace { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* --- mouvement réduit et captures (?static) --- */
.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .fil .rv-up, .fil .tier.rv, .fil .step, .fil .step h3, .fil .step p { opacity: 1 !important; transform: none !important; }
  .fil .step .num { opacity: 1 !important; scale: 1 !important; }
}