/* ==========================================================================
   IMPRA — LES PAGES DU LOT B (27/10/2026)

   Fonctionnalités, métiers, application mobile, ressources, outils, guides.
   Pages générées par outils/pages/generer.mjs ; chargées après
   css/site.impra.css, dont elles reprennent les jetons (--s-*), le cadre,
   les boutons, la fenêtre produit, le téléphone, la carte finale et le pied.

   Une seule idée de composition, tirée au sort par /design-moh (« la scène
   partagée ») : l'écran réel d'IMPRA reste à l'écran pendant que le texte
   défile, et change avec lui. Autour, des sections qui ne se ressemblent pas :
   colonne étroite, navy, liste à deux bouts, étapes, FAQ en texte courant.
   Aucune couleur écrite ici hors des jetons du site.
   ========================================================================== */

:root {
  /* L'échelle de l'accueil (27/10/2026) : le titre de page un cran au-dessus, les titres de section
     aux paliers de .s-tete .s-h2 (44/52 px, 38/46 px en tablette, 8,6 vw au téléphone). */
  --p-h1: clamp(40px, 1.9vw + 27px, 60px);
  --p-h2: 44px; --p-h2-lh: 52px;
  --p-texte: 17px;
  --p-lh: 1.65;
  --p-encre-2: #2A3656;           /* texte courant secondaire, celui de la FAQ de l'accueil — 11:1 sur blanc */
  --p-colle-top: calc(var(--entete-h, 80px) + 28px);
}

/* ── Typographie des pages ─────────────────────────────────────────────── */
.page-lot-b main { font-size: var(--p-texte); line-height: var(--p-lh); }
.p-h1 {
  font-family: var(--s-hero-police); font-optical-sizing: auto; font-feature-settings: "ss03", "calt";
  font-size: var(--p-h1); line-height: 1.02; font-weight: 600; letter-spacing: -0.024em; color: var(--s-hero-encre);
  text-wrap: balance;
}
.p-h2 { font-size: var(--p-h2); line-height: var(--p-h2-lh); font-weight: 600; letter-spacing: -0.022em; color: var(--s-encre); text-wrap: balance; }
@media (max-width: 1279px) { :root { --p-h2: 38px; --p-h2-lh: 46px; } }
/* Le surtitre de l'accueil au-dessus d'un titre de section ; le mot en bleu, comme « au quotidien. ». */
.p-tete .s-surtitre, .p-benefices__tete .s-surtitre, .p-limites__tete .s-surtitre { margin-bottom: 0; }
.s-section--encre .s-accent { color: var(--s-bleu-encre); }
.p-h3 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; color: var(--s-encre); text-wrap: balance; }
.s-section--encre .p-h2, .s-section--encre .p-h3 { color: #FFFFFF; }
/* Pas de mot seul en dernière ligne ; titres équilibrés sur leurs lignes. */
.page-lot-b main p, .page-lot-b main li, .page-lot-b main dd { text-wrap: pretty; }
.p-article__h2, .p-article__section h3, .p-etapes__titre, .p-famille__nom, .p-liens__nom, .outil__titre, .p-benefices__liste strong, .p-telephones figcaption strong { text-wrap: balance; }
.p-tete { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.p-tete__intro { max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--s-doux); text-wrap: pretty; }
.s-section--encre .p-tete__intro { color: var(--s-sur-encre-doux); }
@media (max-width: 767px) {
  :root { --p-h1: clamp(33px, 9.6vw, 40px); --p-h2: min(8.6vw, 36px); --p-h2-lh: 1.12; --p-texte: 16px; }
  .p-h3 { font-size: 20px; }
  .p-tete__intro { font-size: 16px; }
}

/* Le fil d'Ariane : petit, au-dessus du titre ; le dernier maillon est la page. */
.p-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--s-doux); }
.p-fil li + li::before { content: "/"; margin: 0 10px; color: #A3ACBC; }
.p-fil a { color: var(--s-doux); text-decoration: none; transition: color 0.2s var(--s-ease-ui); }
.p-fil a:hover { color: var(--s-lien); }
.p-fil [aria-current] { color: var(--s-encre); font-weight: 500; }
/* Au téléphone, le fil se réduit au lien du parent (« ‹ Fonctionnalités ») : il ne passe plus à la
   ligne avec un « / » en tête, et le titre qui suit dit déjà où l'on est. Zone de toucher de 40 px. */
@media (max-width: 559px) {
  .p-fil ol:has(> li:nth-child(3)) > li:not(:nth-last-child(2)) { display: none; }
  .p-fil ol:has(> li:nth-child(3)) > li:nth-last-child(2)::before { content: "‹"; margin: 0 6px 0 0; font-size: 20px; line-height: 20px; color: var(--s-doux); }
  .p-fil a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* Un mot composé ne se coupe pas à son trait d'union (titres courts, questions). */
.s-insec { white-space: nowrap; }
/* Le titre de la carte finale s'équilibre : jamais un mot seul sur sa dernière ligne. */
.s-finale__texte .s-h2 { text-wrap: balance; }

/* Les actions : Explorer IMPRA, puis l'essai ou les tarifs. */
.p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 559px) {
  .p-actions .s-btn { flex: 1 1 100%; }
}

/* ── Le hero « scène » : le texte, puis l'écran réel ─────────────────────── */
.p-hero--scene { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); background: var(--s-blanc); overflow: clip; }
.p-hero__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.p-hero__texte { max-width: 560px; }
.p-hero__phrase { margin-top: 24px; max-width: 32em; font-family: var(--s-hero-police); font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--s-hero-phrase); text-wrap: pretty; }
.p-hero__note { margin-top: 18px; max-width: 36em; font-size: 14px; line-height: 20px; color: var(--s-doux); }
.p-hero__visuel { min-width: 0; }
@media (min-width: 1024px) and (max-width: 1179px) {
  .p-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* le titre garde sa largeur à côté du duo */
}
@media (max-width: 1023px) {
  .p-hero__grille { grid-template-columns: minmax(0, 1fr); }
  .p-hero__texte { max-width: 640px; }
}
@media (max-width: 767px) {
  .p-hero__phrase { margin-top: 16px; font-size: 16px; }
}

/* Le hero vivant (27/10/2026) : une scène produit qui se joue, sous un halo bleu venu du coin. */
.p-hero--vivant { background: radial-gradient(56% 46% at 88% 6%, rgba(77, 148, 245, 0.11) 0%, rgba(77, 148, 245, 0) 70%), var(--s-blanc); }
@media (max-width: 1023px) { .p-hero--vivant .p-hero__grille { gap: 36px; } }

/* La vitrine (27/10/2026) : le vrai téléphone au centre, quatre cartes d'écran autour, qui
   arrivent l'une après l'autre ; au téléphone, deux cartes, puis l'écran. */
.p-vitrine { position: relative; isolation: isolate; height: clamp(460px, 44vw, 600px); max-width: 1100px; margin-inline: auto; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 78%, rgba(0, 0, 0, 0) 100%); }
.p-vitrine::before { content: ""; position: absolute; inset: 8% 14% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(77, 148, 245, 0.16), rgba(77, 148, 245, 0)); }
.p-vitrine__tel { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); }
.p-vitrine__tel .p-tel { --tel-w: clamp(230px, 22vw, 290px); }
.p-hero--vitrine .p-vitrine { height: clamp(460px, 40vw, 560px); }
/* La mention des cartes (28/10/2026) : centrée sous la vitrine (.sc-pied la pousserait à gauche). */
.sc-pied.p-vitrine__pied { justify-content: center; max-width: 1100px; margin: 4px auto 0; }
/* Hero en deux colonnes égales (1024–1179 px) : la vitrine n'a que 450 px, quatre cartes s'y
   chevaucheraient ; il en reste deux, une du parc, une du bureau, en diagonale. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .p-hero--vitrine .sc-vitrine__carte--2, .p-hero--vitrine .sc-vitrine__carte--4 { display: none; }
  .p-hero--vitrine .sc-vitrine__carte--1 { left: 0; top: 10%; }
  .p-hero--vitrine .sc-vitrine__carte--3 { right: 0; top: 56%; }
}
@media (max-width: 767px) {
  .p-vitrine { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .p-vitrine::before { inset: 30% 0 0; }
  .p-vitrine__tel { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; height: 470px; overflow: clip; margin-top: 10px; -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, 0) 100%); }
  .p-vitrine__tel .p-tel { --tel-w: min(290px, 78vw); }   /* 290 px : l'écran réel se lit (10 px au lieu de 7) */
  /* La hauteur fixe du bureau ne vaut pas au téléphone : la vitrine contient son téléphone, et sa mention
     passe dessous au lieu d'être recouverte (28/10/2026). */
  .p-hero--vitrine .p-vitrine { height: auto; }
}

