/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — la version téléphone du site, en un seul endroit.

   Ce fichier est chargé par les trois pages principales avec
   `media="(max-width: 768px)"` sur le <link> : au-delà de 768px il ne
   contribue rien à la cascade et ne bloque pas le rendu. Il est donc
   inutile — et nuisible — d'y répéter un @media : une règle écrite ici
   pour 900px ne s'appliquerait jamais, silencieusement. Les seules
   requêtes admises à l'intérieur sont des sous-plages (≤ 360px, ≥ 600px)
   ou des requêtes orthogonales (prefers-reduced-motion, print).

   Il arrive APRÈS le preflight Tailwind précompilé de chaque page, qui
   pose `summary{display:list-item}`, `img{max-width:100%}` et
   `ul{list-style:none}`. Trois feuilles sont en revanche injectées à
   l'exécution — assistant.js, frame.js, scroll.js — et atterrissent après
   celle-ci : ce qui touche à la bulle d'assistant se règle donc dans
   assistant.js, pas ici.

   Pourquoi tant de !important, deux raisons, aucune évitable :
     1. les blocs @media (max-width:1024px) des pages, qui servent les
        tablettes, sont restés dans les pages et sont écrits en !important.
        On ne peut les battre qu'à armes égales.
     2. le hero, les stats et le déroulé portent leurs mesures en style
        inline dans le HTML — et un style inline bat toute feuille.
   Là où la règle de bureau n'est ni inline ni !important, on s'en passe.

   Frontière : mobile = ≤ 768px partout, une seule et même valeur pour la
   feuille, pour mobile.js et pour le bloc mobile d'assistant.js. La
   frontière est à 768 et non à 767 parce qu'à 768 pile la barre de bureau
   ne tient pas — c'est la dernière largeur qui a besoin du burger.

   ── Le parti pris de cette version (2e refonte, 13/08/2026) ─────────────
   La première refonte gardait l'aurora de bureau et empilait des cartes.
   Sur 390px, les cinq taches de l'aurora se recouvrent et noient chaque
   écran dans un lavis bleu ; et une carte à ombre portée n'apporte rien
   quand elle occupe toute la largeur — il ne reste que son coût visuel.
   Cette version :
     · coupe l'aurora et le grain, rend au site des surfaces nettes —
       blanc, gris froid très clair, encre — séparées par des filets ;
     · remplace les piles de cartes par des LISTES À FILETS (le motif
       natif du téléphone) : automatisations, offres, index des cas ;
     · déboîte la chronologie et les études de cas : le contenu se pose
       directement sur la surface de la section ;
     · peint tout dès le premier rendu : les apparitions Motion One sont
       neutralisées ici (opacity:1 !important bat leurs animations dans la
       cascade), le H1 — l'élément LCP — n'attend plus le JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════ 00 · FONDATIONS ═══════════════════════ */

:root {
  --sec-pad: 62px;          /* respiration verticale d'une section (148px en bureau) */
  --sec-gap: 24px;          /* de l'en-tête au contenu (76px en bureau) */
  --m-gut: 20px;            /* gouttière — le bord de l'écran */
  --m-r-card: 16px;         /* rayon des panneaux qui restent des panneaux */
  --m-r-small: 10px;        /* rayon des petits objets : pastilles, icônes */
  --m-bar-h: 64px;          /* hauteur de la barre d'action basse */
  --m-nav-h: 62px;          /* hauteur réelle de la barre de navigation (8 + 46 + 8) */
  --m-paper: #ffffff;       /* la surface de base */
  --m-cool: #f6f7fb;        /* gris froid très clair — contact & pied de page */
}

/* L'aurora est cinq taches radiales de ~1000px sur une couche fixe : sur
   390px de large elles se recouvrent toutes et chaque écran baigne dans un
   lavis bleu laiteux — c'est elle qui donnait à la version téléphone son
   air délavé. On la coupe, et avec elle sa passe de composition plein
   écran à chaque image. Le hero garde sa propre lumière, contenue (§03). */
/* Le fond clair n'est plus ici depuis le 17/08/2026 : il vit dans
   **fond.css**, chargée par les SIX pages, quand cette feuille-ci n'en couvre
   que trois. Les pages légales gardaient sinon l'aurora du bureau, à
   213,228,255 quand le reste du site était à 239,241,254.
   Ce qui reste de ce côté ici, c'est la neutralisation des fonds clairs que
   les sections posaient : chacun faisait une frontière visible avec le fond
   commun, et Léon veut la version claire homogène d'un bout à l'autre. Les
   fonds SOMBRES, eux, restent : ce sont les seuls à avoir le droit de
   trancher. Voir la section 01 ci-dessous. */

/* ── Tout est peint dès le premier rendu ──────────────────────────────────
   Les apparitions Motion One retiennent chaque bloc en opacity:0 jusqu'à
   ce que le JavaScript soit chargé, parsé et exécuté — le titre du hero,
   élément LCP, attendait ~3s sur un CPU modeste. Un !important gagne sur
   les animations ET sur les styles inline dans la cascade : ces deux
   règles rendent les apparitions inopérantes sur téléphone, où la vitesse
   perçue vaut plus qu'un fondu d'entrée. */
/* `#hero-ctas a` : la page anime aussi chaque bouton individuellement
   (opacité inline mise à 0 puis fondu) — sans ce verrou, les boutons
   rejoueraient une seconde apparition après celle du bloc (§ ci-dessous). */
.will-reveal, .reveal-line, .proc-card, #cta-block, .cs, .rz-tc,
#hero-ctas a {
  opacity: 1 !important;
  transform: none !important;
}

/* La barre de navigation a sa propre entrée Motion One (fondu + descente,
   déclenchée 0,2s après le chargement). La page peignant désormais
   immédiatement, on voyait la barre apparaître, disparaître, puis revenir
   en fondu. Même neutralisation que ci-dessus. */
#navbar { opacity: 1 !important; transform: none !important; }

/* ── Les animations qui reviennent, sans coûter le LCP ───────────────────
   1. Au chargement : le bloc de texte du hero monte et le maillage fond,
      en CSS pur. Rien n'attend le JavaScript, et on anime les PARENTS
      (#hero-content, l'enveloppe du maillage) : leurs enfants, verrouillés
      en opacity:1 !important ci-dessus, restent hors de portée des
      rejouages de Motion One.
   2. Au défilement : mobile.js pose .m-vu quand un bloc entre en vue, la
      règle ci-dessous le fait glisser en place. L'état masqué n'existe
      que sous html.js, jamais au-dessus de la ligne de flottaison. */

@keyframes mMonte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mFondu { from { opacity: 0; } to { opacity: 1; } }

/* Le chrono d'une animation CSS démarre quand la feuille s'applique — pas
   quand l'écran peint. Sur un vrai téléphone, la première image arrive
   des centaines de millisecondes plus tard : l'entrée était déjà jouée,
   le texte semblait s'afficher d'un coup. mobile.js pose donc `m-entree`
   sur <html> à la première image peinte (double rAF) : l'animation part
   de là, entièrement visible. Filet : un délai de secours pose la classe
   quoi qu'il arrive — rien ne peut rester masqué. */
html.js:not(.m-entree) #hero-content { opacity: 0; }
html.js:not(.m-entree) #hero-section > div[aria-hidden="true"] { opacity: 0; }
html.m-entree #hero-content { animation: mMonte 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.m-entree #hero-section > div[aria-hidden="true"] { animation: mFondu 1s ease-out both; }

/* .proc-card n'est plus de la liste depuis le 17/08/2026 : les quatre étapes
   ont leur propre entrée, la pénombre qui se lève quand le rail atteint leur
   nœud (§08). Les deux se seraient superposées, glissement puis éclairage. */
