/* ==========================================================================
   Groupe « services » : la page d'ensemble (les cartes à collectionner) et les sept pages de service.
   Une seule idée relie le groupe : chaque service est une carte de jeu. On la retrouve en gros sur la page
   d'ensemble, en héros sur chaque page de service, et en petites cartes dans « Complétez la collection ».
   Chaque page de service a ensuite son élément signature, tiré de son métier.
   ========================================================================== */

/* ---------- thèmes de section : papier, rouge, nuit, charbon */
.th-papier { background: radial-gradient(rgba(23, 23, 26, .07) 1.3px, transparent 1.8px) 0 0 / 13px 13px, var(--papier); color: var(--nuit); }
.th-rouge { background: url(../../_commun/img/fonds/decor-services.svg) center / cover, var(--rouge); color: var(--nuit); }
.th-nuit { background: var(--nuit); color: var(--blanc); }
.th-charbon { background: radial-gradient(rgba(246, 246, 247, .05) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--charbon); color: var(--blanc); }
.th-papier .titre, .th-rouge .titre { color: var(--nuit); }
.th-papier .titre em { color: var(--rouge-fonce); }
.th-rouge .titre em { color: var(--blanc); }
.th-papier .surtitre { color: var(--rouge-fonce); }
.th-rouge .surtitre { color: var(--nuit); }
.th-papier a[class]:not(.btn):not(.lien), .th-rouge a[class]:not(.btn):not(.lien) { color: inherit; }
/* liens texte : l'effet commun du site (trait qui monte en surlignage) ; couleurs réglées selon le fond */
.th-papier a:not([class]) { --hl: var(--rouge); --hl-texte: #fff; }
.th-rouge a:not([class]), .sv-appel a:not([class]), .sv-appel .lien { --hl: var(--nuit); --hl-texte: var(--jaune); }
/* mêmes effets pour les boutons qui se lisent comme des liens */
.cl-classeur__tout, .sig-app__reprendre { --hl: var(--rouge); --hl-texte: #fff;
  background: linear-gradient(var(--hl), var(--hl)) 0 100% / 100% 2px no-repeat;
  transition: background-size .28s cubic-bezier(.7, 0, .2, 1), color .15s ease-out; }
@media (hover: hover) { .cl-classeur__tout:is(:hover, :focus-visible), .sig-app__reprendre:is(:hover, :focus-visible) { background-size: 100% 100%; color: var(--hl-texte); } }

.sv-sig, .sv-fait, .sv-etapes, .sv-faq, .sv-entretien, .cl-classeur, .cl-combos { position: relative; padding: clamp(80px, 9vw, 140px) 0; }
/* la section « Ce qu'on fait » monte en biais sur la signature, comme les services sur l'accueil */
.sv-fait { z-index: 2; margin-top: calc(-1 * var(--biais)); padding-top: calc(clamp(80px, 9vw, 140px) + var(--biais) * .6); clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   LA CARTE À COLLECTIONNER
   Recto : cadre de couleur, papier tramé, nom à l'étiqueteuse, numéro, illustration sur rayons,
   « coup spécial » et trois stats utiles. Verso : détails et lien. Tout est en unités de conteneur (cqi)
   pour que la même carte vive en grand, en éventail ou dans une pochette.
   ========================================================================== */
.carte { --cadre: var(--rouge); --art: var(--rouge); --rayons: rgba(255, 255, 255, .2); --ombre: rgba(0, 0, 0, .5);
  position: relative; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; perspective: 1600px; }
.carte--jaune { --cadre: var(--jaune); --art: var(--jaune); --rayons: rgba(23, 23, 26, .12); }
.carte--blanc { --cadre: var(--blanc); --art: var(--charbon); --rayons: rgba(255, 255, 255, .1); }
.carte--charbon { --cadre: var(--charbon-2); --art: var(--nuit); --rayons: rgba(255, 0, 77, .28); }
.th-papier .carte, .carte--sur-clair { --ombre: var(--nuit); }
.carte__corps { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .75s var(--claque); }
.carte.est-retournee .carte__corps { transform: rotateY(180deg); }
.carte__recto, .carte__verso { position: absolute; inset: 0; border-radius: 4.5cqi; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carte__recto { padding: 3.6cqi; background: var(--cadre); box-shadow: 3.2cqi 3.2cqi 0 var(--ombre); }
.carte__papier { height: 100%; display: flex; flex-direction: column; gap: 2.4cqi; padding: 3.6cqi 3.6cqi 2.8cqi; border-radius: 2.6cqi; overflow: hidden; color: var(--nuit);
  background: radial-gradient(rgba(23, 23, 26, .085) 1px, transparent 1.4px) 0 0 / 3.4cqi 3.4cqi, var(--papier); }
.carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; margin: 0; }
.carte__nom { min-width: 0; padding: 1.7cqi 3cqi 1.4cqi; background: var(--nuit); color: #fff; font: 800 5.2cqi/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; rotate: -1.5deg;
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); }
.carte[data-carte="identite-de-marque"] .carte__nom, .carte[data-carte="automatisation-ia"] .carte__nom { font-size: 4.5cqi; letter-spacing: .06em; }
.carte__num { flex: none; font: 600 3.6cqi/1 var(--mono); letter-spacing: .06em; }
/* l'illustration : l'autocollant du service sur des rayons, dans une fenêtre cerclée de noir */
.carte__art { position: relative; flex: 1 1 0; min-height: 22cqi; display: grid; place-items: center; overflow: hidden; border: 1.1cqi solid var(--nuit); border-radius: 1.4cqi;
  background: radial-gradient(rgba(23, 23, 26, .16) 1px, transparent 1.5px) 0 0 / 2.6cqi 2.6cqi, repeating-conic-gradient(from 0deg at 50% 62%, var(--rayons) 0 5deg, transparent 5deg 14deg), var(--art); }
.carte__art img { width: 80%; height: 86%; object-fit: contain; rotate: -5deg; filter: drop-shadow(1.8cqi 1.8cqi 0 rgba(0, 0, 0, .38)); user-select: none; -webkit-user-drag: none; }
.carte__coup { margin: 0; font: 800 4.6cqi/1.05 var(--titre); text-transform: uppercase; text-wrap: balance; }
.carte__coup span { display: block; margin-bottom: 1cqi; font: 600 2.9cqi/1 var(--mono); letter-spacing: .14em; color: var(--rouge-fonce); }
.carte__stats { display: grid; gap: 1.2cqi; margin: 0; }
.carte__stats li { display: grid; grid-template-columns: 19cqi minmax(0, 1fr); gap: 2cqi; align-items: baseline; padding-top: 1.2cqi; border-top: .45cqi solid rgba(23, 23, 26, .2); }
.carte__stat-nom { font: 600 2.7cqi/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #55555E; }
.carte__stat-val { font: 500 3.5cqi/1.18 var(--titre); }
.carte__pied { display: flex; justify-content: space-between; margin: auto 0 0; font: 600 2.5cqi/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6B6B73; }
/* le bouton couvre tout le recto ; la pastille jaune du coin dit qu'on peut retourner la carte */
.carte__tourner { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.carte__tourner i { position: absolute; right: -2.6cqi; top: -2.6cqi; width: max(34px, 12cqi); height: max(34px, 12cqi); display: grid; place-items: center; border-radius: 50%; background: var(--jaune); color: var(--nuit); font-size: max(17px, 6cqi); border: .9cqi solid var(--nuit); }
/* le glyphe tourne sur son propre centre (boîte carrée de 1em, ligne de 1) : la pastille, elle, reste en place */
.carte__tourner i::before, .carte__v-retour i::before { display: block; width: 1em; height: 1em; line-height: 1; text-align: center; transform-origin: 50% 50%; transform-box: fill-box; transition: rotate .45s var(--claque); }
.carte__tourner:focus-visible i::before { rotate: 180deg; }
@media (hover: hover) { .carte__tourner:hover i::before { rotate: 180deg; } }
.carte__tourner:focus-visible { outline: 3px solid var(--jaune); outline-offset: 5px; }
/* verso : charbon tramé dans le même cadre, la même ombre */
.carte__verso { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 3.2cqi; padding: 7cqi 6.5cqi 6cqi; color: var(--blanc); border: 3.6cqi solid var(--cadre); box-shadow: -3.2cqi 3.2cqi 0 var(--ombre);
  background: radial-gradient(rgba(246, 246, 247, .06) 1.3px, transparent 1.8px) 0 0 / 3.4cqi 3.4cqi, var(--charbon); }
.carte__v-nom { display: flex; align-items: center; gap: 2cqi; margin: 0; font: 600 max(11px, 3.4cqi)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.carte__v-nom i { font-size: 1.6em; }
.carte__v-accroche { margin: 0; font: 800 max(17px, 6cqi)/1.04 var(--titre); text-transform: uppercase; text-wrap: balance; }
.carte__v-liste { display: grid; gap: 1.8cqi; margin: 0; }
.carte__v-liste li { position: relative; padding-left: 5cqi; font-size: max(13px, 4.3cqi); line-height: 1.28; color: #DADAE0; }
.carte__v-liste li::before { content: ""; position: absolute; left: 0; top: .42em; width: 2.2cqi; height: 2.2cqi; background: var(--rouge); rotate: 45deg; }
.carte__v-actions { display: flex; align-items: center; gap: 3cqi; margin-top: auto; }
.carte__v-lien { display: inline-flex; align-items: center; gap: 2cqi; min-height: max(42px, 12.5cqi); padding: 0 4cqi; border-radius: var(--r); background: var(--rouge); color: #fff; text-decoration: none; font: 700 max(15px, 5cqi)/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background .15s; }
@media (hover: hover) { .carte__v-lien:hover { background: var(--rouge-fonce); } }
.carte__v-lien i { transition: translate .25s var(--claque); }
@media (hover: hover) { .carte__v-lien:hover i { translate: 4px 0; } }
.carte__verso { cursor: pointer; }
/* la pastille du verso : même place que celle du recto, en rouge */
.carte__v-retour { position: absolute; z-index: 2; right: -6.2cqi; top: -6.2cqi; width: max(34px, 12cqi); height: max(34px, 12cqi); display: grid; place-items: center; padding: 0; border: .9cqi solid var(--nuit); border-radius: 50%; background: var(--rouge); color: #fff; font-size: max(17px, 6cqi); cursor: pointer; }
.carte__v-retour i { display: grid; place-items: center; }
.carte__v-retour:focus-visible i::before { rotate: -180deg; }
@media (hover: hover) { .carte__verso:hover .carte__v-retour i::before { rotate: -180deg; } }
.carte__v-retour:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

/* ---------- la petite carte (liens vers les autres services, combos) */
.mini-carte { --cadre: var(--rouge); --art: var(--rouge); --rayons: rgba(255, 255, 255, .2);
  display: block; aspect-ratio: 5 / 7; padding: 6px; border-radius: 12px; background: var(--cadre); color: var(--nuit); text-decoration: none; box-shadow: 7px 7px 0 #000; rotate: var(--penche, -2deg); transition: rotate .35s var(--claque); -webkit-tap-highlight-color: transparent; }
.mini-carte--jaune { --cadre: var(--jaune); --art: var(--jaune); --rayons: rgba(23, 23, 26, .12); }
.mini-carte--blanc { --cadre: var(--blanc); --art: var(--charbon); --rayons: rgba(255, 255, 255, .1); }
.mini-carte--charbon { --cadre: var(--charbon-2); --art: var(--nuit); --rayons: rgba(255, 0, 77, .28); }
.mini-carte__papier { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 9px 9px 11px; border-radius: 7px; background: radial-gradient(rgba(23, 23, 26, .085) 1px, transparent 1.4px) 0 0 / 9px 9px, var(--papier); }
.mini-carte__num { font: 600 11px/1 var(--mono); letter-spacing: .08em; }
.mini-carte__art { flex: 1 1 0; min-height: 0; display: grid; place-items: center; border: 3px solid var(--nuit); border-radius: 4px; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 62%, var(--rayons) 0 5deg, transparent 5deg 14deg), var(--art); }
.mini-carte__art img { width: 78%; height: 82%; object-fit: contain; rotate: -5deg; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
.mini-carte__nom { align-self: flex-start; max-width: 100%; padding: 6px 9px 5px; background: var(--nuit); color: #fff; font: 800 13px/1.05 var(--titre); letter-spacing: .06em; text-transform: uppercase; transition: background .15s;
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); }
.mini-carte:focus-visible { rotate: 0deg; }
@media (hover: hover) { .mini-carte:hover { rotate: 0deg; } }
.mini-carte:focus-visible .mini-carte__nom { background: var(--rouge); }
@media (hover: hover) { .mini-carte:hover .mini-carte__nom { background: var(--rouge); } }
.mini-carte--rouge:focus-visible .mini-carte__nom { background: var(--rouge-fonce); }
@media (hover: hover) { .mini-carte--rouge:hover .mini-carte__nom { background: var(--rouge-fonce); } }
.mini-carte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 6px; }

/* ==========================================================================
   HÉROS (pages de service et page d'ensemble)
   ========================================================================== */
.sv-heros, .cl-heros { position: relative; z-index: 1; overflow: hidden; background: var(--nuit); padding: clamp(36px, 5vw, 80px) 0 clamp(110px, 12vw, 170px); }
.sv-heros__fond { position: absolute; inset: 0; pointer-events: none; }
.sv-heros__rayons { position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 70% 48%, rgba(255, 0, 77, .2) 0 4deg, transparent 4deg 13deg);
  -webkit-mask: radial-gradient(circle at 70% 48%, #000 0, rgba(0, 0, 0, .6) 30%, transparent 62%); mask: radial-gradient(circle at 70% 48%, #000 0, rgba(0, 0, 0, .6) 30%, transparent 62%); }
.sv-heros__trame { position: absolute; inset: 0; background: radial-gradient(rgba(246, 246, 247, .1) 1.5px, transparent 2px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(115deg, transparent 40%, #000 95%); mask: linear-gradient(115deg, transparent 40%, #000 95%); }
.sv-heros__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(30px, 5vw, 90px); }
.sv-heros__titre { font-size: clamp(42px, 5.2vw, 88px); margin: 4px 0 24px; text-wrap: balance; }
.sv-heros__chapo { max-width: 52ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: #DCDCE2; }
.sv-heros__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.sv-heros__carte { position: relative; justify-self: center; width: clamp(280px, 22vw, 400px); rotate: 4deg; }
.sv-heros__ruban { position: absolute; z-index: 3; bottom: -16px; left: -34px; width: 124px; height: auto; rotate: 38deg; pointer-events: none; }
.sv-heros__astuce { position: absolute; left: -12px; bottom: -52px; display: flex; align-items: center; gap: 8px; margin: 0; rotate: -4deg; font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jaune); transition: opacity .3s; }
.sv-heros__astuce i { font-size: 22px; }
.sv-heros__carte:has(.est-retournee) .sv-heros__astuce { opacity: 0; }
/* le bas du héros se déchire sur la section suivante (la couleur suit le thème qui vient) */
:is(.sv-heros, .cl-heros), :is(.sv-heros, .cl-heros) + section { --h-dechirure: clamp(30px, 4.8vw, 70px); }
.dechirure { position: absolute; z-index: 3; left: 0; bottom: -1px; width: 100%; height: var(--h-dechirure); pointer-events: none; }
.dechirure__fibre { fill: #fff; }
.dechirure__fond { fill: var(--papier); }
.sv-heros:has(+ .th-rouge) .dechirure__fibre { fill: var(--papier); }
.sv-heros:has(+ .th-rouge) .dechirure__fond { fill: var(--rouge); }
/* la trame de la section suivante entre dans les creux : le bas du héros est découpé selon la déchirure
   (--dechirure, posée sur <main> par _travail/outils/dechirure.py) et la section glisse dessous */
:is(.sv-heros, .cl-heros) { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--h-dechirure) + 1px) no-repeat, var(--dechirure) bottom / 100% var(--h-dechirure) no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--h-dechirure) + 1px) no-repeat, var(--dechirure) bottom / 100% var(--h-dechirure) no-repeat; }
:is(.sv-heros, .cl-heros) + section { margin-top: calc(-1 * var(--h-dechirure)); border-top: var(--h-dechirure) solid transparent; background-origin: border-box; }
/* les calques de décor posés en absolu (rayons) montent eux aussi jusque dans la déchirure */
:is(.sv-heros, .cl-heros) + section > :is(.sig-pub__rayons, .sig-vitesse__rayons) { top: calc(-1 * var(--h-dechirure)); }
/* overflow: hidden coupe au bord intérieur, donc sous la déchirure : on découpe plutôt au bord extérieur (clip-path),
   et seulement en largeur pour le défilement (overflow-x: clip) */
:is(.sv-heros, .cl-heros) + section:is(.sig-pub, .sig-vitesse) { overflow: visible; overflow-x: clip; clip-path: inset(0); }

/* ==========================================================================
   CE QU'ON FAIT
   ========================================================================== */
.faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(26px, 3.2vw, 56px); margin-top: clamp(36px, 4vw, 56px); }
.fait { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-content: start; padding: 28px 0 34px; border-top: 3px solid rgba(23, 23, 26, .85); }
.fait__icone { grid-row: span 2; width: 58px; height: 58px; display: grid; place-items: center; background: var(--nuit); color: var(--jaune); font-size: 30px; border-radius: var(--r); box-shadow: 4px 4px 0 var(--rouge); rotate: -5deg; }
.fait:nth-child(even) .fait__icone { rotate: 4deg; }
.fait__titre { margin: 4px 0 0; font: 900 clamp(20px, 1.6vw, 26px)/1.02 var(--titre); text-transform: uppercase; }
.fait__texte { font-size: 17px; line-height: 1.5; }
.fait__texte a { font-weight: 700; }
.th-papier .fait__texte { color: #3A3A42; }
.th-rouge .fait { border-top-color: var(--nuit); }
.th-rouge .fait__icone { box-shadow: 4px 4px 0 var(--blanc); }

/* NoMoreSpam, la protection avancée : une petite fiche partenaire à ses couleurs (marine, robot clair, mot-symbole en Unbounded) qui mène à son site */
@font-face { font-family: 'Unbounded'; font-weight: 300 700; font-style: normal; font-display: swap; src: url(../../_commun/fonts/Unbounded-variable-latin.woff2) format('woff2'); }
.nms { display: grid; gap: 10px; max-width: min(100%, 340px); margin-top: 16px; padding: 16px 18px 15px; border: 3px solid var(--nuit); border-radius: 14px; background: #141C38; color: #fff; text-decoration: none; box-shadow: 6px 6px 0 var(--nuit); transition: background .15s; }
.nms:focus-visible { background: #1E2950; outline: none; }
@media (hover: hover) { .nms:hover { background: #1E2950; outline: none; } }
.nms:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
.nms__haut { justify-self: start; padding: 4px 8px 3px; border-radius: 4px; background: #35C99A; color: #141C38; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nms__logo { display: flex; align-items: center; gap: 9px; }
.nms__robot { width: 34px; height: 34px; flex: none; }
.nms__mot { color: #fff; font: 700 22px/1 'Unbounded', sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.nms__mot b { font-weight: 300; }
.nms__txt { font-size: 15px; line-height: 1.4; color: #D5DAEA; font-weight: 400; }
.nms__lien { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--mono); letter-spacing: .04em; color: #35C99A; }
.nms__lien i { transition: translate .2s var(--claque); }
@media (hover: hover) { .nms:hover .nms__lien i { translate: 2px -2px; } }

/* ==========================================================================
   COMMENT ÇA SE PASSE : quatre temps reliés par un courant qui se remplit au défilement
   ========================================================================== */
.etapes-sv { --p: 0; position: relative; margin-top: clamp(40px, 5vw, 70px); }
/* le courant va du centre du premier numéro au centre du dernier, jamais plus loin (posé par services.js,
   à l'horizontale sur une rangée, à la verticale sur une colonne) */
.etapes-sv__courant { position: absolute; left: var(--x0, 37px); top: var(--y0, 34px); width: var(--long, 0px); height: 6px; margin: -3px 0 0; border-radius: 3px; background: var(--charbon-2); }
.etapes-sv__courant[hidden] { display: none; }
.etapes-sv.est-vertical .etapes-sv__courant { width: 6px; height: var(--long, 0px); margin: 0 0 0 -3px; }
.th-papier .etapes-sv__courant { background: rgba(23, 23, 26, .14); }
.etapes-sv__plein { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); background: var(--rouge); border-radius: inherit; }
.etapes-sv.est-vertical .etapes-sv__plein { transform-origin: 50% 0; transform: scaleY(var(--p)); }
/* l'étincelle au bout du courant */
.etapes-sv__plein::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--jaune);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scaleX(calc(1 / max(var(--p), .02))); opacity: calc(var(--p) * 40); }
.etapes-sv.est-vertical .etapes-sv__plein::after { right: auto; left: 50%; top: auto; bottom: -9px; margin: 0 0 0 -9px; transform: scaleY(calc(1 / max(var(--p), .02))); }
.etapes-sv__liste { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.etape-sv__num { display: inline-grid; place-items: center; width: 74px; height: 74px; border: 4px solid var(--blanc); border-radius: 50%; background: var(--nuit); color: var(--jaune); font: 900 30px/1 var(--titre); rotate: -6deg; transition: background .3s, color .3s, scale .4s var(--claque); }
.th-papier .etape-sv__num { border-color: var(--nuit); background: var(--papier); color: var(--nuit); }
.etape-sv.est-allumee .etape-sv__num { background: var(--rouge); color: #fff; scale: 1.08; }
.etape-sv__titre { margin: 24px 0 10px; font: 900 clamp(21px, 1.8vw, 28px)/1.02 var(--titre); text-transform: uppercase; }
.etape-sv__texte { font-size: 17px; line-height: 1.5; color: var(--gris); }
.th-papier .etape-sv__texte { color: #3A3A42; }
/* une étape pas encore atteinte reste en retrait ; elle s'allume quand le courant l'atteint */
.etapes-sv.est-anime .etape-sv :is(.etape-sv__titre, .etape-sv__texte) { opacity: .32; translate: 0 10px; transition: opacity .35s, translate .45s var(--claque); }
.etapes-sv.est-anime .etape-sv.est-allumee :is(.etape-sv__titre, .etape-sv__texte) { opacity: 1; translate: none; }

/* ==========================================================================
   QUESTIONS FRÉQUENTES
   ========================================================================== */
.sv-faq__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px clamp(110px, 10vw, 190px); align-items: start; }
/* un titre un peu plus petit dans la FAQ : « demandez » ne vient plus toucher les accordéons */
.sv-faq .titre { font-size: clamp(44px, 5vw, 86px); }
.question__r { cursor: pointer; }
.question__r a { cursor: pointer; }
.sv-faq__tete { position: sticky; top: 130px; }
.sv-faq__autre { margin-top: 24px; max-width: 30ch; font-size: 17px; }
.sv-faq__autre a { font-weight: 700; }
.questions { interpolate-size: allow-keywords; border-bottom: 2px solid rgba(23, 23, 26, .22); }
.th-nuit .questions { border-bottom-color: var(--ligne); }
.question { border-top: 2px solid rgba(23, 23, 26, .22); }
.th-nuit .question { border-top-color: var(--ligne); }
.question__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 800 clamp(19px, 1.55vw, 24px)/1.15 var(--titre); text-transform: uppercase; }
.question__q::-webkit-details-marker { display: none; }
.question__q span { transition: color 100ms ease-out; }
@media (hover: hover) { .question__q:hover span { color: var(--rouge-fonce); } }
@media (hover: hover) { .th-nuit .question__q:hover span { color: var(--jaune); } }
.question__q i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--nuit); color: #fff; font-size: 20px; transition: rotate .35s var(--claque), background .15s; }
.th-nuit .question__q i { background: var(--blanc); color: var(--nuit); }
.question[open] .question__q i { rotate: 135deg; background: var(--rouge); color: #fff; }
.question__q:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
.th-papier .question__q:focus-visible { outline-color: var(--nuit); }
.question::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--rapide), content-visibility .35s allow-discrete; }
.question[open]::details-content { block-size: auto; }
.question__r p { max-width: 60ch; padding: 0 64px 26px 0; font-size: 18px; line-height: 1.55; }
.th-papier .question__r p { color: #33333A; }
.th-nuit .question__r p { color: #D3D3DA; }
.question__r a { font-weight: 700; }

/* ==========================================================================
   APPEL FINAL : affiche rouge à rayons, en biais
   ========================================================================== */
.sv-appel { position: relative; z-index: 2; overflow: hidden; margin-top: calc(-1 * var(--biais)); padding: calc(var(--biais) + clamp(80px, 9vw, 140px)) 0 clamp(100px, 11vw, 160px);
  clip-path: polygon(0 0, 100% var(--biais), 100% 100%, 0 100%); background: var(--rouge); color: var(--nuit); }
.sv-appel__rayons { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(23, 23, 26, .14) 1.5px, transparent 2px) 0 0 / 14px 14px, repeating-conic-gradient(from 0deg at 78% 105%, rgba(23, 23, 26, .13) 0 4deg, transparent 4deg 11deg); }
.sv-appel__collant { position: absolute; z-index: 1; right: clamp(-20px, 5vw, 140px); top: 24%; width: clamp(190px, 22vw, 400px); height: auto; rotate: 12deg; filter: drop-shadow(10px 10px 0 var(--nuit)); pointer-events: none;
  transform-origin: 50% 80%; animation: blz-balance 5s ease-in-out infinite; }
/* seul mouvement : un va-et-vient de gauche à droite en boucle (le téléphone sonne, le reste se balance) */
.sv-appel__collant--sonne { animation: blz-sonne 3.8s ease-in-out infinite; }
.sv-appel__collant--flotte { animation: blz-flotte 7s ease-in-out infinite; }
.sv-appel__collant--ecoute { width: clamp(140px, 13vw, 230px); top: 18%; scale: -1 1; animation: blz-ecoute 2.6s ease-in-out infinite; }
/* l'oreille : des ondes partent de la gauche (du titre) et voyagent jusqu'à l'oreille, qui se tend pour mieux écouter */
.sv-appel__ecoute { position: absolute; z-index: 1; right: calc(clamp(-20px, 5vw, 140px) + clamp(140px, 13vw, 230px) * .78); top: calc(18% + clamp(140px, 13vw, 230px) * .78); width: 0; height: 0; pointer-events: none; }
.sv-appel__ecoute i { position: absolute; right: 0; top: -45px; width: 34px; height: 90px; border: 7px solid var(--nuit); border-left: 0; border-radius: 0 45px 45px 0; opacity: 0; transform-origin: 0 50%; animation: blz-onde-entre 2.6s ease-out infinite; }
.sv-appel__ecoute i:nth-child(2) { animation-delay: .35s; border-color: #fff; }
.sv-appel__ecoute i:nth-child(3) { animation-delay: .7s; }
/* le son part de la gauche, petit, et s'élargit en voyageant jusqu'à l'oreille */
@keyframes blz-onde-entre { 0% { transform: translateX(-190px) scale(.45); opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(-20px) scale(1.25); opacity: 0; } }
@keyframes blz-ecoute { 0%, 60%, 100% { transform: rotate(0) scale(1); } 72% { transform: rotate(8deg) scale(1.08); } 80% { transform: rotate(-3deg) scale(1.02); } 88% { transform: rotate(4deg) scale(1.05); } }
.sv-appel:not(.est-en-vue) .sv-appel__ecoute i { animation-play-state: paused; }
.sv-appel__collant--vibre { width: clamp(170px, 18vw, 320px); animation: blz-vibre 2.8s linear infinite; }
/* l'engrenage : l'enveloppe porte l'ombre et reste immobile, seule la roue tourne. Quatre crans d'un quart de tour, chacun avec un petit dépassement */
.sv-appel__collant--rouages { width: clamp(160px, 15vw, 260px); animation: none; }
.sv-appel__collant--rouages img { display: block; width: 100%; height: auto; animation: blz-rouages 6s cubic-bezier(.3, 0, .2, 1) infinite; }
.sv-appel:not(.est-en-vue) .sv-appel__collant--rouages img { animation-play-state: paused; }
@keyframes blz-rouages { 0% { transform: rotate(0); } 18% { transform: rotate(97deg); } 25% { transform: rotate(90deg); } 43% { transform: rotate(187deg); } 50% { transform: rotate(180deg); } 68% { transform: rotate(277deg); } 75% { transform: rotate(270deg); } 93% { transform: rotate(367deg); } 100% { transform: rotate(360deg); } }
.sv-appel__collant--vroum { animation: blz-vroum 2.6s cubic-bezier(.3, 0, .2, 1) infinite; }
.sv-appel__collant--ronronne { width: clamp(150px, 15vw, 270px); top: 20%; animation: blz-ronronne 3.2s linear infinite; }
@keyframes blz-sonne { 0%, 58%, 100% { transform: rotate(0); } 61% { transform: rotate(-10deg); } 64% { transform: rotate(9deg); } 67% { transform: rotate(-8deg); } 70% { transform: rotate(7deg); } 73% { transform: rotate(-5deg); } 76% { transform: rotate(3deg); } 80% { transform: rotate(0); } }
@keyframes blz-flotte { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 25% { transform: translate(12px, -14px) rotate(3deg); } 50% { transform: translate(0, -24px) rotate(6deg); } 75% { transform: translate(-12px, -10px) rotate(-1deg); } }
/* les serveurs ronronnent : de petites secousses de disque qui travaille, puis une respiration */
@keyframes blz-ronronne { 0%, 100% { transform: translate(0, 0) rotate(0); } 8% { transform: translate(-3px, 1px) rotate(-1.2deg); } 12% { transform: translate(3px, -1px) rotate(1deg); } 16% { transform: translate(-2px, 0) rotate(-.8deg); } 20% { transform: translate(2px, 1px) rotate(.6deg); } 24% { transform: translate(0, 0) rotate(0); } 60% { transform: translate(0, -9px) rotate(-1deg); } }
/* le compteur : deux coups d'accélérateur (il recule, puis bondit vers l'avant), puis il se calme */
@keyframes blz-vroum { 0%, 100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(-10px) rotate(-7deg); } 18% { transform: translateX(14px) rotate(5deg); } 26% { transform: translateX(0) rotate(0); } 34% { transform: translateX(-10px) rotate(-7deg); } 42% { transform: translateX(18px) rotate(6deg); } 52% { transform: translateX(0) rotate(-1deg); } }
/* le cellulaire reçoit une notification : deux bzz-bzz, puis un petit bond */
@keyframes blz-vibre { 0%, 36%, 100% { transform: translate(0, 0) rotate(0); } 3%, 9%, 21%, 27% { transform: translate(-3px, 0) rotate(-3deg); } 6%, 12%, 24%, 30% { transform: translate(3px, 0) rotate(3deg); } 15%, 18% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(0, -18px) rotate(-2deg); } }
@keyframes blz-balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sv-appel:not(.est-en-vue) .sv-appel__collant { animation-play-state: paused; }
.sv-appel__contenu { position: relative; z-index: 2; }
.sv-appel__titre { max-width: 13ch; margin: 0 0 .32em; font: 900 clamp(46px, 7vw, 118px)/.9 var(--titre); text-transform: uppercase; letter-spacing: .005em; rotate: -3deg; transform-origin: 0 100%; text-wrap: balance; }
.sv-appel__titre em { font-style: normal; color: var(--blanc); text-shadow: 5px 5px 0 var(--nuit); }
.sv-appel__sous { max-width: 40ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.sv-appel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 34px; }
.sv-appel__direct { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font: 800 20px/1.2 var(--titre); }
.sv-appel__direct a { display: inline-block; }
.sv-appel__direct > * { margin-block: 8px; }
.sv-appel__direct span { user-select: all; }
.sv-appel .btn--charbon { box-shadow: 0 5px 0 #000, 0 5px 0 2px var(--nuit); }
.sv-appel--fin { padding-bottom: calc(var(--biais) + clamp(110px, 12vw, 170px)); }

/* ==========================================================================
   COMPLÉTEZ LA COLLECTION
   ========================================================================== */
.sv-autres { position: relative; background: var(--nuit); padding: clamp(80px, 9vw, 130px) 0 calc(var(--biais) + clamp(80px, 9vw, 120px)); overflow: hidden; }
.sv-autres__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.sv-autres__tout { display: inline-flex; align-items: center; gap: 10px; margin-bottom: .6em; padding-bottom: 5px; font: 700 18px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; --hl: var(--rouge); --hl-texte: #fff; }
.sv-autres__tout i { transition: translate .25s var(--claque); }
@media (hover: hover) { .sv-autres__tout:hover i { translate: 6px 0; } }
.mini-cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 40px); margin: 40px 0 0; padding: 14px 0 20px; list-style: none; }
.mini-cartes li:nth-child(odd) .mini-carte { --penche: -3deg; }
.mini-cartes li:nth-child(even) .mini-carte { --penche: 2.5deg; }
.mini-cartes li:nth-child(3n) .mini-carte { --penche: -1deg; }

/* ==========================================================================
   SIGNATURE · SITE WEB : un navigateur qui se construit au défilement
   ========================================================================== */
/* La section s'épingle. Chaque étape est une fiche de papier collée par-dessus la précédente ; une fois la fiche
   posée (on la lit), le navigateur fait l'étape. Le fil du haut avance avec le défilement et mène à une étape au clic. */
.sig-site { padding: 0; }
.sig-site__epingle { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 104px 0 44px; }
.sig-site__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4.4vw, 80px); align-items: center; width: 100%; }
.sig-site__titre { font-size: clamp(38px, 4.1vw, 78px); }
.sig-site__scene { display: flex; align-items: center; justify-content: center; }
.bati-fil { position: relative; max-width: 520px; margin: clamp(22px, 3.4vh, 38px) 0 clamp(34px, 5vh, 54px); }
.bati-fil__ligne { position: absolute; left: 20px; right: 20px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(23, 23, 26, .25); }
.bati-fil__plein { position: absolute; inset: 0; border-radius: inherit; background: var(--nuit); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bati-fil__points { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.bati-fil__point { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 3px solid var(--nuit); border-radius: 50%; background: var(--rouge); color: var(--nuit); font: 900 14px/1 var(--titre); cursor: pointer; transition: background .2s, color .2s, scale .4s var(--claque), rotate .4s var(--claque); }
.bati-fil__point.est-fait { background: var(--nuit); color: var(--jaune); }
.bati-fil__point.est-courant { background: var(--jaune); color: var(--nuit); scale: 1.22; rotate: -8deg; }
@media (hover: hover) { .bati-fil__point:hover { background: var(--blanc); color: var(--nuit); } }
.bati-fil__point:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
/* la pile de fiches : toutes dans la même case de grille, la plus haute donne la hauteur */
.bati-fiches { display: grid; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.bati-fiche { grid-area: 1 / 1; position: relative; isolation: isolate; align-self: start; padding: 38px clamp(22px, 2.4vw, 34px) 40px; color: var(--nuit); transform: rotate(var(--r)); filter: drop-shadow(8px 8px 0 var(--nuit)); }
.bati-fiche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(23, 23, 26, .09) 1.2px, transparent 1.7px) 0 0 / 11px 11px, var(--blanc);
  clip-path: polygon(0 1%, 100% 0, 100% 91%, 94% 96%, 87% 92%, 79% 98.5%, 70% 93.5%, 61% 97.5%, 52% 92.5%, 43% 98.5%, 34% 93.5%, 25% 97.5%, 16% 92.5%, 8% 98.5%, 0 94.5%); }
.bati-fiche--jaune::before { background: radial-gradient(rgba(23, 23, 26, .1) 1.2px, transparent 1.7px) 0 0 / 11px 11px, var(--jaune); }
.bati-fiche__ruban { position: absolute; z-index: 2; top: -20px; left: 50%; width: 128px; height: auto; margin-left: -64px; rotate: calc(var(--r) * -2); pointer-events: none; }
.bati-fiche__num { font-size: 14px; }
.bati-fiche__num small { font-size: .8em; opacity: .75; }
.bati-fiche__titre { margin: 18px 0 10px; font: 900 clamp(24px, 2.2vw, 36px)/1 var(--titre); text-transform: uppercase; text-wrap: balance; }
.bati-fiche__texte { max-width: 40ch; margin: 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
/* sans animation : les fiches en liste, le navigateur terminé */
.sig-site:not(.est-anime) .bati-fil { display: none; }
.sig-site:not(.est-anime) .bati-fiches { gap: 34px; }
.sig-site:not(.est-anime) .bati-fiche { grid-area: auto; }
/* ==========================================================================
   SITE WEB : la maquette avant la facture. Sur la table, une soumission ; la maquette arrive par-dessus,
   se fait coller, et l'autocollant dit que le prix vient après. Dessous, l'ordre des étapes ailleurs et chez nous.
   ========================================================================== */
.sv-maquette { position: relative; padding: clamp(90px, 10vw, 150px) 0 calc(clamp(60px, 6vw, 100px) + var(--biais)); overflow-x: clip; }
.sv-maquette .titre { font-size: clamp(44px, 5.2vw, 96px); }
.sv-maquette + .sig-site { z-index: 2; margin-top: calc(-1 * var(--biais)); clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); }
.sv-maquette__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.sv-maquette__chapo { max-width: 26ch; margin: 26px 0 0; font: 800 clamp(22px, 1.9vw, 30px)/1.18 var(--titre); text-transform: uppercase; }
.sv-maquette__p { max-width: 52ch; margin: 18px 0 0; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; color: #3A3A42; }
/* l'ordre des étapes : ailleurs en pointillé, chez Blitz en plein */
/* sous la maquette et le texte, sur toute la largeur : chaque ordre tient sur une seule ligne */
.ordre { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: clamp(10px, 1.4vw, 24px); padding-top: clamp(22px, 2.4vw, 30px); border-top: 3px solid var(--nuit); }
.ordre__ligne { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
.ordre__qui { margin: 0; font: 600 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ordre__etapes { display: flex; flex-wrap: nowrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.ordre__etape { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 8px 11px 7px; border-radius: var(--r); font: 700 14px/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ordre__etape + .ordre__etape::before { content: ""; position: absolute; left: -16px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; rotate: 45deg; opacity: .5; }
.ordre__ligne--ailleurs .ordre__etape { border: 2px dashed rgba(23, 23, 26, .32); color: #6B6B73; }
.ordre__ligne--blitz .ordre__qui { color: var(--rouge-fonce); }
.ordre__ligne--blitz .ordre__etape { background: var(--nuit); color: #fff; }
.ordre__ligne--blitz .ordre__etape + .ordre__etape::before { color: var(--nuit); opacity: 1; }
.ordre__ligne--blitz .ordre__etape--maquette { z-index: 1; background: var(--rouge); }
.ordre__ligne--blitz .ordre__etape:last-child { background: var(--jaune); color: var(--nuit); }
/* la scène : une soumission, la maquette collée par-dessus */
.maq-scene { position: relative; height: clamp(400px, 38vw, 580px); }
.maq-soum { position: absolute; left: 0; top: 2%; width: 60%; isolation: isolate; padding: 28px 26px 40px; color: var(--nuit); font: 500 13px/1.3 var(--mono); transform: rotate(6deg); filter: drop-shadow(8px 8px 0 rgba(23, 23, 26, .85)); }
.maq-soum::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(transparent 0 25px, rgba(23, 23, 26, .05) 25px 26px), #fff;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 93% 97%, 85% 94%, 76% 99%, 67% 94.5%, 58% 98%, 49% 93.5%, 40% 98.5%, 31% 94%, 22% 98%, 13% 93.5%, 6% 98.5%, 0 95%); }
.maq-soum__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 3px solid var(--nuit); }
.maq-soum__tete b { font: 900 clamp(18px, 1.7vw, 24px)/1 var(--titre); text-transform: uppercase; }
.maq-soum__tete span { color: #6B6B73; }
.maq-soum__lignes { margin: 0; padding: 0; list-style: none; }
.maq-soum__lignes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(23, 23, 26, .3); }
.maq-soum__lignes i { flex: none; width: 54px; height: 10px; border-radius: 2px; background: rgba(23, 23, 26, .14); }
.maq-soum__total { display: flex; justify-content: space-between; margin: 16px 0 0; font: 900 20px/1 var(--titre); text-transform: uppercase; }
.maq-soum__total b { color: var(--rouge); }
.maq-feuille { position: absolute; z-index: 2; right: 0; top: 20%; width: 80%; padding: clamp(12px, 1.2vw, 18px); background: var(--blanc); border: 3px solid var(--nuit); box-shadow: 12px 12px 0 var(--nuit); transform: rotate(-3deg); }
.maq-feuille__ruban { position: absolute; z-index: 3; top: -24px; width: clamp(96px, 9vw, 136px); height: auto; pointer-events: none; }
.maq-feuille__ruban--a { left: -34px; rotate: -32deg; }
.maq-feuille__ruban--b { right: -34px; rotate: 28deg; }
.maq-feuille__dymo { position: absolute; z-index: 3; left: 20px; bottom: -17px; rotate: -4deg; font-size: 13px; }
.maq-site { overflow: hidden; border: 3px solid var(--nuit); border-radius: 8px; background: #fff; container-type: inline-size; }
.maq-site__barre { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--nuit); }
.maq-site__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); }
.maq-site__barre i:nth-child(2) { background: var(--jaune); }
.maq-site__barre i:nth-child(3) { background: var(--gris); }
.maq-site__barre span { margin-left: 8px; padding: 3px 8px; border-radius: 3px; background: var(--charbon); color: var(--gris); font: 500 10px/1 var(--mono); }
.maq-site__entete { display: flex; align-items: center; justify-content: space-between; padding: 3cqi 4cqi; background: var(--nuit); color: #fff; }
.maq-site__entete b { display: inline-flex; align-items: center; gap: 1.2cqi; font: 900 3.2cqi/1 var(--titre); text-transform: uppercase; }
.maq-site__entete b i { color: var(--rouge); font-size: 3.8cqi; }
.maq-site__entete span { display: flex; gap: 2cqi; }
.maq-site__entete span i { width: 6cqi; height: 1cqi; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.maq-site__heros { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 4cqi; align-items: center; padding: 5cqi 4cqi; }
.maq-site__titre { margin: 0 0 2.4cqi; font: 900 6.4cqi/1 var(--titre); text-transform: uppercase; color: var(--nuit); }
.maq-site__titre em { display: block; font-style: normal; color: var(--rouge); }
.maq-site__p { margin: 0 0 3.4cqi; font-size: 2.7cqi; line-height: 1.45; color: #44444C; }
.maq-site__btn { display: inline-block; padding: 1.9cqi 2.8cqi; border-radius: 4px; background: var(--rouge); color: #fff; font: 700 2.5cqi/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; }
.maq-site__photo { display: grid; place-items: center; aspect-ratio: 1; border: 3px solid var(--nuit); border-radius: 6px;
  background: radial-gradient(rgba(23, 23, 26, .14) 1.3px, transparent 1.8px) 0 0 / 9px 9px, repeating-conic-gradient(from 0deg at 50% 60%, rgba(23, 23, 26, .08) 0 5deg, transparent 5deg 14deg), var(--jaune); }
.maq-site__photo img { width: 74%; height: auto; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .3)); }
.maq-site__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; padding: 0 4cqi 4cqi; }
.maq-site__cols span { height: 10cqi; border: 2px solid #DCDCE2; border-radius: 4px;
  background: linear-gradient(var(--rouge), var(--rouge)) 2cqi 2.2cqi / 40% 1.6cqi no-repeat, linear-gradient(#BFBFC7, #BFBFC7) 2cqi 5.4cqi / 72% 1cqi no-repeat, linear-gradient(#D6D6DC, #D6D6DC) 2cqi 7.4cqi / 52% 1cqi no-repeat; }
.maq-loupe { position: absolute; z-index: 3; left: -3%; bottom: -2%; width: clamp(110px, 11vw, 170px); height: auto; transform: rotate(-14deg); filter: drop-shadow(6px 6px 0 var(--nuit)); pointer-events: none; }
.maq-collant { position: absolute; z-index: 4; right: -3%; top: 4%; width: clamp(124px, 11vw, 164px); aspect-ratio: 1; display: grid; place-content: center; gap: 5px; padding: 14px; border: 5px solid var(--jaune); border-radius: 50%; background: var(--nuit); color: #fff; box-shadow: 0 0 0 3px var(--nuit); text-align: center; font: 700 13px/1.1 var(--bouton); letter-spacing: .05em; text-transform: uppercase;
  scale: 0; rotate: -40deg; transition: scale .55s var(--claque), rotate .55s var(--claque); }
.maq-collant b { display: block; font: 900 clamp(20px, 1.9vw, 28px)/1 var(--titre); color: var(--jaune); }
.sv-maquette.est-colle .maq-collant { scale: 1; rotate: 10deg; }

/* le navigateur : papier, barre noire ; chaque étape ajoute une classe (a-1 … a-6) */
.navi { --fil: #D6D6DC; position: relative; width: 100%; max-width: 920px; height: auto; display: flex; flex-direction: column; background: var(--blanc); border: 4px solid var(--nuit); border-radius: 12px; box-shadow: 14px 14px 0 var(--nuit); transition: max-width .7s var(--claque); }
.navi__barre { position: relative; flex: none; display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: var(--nuit); border-radius: 7px 7px 0 0; }
.navi__points { display: flex; gap: 6px; }
.navi__points i { width: 11px; height: 11px; border-radius: 50%; background: var(--rouge); }
.navi__points i:nth-child(2) { background: var(--jaune); }
.navi__points i:nth-child(3) { background: var(--gris); }
.navi__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 4px; background: var(--charbon); color: var(--gris); font: 500 12px/1 var(--mono); white-space: nowrap; overflow: hidden; }
.navi__charge { position: absolute; left: 0; bottom: -3px; height: 4px; width: 100%; background: var(--jaune); transform: scaleX(0); transform-origin: 0 50%; }
.navi__ecran { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; border-radius: 0 0 8px 8px; }
.navi__page { height: 100%; display: flex; flex-direction: column; }
.navi * { transition: background .45s, color .45s, opacity .45s, border-color .45s, transform .55s var(--claque); }
/* en-tête */
.navi__entete { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 3cqi 4cqi; border-bottom: 2px dashed var(--fil); }
.navi__logo { display: inline-flex; align-items: center; gap: 1.2cqi; padding: .6cqi 1.2cqi; border-radius: 4px; background: var(--fil); color: transparent; font: 900 2.6cqi/1 var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.navi__logo i { font-size: 3.2cqi; }
.navi__menu { display: flex; align-items: center; gap: 2cqi; }
.navi__menu i { width: 6cqi; height: 1cqi; border-radius: 2px; background: var(--fil); }
.navi__mini-btn { width: 11cqi; height: 4cqi; border-radius: 3px; border: 2px dashed var(--fil); }
/* héros du site */
.navi__heros { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4cqi; align-items: center; padding: 4cqi; }
.navi__heros-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2.6cqi; }
.navi__titre { margin: 0; font: 900 5.6cqi/1.04 var(--titre); text-transform: uppercase; color: transparent; }
.navi__titre span, .navi__p span { background: var(--fil); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.navi__p { margin: 0; font: 400 2.3cqi/1.5 var(--titre); color: transparent; }
.navi__btn { display: inline-block; padding: 1.6cqi 2.6cqi; border: 2px dashed #B9B9C2; border-radius: 4px; color: transparent; font: 700 2.3cqi/1 var(--bouton); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.navi__photo { position: relative; height: 100%; min-height: 20cqi; display: grid; place-items: center; border: 2px dashed #B9B9C2; border-radius: 6px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #C9C9D0 50%, transparent calc(50% + 1px)), linear-gradient(to top left, transparent calc(50% - 1px), #C9C9D0 50%, transparent calc(50% + 1px)), #ECECF0; }
.navi__photo img { width: auto; max-width: 70%; height: 78%; object-fit: contain; opacity: 0; transform: scale(.4) rotate(-20deg); filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .3)); }
.navi__cols { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqi; padding: 0 4cqi 4cqi; }
.navi__cols span { display: flex; flex-direction: column; gap: 1.2cqi; padding: 2cqi; border: 2px dashed var(--fil); border-radius: 5px; }
.navi__cols b { width: 60%; height: 1.8cqi; border-radius: 2px; background: var(--fil); }
.navi__cols i { height: 1cqi; border-radius: 2px; background: var(--fil); }
.navi__cols i + i { width: 70%; }
/* résultat de recherche, clic et clés */
.navi__google { position: absolute; left: 4cqi; bottom: 4cqi; width: min(76%, 420px); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); border-radius: 6px; box-shadow: 6px 6px 0 var(--rouge); transform: translateY(160%); }
.navi__google-sur { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6B6B73; }
.navi__google b { font: 800 15px/1.1 var(--titre); color: var(--rouge-fonce); text-decoration: underline; text-underline-offset: 2px; }
.navi__google-url { font: 500 11px/1 var(--mono); color: #3E7A4E; }
.navi__google-txt { font-size: 12px; line-height: 1.35; color: #44444C; }
.navi__clic { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--jaune); border-radius: 50%; opacity: 0; pointer-events: none; }
.navi__cle { position: absolute; z-index: 2; top: -22px; right: -18px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px 9px; background: var(--jaune); color: var(--nuit); font: 900 17px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; rotate: -40deg; box-shadow: 5px 5px 0 var(--nuit); transform: scale(0); transition: transform .5s var(--claque), rotate .6s var(--claque); clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); }
.navi__cle i { font-size: 22px; }
/* a-1 : l'image de marque */
.navi.a-1 .navi__entete { background: var(--nuit); border-bottom-color: var(--nuit); }
.navi.a-1 .navi__logo { background: none; color: #fff; }
.navi.a-1 .navi__logo i { color: var(--rouge); }
.navi.a-1 .navi__menu i { background: rgba(255, 255, 255, .55); }
.navi.a-1 .navi__mini-btn { border: 0; background: var(--rouge); }
.navi.a-1 .navi__photo { border: 3px solid var(--nuit); background: radial-gradient(rgba(23, 23, 26, .14) 1.3px, transparent 1.8px) 0 0 / 9px 9px, repeating-conic-gradient(from 0deg at 50% 60%, rgba(23, 23, 26, .08) 0 5deg, transparent 5deg 14deg), var(--jaune); }
.navi.a-1 .navi__photo img { opacity: 1; transform: none; }
.navi.a-1 .navi__cols b { background: var(--rouge); }
/* a-2 : les textes */
.navi.a-2 .navi__titre { color: var(--nuit); }
.navi.a-2 .navi__titre span:last-child { color: var(--rouge); }
.navi.a-2 .navi__titre span, .navi.a-2 .navi__p span { background: none; }
.navi.a-2 .navi__p { color: #44444C; }
.navi.a-2 .navi__cols span { border-style: solid; border-color: #DCDCE2; }
.navi.a-2 .navi__cols i { background: #BFBFC7; }
/* a-3 : le bouton d'action */
.navi.a-3 .navi__btn { border: 0; background: var(--rouge); color: #fff; box-shadow: 0 .8cqi 0 var(--rouge-fonce); }
/* a-4 : la version téléphone */
.navi.a-4 { max-width: 270px; }
@container (max-width: 290px) {
  .navi__heros { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 4cqi; padding: 5cqi; }
  .navi__photo { order: -1; height: 32cqi; min-height: 0; }
  .navi__photo img { height: 26cqi; max-height: none; width: auto; max-width: 60%; }
  .navi__titre { font-size: 9cqi; }
  .navi__p { font-size: 4.6cqi; }
  .navi__btn { font-size: 4.6cqi; padding: 3cqi 4cqi; }
  .navi__logo { font-size: 5cqi; } .navi__logo i { font-size: 6cqi; }
  .navi__menu i:not(:last-of-type) { display: none; } .navi__menu i { width: 7cqi; height: 1.6cqi; } .navi__mini-btn { display: none; }
  .navi__cols { display: none; }
  .navi__google { width: auto; right: 4cqi; }
}
/* a-5 : vitesse et Google */
.navi.a-5 .navi__charge { transform: scaleX(1); transition: transform .9s cubic-bezier(.2, .9, .1, 1); }
.navi.a-5 .navi__google { transform: none; }
/* a-6 : les clés */
.navi.a-6 .navi__cle { transform: scale(1); rotate: 8deg; }

/* ==========================================================================
   SIGNATURE · APPLICATION : un téléphone et un ordinateur, synchronisés
   ========================================================================== */
.sig-app__tete, .sig-marque__tete, .sig-pub__tete, .sig-heb__tete, .sig-ia__tete, .sig-vitesse__tete, .sv-entretien__tete, .cl-classeur__tete {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px clamp(30px, 5vw, 80px); align-items: end; }
.sig-app__intro, .sig-pub__intro, .sig-heb__intro, .sig-ia__intro, .sig-vitesse__intro, .sv-entretien__intro, .cl-classeur__intro, .sig-marque__cote p { margin: 0 0 .6em; max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; }
/* ==========================================================================
   SIGNATURE · IDENTITÉ DE MARQUE : d'abord la position, ensuite le look. Une carte à deux axes ;
   selon la zone où l'on pose le point, l'échantillon « Votre entreprise » change du tout au tout :
   palette, typo, cadre, décor, mise en page et bouton.
   ========================================================================== */
.sig-marque__cote { max-width: 46ch; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: #3A3A42; }
.pos { --x: .5; --y: .5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: clamp(40px, 5vw, 70px);
  --c1: #2B3A4A; --c2: #FFFFFF; --c3: #1FA59A; --c4: #1E1E22; }
.pos[data-zone="st"] { --c1: #1F2A44; --c2: #F3EDE0; --c3: #8C2F39; --c4: #1A1A1E; }
.pos[data-zone="sa"] { --c1: #111114; --c2: #FFFFFF; --c3: #2F5BFF; --c4: #111114; }
.pos[data-zone="lt"] { --c1: #2F6B4F; --c2: #FFF3E0; --c3: #E8A33D; --c4: #3A2A20; }
.pos[data-zone="la"] { --c1: #FF2E88; --c2: #FFF7C2; --c3: #6B2EFF; --c4: #17171A; }
/* la carte : du papier quadrillé, deux axes, une étiquette au bout de chaque axe */
.pos__carte { position: relative; aspect-ratio: 1; width: min(100%, 580px); justify-self: center; background: linear-gradient(rgba(23, 23, 26, .07) 1px, transparent 1px) 0 0 / 5% 5%, linear-gradient(90deg, rgba(23, 23, 26, .07) 1px, transparent 1px) 0 0 / 5% 5%, #fff;
  border: 3px solid var(--nuit); box-shadow: 12px 12px 0 var(--nuit); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-tap-highlight-color: transparent; }
.pos__axe { position: absolute; background: var(--nuit); pointer-events: none; }
.pos__axe--h { left: 6%; right: 6%; top: 50%; height: 3px; margin-top: -1.5px; }
.pos__axe--v { top: 6%; bottom: 6%; left: 50%; width: 3px; margin-left: -1.5px; }
.pos__borne { position: absolute; z-index: 1; font-size: 13px; pointer-events: none; }
.pos__borne--g { left: -12px; top: 50%; translate: 0 -50%; rotate: -4deg; }
.pos__borne--d { right: -12px; top: 50%; translate: 0 -50%; rotate: 3deg; }
.pos__borne--h { top: -14px; left: 50%; translate: -50% 0; rotate: -2deg; }
.pos__borne--b { bottom: -14px; left: 50%; translate: -50% 0; rotate: 2deg; }
.pos__zone { position: absolute; font: 900 clamp(18px, 2vw, 30px)/1 var(--titre); text-transform: uppercase; color: rgba(23, 23, 26, .14); pointer-events: none; transition: color .25s; }
.pos__zone--sa { left: 9%; top: 11%; } .pos__zone--la { right: 9%; top: 11%; } .pos__zone--st { left: 9%; bottom: 11%; } .pos__zone--lt { right: 9%; bottom: 11%; }
.pos[data-zone="sa"] .pos__zone--sa, .pos[data-zone="la"] .pos__zone--la, .pos[data-zone="st"] .pos__zone--st, .pos[data-zone="lt"] .pos__zone--lt { color: var(--rouge); }
.pos__point { position: absolute; z-index: 2; left: calc(6% + var(--x) * 88%); top: calc(94% - var(--y) * 88%); width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; padding: 0;
  border: 5px solid var(--jaune); border-radius: 50%; background: var(--rouge); color: #fff; box-shadow: 0 0 0 3px var(--nuit), 5px 6px 0 3px var(--nuit); font: 900 16px/1 var(--titre); letter-spacing: .04em; text-transform: uppercase; cursor: grab; touch-action: none; rotate: -8deg; outline: none; -webkit-tap-highlight-color: transparent; }
.pos.est-glisse .pos__point { cursor: grabbing; }
.pos.est-saute .pos__point { transition: left .45s var(--claque), top .45s var(--claque); }
/* au clavier seulement : la pastille passe au jaune, sans cercle autour */
.pos__point:focus-visible { background: var(--nuit); color: var(--jaune); }

/* ---- l'aperçu : la feuille Blitz, toujours pareille */
.pos__apercu { position: relative; display: grid; gap: 22px; padding: clamp(34px, 3.2vw, 46px) clamp(20px, 2.6vw, 38px) clamp(24px, 2.6vw, 34px); background: #fff; color: var(--nuit); border: 3px solid var(--nuit); box-shadow: 12px 12px 0 var(--nuit); rotate: 1.2deg; }
.pos__ruban { position: absolute; z-index: 3; top: -24px; left: 50%; width: 140px; margin-left: -70px; rotate: -4deg; pointer-events: none; }
.pos__ton { justify-self: start; margin: 0; padding: 7px 11px 6px; background: var(--nuit); color: #fff; font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pos__ton b { color: var(--jaune); }
.pos__bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; }
.pos__palette { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; font: 600 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pos__palette li { display: grid; gap: 6px; }
.pos__pastille { display: block; width: clamp(44px, 4.4vw, 62px); aspect-ratio: 1.3; border: 3px solid var(--nuit); transition: background .3s; }
.pos__police { margin: 0; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---- l'échantillon de marque : c'est lui qui change d'allure */
.pos__marque { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: clamp(330px, 28vw, 400px); padding: clamp(26px, 2.6vw, 38px); background: var(--c2); color: var(--c4); transition: background .3s, color .3s; }
.pos__marque.est-change { animation: pos-claque .45s var(--claque); }
@keyframes pos-claque { from { scale: .92; } to { scale: 1; } }
.pos__deco { position: absolute; z-index: -1; display: none; pointer-events: none; }
.pos__logo { display: flex; align-items: center; gap: 14px; color: var(--c1); }
.pos__embleme { flex: none; display: grid; place-items: center; width: 54px; height: 54px; font-size: 30px; color: var(--c3); }
.pos__nom { font: 700 clamp(30px, 2.8vw, 44px)/1 'Funnel Sans', sans-serif; letter-spacing: -.01em; }
.pos__filet { display: block; width: 56px; height: 3px; background: var(--c3); }
.pos__slogan { margin: 0; font: 500 clamp(18px, 1.5vw, 22px)/1.3 'Funnel Sans', sans-serif; color: var(--c4); }
.pos__btn { margin-top: auto; padding: 13px 20px; border-radius: 10px; background: var(--c3); color: #fff; font: 700 15px/1 'Funnel Sans', sans-serif; }
/* Équilibré (centre) : moderne et net */
.pos[data-zone="centre"] .pos__marque { border: 2px solid #DADDE2; border-radius: 16px; }
.pos[data-zone="centre"] .pos__embleme { border-radius: 14px; background: color-mix(in oklch, var(--c3) 16%, #fff); }

/* Classique : centré, cadre double, serif, filet à losange, bouton au trait */
.pos[data-zone="st"] .pos__marque { align-items: center; text-align: center; gap: 14px; box-shadow: inset 0 0 0 3px var(--c1), inset 0 0 0 9px var(--c2), inset 0 0 0 10px var(--c1); }
.pos[data-zone="st"] .pos__logo { flex-direction: column; gap: 10px; }
.pos[data-zone="st"] .pos__embleme { width: 64px; height: 64px; border: 2px solid var(--c3); border-radius: 50%; font-size: 30px; }
.pos[data-zone="st"] .pos__nom { font: 700 clamp(30px, 2.8vw, 44px)/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.pos[data-zone="st"] .pos__filet { position: relative; width: 60%; height: 1px; background: var(--c1); }
.pos[data-zone="st"] .pos__filet::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -5px; background: var(--c3); rotate: 45deg; }
.pos[data-zone="st"] .pos__slogan { font: italic 400 clamp(18px, 1.5vw, 22px)/1.35 Georgia, serif; }
.pos[data-zone="st"] .pos__btn { margin-top: auto; background: none; color: var(--c1); border: 2px solid var(--c1); border-radius: 0; font: 700 13px/1 Georgia, serif; letter-spacing: .16em; text-transform: uppercase; }
.pos[data-zone="st"] .pos__deco--1, .pos[data-zone="st"] .pos__deco--2 { display: block; width: 26px; height: 26px; border: 3px solid var(--c3); }
.pos[data-zone="st"] .pos__deco--1 { left: 20px; top: 20px; border-right: 0; border-bottom: 0; }
.pos[data-zone="st"] .pos__deco--2 { right: 20px; bottom: 20px; border-left: 0; border-top: 0; }

/* Affirmé : noir et blanc, condensé en capitales, grosses barres, aucun arrondi */
.pos[data-zone="sa"] .pos__marque { border: 5px solid var(--c1); gap: 14px; padding-top: calc(clamp(26px, 2.6vw, 38px) + 14px); }
.pos[data-zone="sa"] .pos__deco--1 { display: block; left: 0; right: 0; top: 0; height: 16px; background: var(--c1); }
.pos[data-zone="sa"] .pos__deco--2 { display: block; right: 0; top: 16px; width: 26%; height: 44%; background: var(--c3); }
.pos[data-zone="sa"] .pos__deco--3 { display: block; right: 0; top: calc(16px + 44%); width: 26%; height: 18px; background: repeating-linear-gradient(90deg, var(--c1) 0 6px, transparent 6px 12px); }
.pos[data-zone="sa"] .pos__logo { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 72%; }
.pos[data-zone="sa"] .pos__embleme { width: 50px; height: 50px; background: var(--c1); color: #fff; font-size: 26px; }
.pos[data-zone="sa"] .pos__nom { font: 700 clamp(44px, 4.2vw, 66px)/.86 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.pos[data-zone="sa"] .pos__filet { width: 38%; height: 7px; background: var(--c1); }
.pos[data-zone="sa"] .pos__slogan { font: 700 clamp(18px, 1.6vw, 23px)/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; max-width: 72%; }
.pos[data-zone="sa"] .pos__btn { align-self: stretch; border-radius: 0; background: var(--c1); color: #fff; font: 700 18px/1 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.pos[data-zone="sa"] .pos__btn::after { content: " →"; }

/* Chaleureux : tout est rond, des taches de couleur, des minuscules amicales, un bouton en pilule */
.pos[data-zone="lt"] .pos__marque { border-radius: 30px; gap: 14px; }
.pos[data-zone="lt"] .pos__deco--1 { display: block; right: -60px; top: -70px; width: 220px; height: 200px; border-radius: 58% 42% 50% 50% / 52% 48% 52% 48%; background: var(--c3); opacity: .9; }
.pos[data-zone="lt"] .pos__deco--2 { display: block; left: -50px; bottom: -60px; width: 170px; height: 150px; border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; background: color-mix(in oklch, var(--c1) 22%, var(--c2)); }
.pos[data-zone="lt"] .pos__embleme { width: 58px; height: 58px; border-radius: 50%; background: var(--c2); color: var(--c3); box-shadow: 0 0 0 3px var(--c3); }
.pos[data-zone="lt"] .pos__nom { font: 600 clamp(32px, 3vw, 46px)/1 'Funnel Display', sans-serif; text-transform: lowercase; letter-spacing: -.03em; }
.pos[data-zone="lt"] .pos__filet { width: 120px; height: 10px; background: radial-gradient(circle at 50% 0, transparent 5px, var(--c3) 5.5px 8px, transparent 8.5px) 0 0 / 20px 10px repeat-x; }
.pos[data-zone="lt"] .pos__slogan { font: 500 clamp(19px, 1.6vw, 23px)/1.3 'Funnel Display', sans-serif; }
.pos[data-zone="lt"] .pos__btn { border-radius: 999px; background: var(--c1); color: var(--c2); padding: 14px 26px; font: 600 16px/1 'Funnel Display', sans-serif; text-transform: lowercase; }

/* Éclaté : tout penche, rayons et confettis, capitales en italique, un slogan en autocollant */
.pos[data-zone="la"] .pos__marque { border: 3px solid var(--c4); gap: 18px; background: radial-gradient(rgba(107, 46, 255, .2) 1.6px, transparent 2.2px) 0 0 / 12px 12px, repeating-conic-gradient(from 0deg at 85% 15%, rgba(255, 46, 136, .16) 0 7deg, transparent 7deg 16deg), var(--c2); }
.pos[data-zone="la"] .pos__deco--1 { display: block; right: -24px; top: -24px; width: 130px; height: 130px; background: var(--c3); clip-path: polygon(50% 0, 61% 30%, 93% 14%, 75% 43%, 100% 62%, 68% 66%, 72% 100%, 50% 76%, 25% 98%, 31% 66%, 0 60%, 26% 42%, 8% 12%, 39% 29%); rotate: 14deg; }
.pos[data-zone="la"] .pos__deco--2 { display: block; left: 46%; bottom: 18px; width: 120px; height: 14px; background: linear-gradient(135deg, var(--c1) 25%, transparent 25%) -7px 0 / 14px 14px, linear-gradient(225deg, var(--c1) 25%, transparent 25%) -7px 0 / 14px 14px; }
.pos[data-zone="la"] .pos__logo { rotate: -5deg; }
.pos[data-zone="la"] .pos__embleme { width: 56px; height: 56px; border-radius: 50%; background: var(--c3); color: #FFF7C2; rotate: 12deg; }
.pos[data-zone="la"] .pos__nom { font: 900 italic clamp(34px, 3.3vw, 52px)/.9 'Kanit', sans-serif; text-transform: uppercase; color: var(--c1); text-shadow: 4px 4px 0 var(--c4); }
.pos[data-zone="la"] .pos__filet { display: none; }
.pos[data-zone="la"] .pos__slogan { rotate: 2deg; }
.pos[data-zone="la"] .pos__slogan span { padding: 4px 10px; background: var(--c4); color: #FFF7C2; font: 800 italic clamp(16px, 1.4vw, 20px)/1.6 'Kanit', sans-serif; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pos[data-zone="la"] .pos__btn { rotate: -3deg; border-radius: 4px; background: var(--c3); color: #fff; font: 900 italic 16px/1 'Kanit', sans-serif; text-transform: uppercase; box-shadow: 5px 5px 0 var(--c4); }

@media (max-width: 900px) {
  .pos { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .pos__carte { box-shadow: 8px 8px 0 var(--nuit); }
  .pos__apercu { rotate: .6deg; box-shadow: 8px 8px 0 var(--nuit); }
}
@media (max-width: 640px) {
  .pos__point { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 13px; border-width: 4px; }
  .pos__borne { font-size: 11px; }
  .pos__borne--g { left: -6px; } .pos__borne--d { right: -6px; }
  .pos__zone { font-size: 15px; }
  .pos__marque { min-height: 280px; }
  .pos__pastille { width: 52px; }
}
@media (prefers-reduced-motion: reduce) { .pos.est-saute .pos__point, .pos__marque, .pos__pastille { transition: none; } .pos__marque.est-change { animation: none; } }

/* ==========================================================================
   SIGNATURE · MARKETING : le mégaphone, et les publicités qui claquent sur le mur
   ========================================================================== */
.sig-pub { overflow: hidden; }
.sig-pub__rayons { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 22% 62%, rgba(23, 23, 26, .1) 0 3deg, transparent 3deg 10deg); }
.sig-pub__scene { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); gap: clamp(30px, 4vw, 70px); align-items: center; margin-top: clamp(40px, 5vw, 70px); }
.sig-pub__porte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sig-pub__mega { position: relative; z-index: 1; width: clamp(200px, 21vw, 320px); height: auto; rotate: -10deg; filter: drop-shadow(10px 10px 0 var(--nuit)); user-select: none; -webkit-user-drag: none; }
/* les ondes partent de la gueule du mégaphone, dans son axe (une dizaine de degrés vers le haut), et traversent le mur d'annonces */
/* sous TOUT le contenu (mégaphone, bouton, annonces, titre), juste au-dessus du fond, à 33 % */
.sig-pub__ondes { position: absolute; z-index: -1; left: 72%; top: 30%; width: 0; height: 0; opacity: .33; pointer-events: none; }
/* chaque onde est un grand arc d'un quart de cercle, centré sur la gueule et tourné légèrement vers le haut à droite ; elle passe sous tout le contenu ;
   elle s'élargit lentement jusqu'à couvrir le mur d'annonces (largeur animée en JS, l'épaisseur du trait reste la même) */
.sig-pub__ondes i { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 9px solid transparent; border-top-color: var(--nuit); border-radius: 50%; rotate: 66deg; opacity: 0; }
.sig-pub__ondes i:nth-child(even) { border-top-color: var(--jaune); }
.sig-pub__go { position: relative; z-index: 2; }
.sig-pub__mur { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 28px 26px; margin: 0; padding: 0; list-style: none; }
.pub { position: relative; padding: 28px 20px 20px; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); border-radius: 6px; box-shadow: 8px 8px 0 var(--nuit); rotate: var(--penche, 0deg); cursor: pointer; transition: box-shadow .2s; }
@media (hover: hover) { .pub:hover { box-shadow: 8px 8px 0 var(--jaune), 8px 8px 0 3px var(--nuit); } }
.pub:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
.pub--google { --penche: -1.5deg; }
.pub--social { --penche: 2deg; grid-column: 2; grid-row: 1 / 3; align-self: start; }
.pub--video { --penche: 1deg; }
.pub--courriel { --penche: -2deg; }
.pub--rapport { --penche: 1.5deg; background: var(--jaune); }
.pub__ou { position: absolute; top: -14px; left: 14px; font-size: 12px; rotate: -2deg; }
.pub__sur, .pub__de small, .pub__compte small { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6B6B73; }
.pub__sur { margin: 0 0 6px; }
.pub__titre { margin: 0 0 6px; font: 800 clamp(17px, 1.4vw, 21px)/1.12 var(--titre); }
.pub--google .pub__titre { color: var(--rouge-fonce); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pub__texte { margin: 0; font-size: 15px; line-height: 1.42; color: #3A3A42; }
/* les résultats : un compteur qui monte quand l'annonce tourne */
.pub__res { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed rgba(23, 23, 26, .18); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #55555E; }
.pub__res i { font-size: 17px; color: var(--rouge); }
.pub__res b { font: 900 20px/1 var(--titre); color: var(--nuit); letter-spacing: 0; }
.pub__reactions .pub__res { margin: 0 0 0 auto; padding: 0; border: 0; }
/* Google : un curseur vient cliquer, les boutons d'action sortent */
.pub__actions { display: flex; gap: 8px; margin: 12px 0 0; }
.pub__actions span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 2px solid var(--nuit); border-radius: 99px; font: 700 13px/1 var(--titre); }
.pub__actions i { color: var(--rouge-fonce); }
.pub__curseur { position: absolute; z-index: 2; left: 46%; top: 44%; font-size: 30px; color: var(--nuit); opacity: 0; pointer-events: none; filter: drop-shadow(2px 2px 0 #fff); }
.pub__curseur::after { content: ""; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; border: 3px solid var(--rouge); border-radius: 50%; opacity: 0; }
.pub__curseur.est-clic::after { animation: pub-clic .5s ease-out; }
@keyframes pub-clic { 0% { opacity: 1; scale: .3; } 100% { opacity: 0; scale: 1.8; } }
/* réseaux sociaux : le visuel de la brûlerie, des cœurs qui montent, un commentaire qui arrive */
.pub__compte { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.pub__compte b { font: 700 15px/1 var(--titre); }
.pub__compte small { margin-left: auto; }
.pub__avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--nuit); background: #3B2418 radial-gradient(circle at 50% 50%, #E8873A 0 5px, transparent 6px); }
.pub__visuel { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: 20px; overflow: hidden; border-radius: 4px; color: #3B2418;
  background: radial-gradient(rgba(59, 36, 24, .14) 1.3px, transparent 1.8px) 0 0 / 11px 11px, repeating-conic-gradient(from 0deg at 80% 18%, rgba(243, 230, 208, .4) 0 5deg, transparent 5deg 14deg), #E8873A; }
.pub__logo { position: absolute; right: 9%; top: 10%; width: 42%; rotate: -8deg; filter: drop-shadow(5px 5px 0 rgba(59, 36, 24, .45)); }
.pub__logo svg { display: block; width: 100%; height: auto; }
.pub__visuel b { position: relative; font: 800 clamp(20px, 1.9vw, 30px)/1.02 'Funnel Display', var(--titre); max-width: 12ch; }
.pub__reactions { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; font-size: 24px; }
.pub__coeur { display: inline-grid; color: var(--rouge); }
.pub__commentaire { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: #EFEFF1; font-size: 14px; line-height: 1.35; }
.pub__commentaire b { margin-right: 6px; font: 700 14px/1 var(--titre); }
.pub__coeurs { position: absolute; left: 30px; bottom: 90px; width: 0; height: 0; pointer-events: none; }
.pub__coeurs i { position: absolute; left: 0; top: 0; font-size: 22px; color: var(--rouge); }
/* YouTube : la vapeur monte, la barre avance, le bouton « passer » compte à rebours */
.pub__ecran { position: relative; aspect-ratio: 16 / 8; display: grid; place-items: center; margin-bottom: 12px; border-radius: 4px; overflow: hidden; color: #F3E6D0; font-size: 54px;
  background: radial-gradient(rgba(243, 230, 208, .12) 1.3px, transparent 1.8px) 0 0 / 11px 11px, linear-gradient(160deg, #3B2418 0 55%, #E8873A 55% 61%, #3B2418 61%); }
.pub__vapeur { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pub__vapeur i { position: absolute; bottom: 0; width: 6px; height: 34px; margin-left: -3px; border-radius: 3px; background: rgba(243, 230, 208, .75); opacity: 0; }
.pub__vapeur i:nth-child(1) { left: -16px; } .pub__vapeur i:nth-child(3) { left: 16px; }
/* la vapeur ne monte que pendant que la vidéo joue */
.pub--video.est-joue .pub__vapeur i { animation: pub-vapeur 1.3s ease-out infinite; }
.pub--video.est-joue .pub__vapeur i:nth-child(2) { animation-delay: .4s; } .pub--video.est-joue .pub__vapeur i:nth-child(3) { animation-delay: .8s; }
@keyframes pub-vapeur { 0% { opacity: 0; transform: translateY(14px) scaleY(.4); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-46px) scaleY(1.3); } }
.pub__passer { position: absolute; right: 0; bottom: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; background: rgba(0, 0, 0, .78); color: #fff; font: 600 12px/1 var(--titre); }
.pub__progres { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .25); }
.pub__progres i { display: block; height: 100%; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(1); }
/* infolettre : l'étiquette « Ouverte » se colle, le bouton appelle le clic */
.pub__de { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.pub__de b { font: 700 15px/1 var(--titre); }
.pub__objet { margin: 0 0 6px; font: 800 18px/1.15 var(--titre); }
.pub__ouverte { position: absolute; top: 14px; right: 12px; font-size: 11px; rotate: 6deg; }
.pub__bouton { display: inline-block; margin-top: 12px; padding: 9px 14px; border-radius: var(--r); background: #3B2418; color: #F3E6D0; font: 700 14px/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; }
/* rapport : trois barres qui montent, puis les trois constats */
.pub__graph { display: flex; align-items: flex-end; gap: 12px; height: 74px; margin: 8px 0 12px; padding: 0 2px; border-bottom: 3px solid var(--nuit); }
.pub__graph span { position: relative; flex: 1; height: var(--h); background: var(--nuit); transform-origin: 50% 100%; }
.pub__graph span:last-child { background: var(--rouge); }
.pub__graph b { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); font: 600 10px/1 var(--mono); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.pub__liste { display: grid; gap: 6px; margin: 6px 0 0; }
.pub__liste li { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--titre); }
.pub__liste i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--nuit); color: var(--jaune); font-size: 14px; }

/* ==========================================================================
   SIGNATURE · HÉBERGEMENT : où dorment vos données. Une grande carte du Québec annotée comme une affiche :
   cinq pastilles, chacune reliée à sa fiche. À l'arrivée, le contour se trace et tout se pose ; ensuite,
   la copie voyage d'un centre à l'autre, le cadenas descend du nord et un paquet rebondit sur la frontière.
   ========================================================================== */
.sig-heb__intro { max-width: 50ch; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: #3A3A42; }
.qc { position: relative; width: min(100%, 1240px); margin: clamp(30px, 4vw, 60px) auto 0; aspect-ratio: 1000 / 620; container-type: inline-size; }
.qc__scene { position: absolute; inset: 0; }
.qc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qc-ombre { fill: var(--nuit); }
.qc-fond { fill: var(--jaune); }
/* épaisseur en unités de carte (agrandie 1,45 fois) ; pas de vector-effect, sinon le tracé animé (pathLength) ne fonctionne plus */
.qc-contour { fill: none; stroke: var(--nuit); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.qc-rebond-chemin { fill: none; stroke: var(--nuit); stroke-width: 2; stroke-dasharray: 4 6; opacity: .5; }
.qc-barrage path { fill: none; stroke: var(--rouge); stroke-width: 5; stroke-linecap: round; }
.qc-pays { fill: var(--nuit); font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; }
.qc-tunnel { fill: none; stroke: var(--nuit); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; }
.qc-arc { fill: none; stroke: var(--rouge); stroke-width: 3; stroke-dasharray: 6 5; }
.qc-fil { fill: none; stroke: var(--nuit); stroke-width: 2; stroke-dasharray: 1; transition: stroke .2s, stroke-width .2s; }
.qc-fil-bout { fill: var(--nuit); transition: fill .2s; }
.qc-fil.est-actif { stroke: var(--rouge); stroke-width: 3.5; }
.qc-fil-bout.est-actif { fill: var(--rouge); }
.qc-paquet { fill: var(--rouge); stroke: var(--nuit); stroke-width: 2.5; }
.qc-cadenas rect { fill: var(--nuit); }
.qc-cadenas path { fill: none; stroke: var(--nuit); stroke-width: 2.5; }
.qc-copie rect { fill: #fff; stroke: var(--nuit); stroke-width: 2.5; }
.qc-copie path { stroke: var(--rouge); stroke-width: 2; }
.qc-cadenas, .qc-copie, .qc-paquet--rebond { opacity: 0; }
/* les pastilles */
.qc-pin { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: clamp(38px, 4.4cqi, 54px); height: clamp(38px, 4.4cqi, 54px); translate: -50% -50%; display: grid; place-items: center; padding: 0; border: 3px solid var(--nuit); border-radius: 50%; background: #fff; color: var(--nuit); font-size: clamp(18px, 2.1cqi, 26px); box-shadow: 3px 3px 0 var(--nuit); cursor: pointer; transition: background .15s, color .15s, scale .3s var(--claque); }
.qc-pin__num { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nuit); color: var(--jaune); font: 900 12px/1 var(--titre); }
.qc-pin.est-actif { background: var(--rouge); color: #fff; scale: 1.18; }
.qc-pin:focus-visible { outline: 3px solid var(--nuit); outline-offset: 5px; }
/* les fiches, posées autour de la carte */
.qc-fiches { margin: 0; padding: 0; list-style: none; }
.qc-fiche { position: absolute; z-index: 1; left: var(--fx); top: var(--fy); width: 23.4%; display: grid; gap: .55em; padding: 1.5cqi 1.6cqi 1.6cqi; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); box-shadow: 7px 7px 0 var(--nuit); rotate: var(--r); translate: 0 var(--dep, 0px); transition: background .2s, box-shadow .2s, scale .35s var(--claque); }
.qc-fiche.est-actif { z-index: 3; background: var(--jaune); box-shadow: 9px 9px 0 var(--rouge); scale: 1.05; }
.qc-fiche__titre { display: flex; align-items: center; gap: .5em; margin: 0; font: 900 clamp(17px, 2cqi, 25px)/1 var(--titre); text-transform: uppercase; }
.qc-fiche__num { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--rouge); color: #fff; font-size: .8em; }
.qc-fiche__texte { margin: 0; font-size: clamp(14px, 1.45cqi, 17px); line-height: 1.42; color: #3A3A42; }
@media (max-width: 1060px) {
  /* tablette et téléphone : la carte seule, recadrée sur le Québec, puis les fiches en liste */
  .qc { aspect-ratio: auto; container-type: normal; }
  .qc__scene { position: relative; inset: auto; width: min(100% + 16px, 520px); aspect-ratio: 450 / 620; overflow: hidden; margin: 0 auto; }
  .qc__svg { left: -60%; width: 222.2%; }
  .qc-pin { left: var(--xm); width: 32px; height: 32px; font-size: 16px; border-width: 2px; }
  .qc-pin::before { content: ""; position: absolute; inset: -5px; }
  .qc-pin__num { width: 18px; height: 18px; top: -8px; right: -8px; font-size: 10px; }
  .qc-fiches { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; margin-top: 34px; }
  .qc-fiche { position: static; width: auto; padding: 18px 18px 20px; rotate: 0deg; box-shadow: 6px 6px 0 var(--nuit); }
  .qc-fiche__titre { font-size: 20px; }
  .qc-fiche__texte { font-size: 16px; }
  .qc-fil, .qc-fil-bout { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qc-pin, .qc-fiche, .qc-fil { transition: none; } }

/* ==========================================================================
   SIGNATURE · AUTOMATISATION IA : le courriel se traite tout seul. Un courriel de client (ou le vôtre),
   l'IA le balaie, surligne ce qu'elle comprend, et chaque morceau s'envole vers sa place : classement,
   fiche client, agenda, réponse prête à relire.
   ========================================================================== */
.ia { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) 150px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; margin-top: clamp(40px, 5vw, 70px); }
.ia template { display: none; }
.ia__exemples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ia-ex { min-height: 40px; padding: 8px 14px; border: 2px solid var(--nuit); border-radius: 99px; background: #fff; color: var(--nuit); font: 700 14px/1 var(--titre); cursor: pointer; transition: background .15s, color .15s; }
.ia-ex[aria-pressed="true"] { background: var(--nuit); color: var(--jaune); }
@media (hover: hover) { .ia-ex:hover { background: var(--jaune); color: var(--nuit); } }
.ia-ex:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.ia[data-etat="lecture"] .ia-ex { pointer-events: none; opacity: .5; }
/* le courriel : une feuille avec une ligne qui balaie pendant la lecture */
.ia__papier { position: relative; overflow: hidden; padding: 20px 22px 24px; background: #fff; border: 3px solid var(--nuit); border-radius: 8px; box-shadow: 10px 10px 0 var(--nuit); rotate: -1deg; }
.ia__entete { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px dashed rgba(23, 23, 26, .2); font: 800 15px/1 var(--titre); text-transform: uppercase; }
.ia__entete i { font-size: 20px; color: var(--rouge); }
.ia__entete small { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: .08em; color: #6B6B73; }
/* le texte lu se pose exactement par-dessus le champ, qui reste en place (caché) : la feuille ne change jamais de taille */
.ia__zone { position: relative; }
.ia__texte, .ia__lu { display: block; width: 100%; min-height: 9.6em; margin: 0; padding: 0; border: 0; background: none; color: var(--nuit); font: 400 clamp(16px, 1.25vw, 18px)/1.6 var(--police, 'Kanit', sans-serif); letter-spacing: normal; resize: none; overflow: hidden; }
.ia__texte { outline: none; }
.ia__texte:focus-visible { outline: 2px dashed var(--rouge); outline-offset: 6px; }
.ia__lu { position: absolute; inset: 0; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
.ia:not([data-etat="attente"]) .ia__texte { visibility: hidden; }
.ia:not([data-etat="attente"]) .ia__lu { visibility: visible; }
.ia__lu mark { padding: 0 .12em; margin: 0 -.12em; border-radius: 3px; background: linear-gradient(var(--jaune), var(--jaune)) 0 0 / 0 100% no-repeat; color: inherit; transition: background-size .35s cubic-bezier(.7, 0, .2, 1); }
.ia__lu mark.est-vu { background-size: 100% 100%; }
.ia__lu mark[data-cle="type"].est-vu, .ia__lu mark[data-cle="service"].est-vu { background-image: linear-gradient(#FFB3C9, #FFB3C9); }
.ia__balayage { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rouge); opacity: 0; pointer-events: none; }
.ia__balayage::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 46px; background: repeating-linear-gradient(0deg, rgba(255, 0, 77, .08) 0 2px, transparent 2px 6px); }
.ia__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; min-height: 52px; margin-top: 24px; }
.ia__lire[disabled] { opacity: .5; cursor: progress; }
.ia__recommencer { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--nuit); font: 700 16px/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .ia__recommencer:hover { color: var(--rouge-fonce); } }
/* le cerveau : les rouages tournent doucement, puis vite pendant la lecture */
.ia__cerveau { position: relative; display: grid; justify-items: center; gap: 14px; }
/* l'ombre est sur l'enveloppe : elle reste en bas à droite pendant que la roue tourne (le JS règle la vitesse) */
.ia__rouages { display: block; width: 140px; filter: drop-shadow(6px 6px 0 var(--nuit)); }
.ia__roue { display: block; width: 100%; height: auto; }
.ia__etat { justify-content: center; min-width: 140px; font-size: 13px; text-align: center; white-space: nowrap; transition: background .2s, color .2s; }
.ia[data-etat="lecture"] .ia__etat { background: var(--rouge); color: #fff; }
.ia[data-etat="fini"] .ia__etat { background: var(--jaune); color: var(--nuit); }
/* les quatre sorties */
.ia__sorties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ia-sortie { position: relative; min-height: 166px; padding: 14px 14px 16px; background: #fff; border: 3px solid var(--nuit); border-radius: 8px; box-shadow: 6px 6px 0 var(--nuit); transition: box-shadow .2s, background .2s; }
/* classé et agenda côte à côte, puis la fiche et la réponse sur toute la largeur : pas de trou dans la grille */
.ia-sortie--fiche { grid-column: 1 / -1; order: 1; min-height: 132px; }
.ia-sortie--fiche .ia-sortie__corps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ia-sortie--fiche .ia-sortie__corps:empty { min-height: 44px; background-size: 26% 9px; background-position: 0 4px, 50% 4px, 100% 4px; background-image: linear-gradient(#E4E4E8, #E4E4E8), linear-gradient(#E4E4E8, #E4E4E8), linear-gradient(#E4E4E8, #E4E4E8); }
.ia-sortie--fiche .ia-sortie__ligne { flex-direction: column; gap: 2px; }
.ia-sortie--reponse { grid-column: 1 / -1; order: 2; min-height: 186px; }
.ia-sortie.est-rempli { box-shadow: 6px 6px 0 var(--rouge); }
.ia-sortie.est-neuf { animation: ia-claque .5s cubic-bezier(.34, 1.7, .5, 1); }
@keyframes ia-claque { 0% { scale: .92; background: var(--jaune); } 100% { scale: 1; background: #fff; } }
.ia-sortie__tete { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 14px/1 var(--titre); text-transform: uppercase; }
.ia-sortie__tete i { font-size: 20px; color: var(--rouge); }
.ia-sortie__corps { display: grid; gap: 7px; font-size: 15px; line-height: 1.35; }
.ia-sortie__corps:empty { background: linear-gradient(#E4E4E8, #E4E4E8) 0 4px / 80% 9px no-repeat, linear-gradient(#E4E4E8, #E4E4E8) 0 24px / 60% 9px no-repeat, linear-gradient(#E4E4E8, #E4E4E8) 0 44px / 70% 9px no-repeat; min-height: 56px; }
.ia-sortie__corps .dymo { justify-self: start; font-size: 15px; }
.ia-sortie__ligne { display: flex; gap: 8px; }
.ia-sortie__ligne span { min-width: 0; overflow-wrap: anywhere; }
.ia-sortie__ligne b { flex: none; min-width: 5.8em; font: 600 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6B6B73; }
.ia-sortie__grand { font: 900 22px/1.05 var(--titre); text-transform: uppercase; }
.ia-sortie__reponse { margin: 0; font-size: 15px; line-height: 1.5; min-height: 6em; }
.ia-sortie__reponse::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--rouge); animation: ia-curseur .8s steps(1) infinite; }
.ia[data-etat="fini"] .ia-sortie__reponse::after { display: none; }
@keyframes ia-curseur { 50% { opacity: 0; } }
.ia-sortie__envoyer { justify-self: start; padding: 7px 12px; border-radius: var(--r); background: var(--nuit); color: var(--jaune); font: 700 13px/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; }
/* les morceaux qui s'envolent du courriel vers leur place */
.ia-vol { position: absolute; z-index: 20; left: 0; top: 0; padding: 5px 9px 4px; background: var(--jaune); color: var(--nuit); border: 2px solid var(--nuit); font: 700 13px/1 var(--titre); white-space: nowrap; pointer-events: none; }
@media (max-width: 1200px) {
  .ia { grid-template-columns: minmax(0, 1fr); }
  .ia__cerveau { grid-auto-flow: column; justify-content: center; align-items: center; }
  .ia__rouages { width: 92px; }
}
@media (max-width: 640px) {
  .ia__sorties { grid-template-columns: minmax(0, 1fr); }
  .ia__papier { padding: 16px 16px 20px; box-shadow: 7px 7px 0 var(--nuit); }
  .ia-sortie { min-height: 150px; }
  .ia-sortie--fiche .ia-sortie__corps { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ia-sortie--fiche .ia-sortie__ligne { flex-direction: row; gap: 8px; }
  .ia-sortie--fiche .ia-sortie__corps:empty { min-height: 56px; background-position: 0 4px, 0 24px, 0 44px; background-size: 80% 9px, 60% 9px, 70% 9px; }
  .ia-sortie--reponse { min-height: 192px; }
}
/* ==========================================================================
   PARTHEO · la division agents IA de Blitz. Un fond lavande aux couleurs de Partheo, le texte qui explique
   le partage (Blitz : le site et le marketing ; Partheo : les agents dans vos logiciels) et, à droite,
   le journal d'un renfort qui se remplit tout seul, une tâche à la fois.
   ========================================================================== */
.sv-partheo { --pt-violet: #3C1874; --pt-rouge: #D6304A; --pt-pale: #F1EDFA; --rang: 62px;
  position: relative; padding: clamp(80px, 9vw, 140px) 0; color: var(--nuit);
  background: radial-gradient(rgba(60, 24, 116, .1) 1.3px, transparent 1.8px) 0 0 / 13px 13px, var(--pt-pale); }
.sv-partheo__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.sv-partheo .surtitre { color: var(--pt-violet); }
.sv-partheo .titre { color: var(--nuit); font-size: clamp(40px, 4.4vw, 70px); }
.sv-partheo .titre em { color: var(--pt-violet); }
.sv-partheo__logo { display: block; width: clamp(170px, 15vw, 230px); height: auto; margin: clamp(22px, 2.4vw, 32px) 0 clamp(18px, 2vw, 26px); }
.sv-partheo__texte > p:not(.surtitre) { max-width: 52ch; margin: 0 0 14px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: #33333A; }
.sv-partheo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.sv-partheo__btn i { font-size: 1.05em; }
.sv-partheo__lien { --hl: var(--pt-violet); padding: 6px 0 4px; color: var(--nuit); font: 700 16px/1.2 var(--bouton); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(var(--hl), var(--hl)) 0 100% / 100% 2px no-repeat; transition: background-size .28s cubic-bezier(.7, 0, .2, 1), color .15s ease-out; }
@media (hover: hover) { .sv-partheo__lien:is(:hover, :focus-visible) { background-size: 100% 100%; color: #fff; outline: none; } }
/* le journal du renfort */
.pth-journal { margin: 0; overflow: hidden; background: #fff; border: 3px solid var(--nuit); border-radius: 12px; box-shadow: 10px 10px 0 var(--pt-violet); rotate: 1deg; }
.pth-journal__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 2px dashed rgba(23, 23, 26, .16); font: 800 15px/1 var(--titre); text-transform: uppercase; }
.pth-journal__tete b { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--mono); letter-spacing: .08em; color: var(--pt-violet); }
.pth-journal__tete b i { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-violet); }
.pth-journal__liste { position: relative; height: calc(var(--rang) * 4); margin: 0; padding: 0 20px; overflow: hidden; list-style: none; }
.pth-tache { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto; align-items: center; gap: 14px; height: var(--rang); border-bottom: 1px solid rgba(23, 23, 26, .08); }
.pth-tache__heure { font: 600 12px/1 var(--mono); letter-spacing: .04em; color: #6B6B73; white-space: nowrap; }
.pth-tache__quoi { font: 600 16px/1.3 var(--police, 'Kanit', sans-serif); }
.pth-tache i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pt-violet); color: #fff; font-size: 15px; }
.pth-tache:first-child .pth-tache__quoi { color: var(--pt-violet); }
.pth-journal__pied { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 20px; border-top: 2px dashed rgba(23, 23, 26, .16); background: #F8F6FD; font: 600 14px/1.35 var(--police, 'Kanit', sans-serif); color: var(--pt-violet); }
.pth-journal__pied i { flex: none; font-size: 20px; color: var(--pt-rouge); }
@media (max-width: 960px) {
  .sv-partheo__grille { grid-template-columns: minmax(0, 1fr); }
  .pth-journal { rotate: 0deg; max-width: 560px; }
}
@media (max-width: 640px) {
  .sv-partheo { --rang: 58px; }
  .pth-journal { box-shadow: 7px 7px 0 var(--pt-violet); }
  .pth-journal__liste { padding: 0 16px; }
  .pth-tache { gap: 10px; grid-template-columns: 3.9em minmax(0, 1fr) auto; }
  .pth-tache__quoi { font-size: 15px; }
  .sv-partheo__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ia-sortie.est-neuf, .ia-sortie__reponse::after { animation: none; } .ia__lu mark { transition: none; } }

/* ==========================================================================
   SIGNATURE · OPTIMISATION : pied au plancher. On tient la pédale (« Le gaz au boutte! ») et l'aiguille
   monte ; chaque palier règle un correctif de l'audit. Plus ça va vite, plus tout s'emballe : les rayons
   tournent, des traits de vitesse filent, la jauge tremble et l'aiguille crache des étincelles.
   ========================================================================== */
.sig-vitesse { --v: 0; overflow: hidden; padding-bottom: calc(clamp(80px, 9vw, 140px) + var(--biais)); }
.sig-vitesse__rayons { position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from var(--rot, 0deg) at 30% 60%, rgba(23, 23, 26, .1) 0 3deg, transparent 3deg 10deg); transition: opacity 1.2s ease-out; }
/* au maximum, le halo s'éteint */
.sig-vitesse.est-fini .sig-vitesse__rayons { opacity: 0; }
.sig-vitesse__traits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sig-vitesse__traits i { position: absolute; top: var(--t); left: 0; width: clamp(140px, 22vw, 380px); height: 5px; border-radius: 3px; background: rgba(246, 246, 247, .6); opacity: 0; will-change: transform; }
.sig-vitesse__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 60px); }
.jauge { position: relative; max-width: 560px; width: 100%; justify-self: center; }
.jauge__corps { position: relative; }
.jauge__svg { display: block; width: 100%; height: auto; filter: drop-shadow(12px 12px 0 var(--nuit)); overflow: visible; }
.jauge__zone--lent { stroke: #5A5A63; } .jauge__zone--correct { stroke: var(--gris); } .jauge__zone--rapide { stroke: var(--jaune); } .jauge__zone--blitz { stroke: var(--rouge); }
.jauge__trace { stroke: var(--jaune); stroke-linecap: round; opacity: calc(.3 + var(--v)); }
.jauge__graduations line { stroke: var(--blanc); stroke-width: 3; }
.jauge__graduations line.petite { stroke-width: 2; opacity: .5; }
.jauge__mot { font: 900 14px var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.jauge__mot--lent, .jauge__mot--blitz { fill: #fff; }
.jauge__mot--correct, .jauge__mot--rapide { fill: var(--nuit); }
.jauge__lecture { position: absolute; left: 0; right: 0; top: 57%; margin: 0; text-align: center; pointer-events: none; }
.jauge__lecture .dymo { font-size: clamp(14px, 1.4vw, 19px); padding: .4em .8em .34em; rotate: -3deg; transition: background .15s, color .15s; }
.jauge[data-zone="Rapide"] .jauge__lecture .dymo { background: var(--jaune); color: var(--nuit); }
.jauge[data-zone="Blitz"] .jauge__lecture .dymo { background: var(--rouge); color: #fff; }
/* la pédale : un bouton rond dans la zone vide du bas, texte en arc */
.gaz { position: absolute; left: 50%; top: 77%; width: 24%; aspect-ratio: 1; translate: -50% -50%; display: block; padding: 0; border: 0; border-radius: 50%; background: var(--rouge); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 4px var(--nuit); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: scale .12s ease-out, background .15s; }
.gaz__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gaz__haut { fill: #fff; font: 900 15px/1 var(--titre); letter-spacing: .05em; text-transform: uppercase; }
.gaz__bas { fill: var(--jaune); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.gaz__pedale { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--nuit); color: var(--jaune); font-size: clamp(18px, 2.4vw, 32px); pointer-events: none; transition: scale .12s ease-out; }
.gaz.est-presse { scale: .92; background: var(--rouge-fonce); }
.gaz.est-presse .gaz__pedale { scale: .88; }
.gaz:focus-visible { outline: 3px solid var(--jaune); outline-offset: 6px; }
/* la bulle qui invite à appuyer : elle se dandine à côté de la pédale, et s'en va dès qu'on y touche */
.gaz-bulle { position: absolute; z-index: 3; left: 67%; top: 77%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 13px 8px 11px; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--nuit); font: 900 clamp(12px, 1.15vw, 15px)/1.05 var(--titre); text-transform: uppercase; white-space: nowrap; translate: 0 -50%; rotate: -4deg; pointer-events: none;
  animation: gaz-bulle 1.6s ease-in-out infinite; transition: opacity .3s, scale .3s; }
.gaz-bulle::before { content: ""; position: absolute; left: -15px; top: 50%; width: 16px; height: 18px; margin-top: -9px; background: var(--nuit); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.gaz-bulle::after { content: ""; position: absolute; left: -9px; top: 50%; width: 11px; height: 12px; margin-top: -6px; background: #fff; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.gaz-bulle i { font-size: 1.6em; color: var(--rouge); animation: gaz-doigt 1.6s ease-in-out infinite; }
@keyframes gaz-bulle { 0%, 100% { translate: 0 -50%; } 50% { translate: -8px -50%; } }
@keyframes gaz-doigt { 0%, 40%, 100% { transform: translateY(0); } 55% { transform: translateY(4px) scale(.9); } }
.jauge.est-touche .gaz-bulle { opacity: 0; scale: .6; animation: none; }
/* étincelles et paliers */
.etincelle { position: absolute; z-index: 3; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--jaune); pointer-events: none; }
.etincelle:nth-child(3n) { background: #fff; width: 6px; height: 6px; }
.palier { position: absolute; z-index: 4; left: 50%; top: 30%; translate: -50% 0; font-size: clamp(13px, 1.2vw, 16px); white-space: nowrap; pointer-events: none; }
/* le rapport d'audit */
.audit { position: relative; padding: clamp(22px, 2.6vw, 34px); background: var(--nuit); color: var(--blanc); border-radius: 8px; box-shadow: 12px 12px 0 rgba(23, 23, 26, .45); rotate: 1deg; }
.audit::before { content: ""; position: absolute; top: -20px; left: 40%; width: 120px; height: 52px; background: url(../../_commun/img/decoupes/ruban-jaune.webp) center / contain no-repeat; rotate: -5deg; }
.audit__titre { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 20px/1 var(--titre); text-transform: uppercase; }
.audit__titre i { font-size: 26px; color: var(--rouge); }
.audit__compte { margin-left: auto; font: 600 14px/1 var(--mono); color: var(--jaune); }
.audit__liste { margin: 0; padding: 0; list-style: none; }
.correctif { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--ligne); }
.correctif__nom { font-size: 16px; line-height: 1.25; }
.correctif__etat { display: grid; justify-items: end; flex: none; }
.correctif__etat .dymo { grid-area: 1 / 1; font-size: 12px; transition: transform .35s var(--claque), opacity .2s; }
.correctif__apres { background: var(--jaune); color: var(--nuit); transform: scale(0); opacity: 0; }
.correctif.est-regle .correctif__avant { transform: scale(.4); opacity: 0; }
.correctif.est-regle .correctif__apres { transform: scale(1) rotate(-3deg); opacity: 1; }
.correctif.est-regle .correctif__nom { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; }
.correctif.est-neuf { animation: correctif-claque .5s var(--claque); }
@keyframes correctif-claque { 0% { background: rgba(250, 239, 93, .25); } 100% { background: transparent; } }
.audit__fin { display: none; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 14px; background: var(--jaune); color: var(--nuit); font: 800 17px/1.15 var(--titre); text-transform: uppercase; rotate: -1.5deg; }
.audit__fin i { font-size: 24px; }
.sig-vitesse.est-fini .audit__fin { display: flex; animation: correctif-claque .5s; }

/* ==========================================================================
   OPTIMISATION · LE PLAN DE MAINTENANCE : prévenir plutôt que guérir. Une année sur deux couloirs,
   ailleurs et chez Blitz ; on la fait jouer (ou défiler) et chaque couloir vit ce qui lui arrive.
   ========================================================================== */
.th-jaune { background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.8px) 0 0 / 13px 13px, var(--jaune); color: var(--nuit); }
.th-jaune .titre { color: var(--nuit); }
.th-jaune .titre em { color: var(--rouge-fonce); }
.th-jaune .surtitre { color: var(--nuit); }
.th-jaune .sv-entretien__intro { color: #2C2C31; }
.an { --lab: clamp(120px, 12vw, 180px); --t: 0; position: relative; margin-top: clamp(40px, 5vw, 64px); }
.an__mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 0 0 var(--lab); padding: 0 3px; list-style: none; font: 800 clamp(11px, .9vw, 14px)/1 var(--titre); text-transform: uppercase; }
.an__mois li { padding: 0 0 10px 6px; border-left: 2px solid rgba(23, 23, 26, .3); }
.an__mois-court { display: none; }
.an__couloirs { position: relative; display: grid; gap: 70px; padding: 56px 0 58px; }
.an__couloir { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; }
.an__qui { display: grid; justify-items: start; gap: 8px; margin: 0; padding-right: 16px; }
.an__qui b { font: 900 clamp(18px, 1.7vw, 26px)/1 var(--titre); text-transform: uppercase; }
.an__etat { padding: 5px 9px 4px; background: var(--nuit); color: #fff; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background .15s, color .15s; }
.an__etat[data-etat="panne"] { background: var(--rouge); color: #fff; animation: an-clignote .8s steps(1) infinite; }
.an__etat[data-etat="faille"] { background: var(--rouge-fonce); color: #fff; animation: an-clignote .8s steps(1) infinite; }
@keyframes an-clignote { 50% { opacity: .55; } }
.an__piste { position: relative; height: 72px; border: 3px solid var(--nuit); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 2px), rgba(23, 23, 26, .1) calc(100% / 12 - 2px) calc(100% / 12)), #fff; box-shadow: 6px 6px 0 var(--nuit); }
.an__piste::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--t) * 100%); background: rgba(23, 23, 26, .06); }
.an__couloir--ailleurs .an__piste { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 2px), rgba(23, 23, 26, .1) calc(100% / 12 - 2px) calc(100% / 12)), #F1F1F3; }
/* les événements : une barre qui s'allonge à mesure que l'année avance */
.an__evt { position: absolute; top: 12px; bottom: 12px; left: var(--d); width: clamp(0%, calc(var(--t) * 100% - var(--d)), calc(var(--f) - var(--d))); min-width: 0; opacity: 0; transition: opacity .2s; }
.an__evt.est-passe { opacity: 1; }
.an__evt--panne { background: repeating-linear-gradient(-45deg, var(--rouge) 0 8px, var(--rouge-fonce) 8px 16px); }
.an__evt--faille { background: var(--nuit); }
.an__couloir--blitz .an__evt--faille { width: 7px; background: var(--rouge); }
.an__evt--evite { width: 34px; height: 34px; top: 50%; bottom: auto; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--nuit); scale: .3; transition: opacity .2s, scale .4s var(--claque); }
.an__evt--evite::before { content: ""; position: absolute; left: 12px; top: 8px; width: 8px; height: 14px; border: solid var(--jaune); border-width: 0 4px 4px 0; rotate: 45deg; }
.an__evt--evite.est-passe { scale: 1; }
.an__evt-txt { position: absolute; left: 0; display: block; width: max-content; max-width: 200px; padding: 6px 10px 5px; background: var(--nuit); color: #fff; font: 600 12px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; rotate: -2deg; translate: 0 6px; transition: translate .35s var(--claque); }
.an__evt.est-passe .an__evt-txt { translate: 0 0; }
.an__couloir--ailleurs .an__evt-txt { bottom: calc(100% + 24px); background: var(--rouge); }
.an__couloir--blitz .an__evt-txt { top: calc(100% + 24px); }
.an__evt--evite .an__evt-txt { left: 50%; translate: -50% 6px; background: var(--nuit); color: var(--jaune); }
.an__evt--evite.est-passe .an__evt-txt { translate: -50% 0; }
/* chez Blitz : le passage du mois (scan, mises à jour, tests) */
.an__controle { position: absolute; top: 50%; left: var(--d); display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -2px; border-radius: 50%; background: var(--jaune); color: var(--nuit); font-size: 14px; box-shadow: 0 0 0 2px var(--nuit); scale: 0; transition: scale .35s var(--claque); }
.an__controle.est-passe { scale: 1; }
/* l'annonce de la faille, et la tête de lecture */
.an__annonce-faille { position: absolute; top: 34px; bottom: 30px; left: calc(var(--lab) + (100% - var(--lab)) * .55); width: 0; border-left: 3px dashed var(--rouge-fonce); opacity: 0; transition: opacity .2s; }
.an__annonce-faille span { position: absolute; top: 129px; left: 6px; translate: 0 -50%; padding: 5px 9px 4px; background: var(--rouge-fonce); color: #fff; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.an__annonce-faille.est-passe { opacity: 1; }
.an__tete { position: absolute; top: 40px; bottom: 40px; left: calc(var(--lab) + 3px + (100% - var(--lab) - 6px) * var(--t)); width: 4px; margin-left: -2px; background: var(--nuit); pointer-events: none; }
.an__tete::before { content: ""; position: absolute; top: -10px; left: -8px; border: 10px solid transparent; border-top-color: var(--nuit); border-bottom: 0; }
.an__commandes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin-left: var(--lab); }
.an__jouer { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 3px solid var(--nuit); border-radius: var(--r); background: var(--nuit); color: var(--jaune); font: 700 17px/1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
@media (hover: hover) { .an__jouer:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); } }
.an__jouer:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.an__curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.an__curseur::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(var(--nuit), var(--nuit)) 0 0 / calc(var(--t) * 100%) 100% no-repeat, rgba(23, 23, 26, .2); }
.an__curseur::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(23, 23, 26, .2); }
.an__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 4px solid var(--nuit); border-radius: 50%; background: #fff; }
.an__curseur::-moz-range-thumb { width: 24px; height: 24px; border: 4px solid var(--nuit); border-radius: 50%; background: #fff; }
.an__curseur:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }
/* les trois règles, qui s'allument selon le moment de l'année */
.an__regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.an__regle { padding: 24px 24px 26px; background: #fff; border: 3px solid var(--nuit); box-shadow: 7px 7px 0 var(--nuit); transition: background .2s, box-shadow .2s, scale .35s var(--claque); }
.an__regle i { font-size: 38px; color: var(--rouge); }
.an__regle h3 { margin: 12px 0 8px; font: 900 clamp(19px, 1.6vw, 25px)/1.05 var(--titre); text-transform: uppercase; }
.an__regle p { margin: 0; font-size: 16px; line-height: 1.5; color: #3A3A42; }
.an__regle.est-actif { background: var(--nuit); color: #fff; box-shadow: 7px 7px 0 var(--rouge); scale: 1.03; }
.an__regle.est-actif i { color: var(--jaune); }
.an__regle.est-actif p { color: #D3D3DA; }
@media (max-width: 1060px) {
  .an__regles { grid-template-columns: minmax(0, 1fr); }
  .jauge__lecture { top: 55.5%; }
  .gaz { width: 27%; top: 78%; }
  .an__evt-txt { max-width: 180px; font-size: 11px; }
}
@media (max-width: 760px) {
  .an { --lab: 0px; }
  .an__mois { margin-left: 0; font-size: 11px; }
  .an__mois-long { display: none; } .an__mois-court { display: inline; }
  .an__mois li { padding-left: 4px; }
  .an__couloirs { gap: 34px; padding: 22px 0 26px; }
  .an__couloir { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .an__qui { grid-auto-flow: column; align-items: center; justify-content: start; gap: 12px; }
  .an__piste { height: 52px; box-shadow: 4px 4px 0 var(--nuit); }
  .an__evt-txt { display: none; }
  .an__evt--evite { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .an__evt--evite::before { left: 8px; top: 5px; width: 6px; height: 11px; border-width: 0 3px 3px 0; }
  .an__controle { width: 16px; height: 16px; margin-top: -8px; font-size: 10px; }
  .an__annonce-faille span { top: 76px; left: auto; right: 6px; font-size: 9px; }
  .an__tete { top: 30px; bottom: 30px; }
  .an__commandes { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .an__etat { animation: none !important; }
  .an__evt, .an__controle, .an__regle, .gaz, .gaz__pedale { transition: none; }
  .gaz-bulle, .gaz-bulle i { animation: none; }
}

/* ==========================================================================
   PAGE D'ENSEMBLE : le paquet, la collection en classeur, les combos
   ========================================================================== */
.cl-heros__grille { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 4vw, 80px); }
.cl-heros__titre { font-size: clamp(46px, 6vw, 108px); margin: 4px 0 24px; }
.paquet { --cw: clamp(150px, 12.4vw, 240px); position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.paquet__eventail { position: relative; width: 100%; height: calc(var(--cw) * 2.02); }
.carte--deco { position: absolute; left: 50%; top: calc(var(--cw) * .06); width: var(--cw); margin-left: calc(var(--cw) / -2); cursor: pointer; }
.carte--deco .carte__recto { box-shadow: 2.6cqi 2.6cqi 0 rgba(0, 0, 0, .55); }
.paquet__bouton { position: relative; z-index: 3; }
.paquet__bouton i { transition: rotate .4s var(--claque); }
@media (hover: hover) { .paquet__bouton:hover i { rotate: 180deg; } }
/* la collection : une page de classeur, des pochettes */
.classeur { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); margin: clamp(40px, 5vw, 70px) 0 0; padding: clamp(26px, 3.4vw, 54px) clamp(22px, 3vw, 50px) clamp(30px, 3.6vw, 58px); list-style: none;
  background: radial-gradient(rgba(246, 246, 247, .05) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--charbon); border-radius: 14px; box-shadow: 14px 14px 0 var(--nuit); }
/* les trous du classeur */
.pochette { position: relative; padding: 12px; border: 2px solid rgba(246, 246, 247, .14); border-radius: 14px; background: rgba(246, 246, 247, .04); }
.pochette .carte { --ombre: rgba(0, 0, 0, .55); }
.pochette:nth-child(3n + 1) .carte { rotate: -1deg; } .pochette:nth-child(3n + 2) .carte { rotate: .8deg; } .pochette:nth-child(3n) .carte { rotate: -.4deg; }
.pochette.est-cible { animation: sv-cible 1.2s ease-out; }
@keyframes sv-cible { 0%, 40% { box-shadow: 0 0 0 4px var(--jaune); } 100% { box-shadow: 0 0 0 0 var(--jaune); } }
.pochette--vide { display: grid; }
.vide { aspect-ratio: 5 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; border: 3px dashed rgba(246, 246, 247, .32); border-radius: 16px; text-align: center; color: var(--blanc); }
.vide__num { margin: 0; font: 600 14px/1 var(--mono); letter-spacing: .1em; color: var(--jaune); }
.vide__titre { margin: 0; font: 900 clamp(28px, 2.6vw, 40px)/1 var(--titre); text-transform: uppercase; }
.vide__texte { margin: 0 0 8px; max-width: 22ch; color: var(--gris); font-size: 17px; line-height: 1.45; }
.cl-classeur__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cl-classeur__tout { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 .3em; border: 0; color: var(--nuit); font: 700 17px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cl-classeur__tout i { transition: rotate .45s var(--claque); }
.cl-classeur__tout[aria-pressed="true"] i { rotate: 180deg; }
/* les combos : des decks de départ en boîte, comme les decks thématiques vendus en magasin */
.cl-combos { overflow: hidden; color: var(--blanc);
  background: radial-gradient(rgba(246, 246, 247, .07) 1.5px, transparent 2px) 0 0 / 15px 15px, var(--nuit); }
.cl-combos__rayons { position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 115%, rgba(255, 0, 77, .12) 0 3deg, transparent 3deg 10deg); }
.cl-combos__tete { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(30px, 5vw, 80px); align-items: end; }
.cl-combos__cote { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cl-combos__cote p { max-width: 44ch; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: #DCDCE2; }
/* les boîtes de deck elles-mêmes (.decks, .deck*) sont dans css/decks.css, chargé après ce fichier */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1060px) {
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes-sv__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
  .mini-cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; gap: 22px; margin-inline: calc(-1 * clamp(22px, 3.5vw, 60px)); padding: 18px clamp(22px, 3.5vw, 60px) 28px; scroll-padding-inline: clamp(22px, 3.5vw, 60px); }
  .mini-cartes li { flex: 0 0 168px; scroll-snap-align: start; }
  .sig-pub__scene { grid-template-columns: minmax(0, 1fr); }
  .classeur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-combos__tete { grid-template-columns: minmax(0, 1fr); }
  .cl-heros__grille { grid-template-columns: minmax(0, 1fr); }
  .paquet { --cw: clamp(150px, 21vw, 220px); margin-top: 30px; }
}
@media (max-width: 900px) {
  .sv-heros__grille { grid-template-columns: minmax(0, 1fr); }
  .sv-heros__carte { width: min(300px, 78vw); margin-top: 40px; margin-bottom: 30px; }
  .sv-heros__astuce { left: auto; right: -6px; bottom: -44px; }
  .sig-app__tete, .sig-marque__tete, .sig-pub__tete, .sig-heb__tete, .sig-ia__tete, .sig-vitesse__tete, .sv-entretien__tete, .cl-classeur__tete { grid-template-columns: minmax(0, 1fr); }
  .sv-faq__grille { grid-template-columns: minmax(0, 1fr); }
  .sv-faq__tete { position: static; }
  .sv-maquette__grille { grid-template-columns: minmax(0, 1fr); }
  .ordre__etapes { flex-wrap: wrap; }
  .ordre { margin-top: 26px; }
  .maq-scene { width: min(100%, 560px); justify-self: center; height: clamp(330px, 84vw, 470px); margin-top: 10px; }
  /* une seule colonne épinglée : le titre, le navigateur, le fil, puis la fiche */
  .sig-site__epingle { padding: 88px 0 20px; }
  .sig-site__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sig-site__gauche { display: contents; }
  .sig-site__gauche .surtitre { order: 1; margin-bottom: 6px; }
  .sig-site__titre { order: 2; font-size: clamp(30px, 8vw, 46px); }
  .sig-site__scene { order: 3; height: clamp(190px, 31svh, 330px); margin-top: 28px; }
  .bati-fil { order: 4; width: 100%; max-width: none; margin: 22px 0 24px; }
  .bati-fiches { order: 5; max-width: none; }
  .navi { height: 100%; box-shadow: 8px 8px 0 var(--nuit); }
  .navi__cle { top: -16px; right: -6px; font-size: 14px; padding: 8px 12px 7px; }
  .bati-fil__point { width: 34px; height: 34px; font-size: 12px; }
  .bati-fiche { padding: 28px 20px 30px; filter: drop-shadow(6px 6px 0 var(--nuit)); }
  .bati-fiche__ruban { width: 96px; margin-left: -48px; top: -15px; }
  .bati-fiche__num { font-size: 12px; }
  .bati-fiche__titre { margin: 12px 0 8px; font-size: clamp(20px, 5.6vw, 26px); }
  .bati-fiche__texte { font-size: 15px; line-height: 1.45; }
  .sig-vitesse__grille { grid-template-columns: minmax(0, 1fr); }
  .jauge { justify-self: center; width: 100%; max-width: 420px; }
  @keyframes sv-courant-v { to { background-position: 0 22px; } }
}
@media (max-width: 640px) {
  .ordre__ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ordre__etapes { gap: 8px 20px; }
  .ordre__etape { font-size: 13px; padding: 7px 9px 6px; min-height: 30px; }
  .maq-soum { padding: 20px 18px 30px; font-size: 11px; }
  .maq-soum__lignes li { padding: 6px 0; }
  .maq-feuille { width: 86%; top: 26%; box-shadow: 8px 8px 0 var(--nuit); }
  .maq-collant { width: 106px; padding: 10px; font-size: 11px; border-width: 4px; }
  .maq-loupe { width: 96px; }
  .sv-heros, .cl-heros { padding-top: 22px; }
  .sv-heros__titre { font-size: clamp(36px, 10.4vw, 48px); }
  .cl-heros__titre { font-size: clamp(40px, 11.4vw, 54px); }
  .sv-heros__actions { gap: 12px; }
  .sv-heros__actions .btn { font-size: 19px; padding: 15px 20px; }
  .faits { grid-template-columns: minmax(0, 1fr); }
  .fait { padding: 22px 0 26px; }
  .etapes-sv__liste { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .etape-sv { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .etape-sv__num { grid-row: span 2; width: 60px; height: 60px; font-size: 24px; }
  .etape-sv__titre { margin: 4px 0 8px; }
  .question__q { font-size: 18px; padding: 18px 0; }
  .question__r p { padding-right: 0; font-size: 17px; }
  .sv-appel__titre { font-size: clamp(40px, 11.5vw, 56px); max-width: 11ch; }
  .sv-appel__collant { width: auto; height: 130px; max-width: 120px; object-fit: contain; right: -8px; top: calc(var(--biais) + 18px); }
  .sv-appel__contenu { padding-top: 104px; }
  .sv-appel__collant { top: calc(var(--biais) + 34px); right: 10px; }
  .sv-appel__collant--rouages { width: 116px; height: auto; max-width: none; }
  .sv-appel__ecoute { right: 112px; top: calc(var(--biais) + 34px + 64px); scale: .6; }
  .sv-appel__actions .btn--geant { width: 100%; }
  .mini-cartes li { flex-basis: 150px; }
  .sig-pub__mega { width: 190px; }
  .sig-pub__mur { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pub--social { grid-column: auto; grid-row: auto; }
  .pub__visuel { aspect-ratio: 16 / 11; }
  .classeur { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 26px; }
    .pochette { padding: 8px; }
  .paquet { --cw: 29vw; margin-top: 18px; }
  .sig-vitesse__grille { gap: 50px; }
  .correctif__nom { font-size: 15px; }
}

/* ---------- téléphone : la collection et les decks se balaient comme une main de cartes */
@media (max-width: 760px) {
  .classeur { --balaye: 80vw; margin-block: 34px 0; padding-block: 18px 22px; border-radius: 0; box-shadow: none; }
  .pochette { padding: 0; border: 0; background: none; }
  .cl-combos__tete { grid-template-columns: minmax(0, 1fr); }
  .carte__stat-nom { font-size: 3.2cqi; }
  .carte__stat-val { font-size: 4.1cqi; }
  .carte__coup { font-size: 5cqi; }
  .carte__num { font-size: 4cqi; }
  .carte__v-retour { width: 44px; height: 44px; }
  .th-rouge .fait__texte { font-weight: 500; }
  .bati-fil__point, .qc-pin { position: relative; }
  .bati-fil__point::after, .qc-pin::after { content: ""; position: absolute; inset: -6px; }
}

/* ---------- mouvement réduit : tout reste statique et lisible */
@media (prefers-reduced-motion: reduce) {
  .carte__tourner i::before, .carte__v-retour i::before { transition: none !important; }
  .carte__corps, .navi, .navi *, .tel, .tel__cadre, .tel__ecran, .baie__alerte, .interrupteur__bouton, .correctif__etat .dymo { transition: none !important; }
  .question::details-content { transition: none; }
  .sv-appel__collant, .sv-appel__collant img, .sv-appel__ecoute i { animation: none !important; }
  .maq-collant { transition: none; }
  .etapes-sv.est-anime .etape-sv :is(.etape-sv__titre, .etape-sv__texte) { transition: none; }
}