/* La galerie (Web & Mobile) : un téléphone, la liste de ses écrans ; chaque écran passe à son tour. */
.p-galerie__grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
/* La galerie passe avant les règles des téléphones côte à côte (.p-telephones) : un seul écran, plus grand. */
.p-galerie .p-galerie__scene .p-plateau--telephone { width: 100%; aspect-ratio: auto; height: clamp(540px, 48vw, 700px); padding-top: 40px; -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, 0) 100%); }
.p-galerie .p-galerie__scene .p-plateau--telephone .p-tel { --tel-w: min(320px, 60cqw); }
.p-galerie__ecran { display: contents; }
.p-galerie__ecran > .p-tel { animation: p-ecran 0.6s var(--s-ease) both; }
@keyframes p-ecran { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.p-galerie__liste { display: grid; gap: 8px; }
.p-galerie__onglet {
  position: relative; display: grid; gap: 4px; padding: 18px 20px 20px; overflow: hidden; border: 0; border-radius: 16px; background: rgba(244, 247, 250, 0.04);
  box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); color: var(--s-sur-encre-doux); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 0.3s var(--s-ease-ui), box-shadow 0.3s var(--s-ease-ui); -webkit-tap-highlight-color: transparent;
}
.p-galerie__onglet strong { font-size: 18px; line-height: 1.3; font-weight: 600; color: #FFFFFF; }
.p-galerie__onglet span { font-size: 15px; line-height: 1.5; }
.p-galerie__onglet[aria-selected="true"] { background: rgba(244, 247, 250, 0.09); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.16); }
.p-galerie__onglet:focus-visible { outline: 2px solid var(--s-bleu-encre); outline-offset: 2px; }
.p-galerie__onglet i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--s-bleu-encre); transform: scaleX(0); transform-origin: left; }
.p-galerie__onglet[aria-selected="true"] i { transform: scaleX(var(--p, 0)); }
@media (hover: hover) and (pointer: fine) { .p-galerie__onglet:hover:not([aria-selected="true"]) { background: rgba(244, 247, 250, 0.07); } }
@media (max-width: 899px) {
  .p-galerie__grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .p-galerie__onglet { padding: 14px 16px 16px; }
  .p-galerie__onglet strong { font-size: 16.5px; }
  .p-galerie__onglet span { font-size: 14.5px; }
}
/* Au téléphone, l'écran passe à 290 px (un texte d'interface à 10 px, au lieu de 7) et le
   plateau le recadre sur sa moitié haute ; la liste ne garde que les titres, la phrase de
   l'écran choisi seule dépliée : le téléphone et sa liste tiennent dans un écran. */
@media (max-width: 767px) {
  .p-galerie .p-galerie__scene .p-plateau--telephone { height: 500px; padding-top: 28px; }
  .p-galerie .p-galerie__scene .p-plateau--telephone .p-tel { --tel-w: min(290px, 80cqw); }
  .p-galerie__liste { gap: 6px; }
  .p-galerie__onglet { padding: 12px 14px 13px; }
  .p-galerie__onglet span { display: none; }
  .p-galerie__onglet[aria-selected="true"] span { display: block; }
}
@media (prefers-reduced-motion: reduce) { .p-galerie__ecran > .p-tel { animation: none; } }

/* Le hero des pages de rubrique : le champ de l'accueil, centré, puis un écran. */
.p-hero--champ .p-hero__in { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 64px); }
.p-hero--champ .p-fil ol { justify-content: center; }
.p-hero--champ .s-hero__titre { margin-top: 8px; }
.p-hero--champ .p-actions { justify-content: center; }
.p-hero--champ .p-hero__meta { max-width: 40em; margin: 20px auto 0; font-size: 14px; line-height: 21px; color: var(--s-doux); text-align: center; text-wrap: balance; }   /* les guides : qui écrit, d'où viennent les règles */
.p-hero__bas { padding-bottom: clamp(48px, 6vw, 96px); }

/* Le hero éditorial : guides et ressources. */
.p-hero--article { padding-block: clamp(36px, 4.5vw, 64px) clamp(28px, 3.5vw, 48px); background: var(--s-papier); }
.p-h1--article { max-width: 18em; }
.p-article__meta { margin-top: 20px; max-width: 36em; font-size: 14px; line-height: 20px; color: var(--s-doux); }

/* ── Le plateau (27/10/2026) ────────────────────────────────────────────────
   Chaque écran est posé sur un plateau, dans la texture du hero de l'accueil :
   le dégradé ardoise et les rayures fines à 40 %, sous un halo blanc venu du
   haut. Trois cadrages (générés par outils/pages/generer.mjs, « plateau ») :
   · fenêtre : l'écran du web entre en grand et déborde à droite et en bas ;
     au téléphone il grandit encore, pour qu'on en lise les libellés ; --fx
     (0 à 1) choisit la partie montrée, 0 étant la gauche de l'écran ;
   · détail : une partie d'écran, en carte blanche, entière ;
   · téléphone : l'application sort du bas du plateau.
   Le duo du hero : la fenêtre, et devant elle le téléphone. */
.p-plateau {
  --fx: 0;
  --fen-w: 118%;
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;   /* le téléphone se mesure en cqw : une longueur, dont dérivent cadre, barre d'état et îlot */
  border-radius: 28px; background: #F2F4F8;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.05);
}
.p-plateau::before, .p-plateau::after, .p-etal::before, .p-etal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
.p-plateau::before, .p-etal::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.31) 0 1px, rgba(255, 255, 255, 0) 1px 8px),
    radial-gradient(110% 95% at 50% 100%, rgba(238, 242, 248, 0.4) 0%, rgba(201, 211, 229, 0.4) 45%, rgba(135, 150, 181, 0.4) 100%);
}
.p-plateau::after, .p-etal::after { background: radial-gradient(120% 78% at 50% 0%, rgba(255, 255, 255, 0.94) 16%, rgba(255, 255, 255, 0) 68%); }

/* L'étal (27/10/2026) : le même plateau, qui porte une scène produit (outils/pages/scenes.mjs)
   au lieu d'une capture ; la scène y tient entière, centrée. Au téléphone, il prend toute la
   largeur de l'écran : la scène y gagne 32 px, ses libellés restent à 12 px et plus. */