html.js .sec-head:not(.m-vu),
html.js .trust-badge:not(.m-vu),
html.js .faq-agent:not(.m-vu),
html.js .web-band:not(.m-vu),
html.js .roi-note:not(.m-vu),
html.js .maint-card:not(.m-vu),
html.js .rz-pledge:not(.m-vu) {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}
.sec-head, .trust-badge, .faq-agent,
.web-band, .roi-note, .maint-card, .rz-pledge {
  transition: opacity 0.6s ease-out, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Les animations infinies décoratives ne valent pas leur coût sur une
   batterie : le maillage du hero en compte ~130 à lui seul (drift,
   breathe, pulse), et chaque .grad-text repeint son dégradé en continu.
   Figées, elles montrent toujours la charte — et frame.js n'a plus rien
   à surveiller. */
.rings-float, .rings-float * { animation: none !important; }
.grad-text { animation: none !important; background-position: 0% 50% !important; }

/* Pas de retour visuel gris du navigateur : chaque objet tactile porte son
   propre :active plus bas. */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Aucune grille ne doit pouvoir être élargie par son plus long enfant
   insécable (le défaut `min-width:auto` des éléments de grille). */
.section-inner, .sec-head, .auto-grid, .contact-grid, .ft-top, .ft-cols,
.faq-layout, .stat-grid, .proc-col-grid { min-width: 0; }
.section-inner > *, .contact-grid > *, .ft-top > *, .auto-grid > * { min-width: 0; }

/* Les adresses et e-mails sont les seules chaînes non sécables du site. */
.contact-direct a, .ft-col a, .mm-mail, .form-note a { overflow-wrap: anywhere; }


/* ═══════════════════════ 01 · BARRE DE NAVIGATION ═══════════════════════ */

#navbar { padding: 8px var(--m-gut) !important; }
#navbar > a img {
  height: 46px !important;
  transform: none !important;
  transform-origin: left center !important;
}

.nav-links { display: none !important; }
#nav-cta-desktop { display: none !important; }
#nav-burger {
  display: flex !important;
  width: 44px; height: 44px;          /* WCAG 2.5.8 — la cible, pas le dessin */
  align-items: center; justify-content: center;
  margin-right: -10px;                /* la cible déborde, le trait reste aligné */
}

/* Les ancres tombent sous la barre, pas dessous elle. */
#automatisations, #process, #faq, #contact,
#audit-section, #price-section, #web-section, #maint-section,
.cs { scroll-margin-top: calc(var(--m-nav-h) + 8px) !important; }
#securite { scroll-margin-top: calc(var(--m-nav-h) + 22px) !important; }


/* ═══════════════════════ 02 · MENU PLEIN ÉCRAN ═══════════════════════ */

#mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 49;
  flex-direction: column; justify-content: space-between;
  padding: calc(var(--m-nav-h) + 40px) 24px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 88% 0%,  rgba(0, 178, 255, 0.10), transparent 62%),
    radial-gradient(130% 70% at 8% 100%, rgba(106, 92, 255, 0.12), transparent 62%),
    rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
#mobile-menu.open { display: flex !important; }

/* La bulle d'assistant est injectée en z-index 9000 : elle passerait par-
   dessus le panneau (z-index 49). Même chose pour la barre basse. */
body.menu-open #ds-assistant,
body.menu-open .m-bar { display: none !important; }

.mm-links { display: flex; flex-direction: column; margin: auto 0; }
.mm-link {
  display: flex; align-items: baseline; gap: 15px;
  padding: 18px 2px;
  text-decoration: none; color: var(--text);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.4rem; letter-spacing: -0.025em; line-height: 1.1;
  border-bottom: 1px solid var(--hairline);
  opacity: 0; transform: translateY(20px);
}
.mm-link:first-child { border-top: 1px solid var(--hairline); }
.mm-link:active { color: var(--accent); }
.mm-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mm-link.is-active { color: var(--accent); }
.mm-link.is-active .mm-num { -webkit-text-fill-color: currentColor; color: currentColor; }

.mm-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.2em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  flex-shrink: 0; min-width: 24px;
}

@keyframes mmIn { to { opacity: 1; transform: translateY(0); } }
#mobile-menu.open .mm-link { animation: mmIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#mobile-menu.open .mm-link:nth-child(1) { animation-delay: 0.04s; }
#mobile-menu.open .mm-link:nth-child(2) { animation-delay: 0.09s; }
#mobile-menu.open .mm-link:nth-child(3) { animation-delay: 0.14s; }
#mobile-menu.open .mm-link:nth-child(4) { animation-delay: 0.19s; }
#mobile-menu.open .mm-link:nth-child(5) { animation-delay: 0.24s; }

.mm-foot {
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; transform: translateY(20px);
}
#mobile-menu.open .mm-foot { animation: mmIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; }
#mobile-menu .mm-cta {
  justify-content: center; width: 100%; box-sizing: border-box; padding: 17px 26px;
}
.mm-mail {
  text-align: center; text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.05em; color: var(--muted);
  padding: 6px 0;
}
.mm-mail:active { color: var(--accent); }
.mm-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }


/* ═══════════════════════ 03 · HERO ═══════════════════════

   L'écran d'atterrissage : le cercle de la marque, entier et aussi grand
   que l'écran le permet — puis le titre, la description et les deux
   gestes, qui remontent et empiètent sur son arc bas (arbitrage de Léon :
   l'empiétement est voulu, le fondu du bas garde le titre lisible).
   Rien d'autre : les trois engagements ne s'affichent pas sur téléphone.
   ------------------------------------------------------------------------ */

#hero-section {
  min-height: 100vh !important;     /* repli sans svh */
  min-height: 100svh !important;
  overflow: hidden !important;
  align-items: flex-end !important;
  padding: calc(var(--m-nav-h) + 20px) var(--m-gut) 48px !important;
  /* Les deux halos restent, la couche de base part. Ils s'éteignent en
     dégradé (transparent à 62% et 55%) et ne font donc aucune arête, quand
     l'aplat blanc, lui, s'arrêtait net au bas des 100svh : c'était la
     frontière la plus haute de l'accueil, celle que Léon voit « à partir du
     compteur ». Le voile de fond.css traverse maintenant le hero, les halos
     se posent dessus. */
  background:
    radial-gradient(140% 70% at 50% -12%, rgba(106, 92, 255, 0.11), transparent 62%),
    radial-gradient(90% 46% at 96% 2%,   rgba(0, 178, 255, 0.10),  transparent 55%),
    transparent !important;
}

/* Le cercle de la marque : entier — 98vw est la plus grande taille qui ne
   coupe ni son sommet ni ses flancs — et assez présent pour porter
   l'écran. Le fondu n'efface pas l'arc bas, il l'atténue : l'anneau se
   referme, et le titre peut le chevaucher en restant lisible. */
.rings-float {
  left: 50% !important; right: auto !important;
  top: 7svh !important;
  width: min(98vw, 440px) !important;
  height: min(98vw, 440px) !important;
  transform: translateX(-50%) !important;
  opacity: 0.5 !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.34) 82%, rgba(0,0,0,0.18) 100%) !important;
  mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,0.34) 82%, rgba(0,0,0,0.18) 100%) !important;
}

#hero-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding-top: 0;
}

#hero-h1 {
  font-size: clamp(2.25rem, 9.6vw, 2.7rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  max-width: 100% !important;
  margin-bottom: 18px !important;
}
/* Les quatre lignes du titre portent `white-space:nowrap` en style inline
   pour que le bureau garde ses ruptures choisies. Sur 350px de large, la
   plus longue déborderait. */
#hero-h1 .overflow-clip,
#hero-h1 .reveal-line { white-space: normal !important; }

#hero-sub {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  margin-bottom: 24px !important;
}

/* Un seul geste principal ; le secondaire devient un lien. */
.hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 0 !important;
}
.hero-ctas .btn-primary {
  justify-content: center; width: 100%; box-sizing: border-box;
  padding: 17px 24px !important; text-align: center;
}
.hero-ctas .btn-ghost {
  border: 0 !important; background: none !important;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 12px !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(106, 92, 255, 0.35);
}
.hero-ctas .btn-ghost:active { color: var(--accent) !important; }

/* Les trois engagements ne s'affichent pas sur téléphone (demande de
   Léon, 14/08/2026). L'information vit ailleurs : hébergement UE dans le
   pied de page, les 2 à 4 semaines dans la section automatisations,
   l'audit remboursé dans le déroulé et le bloc contact. */
