/* Wobjok — page d'accueil. Fil : promesse → problème → réponse → comment → preuve → appel.
   Les visuels reproduisent l'interface réelle (données fictives, étapes et couleurs d'état fidèles). Courbe Catalyze : var(--ease). */

:root {
  --app-fond: #FBF8F2; --app-vide: #ECE8E0; --app-trait: rgb(27 23 21 / .09);
  --encours: #B8862B; --encours-doux: #FBF0D6; --fait-doux: #E8F1E4;
  --ombre-app: 0 0 0 1px var(--app-trait), 0 2px 4px rgb(27 23 21 / .04), 0 24px 48px -28px rgb(27 23 21 / .28);
  --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23FBF8F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --demi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.3' fill='none' stroke='%23FBF8F2' stroke-width='1.6'/%3E%3Cpath d='M8 3.7a4.3 4.3 0 0 0 0 8.6z' fill='%23FBF8F2'/%3E%3C/svg%3E");
}

/* ---------- La case d'étape : la signature ---------- */
.c { display: inline-block; width: 26px; height: 26px; border-radius: 7px; background: var(--app-vide) center / 16px no-repeat; flex: none; vertical-align: middle; }
.c.f { background-color: var(--fait); background-image: var(--coche); }
.c.e { background-color: var(--encours); background-image: var(--demi); }
.c.pop { animation: case-pop 520ms var(--ease); }
@keyframes case-pop {
  0% { transform: scale(.72); box-shadow: 0 0 0 0 rgb(79 107 63 / .45); }
  60% { transform: scale(1); box-shadow: 0 0 0 7px rgb(79 107 63 / 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(79 107 63 / 0); }
}

/* ---------- 2. Hero : la promesse, sur fond sombre, juste après le problème ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--section); background: var(--encre); color: var(--creme); }
/* La phrase entière au même niveau : même taille, même couleur ; la dernière ligne tient sur une ligne (ordinateur) */
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 5.25rem); line-height: 1.04; }
.hero .action .mention { color: var(--trait-fort); }
.hero__cote { margin-top: clamp(32px, 4vw, 48px); will-change: transform, opacity; transition: opacity 120ms linear; }
/* Ordinateur : le bouton passe au-dessus de la barre pendant qu'il la rejoint */
.nav--relais ~ main .hero__cote { position: relative; z-index: calc(var(--z-nav) + 1); }
.hero__cote .hero__actions { margin-top: 0; align-items: flex-start; gap: 16px 20px; }
/* Une action, la démo ; elle porte sa ligne en petit */
.action { display: grid; justify-items: start; gap: 10px; }
.hero .action .mention { margin-top: 0; font-size: 14px; padding-left: 2px; }
.hero__cote .action--sec, .hero__cote .mention { opacity: var(--sec, 1); }
/* Le bouton de navigation est là dès l'ouverture. Pendant le relais (ordinateur), il cède sa place
   juste avant l'arrivée de celui du hero, puis réapparaît quand celui-ci se pose */
.nav--relais .nav__cta { transition: opacity 120ms linear, background-color 250ms var(--ease); }
.nav--relais.cta-cede .nav__cta { opacity: 0; pointer-events: none; }

/* ---------- 1. Problème : le premier écran, sur fond clair ---------- */
.probleme { margin-top: 0; background: none; color: var(--encre); min-height: calc(100svh - 76px - clamp(96px, 14vh, 150px)); display: flex; flex-direction: column; justify-content: center; padding-block: 32px 56px; }
.question { opacity: 0; transform: translateY(44px); filter: blur(6px); transform-origin: 0 0; }
.question.devant { opacity: 1; transform: none; filter: none; color: var(--encre);
  transition: opacity 450ms var(--ease) 120ms, transform 500ms var(--ease) 120ms, filter 450ms var(--ease) 120ms; }
.question.derriere { opacity: 0; transform: translateY(-26px) scale(.9); filter: blur(8px); color: var(--mauve);
  transition: opacity 400ms var(--ease), transform 450ms var(--ease), filter 400ms var(--ease); }
.question.parti { transition: none; }
.reperes span { position: relative; overflow: hidden; width: 44px; }
.reperes span, .reperes span.on { background: rgb(27 23 21 / .12); }
.reperes span::after { content: ""; position: absolute; inset: 0; background: var(--violet); transform: scaleX(0); transform-origin: left; }
.reperes span.on::after { animation: remplir 2900ms linear forwards; }
.probleme.pause .reperes span.on::after { animation-play-state: paused; }
@keyframes remplir { to { transform: scaleX(1); } }
.bascule { margin-top: clamp(64px, 8vw, 104px);
  font: 600 var(--fs-h2)/1.06 var(--titre); letter-spacing: -0.025em; color: var(--encre); max-width: 22ch; }
.bascule span { color: var(--violet); }
/* Deux lignes sur ordinateur : « Vos commandes client méritent » / « un suivi qui leur correspond. » */
@media (min-width: 901px) { .bascule { max-width: none; } .bascule span { display: block; } }

/* ---------- 3. Du devis signé à la pose : le titre sur deux lignes ---------- */
.etapes .titre-section { max-width: none; }
.etapes .titre-section .attenue { display: block; color: var(--prune); }
@media (min-width: 901px) { .etapes .titre-section .ligne, .etapes .titre-section .attenue { display: block; white-space: nowrap; } }

/* Import : Wobjok est connecté aux logiciels de gestion. Chaque commande arrive avec le logo de son logiciel,
   et le logiciel d'où elle vient s'allume au même moment */