.p-etal { position: relative; isolation: isolate; display: grid; justify-items: center; padding: clamp(20px, 4%, 48px); border-radius: 28px; background: #F2F4F8; box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.05); }
.p-etal > .sc { width: 100%; max-width: 640px; }
.p-etal--hero { padding: clamp(20px, 4.4%, 52px); }

/* La fenêtre : en grand, débordant à droite et en bas. */
.p-plateau--fenetre { aspect-ratio: 16 / 11; }
.p-plateau--fenetre .p-fenetre, .p-plateau--duo .p-fenetre {
  position: absolute; top: 9%; width: var(--fen-w);
  left: calc(7% - var(--fx) * (var(--fen-w) - 86%));
}
/* Le détail : entier, en carte blanche. */
.p-plateau--detail { display: grid; place-items: center; padding: clamp(22px, 6%, 56px); }
.p-detail { width: 100%; overflow: hidden; border-radius: 14px; background: #FFFFFF; box-shadow: var(--s-ombre-fenetre); }
.p-detail img { display: block; width: 100%; height: auto; }
/* Le téléphone : centré, il sort du bas du plateau. */
.p-plateau--telephone { aspect-ratio: 1 / 1.04; display: flex; justify-content: center; align-items: flex-start; padding-top: 8%; }
.p-plateau--telephone .p-tel { --tel-w: min(300px, 60cqw); flex: none; }

/* Le duo : la fenêtre, et devant elle le téléphone, à droite, qui sort du bas. */
.p-plateau--duo { --fen-w: 112%; aspect-ratio: 16 / 12; }
.p-plateau--duo .p-tel { position: absolute; right: 6%; top: 27%; --tel-w: clamp(150px, 31cqw, 250px); }
/* … ou le téléphone d'abord (Web & Mobile) : grand, à gauche ; la fenêtre derrière, à droite. */
.p-plateau--duo-tel .p-fenetre { top: 13%; left: 50%; width: 104%; }   /* commence au bord du téléphone : aucun titre coupé derrière lui */
.p-plateau--duo-tel .p-tel { right: auto; left: 9%; top: 8%; --tel-w: clamp(190px, 44cqw, 300px); }

/* Le téléphone des pages : barre d'état (heure, réseau, batterie) au-dessus de la
   capture, de la couleur du haut de l'écran ; l'îlot ne recouvre plus l'interface.
   Un cadre au liseré clair, une ombre portée qui le pose sur le plateau. */
.p-tel .s-tel__cadre {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 calc(var(--tel-w) * 0.011) #1B2131,
    0 0 0 1px rgba(11, 13, 24, 0.10), 0 2px 4px rgba(11, 13, 24, 0.16), 0 24px 44px -18px rgba(11, 13, 24, 0.50), 0 60px 90px -50px rgba(29, 52, 99, 0.45);
}
.p-tel .s-tel__ecran { padding-top: calc(var(--tel-w) * 0.118); background: var(--tel-fond, #F5F7FB); }
.p-tel .s-tel__ecran img { display: block; }
.p-tel__statut {
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--tel-w) * 0.03); height: calc(var(--tel-w) * 0.082);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--tel-w) * 0.07) 0 calc(var(--tel-w) * 0.105);
  color: #0F172E; font-family: "Inter", system-ui, sans-serif; font-size: calc(var(--tel-w) * 0.044); line-height: 1; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.p-tel__icones { display: inline-flex; align-items: center; gap: calc(var(--tel-w) * 0.016); }
.p-tel__icones svg { display: block; width: auto; height: calc(var(--tel-w) * 0.034); }
.p-tel__icones svg:last-child { height: calc(var(--tel-w) * 0.038); }

/* Dans les capacités (bureau) : les plateaux d'une page ont la même proportion. */
@media (min-width: 1024px) {
  .p-cap__visuel .p-plateau { aspect-ratio: 16 / 12; }
  .p-cap__visuel .p-plateau--telephone { padding-top: 6%; }
  .p-cap__visuel .p-plateau--telephone .p-tel { --tel-w: min(290px, 48cqw); }
  .p-cap__visuel .p-plateau--detail { padding: 7%; }
}
/* Le hero des pages de rubrique : la composition seule, sur le champ de l'accueil. */
.p-hero--champ .p-plateau { max-width: 1100px; margin-inline: auto; background: none; box-shadow: none; overflow: visible; }
.p-hero--champ .p-plateau::before, .p-hero--champ .p-plateau::after { display: none; }
.p-hero--champ .p-plateau--duo { --fen-w: 92%; aspect-ratio: 16 / 9.4; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%); }   /* la composition s'efface en bas, comme le hero de l'accueil */
.p-hero--champ .p-plateau--duo .p-fenetre { top: 0; left: 0; }
.p-hero--champ .p-plateau--duo .p-tel { right: 2%; top: 22%; --tel-w: clamp(150px, 22cqw, 240px); }
.p-hero--champ .p-plateau--fenetre { aspect-ratio: auto; }
.p-hero--champ .p-plateau--fenetre .p-fenetre { position: relative; top: 0; left: 0; width: 100%; }
/* Les familles des pages de rubrique et les téléphones de Web & Mobile. */
.p-famille__visuel .p-plateau--fenetre { aspect-ratio: 16 / 10; }
.p-telephones .p-plateau--telephone { width: 100%; aspect-ratio: 1 / 1.1; }
.p-telephones .p-plateau--telephone .p-tel { --tel-w: min(236px, 66cqw); }
.s-section--encre .p-plateau { background: #1A2340; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.s-section--encre .p-plateau::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 8px), radial-gradient(110% 95% at 50% 100%, rgba(77, 148, 245, 0.16) 0%, rgba(77, 148, 245, 0) 70%); }
.s-section--encre .p-plateau::after { background: radial-gradient(120% 78% at 50% 0%, rgba(255, 255, 255, 0.07) 16%, rgba(255, 255, 255, 0) 68%); }

@media (min-width: 768px) and (max-width: 1023px) {
  .p-cap__visuel .p-plateau--telephone { aspect-ratio: 16 / 11; padding-top: 5%; }
  .p-cap__visuel .p-plateau--telephone .p-tel { --tel-w: min(300px, 40cqw); }
}
@media (max-width: 767px) {
  .p-plateau { border-radius: 22px; }
  .p-etal, .p-etal--hero { margin-inline: calc(-1 * var(--s-marge)); padding: 24px 16px; border-radius: 0; box-shadow: inset 0 1px 0 rgba(15, 23, 46, 0.05), inset 0 -1px 0 rgba(15, 23, 46, 0.05); }
  /* La scène de tête, de bord à bord, ferme le héros : pas de bande blanche entre elle et la section
     suivante (28/10/2026). */
  .p-hero--scene:has(.p-etal--hero:last-child) { padding-bottom: 0; }
  /* Au téléphone, la fenêtre grandit encore : on en lit les libellés ; le plateau la recadre. */
  .p-plateau--fenetre { --fen-w: 176%; aspect-ratio: 1 / 0.86; }
  .p-plateau--fenetre .p-fenetre { top: 8%; left: calc(6% - var(--fx) * (var(--fen-w) - 88%)); }
  .p-plateau--detail { padding: 16px; }
  .p-plateau--telephone { aspect-ratio: 1 / 1.08; padding-top: 9%; }
  .p-plateau--telephone .p-tel { --tel-w: min(240px, 64cqw); }
  .p-plateau--duo { --fen-w: 172%; aspect-ratio: 1 / 1.02; }
  .p-plateau--duo .p-fenetre { top: 7%; left: calc(6% - var(--fx) * (var(--fen-w) - 88%)); }
  .p-plateau--duo .p-tel { right: 6%; top: 25%; --tel-w: 44cqw; }
  .p-plateau--duo-tel .p-fenetre { top: 12%; left: 56%; width: 150%; }
  .p-plateau--duo-tel .p-tel { left: 8%; top: 7%; --tel-w: 54cqw; }
  .p-hero--champ .p-plateau--duo { --fen-w: 160%; aspect-ratio: 1 / 0.9; }
  .p-hero--champ .p-plateau--duo .p-tel { right: 4%; top: 18%; --tel-w: 40cqw; }
  .p-famille__visuel .p-plateau--fenetre { aspect-ratio: 1 / 0.8; }
  .p-telephones .p-plateau--telephone .p-tel { --tel-w: 66cqw; }
}

/* Le bandeau d'aperçu : une fonctionnalité en préparation. */
.p-apercu { background: var(--s-teinte); color: var(--s-encre); box-shadow: inset 0 -1px 0 var(--s-trait); }
.p-apercu__in { padding-block: 14px; font-size: 15px; line-height: 22px; }
.p-apercu strong { color: var(--s-lien); }

/* ── Le problème : une colonne étroite, la première phrase plus grande ───── */
.p-probleme { padding-block: var(--s-section); }
.p-probleme__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.p-probleme__texte { display: grid; gap: 16px; max-width: 34em; color: var(--p-encre-2); }
.p-probleme__premier { font-size: clamp(20px, 0.6vw + 16px, 24px); line-height: 1.45; font-weight: 500; color: var(--s-encre); letter-spacing: -0.012em; }
@media (max-width: 899px) { .p-probleme__grille { grid-template-columns: minmax(0, 1fr); } }
/* Avec la photo de terrain (Web & Mobile) : le texte à gauche, la photo du parc en grand à droite ;
   au téléphone, sous le texte, de bord à bord, dans son recadrage vertical. */
.p-probleme--photo .p-probleme__grille { align-items: center; }
.p-probleme__corps { display: grid; gap: 24px; }
.p-probleme__corps .s-surtitre { margin-bottom: -10px; }
.p-probleme__photo { margin: 0; overflow: hidden; border-radius: 24px; background: #E9EDF5; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06), 0 30px 60px -36px rgba(15, 23, 46, 0.45); }
.p-probleme__photo img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .p-probleme__photo { margin-inline: calc(-1 * var(--s-marge)); border-radius: 0; box-shadow: none; }
  /* La photo, de bord à bord, est le dernier élément de la section : elle touche la section suivante. */
  .p-probleme--photo { padding-bottom: 0; }
}

/* ── Le constat (27/10/2026) : navy ; en face du texte, le dossier éparpillé se range ── */
.p-constat { padding-block: var(--s-section); overflow: clip; }
.p-constat__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 96px); align-items: center; }
.p-constat__texte { display: grid; gap: 16px; max-width: 32em; color: var(--s-sur-encre-doux); }
.p-constat__texte .p-h2 { margin-bottom: 4px; }
.p-constat__premier { font-size: clamp(20px, 0.6vw + 16px, 24px); line-height: 1.45; font-weight: 500; letter-spacing: -0.012em; color: #FFFFFF; }
.p-constat__visuel { min-width: 0; }
@media (max-width: 899px) { .p-constat__grille { grid-template-columns: minmax(0, 1fr); } }

/* ── Ce que fait IMPRA : une capacité par rangée (27/10/2026) ──────────────
   L'écran (scène produit ou capture réelle) en face de son texte, en alternance
   au bureau ; au téléphone, l'écran d'abord. */
.p-cap { padding-block: var(--s-section); }
.p-cap__liste { display: grid; gap: clamp(72px, 9vw, 136px); }
.p-cap__item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 96px); align-items: center; }
.p-cap__item--inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.p-cap__item--inverse .p-cap__visuel { order: 2; }
.p-cap__visuel { min-width: 0; }
.p-cap__texte { display: grid; gap: 14px; max-width: 34em; }
.p-cap__texte p { color: var(--p-encre-2); }
.p-cap__texte .s-lien-fleche { margin-top: 4px; color: var(--s-lien); }
.p-legende-tel { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--s-doux); text-align: center; }
/* Une capture du bureau, illisible à 360 px, cède la place au téléphone de l'application au même endroit. */
.p-cap__mobile { display: none; }
@media (max-width: 767px) { .p-cap__bureau { display: none; } .p-cap__mobile { display: block; } }
@media (max-width: 1023px) {
  .p-cap__item, .p-cap__item--inverse { grid-template-columns: minmax(0, 1fr); }
  .p-cap__item--inverse .p-cap__visuel { order: 0; }
}