#hero-trust { display: none !important; }


/* ═══════════════════════ 04 · COMPTEURS ═══════════════════════ */

#stats { padding: 0 var(--m-gut) !important; }
.stat-frame { padding: 6px 0; }
.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.stat-item { padding: 24px 6px !important; text-align: center; position: relative; }
.stat-item.stat-vline::after { display: none !important; }

/* Filets verticaux entre les trois colonnes, fondus à leurs extrémités. */
.stat-item + .stat-item::before {
  content: ''; position: absolute; top: 14%; bottom: 14%; left: 0;
  width: 1px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--stat-border) 22%,
                              var(--stat-border) 78%, transparent);
}

.stat-num {
  font-size: clamp(1.6rem, 7.4vw, 2.1rem) !important;
  opacity: 1 !important;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.05;
}
.stat-item .label {
  margin-top: 7px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35;
}


/* ═══════════════════════ 05 · COQUE DE SECTION ═══════════════════════ */

.section  { padding: var(--sec-pad) var(--m-gut) !important; }
.sec-head { margin-bottom: var(--sec-gap) !important; max-width: 100% !important; }

.sec-eyebrow {
  margin-bottom: 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  gap: 10px !important;
}
.sec-eyebrow::before { width: 18px !important; }

.sec-title { margin-bottom: 14px !important; }
.h-section {
  font-size: clamp(1.5rem, 6.6vw, 1.95rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
}
.sec-lead {
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  margin-bottom: 14px !important;
}
.sec-note { font-size: 11.5px !important; padding-top: 3px !important; line-height: 1.55 !important; }
.sec-link { margin-top: 12px !important; min-height: 44px; display: inline-flex; align-items: center; }


/* ═══════════════════════ 06 · CE QU'ON AUTOMATISE ═══════════════════════

   Six domaines en LISTE À FILETS — le motif natif du téléphone — au lieu
   de six cartes à ombre. Chaque ligne garde l'icône, le domaine et la
   phrase qui dit ce que ça change ; le détail s'ouvre au tap. Rien n'est
   retiré, mais plus rien n'est encadré : la section entière tient en un
   écran et demi.

   Le repli se fait par ABSENCE de la classe .is-open, sur le DOM existant :
   aucune balise n'est modifiée, le bureau est identique par construction,
   et l'état replié est le défaut de la feuille. Sans JavaScript, la classe
   `js` n'est pas posée sur <html> et tout reste déplié.
   ------------------------------------------------------------------------ */

#automatisations .sec-head { margin-bottom: 18px !important; }
.auto-intro { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 6px !important; }

.auto-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--border);
}

.auto-card {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  overflow: hidden;
}
/* Le liseré-signature des cartes de bureau (::before en dégradé) n'a plus
   de carte à souligner. */
.auto-card::before { display: none !important; }

/* L'en-tête devient la commande. mobile.js le promeut en bouton avec
   aria-expanded ; ici on lui donne la taille et le retour au doigt. */
.auto-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  width: 100%;
  padding: 15px 0 !important;
  text-align: left;
  background: none; border: 0;
  font: inherit; color: inherit;
  cursor: pointer;
}
.auto-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

.auto-ic {
  width: 32px !important; height: 32px !important;
  border-radius: var(--m-r-small) !important;
  transform: none !important; flex-shrink: 0;
}
.auto-ic svg { width: 16px !important; height: 16px !important; }
.auto-title { font-size: 0.985rem !important; line-height: 1.25 !important; }

/* Le chevron, injecté par le script. Il tourne, il ne saute pas. */
.m-chev {
  margin-left: auto; flex-shrink: 0;
  width: 17px; height: 17px;
  color: var(--muted);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}
[aria-expanded="true"] .m-chev { transform: rotate(180deg); color: var(--accent); }

/* La promesse reste lisible carte fermée — c'est elle qui fait choisir. */
.auto-copy {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: -6px 0 15px !important;
  padding-left: 44px;               /* alignée sous le titre, pas sous l'icône */
  padding-right: 26px;
}
.auto-list {
  margin: 0 0 16px 44px !important;
  padding: 12px 0 0 !important;
  gap: 8px !important;
  border-top: 1px solid var(--hairline);
}
.auto-list li { font-size: 13px !important; line-height: 1.5 !important; }

html.js .auto-card:not(.is-open) .auto-list { display: none !important; }


/* ═══════════════════════ 07 · SCEAU SÉCURITÉ ═══════════════════════

   Le seul panneau qui reste un panneau dans cette section : le bloc encre
   des engagements de données. Sur les surfaces redevenues blanches, c'est
   lui le moment de contraste — il n'a plus à lutter avec un fond bleu.
   ------------------------------------------------------------------------ */

.trust-badge {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  margin-top: 30px !important;
  padding: 24px 19px !important;
  border-radius: var(--m-r-card) !important;
}
.tb-main  { flex-direction: column !important; gap: 15px !important; }
.tb-seal  { width: 44px !important; height: 44px !important; border-radius: var(--m-r-small) !important; }
.tb-seal svg { width: 21px !important; height: 21px !important; }
.tb-title { font-size: 1.24rem !important; line-height: 1.15 !important; }
.tb-copy  { font-size: 13.5px !important; line-height: 1.6 !important; max-width: none !important; }
.tb-claims { padding: 4px 16px !important; }
.tb-claims li { padding: 11px 0 !important; font-size: 13px !important; line-height: 1.45 !important; }

.auto-foot {
  margin-top: 26px !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 20px !important;
}
.auto-foot .btn-primary { justify-content: center; }
.auto-note { font-size: 12.5px !important; line-height: 1.6 !important; }


/* ═══════════════════════ 08 · COMMENT ÇA SE PASSE ═══════════════════════

   Quatre étapes déboîtées : plus de pavés sombres encadrés dans une
   section déjà sombre — le numéro, le titre et le texte se posent
   directement sur l'encre, tenus par le rail dégradé et ses nœuds.

   Depuis le 17/08/2026, c'est le vrai rail du bureau qui court ici
   (#proc-rail et son remplissage), et non plus des segments dessinés par
   chaque carte. Le script d'index.html le pilote aussi sous 769px : le
   remplissage suit le défilement, chaque nœud s'allume quand la ligne de
   lecture (la moitié de l'écran) l'atteint, et l'étape sort de la pénombre
   au même instant. Les étapes reprennent donc la hauteur qu'elles avaient
   perdue à la refonte du 13/08/2026, sans quoi elles s'allumeraient
   presque toutes ensemble : c'est l'espace entre deux nœuds qui fait qu'on
   n'en lit qu'une à la fois.

   Une seule mécanique pour les deux largeurs, réglée ici par la géométrie
   du téléphone : rien à ajouter au script. Corollaire : .proc-card ne
   passe plus par l'apparition .m-vu de mobile.js (§Tout est peint), la
   pénombre est sa seule entrée, sinon les deux se superposeraient.
   ------------------------------------------------------------------------ */

#proc-sticky { padding: 54px var(--m-gut) 58px !important; }
#proc-label   { margin-bottom: 16px !important; }
#proc-h2      { margin-bottom: 0 !important; max-width: 100% !important; }
.proc-col-grid { gap: 24px !important; }

/* Le retrait passe par la variable : c'est la piste qui le porte, pas la
   pile, sans quoi le rail de bureau partirait au milieu du texte. */
#proc-stack {
  position: relative !important;
  gap: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  --proc-indent: 26px;
}

/* Le rail part plus bas que la piste, pour ne pas toucher le titre. Sur
   bureau les 44px de marge de la pile l'en écartent ; ici la marge est à zéro
   et la ligne démarrait à 3px sous « vous en êtes », ce qui la faisait lire
   comme un prolongement du texte. On coupe son haut plutôt que de pousser la
   pile : le titre respire, et la section ne gagne pas un pixel de hauteur.
   Il reste 57px de ligne avant le premier nœud, assez pour l'annoncer. Le
   script relit la hauteur du rail, les écarts entre nœuds ne bougent pas. */
#proc-rail { top: 32px !important; }