.imp { display: grid; justify-items: center; max-width: 520px; margin-inline: auto; width: 100%; }
.imp__logiciels { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.imp__logiciels li { display: grid; place-items: center; height: 46px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); transition: box-shadow 250ms var(--ease); }
.imp__logiciels img { height: 17px; width: auto; max-width: 76%; }
.imp__autres { font: 600 13px var(--texte); color: var(--encre-60); background: var(--creme-clair) !important; }
.imp__cable { position: relative; width: 3px; height: 44px; border-radius: 3px; background: var(--app-vide); overflow: hidden; }
.imp__cable::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; border-radius: 3px; background: var(--violet); opacity: 0; }
.imp__app { width: 100%; border-radius: 14px; background: var(--app-fond); box-shadow: var(--ombre-app); padding: 18px 18px 12px; font-family: var(--texte); }
.imp__wobjok { display: block; height: 18px; width: auto; margin: 0 0 12px 2px; }
.imp__liste { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; min-height: 166px; }
.imp__liste li { display: grid; grid-template-rows: 1fr; }
.imp__liste li > div { overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); font: 600 15.5px var(--texte); }
.imp__liste li img { height: 15px; width: auto; }
/* Rythme : une commande toutes les 900 ms ; son logiciel s'allume, le trait s'anime, la ligne entre en haut de la liste */
.imp__l1, .imp__r1 { --t: 300ms; } .imp__l2, .imp__r2 { --t: 1200ms; } .imp__l3, .imp__r3 { --t: 2100ms; }
.js .vue:not(.on) .imp__liste li { grid-template-rows: 0fr; }
.js .vue:not(.on) .imp__liste li > div { opacity: 0; margin-bottom: 0; padding-block: 0; }
.js .vue.on .imp__liste li { transition: grid-template-rows 450ms var(--ease) calc(var(--t) + 350ms); }
.js .vue.on .imp__liste li > div { transition: opacity 350ms var(--ease) calc(var(--t) + 450ms), margin 450ms var(--ease) calc(var(--t) + 350ms), padding 450ms var(--ease) calc(var(--t) + 350ms); animation: imp-flash 1400ms var(--ease) calc(var(--t) + 450ms) both; }
.js .vue.on .imp__logiciels :is(.imp__l1, .imp__l2, .imp__l3) { animation: imp-allume 900ms var(--ease) var(--t) both; }
.js .vue.on .imp__cable::after { animation: imp-trait 900ms var(--ease) 300ms 3; }
@keyframes imp-allume { 0%, 100% { box-shadow: inset 0 0 0 1px var(--app-trait); } 15%, 70% { box-shadow: inset 0 0 0 2px var(--violet); } }
@keyframes imp-trait { 0% { top: -40%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
@keyframes imp-flash { 0% { box-shadow: inset 0 0 0 2px var(--violet); } 100% { box-shadow: inset 0 0 0 1px var(--app-trait); } }
.app-cadre { margin: clamp(48px, 6vw, 72px) 0 0; position: relative; overflow-x: clip; overflow-clip-margin: 0; }
.app { position: relative; width: 1180px; transform-origin: top left; transform: scale(var(--s, 1)); background: var(--app-fond); border-radius: 14px;
  box-shadow: var(--ombre-app); font-family: var(--texte); color: var(--encre); overflow: hidden; }
.recadre .app { border-radius: 14px 0 0 14px; }
.app__tete { display: flex; align-items: center; gap: 40px; padding: 18px 28px; border-bottom: 1.5px solid var(--encre); }
.app__tete img { height: 22px; width: auto; }
.app__onglets { display: flex; gap: 6px; font-size: 15px; color: var(--encre-60); }
.app__onglets span { padding: 8px 12px; }
.app__onglets .on { color: var(--encre); font-weight: 600; box-shadow: inset 0 -2px 0 var(--violet); }
.pastille-n { font-style: normal; display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--encours); color: var(--app-fond); font-size: 11px; font-weight: 700; margin-left: 4px; }
.app__avatar { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mauve-doux); color: var(--prune); font-size: 13px; font-weight: 700; }
.app__barre { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 6px; }
.app__sous { display: inline-flex; border: 1px solid rgb(27 23 21 / .14); border-radius: 8px; overflow: hidden; font-size: 14.5px; }
.app__sous span { padding: 9px 18px; color: var(--encre-60); display: inline-flex; gap: 8px; align-items: center; }
.app__sous span + span { border-left: 1px solid rgb(27 23 21 / .1); }
.app__sous i { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--app-vide); color: var(--encre-60); }
.app__sous .on { background: var(--encre); color: var(--app-fond); font-weight: 600; }
.app__sous .on i { background: rgb(251 248 242 / .18); color: var(--app-fond); }
.app__sous i.bouge { animation: compte 600ms var(--ease); }
@keyframes compte { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.app__nouvelle { background: var(--encre); color: var(--app-fond); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 8px; }
.app__groupe { display: flex; align-items: center; gap: 10px; padding: 18px 28px 10px; font: 600 16px var(--titre); }
.app__groupe i { font: 500 12px var(--texte); font-style: normal; color: var(--encre-60); background: var(--app-vide); padding: 2px 8px; border-radius: 999px; }
.app__point { width: 8px; height: 8px; border-radius: 2px; background: var(--encours); }
.tab { margin: 0 28px 28px; border-top: 1.5px solid var(--encre); }
.tab__l { display: grid; grid-template-columns: 84px 1.2fr 1.45fr 100px repeat(6, 1fr); align-items: center; min-height: 54px; padding-left: 14px; border-bottom: 1px solid var(--app-trait); font-size: 15px; position: relative;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.tab__l > .c { justify-self: center; }
.tab__l--tete { min-height: 40px; background: var(--encre); color: rgb(251 248 242 / .85); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 0; }
.tab__l--tete span:nth-child(n+5) { justify-self: center; }
.tab__l .d { color: var(--encre-60); font-variant-numeric: tabular-nums; }
.tab__l .cl { font-weight: 600; }
.tab__l .co { color: var(--encre-60); }
.tab__l--vous { background: var(--mauve-doux); }
.tab__l--vous::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--violet); }
.tab__l--vous .cl { color: var(--prune); }
.tab__l.part { opacity: 0; transform: translateX(24px); }
.urg { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--fait-doux); color: var(--fait); }
.urg--moy { background: var(--encours-doux); color: #8B6520; }
.urg--forte { background: #F5DCD8; color: #A03325; }
.app__toast { position: absolute; right: 28px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: var(--encre); color: var(--app-fond); border-radius: 10px; font-size: 14.5px;
  box-shadow: 0 12px 24px -12px rgb(27 23 21 / .5); opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.app__toast small { color: rgb(251 248 242 / .55); font-size: 12.5px; margin-left: 6px; }
.app__toast.vu { opacity: 1; transform: none; }
.recadre .app__toast { right: auto; left: 28px; }


/* ---------- 4. Comment ça marche ---------- */
.etapes { padding-top: var(--section); }
.etapes__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); margin-top: clamp(24px, 3vw, 40px); }
.chapitres { position: relative; container-type: inline-size; }
.chapitre { display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
html:not(.js) .chapitre { min-height: 80vh; }
.chapitre__etape { display: flex; align-items: center; gap: 10px; font: 600 15px var(--texte); color: var(--prune); margin-bottom: 16px; }
.chapitre__etape .c { width: 20px; height: 20px; border-radius: 6px; background-size: 13px; }
/* Le nom de l'étape, en géant : il remplit la colonne sans jamais la dépasser (--n = nombre de lettres) */
.chapitre__mot { overflow: hidden; padding-bottom: .05em; margin-bottom: clamp(14px, 1.8vw, 22px); }
.chapitre__mot span { display: block; font-size: min(8.5rem, calc(100cqi / (var(--n) * .5))); line-height: .95; letter-spacing: -0.035em; color: var(--violet); }
.chapitre__gain { font: 600 var(--fs-h3)/1.08 var(--titre); letter-spacing: -0.02em; color: var(--encre); text-wrap: balance; }
.chapitre__comment { padding-top: 14px; font-size: var(--fs-lead); color: var(--encre-60); }
/* La phrase d'explication reste cachée : elle s'ouvre sous le bénéfice quand on survole l'étape (ou qu'on la touche) */
.js .chapitre__plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease); }
.js .chapitre__plus > p { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity 250ms var(--ease), transform 350ms var(--ease); }
.js .chapitre:hover .chapitre__plus, .js .chapitre:focus-within .chapitre__plus, .js .chapitre.ouvert .chapitre__plus { grid-template-rows: 1fr; }
.js .chapitre:hover .chapitre__plus > p, .js .chapitre:focus-within .chapitre__plus > p, .js .chapitre.ouvert .chapitre__plus > p { opacity: 1; transform: none; transition-delay: 120ms; }
/* Le bénéfice se colore mot à mot au rythme de la molette (ordinateur) */
.defile .chapitre__gain .m { transition: color 220ms linear; }
.defile .chapitre__gain .m:not(.lu) { color: var(--encre-40); }
.rail { display: none; }