/* Les coches : ce qui se fait ; les croix : ce qui ne se fait pas. */
.p-coches { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.p-coches li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--p-encre-2); }
.p-coches svg { width: 20px; height: 20px; margin-top: 3px; color: var(--s-bleu); }
.p-coches--non svg { color: #8A94A6; }

/* ── Les bénéfices : navy, le bénéfice et sa preuve ──────────────────────── */
.p-benefices { padding-block: var(--s-section); }
.p-benefices__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.p-benefices__tete { display: grid; gap: 14px; position: sticky; top: var(--p-colle-top); }
.p-benefices__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p-benefices__liste li { display: grid; gap: 6px; padding: 24px 28px; border-radius: 18px; background: rgba(244, 247, 250, 0.05); }
.p-benefices__liste strong { font-size: 20px; line-height: 1.35; font-weight: 600; color: #FFFFFF; letter-spacing: -0.01em; }
.p-benefices__liste span { max-width: 36em; color: var(--s-sur-encre-doux); }
@media (max-width: 899px) {
  .p-benefices__grille { grid-template-columns: minmax(0, 1fr); }
  .p-benefices__tete { position: static; }
  .p-benefices__liste li { padding: 20px; }
  .p-benefices__liste strong { font-size: 18px; }
}

/* Les bénéfices en cartes (27/10/2026) : un petit écran, le bénéfice, sa preuve ; deux largeurs alternées. */
.p-benefices__cartes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.p-benefice { grid-column: span 5; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 28px; border-radius: 22px; background: rgba(244, 247, 250, 0.045); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); }
.p-benefice--large { grid-column: span 7; }
.p-benefice__visuel { margin-bottom: 18px; padding: 20px; border-radius: 16px; background: rgba(4, 9, 24, 0.32); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.06); }
/* Une liste courte (une ou deux lignes) se centre dans son panneau et se lit plus grand : le panneau
   garde la hauteur de ses voisins, sans paraître à moitié vide (28/10/2026). */
.p-benefice__visuel .sc-mini--liste { align-content: center; }
.p-benefice__visuel .sc-pieces > li { padding-block: 11px; }
.p-benefice__visuel .sc-pieces b { font-size: 15px; line-height: 1.35; }
.p-benefice__visuel .sc-pieces small { font-size: 13px; }
.p-benefice__titre { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }
.p-benefice p { max-width: 34em; color: var(--s-sur-encre-doux); }
@media (max-width: 899px) {
  .p-benefice, .p-benefice--large { grid-column: 1 / -1; padding: 20px; }
  .p-benefice__visuel { padding: 16px; margin-bottom: 14px; }
  .p-benefice__titre { font-size: 18px; }
}
/* Au téléphone, les cartes se font glisser au pouce (27/10/2026) : quatre écrans empilés de navy
   devenaient une carte à la fois, la suivante qui dépasse ; chacune s'anime à son arrivée. */
.p-benefices__astuce { display: none; }
@media (min-width: 768px) and (max-width: 899px) { .p-benefice, .p-benefice--large { grid-column: span 6; } }   /* tablette : deux cartes par rangée */
@media (max-width: 767px) {
  .p-benefices__cartes {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin-inline: calc(-1 * var(--s-marge));
    padding: 2px var(--s-marge) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-marge); scrollbar-width: none;
  }
  .p-benefices__cartes::-webkit-scrollbar { display: none; }
  .p-benefice, .p-benefice--large { grid-column: auto; scroll-snap-align: start; }
  .p-benefices__cartes:focus-visible { outline: 2px solid var(--s-bleu-encre); outline-offset: 4px; }
  .p-benefices__astuce { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 18px; color: var(--s-sur-encre-doux); }
  .p-benefices__astuce::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-bleu-encre); box-shadow: 0 0 0 4px rgba(77, 148, 245, 0.18); }
}