/* Une étape reprend un demi-écran, comme sur ordinateur : c'est l'écart
   entre deux nœuds qui fait qu'elles arrivent une par une. Le texte se pose
   à un retrait fixe du haut de son bloc, il n'y est pas centré : au retrait
   fixe, l'écart entre deux nœuds vaut exactement la hauteur du bloc, quelle
   que soit la longueur des textes. Le plancher en pixels n'a d'effet que sur
   les écrans très bas, où 52vh finirait par passer sous la hauteur du texte :
   le bloc se laisserait pousser et les écarts redeviendraient inégaux.
   En vh et non en dvh : la barre d'adresse qui se replie ne doit pas changer
   la hauteur des blocs sous les yeux. */
.proc-card {
  min-height: max(52vh, 360px) !important;
  padding: 9vh 0 0 !important;
}

/* Le nœud, centré sur le rail : le centre du rail est à 6px du bord de la
   piste (left:5px, 2px de large), la rangée démarre au retrait de 26px, donc
   -26px pour une bille de 12px. En hauteur, le centre optique du numéro
   (26px de corps, interligne 1) tombe à 13px, moins le rayon. Le halo violet
   de l'état allumé est celui du bureau. */
.ptdot { left: -26px !important; top: 7px !important; }

.proc-num   { font-size: 26px !important; margin-bottom: 8px !important; line-height: 1 !important; }
.proc-title { font-size: 1.12rem !important; line-height: 1.22 !important; }
.proc-copy  { font-size: 14px !important; line-height: 1.6 !important; margin-top: 7px !important; max-width: 60ch; }
.proc-time  { margin-top: 12px !important; font-size: 11.5px !important; }

/* Le terminus, ajouté le 17/08/2026 : le rail ne s'arrête pas sec sous la
   quatrième étape, il descend sur le bouton et l'allume. Son nœud se
   recentre donc sur celui-ci (52px de haut, son centre à 26px du haut de la
   rangée) et grossit à 16px, d'où -28px de retrait et 18px de haut. Le `top`
   est redit ici parce que le !important de .ptdot bat la spécificité de la
   règle de bureau, qui posait déjà ces 18px.
   Le rembourrage haut est calculé pour que l'écart au nœud de l'étape 04
   vaille la hauteur d'un bloc : le retrait d'une étape (9vh) moins les 13px
   qui séparent les deux nœuds dans leur rangée, celui d'une étape tombant à
   13px du haut et celui du bouton à 26px. Mesuré : 439px entre les cinq
   nœuds sur un écran de 844px. Sans min-height:0, le terminus héritait du
   demi-écran des étapes et le bouton flottait à 300px du texte. */
.proc-tail {
  min-height: 0 !important;
  padding-top: calc(9vh - 13px) !important;
}
.proc-tail .ptdot { left: -28px !important; top: 18px !important; }
.proc-cta {
  width: 100% !important;
  justify-content: center !important;
  padding: 0 24px !important;
}

.proc-audit-note {
  margin-top: 14px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13px !important; line-height: 1.6 !important;
}


/* ═══════════════════════ 09 · FAQ ═══════════════════════ */

.faq-layout { gap: 26px !important; }
.faq-group {
  padding: 24px 0 10px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.15em !important;
}
.faq-group:first-child { padding-top: 8px !important; }
.faq-item summary {
  padding: 16px 0 !important;
  gap: 14px !important;
  font-size: 0.945rem !important;
  line-height: 1.35 !important;
  min-height: 44px;
  box-sizing: border-box;
}
.faq-body { padding-bottom: 19px !important; }
.faq-body p { font-size: 14px !important; line-height: 1.68 !important; }

/* Le panneau assistant garde son statut de moment sombre ; il perd sa
   seconde copie du réseau (150 éléments SVG pour une vignette de 76px). */
.faq-agent { max-width: none !important; border-radius: var(--m-r-card) !important; }
.fa-viz    { display: none !important; }
.fa-inner  { padding: 22px 18px 19px !important; }
.fa-title  { font-size: 1.1rem !important; line-height: 1.2 !important; }
.fa-copy   { font-size: 13px !important; line-height: 1.6 !important; }
.fa-q      { padding: 12px 13px !important; font-size: 13px !important; min-height: 44px; box-sizing: border-box; }
.fa-cta    { padding: 14px 18px !important; font-size: 13.5px !important; min-height: 44px; box-sizing: border-box; }


/* ═══════════════════════ 10 · CONTACT ═══════════════════════

   La section se pose sur le gris froid — avec le pied de page, elle forme
   le socle visuel de la page. Le formulaire n'est plus une carte dans la
   section : ses champs blancs se détachent d'eux-mêmes sur cette surface.
   ------------------------------------------------------------------------ */

#contact {
  padding: 56px var(--m-gut) 60px !important;
  /* Le gris froid est parti le 17/08/2026 : c'était un aplat opaque pleine
     largeur, et sa frontière avec le fond commun se marquait deux fois, par
     la teinte et par le filet. Le filet, lui, reste : devenu la seule marque
     de début de section, il ne coupe pas la couleur. Les champs du formulaire
     gardent leur bordure, ils se détachent donc encore sans ce socle. */
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}
.contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; }

#cta-block .label { margin-bottom: 16px !important; }
#cta-block h2 {
  font-size: clamp(1.65rem, 7.2vw, 2.15rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 15px !important;
}
#cta-block p { font-size: 0.95rem !important; line-height: 1.62 !important; margin-bottom: 22px !important; }
#contact .btn-ghost {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  min-height: 48px; align-items: center;
}
#cta-block .btn-primary {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  padding: 17px 26px !important;
}

.label { font-size: 10px !important; letter-spacing: 0.13em !important; }
.cta-terms li { font-size: 13px !important; line-height: 1.55 !important; }
.contact-direct a { min-height: 44px; display: inline-flex; align-items: center; }

/* Le formulaire, déboîté : plus de carte, un filet et de l'air. */
.form-card {
  padding: 26px 0 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--border) !important;
}
.form-card::before { display: none !important; }