.vues { display: grid; gap: 40px; }
html:not(.js) .scene__colle { position: sticky; top: calc(50vh - 280px); }
/* Ordinateur : texte et visuel sont fixés ensemble au milieu de l'écran ; le défilement fait passer les 6 étapes */
@media (min-width: 901px) {
  .js .etapes__grille { height: 720vh; align-items: start; }
  .js .chapitres, .js .scene { position: sticky; top: calc(50vh - 280px + 30px); height: 560px; }
  .js .chapitres { display: grid; align-items: center; }
  /* L'étape qui sort s'efface vite ; la suivante n'arrive qu'après : jamais deux textes l'un sur l'autre */
  .js .chapitre { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 160ms linear, transform 160ms var(--ease); }
  .js .chapitre.actif { opacity: 1; transform: none; pointer-events: auto; transition: opacity 380ms var(--ease) 180ms, transform 480ms var(--ease) 180ms; }
  .js .chapitres { padding-left: 76px; }
  /* Le mot glisse comme un compteur : il monte en entrant, et continue de monter en sortant */
  .js .chapitre__mot span { transform: translateY(105%); transition: transform 650ms var(--ease); }
  .js .chapitre.passe .chapitre__mot span { transform: translateY(-105%); }
  .js .chapitre.actif .chapitre__mot span { transform: none; transition-delay: 180ms; }
  /* Le rail : 01 à 06, l'étape en cours se remplit au défilement */
  .js .rail { display: grid; gap: 18px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0;
    font: 600 13px/1 var(--texte); font-variant-numeric: tabular-nums; color: var(--encre-40); }
  .js .rail li { display: grid; gap: 8px; width: 40px; transition: color 300ms var(--ease); }
  .js .rail li::after { content: ""; height: 2px; border-radius: 2px; background: var(--trait); }
  .js .rail li.fait::after { background: var(--violet); }
  .js .rail li.actif { color: var(--encre); }
  .js .rail li.actif::after { background: linear-gradient(var(--violet), var(--violet)) 0 0 / calc(var(--p, 0) * 100%) 100% no-repeat, var(--trait); }
}
.js .vues { gap: 0; height: 560px; align-items: center; }
.js .vue { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 160ms linear, transform 160ms var(--ease); }
.js .vue.on { opacity: 1; transform: none; transition: opacity 380ms var(--ease) 180ms, transform 480ms var(--ease) 180ms; }
/* Sous chaque animation, son bouton : il suit l'étape et ne touche pas au texte de gauche */
.vue { display: flex; flex-direction: column; gap: 28px; }
.vue > [aria-hidden] { align-self: stretch; }
.vue--tel > [aria-hidden] { align-self: center; }
.vue__cta { align-self: center; }
.js .vue:not(.on) .vue__cta { visibility: hidden; transition: visibility 0s 160ms; }
.js .vue.on .vue__cta { pointer-events: auto; }
@media (min-width: 901px) { .js .vue--tel .tel--reel { zoom: .84; } }