/* ── Les étapes : de gauche à droite, des verbes ─────────────────────────── */
.p-etapes { padding-block: var(--s-section); }
.p-frise { --gap: 28px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 32px var(--gap); margin: 0; padding: 0; list-style: none; }
.p-frise::before, .p-frise::after { content: ""; position: absolute; top: 19px; left: 20px; right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 20px); height: 2px; border-radius: 2px; background: var(--s-trait); }
.p-frise::after { background: var(--s-bleu); transform-origin: left; transition: transform 1.6s var(--s-ease) 0.15s; }
.js .p-frise:not(.est-vu)::after { transform: scaleX(0); }
.p-frise > li { position: relative; display: grid; align-content: start; gap: 10px; }
.p-frise__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%;
  background: var(--s-encre); color: #FFFFFF; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--s-ease-ui), color 0.4s var(--s-ease-ui), box-shadow 0.4s var(--s-ease-ui); transition-delay: calc(0.2s + var(--i) * 0.36s);
}
.js .p-frise:not(.est-vu) .p-frise__num { background: #FFFFFF; color: var(--s-doux); box-shadow: inset 0 0 0 1.5px var(--s-trait); }
.p-etapes__titre { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--s-encre); }
.p-frise p { color: var(--p-encre-2); }
@media (max-width: 899px) {
  .p-frise { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .p-frise::before, .p-frise::after { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
  .p-frise::after { transform-origin: top; }
  .js .p-frise:not(.est-vu)::after { transform: scaleY(0); }
  .p-frise > li { padding-left: 60px; min-height: 40px; }
  .p-frise__num { position: absolute; left: 0; top: -6px; margin: 0; }
  .p-etapes__titre { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .p-frise::after, .p-frise__num { transition: none; } }

/* ── Ce qu'IMPRA fait, ce qu'il ne fait pas ──────────────────────────────── */
.p-limites { padding-block: var(--s-section); }
.p-limites__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.p-limites__tete { display: grid; gap: 14px; }
.p-limites__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.p-limites__colonnes .p-h3 { margin-bottom: 14px; }
@media (max-width: 899px) {
  .p-limites__grille, .p-limites__colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ── Un tableau réel ─────────────────────────────────────────────────────── */
.p-tableau { padding-block: var(--s-section); }
.p-tableau__defile { overflow-x: auto; border-radius: 16px; background: var(--s-blanc); box-shadow: inset 0 0 0 1px var(--s-trait); }
.p-tableau table { width: 100%; min-width: 620px; font-size: 16px; line-height: 1.45; }
.p-tableau th, .p-tableau td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s-trait-2); }
.p-tableau thead th { font-size: 14px; font-weight: 600; color: var(--s-doux); background: var(--s-gris); }
.p-tableau tbody th { font-weight: 600; color: var(--s-encre); }
.p-tableau tbody tr:last-child > * { border-bottom: 0; }
.p-tableau td { color: var(--p-encre-2); }
.p-tableau__note { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--s-doux); max-width: 36em; }
.p-tableau__defile:focus-visible { outline-offset: 4px; }
/* La matrice Web & Mobile (27/10/2026) : une coche, un tiret ou « Pas encore » ; les colonnes
   portent leur pictogramme. Au téléphone, la même matrice, serrée : l'action, puis deux colonnes
   étroites, sans le mot (il reste lu par les lecteurs d'écran). */
.p-tableau__defile { max-width: 980px; }
.p-tableau thead th:not(.p-tableau__premiere), .p-tableau td { width: 168px; text-align: center; vertical-align: middle; }
.p-tableau thead th svg { display: inline-block; width: 18px; height: 18px; margin: 0 6px -4px 0; color: var(--s-lien); }
.p-tableau tbody th { vertical-align: middle; }
.p-tableau tbody tr { transition: background-color 0.2s var(--s-ease-ui); }
.p-tableau tbody tr:hover { background: #F8FAFD; }
.p-marque { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 500; }
.p-marque svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; }
.p-marque--oui { color: var(--s-encre); }
.p-marque--oui svg { color: #155FC4; background: #E8F0FD; }
.p-marque--non { color: var(--s-doux); }
.p-marque--non svg { color: #8A94A6; background: #F1F3F7; }
.p-marque--bientot { padding: 3px 10px; border-radius: 999px; background: #F1F5FB; box-shadow: inset 0 0 0 1px var(--s-trait); color: var(--s-doux); font-size: 13px; line-height: 18px; white-space: nowrap; }
@media (max-width: 767px) {
  .p-tableau__defile { overflow: visible; border-radius: 16px; }
  .p-tableau table { min-width: 0; table-layout: fixed; font-size: 15px; }
  .p-tableau th, .p-tableau td { padding: 12px 10px; }
  .p-tableau .p-tableau__premiere, .p-tableau tbody th { padding-left: 14px; }
  .p-tableau thead th:not(.p-tableau__premiere), .p-tableau td { width: 76px; padding-inline: 4px; }
  .p-tableau thead th { font-size: 12px; line-height: 15px; vertical-align: bottom; }
  .p-tableau thead th svg { display: block; width: 20px; height: 20px; margin: 0 auto 4px; }
  .p-tableau tbody th { font-size: 15px; line-height: 20px; }
  .p-marque__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .p-marque svg { width: 26px; height: 26px; padding: 5px; }
  .p-marque--bientot { padding: 3px 8px; font-size: 11.5px; line-height: 15px; white-space: normal; }
}

/* ── Des téléphones côte à côte ──────────────────────────────────────────── */
.p-telephones { padding-block: var(--s-section); }
.p-telephones__rang { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.p-telephones figure { display: grid; justify-items: center; gap: 18px; }
.p-telephones figcaption { max-width: 26em; font-size: 16px; line-height: 1.5; color: var(--p-encre-2); text-align: center; }
.p-telephones figcaption strong { display: block; margin-bottom: 2px; color: var(--s-encre); }
.s-section--encre.p-telephones figcaption { color: var(--s-sur-encre-doux); }
.s-section--encre.p-telephones figcaption strong { color: #FFFFFF; }
.p-telephones__defile:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 767px) {
  .p-telephones__defile { margin-inline: calc(-1 * var(--s-marge)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-marge); scrollbar-width: none; }
  .p-telephones__defile::-webkit-scrollbar { display: none; }
  .p-telephones__rang { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); gap: 20px; padding-inline: var(--s-marge); }
  .p-telephones__rang > li { scroll-snap-align: start; }
}

/* ── Une rubrique : des familles, chacune avec ses pages ─────────────────── */
.p-rubrique { padding-block: var(--s-section); }
.p-rubrique__familles { display: grid; gap: clamp(48px, 6vw, 88px); }
.p-famille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.p-famille__tete { display: grid; gap: 12px; }
.p-famille__tete p { color: var(--p-encre-2); max-width: 30em; }
.p-famille__visuel { margin-bottom: 16px; }
.p-famille__liens { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.p-famille__liens a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; grid-template-areas: "picto nom fleche" "picto desc fleche"; column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 16px 20px 16px 16px; border-radius: 14px; background: var(--s-papier); color: var(--s-encre); text-decoration: none;
  transition: background-color 0.2s var(--s-ease-ui);
}
/* Le pictogramme de la page, comme les cartes de « Pour aller plus loin » : un seul style de lien. */
.p-famille__picto { grid-area: picto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; color: var(--s-lien); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06); }
.p-famille__picto .sc-ic { width: 20px; height: 20px; }
.p-famille__liens a > svg:last-child { grid-area: fleche; }
.p-famille__nom { grid-area: nom; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.p-famille__desc { grid-area: desc; font-size: 15px; line-height: 1.5; color: var(--s-doux); }
.p-famille__liens a > svg:last-child { width: 18px; height: 18px; color: var(--s-doux); transition: transform 0.25s var(--s-ease), color 0.2s var(--s-ease-ui); }
.p-famille__liens a:hover { background: var(--s-teinte); }
.p-famille__liens a:hover .p-famille__nom, .p-famille__liens a:hover > svg:last-child { color: var(--s-lien); }
.p-famille__liens a:hover > svg:last-child { transform: translateX(3px); }
@media (max-width: 899px) { .p-famille { grid-template-columns: minmax(0, 1fr); } }

/* ── Questions fréquentes : un accordéon, comme l'accueil (27/10/2026) ──── */
.p-faq { padding-block: var(--s-section); }
.p-faq__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.p-faq__liste { box-shadow: inset 0 1px 0 var(--s-trait); }
.p-faq__item { box-shadow: inset 0 -1px 0 var(--s-trait); interpolate-size: allow-keywords; }
.p-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--s-encre); text-wrap: balance;
  transition: color 0.2s var(--s-ease-ui); -webkit-tap-highlight-color: transparent;
}
.p-faq__item summary::-webkit-details-marker { display: none; }
.p-faq__item summary > span { text-wrap: pretty; }
.p-faq__item summary svg { flex: none; width: 20px; height: 20px; color: var(--s-doux); transition: transform 0.35s var(--s-ease), color 0.2s var(--s-ease-ui); }
.p-faq__item[open] summary svg { transform: rotate(180deg); color: var(--s-encre); }
@media (hover: hover) and (pointer: fine) { .p-faq__item summary:hover, .p-faq__item summary:hover svg { color: var(--s-lien); } }
.p-faq__item summary:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 4px; border-radius: 6px; }
.p-faq__item::details-content { height: 0; overflow: clip; transition: height 0.4s var(--s-ease), content-visibility 0.4s allow-discrete; }
.p-faq__item[open]::details-content { height: auto; }
.p-faq__reponse { padding: 0 44px 24px 0; }
.p-faq__reponse p { max-width: 40em; color: var(--p-encre-2); font-size: 16.5px; line-height: 1.6; }
@media (max-width: 1023px) { .p-faq__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .p-faq__item summary { font-size: 16.5px; gap: 16px; padding: 16px 0; }
  .p-faq__reponse { padding-right: 0; }
  .p-faq__reponse p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .p-faq__item::details-content { transition: none; } .p-faq__item summary svg { transition: none; } }

/* ── Pour aller plus loin : des cartes à pictogramme (27/10/2026) ────────── */
.p-liens { padding-block: var(--s-section); }
.p-liens .p-h2 { margin-bottom: clamp(28px, 3vw, 44px); }
.p-liens__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.p-liens__cartes a {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "picto nom" "picto desc"; column-gap: 16px; row-gap: 3px; align-items: start;
  height: 100%; padding: 20px 48px 20px 20px; border-radius: 18px; background: var(--s-blanc); color: var(--s-encre); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06), 0 12px 28px -20px rgba(15, 23, 46, 0.35);
  transition: transform 0.35s var(--s-ease), box-shadow 0.35s var(--s-ease);
}
.p-liens__picto { grid-area: picto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s-teinte); color: var(--s-lien); }
.p-liens__picto .sc-ic { width: 20px; height: 20px; }
.p-liens__nom { grid-area: nom; padding-top: 1px; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; transition: color 0.2s var(--s-ease-ui); }
.p-liens__desc { grid-area: desc; font-size: 15px; line-height: 1.5; color: var(--s-doux); }
.p-liens__cartes a > svg:last-child { position: absolute; right: 20px; top: 24px; width: 16px; height: 16px; color: var(--s-doux); transition: transform 0.25s var(--s-ease), color 0.2s var(--s-ease-ui); }
@media (hover: hover) and (pointer: fine) {
  .p-liens__cartes a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.08), 0 20px 36px -22px rgba(15, 23, 46, 0.45); }
  .p-liens__cartes a:hover .p-liens__nom, .p-liens__cartes a:hover > svg:last-child { color: var(--s-lien); }
  .p-liens__cartes a:hover > svg:last-child { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .p-liens__cartes a, .p-liens__cartes a > svg:last-child { transition: none; } .p-liens__cartes a:hover { transform: none; } }

