/* MARZEL — l'accueil du service administratif (2026-10-17, D-090 à D-095). S'ajoute à site.css (jetons, en-tête, pied,
   formulaire, panneau). Direction artistique et typographie du carrousel (D-081 ; 04-marketing/reseaux/insta-01-image-1 à 5,
   source 09-outils/hyperframes/film-reseaux/publication-01.html) : fond clair à lueurs, cartes blanches à grands coins,
   un seul bleu, titres en IBM Plex Sans 700 serré et seconde moitié en Newsreader italique bleu, étiquettes et mesures en
   IBM Plex Mono, pastilles « Exemple », tuiles d'icônes bleues ; page large (D-080, colonne .wrap de site.css).
   En haut, à droite du titre dès 1 200 px (dessous sur tablette et téléphone), le parcours d'un dossier (« La ligne »,
   2026-10-17, à la place du schéma interactif du suivi de D-093) : une illustration animée, « Exemple · données fictives »
   (chez le client, le suivi tient dans un tableau partagé et un e-mail le lundi) ; une carte de dossier passe cinq étapes,
   MARZEL fait les trois premières, le bleu ne sert qu'au moment où l'on vous demande de décider. Son mouvement est dans
   parcours-mouvement.css (transform et opacity, produite par 09-outils/parcours-minutage.mjs) ; /js/accueil.js ne fait que
   le lancer à l'écran et tenir le bouton Pause. Dans le compte rendu du lundi, quatre états, toujours dans le même ordre (à
   décider, en cours, fait, à venir), jamais par la couleur seule : une icône et un mot. Mesure des textes : 70 signes au plus
   par ligne (--mesure). Mouvement : coupé en mouvement réduit et sans JavaScript (image fixe ; site.css).
   L'ancienne feuille de l'accueil (maquette.css) n'est plus chargée par la page. */