/* V2 — page de validation du BAT */
.navigateur { background: var(--app-fond); border-radius: 12px; box-shadow: var(--ombre-app); overflow: hidden; max-width: 560px; margin-inline: auto; width: 100%; }
.navigateur__barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--app-trait); }
.navigateur__barre > span { width: 10px; height: 10px; border-radius: 50%; background: var(--trait-fort); }
.navigateur__barre em { margin-left: 12px; font-style: normal; font-size: 12.5px; color: var(--encre-60); background: var(--app-vide); padding: 4px 12px; border-radius: 999px; }
.batp { padding: 24px 26px 26px; display: grid; gap: 16px; font-size: 14.5px; }
.batp__tete { display: grid; gap: 2px; } .batp__tete b { font: 600 18px var(--titre); } .batp__tete span { color: var(--encre-60); }
.batp__visuel { height: 130px; border-radius: 8px; background: var(--encre); display: grid; place-items: center; box-shadow: 0 0 0 8px var(--app-vide); margin: 8px; }
.batp__visuel span { color: var(--mauve); font: 700 22px var(--titre); letter-spacing: .24em; }
.batp__champ { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.batp__saisie { display: block; min-height: 44px; padding: 11px 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait-fort); font-weight: 400; font-size: 15px; }
.batp__saisie.tape::after, .recherche__saisie.tape::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--violet); animation: curseur 900ms steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.batp__bas { display: grid; }
.batp__bas > span { grid-area: 1 / 1; transition: opacity 250ms var(--ease), transform 300ms var(--ease); }
.batp__bouton { justify-self: start; background: var(--violet); color: var(--encre); font-weight: 600; padding: 12px 18px; border-radius: 8px; }
.batp__ok { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--fait); opacity: 0; transform: scale(1.2) rotate(-2deg); transform-origin: left center; }
.batp__cert { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease) 450ms, transform 500ms var(--ease) 450ms; }
.batp__cert .pdf { font: 700 11px var(--texte); color: #fff; background: var(--alerte); padding: 8px 6px; border-radius: 5px; }
.batp__cert b { display: block; } .batp__cert small { color: var(--encre-60); font-size: 12.5px; }
.batp.valide .batp__bouton { opacity: 0; transform: scale(.96); }
.batp.valide .batp__ok { opacity: 1; transform: none; transition: opacity 350ms var(--ease) 250ms, transform 450ms var(--ease) 250ms; }
.batp.valide .batp__cert { opacity: 1; transform: none; }

/* BAT — la page client réelle : en-tête aux couleurs de l'atelier, document, Valider (vert) ou Modifier (orange) */
.bc { position: relative; padding: 0 0 24px; display: grid; gap: 18px; font-size: 14.5px; }
.bc__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; background: var(--encre); color: var(--app-fond); }
.bc__atelier { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--titre); letter-spacing: .02em; }
.bc__atelier i { width: 26px; height: 26px; border-radius: 6px; background: var(--mauve); }
.bc__doc { height: 170px; margin: 6px 24px 0; border-radius: 10px; background: var(--encre); display: grid; place-items: center; box-shadow: 0 0 0 8px var(--app-vide); }
.bc__doc span { color: var(--mauve); font: 700 26px var(--titre); letter-spacing: .24em; }
.bc__reponse { display: grid; margin: 6px 24px 0; }
.bc__reponse > * { grid-area: 1 / 1; transition: opacity 300ms var(--ease), transform 450ms var(--ease); }
.bc__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bc__choix > span { display: grid; place-items: center; min-height: 52px; padding: 0 10px; border-radius: 10px; font-weight: 600; font-size: 15px; text-align: center; color: #fff; }
.bc__valider { background: #3E7A4E; transition: transform 150ms var(--ease); }
.bc__modifier { background: #C97B3A; }
.bc__preuve { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); opacity: 0; transform: translateY(10px); }
.bc__preuve .pdf { font: 700 11px var(--texte); color: #fff; background: var(--alerte); padding: 8px 6px; border-radius: 5px; }
.bc__preuve b { display: block; } .bc__preuve small { color: var(--encre-60); font-size: 12.5px; }
.bc__ok { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fait-doux); color: #3E7A4E; white-space: nowrap; }
/* Le curseur part du document, vient sur « Valider ce BAT » et clique */
.bc__curseur { position: absolute; left: 62%; top: 34%; width: 22px; height: 22px; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18.5z' fill='%231B1715' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.js .vue.on .bc__curseur { animation: bc-curseur 1500ms var(--ease) 500ms forwards; }
@keyframes bc-curseur { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 75% { opacity: 1; transform: translate(-195px, 182px); } 85% { transform: translate(-195px, 182px) scale(.85); } 100% { opacity: 1; transform: translate(-195px, 182px); } }
.bc.valide .bc__choix { opacity: 0; transform: scale(.97); }
.bc.valide .bc__preuve { opacity: 1; transform: none; transition-delay: 150ms; }
.js .vue.on .bc.valide .bc__curseur { opacity: 0; transform: translate(-195px, 182px); transition: opacity 300ms var(--ease); animation: none; }
.js .vue:not(.on) .bc__curseur { animation: none; }

/* Planning de la semaine : poseurs en lignes, jours en colonnes (comme l'app) */
.planning { background: var(--app-fond); border-radius: 14px; box-shadow: var(--ombre-app); padding: 20px; font-size: 13px; max-width: 560px; margin-inline: auto; width: 100%; }
.planning__barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.planning__barre b { font: 600 19px var(--titre); letter-spacing: -0.015em; }
.pl-fleches { display: inline-flex; gap: 4px; }
.pl-fleches span, .pl-auj { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgb(27 23 21 / .14); color: var(--encre-60); font-size: 12px; font-weight: 600; }
.pl-auj { margin-left: auto; }
.planning__vues { display: inline-flex; border: 1px solid rgb(27 23 21 / .14); border-radius: 7px; overflow: hidden; font: 500 12px var(--texte); }
.planning__vues span { padding: 6px 10px; color: var(--encre-60); }
.planning__vues .on { background: var(--encre); color: var(--app-fond); }
.pl-grille { display: grid; grid-template-columns: 116px repeat(3, 1fr); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--app-trait); background: #fff; }
.pl-grille > * { border-right: 1px solid var(--app-trait); border-bottom: 1px solid var(--app-trait); }
.pl-coin { background: var(--app-fond); }
.pl-jour { padding: 8px 8px 9px; background: var(--app-fond); display: grid; gap: 3px; }
.pl-jour small { font-size: 11px; color: var(--encre-60); }
.pl-jour b { font: 600 18px/1 var(--titre); }
.pl-jour--auj b { color: var(--violet); }
.jauge { height: 5px; border-radius: 3px; background: var(--app-vide); position: relative; overflow: hidden; margin-top: 3px; }
.jauge::after { content: ""; position: absolute; inset: 0; background: var(--mauve); transform: scaleX(var(--charge)); transform-origin: left; }
.pl-qui { display: flex; align-items: center; gap: 7px; padding: 8px; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--encre-80); background: var(--app-fond); }
.pl-qui .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mauve-doux); color: var(--prune); font-size: 10px; font-weight: 700; flex: none; }
.pl-case { padding: 8px; min-height: 104px; }
.ev { border-radius: 7px; padding: 6px 7px; background: var(--mauve-doux); box-shadow: inset 3px 0 0 var(--mauve); display: grid; gap: 1px; }
.ev__t { font-size: 12px; color: var(--prune); font-weight: 600; font-variant-numeric: tabular-nums; }
.ev__c { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ev--faite { background: var(--fait-doux); box-shadow: inset 3px 0 0 var(--fait); }
.ev--faite .ev__t { color: var(--fait); }
.ev--faite .ev__t::after { content: " · faite"; }
.ev--vous { background: var(--violet); box-shadow: 0 8px 16px -10px rgb(107 74 130 / .7); }
.ev--vous .ev__t, .ev--vous .ev__c { color: var(--encre); }
.js .vue:not(.on) .ev--vous { opacity: 0; transform: translate(40px, -70px) rotate(-3deg); box-shadow: 0 24px 32px -14px rgb(107 74 130 / .6); }
.js .vue.on .ev--vous { transition: opacity 300ms var(--ease) 600ms, transform 800ms var(--ease) 600ms, box-shadow 500ms var(--ease) 1200ms; }
.js .vue:not(.on) .pl-jour--cible .jauge::after { transform: scaleX(.5); }
.js .vue.on .pl-jour--cible .jauge::after { transition: transform 600ms var(--ease) 1200ms; }

/* V3 — fiche en production */
.fiche { background: var(--app-fond); border-radius: 14px; padding: 24px 26px 26px; box-shadow: var(--ombre-app); }
.fiche__tete { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.fiche__num { font: 600 14px var(--texte); color: var(--prune); }
.fiche__client { font: 600 28px/1.1 var(--titre); letter-spacing: -0.02em; margin-top: 4px; }
.fiche__objet { color: var(--encre-60); font-size: 15.5px; margin-top: 4px; }
.fiche__meta { display: grid; justify-items: end; gap: 8px; font-size: 14px; color: var(--encre-60); white-space: nowrap; }
.fiche__meta b:not(.urg) { color: var(--encre); }
.stade { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 6px; font-size: 13.5px; font-weight: 600; }
.stade li { flex: 1; text-align: center; padding: 7px 4px; border-radius: 999px; color: var(--encre-40); background: var(--app-vide); }
.stade .fait { background: var(--fait-doux); color: var(--fait); }
.stade .ici { background: var(--violet); color: var(--app-fond); }
.bloc { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); }
.bloc__titre { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-60); margin-bottom: 10px; }
.bloc__compte { letter-spacing: 0; text-transform: none; font-size: 15px; }
.bloc__compte b { font: 700 22px var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.ruban { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.seg { height: 20px; border-radius: 6px; background: var(--app-vide); box-shadow: inset 0 0 0 1px var(--app-trait); position: relative; overflow: hidden; }
.seg::after { content: ""; position: absolute; inset: 0; background: var(--fait); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); }
.seg:nth-child(-n+4)::after, .seg--cours::after { transform: scaleX(1); }
.seg--cours::after { background: var(--encours); }
.js .vue:not(.on) .seg::after { transform: scaleX(0); transition: none; }
.js .vue.on .seg::after { transition-delay: calc(var(--i) * 150ms + 300ms); }
.ruban__noms { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 7px; font-size: 11px; color: var(--encre-60); text-align: center; }
.postes { margin-top: 14px; display: grid; gap: 8px; font-size: 14.5px; }
.postes > span { display: flex; align-items: center; gap: 10px; }
.postes .c { width: 22px; height: 22px; background-size: 14px; }

/* Production épurée : trois étapes se cochent une à une, puis la commande passe d'elle-même en pose */
.prod { background: var(--app-fond); border-radius: 14px; box-shadow: var(--ombre-app); padding: 28px 30px 20px; max-width: 500px; width: 100%; margin-inline: auto; }
.prod__tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--app-trait); }
.prod__tete b { font: 600 28px var(--titre); letter-spacing: -0.02em; }
.prod__stade { display: grid; overflow: hidden; border-radius: 999px; font: 600 14px var(--texte); }
.prod__stade > span { grid-area: 1 / 1; padding: 7px 16px; text-align: center; background: var(--violet); color: var(--encre); transition: opacity 300ms var(--ease), transform 400ms var(--ease); }
.prod__stade > span:first-child { opacity: 0; transform: translateY(-100%); }
.prod__liste { list-style: none; margin: 0; padding: 0; }
.prod__liste li { display: flex; align-items: center; gap: 16px; padding: 18px 0; font: 600 20px var(--titre); border-bottom: 1px solid var(--app-trait); }
.prod__liste li:last-child { border-bottom: 0; }
.prod__liste .c { width: 28px; height: 28px; background-size: 17px; background-color: var(--fait); background-image: var(--coche); }
.js .vue:not(.on) .prod__liste .c { background-color: var(--app-vide); background-image: none; }
.js .vue:not(.on) .prod__stade > span:first-child { opacity: 1; transform: none; }
.js .vue:not(.on) .prod__stade > span:last-child { opacity: 0; transform: translateY(100%); }
.js .vue.on .prod__liste .c { transition: background-color 200ms var(--ease) var(--d); animation: case-pop 520ms var(--ease) var(--d); }
.prod__liste li:nth-child(1) { --d: 700ms; } .prod__liste li:nth-child(2) { --d: 1250ms; } .prod__liste li:nth-child(3) { --d: 1800ms; }
.js .vue.on .prod__stade > span { transition-delay: 2350ms; }