/* ── Les guides : sommaire, sections, sources ─────────────────────────────── */
.p-article { padding-block: clamp(40px, 5vw, 72px) var(--s-section); }
.p-article__grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px clamp(32px, 5vw, 96px); align-items: start; }
.p-article__cote { position: sticky; top: var(--p-colle-top); display: grid; gap: 28px; }
.p-sommaire__titre { margin-bottom: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--s-doux); }
.p-sommaire ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.p-sommaire a { display: block; padding: 7px 0; font-size: 15px; line-height: 21px; color: var(--p-encre-2); text-decoration: none; transition: color 0.2s var(--s-ease-ui); }
.p-sommaire a:hover, .p-sommaire a[aria-current="true"] { color: var(--s-lien); }
.p-article__encart { padding: 20px 22px; border-radius: 16px; background: var(--s-papier); display: grid; gap: 8px; }
.p-article__encart-titre { font-weight: 600; color: var(--s-encre); }
.p-article__encart p { font-size: 15px; line-height: 1.5; color: var(--p-encre-2); }
.p-article__corps { min-width: 0; max-width: 34em; }
.p-article__section + .p-article__section { margin-top: clamp(40px, 4vw, 64px); }
.p-article__h2 { font-size: clamp(24px, 0.8vw + 20px, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; color: var(--s-encre); scroll-margin-top: var(--p-colle-top); }
.p-article__section h3 { margin-top: 28px; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--s-encre); }
.p-article__section p, .p-article__section ul, .p-article__section ol { margin-top: 14px; color: var(--p-encre-2); }
.p-article__section ul, .p-article__section ol { padding-left: 1.25em; display: grid; gap: 8px; }
.p-article__section li::marker { color: var(--s-doux); }
.p-article__section a:not(.s-lien-fleche) { color: var(--s-lien); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(21, 95, 196, 0.35); }
.p-article__section a:not(.s-lien-fleche):hover { text-decoration-color: currentColor; }
.p-article__section table { width: 100%; margin-top: 18px; font-size: 15.5px; line-height: 1.45; }
.p-article__section th, .p-article__section td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s-trait-2); }
.p-article__section thead th { font-size: 14px; font-weight: 600; color: var(--s-doux); background: var(--s-gris); }
/* Les montants : en Inter, dont les chiffres tabulaires et l'espace fine insécable sont dessinés. */
.p-article__section td.chiffre, .p-article__section th.chiffre { text-align: right; font-family: var(--s-hero-police); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* L'exemple chiffré (27/10/2026) : une carte de résultat, comme celle des calculateurs ; la ligne
   qui répond à la question (la TVA due, la marge estimée) en grand. */
.p-exemple { margin-top: 22px; padding: 22px 24px 18px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 23, 46, 0.06), 0 24px 48px -30px rgba(15, 23, 46, 0.35); }
.p-exemple > p:first-child { margin-top: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-lien); }
.p-exemple table { margin-top: 10px; }
.p-exemple th, .p-exemple td { padding: 9px 0; border-bottom-color: var(--s-trait); }
.p-exemple td.chiffre { padding-left: 16px; }
.p-exemple tr.resultat th, .p-exemple tr.resultat td { padding-top: 14px; border-bottom: 0; font-weight: 600; color: var(--s-encre); }
.p-exemple tr.resultat td.chiffre { font-size: 22px; letter-spacing: -0.01em; color: var(--s-encre); }
.p-exemple tr.resultat--pos td.chiffre { color: #157347; }   /* le vert pour une marge, jamais pour un montant dû */
.p-exemple > p:last-child:not(:first-child) { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--s-doux); }
/* L'essentiel du guide, avant le détail : quatre phrases, sur l'encre. */
.p-essentiel { margin: 0 0 clamp(40px, 4vw, 56px); padding: 24px 26px 26px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #1C2A44 0%, #0F172E 55%, #0C1326 100%); color: var(--s-sur-encre); box-shadow: 0 30px 60px -36px rgba(15, 23, 46, 0.55); }
.p-essentiel .s-surtitre { margin-bottom: 12px; color: var(--s-bleu-encre); }
.p-essentiel ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.p-essentiel li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16.5px; line-height: 1.5; color: #F4F7FA; }
.p-essentiel li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--s-bleu-encre); }
@media (max-width: 767px) { .p-essentiel { margin-inline: calc(-1 * var(--s-marge)); border-radius: 0; padding: 24px var(--s-marge); } .p-essentiel li { font-size: 15.5px; } }
.p-attention { margin-top: 20px; padding: 18px 22px; border-radius: 14px; background: var(--s-teinte); box-shadow: inset 0 0 0 1px var(--s-trait); color: var(--s-encre); }
.p-attention p { margin-top: 0; color: var(--s-encre); }
.p-sources ul { padding-left: 1.25em; }
.p-sources__avertissement { margin-top: 20px; max-width: 36em; font-size: 15px; line-height: 1.55; color: var(--s-doux); }
@media (max-width: 1023px) {
  .p-article__grille { grid-template-columns: minmax(0, 1fr); }
  .p-article__cote { position: static; }
  .p-sommaire { padding: 18px 20px; border-radius: 14px; background: var(--s-papier); }
}