.field-row { grid-template-columns: 1fr !important; gap: 0 !important; }
.field { gap: 6px !important; margin-bottom: 13px !important; }
.field label { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
/* 16px pile : sous ce seuil, Safari agrandit la page dès qu'on touche un
   champ, et le formulaire sort du cadre sans jamais y revenir. */
.field input, .field select, .field textarea {
  font-size: 16px !important;
  padding: 11px 14px !important;
  min-height: 46px;
  max-width: 100% !important;
  box-sizing: border-box;
  background: var(--m-paper) !important;
}
.field textarea { min-height: 92px !important; }
.form-note { font-size: 11px !important; line-height: 1.6 !important; }


/* ═══════════════════════ 11 · PIED DE PAGE ═══════════════════════ */

footer {
  padding: 34px var(--m-gut) calc(28px + env(safe-area-inset-bottom)) !important;
  /* Même gris froid retiré qu'en section 10. Le !important est nécessaire :
     l'accueil pose background:transparent en style inline sur son <footer>. */
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}
/* Sur l'accueil, contact et pied de page partagent la même surface : le
   filet du haut ferait une double frontière avec celui de #contact. */
#contact + footer { border-top: 1px solid var(--hairline) !important; }

.ft-top  { grid-template-columns: 1fr !important; gap: 24px !important; }
.ft-brand img { height: 48px !important; }
.ft-brand p { font-size: 13px !important; line-height: 1.6 !important; }
.ft-cols { grid-template-columns: 1fr !important; gap: 0 !important; }

.ft-col { border-bottom: 1px solid var(--hairline); }
.ft-col:last-child { border-bottom: 0; padding-top: 14px; }

.ft-col h3 {
  display: flex; align-items: center;
  margin: 0 !important;
  min-height: 46px;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
}
.ft-col:not(:last-child) h3 { cursor: pointer; }
.ft-col h3:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.ft-col h3 .m-chev { width: 15px; height: 15px; }

.ft-col ul { gap: 0 !important; padding-bottom: 8px; }
.ft-col a  { display: block; padding: 10px 0; min-height: 42px; box-sizing: border-box; }
.ft-col li { font-size: 13.5px !important; }
.ft-col:last-child li { padding: 5px 0; line-height: 1.55; }
.ft-col:last-child a { padding: 8px 0; min-height: 40px; }

html.js .ft-col:not(:last-child):not(.is-open) > ul { display: none !important; }

.ft-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
.ft-trust { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 11.5px !important; }
.ft-sep { display: none; }
.ft-trust > *:not(.ft-sep)::before {
  content: '· '; color: var(--accent); font-weight: 700;
}
.ft-copy { font-size: 11px !important; }


/* ═══════════════════════ 12 · BARRE D'ACTION BASSE ═══════════════════════

   « Demander mon audit » à portée du pouce dès que le hero sort de
   l'écran. Jamais mise en pause par frame.js : il ignore les éléments en
   position:fixed, et elle ne porte aucune animation infinie.
   ------------------------------------------------------------------------ */

.m-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--m-gut) calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--border);
  transform: translateY(115%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-bar.is-on { transform: translateY(0); }

.m-bar-cta {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 18px;
  border-radius: 6px;
  background: var(--grad); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 14.5px; letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(106, 92, 255, 0.7);
}
.m-bar-cta:active { transform: scale(0.985); }
.m-bar-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.m-bar-side {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}
.m-bar-side svg { width: 20px; height: 20px; }
.m-bar-side:active { border-color: var(--accent); color: var(--accent); }
.m-bar-side:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

body { padding-bottom: calc(var(--m-bar-h) + env(safe-area-inset-bottom)); }


/* ═══════════════════════════════════════════════════════════════════════
   TARIFS — /tarifs
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── En-tête ─────────────────────────────────────────────────────────── */

#pricing-header {
  padding: calc(var(--m-nav-h) + 34px) var(--m-gut) 30px !important;
  /* Même geste que le hero : les halos restent, l'aplat part. C'était la
     jonction que Léon voit sur les tarifs, juste avant l'audit. */
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(106, 92, 255, 0.10), transparent 60%),
    radial-gradient(90% 50% at 96% 0%,   rgba(0, 178, 255, 0.08),  transparent 55%),
    transparent;
}
#pricing-header h1 {
  font-size: clamp(1.95rem, 8.4vw, 2.45rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 16px !important;
}
#pricing-header p { font-size: 14.5px !important; line-height: 1.68 !important; }


/* ─── Audit — le panneau maîtresse ────────────────────────────────────────
   Le seul objet encadré de la page : c'est l'offre d'appel, elle mérite
   son cadre. La pastille d'étape cesse de flotter sur le coin — elle
   devient la première ligne du panneau. Le prix redescend à une taille
   de prix, pas d'affiche.
   ------------------------------------------------------------------------ */

#audit-section { padding: 6px var(--m-gut) 0 !important; }
.audit-inner {
  grid-template-columns: 1fr !important;
  border-radius: 14px !important;
  /* Le dernier aplat clair du téléphone, retiré le 17/08/2026. Cette boîte
     peignait #ffffff sur 1085px de haut, quasi pleine largeur : du blanc pur
     posé sur un fond voilé, avec une arête franche en haut et en bas. C'était
     la jonction la plus visible du site, et la seule qui restait après la
     reprise des sections. Le cadre en dégradé de `.audit-card` suffit à tenir
     le panneau, le voile de fond.css le traverse maintenant. */
  background: transparent !important;
}
.audit-card {
  border-radius: 15px !important;
  /* L'ombre de bureau porte 80px de flou à 0,20 d'opacité : elle débordait
     dans les gouttières et y creusait le fond de douze niveaux, mesurés. Sous
     un panneau devenu translucide elle ne dirait plus rien d'une élévation,
     alors elle se resserre en lueur de cadre, sous le seuil du visible. */
  box-shadow: 0 12px 30px rgba(106, 92, 255, 0.10) !important;
  /* Le cadre en dégradé du bureau est un `background: var(--grad)` sous un
     `padding: 1px`, et c'est l'aplat blanc de `.audit-inner` qui n'en laissait
     voir qu'un liseré. `.audit-inner` devenue transparente, ce dégradé
     remplissait tout le panneau. Il repasse donc sur un pseudo-élément, où un
     masque n'en garde que l'anneau d'un pixel : même cadre à l'écran, et le
     voile de fond.css traverse le panneau. */
  background: none !important;
}
.audit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  /* Deux calques : la boîte entière, moins sa boîte de contenu. Reste
     l'anneau. `-webkit-mask-composite: xor` double `mask-composite: exclude`
     pour les Safari d'avant la 15.4.
     L'ordre compte, et dans ce sens-là seulement : un raccourci `mask` remet
     `mask-composite` à `add`. Les préfixées passent donc en dernier, sinon le
     `mask` standard écraserait le `xor` que ces Safari-là viennent de poser,
     et le panneau se remplirait du dégradé au lieu de n'en garder que le
     cadre. */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}
.audit-badge {
  position: static !important;
  display: inline-flex;
  margin: 0 0 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}
.audit-wrap { position: relative; padding-top: 0 !important; }
.audit-left, .audit-right { padding: 22px 18px !important; }
/* La moitié basse posait son propre clair par-dessus celui de `.audit-inner`
   (un dégradé #fdfdff → #fafaff et deux taches larges) : deux blancs
   différents dans un même panneau, séparés net. Le filet reste, il devient la
   seule marque du passage de l'offre au livrable. */
.audit-right {
  border-top: 1px solid var(--hairline);
  background: transparent !important;
}

.audit-name {
  font-size: clamp(1.4rem, 6.2vw, 1.8rem) !important;
  margin: 6px 0 10px !important;
  overflow-wrap: anywhere;
}
.audit-price-row { gap: 4px 10px !important; align-items: baseline !important; }
.audit-price { font-size: clamp(1.9rem, 8.6vw, 2.3rem) !important; }
.audit-price-sub { font-size: 11px !important; line-height: 1.4 !important; }
.audit-note { font-size: 11.5px !important; padding: 11px 13px !important; margin: 14px 0 !important; }
.audit-desc { font-size: 13.5px !important; line-height: 1.62 !important; }
.audit-deliv-intro { font-size: 13px !important; }
.audit-deliv li { font-size: 13px !important; line-height: 1.5 !important; }
.audit-deliv-foot { font-size: 11.5px !important; line-height: 1.55 !important; }
#audit-section .btn-primary,
.audit-left .btn-primary {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
}

/* Le connecteur audit → automatisations : un trait court, un mot, un
   trait court. Aux mesures de bureau il s'étirait sur un tiers d'écran. */
.flow-connector { padding: 0 var(--m-gut) !important; margin: 22px 0 !important; gap: 9px !important; }
.flow-line { height: 22px !important; }
.flow-label { font-size: 11px !important; line-height: 1.5 !important; text-align: center; }


/* ─── Les sept offres — la grille des prix ────────────────────────────────
   Sept lignes à filets, comme une carte de menu : secteur en mono, nom,
   prix en dégradé — et le chevron qui dit que la ligne s'ouvre. Le gain
   estimé, le détail et le bouton attendent le tap. Rien n'est retiré,
   plus rien n'est encadré.

   La tête et le corps sont fabriqués par mobile.js à l'exécution : en
   bureau les sept enfants restent à plat, parce que `.price-cta` compte
   sur `margin-top:auto` comme enfant direct de la carte pour aligner les
   sept boutons en bas de rangée.
   ------------------------------------------------------------------------ */

#price-section { padding: 30px var(--m-gut) !important; }
#price-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--border);
}

.price-card {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* L'icône de la carte de bureau quitte la ligne : à sept exemplaires elle
   redevenait du bruit — le prix est le vrai repère de cette liste. */
.price-head .card-icon { display: none !important; }

.price-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 2px 12px;
  padding: 16px 0 !important;
  width: 100%; text-align: left;
  cursor: pointer;
}
.price-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.price-head .m-chev { grid-column: 2; grid-row: 1 / span 3; margin-left: 0; align-self: center; }