/* V4 — téléphone du poseur */
.vue--tel { justify-self: center; }
.tel { width: 300px; border-radius: 48px; background: var(--encre); padding: 11px; box-shadow: 0 30px 60px -30px rgb(27 23 21 / .55); }
.tel__ecran { border-radius: 38px; background: var(--app-fond); padding: 12px 16px 22px; font-size: 14px; }
.tel__statut { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 10px 14px; }
.tel__ile { width: 84px; height: 24px; border-radius: 999px; background: var(--encre); }
.tel__titre { font: 600 24px var(--titre); letter-spacing: -0.02em; }
.tel__sous { color: var(--encre-60); font-size: 13px; margin-top: 2px; }
.tel__jour { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-60); }
.tel__pose { background: #fff; border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px var(--app-trait); }
.tel__pose--ouverte { box-shadow: inset 0 0 0 1.5px var(--violet); }
.tel__heure { font-size: 12.5px; color: var(--prune); font-weight: 600; }
.tel__client { font: 600 17px var(--titre); margin-top: 2px; }
.tel__objet { color: var(--encre-60); font-size: 13px; }
.tel__ligne { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13.5px; }
.tel__ligne span { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--mauve-doux); color: var(--prune); font-size: 13px; }
.tel__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tel__boutons > span { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.tel__faite { position: relative; background: var(--app-vide); transition: background-color 400ms var(--ease) 2000ms, color 400ms var(--ease) 2000ms; }
.tel__doigt { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgb(27 23 21 / .2); opacity: 0; transform: scale(1.5); pointer-events: none; }
.vue.on .tel__doigt { animation: appui 800ms var(--ease) 1500ms forwards; }
@keyframes appui { 0% { opacity: 0; transform: scale(1.5); } 45% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1); } }
.tel__faite .c { width: 20px; height: 20px; background-size: 13px; background-color: #fff; transition: background-color 400ms var(--ease) 2000ms; }
.tel__non { box-shadow: inset 0 0 0 1px var(--trait-fort); color: var(--encre-60); }
.vue.on .tel__faite { background: var(--fait-doux); color: var(--fait); }
.vue.on .tel__faite .c { background-color: var(--fait); background-image: var(--coche); }
/* Pose épurée : une seule pose, l'adresse du chantier bien en vue */
.tel__ecran--epure { padding-bottom: 24px; }
.tel__ecran--epure .tel__titre { margin-bottom: 16px; }
.tel__ecran--epure .tel__heure { font-size: 13.5px; }
.tel__ecran--epure .tel__client { font-size: 20px; }
.tel__adresse { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--mauve-doux); color: var(--prune); font-weight: 600; font-size: 15px; }
.tel__repere { width: 18px; height: 18px; flex: none; fill: currentColor; }
.js .vue:not(.on) .tel__adresse { opacity: 0; transform: translateY(8px); }
.js .vue.on .tel__adresse { transition: opacity 400ms var(--ease) 500ms, transform 500ms var(--ease) 500ms; }
/* Téléphone aux proportions réelles : la carte de la pose au centre de l'écran */
.tel--reel { width: 270px; aspect-ratio: 71.6 / 147.6; padding: 9px; border-radius: 46px; }
.tel--reel .tel__ecran { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 37px; padding: 12px 14px 10px; }
/* L'écran est rempli par la semaine : la pose du jour en avant, les suivantes en dessous */
.tel--reel .tel__titre { margin-bottom: 0; }
.tel--reel .tel__jour { margin: 16px 0 8px; font-size: 11.5px; }
.tel--reel .tel__pose { padding: 16px; box-shadow: inset 0 0 0 1.5px var(--violet), 0 14px 28px -18px rgb(107 74 130 / .55); }
.tel__suite { list-style: none; margin: 0 0 auto; padding: 0; }
.tel__suite li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--app-trait); }
.tel__suite li:last-child { border-bottom: 0; }
.tel__suite span { font-size: 12.5px; color: var(--encre-60); }
.tel__suite b { font: 600 15px var(--titre); color: var(--encre-60); }
.tel--reel .tel__heure { font-size: 14px; }
.tel--reel .tel__client { font-size: 23px; margin-top: 4px; }
.tel--reel .tel__adresse { margin-top: 16px; font-size: 15px; padding: 14px 12px; }
.tel--reel .tel__boutons { margin-top: 16px; }
.tel--reel .tel__boutons > span { padding: 13px 8px; font-size: 15px; }
.tel--reel .tel__ecran::after { content: ""; flex: none; align-self: center; width: 96px; height: 4px; border-radius: 999px; background: var(--encre); }

/* V5 — on tape le nom, la fiche s'ouvre : l'avancement de la commande, comme dans l'app */
.recherche { display: grid; gap: 12px; max-width: 560px; margin-inline: auto; width: 100%; }
.recherche__champ { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--violet), 0 18px 36px -24px rgb(27 23 21 / .3); font-size: 17px; }
.recherche__champ svg { width: 20px; height: 20px; color: var(--encre-60); flex: none; }
.recherche__saisie { min-height: 1.3em; }
.recherche__saisie:empty::before { content: attr(data-vide); color: var(--encre-40); }
.recherche__resultat { border-radius: 16px; background: var(--app-fond); box-shadow: var(--ombre-app); padding: 30px 30px 34px; transition: opacity 350ms var(--ease), transform 450ms var(--ease); }
.js .recherche:not(.trouve) .recherche__resultat { opacity: 0; transform: translateY(12px); }
.fc__nom { font: 600 30px/1.1 var(--titre); letter-spacing: -0.025em; }
.fc__sec { display: flex; align-items: center; gap: 9px; margin: 26px 0 24px; font: 700 12px var(--titre); letter-spacing: .09em; text-transform: uppercase; }
.fc__sec::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--prune); flex: none; }
.fc__sec::after { content: ""; flex: 1; height: 1px; background: var(--app-trait); }
/* La frise : les étapes faites en vert, l'étape en cours en violet */
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.frise::before, .frise::after { content: ""; position: absolute; left: 12.5%; top: 13px; height: 3px; border-radius: 3px; }
.frise::before { right: 12.5%; background: var(--app-vide); }
.frise::after { width: 50%; background: var(--fait); transform-origin: left; }
.frise li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; font: 600 15px var(--titre); color: var(--encre-40); }
.frise i { width: 29px; height: 29px; border-radius: 50%; background: var(--app-fond); box-shadow: inset 0 0 0 3px var(--app-vide); }
.frise .f { color: var(--fait); }
.frise .f i { background: var(--fait) var(--coche) center / 18px no-repeat; box-shadow: none; }
.frise .ici { color: var(--encre); }
.frise .ici i { background: var(--violet); box-shadow: 0 0 0 6px rgb(155 111 186 / .2); }
.js .recherche:not(.trouve) .frise::after { transform: scaleX(0); }
.js .recherche:not(.trouve) .frise li { color: var(--encre-40); }
.js .recherche:not(.trouve) .frise i { background: var(--app-fond); box-shadow: inset 0 0 0 3px var(--app-vide); }
.js .recherche.trouve .frise::after { transition: transform 900ms var(--ease) 350ms; }
.js .recherche.trouve .frise li, .js .recherche.trouve .frise i { transition: color 250ms var(--ease) var(--d), background-color 250ms var(--ease) var(--d), box-shadow 300ms var(--ease) var(--d); }
.frise li:nth-child(1) { --d: 350ms; } .frise li:nth-child(2) { --d: 750ms; } .frise li:nth-child(3) { --d: 1150ms; }

/* ---------- 5. Preuve : une phrase géante centrée qui porte le chiffre, sur un bandeau prune ---------- */
.preuve { padding-block: clamp(96px, 11vw, 160px); background: var(--prune); color: var(--creme); text-align: center; }
.preuve__titre { margin-inline: auto; max-width: none; font: 600 clamp(2.75rem, 6.4vw, 6rem)/1.02 var(--titre); letter-spacing: -0.035em; }
@media (min-width: 601px) { .preuve__titre span { display: block; } }
.preuve__texte { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 46ch; font: 400 clamp(1.125rem, 1vw + .8rem, 1.5rem)/1.5 var(--texte); color: rgb(244 240 232 / .86); }