/* ================= Communs ================= */
/* La mesure des textes : 70 signes au plus par ligne (identite-visuelle.md), soit environ 28,5 em de Plex Sans */
:root { --mesure: 28.5em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bloc { padding-block: clamp(4.5rem, 6.5vw, 7.5rem); }
/* La ligne en Plex Mono au-dessus des titres de section, comme « 1 · Audit » sur la slide 3 */
.etiquette { margin-bottom: clamp(0.875rem, 1.2vw, 1.25rem); font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.chapeau { max-width: var(--mesure); margin-top: clamp(1.25rem, 1.6vw, 1.75rem); font: 400 calc(var(--texte-taille) * 1.08)/1.55 var(--sans); letter-spacing: -0.005em; color: var(--texte-2); text-wrap: pretty; }
/* La pastille des slides : Plex Mono, bleu des mots sur bleu pâle, coins très arrondis */
.exemple { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 0.8em; background: var(--bleu-pale); font: 500 clamp(0.875rem, 0.8rem + 0.15vw, 1rem)/1.4 var(--mono); letter-spacing: 0; color: var(--bleu-texte); white-space: nowrap; }
/* Les liens dans le texte (« Voir un exemple de suivi ↓ », « Confier cette tâche → ») : jamais un second bouton */
.lien-texte { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 600 var(--texte-taille)/1.35 var(--sans); color: var(--encre); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.lien-texte:hover { color: var(--bleu-texte); }
/* Le lien de la tâche n° 2 vers le guide de l'obligation de vigilance (2026-10-17) */
.tache-guide { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.tache-guide:hover { color: var(--bleu-texte); }
.titre-3 { font: var(--titre-graisse) clamp(1.5rem, 1rem + 1.4vw, 2.75rem)/1.06 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.titre-3 em { display: inline-block; font-family: var(--accent); font-style: italic; font-weight: 400; font-size: 0.94em; letter-spacing: var(--accent-interlettrage); color: var(--accent-couleur); }
/* Carte blanche des slides */
.carte-blanche, .tache, .maniere, .chemin, .cote-client, .colonne, .garde-fou, .carte-valentin, .courriel, .carte-coches, .pas-carte, .suite, .questions-liste {
  border: 1px solid var(--carte-filet);
  border-radius: var(--carte-rayon);
  background: var(--blanc);
  box-shadow: var(--carte-ombre);
}
/* La tuile des slides : un carré bleu aux coins arrondis, l'icône blanche au trait, l'ombre bleue */
.tuile { display: grid; place-items: center; flex: none; width: clamp(56px, 2rem + 2vw, 80px); aspect-ratio: 1; margin-bottom: clamp(1.125rem, 1.6vw, 1.75rem); border-radius: 26%; background: var(--bleu); box-shadow: var(--tuile-ombre); }
.tuile svg { width: 56%; height: auto; fill: none; stroke: var(--blanc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Les listes à coches bleues (slide 5) */
.coches { display: flex; flex-direction: column; gap: 1rem; }
.coches li { display: flex; align-items: flex-start; gap: 0.875rem; font: 400 var(--texte-taille)/1.5 var(--sans); color: var(--encre); text-wrap: pretty; }
.coches li > span { max-width: var(--mesure); }
.coche { flex: none; width: calc(var(--texte-taille) * 1.45); height: calc(var(--texte-taille) * 1.45); margin-top: calc(var(--texte-taille) * 0.02); }

/* L'icône des quatre états (à décider, en cours, fait, à venir), dans le compte rendu du lundi */
.etat-icone { flex: none; width: 1.25em; height: 1.25em; }

/* ================= 1. L'accroche et le parcours d'un dossier ================= */
/* (site.css centre l'ancienne accroche sur toute la hauteur de l'écran : ici, le schéma peut être plus haut que l'écran) */
.une { display: block; min-height: 0; padding-block: clamp(1rem, 2.5vw, 2.5rem) clamp(4rem, 6vw, 6.5rem); }
.une-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.une-texte { container: une / inline-size; min-width: 0; }
/* L'accroche comme la slide 1 : le constat en Plex 700 serré, la réponse en Newsreader italique bleue, un cran plus petite.
   C'est toujours le plus grand texte de la page (règle de page de D-066) : au-dessus des titres de section, du numéro de
   téléphone de la réservation et de l'objet de l'e-mail du lundi, à toutes les largeurs. Côte à côte avec le schéma (dès
   1 200 px), la taille suit la colonne : « votre administratif, » tient sur sa ligne. */
.une-titre { font-size: clamp(2.5rem, 6.6vw, 5rem); }
@media (min-width: 1200px) { .une-titre { font-size: clamp(3.25rem, 12cqi, 5.75rem); } }
/* Les titres de section, nettement sous l'accroche (43 px à 1 440 contre 60, 56 au plus contre 82, 28 au téléphone) */
.titre-2 { font-size: clamp(1.75rem, 1rem + 1.9vw, 3.5rem); }
.une-titre > em { margin-top: 0.08em; font-size: 0.92em; }
/* Le surtitre en deux morceaux (« Service administratif externalisé », « près de Saint-Nazaire ») : sur une ligne quand
   il tient, l'un sous l'autre sinon, sans le point médian (jamais en fin de ligne). Les largeurs sont mesurées. */
.une .surtitre { display: block; }
@media (max-width: 499px), (min-width: 1200px) and (max-width: 1519px) {
  .une .surtitre .ligne-sep { display: none; }
  .une .surtitre .ligne-morceau { display: block; }
}
.une-sous { max-width: min(36rem, var(--mesure)); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.4375rem); }
.une-action { margin-top: clamp(1.5rem, 2.4vw, 2.5rem); }
.rassure { max-width: 30rem; font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.125rem); }
.une-lien { margin-top: 0.5rem; }
/* Sur grand écran (dès 1 200 px), le schéma à droite du titre ; en dessous, le schéma vient sous le titre, sur toute la largeur */
@media (min-width: 1200px) {
  .une-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2.25rem, 4.5%, 6.5rem); }
  .une-texte { padding-top: clamp(1rem, 5vh, 4.5rem); }
}

/* Le parcours d'un dossier (« La ligne », 2026-10-17, à la place du schéma interactif du suivi) : une carte blanche des
   slides. Une carte de dossier avance le long de cinq étapes : les trois premières, c'est MARZEL qui les fait (l'accolade),
   la quatrième est le seul moment bleu (« À vous de décider », « Oui »), la cinquième « Fait ». Horizontale dès que le
   schéma a 34 rem de large (grand écran, tablette), verticale en dessous (téléphone : la carte à gauche, le rail, les noms
   à droite). Cette feuille pose la mise en page et l'image fixe (sans JavaScript, ou en mouvement réduit) : le moment de la
   décision, étapes 1 à 3 faites, « Oui » affiché, « Fait » à venir. Le mouvement est dans parcours-mouvement.css (transform
   et opacity seulement, produite par 09-outils/parcours-minutage.mjs), qui part de cette image. */
.ld {
  container: ld / inline-size;
  --ld-texte: clamp(0.9375rem, 0.8rem + 0.35vw, 1.25rem);
  --ld-petit: clamp(0.8125rem, 0.75rem + 0.14vw, 0.96875rem);
  --ld-mono: clamp(0.8125rem, 0.75rem + 0.1vw, 0.9375rem);
  align-self: center;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 2.5rem);
  border: 1px solid var(--carte-filet);
  border-radius: var(--carte-rayon);
  background: var(--blanc);
  box-shadow: var(--carte-ombre);
  scroll-margin-top: 1rem;
}
.ld-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
/* L'en-tête de carte des slides (« Temps perdu cette semaine ») */
.ld-titre { font: 600 clamp(1.125rem, 1rem + 0.35vw, 1.5rem)/1.25 var(--sans); letter-spacing: -0.015em; color: var(--encre); }

/* La ligne, au téléphone (par défaut) : la voie de la carte à gauche, le rail, les noms des étapes à droite, une rangée par
   étape. --hx et --hy disent dans quel sens la carte avance (ici : vers le bas) ; --d0 à --d4, la distance de chaque étape
   à la première (parcours-mouvement.css place la carte avec). La quatrième rangée est plus haute : le nom sur deux lignes,
   le « Oui », et un intervalle réservé d'avance avant « Fait » (rien ne bouge dans la mise en page). */
.ld-ligne {
  container-type: inline-size;
  position: relative;
  --hx: 0;
  --hy: 1;
  --carte-l: clamp(8.5rem, 44cqi, 11.5rem); /* la largeur de la carte : le titre tient sur deux lignes */
  --ecart: 0.75rem;   /* entre la carte et le rail */
  --point: 2rem;      /* la case du point */
  --rang: 4rem;       /* les étapes 1 à 3 */
  --rang-4: 7rem;     /* « À vous de décider » (deux lignes à 360 px), son « Oui », l'intervalle avant « Fait » */
  --rang-5: 4.25rem;  /* « Fait » : la place de la carte (elle déborde un peu dans la marge du pied) */
  --d0: 0px;
  --d1: var(--rang);
  --d2: calc(var(--rang) * 2);
  --d3: calc(var(--rang) * 3);
  --d4: calc(var(--rang) * 3 + var(--rang-4));
  margin-top: 2.25rem; /* la place du mot « MARZEL », au-dessus de la première étape */
}
.ld-etapes { position: relative; display: grid; grid-template-rows: repeat(3, var(--rang)) var(--rang-4) var(--rang-5); margin: 0; padding: 0; list-style: none; }
.ld-etape { display: grid; grid-template-columns: var(--point) minmax(0, 1fr); column-gap: 0.625rem; align-items: start; padding-left: calc(var(--carte-l) + var(--ecart)); }
.ld-etape:nth-child(-n + 3) { padding-right: 1rem; } /* l'accolade « MARZEL » longe les trois premières */

/* Le point de chaque étape : un rond vide (à venir), la coche à l'encre (fait), le disque bleu (à vous de décider) */
.ld-point { position: relative; display: grid; place-items: center; width: var(--point); height: var(--point); }
.ld-point > * { grid-area: 1 / 1; }
.ld-rond { width: 0.875rem; height: 0.875rem; border: 2px solid var(--bord); border-radius: 50%; background: var(--blanc); }
.ld-fait { width: 1.375rem; height: 1.375rem; }
.ld-fait circle, .ld-fin circle { fill: var(--encre); }
.ld-fait path, .ld-fin path { fill: none; stroke: var(--blanc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ld-decide { display: grid; place-items: center; width: var(--point); height: var(--point); border-radius: 50%; background: var(--bleu); box-shadow: 0 6px 16px -4px rgba(22, 96, 255, 0.55); }
.ld-decide svg { width: 1.375rem; height: 1.375rem; }
.ld-decide path { fill: none; stroke: var(--blanc); stroke-width: 2.2; stroke-linecap: round; }
.ld-decide circle { fill: var(--blanc); }

/* Le nom de l'étape (deux couches superposées pour la quatrième : l'encre et le bleu) */
.ld-corps { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: calc((var(--point) - var(--ld-texte) * 1.3) / 2); }
.ld-nom { display: grid; font: 600 var(--ld-texte)/1.3 var(--sans); letter-spacing: -0.01em; color: var(--encre); text-wrap: balance; }
.ld-nom > * { grid-area: 1 / 1; }
.ld-nom-bleu { color: var(--bleu-texte); }

/* Le « Oui » : l'image d'une réponse, pas un bouton (rien à cliquer, c'est un exemple) ; un contour bleu au repos, qui se
   remplit sous le doigt. Le doigt : un rond translucide cerclé de blanc, posé sur le bord du « Oui » pour le laisser lisible. */
.ld-oui { position: relative; display: inline-grid; place-items: center; margin-top: 0.5rem; min-width: 4rem; height: 2.125rem; padding: 0 1.125rem; border: 1.5px solid var(--bleu); border-radius: 999px; background: var(--blanc); font: 600 var(--ld-texte)/1 var(--sans); color: var(--bleu-texte); pointer-events: none; user-select: none; }
.ld-oui-plein { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: inherit; background: var(--bleu); color: var(--blanc); opacity: 0; }
.ld-touche { position: absolute; z-index: 1; right: -0.875rem; top: calc(50% - 0.375rem); width: 2.125rem; height: 2.125rem; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%; background: rgba(11, 26, 62, 0.16); box-shadow: 0 0 0 1px rgba(11, 26, 62, 0.12), 0 8px 18px -4px rgba(11, 26, 62, 0.32); opacity: 0; }

/* Le rail : gris clair ; ses quatre traits passent à l'encre quand l'étape est passée */
.ld-rail, .ld-trait { position: absolute; left: calc(var(--carte-l) + var(--ecart) + var(--point) / 2 - 1px); width: 2px; }
.ld-rail { top: calc(var(--point) / 2); height: var(--d4); background: var(--filet); }
.ld-trait { top: calc(var(--point) / 2 + var(--de)); height: calc(var(--a) - var(--de)); background: var(--encre); }
.ld-trait[data-seg="1"] { --de: var(--d0); --a: var(--d1); }
.ld-trait[data-seg="2"] { --de: var(--d1); --a: var(--d2); }
.ld-trait[data-seg="3"] { --de: var(--d2); --a: var(--d3); }
.ld-trait[data-seg="4"] { --de: var(--d3); --a: var(--d4); opacity: 0; }

/* L'accolade « MARZEL » : les trois premières étapes, c'est MARZEL qui les fait (« À vous de décider » dit qui décide).
   Au téléphone, un trait le long des noms, à droite, le mot au-dessus ; sur la ligne horizontale, sous les noms. Fixe. */
.ld-marzel { position: absolute; top: calc(var(--point) / 2 - 0.75rem); right: 0; width: 0.5rem; height: calc(var(--d2) + 0.75rem); border: solid var(--encre); border-width: 1.5px 1.5px 1.5px 0; border-radius: 0 4px 4px 0; opacity: 0.62; } /* l'encre à 62 % sur blanc : 5:1 */
.ld-marzel-mot { position: absolute; right: -1.5px; bottom: calc(100% + 0.375rem); font: 500 var(--ld-mono)/1 var(--mono); letter-spacing: 0.06em; color: var(--encre); white-space: nowrap; }

/* La carte du dossier : elle voyage d'une étape à l'autre (parcours-mouvement.css). Les dossiers sont superposés : la carte
   garde la taille du plus long. Dans l'image fixe, elle est sur « À vous de décider ». */
.ld-voie { position: absolute; inset: 0; pointer-events: none; }
.ld-voyage { position: absolute; top: 0; left: 0; width: var(--carte-l); transform: translate(calc(var(--hx) * var(--d3)), calc(var(--hy) * var(--d3))); }
.ld-carte { position: absolute; top: -0.3125rem; left: 0; display: grid; width: var(--carte-l); padding: 0.625rem 0.75rem 0.6875rem; border: 1px solid var(--carte-filet); border-radius: 14px; background: var(--blanc); box-shadow: 0 12px 28px -6px rgba(11, 26, 62, 0.16), 0 2px 6px rgba(11, 26, 62, 0.06); }
/* sa petite pointe vers l'étape */
.ld-carte::after { content: ""; position: absolute; top: calc(var(--point) / 2 + 0.3125rem - 0.4375rem); right: -0.4375rem; width: 0.8125rem; height: 0.8125rem; border: solid var(--carte-filet); border-width: 0 1px 1px 0; background: var(--blanc); transform: rotate(-45deg); }
.ld-dossier { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.ld-dossier[data-n="2"] { opacity: 0; }
.ld-secteur { display: flex; align-items: center; gap: 0.375rem; font: 500 var(--ld-mono)/1.3 var(--mono); color: var(--texte-2); }
.ld-secteur svg { flex: none; width: 0.8125rem; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ld-objet { max-width: 9em; font: 600 var(--ld-texte)/1.25 var(--sans); letter-spacing: -0.01em; color: var(--encre); text-wrap: balance; } /* toujours sur deux lignes : la carte reste pleine */
/* Le point final, à l'arrivée sur « Fait » : une petite coche à l'encre sur la carte (jamais de bleu) */
.ld-fin { position: absolute; right: -0.5rem; bottom: -0.5rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--blanc); opacity: 0; }

/* L'image fixe : étapes 1 à 3 faites, la décision affichée, « Fait » à venir */
.ld-etape .ld-fait { opacity: 1; }
.ld-etape[data-pas="4"] .ld-fait, .ld-etape[data-pas="5"] .ld-fait { opacity: 0; }
.ld-etape[data-pas="4"] .ld-nom-encre { opacity: 0; }
.ld-etape[data-pas="5"] .ld-nom-encre { opacity: 0.62; } /* l'encre à 62 % sur blanc : 5:1, lisible */

/* Grand écran et tablette : la ligne horizontale. La carte au-dessus du rail, les noms dessous. Les points sont espacés de
   --pas, de sorte que la carte, centrée sur le premier puis sur le dernier point, ne dépasse jamais du schéma. */
@container ld (min-width: 34rem) {
  .ld-ligne {
    --hx: 1;
    --hy: 0;
    --carte-l: clamp(11rem, 32cqi, 14rem);
    --voie: clamp(6.5rem, 4.5rem + 4cqi, 7.75rem); /* la hauteur de la voie de la carte, au-dessus du rail */
    --point: 2.25rem;
    --pas: calc((100cqi - var(--carte-l)) / 4);
    --d1: var(--pas);
    --d2: calc(var(--pas) * 2);
    --d3: calc(var(--pas) * 3);
    --d4: calc(var(--pas) * 4);
    margin-top: clamp(1.75rem, 3cqi, 2.5rem);
  }
  .ld-etapes { grid-template-rows: none; grid-template-columns: repeat(5, var(--pas)); margin-inline: calc(var(--carte-l) / 2 - var(--pas) / 2); padding-top: var(--voie); }
  .ld-etape, .ld-etape:nth-child(-n + 3) { display: flex; flex-direction: column; align-items: center; padding: 0 0.25rem; text-align: center; }
  .ld-corps { align-items: center; padding-top: 0.625rem; }
  .ld-oui { margin-top: 0.875rem; height: 2.5rem; padding: 0 1.375rem; }
  .ld-rail, .ld-trait { top: calc(var(--voie) + var(--point) / 2 - 1px); height: 2px; }
  .ld-rail { left: calc(var(--carte-l) / 2); width: var(--d4); }
  .ld-trait { left: calc(var(--carte-l) / 2 + var(--de)); width: calc(var(--a) - var(--de)); }
  .ld-voyage { height: var(--voie); }
  .ld-carte { top: auto; bottom: 1.25rem; padding: 0.875rem 1rem 0.9375rem; border-radius: 16px; }
  .ld-carte::after { top: auto; right: auto; bottom: -0.4375rem; left: calc(50% - 0.40625rem); transform: rotate(45deg); }
  .ld-fin { top: -0.5rem; bottom: auto; }
  .ld-rond { width: 1rem; height: 1rem; }
  .ld-fait, .ld-decide svg { width: 1.5rem; height: 1.5rem; }
  /* L'accolade sous les noms des trois premières étapes (deux lignes au plus), le mot au milieu de son trait */
  .ld-marzel { top: calc(var(--voie) + var(--point) + 0.625rem + var(--ld-texte) * 2.6 + 0.5rem); right: auto; left: calc(var(--carte-l) / 2 - var(--pas) / 2 + 0.75rem); width: calc(var(--pas) * 3 - 1.5rem); height: 0.5rem; border-width: 0 1.5px 1.5px; border-radius: 0 0 4px 4px; }
  .ld-marzel-mot { top: 100%; right: auto; bottom: auto; left: 50%; padding: 0 0.625rem; background: var(--blanc); transform: translate(-50%, -50%); }
}

/* Le pied : ce qu'est vraiment le suivi, en une ligne, et le bouton Pause / Lecture (WCAG 2.2.2 ; montré par accueil.js) */
.ld-pied { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; min-height: calc(2.75rem + 1rem + 1px); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--filet); } /* la place du bouton, réservée : il apparaît sans rien décaler */
.ld-vrai { max-width: 34em; font: 400 var(--ld-petit)/1.45 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.ld-lecture { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 0.4375rem; min-height: 2.75rem; padding: 0 0.9375rem 0 0.75rem; border: 1px solid var(--argent); border-radius: 999px; background: var(--blanc); font: 500 var(--ld-mono)/1 var(--mono); color: var(--encre); cursor: pointer; }
.ld-lecture svg { width: 0.875rem; height: 0.875rem; }
.ld-ic-pause path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ld-ic-lire path { fill: currentColor; }
.ld-ic-lire, .ld-arret .ld-ic-pause { display: none; }
.ld-arret .ld-ic-lire { display: block; }
@media (hover: hover) { .ld-lecture:hover { border-color: var(--texte-2); } }
/* Au téléphone, le bouton ne garde que son icône (son nom reste dit aux lecteurs d'écran) : la phrase tient sur deux lignes */
@container ld (max-width: 30rem) {
  .ld-lecture { width: 2.75rem; padding: 0; }
  .ld-lecture-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (forced-colors: active) {
  .ld-carte, .ld-lecture { border-color: CanvasText; }
  .ld-decide { border: 1px solid CanvasText; }
}

/* ================= 2. Ce que vous pouvez nous confier ================= */
.taches-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 1.6vw, 2rem); margin-top: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 1100px) {
  .taches-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tache-non { grid-column: span 2; }
  .non-liste { columns: 2; column-gap: clamp(2rem, 3vw, 3.5rem); }
}
.tache { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.375rem, 2.2vw, 2.5rem); }
.tache-num { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.tache h3 { margin-top: 0.4rem; font: var(--titre-graisse) clamp(1.375rem, 0.95rem + 0.85vw, 2rem)/1.08 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.tache-exemple { max-width: var(--mesure); margin-top: 1rem; font: 400 var(--texte-taille)/1.5 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.tache-exemple .exemple { display: table; margin-bottom: 0.5rem; }
.tache-rubrique { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--filet); font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--encre); }
.tache-texte { max-width: var(--mesure); margin-top: 0.375rem; font: 400 var(--texte-taille)/1.5 var(--sans); color: var(--encre); text-wrap: pretty; }
.tache-detail { margin-top: 0.75rem; }
.tache-detail summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font: 600 var(--texte-taille)/1.35 var(--sans); color: var(--encre); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; list-style: none; }
.tache-detail summary::-webkit-details-marker { display: none; }
.tache-detail summary::after { content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tache-detail[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.tache-detail .tache-rubrique { margin-top: 0.75rem; }
.tache-detail .tache-texte { color: var(--texte-2); }
.tache-confier { align-self: flex-start; margin-top: auto; padding-top: 0.75rem; }
/* Ce que MARZEL ne fait pas : encre sur blanc, sans bleu */
.tache-non { border-color: var(--argent); box-shadow: none; }
.tache-non h3 { margin-top: 0; }
.tache-non > .tache-texte { margin-top: 0.75rem; color: var(--texte-2); }
.non-liste { margin-top: 1rem; }
.non-liste li { position: relative; max-width: var(--mesure); padding-left: 1.5rem; margin-bottom: 0.625rem; font: 400 var(--texte-taille)/1.45 var(--sans); color: var(--encre); break-inside: avoid; text-wrap: pretty; }
.non-liste li::before { content: ""; position: absolute; left: 0.125rem; top: 0.72em; width: 0.75rem; height: 2px; background: var(--encre); }
.non-fin { max-width: var(--mesure); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--filet); font: 600 var(--texte-taille)/1.45 var(--sans); color: var(--encre); }
.non-fin a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* ================= 3. Vos outils restent ================= */
.manieres { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 2rem); margin-top: clamp(2.5rem, 4vw, 4rem); }
.maniere { min-width: 0; padding: clamp(1.375rem, 2.2vw, 2.5rem); }
@media (min-width: 1000px) { .manieres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 999px) {
  .maniere { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
  .maniere .tuile { grid-row: 1 / span 2; margin-bottom: 0; }
  .maniere p { margin-top: 0.5rem; }
}
.maniere h3 { font: var(--titre-graisse) clamp(1.375rem, 0.95rem + 0.85vw, 2rem)/1.08 var(--titre-police); letter-spacing: var(--moyen-interlettrage); }
.maniere p { max-width: var(--mesure); margin-top: 0.75rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.adresse-exemple { font: 500 0.94em/1 var(--mono); color: var(--encre); white-space: nowrap; }
/* Le chemin d'un document : quatre étapes de gauche à droite, au trait ; le chemin de MARZEL en bleu */
.chemin { margin-top: clamp(1rem, 1.6vw, 2rem); padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem); }
.chemin-etapes { --rond: clamp(56px, 2.5rem + 1.6vw, 84px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chemin-etape { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: 0.75rem; text-align: center; }
.chemin-num { font: 500 var(--mono-taille)/1 var(--mono); color: var(--texte-2); }
.marzel .chemin-num { color: var(--bleu-texte); }
.chemin-icone { position: relative; z-index: 1; width: var(--rond); height: var(--rond); margin-top: 0.75rem; padding: calc(var(--rond) * 0.22); border: 2px solid var(--encre); border-radius: 50%; background: var(--blanc); fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.marzel .chemin-icone { border-color: var(--bleu); background: var(--bleu); stroke: var(--blanc); box-shadow: var(--tuile-ombre); }
/* Le trait vers l'étape suivante, avec sa pointe : encre jusqu'à l'adresse MARZEL, bleu ensuite */
.chemin-etape:not(:last-child)::after { content: ""; position: absolute; top: calc(0.75rem + 1em + var(--rond) / 2 - 1px); left: calc(50% + var(--rond) / 2 + 0.5rem); right: calc(-50% + var(--rond) / 2 + 0.75rem); height: 2px; background: var(--encre); }
.chemin-etape:not(:last-child)::before { content: ""; position: absolute; top: calc(0.75rem + 1em + var(--rond) / 2 - 5px); right: calc(-50% + var(--rond) / 2 + 0.6rem); width: 8px; height: 8px; border-top: 2px solid var(--encre); border-right: 2px solid var(--encre); transform: rotate(45deg); }
.chemin-etape.marzel:not(:last-child)::after { background: var(--bleu); }
.chemin-etape.marzel:not(:last-child)::before { border-color: var(--bleu); }
.chemin-etape p { max-width: 15rem; margin-top: 1rem; font: 600 clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem)/1.3 var(--sans); letter-spacing: -0.015em; color: var(--encre); text-wrap: balance; }
.chemin-etape p.chemin-vous { margin-top: 0.875rem; padding: 0.5rem 0.875rem; border: 1.5px solid var(--bleu); border-radius: 12px; background: var(--bleu-pale); font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem); color: var(--bleu-texte); }
.cote-client { margin-top: clamp(1rem, 1.6vw, 2rem); padding: clamp(1.375rem, 2.4vw, 2.75rem); }
.cote-client h3 { font: var(--titre-graisse) clamp(1.375rem, 0.95rem + 0.85vw, 2rem)/1.08 var(--titre-police); letter-spacing: var(--moyen-interlettrage); }
.cote-client .coches { margin-top: 1.25rem; }
@media (min-width: 900px) {
  .cote-client .coches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(2rem, 4vw, 4rem); }
}
/* La fin de la section : la phrase, et la réponse à « Et mes salariés ? » */
.outils-fin { margin-top: clamp(2.5rem, 4.5vw, 4.5rem); }
.outils-fin .titre-3 { max-width: 22em; }
.outils-fin p { max-width: var(--mesure); margin-top: clamp(0.875rem, 1.2vw, 1.25rem); font: 400 calc(var(--texte-taille) * 1.08)/1.55 var(--sans); letter-spacing: -0.005em; color: var(--texte-2); text-wrap: pretty; }

/* ================= 4. Qui fait quoi ================= */
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 1.6vw, 2rem); margin-top: clamp(2.5rem, 4vw, 4rem); }
.colonne { min-width: 0; padding: clamp(1.375rem, 2.4vw, 2.75rem); }
.colonne-titre { margin-bottom: 1.25rem; font: var(--titre-graisse) clamp(1.75rem, 1.2rem + 1.2vw, 2.75rem)/1 var(--titre-police); letter-spacing: var(--titre-interlettrage); }
.colonne-marzel .colonne-titre { color: var(--bleu-texte); }
.puces-vous { display: flex; flex-direction: column; gap: 1rem; }
.puces-vous li { position: relative; max-width: calc(var(--mesure) + 2.5em); padding-left: calc(var(--texte-taille) * 1.45 + 0.875rem); font: 400 var(--texte-taille)/1.5 var(--sans); color: var(--encre); text-wrap: pretty; }
.puces-vous li::before { content: ""; position: absolute; left: 0; top: 0.08em; width: calc(var(--texte-taille) * 1.45 - 4px); height: calc(var(--texte-taille) * 1.45 - 4px); border: 2px solid var(--encre); border-radius: 50%; }
.puces-vous li::after { content: ""; position: absolute; left: calc(var(--texte-taille) * 0.725 - 4px); top: calc(0.08em + var(--texte-taille) * 0.725 - 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--encre); }
.garde-fous { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 2rem); margin-top: clamp(1rem, 1.6vw, 2rem); }
@media (min-width: 1000px) { .garde-fous { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.garde-fou { min-width: 0; padding: clamp(1.375rem, 2.2vw, 2.5rem); }
.garde-fou h3 { font: var(--titre-graisse) clamp(1.375rem, 0.95rem + 0.85vw, 2rem)/1.08 var(--titre-police); letter-spacing: var(--moyen-interlettrage); }
.garde-fou p { max-width: var(--mesure); margin-top: 0.75rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.garde-fou p:has(.lien-texte) { margin-top: 0.5rem; }
/* Tablette (700 à 999 px), une carte par rangée : le titre à gauche, le texte à droite (la carte se remplit, la mesure reste) */
@media (min-width: 700px) and (max-width: 999px) {
  .garde-fou { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
  .garde-fou h3 { grid-row: 1 / span 2; }
  .garde-fou p, .garde-fou p:has(.lien-texte) { grid-column: 2; margin-top: 0; }
  .garde-fou p + p { margin-top: 0.5rem; }
}
.carte-valentin { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; margin-top: clamp(1rem, 1.6vw, 2rem); padding: clamp(1.375rem, 2.4vw, 2.75rem); }
.carte-valentin img { grid-row: 1 / span 2; width: clamp(44px, 2rem + 1.5vw, 64px); height: auto; }
.carte-valentin-qui { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.carte-valentin-texte p:not(.carte-valentin-qui) { max-width: var(--mesure); margin-top: 0.625rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--encre); text-wrap: pretty; }
.carte-valentin-tel { grid-column: 2; margin-top: 0.875rem; font: 400 var(--texte-taille)/1.45 var(--sans); color: var(--texte-2); }
.carte-valentin-tel a { display: inline-block; font: 700 clamp(1.375rem, 1rem + 0.9vw, 2.25rem)/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--encre); text-decoration: none; }
.carte-valentin-tel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.carte-valentin-tel span { display: block; margin-top: 0.25rem; }
@media (min-width: 900px) {
  .carte-valentin { grid-template-columns: auto auto minmax(0, 1fr); column-gap: clamp(1.5rem, 2.5vw, 3rem); }
  .carte-valentin img { grid-row: auto; }
  .carte-valentin-tel { grid-column: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 0 0 clamp(0.5rem, 2vw, 2.5rem); padding-left: clamp(1.5rem, 2.5vw, 3rem); border-left: 1px solid var(--filet); text-align: center; }
}

/* ================= 5. Le suivi chaque semaine : l'e-mail du lundi ================= */
.suivi-section .titre-2 { max-width: 20em; }
.suivi-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(1.25rem, 1.6vw, 1.75rem); }
@media (min-width: 1100px) {
  .suivi-grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .suivi-texte { position: sticky; top: 1.5rem; }
}
.suivi-texte .chapeau { margin-top: 0; }
.suivi-legende { max-width: var(--mesure); margin-top: 1rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.suivi-texte p:last-child { margin-top: 0.75rem; }
.courriel-bloc { max-width: 46rem; margin: 0; min-width: 0; }
.courriel-legende { margin-bottom: 0.875rem; font: 600 max(1.0625rem, var(--texte-taille))/1.3 var(--sans); letter-spacing: -0.01em; color: var(--texte-2); text-wrap: pretty; }
.courriel { padding: clamp(1.25rem, 2.4vw, 2.5rem); }
.courriel-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.courriel-date { font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--texte-2); }
.courriel-qui { margin-top: 0.375rem; font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--encre); }
.courriel-entete { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--filet); }
.courriel-entete > div { display: flex; gap: 0.75rem; align-items: baseline; }
.courriel-entete dt { flex: none; width: 3.5rem; font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--texte-2); }
.courriel-entete dd { margin: 0; font: 400 var(--texte-taille)/1.4 var(--sans); color: var(--encre); }
.courriel-objet { margin-top: 0.375rem; }
.courriel-objet dd { font: 700 clamp(1.375rem, 1rem + 1vw, 2.25rem)/1.1 var(--sans); letter-spacing: -0.035em; }
.courriel-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.125rem; }
.courriel-compteurs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; padding: 0.625rem 0.75rem; border-radius: 14px; background: var(--fond); font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--encre); }
.courriel-compteurs li[data-etat="decider"] { background: var(--bleu-pale); color: var(--bleu-texte); }
.courriel-compteurs strong { margin-left: auto; font: 700 clamp(1.375rem, 1.1rem + 0.6vw, 2rem)/1 var(--sans); letter-spacing: -0.03em; color: var(--encre); }
.courriel-corps { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--encre); }
.courriel-corps > p + p { margin-top: 0.375rem; }
.courriel-corps p, .courriel-corps li { max-width: var(--mesure); }
.courriel-partie { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem !important; font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--encre); }
.courriel-partie[data-etat="decider"] { color: var(--bleu-texte); }
.courriel-corps ul { margin-top: 0.5rem; }
.courriel-corps ul li { position: relative; padding: 0.5rem 0 0.5rem 1.25rem; border-top: 1px solid var(--filet); text-wrap: pretty; }
.courriel-corps ul li::before { content: ""; position: absolute; left: 0.125rem; top: 1.25em; width: 0.5rem; height: 2px; background: var(--texte-2); }
.courriel-note { margin-top: 1rem !important; color: var(--texte-2); }
.faux-lien { color: var(--bleu-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.courriel-signature { margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid var(--filet); font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--texte-2); }

/* ================= 6. Vos données ================= */
.donnees-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .donnees-grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.donnees-lien { margin-top: 1.25rem; }
.carte-coches { padding: clamp(1.375rem, 2.4vw, 2.75rem); gap: 1.125rem; }
.carte-coches .lien-texte { display: inline; min-height: 0; font-size: inherit; }

/* ================= 7. Comment on commence : cinq cartes, la nature du prix dessous ================= */
.pas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 4vw, 4rem); }
.pas-col { display: flex; flex-direction: column; min-width: 0; }
.pas-carte { flex: 1; min-width: 0; padding: clamp(1.25rem, 1.8vw, 2rem); }
.pas-num { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.pas-carte h3 { margin-top: 0.4rem; font: var(--titre-graisse) clamp(1.25rem, 0.95rem + 0.6vw, 1.75rem)/1.1 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.pas-carte p:not(.pas-num) { max-width: var(--mesure); margin-top: 0.625rem; font: 400 var(--texte-taille)/1.5 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.pas-paire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; flex: 1; }
.pas-prix { margin-top: 0.75rem; padding-inline: 0.25rem; font: 500 var(--mono-taille)/1.3 var(--mono); color: var(--encre); text-align: center; }
/* Une seule étiquette pour les cartes 3 et 4 : une accolade sous les deux */
.pas-prix-commun { position: relative; padding-top: 1rem; }
.pas-prix-commun::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 0.5rem; border: 2px solid var(--bleu); border-top: 0; border-radius: 0 0 10px 10px; }
.pas-fin { max-width: var(--mesure); margin-top: clamp(1.75rem, 3vw, 2.75rem); font: 600 clamp(1.125rem, 0.95rem + 0.5vw, 1.5rem)/1.35 var(--sans); letter-spacing: -0.015em; color: var(--encre); text-wrap: pretty; }
@media (min-width: 900px) {
  .pas { grid-template-columns: minmax(0, 1fr) clamp(12rem, 17vw, 19rem); column-gap: clamp(1rem, 2vw, 2.5rem); row-gap: clamp(0.75rem, 1vw, 1.125rem); }
  .pas-col, .pas-double, .pas-paire { display: contents; }
  .pas-carte { grid-column: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
  .pas-carte p:not(.pas-num) { margin-top: 0; }
  .pas-carte h3 { font-size: clamp(1.375rem, 0.95rem + 0.75vw, 2rem); }
  .pas-prix { grid-column: 2; align-self: center; margin-top: 0; padding-inline: 0; text-align: left; }
  .pas [data-r="1"] { grid-row: 1; } .pas [data-r="2"] { grid-row: 2; } .pas [data-r="3"] { grid-row: 3; } .pas [data-r="4"] { grid-row: 4; } .pas [data-r="5"] { grid-row: 5; }
  .pas-prix-commun { grid-row: 3 / span 2; align-self: stretch; display: flex; align-items: center; padding: 0 0 0 1.5rem; }
  .pas-prix-commun::before { left: 0; right: auto; top: 1.25rem; bottom: 1.25rem; width: 0.625rem; height: auto; border: 2px solid var(--bleu); border-left: 0; border-radius: 0 12px 12px 0; }
}
/* Au-dessous de 900 px : une carte par étape, la nature du prix en pied de carte (elle se lit avec sa carte, pas avec la
   suivante) ; les cartes 3 et 4 dans un même cadre bleu pâle, leur étiquette commune en bas du cadre */
@media (max-width: 899px) {
  .pas { gap: clamp(1rem, 2.5vw, 1.5rem); }
  .pas-col:not(.pas-double) { overflow: hidden; border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--blanc); box-shadow: var(--carte-ombre); }
  .pas-col:not(.pas-double) > .pas-carte { border: 0; border-radius: 0; box-shadow: none; }
  /* Dès 700 px, le titre à gauche et le texte à droite, comme au-dessus de 900 px */
  @media (min-width: 700px) {
    .pas-carte { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
    .pas-carte p:not(.pas-num) { margin-top: 0; }
  }
  .pas-col:not(.pas-double) > .pas-prix { margin: 0; padding: 0.75rem clamp(1.25rem, 1.8vw, 2rem) 0.875rem; border-top: 1px solid var(--filet); background: var(--fond); text-align: left; color: var(--bleu-texte); }
  .pas-double { padding: 0.625rem; border-radius: calc(var(--carte-rayon) + 0.375rem); background: var(--bleu-pale); }
  .pas-paire { gap: 0.625rem; }
  .pas-prix-commun { margin-top: 0; padding: 0.75rem 0.75rem 0.25rem; text-align: left; color: var(--bleu-texte); }
  .pas-prix-commun::before { display: none; }
}

/* ================= 8. La réservation (slide 5) ================= */
.suite { display: flex; flex-direction: column; gap: 1.125rem; max-width: 40rem; margin-top: 2.5rem; padding: clamp(1.375rem, 2.2vw, 2.25rem); }
.suite li { display: flex; align-items: center; gap: 1rem; font: 400 max(1.0625rem, var(--texte-taille))/1.45 var(--sans); text-wrap: pretty; }
.suite li > span { max-width: var(--mesure); }
.reserver-pied { max-width: var(--mesure); margin-inline: auto; }
.suite .coche { width: calc(max(1.0625rem, var(--texte-taille)) * 1.45); height: calc(max(1.0625rem, var(--texte-taille)) * 1.45); margin-top: 0; }
.appel { margin-top: 2.5rem; }
.appel-qui { font: 400 1.125rem/1.4 var(--sans); color: var(--texte-2); }
.appel-tel { margin-top: 0.25rem; font: 700 clamp(2rem, 1.3rem + 1.3vw, 3rem)/1.02 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.appel-tel a, .appel-mail a { text-decoration: none; }
.appel-tel a:hover, .appel-mail a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.appel-mail { margin-top: 0.5rem; font: 600 clamp(1.125rem, 1rem + 0.45vw, 1.5rem)/1.3 var(--sans); letter-spacing: -0.01em; color: var(--bleu-texte); }
.appel-mail a { display: inline-block; padding-block: 0.25rem; }
@media (min-width: 900px) {
  #diagnostic .diag-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "etiquette etiquette" "titre titre" "suite form" "appel form" "valentin form"; column-gap: 3rem; row-gap: 0; align-items: start; }
  #diagnostic .diag-texte { display: contents; }
  #diagnostic .etiquette { grid-area: etiquette; }
  #diagnostic .diag-texte > .titre-2 { grid-area: titre; max-width: 24em; margin-bottom: 3rem; }
  #diagnostic .suite { grid-area: suite; max-width: none; margin-top: 0; }
  #diagnostic .appel { grid-area: appel; }
  #diagnostic .valentin { grid-area: valentin; }
  #diagnostic .reserver { grid-area: form; }
}
@media (min-width: 1100px) { #diagnostic .diag-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: clamp(3rem, 7%, 9rem); } }
@media (min-width: 1600px) {
  #diagnostic .suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 2.5%, 3rem); max-width: none; }
  #diagnostic .suite li { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
}

/* ================= 9. Questions fréquentes : la liste à filets, dans une carte ================= */
.questions .wrap { max-width: none; }
.questions-liste { padding-inline: clamp(1.25rem, 2.4vw, 2.5rem); }
.question:last-child { border-bottom: 0; }
.questions .titre-2 { margin-bottom: 2.5rem; }
.question p { max-width: var(--mesure); }
@media (min-width: 1100px) {
  .questions-liste { max-width: 56rem; }
  .questions .wrap { display: grid; grid-template-columns: clamp(16rem, 24% + 8rem, 34rem) minmax(0, 56rem); justify-content: space-between; column-gap: 3rem; align-items: start; }
  .questions .titre-2 { margin-bottom: 0; }
}

/* ================= Tailles d'écran ================= */
@media (max-width: 899px) {
  .chemin-etapes { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .chemin-etape { display: grid; grid-template-columns: var(--rond) minmax(0, 1fr); grid-template-rows: var(--rond) auto; column-gap: 1rem; padding-inline: 0; text-align: left; }
  .chemin-num { position: absolute; left: -0.375rem; top: -0.375rem; z-index: 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet); font-size: 0.75rem; }
  .chemin-icone { grid-row: 1; grid-column: 1; margin-top: 0; }
  .chemin-etape p { grid-row: 1; grid-column: 2; align-self: center; max-width: none; margin-top: 0; }
  .chemin-etape p.chemin-vous { grid-row: 2; grid-column: 2; align-self: start; justify-self: start; margin-top: 0.5rem; }
  .chemin-etape:not(:last-child)::after { top: calc(var(--rond) + 0.25rem); bottom: -1.125rem; left: calc(var(--rond) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .chemin-etape:not(:last-child)::before { top: auto; bottom: -1.125rem; left: calc(var(--rond) / 2 - 4px); right: auto; transform: rotate(135deg); }
}
@media (max-width: 599px) {
  .une { padding-top: 18px; }
  .une-titre { font-size: min(2.625rem, calc((100vw - 2.5rem) / 8.5)); text-wrap: wrap; }
  .une-grille { gap: 1.75rem; }
  .ld { margin-inline: -0.5rem; }
  .courriel-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-valentin { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .carte-valentin img { grid-row: auto; }
  .carte-valentin-tel { grid-column: 1; margin-top: 0; }
  .suite li { font-size: 1.0625rem; }
}