.price-eyebrow { grid-column: 1; margin: 0 !important; font-size: 9.5px !important; letter-spacing: 0.14em !important; }
.price-name    { grid-column: 1; font-size: 1.06rem !important; line-height: 1.22 !important; margin: 2px 0 0 !important; }

.price-row {
  grid-column: 1;
  margin: 7px 0 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  gap: 6px !important;
  align-items: baseline !important;
}
.price-prefix { font-size: 9px !important; letter-spacing: 0.12em !important; }
.price-figs { gap: 5px !important; align-items: baseline !important; }
.price-num {
  font-size: 1.22rem !important;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.price-ht  { font-size: 10px !important; }

.price-body { padding: 2px 0 20px !important; }
.price-desc { font-size: 13px !important; line-height: 1.55 !important; }

.roi { padding: 12px 14px 13px 15px !important; margin-bottom: 15px !important; border-radius: 9px !important; }
.roi-label { font-size: 9.5px !important; letter-spacing: 0.13em !important; }
.roi-stats { gap: 10px !important; }
.roi-fig { font-size: 1.22rem !important; }
.roi-cap { font-size: 10px !important; line-height: 1.35 !important; }

.price-list { gap: 7px !important; margin-bottom: 15px !important; }
.price-list li { font-size: 12.5px !important; line-height: 1.45 !important; }
.price-cta {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  min-height: 46px; align-items: center;
  margin-top: 0 !important;
}

/* La septième ligne n'est plus « celle qui traverse la grille ». */
.price-card--closer { text-align: left !important; }
.price-card--closer .price-row,
.price-card--closer .price-col,
.price-card--closer .roi,
.price-card--closer .roi-label,
.price-card--closer .roi-stats { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; }
.price-card--closer .price-list { grid-template-columns: 1fr !important; }

html.js .price-card:not(.is-open) .price-body { display: none !important; }


/* ─── Note « base de calcul » ─────────────────────────────────────────────
   Sur bureau c'est une annotation discrète en marge de la grille. Sur
   téléphone elle fermait la section en carte grise éteinte. Elle passe à
   l'encre, comme les moments forts du site : lueurs indigo et cyan,
   chiffres en dégradé côte à côte, le texte de méthode en dessous. */

.roi-note {
  margin: 22px 0 0 !important;
  padding: 20px 18px 19px !important;
  border-radius: var(--m-r-card) !important;
  border: 1px solid rgba(106, 92, 255, 0.32) !important;
  background:
    radial-gradient(130% 150% at 6% 0%,    rgba(106, 92, 255, 0.28), transparent 55%),
    radial-gradient(130% 150% at 100% 100%, rgba(0, 178, 255, 0.18),  transparent 55%),
    #0d0d12 !important;
  overflow: hidden;
}
.roi-note::before { display: none !important; }   /* le filet clair du bureau */

.roi-note-label {
  font-size: 9.5px !important; letter-spacing: 0.15em !important;
  color: rgba(255, 255, 255, 0.60) !important;
}
.roi-note-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin: 13px 0 !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.roi-note-stat { display: flex; flex-direction: column; gap: 3px; }
.roi-note-fig {
  font-size: 1.5rem !important;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.roi-note-cap { font-size: 10px !important; color: rgba(255, 255, 255, 0.55) !important; line-height: 1.4; }
/* Les blocs ≤760/≤560 de la page posent leurs propres filets clairs
   (border-top du texte, border-left entre les stats) : sur l'encre ils
   font des traits parasites — le filet est déjà porté par .roi-note-stats. */
.roi-note-text {
  font-size: 11.5px !important; line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.roi-note-stat + .roi-note-stat { margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }


/* ─── Bande « votre site internet » ───────────────────────────────────── */

#web-section { padding: 30px var(--m-gut) !important; }
.web-band {
  grid-template-columns: 1fr !important;
  border-radius: var(--m-r-card) !important;
  padding: 26px 18px !important;
  gap: 20px !important;
}
/* Le rembourrage de bureau (52px/54px) s'ajoutait à celui de la bande :
   le texte commençait à ~72px du bord. Un seul rembourrage, celui de la
   bande. */
.web-left { display: block !important; padding: 0 !important; }
.web-band { display: flex !important; flex-direction: column !important; }
.web-band h3 { font-size: 1.45rem !important; line-height: 1.1 !important; }
.web-band p  { font-size: 13.5px !important; line-height: 1.6 !important; }
.web-chip { font-size: 10.5px !important; padding: 7px 11px !important; }
/* La planète ouvre la carte : centrée en tête, à sa taille — plus la zone
   de vide sombre qu'elle laissait aux mesures du bureau. Sa boucle de
   dessin est pilotée par IntersectionObserver : elle ne tourne que
   lorsqu'elle est à l'écran. */
.web-right {
  display: flex !important;
  order: -1;
  justify-content: center;
  position: relative;
  padding: 0 !important;
  margin: -6px 0 4px;
}
#web-canvas, .web-canvas { width: min(60vw, 235px) !important; height: auto !important; }

/* La pluie d'étoiles filantes, fine, sur le haut de la carte : quatre
   traînées dans le dégradé de la planète, qui filent vers le bas-droit
   puis s'éteignent. Des animations infinies — frame.js les met en pause
   dès que la carte sort de l'écran, comme toutes les autres. */
.web-band::before, .web-band::after,
.web-right::before, .web-right::after {
  content: ''; position: absolute; z-index: 0;
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 178, 255, 0.85) 45%, rgba(106, 92, 255, 0.5) 80%, transparent);
  transform: rotate(24deg);
  opacity: 0;
  pointer-events: none;
  animation: mEtoile 5.2s linear infinite;
}
.web-band::before  { top: 6%;  left: 62%; animation-delay: 0.9s; }
.web-band::after   { top: 3%;  left: 16%; width: 54px; animation-duration: 6.8s; animation-delay: 3.1s; }
.web-right::before { top: -4%; left: 38%; width: 46px; height: 1.5px; animation-duration: 7.6s; animation-delay: 1.9s; }
.web-right::after  { top: 10%; left: 74%; width: 40px; height: 1.5px; animation-duration: 6s;   animation-delay: 4.4s; }

@keyframes mEtoile {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg); }
  4%   { opacity: 0.9; }
  15%  { opacity: 0; transform: translate3d(150px, 67px, 0) rotate(24deg); }
  100% { opacity: 0; transform: translate3d(150px, 67px, 0) rotate(24deg); }
}
.web-foot { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
.web-foot .btn-light {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
  min-height: 46px; align-items: center;
}


/* ─── Maintenance — trois paliers ─────────────────────────────────────────
   Trois cartes identiques et calmes : même cadre, même rythme. Seul le
   palier retenu se distingue — fond teinté, cadre indigo, pastille. Le
   mélange précédent (deux lignes nues autour d'un panneau) se lisait
   comme un accident. */

#maint-section { padding: 30px var(--m-gut) 42px !important; }
.maint-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.maint-card, .maint-grid > * {
  position: relative;
  border-radius: 14px !important;
  background: var(--m-paper) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 18px 16px !important;
  margin: 0 !important;
}
.maint-grid .pick {
  background: linear-gradient(135deg, rgba(106, 92, 255, 0.06), rgba(0, 178, 255, 0.05)) !important;
  border-color: rgba(106, 92, 255, 0.38) !important;
}
.maint-tag {
  position: static !important;
  display: inline-flex;
  align-self: flex-start;      /* la carte est une colonne flex : sans cela la pastille s'étire */
  width: max-content;
  margin-bottom: 10px;
  font-size: 9.5px !important; padding: 5px 10px !important;
}
.maint-grid h4 { font-size: 1.1rem !important; margin-bottom: 6px !important; }
.maint-price { padding-bottom: 12px !important; margin-bottom: 12px !important; }
.maint-grid li { font-size: 12.5px !important; line-height: 1.5 !important; }
.maint-note { font-size: 12px !important; line-height: 1.6 !important; margin-top: 18px !important; }


/* ═══════════════════════════════════════════════════════════════════════
   RÉALISATIONS — /realisations
   ═══════════════════════════════════════════════════════════════════════ */

.rz-wrap { padding: calc(var(--m-nav-h) + 34px) var(--m-gut) 56px !important; }
/* Le halo d'entrée, comme sur les deux autres pages : les deux radiaux
   restent, la couche de base part. C'est le même geste que sur le hero et
   l'en-tête des tarifs. Un aplat opaque ici masquerait le voile de fond.css
   sur toute la page, puisque cette règle bat celle de html, et sa fin faisait
   une frontière à 1590px du haut, mesurée. */
body:has(.rz-wrap) { background:
  radial-gradient(140% 46vh at 50% -8%, rgba(106, 92, 255, 0.10), transparent 62%),
  radial-gradient(90% 30vh at 96% 0%,  rgba(0, 178, 255, 0.08),  transparent 55%),
  transparent !important;
  background-repeat: no-repeat !important;
}

.rz-top h1 {
  font-size: clamp(1.85rem, 7.8vw, 2.3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}
.rz-intro { grid-template-columns: 1fr !important; gap: 18px !important; }
.rz-lead { font-size: 14.5px !important; line-height: 1.68 !important; }
.rz-note {
  font-size: 11.5px !important; line-height: 1.6 !important;
  border-left: 0 !important; border-top: 1px solid var(--hairline);
  padding: 14px 0 0 !important;
}

/* L'index des quatre cas : une liste à filets, sans boîte. */
.rz-toc {
  grid-template-columns: 1fr !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  overflow: hidden;
  margin-top: 24px !important;
}
/* Une seule colonne depuis le retrait des numéros d'ordre (15/08/2026) :
   la gouttière de 27px qui portait le « 01 » a disparu avec lui, et les
   trois lignes repartent du bord gauche de la page. */
.rz-tc {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 3px 0;
  border-left: 0 !important;
  border-bottom: 1px solid var(--hairline);
  background: none !important;
  padding: 15px 2px 16px !important;
}
.rz-tc:last-child { border-bottom: 0 !important; }
.rz-tc:active { background: rgba(106, 92, 255, 0.045) !important; }

.rz-tc .rz-tc-name {
  grid-column: 1; grid-row: 1;
  font-size: 0.97rem !important;
  margin-bottom: 0 !important;
}
.rz-tc .rz-tc-who {
  grid-column: 1; grid-row: 2;
  font-size: 10.5px !important;
  margin: 0 !important;
}
.rz-tc .rz-tc-gain {
  grid-column: 1; grid-row: 3;
  display: flex !important; align-items: baseline; flex-wrap: wrap;
  gap: 0 7px;
  margin-top: 7px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.rz-tc .rz-tc-gain b  { font-size: 1.02rem !important; }
.rz-tc .rz-tc-gain em { font-size: 10px !important; margin-top: 0 !important; }
.rz-tc-name svg { display: none !important; }

/* Les quatre études de cas, déboîtées : chaque cas est un chapitre qui
   s'ouvre sur un filet, et c'est le filet seul qui sert de repère depuis
   que la pastille numérotée a été retirée (15/08/2026). Le diptyque
   avant/après garde ses deux panneaux : c'est une figure, pas un cadre. */
.cs-set { margin: 28px 0 0 !important; gap: 0 !important; }
.cs {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 30px 0 8px !important;
  margin-top: 26px !important;
}
.cs-head { gap: 13px !important; padding-bottom: 20px !important; margin-bottom: 20px !important; }
.cs h2 { font-size: 1.28rem !important; line-height: 1.18 !important; letter-spacing: -0.03em !important; }
.cs-tag { font-size: 9.5px !important; letter-spacing: 0.14em !important; }
/* Le logo du client. Le bloc ≤820px de la page l'a déjà sorti de la ligne
   du titre et monté en pleine largeur au-dessus ; il ne reste qu'à le
   redescendre à la taille du téléphone. La carte n'existe plus ici, le cas
   est une simple surface à filet, mais le logo n'a pas besoin de cadre
   pour se tenir. Il a gagné 4px au retrait de la pastille numérotée
   (15/08/2026) : c'est le seul repère visuel qui reste en tête de cas. */
.cs-logo img { height: 34px !important; }
.cs-basis { font-size: 11.5px !important; line-height: 1.6 !important; }
.cs-built .cs-lab { font-size: 10px !important; letter-spacing: 0.14em !important; }
.cs-list li { font-size: 13px !important; line-height: 1.5 !important; }

/* Le diptyque avant/après. Le bloc ≤820px de la page l'a mis en pile ;
   ici on recompose la figure pour l'écran étroit :
   · la bande-charnière grise disparaît — les deux panneaux se touchent,
     et la flèche, pivotée vers le bas, chevauche la couture ;
   · le relevé chiffré cesse d'être trois colonnes écrasées : chaque
     chiffre devient une ligne à filet — valeur à gauche, légende à
     droite — le motif natif de cette version téléphone.
   La rotation de la flèche vit sur le SVG et en !important : l'apparition
   Motion One du cas pose un transform inline (scale) sur .dx-arrow qui
   écrase le rotate(90deg) du bloc ≤820px de la page — c'est lui qui
   laissait les flèches pointées vers la droite. */
.dx-before, .dx-after { padding: 20px 18px 22px !important; }
.dx-lab  { font-size: 9.5px !important; letter-spacing: 0.14em !important; }
.dx-text { font-size: 13.5px !important; line-height: 1.62 !important; }

/* Les apparitions internes du diptyque (volet après assombri, flèche,
   chiffres un à un) sont neutralisées comme toutes les autres : le
   !important bat leurs animations et leurs styles inline. */
.dx-after, .dx-arrow, .dx-fig { opacity: 1 !important; }
.dx-fig { transform: none !important; }

/* La charnière ne peint plus rien : hauteur nulle, fond et bords coupés. */
.dx-hinge { height: 0 !important; background: none !important; }
.dx-hinge::before { display: none !important; }

/* La flèche, seule, à cheval sur la couture — le rond en dégradé se
   suffit, pas de cerne rapporté. */
.dx-arrow {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  margin: -19px 0 0 -19px !important;
  width: 38px !important; height: 38px !important;
  transform: none !important;
  box-shadow: 0 6px 16px rgba(106, 92, 255, 0.30) !important;
}
.dx-arrow svg {
  transform: rotate(90deg) !important;   /* pointe vers le bas */
  animation: none !important;            /* la poussée horizontale n'a plus de sens pivotée */
}
/* L'anneau émis par le point « après » : boucle infinie, coupée ici comme
   les autres ; sans son animation il resterait posé en gris sur le label. */
.dx-after .dx-lab::after { display: none !important; }

/* Le relevé en lignes à filet. */
.dx-ledger {
  display: block !important;
  margin-top: 16px !important;
  padding-top: 4px !important;
}
.dx-fig {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 10px 0 !important;
}
.dx-fig + .dx-fig { border-top: 1px solid rgba(255, 255, 255, 0.11); }
.dx-fig-lab {
  margin-top: 0 !important;
  min-height: 0 !important;
  text-align: right !important;
  line-height: 1.5 !important;
}

/* La citation client. Le composant existait dans la feuille de la page mais
   n'était rempli nulle part : le cas SETREM est le premier à l'afficher, et
   il arrivait donc ici en carte à bord dégradé — la seule carte à l'intérieur
   d'un cas qui, lui, n'en a plus. Même traitement que le reste : le cadre
   saute, il ne reste qu'un filet.
   La marque de citation quitte sa colonne de 34px et monte au-dessus du
   texte : à 390px, cette colonne coûtait un dixième de la mesure pour un
   guillemet. */
.cs-quote {
  display: block !important;
  margin-top: 22px !important;
  padding: 20px 0 2px !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: none !important;
}
.cs-quote-mark { display: block !important; font-size: 34px !important; margin-bottom: 8px !important; }
.cs-quote blockquote { font-size: 1.04rem !important; line-height: 1.52 !important; margin-bottom: 12px !important; }
.cs-quote figcaption { font-size: 10.5px !important; line-height: 1.6 !important; }

/* L'engagement de fin garde son panneau encre — le moment de contraste de
   la page, comme le sceau sécurité sur l'accueil. */
.rz-pledge { grid-template-columns: 1fr !important; padding: 26px 18px !important; border-radius: var(--m-r-card) !important; gap: 20px !important; margin-top: 34px !important; }
.rz-pledge h2 { font-size: 1.32rem !important; line-height: 1.16 !important; }
.pl-list li { font-size: 13px !important; line-height: 1.5 !important; padding: 11px 0 !important; }

.rz-cta { margin-top: 30px !important; }
.rz-cta .btn-primary {
  display: flex !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important;
}
.rz-cta-note { font-size: 11.5px !important; line-height: 1.6 !important; }

/* Le petit pied de page propre à cette page */
/* Sur les réalisations, .lg-foot est emboîté dans le <footer> : les deux
   posaient le même gris froid, donc les deux partent ensemble, sinon il
   subsisterait. Le filet part avec, lui : celui du <footer> traverse déjà
   toute la largeur juste au-dessus, quand celui-ci est en retrait d'une
   gouttière de chaque côté. Deux traits à 34px d'écart, l'un traversant et
   l'autre inscrit, se lisent comme une erreur une fois le gris parti. */
.lg-foot {
  flex-direction: column !important; align-items: flex-start !important; gap: 16px !important;
  padding: 30px var(--m-gut) calc(26px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  border-top: 0 !important;
}
.lg-foot img { height: 48px !important; }
.lg-foot nav { flex-wrap: wrap !important; gap: 4px 18px !important; }
.lg-foot nav a { display: block; padding: 9px 0; min-height: 42px; box-sizing: border-box; font-size: 13px !important; }
.lg-copy { font-size: 11px !important; text-align: left !important; line-height: 1.7 !important; }


/* ═══════════════ 12b · GRANDES LARGEURS DU MOBILE (600–768px) ═══════════════

   Un iPad en portrait fait 768px, une phablette couchée 700 à 760. Ces
   écrans reçoivent le burger — la barre de bureau n'y tient pas — donc la
   mise en page téléphone, élargie : marges plus généreuses, longueur de
   ligne bornée, et les listes à filets passent en deux colonnes.
   ------------------------------------------------------------------------ */

@media (min-width: 600px) {
  :root { --m-gut: 40px; --sec-pad: 80px; }

  .sec-head, .auto-intro, #hero-sub, .sec-lead,
  .rz-lead, .rz-note, #pricing-header p, .proc-copy { max-width: 62ch; }

  #hero-h1 { font-size: clamp(2.6rem, 6.4vw, 3.4rem) !important; }
  .h-section { font-size: clamp(1.9rem, 4.6vw, 2.4rem) !important; }
  #cta-block h2 { font-size: clamp(2rem, 5vw, 2.5rem) !important; }

  /* Deux colonnes de lignes à filets. Le filet du bas de la grille couvre
     les deux colonnes ; chaque ligne garde le sien en haut. */
  .auto-grid, #price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 44px; }
  .stat-item { padding: 32px 12px !important; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 40px; }

  .hero-ctas { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
  .hero-ctas .btn-primary { width: auto !important; }
  .hero-ctas .btn-ghost { width: auto !important; }
  .m-bar { padding-left: 40px; padding-right: 40px; }
  .m-bar-cta { flex: 0 1 380px; margin-left: auto; }
  .m-bar-side { margin-right: 0; }

  .rings-float { width: min(58vw, 460px) !important; height: min(58vw, 460px) !important; }
}


/* ═══════════════════════ 13 · TRÈS PETITS ÉCRANS ═══════════════════════ */

@media (max-width: 360px) {
  :root { --m-gut: 16px; }
  #hero-h1      { font-size: 1.95rem !important; }
  .h-section    { font-size: 1.4rem !important; }
  #cta-block h2 { font-size: 1.55rem !important; }
  .stat-num     { font-size: 1.45rem !important; }
  .stat-item .label { font-size: 9px !important; }
  .auto-copy    { padding-left: 0; padding-right: 0; }
  .auto-list    { margin-left: 0 !important; }
}


/* ═══════════════════════ 14 · MOUVEMENT RÉDUIT ═══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #mobile-menu.open .mm-link,
  #mobile-menu.open .mm-foot { animation: none; opacity: 1; transform: none; }
  .m-bar { transition: none; }
  .m-chev { transition: none; }

  html.js #hero-content,
  html.js #hero-section > div[aria-hidden="true"] { animation: none; opacity: 1; }
  html.js:not(.m-entree) #hero-content,
  html.js:not(.m-entree) #hero-section > div[aria-hidden="true"] { opacity: 1; }
  html.js .sec-head:not(.m-vu),
  html.js .trust-badge:not(.m-vu), html.js .faq-agent:not(.m-vu),
  html.js .web-band:not(.m-vu), html.js .roi-note:not(.m-vu),
  html.js .maint-card:not(.m-vu), html.js .rz-pledge:not(.m-vu) {
    opacity: 1 !important; transform: none !important;
  }
  /* Le rail ne se remplit pas sous les yeux : index.html rallume les quatre
     étapes et le remplit d'un coup. Il ne reste qu'à reprendre le demi-écran
     que chacune prenait pour arriver à son tour, sinon la section garderait
     sa hauteur de défilement sans plus rien y jouer.
     Le terminus reprend aussi son rembourrage bas à zéro : hérité des étapes,
     il poussait le bas de la piste 26px sous le bouton et le rail dépassait
     son nœud d'autant (mesuré). Même piège que sur bureau. */
  .proc-card { min-height: 0 !important; padding: 0 0 26px !important; }
  .proc-tail { min-height: 0 !important; padding: 22px 0 0 !important; }
  .proc-body { transition: none !important; }
  /* Ce sont les 9vh de la première étape qui écartaient la pile du titre. */
  #proc-stack { margin-top: 18px !important; }
  .web-band::before, .web-band::after,
  .web-right::before, .web-right::after { animation: none; opacity: 0; }
}


/* ═══════════════════════ 15 · IMPRESSION ═══════════════════════

   `max-width:768px` correspond aussi à la boîte d'impression d'une A4 en
   96 dpi : cette feuille s'applique donc à l'impression. Une barre d'action
   fixe n'a rien à y faire, et un bloc replié doit s'imprimer déplié.
   ------------------------------------------------------------------------ */

@media print {
  .m-bar, #mobile-menu, #nav-burger { display: none !important; }
  body { padding-bottom: 0; }
  html.js .auto-card:not(.is-open) .auto-list { display: block !important; }
  html.js .price-card:not(.is-open) .price-body { display: block !important; }
  html.js .ft-col:not(:last-child):not(.is-open) > ul { display: block !important; }
  /* Aucun bloc en attente d'apparition ne doit s'imprimer masqué. */
  html.js .sec-head:not(.m-vu),
  html.js .trust-badge:not(.m-vu), html.js .faq-agent:not(.m-vu),
  html.js .web-band:not(.m-vu), html.js .roi-note:not(.m-vu),
  html.js .maint-card:not(.m-vu), html.js .rz-pledge:not(.m-vu) {
    opacity: 1 !important; transform: none !important;
  }
  /* Même règle pour les étapes du déroulé, qui n'attendent plus une
     apparition mais le rail : une étape que le défilement n'avait pas
     atteinte s'imprimerait à 0,24 d'opacité. Le remplissage est mis à plein
     et les blocs resserrés, une page imprimée n'a pas de ligne de lecture. */
  html.js .proc-card.is-dim .proc-body { opacity: 1 !important; }
  #proc-rail-fill { transform: scaleY(1) !important; }
  .proc-card { min-height: 0 !important; padding: 0 0 22px !important; }
  .proc-tail { min-height: 0 !important; padding: 22px 0 0 !important; }
  #proc-stack { margin-top: 18px !important; }
  html.js #hero-content,
  html.js #hero-section > div[aria-hidden="true"] { animation: none; opacity: 1; }
  html.js:not(.m-entree) #hero-content,
  html.js:not(.m-entree) #hero-section > div[aria-hidden="true"] { opacity: 1; }
  .web-band::before, .web-band::after,
  .web-right::before, .web-right::after { display: none; }
}