/* ---------- 6. Appel final : la dernière image ---------- */
.final { padding-block: clamp(80px, 9vw, 120px) clamp(72px, 8vw, 112px); background: var(--encre); color: var(--creme); }
.final .btn--encre { background: var(--violet); color: var(--encre); }
.final .btn--encre:hover { background: var(--mauve); }
.final .final__titre { font-size: clamp(3rem, 6.6vw, 6.25rem); line-height: .98; letter-spacing: -0.035em; max-width: none; }
/* « de vos commandes client » tient sur une ligne : le titre reste sur deux lignes (ordinateur) */
@media (min-width: 901px) { .final__titre .ligne > span { white-space: nowrap; } }
.final__titre .ligne { display: block; overflow: hidden; padding-bottom: .08em; }
.final__titre .ligne > span { display: inline-block; }
.final.pret .final__titre .ligne > span { transform: translateY(105%); }
.final.pret.monte .final__titre .ligne > span { transform: none; transition: transform 800ms var(--ease); }
.final.pret.monte .final__titre .ligne + .ligne > span { transition-delay: 120ms; }
.final__bas { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(32px, 4vw, 48px); }
.final__bas .hero__actions { margin-top: 0; }
.final .lien-fleche, .final .mention { color: var(--mauve); }
.final + * { border-top: 0; }

/* Écrans d'ordinateur peu hauts (portables 720 à 820 px) : le visuel des étapes se réduit pour tenir entier */
@media (min-width: 901px) and (max-height: 820px) {
  .scene__colle { transform: scale(.84); transform-origin: center; }
  .js .chapitres, .js .scene { top: calc(50vh - 280px + 20px); }
}

/* ---------- Tablette et mobile ---------- */
@media (max-width: 900px) {
  .reponses { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-block: 88px 104px; }
  .probleme { min-height: 0; padding-block: 48px 96px; }
  .etapes__grille { grid-template-columns: 1fr; }
  .scene { display: contents; }
  .chapitre, .js .chapitre { min-height: 0; opacity: 1; padding-top: 56px; max-width: none; }
  .chapitre:first-child { margin-top: 0; }
  .js .vues { height: auto; }
  .planning { padding: 12px 8px; }
  .planning__vues, .pl-auj { display: none; }
  .planning__barre b { font-size: 14px; }
  .pl-grille { grid-template-columns: 34px repeat(3, 1fr); }
  .pl-qui { padding: 6px 4px; justify-content: center; font-size: 0; }
  .pl-jour { padding: 6px 4px; }
  .pl-jour b { font-size: 14px; }
  .pl-case { padding: 3px; min-height: 64px; }
  .ev { padding: 4px; }
  .ev__t { font-size: 10.5px; }
  .ev__c { font-size: 12px; }
  .chapitre .vue { margin-top: 28px; }
  .chapitre .vue--tel { align-self: center; }
  .js .vue { grid-area: auto; opacity: 1; transform: none; }
  .js .vues { min-height: 0; }
}
@media (max-width: 560px) {
  .fiche, .recherche__resultat { padding: 18px 16px; }
  .fiche__tete { flex-direction: column; gap: 10px; }
  .fiche__meta { justify-items: start; grid-auto-flow: column; gap: 12px; }
  .stade { font-size: 12px; } .stade li { padding: 6px 2px; }
  .ruban__noms { display: none; }
  .bc__tete { padding: 14px 16px; } .bc__doc, .bc__reponse { margin-inline: 16px; } .bc__doc { height: 120px; }
  .bc__choix > span { font-size: 13.5px; min-height: 48px; }
  .bc__ok { display: none; }
  .batp { padding: 18px; } .batp__visuel { height: 110px; }
  .tel { width: 270px; } .tel__ecran { min-height: 0; }
  .final .final__titre { font-size: clamp(2.6rem, 12vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .question, .question.derriere { opacity: 1; transform: none; filter: none; color: var(--encre); }
}

/* ---------- Pages de présentation (BAT, suivi de production) ---------- */
.page-tete .hero__actions { margin-top: 32px; }
.page-tete h1 .goutte-point { width: .26em; height: .26em; }
.tableur-page .app-cadre { margin-top: clamp(48px, 6vw, 72px); }
.benefice h2 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.benefice .chapitre__etape { margin-bottom: 14px; }
.visuel { margin: 0; }
.visuel .vue { display: grid; justify-items: center; }
.visuel .vue > * { width: 100%; }
.visuel .vue > .tel { width: 300px; }
.certificat { background: #fff; border-radius: 14px; padding: 26px 28px; box-shadow: var(--ombre-app); max-width: 460px; justify-self: center; }
.certificat__titre { display: flex; align-items: center; gap: 12px; font: 600 19px var(--titre); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--app-trait); }
.certificat .pdf { font: 700 11px var(--texte); color: #fff; background: var(--alerte); padding: 8px 6px; border-radius: 5px; }
.certificat dl { margin: 0; display: grid; gap: 12px; }
.certificat dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 15px; }
.certificat dt { color: var(--encre-60); }
.certificat dd { margin: 0; font-weight: 600; }
.batp--marque .batp__tete b { display: flex; align-items: center; gap: 10px; }
.marque-atelier { width: 26px; height: 26px; border-radius: 7px; background: var(--fait); }
.batp--marque .batp__bouton { background: var(--fait); color: var(--app-fond); }
.batp--marque .batp__visuel span { color: #C9DDB9; }
.alertes { background: var(--app-fond); border-radius: 14px; padding: 22px; box-shadow: var(--ombre-app); display: grid; gap: 10px; max-width: 520px; justify-self: center; }
.alertes__titre { display: flex; align-items: center; gap: 10px; font: 600 18px var(--titre); margin-bottom: 4px; }
.alertes__titre span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: #A03325; color: #fff; font-size: 12px; }
.alerte { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); }
.alerte__point { width: 10px; height: 10px; border-radius: 50%; background: #C84527; margin-top: 6px; flex: none; box-shadow: 0 0 0 4px #F5DCD8; }
.alerte b { display: block; font-size: 15px; }
.alerte small { color: var(--encre-60); font-size: 13.5px; }
.recap { padding-top: var(--section); }
.recap h2 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.recap__prix { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.recap__prix li { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--creme-clair); box-shadow: inset 0 0 0 1px var(--trait); }
.recap__prix span { color: var(--encre-60); font-size: 15px; }
.recap__prix b { font: 600 clamp(1.5rem, 1.6vw + .6rem, 2rem)/1 var(--titre); letter-spacing: -0.02em; }
.recap__prix small { font: 500 14px var(--texte); color: var(--encre-60); margin-left: 4px; letter-spacing: 0; }
.recap__plus { margin-top: 22px; color: var(--encre-60); font-size: 17px; max-width: 60ch; }
.recap__plus a { color: var(--prune); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .recap__prix { grid-template-columns: 1fr; }
  .benefice .visuel { order: 2; }
}

/* --- Détails des modules --- */
.etat { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--app-vide); color: var(--encre-60); white-space: nowrap; }
.etat--ok { background: var(--fait-doux); color: var(--fait); }
.etat--att { background: var(--encours-doux); color: #8B6520; }
.etat--modif { background: #F5DCD8; color: #A03325; }
.dossier, .liste-bat, .pipeline, .tdb, .fil-msg, .vues-roles { background: var(--app-fond); border-radius: 14px; box-shadow: var(--ombre-app); padding: 22px; }
.dossier__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--app-trait); }
.dossier__tete div { display: grid; } .dossier__tete div b { font: 600 18px var(--titre); } .dossier__tete div span { color: var(--encre-60); font-size: 14px; }
.dossier__fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.dossier__fil::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--app-vide); }
.dossier__fil li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; position: relative; }
.dossier__fil b { font-size: 15px; } .dossier__fil small { display: block; color: var(--encre-60); font-size: 13.5px; }
.pt { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--mauve); margin-top: 3px; }
.pt--auto { box-shadow: inset 0 0 0 2px var(--encours); } .pt--modif { box-shadow: inset 0 0 0 2px #C84527; } .pt--ok { background: var(--fait); box-shadow: none; }
.tel__ecran--web { padding: 12px 10px 18px; }
.batp--tel { padding: 6px 4px 0; gap: 12px; font-size: 13px; }
.batp--tel .batp__visuel { height: 120px; margin: 4px; }
.batp--tel .batp__cert { padding: 10px; }
.empreinte { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--encre-80); font-weight: 500 !important; }
.liste-bat { display: grid; gap: 8px; max-width: 520px; justify-self: center; }
.liste-bat__titre { display: flex; align-items: center; gap: 10px; font: 600 18px var(--titre); margin-bottom: 6px; }
.liste-bat__titre span { font: 600 12px var(--texte); background: var(--encours); color: #fff; border-radius: 999px; padding: 2px 8px; }
.lb { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); }
.lb b { font-size: 15px; } .lb small { grid-column: 1; color: var(--encre-60); font-size: 13px; } .lb .etat { grid-column: 2; grid-row: 1 / 3; }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px; }
.pcol { display: grid; gap: 8px; align-content: start; background: rgb(27 23 21 / .03); border-radius: 10px; padding: 10px 8px; min-height: 260px; }
.pcol > p { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--encre-60); padding: 0 4px 4px; }
.pcol > p i { font-style: normal; background: var(--app-vide); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.pc { display: grid; gap: 4px; padding: 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); }
.pc b { font-size: 13.5px; } .pc small { color: var(--encre-60); font-size: 12px; } .pc .etat { justify-self: start; margin-top: 2px; font-size: 10.5px; }
.pc--vous { box-shadow: inset 0 0 0 1.5px var(--violet); background: var(--mauve-doux); }
.mini-ruban { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 4px; }
.mini-ruban span { height: 6px; border-radius: 2px; background: var(--fait); } .mini-ruban .cours { background: var(--encours); } .mini-ruban .vide { background: var(--app-vide); }
.bascules { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: b; display: grid; gap: 12px; max-width: 36ch; }
.bascules li { counter-increment: b; position: relative; padding-left: 40px; min-height: 26px; color: var(--encre-80); font-size: 16px; }
.bascules li::before { content: counter(b); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: var(--encre); font: 600 13px var(--titre); }
.regles { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 38ch; }
.regles li { padding-left: 22px; position: relative; color: var(--encre-80); font-size: 16px; }
.regles li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #C84527; }
.alerte--pause .alerte__point { background: var(--encre-40); box-shadow: 0 0 0 4px var(--app-vide); }
.tdb { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 16px; }
.tdb__carte { background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--app-trait); padding: 14px; display: grid; gap: 4px; align-content: start; }
.tdb__carte > p { font-size: 12.5px; font-weight: 600; color: var(--encre-60); }
.tdb__goulot b { font: 600 22px var(--titre); color: #A03325; } .tdb__goulot small { color: var(--encre-60); font-size: 13px; }
.tdb__n { font: 600 34px/1 var(--titre); } .tdb__n--alerte { color: #A03325; }
.tdb__large { grid-column: 1 / -1; }
.barres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 130px; margin-top: 10px; }
.barres span { position: relative; height: calc(var(--v) * 100px); border-radius: 6px 6px 2px 2px; background: var(--mauve); }
.barres span.fort { background: #C84527; }
.barres i { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--encre-60); white-space: nowrap; }
.fil-msg { display: grid; gap: 12px; max-width: 520px; justify-self: center; }
.fil-msg__tete { display: grid; padding-bottom: 12px; border-bottom: 1px solid var(--app-trait); } .fil-msg__tete b { font: 600 17px var(--titre); } .fil-msg__tete span { font-size: 13px; color: var(--encre-60); }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .av, .vr .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mauve-doux); color: var(--prune); font-size: 12px; font-weight: 700; flex: none; }
.msg > div { background: #fff; border-radius: 4px 12px 12px 12px; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--app-trait); }
.msg b { font-size: 12.5px; color: var(--prune); } .msg p { font-size: 14.5px; }
.msg--moi { justify-content: flex-end; } .msg--moi > div { background: var(--encre); color: var(--app-fond); border-radius: 12px 4px 12px 12px; box-shadow: none; } .msg--moi b { color: var(--mauve); }
.vues-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.vr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--app-trait); padding: 14px; }
.vr .av { grid-row: 1 / 3; } .vr b { font-size: 15px; } .vr small { color: var(--encre-60); font-size: 13px; }
.ne-fait-pas { margin-top: var(--section); background: var(--encre); color: var(--creme); padding-block: clamp(72px, 9vw, 120px); }
.ne-fait-pas h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.025em; max-width: 20ch; }
.ne-fait-pas h2 span { color: var(--mauve); }
.ne-fait-pas p { margin-top: 24px; font-size: var(--fs-lead); color: var(--trait-fort); max-width: 46ch; }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .tdb { grid-template-columns: 1fr 1fr; } .tdb__goulot { grid-column: 1 / -1; }
  .vues-roles { grid-template-columns: 1fr; }
  .barres i { display: none; }
  .barres .fort i { display: block; }
}