/* Les citations des guides (<q>) : guillemets français et espace fine insécable à l'intérieur (28/10/2026),
   comme le texte courant (typo() de outils/pages/generer.mjs) ; le navigateur les colle sinon. */
.lab q { quotes: "«\202F" "\202F»" "“" "”"; }

/* ── Les calculateurs (28/10/2026) : le résultat d'abord, sur navy ; la saisie en étapes ; le détail ──
   Une même grammaire pour les trois outils, une lecture propre à chacun : la décomposition du prix
   de vente (marge), la facture au régime de la marge (TVA), le bordereau d'un achat aux enchères. */
.outil { padding-block: 0 var(--s-section); }
/* overflow: clip (et non hidden) : les coins restent arrondis sans créer de conteneur de défilement,
   qui empêcherait l'aperçu du résultat de rester collé en haut de l'écran au téléphone. */
.outil__plan {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip;
  border: 1px solid var(--s-trait); border-radius: var(--s-r-panneau); background: var(--s-blanc);
  box-shadow: 0 1px 2px rgba(15, 23, 46, 0.04), 0 28px 56px -36px rgba(15, 23, 46, 0.3);
}

/* La bande du résultat */
.outil__resultat {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px clamp(28px, 4.4vw, 72px); align-items: center; padding: clamp(28px, 3.6vw, 52px);
  background: var(--s-encre); color: var(--s-sur-encre);
}
.outil__resultat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 95% at 100% 0%, rgba(31, 116, 231, 0.34), rgba(31, 116, 231, 0) 66%),
    repeating-linear-gradient(90deg, rgba(244, 247, 250, 0.028) 0 1px, transparent 1px 8px);
}
.outil__principal { display: grid; gap: 8px; align-content: start; min-width: 0; }
.outil__principal-libelle { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--s-sur-encre-doux); }
.outil__principal-valeur {
  font-family: var(--s-hero-police); font-size: clamp(44px, 3.2vw + 22px, 74px); line-height: 1; font-weight: 600;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #FFFFFF; overflow-wrap: anywhere;
}
.outil__principal-valeur[data-signe="negatif"] { color: #FF9C91; }
.outil__principal-note { font-size: 15px; line-height: 1.5; color: var(--s-sur-encre-doux); }
.outil__indicateurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.outil__indicateurs div { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(244, 247, 250, 0.07); border: 1px solid rgba(244, 247, 250, 0.12); }
.outil__indicateurs dt { font-size: 13.5px; line-height: 18px; color: var(--s-sur-encre-doux); }
.outil__indicateurs dd { margin: 0; font-family: var(--s-hero-police); font-size: 15.5px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; }
.outil__visuel { min-width: 0; display: grid; gap: 20px; }
.outil__visuel-titre { font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--s-sur-encre-doux); }

/* La décomposition du prix de vente (marge) et le partage de la marge (TVA) : une barre, des parts. */
.rep-barre, .tva-barre { display: flex; height: 24px; margin-top: 12px; border-radius: 8px; overflow: hidden; background: rgba(244, 247, 250, 0.08); }
.rep-seg, .tva-seg { flex: none; width: calc(var(--part, 0) * 1%); height: 100%; transition: width 0.7s var(--s-ease); }
.rep-seg:not([data-vide]) + .rep-seg:not([data-vide]), .tva-seg:not([data-vide]) + .tva-seg:not([data-vide]) { box-shadow: inset 2px 0 0 var(--s-encre); }
.rep-seg--achat, .rep-item--achat .rep-puce { background: #65769A; }
.rep-seg--frais, .rep-item--frais .rep-puce { background: #A3B1CB; }
.rep-seg--tva, .rep-item--tva .rep-puce, .tva-seg--tva { background: var(--s-bleu-encre); }
.rep-seg--marge, .rep-item--marge .rep-puce, .tva-seg--ht, .rep-item--ht .rep-puce { background: #3CC57F; }
/* Une perte : les coûts dépassent le prix de vente. La barre vaut alors les coûts, et la part que le prix de vente
   ne couvre pas se hachure par-dessus sa fin ; son bord gauche marque le prix de vente. */
.rep-barre { position: relative; }
.rep-seg--perte { position: absolute; top: 0; right: 0; bottom: 0; box-shadow: inset 2px 0 0 #FFFFFF; }
.rep-seg--perte, .rep-item--marge[data-perte] .rep-puce, .rep-item--ht[data-perte] .rep-puce { background: repeating-linear-gradient(135deg, #F97066 0 5px, #C2453B 5px 9px); }
.rep-legende { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.rep-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; row-gap: 2px; align-items: center; }
.rep-puce { width: 10px; height: 10px; border-radius: 3px; }
.rep-nom { font-size: 13.5px; line-height: 18px; color: var(--s-sur-encre-doux); }
.rep-val { grid-column: 2; font-family: var(--s-hero-police); font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; }
.rep-item--marge .rep-val, .rep-item--ht .rep-val { color: #7BE3AE; }
.rep-item--marge[data-perte] .rep-val, .rep-item--ht[data-perte] .rep-val { color: #FF9C91; }

/* La facture au régime de la marge (TVA) : la TVA se calcule, elle ne s'affiche pas. */
.outil__facture { margin: 0; display: grid; gap: 10px; }
/* Régime de la marge exclu (achat avec TVA facturée) : ni partage de la marge, ni facture au régime de la marge. */
.outil[data-exclu] .outil__visuel { display: none; }
.fac-papier { padding: 18px 20px 16px; border-radius: 14px; background: #FFFFFF; color: var(--s-encre); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7); font-size: 14.5px; line-height: 20px; }
.fac-tete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--s-trait); font-weight: 600; }
.fac-tete span + span { font-weight: 500; color: var(--s-doux); }
.fac-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--s-trait); }
.fac-ligne span:last-child { font-family: var(--s-hero-police); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-ligne--total { font-weight: 600; border-bottom: 0; }
.fac-mention { margin-top: 4px; padding: 8px 12px; border-radius: 8px; background: var(--s-teinte); color: var(--s-lien); font-size: 13.5px; line-height: 18px; font-weight: 600; }
.outil__facture figcaption { font-size: 13px; line-height: 18px; color: var(--s-sur-encre-doux); }

/* Le bordereau d'un achat aux enchères : un papier, trois temps séparés par des pointillés. */
.outil__bordereau { padding: 18px 22px 12px; border-radius: 14px; background: #FFFFFF; color: var(--s-encre); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7); }
.bord-titre { margin-bottom: 4px; font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--s-doux); }
.bord-lignes + .bord-lignes { margin-top: 6px; padding-top: 6px; border-top: 2px dashed var(--s-trait); }
.outil__bordereau .outil__detail div { padding: 9px 0; }

/* La saisie : trois étapes, dans l'ordre de la vie du véhicule. */
.outil__saisie { padding: clamp(26px, 3.4vw, 44px) clamp(20px, 3.4vw, 48px); border-top: 1px solid var(--s-trait); }
.outil__titre { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--s-encre); }
.outil__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.outil__reset { min-height: 44px; padding: 0; border: 0; background: none; color: var(--s-lien); font: inherit; font-size: 15px; line-height: 20px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.outil__reset:hover { color: var(--s-encre); }
.outil__reset:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 3px; border-radius: 4px; }
.outil__saisie > .outil__aide { margin-top: 4px; max-width: 62em; }
.outil__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; align-items: stretch; }
.outil__etapes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Une étape longue à gauche, deux courtes empilées à droite (enchères : l'adjudication, puis les frais et la revente). */
.outil__etapes--colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outil__etapes--colonne > .outil__etape:first-child { grid-row: span 2; }
.outil__etape { min-width: 0; margin: 0; padding: 18px 18px 20px; border: 1px solid var(--s-trait); border-radius: 18px; background: var(--s-gris); }
/* La légende flotte : elle se range dans la carte au lieu de couper sa bordure. */
.outil__etape-titre { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; font-size: 16.5px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--s-encre); }
.outil__etape-titre + * { clear: both; }
.outil__etape-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--s-encre); color: #FFFFFF; font-family: var(--s-hero-police); font-size: 13px; line-height: 1; font-weight: 600; }
.outil__champs { display: grid; gap: 16px; margin-top: 16px; }
.outil__champ { display: grid; gap: 7px; }
.outil__champ label, .outil__legende { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--s-encre); }
.outil__aide { font-size: 13.5px; line-height: 19px; color: var(--s-doux); }
.outil__saisie-montant { position: relative; }
.outil__saisie-montant input {
  width: 100%; min-height: 52px; padding: 12px 44px 12px 16px; border: 1px solid #CBD5E6; border-radius: 12px;
  background: #FFFFFF; color: var(--s-encre); font-size: 18px; line-height: 24px; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; transition: border-color 0.18s var(--s-ease-ui), box-shadow 0.18s var(--s-ease-ui);
}
.outil__saisie-montant input:hover { border-color: #AEBBD3; }
.outil__saisie-montant input:focus { outline: none; border-color: var(--s-bleu); box-shadow: 0 0 0 4px rgba(31, 116, 231, 0.16); }
.outil__saisie-montant span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--s-doux); font-size: 16px; pointer-events: none; }
.outil__champ[data-invalide] input { border-color: var(--s-rouge); box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1); }
.outil__erreur { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--s-rouge); }
.outil__erreur:empty { display: none; }
.outil__choix { display: grid; gap: 8px; border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.outil__legende { margin-bottom: 2px; padding: 0; }
.outil__choix label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--s-trait); border-radius: 12px; background: #FFFFFF; cursor: pointer; font-size: 14.5px; line-height: 20px; color: var(--s-encre); transition: border-color 0.18s var(--s-ease-ui), background-color 0.18s var(--s-ease-ui); }
.outil__choix label:hover { border-color: #AEBBD3; }
.outil__choix input { margin-top: 2px; accent-color: var(--s-bleu); width: 18px; height: 18px; flex: none; }
.outil__choix label:has(input:checked) { border-color: var(--s-bleu); background: var(--s-teinte); }
.outil__choix label:has(input:focus-visible) { outline: 2px solid var(--s-bleu); outline-offset: 2px; }
.outil__plus { margin-top: 12px; border: 1px solid var(--s-trait); border-radius: 12px; background: #FFFFFF; }
.outil__plus summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 500; color: var(--s-encre); }
.outil__plus summary::-webkit-details-marker { display: none; }
.outil__plus summary::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.25s var(--s-ease); }
.outil__plus[open] summary::after { transform: rotate(180deg); }
.outil__plus summary:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 2px; border-radius: 12px; }
.outil__plus > .outil__champs { margin: 0; padding: 4px 14px 16px; }