/* ---------- Pour qui, gains des étapes, pourquoi Wobjok ---------- */

.sav { margin-top: 0; padding-block: var(--section); background: var(--mauve-doux); box-shadow: 0 0 0 100vmax var(--mauve-doux); clip-path: inset(0 -100vmax); }
.sav__plus-cmd { color: var(--prune); }
.sav__intro { margin-top: 24px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 62ch; }
/* Les objections en cartes : la question seule, la réponse s'ouvre au clic */
.sav__liste { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sav__carte { position: relative; display: grid; border-radius: 24px; background: #fff; overflow: hidden; transition: background-color 450ms var(--ease), box-shadow 450ms var(--ease), transform 300ms var(--ease); }
.sav__bouton { grid-area: 1 / 1; position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: clamp(26px, 2.6vw, 36px); border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: inherit; }
.sav__bouton:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.sav__q { font: 600 clamp(1.5rem, 1.2vw + 1rem, 2rem)/1.15 var(--titre); letter-spacing: -0.02em; color: var(--encre); max-width: 20ch; transition: opacity 250ms var(--ease), transform 400ms var(--ease); }
.sav__plus { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--encre); flex: none; transition: transform 450ms var(--ease), background-color 450ms var(--ease); }
.sav__plus::before, .sav__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: var(--creme); }
.sav__plus::after { transform: rotate(90deg); }
/* La réponse est centrée dans la carte, à gauche du bouton qui la referme */
.sav__r { grid-area: 1 / 1; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 2.6vw, 36px); padding-right: calc(clamp(26px, 2.6vw, 36px) + 76px); }
.sav__r p { font: 600 clamp(1.375rem, .9vw + 1rem, 1.75rem)/1.18 var(--titre); letter-spacing: -0.02em; color: var(--creme); max-width: 26ch; }
.sav__r .sav__preuve { margin-top: 18px; max-width: 36ch; font: 600 17px/1.4 var(--texte); letter-spacing: 0; color: var(--mauve-doux); }
.js .sav__carte:not(.ouvert) .sav__r { opacity: 0; transform: translateY(14px); pointer-events: none; }
.js .sav__carte .sav__r { transition: opacity 350ms var(--ease) 120ms, transform 450ms var(--ease) 120ms; }
.js .sav__carte.ouvert { background: var(--prune); box-shadow: none; }
.js .sav__carte.ouvert .sav__q { opacity: 0; transform: translateY(-14px); }
.js .sav__carte.ouvert .sav__plus { transform: rotate(135deg); background: var(--creme); }
.js .sav__carte.ouvert .sav__plus::before, .js .sav__carte.ouvert .sav__plus::after { background: var(--prune); }
@media (hover: hover) { .js .sav__carte:not(.ouvert):hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgb(107 74 130 / .45); } .js .sav__carte:not(.ouvert):hover .sav__plus { background: var(--violet); } }
/* Sans JavaScript : la réponse sous la question */
html:not(.js) .sav__carte { display: block; }
html:not(.js) .sav__plus { display: none; }
html:not(.js) .sav__r { padding-top: 0; }
html:not(.js) .sav__r p { color: var(--encre-80); }
html:not(.js) .sav__r .sav__preuve { color: var(--prune); }