/* L'aperçu du résultat : il reste en haut de l'écran pendant la saisie. Au téléphone d'abord, puis à toutes les
   largeurs (28/10/2026) : au bureau aussi, le résultat sortait de l'écran pendant qu'on saisissait le prix de vente.
   Hauteur fixe et marge basse négative : l'aperçu ne prend aucune place dans la page (il est masqué tant que
   le résultat est à l'écran) et vient se poser par-dessus la saisie quand on la fait défiler. */
.outil__apercu {
  position: sticky; top: calc(var(--entete-h, 64px) + 8px); z-index: 2; box-sizing: border-box; height: 52px; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 -64px;
  padding: 12px 16px; border-radius: 14px; background: var(--s-encre); color: #FFFFFF;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 46, 0.6);
  transition: opacity 0.2s var(--s-ease-ui), transform 0.24s var(--s-ease);
}
.outil__apercu-libelle { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--s-sur-encre-doux); }
.outil__apercu-valeur { font-family: var(--s-hero-police); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.outil__apercu-valeur[data-signe="negatif"] { color: #FF9C91; }
.outil__apercu[data-efface] { opacity: 0; transform: translateY(-6px); }
/* Au bureau, une pastille à droite, au-dessus des champs : la saisie reste lisible à gauche. */
@media (min-width: 900px) { .outil__apercu { width: min(100%, 380px); margin-left: auto; padding-inline: 18px; } }

/* Le détail et le calcul */
.outil__complement {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(28px, 4.4vw, 72px);
  padding: clamp(26px, 3.4vw, 44px) clamp(20px, 3.4vw, 48px); border-top: 1px solid var(--s-trait); background: var(--s-gris);
}
.outil--encheres .outil__complement { grid-template-columns: minmax(0, 1fr); }
.outil__bloc { min-width: 0; }
.outil__bloc-titre { margin-bottom: 6px; font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--s-doux); }
.outil__detail { display: grid; margin: 0; padding: 0; }
.outil__detail div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--s-trait); }
.outil__detail div:last-child { border-bottom: 0; }
.outil__detail dt { min-width: 0; color: var(--p-encre-2); font-size: 15px; }
/* Les montants en Inter : chiffres tabulaires et espace fine insécable dessinés (« 17 490,00 € »). */
.outil__detail dd { margin: 0; font-family: var(--s-hero-police); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--s-encre); font-size: 15px; }
.outil__detail .est-total dt, .outil__detail .est-total dd { font-size: 16.5px; font-weight: 600; color: var(--s-encre); }
.outil__detail dd[data-signe="negatif"] { color: var(--s-rouge); }
.outil__explication { font-size: 15px; line-height: 1.6; color: var(--p-encre-2); }
.outil__explication ol { margin: 4px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.outil__explication li { overflow-wrap: anywhere; }
.outil__explication li::marker { font-family: var(--s-hero-police); font-variant-numeric: tabular-nums; }
.outil__avertissement { margin-top: 14px; max-width: 40em; font-size: 13.5px; line-height: 1.55; color: var(--s-doux); }
.outil__cta { grid-column: 1 / -1; display: grid; gap: 10px; }
.outil__cta .s-btn { justify-self: start; max-width: 100%; white-space: normal; text-align: center; }

@media (max-width: 1099px) {
  .outil__etapes, .outil__etapes--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .outil__etapes--3:not(.outil__etapes--colonne) .outil__etape:last-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .outil__resultat { grid-template-columns: minmax(0, 1fr); }
  .outil__complement { grid-template-columns: minmax(0, 1fr); }
  .outil__plan { border-radius: 20px; }
}
@media (max-width: 767px) {
  .outil__resultat { padding: 26px 20px 24px; }
  .outil__saisie, .outil__complement { padding: 24px 16px; }
  .outil__etapes, .outil__etapes--2, .outil__etapes--colonne { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .outil__etapes--3 .outil__etape:last-child, .outil__etapes--colonne > .outil__etape:first-child { grid-column: auto; grid-row: auto; }
  .outil__etape { padding: 16px 14px 18px; }
  .outil__indicateurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outil__indicateurs div { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px; border-radius: 14px; }
  .rep-legende { gap: 10px 16px; }
  .rep-val { font-size: 16px; }
  .outil__cta .s-btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .rep-seg, .tva-seg, .outil__apercu { transition: none; } }

/* ── Les pages d'outils : une première ligne courte au-dessus du calculateur ─ */
.p-hero--outil { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.p-hero--outil .p-h1 { max-width: 16em; }
.p-hero--outil .p-hero__phrase { max-width: 44em; }