.final__action .mention { margin-top: 14px; }
.final__attente { margin-top: 0; font: 500 var(--fs-lead)/1.4 var(--titre); color: rgb(244 240 232 / .72); max-width: 40ch; }
.final .lien-fleche small { color: var(--mauve); opacity: .75; }

@media (max-width: 900px) {
  .sav__liste { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .fc__nom { font-size: 24px; }
  .fc__sec { margin: 20px 0 18px; }
  .frise li { font-size: 13px; gap: 8px; }
  .sav__plus { width: 44px; height: 44px; }
  /* Section finale : la mention juste sous le bouton, puis le lien vers les offres */
  .final__action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .final__action .hero__actions { display: contents; }
  .final__action .btn { order: 1; }
  .final__action .mention { order: 2; margin-top: 0; }
  .final__action .lien-fleche { order: 3; align-self: flex-start; }
  .sav__bouton, .sav__r { padding: 22px; }
  .sav__r { padding-right: 82px; }
  .sav__q { font-size: 1.3rem; }
  .sav__r p { font-size: 1.2rem; }
  .sav__r .sav__preuve { margin-top: 10px; font-size: 15px; }
}

/* --- Pages produit (suivi de production, BAT en ligne) --- */
.t2, .ph__titre { text-wrap: balance; }
.t2 .fort, .ph__titre .fort { color: var(--prune); }
@media (min-width: 901px) { .t2 span, .ph__titre span { display: block; white-space: nowrap; } }
.t2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.025em; }
.ph { padding-top: clamp(56px, 8vw, 112px); }
.ph__sur { margin-bottom: 16px; font-weight: 600; font-size: 17px; color: var(--prune); }
.ph__titre { font-size: clamp(2.5rem, 3.4vw + .3rem, 3.875rem); line-height: 1.05; letter-spacing: -0.03em; }
.ph__resume { margin-top: 20px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 40ch; }
.ph .hero__actions { margin-top: 32px; }
.ph--duo { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.ph--duo > * { min-width: 0; }
.bande-chiffres { margin-top: clamp(64px, 8vw, 112px); padding-block: clamp(56px, 7vw, 96px); background: var(--prune); color: var(--creme); }
.bande-chiffres ul { list-style: none; margin: 0 auto; padding-block: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.bande-chiffres b { display: block; font: 600 clamp(3rem, 5vw, 4.75rem)/1 var(--titre); letter-spacing: -0.035em; }
.bande-chiffres span { display: block; margin: 12px auto 0; max-width: 24ch; font-size: var(--fs-lead); line-height: 1.4; color: rgb(244 240 232 / .86); text-wrap: balance; }
.vit { padding-top: var(--section); text-align: center; }
.vit__p { margin: 18px auto 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--encre-60); text-wrap: pretty; }
.vit__v { margin: clamp(40px, 5vw, 56px) auto 0; max-width: 680px; text-align: left; }
.vit__v .vue { display: grid; justify-items: center; }
.vit__v .vue > * { width: 100%; }
.vit__v .vue > .tel.tel--reel { width: 270px; } /* même taille que sur l'accueil */
@media (min-width: 901px) { .js .vit__v .tel--reel { zoom: .84; } }
.faq-p { padding-block: var(--section); }
.faq-p .cartes-q { margin-top: clamp(40px, 5vw, 56px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); align-items: start; }
.faq-p .carte-q summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; align-content: center; min-height: 0; padding: 22px 24px; cursor: pointer; }
.faq-p .carte-q summary::-webkit-details-marker { display: none; }
.faq-p .carte-q p { padding: 0 24px 24px; color: var(--encre-80); }
.faq-p .carte-q p .lien-fleche { margin-top: 12px; }
.faq-p .carte-q__plus { grid-row: auto; }
.faq-p .carte-q[open] .carte-q__plus { transform: rotate(45deg); }
/* Visuels propres à ces pages */
.etapes-cmd { background: var(--app-fond); border-radius: 14px; box-shadow: var(--ombre-app); padding: 22px; }
.ec__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.ec__liste li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-trait); }
.ec__liste b { font-size: 15px; font-weight: 600; }
.ec__suite { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--mauve-doux); color: var(--prune); font-size: 15px; }
.ec__suite b { font: 600 17px var(--titre); }
.tel__non--on { background: var(--alerte); color: #fff; box-shadow: none; }
.tel__motif { margin-top: 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--app-vide); }
.tel__motif small { font-size: 12px; color: var(--encre-60); } .tel__motif b { font-size: 15px; }
.batp__deux { display: flex; flex-wrap: wrap; gap: 10px; }
.batp__modif { padding: 12px 18px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--trait-fort); font-weight: 600; color: var(--encre-80); }
.batp--tel .batp__deux { display: grid; } .batp--tel .batp__deux > span { text-align: center; }
.batp__visuel--zoom { position: relative; height: 170px; overflow: hidden; }
.batp__visuel--zoom > span { font-size: 17px; letter-spacing: .2em; }
.loupe { --d: 22px; position: absolute; left: calc(50% + var(--d)); top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--encre); box-shadow: 0 0 0 3px #fff, 0 12px 24px -10px rgb(0 0 0 / .6); font-style: normal; }
.batp__visuel--zoom .loupe span { position: absolute; left: 50%; top: 50%; font-size: 37.4px; letter-spacing: .2em; white-space: nowrap; transform: translate(calc(-50% - var(--d) * 2.2 + .1em), -50%); }
.batp__tete .marque-atelier { display: inline-grid; place-items: center; color: #fff; font: 700 14px var(--titre); }
.vit__v .vue > :not(.tel) { max-width: none; }
.vit__v .barres i { font-size: 12px; }
.ph--duo .pc .etat { font-size: 11.5px; }
.vv { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--app-trait); }
.vv:first-of-type { border-top: 0; padding-top: 0; }
.vv__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--app-vide); font: 600 15px var(--titre); color: var(--encre-60); }
.vv--actu .vv__n { background: var(--violet); color: var(--encre); }
.vv b { display: block; font-size: 15px; } .vv small { color: var(--encre-60); font-size: 13.5px; }
@media (max-width: 900px) {
  .ph--duo, .bande-chiffres ul, .faq-p .cartes-q { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ec__liste { grid-template-columns: 1fr; } }
.tel--reel .batp--tel { flex: 1; display: flex; flex-direction: column; padding-bottom: 12px; }
.tel--reel .batp__visuel--zoom { flex: 1; height: auto; min-height: 0; }
@media (max-width: 900px) { .vit__v .ev__c { font-size: 12.5px; } }
/* --- Fin des pages produit --- */