/* ==========================================================================
   Duramentu, vitrine : feuille de style unique
   ==========================================================================

   Depend de tokens.css, charge AVANT ce fichier. Aucune couleur en dur ici :
   pas un seul hexadecimal, pas un "white", pas un "black". Une valeur en dur
   est un bogue de theme qui ne se voit qu'en sombre.

   Ordre : reset, base, primitives, puis sections. Les sections n'assemblent
   que des primitives existantes. Si une section a besoin d'une geometrie qui
   n'est pas ici, c'est une primitive qui manque.
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Les barres de defilement reprennent les surfaces et la couleur active du
   theme. Le pouce reste fin, mais suffisamment contraste dans les deux modes. */
* {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--accent) 72%, var(--color-content-muted))
    color-mix(in srgb, var(--color-surface-sunken) 84%, transparent);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface-sunken) 84%, transparent);
}
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 72%, var(--color-content-muted));
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-action);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: var(--color-surface-sunken); }
*::-webkit-scrollbar-button { display: none; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
  color: var(--color-content);
  /* Fond EXPLICITE : un body transparent laisse apparaitre le blanc du
     navigateur, ce qui saute aux yeux en sombre. */
  background: var(--color-brand-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Aucun debordement horizontal du corps de page, a aucune largeur. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
[disabled], .is-disabled { cursor: not-allowed; }

h1, h2, h3, h4 {
  color: var(--color-content-strong);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: var(--leading-heading);
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ==========================================================================
   2. FOCUS : un seul anneau visible par controle
   ==========================================================================
   Sur les boutons et les liens, un outline. Sur les champs, une ombre et une
   bordure d'accent, SANS outline : deux anneaux superposes sur un champ, c'est
   toujours une regle heritee de trop. Ne pas empiler, supprimer. */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

:where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

input, select, textarea, [type="checkbox"], [type="radio"] {
  accent-color: var(--accent-action);
}

/* Lien d'evitement. position:fixed et non absolute : en absolute, un retour
   au debut de page par Maj+Tab depuis le milieu du document affichait le lien
   tout en haut du DOCUMENT, donc hors de l'ecran. */
.skip {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--accent-action);
  color: var(--on-accent);
  font-size: var(--text-body-sm);
  font-weight: 600;
  border-radius: 0 0 var(--radius-control) 0;
}
.skip:focus { top: 0; }

/* <main> porte tabindex="-1" pour que le lien d'evitement deplace vraiment le
   focus (sans lui, plusieurs navigateurs ne deplacent que le defilement). Ce
   focus est programmatique : il ne doit pas dessiner d'anneau. La regle est
   plus specifique que le :where() de la section 2, qui vaut 0. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

:root { --maxw: 1180px; --nav-h: 68px; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--space-gutter);
}

/* Toutes les sections sur --color-surface, sans alternance de fond. Ce n'est
   pas un choix esthetique : mesures a l'appui, --color-content-muted tombe a
   4.23 sur --color-brand-canvas et la terre cuite des emphases de titre a
   2.98 sur --color-surface-sunken. Seule --color-surface tient les deux
   seuils en clair. Le rythme vient donc des filets, pas du fond.
   --color-brand-canvas reste le fond du body, derriere le contenu. */
main > section { padding: var(--space-section) 0; background: var(--color-surface); }
main > section + section { border-top: 1px solid var(--color-brand-separator); }

/* ==========================================================================
   4. PRIMITIVES
   ==========================================================================
   Recopiees du produit. Ne pas les redecliner section par section. */

/* --- 4.1 Pastille -------------------------------------------------------
   La line-height fixe n'est pas decorative : sans elle, une pastille herite
   de l'interligne du bloc et devient plus epaisse que sa voisine. Toutes les
   pastilles d'un meme bloc doivent avoir exactement la meme hauteur. */

.badge, .feature-tag, .plan-tag, .vision-eyebrow, .fil-label, .crumb {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: .18rem .5rem;
  font-size: var(--text-micro);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Variante accent, la plus courante */
.vision-eyebrow, .fil-label, .plan-tag, .crumb {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Variante d'etat : teinte douce et texte colore, jamais d'aplat sature. */
.badge-success { background: var(--color-state-success-bg); color: var(--color-state-success-fg); border-color: var(--color-state-success-border); }
.badge-warning { background: var(--color-state-warning-bg); color: var(--color-state-warning-fg); border-color: var(--color-state-warning-border); }
.badge-danger  { background: var(--color-state-danger-bg);  color: var(--color-state-danger-fg);  border-color: var(--color-state-danger-border); }
/* Seule variante de pastille encore en vert sauge, parce que c'est ainsi que
   la charte definit l'etat "info" et que les etats metier ne suivent jamais
   l'accent. Aucune page de la vitrine ne l'emploie aujourd'hui : si une
   pastille verte apparait quelque part, c'est cette classe qui a ete posee
   par erreur a la place de la variante d'accent. */
.badge-info    { background: var(--color-state-info-bg);    color: var(--color-state-info-fg);    border-color: var(--color-state-info-border); }
.badge-neutral { background: var(--color-brand-beige); color: var(--color-content-muted); border-color: var(--color-brand-line); }

/* Terre cuite : accent editorial ponctuel, JAMAIS une couleur d'action. */
.feature-tag.new {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}
.feature-tag .d {
  width: 5px; height: 5px; border-radius: var(--radius-pill);
  background: currentColor;
}
/* --- 4.2 Boutons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1.15rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent-action);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-outline {
  background: var(--color-surface);
  border-color: var(--color-brand-line);
  color: var(--color-content);
}
.btn-outline:hover { background: var(--color-brand-beige); color: var(--color-content-strong); }

.btn-sm { padding: .45rem .8rem; font-size: var(--text-caption); }
.btn-lg { padding: .85rem 1.5rem; font-size: var(--text-body); }

.btn .arrow-r { width: 16px; height: 16px; flex-shrink: 0; }

/* --- 4.3 Carte ----------------------------------------------------------- */

.card, .ia-pillar, .plan, .contact-form, .ia-verify, .plans-faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-brand-line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.ia-pillar {
  position: relative;
  padding: 1.35rem;
  transition: box-shadow var(--motion-base), border-color var(--motion-base);
}
.ia-pillar:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand-line);
}

.ia-pillar h3 {
  font-size: var(--text-title);
  margin: .85rem 0 .35rem;
}
.ia-pillar p {
  font-size: var(--text-body-sm);
  color: var(--color-content-muted);
  line-height: var(--leading-compact);
}

/* --- 4.4 Tuile d'icone ---------------------------------------------------
   Le motif d'identite du produit. Geometrie recopiee telle quelle : 2.5rem de
   cote, rayon .625rem, icone 1.125rem, espace de .85rem avec le texte. */

.icon-tile, .ia-pillar-ic, .ia-verify-ic, .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-tile-size);
  height: var(--icon-tile-size);
  border-radius: .625rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.icon-tile svg, .ia-pillar-ic svg, .ia-verify-ic svg, .ic svg {
  width: var(--icon-glyph-size);
  height: var(--icon-glyph-size);
  stroke-width: 1.8;
}

/* --- 4.5 En-tete de section ---------------------------------------------
   Le meme bloc partout, a la meme place, sans variation d'espacement d'une
   section a l'autre. */

.section-header, .ia-head { max-width: var(--measure-copy); margin-bottom: var(--space-heading); }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-title, .ia-title, .vision-title {
  color: var(--color-content-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-page);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
}
.section-title em, .ia-title em, .vision-title em, .hero h1 em {
  font-style: normal;
  /* L'emphase suit l'ACCENT, comme tout le reste du site. Elle etait en terre
     cuite tant que la vitrine portait l'accent "defaut" : ce bleu nuit est
     quasi noir en clair, l'emphase y devenait invisible. Avec un accent
     colore, la terre cuite n'a plus lieu d'etre ici et introduisait une
     troisieme couleur sans raison.
     Mesure sur prune : 8.24 en clair, 7.70 en sombre, donc valide meme a une
     taille de texte courant, contrairement a la terre cuite (3.20). */
  color: var(--accent-strong);
}

.section-sub, .ia-lead, .fpanel-desc {
  max-width: var(--measure-copy);
  font-size: var(--text-body);
  color: var(--color-content-muted);
  margin-top: var(--space-copy);
  line-height: var(--leading-copy);
}

.section-subtitle {
  max-width: var(--measure-wide);
  margin-top: .45rem;
  color: var(--accent-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.24;
  text-wrap: balance;
}
.section-subtitle em {
  color: var(--accent-strong);
  font-style: normal;
}

/* ==========================================================================
   5. EN-TETE ET BASCULE DE THEME
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-brand-line-soft);
}

.nav-inner {
  /* Pleine largeur, et non centree sur --maxw : la marque se cale au bord
     gauche de l'ecran et les deux actions au bord droit, quelle que soit la
     largeur. Centree, la barre laissait plusieurs centaines de pixels de vide
     de chaque cote sur grand ecran et les boutons flottaient au milieu. */
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 2.6vw, 2.5rem);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* VERROU DE MARQUE. La marque, puis le mot compose en texte reel : le
   logotype dessine n'existe pas, on ne fige donc rien en image. Hauteur de
   marque = 1,42 x la taille du mot, ecart = 0,52 x la taille du mot. A 19 px
   de texte : 27 px et 10 px. Le line-height:1 ramene la boite du texte a sa
   hauteur de capitale, ce qui aligne le mot sur la marque sans decalage
   arbitraire ; ne pas laisser le mot reprendre l'interligne du body.
   Ni arrondi ni cadre : la panse du D est deja son contenant. */
.nav-logo, .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-content-strong);
  flex-shrink: 0;
}
.nav-logo:hover, .footer-logo:hover { text-decoration: none; }
.nav-logo .mark, .footer-logo .mark {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  /* Recoloration par heritage currentColor uniquement : jamais de filter,
     d'opacity ni de mix-blend-mode. */
  color: var(--accent-strong);
}
.wordmark {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  /* "Suggestions d'actions" passait a deux lignes des que la barre se serrait,
     ce qui desalignait toute la rangee. Un lien de navigation tient sur une
     ligne ou disparait dans le menu, jamais entre les deux. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--accent-strong); text-decoration: none; }

.nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Bascule de theme : 32 px de cible visuelle sur ordinateur, zone tactile
   portee a 44 px par le rembourrage sur mobile, jamais par la taille visuelle.
   C'est un vrai <button>, pas une <div> cliquable. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-control);
  /* Sans cadre. La bordure est conservee en transparent pour que le survol ne
     decale rien. L'icone et l'etiquette accessible suffisent a identifier le
     bouton, et l'anneau de focus reste pose par :focus-visible. */
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-content-muted);
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.theme-toggle:hover { background: var(--color-brand-beige); color: var(--accent-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Une seule des deux icones est visible, selon le theme rendu. Pilote par
   [data-theme] et non par prefers-color-scheme : une media query suivrait le
   systeme et ignorerait le bouton. */
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }

/* Meme filet que pour les couleurs : sans JavaScript, data-theme n'est jamais
   pose et le bouton afficherait un soleil sur une page sombre. La garde
   :not([data-theme="light"]) reste indispensable, sinon un visiteur ayant
   choisi le clair verrait une lune. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  color: var(--color-content);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Le lien de retour est desormais enveloppe dans un <nav> pour porter le
   repere de navigation des pages legales. Le <nav> reprend la boite que le
   lien occupait comme element de la rangee : sans cette regle, le lien
   redevient inline et son icone se recale sur la ligne de base. */
.site-nav .nav-actions > nav { display: inline-flex; align-items: center; }
.nav-back { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-content-muted); }

.dc-migrated .dcv-002{width:100%;  margin:0 auto; background:var(--color-brand-canvas)}
.dc-migrated .dcv-003{position:relative; overflow:hidden; background:radial-gradient(900px 620px at 8% 14%, color-mix(in srgb, var(--duo-petrole) 24%, transparent), transparent 62%), radial-gradient(1100px 760px at 78% 66%, color-mix(in srgb, var(--duo-indigo) 32%, transparent), transparent 68%), radial-gradient(700px 560px at 100% 22%, color-mix(in srgb, var(--duo-petrole) 26%, transparent), transparent 70%), linear-gradient(100deg, var(--accent-tint) 30%, color-mix(in srgb, var(--duo-indigo) 12%, var(--accent-tint))); border-bottom:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-004{position:relative; max-width:1180px; margin:0 auto; padding:6.5rem 1.5rem 5rem}
.dc-migrated .dcv-005{position:relative; z-index:2; max-width:540px}
.dc-migrated .dcv-007{font-family:var(--font-display-cozy); font-size:var(--text-display); font-weight:700; line-height:1.16; margin:0; color:var(--color-content-strong)}
.dc-migrated .dcv-008{margin-top:1.1rem; font-size:var(--text-title); line-height:1.6; color:var(--color-content)}
.dc-migrated .dcv-009{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
.dc-migrated .dcv-010{position:absolute; top:128px; right:-320px; width:900px; perspective:1900px; z-index:0}
.dc-migrated .dcv-011{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-1deg); transform-style:preserve-3d; will-change:transform}
.dc-migrated .dcv-012{border-radius:var(--radius-modal); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-brand-line); box-shadow:0 40px 90px color-mix(in srgb, var(--color-content-strong) 22%, transparent)}
.dc-migrated .dcv-013{display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:var(--color-surface-sunken); border-bottom:1px solid var(--color-brand-separator)}
.dc-migrated .dcv-014{color:var(--accent-strong)}
.dc-migrated .dcv-015{font-size:var(--text-body-sm); font-weight:700; color:var(--color-content-strong)}
.dc-migrated .dcv-016{padding:.15rem .45rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-017{flex:1}
.dc-migrated .dcv-018{color:var(--color-content-soft)}
.dc-migrated .dcv-019{display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; text-align:center; font-variant-numeric:tabular-nums; width:22px; height:22px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:700}
.dc-migrated .dcv-020{display:grid; grid-template-columns:186px 1fr; min-height:572px}
.dc-migrated .dcv-021{display:flex; flex-direction:column; gap:.1rem; padding:.7rem .55rem; background:var(--color-surface-sunken); border-right:1px solid var(--color-brand-separator)}
.dc-migrated .dcv-022{padding:.25rem .45rem .45rem; font-size:var(--text-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-023{display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-024{display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:var(--radius-control); color:var(--color-content-muted); font-size:var(--text-caption)}
.dc-migrated .dcv-025{display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:34px; border-radius:var(--radius-control); background:var(--duo-prune-solid); color:var(--on-accent); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-026{display:flex; flex-direction:column; gap:.75rem; padding:.85rem; background:var(--color-brand-cream)}
.dc-migrated .dcv-027{padding:.85rem 1rem; border-radius:var(--radius-card); border:1px solid var(--color-brand-line-soft); background:linear-gradient(120deg, var(--accent-soft), var(--color-surface) 70%)}
.dc-migrated .dcv-028{display:inline-block; padding:.15rem .5rem; border-radius:var(--radius-pill); background:var(--color-surface); color:var(--accent-strong); font-size:var(--text-micro); font-weight:600; letter-spacing:.04em}
.dc-migrated .dcv-029{margin:.5rem 0 .2rem; font-family:var(--font-display-cozy); font-size:var(--text-page); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-030{margin:0; font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-031{display:flex; align-items:center; gap:.4rem; font-size:var(--text-body-sm); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-032{display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem}
.dc-migrated .dcv-033{padding:.7rem .8rem; border-radius:var(--radius-inner); background:var(--color-surface); border:1px solid var(--color-brand-line-soft); border-left:3px solid var(--duo-prune)}
.dc-migrated .dcv-034{display:block; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-035{display:block; margin-top:.15rem; font-size:var(--text-page); font-weight:700; color:var(--color-content-strong)}
.dc-migrated .dcv-036{font-size:var(--text-micro); color:var(--color-content-soft)}
.dc-migrated .dcv-037{display:grid; grid-template-columns:1.4fr 1fr; gap:.6rem}
.dc-migrated .dcv-038{padding:.75rem .8rem; border-radius:var(--radius-card); background:var(--color-surface); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-039{display:block; font-size:var(--text-body-sm); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-040{display:flex; flex-direction:column; gap:.45rem; margin-top:.6rem}
.dc-migrated .dcv-041{display:flex; align-items:center; gap:.6rem; padding:.45rem .55rem; border-radius:var(--radius-control); background:var(--color-surface-sunken)}
.dc-migrated .dcv-042{font-family:var(--font-mono); font-size:var(--text-micro); color:var(--duo-prune)}
.dc-migrated .dcv-043{flex:1; font-size:var(--text-caption); color:var(--color-content-strong)}
.dc-migrated .dcv-044{font-family:var(--font-mono); font-size:var(--text-micro); color:var(--accent-strong)}
.dc-migrated .dcv-045{display:flex; align-items:center; gap:.6rem; padding:.45rem .55rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface))}
.dc-migrated .dcv-046{color:var(--duo-prune)}
.dc-migrated .dcv-047{font-size:var(--text-micro); font-weight:600; color:var(--duo-prune)}
.dc-migrated .dcv-048{display:flex; flex-direction:column; gap:.15rem; padding:.5rem .55rem; border-radius:var(--radius-control); background:var(--color-surface-sunken)}
.dc-migrated .dcv-049{font-size:var(--text-caption); color:var(--color-content-strong)}
.dc-migrated .dcv-051{position:relative; z-index:4; margin-top:3.5rem}
.dc-migrated .dcv-052{width:100%;  margin:0 auto; background:var(--color-surface-sunken); border-top:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-053{max-width:1180px; margin:0 auto; padding:3.5rem 1.5rem}
.dc-migrated .dcv-054{max-width:46rem; margin-bottom:2rem}
.dc-migrated .dcv-055{margin:.75rem 0 0}
.dc-migrated .dcv-056{margin-top:.75rem; font-size:var(--text-title); line-height:1.6; color:var(--color-content)}
.dc-migrated .dcv-057{border-radius:var(--radius-modal); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-brand-line); box-shadow:var(--shadow-md)}
.dc-migrated .dcv-058{font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-059{display:grid; grid-template-columns:210px minmax(0,1fr); min-height:620px}
.dc-migrated .dcv-060{display:flex; flex-direction:column; gap:.1rem; padding:.7rem .55rem; background:var(--color-surface-sunken); border-right:1px solid var(--color-brand-separator); overflow:auto}
.dc-migrated .dcv-061{display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem; border-radius:var(--radius-control); color:var(--color-content-muted); font-size:var(--text-caption)}
.dc-migrated .dcv-062{width:16px; font-family:var(--font-mono); font-size:var(--text-micro); color:var(--color-content-faint)}
.dc-migrated .dcv-063{display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-caption); font-weight:600; box-shadow:inset 2px 0 0 var(--accent-strong)}
.dc-migrated .dcv-064{width:16px; font-family:var(--font-mono); font-size:var(--text-micro)}
.dc-migrated .dcv-065{display:flex; min-width:0; flex-direction:column; gap:.75rem; padding:.9rem; background:var(--color-brand-cream); overflow:visible}
.dc-migrated .dcv-066{display:flex; align-items:center; gap:1rem; padding:.75rem .9rem; border-radius:var(--radius-card); background:var(--color-surface); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-067{display:block; font-size:var(--text-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-068{display:inline-flex; align-items:center; gap:.4rem; margin-top:.15rem; font-size:var(--text-body-sm); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-069{padding:.1rem .4rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-070{text-align:right}
.dc-migrated .dcv-071{font-size:var(--text-body-sm); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-072{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--radius-pill); background:conic-gradient(var(--duo-prune) 0 60%, var(--color-brand-line) 60%)}
.dc-migrated .dcv-073{width:24px; height:24px; border-radius:var(--radius-pill); background:var(--color-surface)}
.dc-migrated .dcv-074{display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:var(--radius-card); background:var(--color-surface); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-075{padding:.35rem .75rem; border-radius:var(--radius-control); background:var(--duo-prune-solid); color:var(--on-accent); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-076{display:flex; align-items:center; gap:.9rem; padding:.7rem .8rem; border-radius:var(--radius-card); background:var(--color-surface); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-077{display:flex; align-items:center; gap:.15rem; flex-wrap:nowrap; flex:1; min-width:0}
.dc-migrated .dcv-078{display:flex; align-items:center; gap:.4rem; min-height:44px; padding:0 .5rem; border-radius:var(--radius-control); border:1px solid transparent; background:transparent; font:inherit; font-size:var(--text-caption); white-space:nowrap; color:var(--color-content-muted); cursor:pointer; transition:background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast)}
.dc-migrated .dcv-078:hover{background:var(--color-brand-beige); color:var(--color-content-strong)}
.dc-migrated .dcv-078:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px}
.dc-migrated .dcv-079{display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; text-align:center; font-variant-numeric:tabular-nums; width:18px; height:18px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:700}
.dc-migrated .dcv-080{width:10px; height:1px; flex-shrink:0; background:var(--color-brand-line)}
.dc-migrated .dcv-081{display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; text-align:center; font-variant-numeric:tabular-nums; width:18px; height:18px; border-radius:var(--radius-pill); border:1px solid var(--color-brand-line); font-size:var(--text-micro); font-weight:700}
.dc-migrated .dcv-082{padding:.9rem 1rem; border-radius:var(--radius-card); background:var(--color-surface); border:1px solid var(--color-brand-line-soft); animation:dcFondu var(--motion-base) both}
.dc-migrated .dcv-083{display:flex; align-items:flex-start; gap:.7rem; padding-bottom:.8rem; border-bottom:1px solid var(--color-brand-separator)}
.dc-migrated .dcv-084{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--radius-inner); background:color-mix(in srgb, var(--duo-prune) 16%, var(--color-surface)); color:var(--duo-prune)}
.dc-migrated .dcv-085{display:block; font-size:var(--text-title); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-086{padding:.2rem .55rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); border:1px solid color-mix(in srgb, var(--duo-prune) 32%, transparent); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-087{display:flex; align-items:center; gap:.6rem; margin-top:.9rem; padding:.6rem .7rem; border-radius:var(--radius-inner); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-088{flex:1; font-size:var(--text-caption); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-089{font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-090{padding:.25rem .6rem; border-radius:var(--radius-control); border:1px solid var(--color-brand-line); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-091{display:grid; grid-template-columns:repeat(2, 1fr); gap:.55rem; margin-top:.75rem}
.dc-migrated .dcv-092{display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-inner); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-093{display:block; font-size:var(--text-caption); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-094{display:flex; gap:3px}
.dc-migrated .dcv-095{width:13px; height:4px; border-radius:2px; background:var(--color-state-warning-fg)}
.dc-migrated .dcv-096{width:13px; height:4px; border-radius:2px; background:var(--color-brand-line)}
.dc-migrated .dcv-097{width:13px; height:4px; border-radius:2px; background:var(--accent-strong)}
.dc-migrated .dcv-098{padding:.2rem .55rem; border-radius:var(--radius-pill); background:var(--color-state-warning-bg); color:var(--color-state-warning-fg); border:1px solid var(--color-state-warning-border); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-099{display:flex; align-items:center; gap:.6rem; margin-top:.9rem; padding:.6rem .7rem; border-radius:var(--radius-inner); background:var(--accent-soft)}
.dc-migrated .dcv-100{flex:1; font-size:var(--text-caption); font-weight:600; color:var(--accent-strong)}
.dc-migrated .dcv-101{margin-top:.65rem; padding:.75rem .8rem; border-radius:var(--radius-inner); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-102{display:flex; align-items:center; gap:.5rem}
.dc-migrated .dcv-103{font-size:var(--text-micro); color:var(--color-content-faint)}
.dc-migrated .dcv-104{display:grid; grid-template-columns:1.5fr 1.3fr .8fr auto; gap:.5rem; margin-top:.6rem}
.dc-migrated .dcv-105{padding:.45rem .6rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft); font-size:var(--text-caption); color:var(--color-content-strong)}
.dc-migrated .dcv-106{padding:.45rem .6rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft); font-size:var(--text-caption); color:var(--color-content-soft)}
.dc-migrated .dcv-107{display:flex; align-items:center; padding:.45rem .7rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-108{display:grid; grid-template-columns:.85fr 1.15fr; gap:.5rem; margin-top:.6rem}
.dc-migrated .dcv-109{padding:.6rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-110{display:block; font-size:var(--text-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-111{display:flex; flex-direction:column; gap:.35rem; margin-top:.5rem}
.dc-migrated .dcv-112{display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:var(--radius-control); background:var(--accent-soft)}
.dc-migrated .dcv-113{flex:1; font-size:var(--text-micro); font-weight:600; color:var(--accent-strong)}
.dc-migrated .dcv-114{font-family:var(--font-mono); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-115{padding:.05rem .35rem; border-radius:var(--radius-pill); background:var(--color-surface); font-size:var(--text-micro); font-weight:700; color:var(--accent-strong)}
.dc-migrated .dcv-116{display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:var(--radius-control); background:var(--color-surface)}
.dc-migrated .dcv-117{flex:1; font-size:var(--text-micro); color:var(--color-content)}
.dc-migrated .dcv-118{display:flex; align-items:center; gap:.4rem}
.dc-migrated .dcv-119{display:block; margin-top:.45rem; font-size:var(--text-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-120{display:flex; flex-direction:column; gap:.25rem; margin-top:.4rem}
.dc-migrated .dcv-121{display:flex; align-items:center; gap:.4rem; padding:.3rem .5rem; border-radius:var(--radius-control); background:var(--color-surface); font-size:var(--text-micro); color:var(--color-content)}
.dc-migrated .dcv-122{width:12px; height:12px; border-radius:3px; border:1px solid var(--color-brand-line)}
.dc-migrated .dcv-123{display:flex; justify-content:flex-end; margin-top:.5rem}
.dc-migrated .dcv-124{padding:.3rem .65rem; border-radius:var(--radius-control); background:var(--duo-prune-solid); color:var(--on-accent); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-125{padding:.2rem .55rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-126{padding:.2rem .55rem; border-radius:var(--radius-pill); border:1px solid var(--color-brand-line-soft); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-127{display:flex; flex-direction:column; gap:.3rem; margin-top:.6rem}
.dc-migrated .dcv-128{display:flex; align-items:center; gap:.6rem; padding:.4rem .55rem; border-radius:var(--radius-control); background:var(--color-surface-sunken)}
.dc-migrated .dcv-129{padding:.1rem .4rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-130{letter-spacing:1px; font-size:var(--text-caption); color:var(--accent-strong)}
.dc-migrated .dcv-131{padding:.1rem .4rem; border-radius:var(--radius-pill); border:1px solid var(--color-brand-line-soft); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-132{display:flex; align-items:center; gap:.7rem}
.dc-migrated .dcv-133{padding:.3rem .65rem; border-radius:var(--radius-control); border:1px solid var(--color-brand-line); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-134{display:flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-135{display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin-top:.6rem}
.dc-migrated .dcv-136{display:flex; align-items:center; gap:.35rem}
.dc-migrated .dcv-137{padding:.05rem .35rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-family:var(--font-mono); font-size:var(--text-micro)}
.dc-migrated .dcv-138{font-size:var(--text-micro); font-weight:700; color:var(--accent-strong)}
.dc-migrated .dcv-139{display:block; margin-top:.35rem; font-size:var(--text-caption); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-140{display:block; margin-top:.2rem; font-size:var(--text-micro); line-height:1.5; color:var(--color-content-muted)}
.dc-migrated .dcv-141{display:flex; gap:.25rem; margin-top:.45rem}
.dc-migrated .dcv-142{padding:.1rem .4rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro)}
.dc-migrated .dcv-143{display:block; margin-top:.5rem; padding:.3rem; border-radius:var(--radius-control); border:1px solid var(--color-brand-line); text-align:center; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-144{padding:.1rem .4rem; border-radius:var(--radius-pill); background:var(--color-state-warning-bg); color:var(--color-state-warning-fg); font-size:var(--text-micro)}
.dc-migrated .dcv-145{display:flex; align-items:center; gap:.5rem; margin-top:.9rem}
.dc-migrated .dcv-146{padding:.3rem .7rem; border-radius:var(--radius-control); background:var(--duo-prune-solid); color:var(--on-accent); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-147{display:flex; flex-direction:column; gap:.5rem; margin-top:.55rem}
.dc-migrated .dcv-148{padding:.7rem .8rem; border-radius:var(--radius-inner); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-149{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.dc-migrated .dcv-150{display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; text-align:center; font-variant-numeric:tabular-nums; width:20px; height:20px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:700}
.dc-migrated .dcv-151{padding:.1rem .4rem; border-radius:var(--radius-pill); background:var(--color-surface); border:1px solid var(--color-brand-line-soft); font-family:var(--font-mono); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-152{padding:.1rem .4rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-153{display:block; margin:.35rem 0 .5rem; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-154{display:flex; gap:.4rem}
.dc-migrated .dcv-155{padding:.3rem .65rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-156{padding:.1rem .4rem; border-radius:var(--radius-pill); background:var(--color-state-warning-bg); color:var(--color-state-warning-fg); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-157{padding:.25rem .6rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-158{margin-top:.55rem; padding:.7rem .8rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-159{display:block; font-size:var(--text-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-160{margin:.35rem 0 0; font-size:var(--text-caption); line-height:1.6; color:var(--color-content)}
.dc-migrated .dcv-161{display:block; margin-top:.5rem; font-size:var(--text-micro); color:var(--color-content-soft)}
.dc-migrated .dcv-162{display:flex; align-items:center; gap:.5rem; margin-top:.8rem}
.dc-migrated .dcv-163{padding:.25rem .6rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-164{display:grid; grid-template-columns:1.6fr 1fr; gap:.6rem; margin-top:.6rem}
.dc-migrated .dcv-165{padding:.8rem; border-radius:var(--radius-inner); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-166{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.dc-migrated .dcv-167{padding:.15rem .5rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-168{padding:.15rem .5rem; border-radius:var(--radius-pill); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-169{font-family:var(--font-mono); font-size:var(--text-micro); color:var(--color-content-faint)}
.dc-migrated .dcv-170{padding:.2rem .55rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:700}
.dc-migrated .dcv-171{display:flex; align-items:center; gap:.5rem; margin:.6rem 0 .15rem}
.dc-migrated .dcv-172{flex:1; font-size:var(--text-body-sm); font-weight:600; color:var(--color-content-strong)}
.dc-migrated .dcv-173{padding:.15rem .5rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-174{margin:0; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-175{display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; margin-top:.7rem}
.dc-migrated .dcv-176{padding:.45rem .55rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-177{color:var(--color-content-strong)}
.dc-migrated .dcv-178{margin-top:.6rem; padding:.6rem .7rem; border-radius:var(--radius-control); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-179{margin:0; font-size:var(--text-micro); line-height:1.6; color:var(--color-content)}
.dc-migrated .dcv-180{display:flex; gap:.4rem; margin-top:.7rem}
.dc-migrated .dcv-181{flex:1; text-align:center; padding:.4rem; border-radius:var(--radius-control); border:1px solid var(--color-brand-line); font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-182{flex:1; text-align:center; padding:.4rem; border-radius:var(--radius-control); background:var(--duo-prune-solid); color:var(--on-accent); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-183{padding:.8rem; border-radius:var(--radius-inner); border:1px solid var(--color-brand-line-soft); background:var(--color-surface-sunken)}
.dc-migrated .dcv-184{margin-top:.6rem; padding:.6rem .7rem; border-radius:var(--radius-control); background:var(--color-surface); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-185{display:flex; align-items:flex-start; gap:.5rem}
.dc-migrated .dcv-186{display:block; margin-top:.2rem; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-187{display:block; margin-top:.35rem; font-family:var(--font-mono); font-size:var(--text-micro); color:var(--color-content-faint)}
.dc-migrated .dcv-188{display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin-top:.6rem; text-align:center}
.dc-migrated .dcv-189{padding:.5rem .3rem; border-radius:var(--radius-control); background:var(--color-surface)}
.dc-migrated .dcv-190{display:block; font-size:var(--text-title); color:var(--color-content-strong)}
.dc-migrated .dcv-191{display:flex; align-items:center; gap:.6rem; margin-top:.9rem; padding:.6rem .7rem; border-radius:var(--radius-inner); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface))}
.dc-migrated .dcv-192{flex:1; font-size:var(--text-caption); font-weight:600; color:var(--duo-prune)}
.dc-migrated .dcv-193{display:flex; align-items:center; gap:.3rem; margin-top:.8rem}
.dc-migrated .dcv-194{padding:.3rem .7rem; border-radius:var(--radius-control); font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-195{padding:.3rem .7rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-196{margin-top:.7rem; padding-left:.3rem; border-left:2px solid var(--color-brand-line)}
.dc-migrated .dcv-197{position:relative; padding:0 0 .8rem 1rem}
.dc-migrated .dcv-198{position:absolute; left:-.6rem; top:.2rem; width:9px; height:9px; border-radius:var(--radius-pill); background:var(--color-state-warning-fg)}
.dc-migrated .dcv-199{display:block; font-size:var(--text-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong)}
.dc-migrated .dcv-200{display:flex; align-items:center; gap:.7rem; margin-top:.35rem; padding:.6rem .7rem; border-radius:var(--radius-inner); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-201{display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune)}
.dc-migrated .dcv-202{padding:.15rem .5rem; border-radius:var(--radius-pill); background:var(--color-state-warning-bg); color:var(--color-state-warning-fg); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-203{position:absolute; left:-.6rem; top:.2rem; width:9px; height:9px; border-radius:var(--radius-pill); background:var(--duo-prune)}
.dc-migrated .dcv-204{display:block; margin-top:.15rem; font-size:var(--text-micro); color:var(--color-content-soft)}
.dc-migrated .dcv-205{padding:.15rem .5rem; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--duo-prune) 15%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-micro); font-weight:600}
.dc-migrated .dcv-206{position:relative; padding:0 0 .2rem 1rem}
.dc-migrated .dcv-207{display:grid; place-items:center; width:30px; height:30px; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 14%, var(--color-surface)); color:var(--duo-prune)}
.dc-migrated .dcv-208{display:grid; grid-template-columns:230px 1fr; gap:.6rem; margin-top:.9rem}
.dc-migrated .dcv-209{padding:.6rem; border-radius:var(--radius-inner); background:var(--color-surface-sunken); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-210{display:block; padding:.2rem .35rem; font-size:var(--text-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-211{display:flex; flex-direction:column; gap:.2rem; margin-top:.3rem}
.dc-migrated .dcv-212{display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border-radius:var(--radius-control); background:color-mix(in srgb, var(--duo-prune) 13%, var(--color-surface)); color:var(--duo-prune); font-size:var(--text-caption); font-weight:600}
.dc-migrated .dcv-213{display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border-radius:var(--radius-control); font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-214{display:block; margin-top:.6rem; padding:.2rem .35rem; font-size:var(--text-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--color-content-faint)}
.dc-migrated .dcv-215{display:flex; align-items:center; gap:.4rem; margin-top:.3rem; padding:.4rem .5rem; border-radius:var(--radius-control); font-size:var(--text-caption); color:var(--color-content-muted)}
.dc-migrated .dcv-216{font-size:var(--text-micro); color:var(--duo-prune)}
.dc-migrated .dcv-217{display:block; margin-top:.4rem; padding:.4rem .5rem; border-radius:var(--radius-control); border:1px dashed var(--color-brand-line); text-align:center; font-size:var(--text-micro); color:var(--color-content-muted)}
.dc-migrated .dcv-218{padding:.75rem .8rem; border-radius:var(--radius-inner); border:1px solid var(--color-brand-line-soft)}
.dc-migrated .dcv-219{margin:0; font-size:var(--text-caption); line-height:1.7; color:var(--color-content)}

/* ==========================================================================
   HERO PILOTE ET PARCOURS INTERACTIF : migration native de la maquette DC
   ========================================================================== */
/* Les teintes du duo suivent la meme regle que les accents de tokens.css, et
   pour la meme raison : une couleur qui porte du TEXTE sur fond sombre et une
   couleur qui sert de FOND a du texte blanc ne peuvent pas etre la meme.

     --duo-X        texte, icone, filet pose sur le fond du theme.
     --duo-X-solid  aplat qui porte du texte blanc (--on-accent).

   Sans la seconde, les degrades des cartes de pilotage et de securite
   reprenaient en mode sombre la valeur CLAIRE de la teinte (un rose a #e18fe8,
   un bleu a #a5b4fc) tout en gardant leur texte blanc : le contraste tombait
   entre 1.7 et 2.4 pour 4.5 exiges, et ces cartes devenaient tres difficiles a
   lire. Les valeurs pleines sombres sont celles des accents correspondants
   dans tokens.css, deja controlees par tools/check-contrast.py. */
:root {
  --duo-acier: #1d4ed8;
  --duo-indigo: #4338ca;
  --duo-petrole: #155e75;
  --duo-prune: #86198f;
  --duo-acier-solid: #1d4ed8;
  --duo-indigo-solid: #4338ca;
  --duo-petrole-solid: #155e75;
  --duo-prune-solid: #86198f;
}
:root[data-theme="dark"] {
  --duo-acier: #7da7f5;
  --duo-indigo: #a5b4fc;
  --duo-petrole: #67c3dd;
  --duo-prune: #e18fe8;
  --duo-acier-solid: #2f6ad1;
  --duo-indigo-solid: #5b54d6;
  --duo-petrole-solid: #1a7a96;
  --duo-prune-solid: #a83bb5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --duo-acier: #7da7f5;
    --duo-indigo: #a5b4fc;
    --duo-petrole: #67c3dd;
    --duo-prune: #e18fe8;
    --duo-acier-solid: #2f6ad1;
    --duo-indigo-solid: #5b54d6;
    --duo-petrole-solid: #1a7a96;
    --duo-prune-solid: #a83bb5;
  }
}

main > .hero-pilot,
main > .journey { padding: 0; }
.hero-pilot {
  overflow: hidden;
  border-bottom: 1px solid var(--color-brand-line-soft);
  /* Diametre du sceau. Il commande aussi le haut de la maquette, posee juste
     dessous : une seule valeur a bouger. Bornee par la hauteur d'ecran autant
     que par la largeur, sinon un portable a ecran bas garde un sceau de 196 px
     qui mange le tiers du hero. */
  --hero-spot-size: clamp(8.5rem, min(12vw, 19vh), 12.25rem);
}
.hero-pilot .dcv-003 {
  background: var(--color-surface);
}
:root[data-theme="dark"] .hero-pilot .dcv-003 {
  background:
    radial-gradient(50rem 34rem at var(--hero-glow-peach-position), var(--hero-glow-peach), transparent 64%),
    radial-gradient(66rem 44rem at var(--hero-glow-lilac-position), var(--hero-glow-lilac), transparent 68%),
    radial-gradient(44rem 34rem at var(--hero-glow-mint-position), var(--hero-glow-mint), transparent 70%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--duo-acier) 22%, var(--hero-bg-ivory)),
      color-mix(in srgb, var(--hero-bg-lilac) 88%, var(--color-brand-canvas)) 48%,
      var(--color-brand-canvas) 84%
    );
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-pilot .dcv-003 {
    background:
      radial-gradient(50rem 34rem at var(--hero-glow-peach-position), var(--hero-glow-peach), transparent 64%),
      radial-gradient(66rem 44rem at var(--hero-glow-lilac-position), var(--hero-glow-lilac), transparent 68%),
      radial-gradient(44rem 34rem at var(--hero-glow-mint-position), var(--hero-glow-mint), transparent 70%),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--duo-acier) 22%, var(--hero-bg-ivory)),
        color-mix(in srgb, var(--hero-bg-lilac) 88%, var(--color-brand-canvas)) 48%,
        var(--color-brand-canvas) 84%
      );
  }
}
.hero-pilot__stage { min-height: auto; }
.hero-pilot__inner {
  z-index: 1;
  width: min(100% - 4rem, 1880px);
  max-width: 1880px !important;
  /* Le hero tient dans l'ecran au lieu d'imposer 860 px : il occupe la hauteur
     disponible sous la barre et ne grandit que si le texte deborde. Le bloc de
     texte est centre verticalement plutot que pousse par un rembourrage de
     212 px, qui laissait le bas vide sur grand ecran et debordait sur les
     portables. */
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding: clamp(2.75rem, 7vh, 6rem) clamp(1.5rem, 3vw, 3.5rem) clamp(2.5rem, 6vh, 5rem) !important;
}
.hero-pilot__copy { max-width: 540px; }
.hero-dashboard__wrap {
  /* Calee sur le bord droit du cadre, et non lancee depuis 48 % sur 980 px de
     large : la maquette sortait de l'ecran et se faisait couper. Elle se pose
     sous le sceau, dont elle suit la taille. */
  top: calc(var(--hero-spot-size) + 1.75rem) !important;
  left: auto !important;
  right: clamp(1.5rem, 3vw, 3.5rem) !important;
  /* Deux reducteurs independants -- largeur et hauteur disponibles -- dont le
     plus contraignant l'emporte. */
  --hero-dashboard-fit-width: 1;
  --hero-dashboard-fit-height: 1;
  --hero-dashboard-scale: min(var(--hero-dashboard-fit-width), var(--hero-dashboard-fit-height));
  /* Le cadre fait exactement la taille de la maquette une fois reduite. Sans
     cela, retrecir le cadre retrecissait la largeur INTERNE de la maquette :
     ses textes se remettaient a la ligne et elle gagnait en hauteur au moment
     meme ou on lui demandait d'en perdre. */
  width: calc(900px * var(--hero-dashboard-scale)) !important;
}
.hero-depth-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
}
.hero-ribbon {
  --hero-ribbon-color: var(--duo-prune);
  /* 5.8 s a l'origine. Ramene sous la barre des 5 secondes, delai compris :
     au-dela, un contenu qui bouge tout seul doit offrir un moyen de l'arreter
     (RGAA 13.8). Le plus tardif des quatre rubans part a 500 ms, donc
     500 ms + 4.4 s = 4.9 s de mouvement total. Reduire ce jeton plutot
     qu'ajouter un bouton de pause pour une decoration. */
  --hero-ribbon-duration: 4.4s;
  --hero-ribbon-delay: 80ms;
  opacity: .78;
}
.hero-ribbon--actions {
  --hero-ribbon-color: color-mix(in srgb, var(--duo-prune) 58%, var(--duo-indigo));
  --hero-ribbon-delay: 220ms;
}
.hero-ribbon--mediation {
  --hero-ribbon-color: var(--duo-indigo);
  --hero-ribbon-delay: 360ms;
}
.hero-ribbon--territoire {
  --hero-ribbon-color: color-mix(in srgb, var(--duo-indigo) 56%, var(--duo-petrole));
  --hero-ribbon-delay: 500ms;
}
.hero-ribbon use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hero-ribbon__underside {
  stroke: color-mix(in srgb, var(--hero-ribbon-color) 70%, black);
  stroke-width: clamp(25px, 1.7vw, 30px);
  transform: translate3d(2px, 3px, 0);
  opacity: .42;
}
.hero-ribbon__face {
  stroke: color-mix(in srgb, var(--hero-ribbon-color) 88%, var(--color-surface));
  stroke-width: clamp(21px, 1.45vw, 26px);
}
/* Les rubans sont visibles sans JavaScript. Avec JavaScript, leur tracé
   se rejoue à chaque retour du hero dans le viewport. */
.hero-ribbons-ready .hero-ribbon use {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-ribbons-ready.is-ribbon-active .hero-ribbon use {
  animation: hero-ribbon-draw var(--hero-ribbon-duration) cubic-bezier(.2, .62, .18, 1) var(--hero-ribbon-delay) both;
}
.hero-ribbons-ready.is-ribbon-complete .hero-ribbon use {
  stroke-dashoffset: 0;
}
.hero-pilot__copy { animation: hero-copy-in var(--motion-slow) both; }
.hero-spot {
  position: absolute;
  top: .75rem;
  left: 40%;
  z-index: 3;
  translate: -50% 0;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--hero-spot-size);
  aspect-ratio: 1;
  margin: 0;
  border: 0;
  border-radius: 50%;
  /* Ni overflow:hidden ni backdrop-filter. Un fond floute derriere un disque
     force le navigateur a decouper une couche de composition sur un
     border-radius, decoupe qu'il rend sans lissage : c'est ce qui faisait
     apparaitre l'escalier de pixels sur le bord du cercle. Le voile est
     desormais un simple aplat translucide, rendu comme le reste de la page. */
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  color: var(--accent-strong);
  animation: hero-spot-in 760ms cubic-bezier(.2, .72, .2, 1) 40ms both;
}
.hero-spot__ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
  animation: hero-spot-ring-in 1.05s cubic-bezier(.2, .7, .2, 1) 100ms both;
}
/* Six segments de 13 unites sur les 20 que vaut chaque pas : 7 unites
   d'intervalle, dont les bouts arrondis reprennent un peu plus d'une unite. Le
   trace precedent, 19 sur 25, ne laissait qu'environ 5 unites une fois les
   bouts arrondis deduits -- assez pour que deux segments de teintes voisines se
   lisent comme un seul arc. */
.hero-spot__segment {
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-dasharray: 13 107;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  shape-rendering: geometricPrecision;
}
/* Balayage regulier du prune au petrole, en passant par l'indigo : deux
   segments voisins ne portent jamais la meme teinte. */
.hero-spot__segment--1 { stroke: var(--duo-prune); }
.hero-spot__segment--2 {
  stroke: color-mix(in srgb, var(--duo-prune) 68%, var(--duo-indigo));
  stroke-dashoffset: -20;
}
.hero-spot__segment--3 {
  stroke: color-mix(in srgb, var(--duo-prune) 34%, var(--duo-indigo));
  stroke-dashoffset: -40;
}
.hero-spot__segment--4 {
  stroke: var(--duo-indigo);
  stroke-dashoffset: -60;
}
.hero-spot__segment--5 {
  stroke: color-mix(in srgb, var(--duo-indigo) 55%, var(--duo-petrole));
  stroke-dashoffset: -80;
}
.hero-spot__segment--6 {
  stroke: var(--duo-petrole);
  stroke-dashoffset: -100;
}
.hero-spot__text {
  position: relative;
  z-index: 3;
  display: block;
  width: 90%;
  color: color-mix(in srgb, var(--duo-prune) 86%, var(--color-content-strong));
  font-family: var(--font-display-cozy);
  /* Indexee sur le diametre du sceau et non sur la largeur de fenetre : le mot
     le plus long, "d'accompagnement", doit tenir sur une ligne quelle que soit
     la taille du disque. A 9 % du diametre il occupe environ 85 % de la
     largeur utile. */
  font-size: calc(var(--hero-spot-size) * .09);
  font-synthesis: none;
  font-weight: 700;
  line-height: 1.06;
  hyphens: none;
  letter-spacing: -.018em;
  text-align: center;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: rotate(-5deg);
  animation: hero-spot-text-in 680ms ease-out 240ms both;
}
.hero-spot__text > span { display: block; white-space: nowrap; }
.hero-subtitle {
  max-width: 34rem;
  margin: .85rem 0 0;
  color: var(--accent-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.35;
}
.hero-subtitle + .dcv-008 { margin-top: .65rem; }
.hero-title-lines span { display: block; overflow: hidden; }
.hero-title-lines span:first-child { animation: hero-line-in var(--motion-slow) 90ms both; }
.hero-title-lines span:last-child { animation: hero-line-in var(--motion-slow) 180ms both; }
.hero-sequence { animation: hero-copy-in var(--motion-slow) both; }
.hero-subtitle.hero-sequence { animation-delay: 210ms; }
.hero-pilot__copy .dcv-008.hero-sequence { animation-delay: 260ms; }
.hero-pilot__copy .dcv-009 .hero-sequence { animation-delay: 300ms; }
.hero-dashboard { font-family: var(--font-sans); }
.hero-dashboard__wrap { animation: hero-dashboard-in var(--motion-slow) 180ms both; }
/* Rotation ecrite une seule fois, echelle pilotee par variable : les paliers
   n'ont plus qu'a poser un nombre, sans recopier la rotation ni forcer en
   !important. Selecteur a deux classes pour passer devant .dc-migrated .dcv-011. */
.dc-migrated .hero-dashboard__plane {
  /* Largeur interne fixe : la mise en page de la maquette ne depend plus de la
     place qu'on lui laisse, seule son echelle varie. */
  width: 900px;
  transform:
    scale(var(--hero-dashboard-scale, 1))
    rotateY(-9deg) rotateX(3deg) rotateZ(-1deg);
  transform-origin: var(--hero-dashboard-origin, top left);
}
/* Profondeur de champ. La rotation eloigne le coin HAUT-GAUCHE du regard
   (rotateY negatif rapproche le bord droit, rotateX positif rapproche le bord
   bas) : c'est de ce coin-la que partent le voile et le flou, qui s'effacent
   avant la moitie de la maquette pour ne jamais toucher la zone lisible.

   L'effet est pose DANS la carte et non sur le plan qui la porte. Deborder,
   meme de 1,5 %, faisait flouter le fond juste a l'exterieur du cadre : le
   flou allait y chercher les pixels clairs du bord de la carte et les etalait
   au-dehors, d'ou le lisere clair qui courait le long de la maquette en mode
   sombre. Pose dans la carte, il est decoupe par son overflow et son rayon. */
.dc-migrated .hero-dashboard { position: relative; }
.dc-migrated .hero-dashboard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--color-surface) 24%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 7%, transparent) 26%,
    transparent 52%
  );
  -webkit-backdrop-filter: blur(2.2px);
  backdrop-filter: blur(2.2px);
  -webkit-mask-image: linear-gradient(118deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .46) 22%, transparent 48%);
  mask-image: linear-gradient(118deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .46) 22%, transparent 48%);
}

.hero-dashboard svg { flex: 0 0 auto; }

.hero-progression {
  position: relative;
  z-index: 4;
  margin-top: 3.5rem;
  padding: 1.35rem 1.5rem 1.45rem;
  border: 1px solid var(--color-brand-line-soft);
  border-radius: var(--radius-modal);
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-progression-band {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--color-brand-separator);
  background: var(--color-surface-sunken);
}
.hero-progression-band .hero-progression { margin-top: 0; }
.hero-progression__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
}
.hero-progression__step {
  min-width: 0;
  padding-right: 1rem;
}
.hero-progression__step + .hero-progression__step {
  padding-left: 0;
  border-left: 0;
}
.hero-progression h2 {
  /* Plus de pastille au-dessus : le titre ouvre la colonne. */
  margin-top: 0;
  font-family: var(--font-display-cozy);
  font-size: var(--text-title);
  font-weight: 650;
}
.hero-progression p {
  max-width: 20rem;
  margin-top: .35rem;
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  line-height: 1.55;
}
.hero-progression.is-reveal-ready .hero-progression__step {
  opacity: 0;
  transform: translateY(6px);
}
.hero-progression.is-reveal-ready.is-visible .hero-progression__step {
  animation: progress-step-in var(--motion-fast) ease-out both;
}
.hero-progression.is-visible .hero-progression__step:nth-child(1) { animation-delay: 200ms; }
.hero-progression.is-visible .hero-progression__step:nth-child(2) { animation-delay: 260ms; }
.hero-progression.is-visible .hero-progression__step:nth-child(3) { animation-delay: 320ms; }

@keyframes hero-spot-in {
  0% { opacity: 0; transform: translateY(12px) scale(.84); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes hero-spot-ring-in {
  from { opacity: 0; transform: rotate(-70deg) scale(.88); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-spot-text-in {
  from { opacity: 0; transform: translateY(7px) rotate(-9deg); }
  to { opacity: 1; transform: rotate(-5deg); }
}
@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-line-in {
  from { opacity: 0; transform: translateY(105%); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-dashboard-in {
  from { opacity: 0; transform: translate3d(36px, 24px, 0) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-ribbon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes progress-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes journey-panel-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.journey-tabs [role="tab"][aria-selected="true"] {
  background: var(--accent-soft) !important;
  border-color: var(--accent-strong) !important;
  color: var(--accent-strong) !important;
  font-weight: 600 !important;
}
.journey-tabs [role="tab"] { min-height: 44px; }
.journey-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.journey-panel[hidden] { display: none !important; }
.journey-panel.is-entering { animation: journey-panel-in var(--motion-base) both; }
.journey-demo-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  flex: 1 0 100%;
  justify-content: flex-end;
  margin-left: 0;
  padding: .2rem .65rem;
  border: 1px solid var(--color-brand-line-soft);
  border-radius: var(--radius-pill);
  color: var(--color-content-muted);
  background: var(--color-surface-sunken);
  font-size: var(--text-micro);
  white-space: nowrap;
}
.journey-toolbar { flex-wrap: wrap !important; }
.journey-demo { max-width: 1180px; margin-inline: auto; }
/* Mention de peremption sous la maquette : discrete, mais posee sur le texte
   attenue de la charte, dont le contraste est verifie en clair et en sombre. */
.journey-demo-note {
  max-width: var(--measure-wide);
  margin: var(--space-copy) auto 0;
  font-size: var(--text-micro);
  line-height: var(--leading-copy);
  color: var(--color-content-muted);
  text-align: center;
  text-wrap: balance;
}

/* Meme recette que .section-header.center : la maquette DC pose l'en-tete a
   gauche, la vitrine le centre au-dessus de la demonstration. */
.journey .dcv-054 {
  margin-inline: auto;
  text-align: center;
}

/* En grand ecran, les six etapes tiennent sur une seule rangee sans creer
   de zone defilable. Les separateurs etaient la largeur superflue qui
   poussait Bilans hors du cadre. */
@media (min-width: 1101px) {
  .journey-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
  }
  .journey-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, max-content);
    justify-content: space-between;
    overflow: visible !important;
  }
  .journey-tabs .dcv-080 { display: none; }
  .journey-tabs [role="tab"] { justify-content: center; padding-inline: .35rem; }
  .journey-demo-label { grid-column: 1 / -1; }
}
[data-journey-expand].is-reveal-ready {
  opacity: .82;
  transform: scale(.8);
  transform-origin: center top;
  will-change: transform, opacity;
}
[data-journey-expand].is-reveal-ready.is-visible {
  animation: journey-demo-expand 1s cubic-bezier(.22, .72, .28, 1) forwards;
}
@keyframes journey-demo-expand {
  from { opacity: .82; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}
.journey-panel button { font: inherit; }
.journey-panel svg { flex: 0 0 auto; }

.nav-login {
  color: var(--color-content);
  font-size: var(--text-body-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nav-login:hover { color: var(--accent-strong); }
.nav-demo { white-space: nowrap; }

/* Sur les ecrans intermediaires, la maquette reste dans une vraie
   colonne a droite du texte. Seule son echelle change : elle ne glisse plus
   sous le contenu et ne necessite donc plus de panneau floute. */
@media (min-width: 1900px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: 1.22; }
}
@media (min-width: 1700px) and (max-width: 1899px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: 1.15; }
}
@media (max-width: 1499px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .84; }
}

/* Paliers de hauteur. La maquette fait environ 600 px : sur un portable a
   ecran bas elle depassait du cadre, qui est en overflow:hidden, et se
   retrouvait coupee en bas. */
/* Paliers de hauteur. La maquette est dessinee en HTML, pas posee en image :
   l'agrandir ne coute aucune definition, elle reste nette a n'importe quelle
   echelle. On lui donne donc toute la place disponible entre le sceau et le
   bas du cadre, quitte a depasser sa taille nominale sur les grands ecrans. */
@media (min-width: 1101px) and (min-height: 1240px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: 1.4; }
}
@media (min-width: 1101px) and (min-height: 1100px) and (max-height: 1239px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: 1.15; }
}
/* En dessous, chaque palier vaut la place reellement disponible entre le bas du
   sceau et le bas du cadre, relevee au navigateur puis divisee par la hauteur
   nominale de la maquette. Un palier unique gaspillait 150 px de haut sur un
   ecran de 913 px pour proteger un ecran de 681. */
@media (min-width: 1101px) and (max-height: 1040px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .98; }
}
@media (min-width: 1101px) and (max-height: 940px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .87; }
}
@media (min-width: 1101px) and (max-height: 890px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .86; }
}
@media (min-width: 1101px) and (max-height: 840px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .80; }
}
@media (min-width: 1101px) and (max-height: 920px) {
  /* Le texte du hero se resserre pour rendre au bas de page les quelques
     dizaines de pixels qui le font deborder sous la ligne de flottaison d'un
     portable. C'est aussi a partir de la que la hauteur du hero cesse de
     suivre l'ecran : elle est fixee par le bloc de texte. */
  .dc-migrated .hero-pilot__copy .dcv-008 {
    margin-top: .85rem;
    font-size: var(--text-body);
    line-height: 1.55;
  }
}
@media (min-width: 1101px) and (max-height: 760px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .72; }
}
@media (min-width: 1101px) and (max-height: 660px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-height: .64; }
}

@media (max-width: 1399px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .74; }
}

@media (max-width: 1299px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .68; }
}

@media (max-width: 1249px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .63; }
}

@media (max-width: 1199px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .57; }
}

@media (max-width: 1149px) and (min-width: 1101px) {
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .52; }
}

@media (max-width: 1100px) {
  .hero-pilot__stage { min-height: auto; }
  .hero-pilot__inner { min-height: auto; padding: 4.5rem 1.5rem 3.5rem !important; }
  /* Le sceau disparait des que la mise en page s'empile. Il n'a plus de place a
     cote du titre -- le bloc de texte occupe alors toute la largeur utile, et
     l'y poser le ferait chevaucher -- et au-dessus il devenait le premier
     element de la page, repoussant le titre vers le bas. Il reste sur les
     largeurs ou la maquette est a cote, c'est-a-dire la ou il a de la place. */
  .hero-spot { display: none; }
  /* Texte centre : sans le visuel a droite pour l'equilibrer, un bloc cale a
     gauche laisse un vide franc sur toute la moitie droite. */
  .hero-pilot__inner { justify-items: center; }
  .hero-pilot__copy {
    max-width: 44rem !important;
    text-align: center;
  }
  .hero-pilot__copy .dcv-009 { justify-content: center; }
  .hero-depth-lines {
    /* Empile, le texte occupe toute la largeur : les rubans lui passent dessous
       au lieu de courir dans une marge. Ils s'effacent donc plus bas et plus
       fort -- ils restent un decor, pas un fond de lecture. */
    opacity: .5;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 52%, #000 68% 100%);
    mask-image: linear-gradient(to bottom, transparent 0 52%, #000 68% 100%);
  }
  .hero-dashboard__wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    --hero-dashboard-origin: top center;
    --hero-dashboard-fit-width: .86;
    height: 533px;
    margin-top: 2.5rem;
  }
  .hero-dashboard__plane {
    position: relative;
    left: 50%;
    margin-left: -450px;
  }
  .hero-progression-band .hero-progression { margin-top: 0; }
  .journey-tabs { overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
  .journey-demo-label { margin-left: 0; }
  .journey-toolbar { align-items: flex-start !important; flex-wrap: wrap !important; }
}

@media (max-width: 900px) {
  .hero-dashboard__wrap { height: 484px; }
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .78; }
}

@media (max-width: 760px) {
  .hero-pilot__inner { padding: 3.5rem 1.25rem 2.5rem !important; }
  .hero-title-lines span { display: inline; }
  .hero-title-lines span + span::before { content: " "; }
  .hero-pilot__copy .dcv-009 { display: grid !important; grid-template-columns: 1fr; }
  .hero-pilot__copy .btn { width: 100%; }
  .hero-dashboard__wrap { height: 422px; margin-top: 2rem; }
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .68; }

  .hero-progression {
    padding: 1.25rem;
  }
  .hero-progression__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-progression__step {
    position: relative;
    padding: 0 0 1.35rem;
  }
  .hero-progression__step:last-child { padding-bottom: 0; }
  .hero-progression__step + .hero-progression__step {
    padding-left: 0;
    border-left: 0;
  }
  .hero-progression h2 { margin-top: 0; }
  .hero-progression p { max-width: 34rem; }

  .journey .dcv-053 { padding: 3.5rem 1rem !important; }
  .journey-demo { overflow: hidden; }
  .journey-demo > .journey-native-grid { grid-template-columns: 1fr !important; }
  .journey-demo > .journey-native-grid > .dcv-060 { display: none; }
  .journey-panel .journey-native-grid { grid-template-columns: 1fr !important; }
  .journey-toolbar { flex-direction: column !important; }
  .journey-tabs { width: 100%; }
  .journey-demo-label { white-space: normal; }
}

@media (max-width: 640px) {
  .hero-dashboard__wrap { height: 385px; }
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .62; }
}

@media (max-width: 600px) {
  .hero-dashboard__wrap { height: 335px; }
  .hero-dashboard__wrap { --hero-dashboard-fit-width: .54; }
}

@media (max-width: 520px) {
  .hero-dashboard__wrap { display: none; }
}

@media (max-width: 430px) {
  .journey .dcv-053 { padding-inline: .75rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ribbon,
  .hero-spot,
  .hero-spot__ring,
  .hero-spot__text,
  .hero-ribbon__shine,
  .hero-ribbon__twist,
  .hero-pilot__copy,
  .hero-title-lines span,
  .hero-sequence,
  .hero-dashboard__wrap,
  .journey-panel.is-entering,
  .hero-progression.is-reveal-ready .hero-progression__step { animation: none !important; }
  .hero-progression.is-reveal-ready .hero-progression__step {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. FONCTIONS PHARES
   ========================================================================== */

/* Ces sections changent volontairement de rythme. Les apercus de produit
   ont un langage commun, mais chaque fonction conserve sa propre composition. */
.daily-intro { padding-block: var(--space-section) !important; }
.daily-intro__layout {
  display: grid;
  grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr);
  gap: 2rem 4rem;
  align-items: center;
}
.daily-intro__content { max-width: 46rem; }
.daily-intro__content > p:not(.feature-emphasis) {
  max-width: var(--measure-copy);
  margin-top: var(--space-copy);
  color: var(--color-content);
  font-size: var(--text-title);
  line-height: 1.55;
}
.daily-intro__benefits {
  max-width: var(--measure-copy);
  margin-top: var(--space-block);
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
.daily-intro__benefits > p {
  color: var(--color-content-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-title);
  font-weight: 650;
}
.daily-intro__benefits ul {
  display: grid;
  gap: .55rem;
  margin-top: var(--space-copy);
  padding: 0;
  list-style: none;
}
.daily-intro__benefits li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-compact);
}
.daily-intro__benefits li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent);
  content: "\2713";
  font-weight: 800;
}
.site-illustration { min-width: 0; }
.site-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.site-illustration--large { width: min(100%, 42rem); justify-self: end; }
.site-illustration--medium { width: min(100%, 31rem); justify-self: end; }
.site-illustration--small { width: min(100%, 15rem); justify-self: end; }

.feature-story { position: relative; overflow: hidden; }
main > .feature-story--tinted { background: var(--color-brand-cream); }
main > .reporting-story { background: var(--color-surface-sunken); }
.feature-story__heading { max-width: var(--measure-wide); margin-bottom: var(--space-heading); }
.feature-story__heading > p:not(.feature-emphasis) {
  max-width: var(--measure-copy);
  margin-top: var(--space-copy);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.feature-story__heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .8fr);
  align-items: end;
  max-width: none;
  gap: 3rem;
}
.feature-story__heading--split > p { margin-bottom: .2rem; }
.territory-opportunity__lead { margin-top: 1.5rem !important; }
.feature-story__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 1.25rem;
}
.feature-story__copy p { color: var(--color-content); }

.feature-emphasis {
  max-width: var(--measure-copy);
  margin-top: var(--space-block);
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--color-content-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-title);
  font-weight: 650;
  line-height: 1.48;
}

/* IA securisee : un long contenu editorial accompagne par un visuel stable. */
.ai-trust-story__intro {
  max-width: 62rem;
  margin-bottom: var(--space-heading);
  margin-inline: auto;
  text-align: center;
}
.ai-trust-story__intro > p {
  max-width: var(--measure-wide);
  margin-top: var(--space-copy);
  margin-inline: auto;
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.ai-trust-story__layout {
  display: grid;
  grid-template-columns: minmax(20rem, .88fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.ai-trust-story__illustration {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  width: min(100%, 34rem);
  justify-self: center;
}
.ai-trust-story__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.ai-trust-story__content { min-width: 0; }
.ai-trust-story__content > p {
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.ai-trust-story__content > p + p { margin-top: 1.15rem; }
/* Chute de la section, en deux colonnes face a face SOUS la mise en page a
   deux colonnes : la promesse a gauche, ce qu'elle donne au quotidien a
   droite. Pleine largeur, sinon la justification tomberait a 25 caracteres.
   Les deux blocs n'ont plus ni taille ni famille propres : ils suivent le
   niveau "texte principal" de l'echelle editoriale, comme les paragraphes
   au-dessus. Ce qui les distingue est le filet d'accent et l'amorce en gras,
   pas un troisieme corps de texte. */
.ai-trust-story__outcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: var(--space-block);
}
.ai-trust-story__outcome > p { color: var(--color-content-strong); }
.ai-trust-story__closing {
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

@media (max-width: 900px) {
  .ai-trust-story__layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .ai-trust-story__illustration {
    position: relative;
    top: auto;
    width: min(100%, 36rem);
  }
  .ai-trust-story__content { max-width: 50rem; }
  .ai-trust-story__outcome { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 560px) {
  .ai-trust-story__illustration { width: min(100%, 29rem); }
}

/* Langage commun aux apercus du produit. */
.product-demo {
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-modal);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.product-demo__bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-brand-line-soft);
  background: var(--color-surface);
  color: var(--color-content-muted);
  font-size: var(--text-caption);
}
.product-demo__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-content-strong);
  font-weight: 700;
}
.product-demo__brand svg { color: var(--accent-strong); }
.product-overline {
  display: block;
  margin-bottom: .25rem;
  color: var(--color-content-muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
}


.feature-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-brand-line);
  background: var(--color-surface);
}
.feature-tabs [role="tab"] {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-right: 1px solid var(--color-brand-line-soft);
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  font-weight: 650;
  text-align: center;
}
.feature-tabs [role="tab"]:last-child { border-right: 0; }
.feature-tabs [role="tab"] span {
  font-family: var(--font-mono);
  color: var(--color-content-soft);
  font-size: var(--text-micro);
}
.feature-tabs [role="tab"]::after {
  content: "";
  position: absolute;
  right: .75rem;
  bottom: 0;
  left: .75rem;
  height: 3px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--motion-fast);
}
.feature-tabs [role="tab"]:hover { background: var(--color-brand-beige); color: var(--color-content-strong); }
.feature-tabs [role="tab"][aria-selected="true"] { color: var(--color-content-strong); background: var(--accent-tint); }
.feature-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tabs-enhanced .feature-tab-panel[hidden] { display: none; }
.tabs-enhanced .feature-tab-panel.is-entering { animation: feature-panel-in var(--motion-base) ease-out both; }

/* Deux modules visibles et complementaires : Evenements emploi et Atelier d actions. */
.feature-tab-panel { min-width: 0; }
.events-screen, .action-draft-screen { padding: 1.4rem; }
.events-screen { background: var(--color-surface-sunken); }
.events-screen__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.events-screen__head h3 {
  font-size: var(--text-section);
}
.demo-chip, .draft-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .55rem;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-content-muted);
  font-size: var(--text-micro);
  font-weight: 650;
}
.event-search {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  gap: .6rem;
  margin: 1.2rem 0;
}
.event-search__field { position: relative; display: flex; }
.event-search__field svg {
  position: absolute;
  top: 50%;
  left: .8rem;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-content-soft);
  stroke-width: 1.7;
}
.event-search__field input {
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem .55rem 2.4rem;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-content-strong);
}
.event-search__field input::placeholder { color: var(--color-content-soft); }
.event-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.event-result {
  display: flex;
  min-width: 0;
  min-height: 20rem;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--color-brand-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
}
.event-result__top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--color-content-muted); font-size: var(--text-micro); }
.event-result__top > span { padding: .15rem .4rem; border: 1px solid var(--color-brand-line-soft); border-radius: var(--radius-pill); }
.event-result__top .event-type { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.event-result h4 { margin: .75rem 0; font-size: var(--text-body); }
.event-result dl { display: grid; gap: .5rem; }
.event-result dl div { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); gap: .5rem; font-size: var(--text-caption); }
.event-result dt { color: var(--color-content-soft); }
.event-result dd { color: var(--color-content); }
.event-result__action {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: .55rem .7rem;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-control);
  color: var(--accent-strong);
  font-size: var(--text-caption);
  font-weight: 700;
}
.event-result__action:hover { background: var(--accent-tint); border-color: var(--accent); }


.action-draft-screen { padding: 1.25rem 2.4rem 1.4rem; background: var(--color-surface-sunken); }
.action-record {
  position: relative;
  overflow: visible;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.action-record__header {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--accent-tint);
}
.action-record__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-inner);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.action-record__icon svg, .action-record__body-icon svg, .action-record__tools svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action-record__category {
  display: block;
  margin-bottom: .25rem;
  color: var(--accent-strong);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.action-record__header h3 { max-width: 43rem; font-size: var(--text-page); line-height: 1.18; }
.draft-state {
  gap: .35rem;
  border-color: var(--color-brand-line-soft);
  background: var(--color-surface);
  color: var(--color-content-strong);
}
.action-record__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--color-brand-line-soft);
}
.action-record__meta > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-pill);
  color: var(--color-content-muted);
  font-size: var(--text-micro);
}
.action-record__meta strong { color: var(--color-content-strong); font-weight: 650; }
.action-record__meta b { color: var(--accent-strong); font-weight: 500; }
.action-record__body {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .85rem;
  min-height: 12rem;
  padding: 1.2rem 3.2rem 1.35rem 1.15rem;
}
.action-record__body-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  color: var(--color-content-soft);
}
.action-record__body p { color: var(--color-content); font-size: var(--text-body-sm); line-height: 1.65; }
.action-record__tools {
  position: absolute;
  top: 50%;
  right: -1.25rem;
  display: grid;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.action-record__tools span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--color-content-muted); border-bottom: 1px solid var(--color-brand-line-soft); }
.action-record__tools span:last-child { border-bottom: 0; }
.action-record__validation {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.15rem;
  border-top: 1px solid var(--color-brand-line-soft);
}
.action-record__validation button { min-height: 36px; padding: .4rem .7rem; border: 1px solid var(--color-brand-line); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-content-soft); font-size: var(--text-caption); }
.action-record__validation p { color: var(--color-content-muted); font-size: var(--text-caption); }
.action-record__footer { padding: .75rem 1.15rem; border-top: 1px solid var(--color-brand-line-soft); color: var(--color-content-soft); font-size: var(--text-micro); }
.action-record__demo-note { margin-top: .75rem; color: var(--color-content-soft); font-size: var(--text-micro); text-align: right; }

.action-framework {
  padding-top: 2.5rem !important;
  background: var(--color-surface) !important;
}
.action-framework__layout {
  display: grid;
  grid-template-columns: minmax(18rem, .9fr) minmax(22rem, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.action-framework__content {
  max-width: 40rem;
  margin: 0;
}
.action-framework__content > p:not(.section-subtitle) {
  max-width: var(--measure-copy);
  margin-top: var(--space-copy);
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.action-framework__illustration {
  width: min(100%, 38rem);
  justify-self: center;
}
.action-framework__illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Quatre espaces font converger leurs donnees dans un flux unique. */
.work-flow {
  display: flex;
  min-height: 100svh;
  align-items: center;
}
.work-flow > .container { width: 100%; }
.work-flow__lead {
  margin-bottom: var(--space-heading);
}
.work-flow__lead .feature-story__heading { margin: 0 auto; }
.work-flow__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.work-flow__title-copy { min-width: 0; }
.work-flow__title-row .section-title { margin: 0; }
.work-flow__payroll-spot {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  width: clamp(7.5rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
}
.work-flow__payroll-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
.work-flow__payroll-segment {
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 23 77;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.work-flow__payroll-segment--prune { stroke: var(--duo-prune); }
.work-flow__payroll-segment--violet { stroke: color-mix(in srgb, var(--duo-prune) 58%, var(--duo-indigo)); stroke-dashoffset: -25; }
.work-flow__payroll-segment--indigo { stroke: var(--duo-indigo); stroke-dashoffset: -50; }
.work-flow__payroll-segment--petrole { stroke: color-mix(in srgb, var(--duo-indigo) 56%, var(--duo-petrole)); stroke-dashoffset: -75; }
.work-flow__payroll-spot > span {
  position: relative;
  color: color-mix(in srgb, var(--duo-prune) 86%, var(--color-content-strong));
  font-family: var(--font-display-cozy);
  font-size: clamp(.95rem, 1.35vw, 1.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.018em;
  text-align: center;
  transform: rotate(-5deg);
}
.responsibility-flow { position: relative; }
.responsibility-flow__line {
  position: absolute;
  top: 1.5rem;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--color-brand-line);
}
.responsibility-flow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.responsibility-flow li { position: relative; min-width: 0; padding-top: 4.15rem; text-align: center; }
.responsibility-flow__number {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-pill);
  background: var(--color-brand-cream);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 700;
}
.responsibility-flow h3 { min-height: 3.1rem; max-width: 17rem; margin: 0 auto .7rem; font-size: var(--text-title); }
.responsibility-flow li > p { max-width: 18rem; margin-inline: auto; color: var(--color-content-muted); font-size: var(--text-body-sm); line-height: var(--leading-compact); }
.work-flow__notes { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-top: var(--space-heading); }
.work-flow__notes > p:last-child { max-width: var(--measure-narrow); padding-top: 1.4rem; color: var(--color-content-muted); font-size: var(--text-body-sm); line-height: var(--leading-copy); }

/* Messagerie : composition plus calme et plus compacte. */
.messaging-story__layout { display: grid; grid-template-columns: minmax(17rem, .65fr) minmax(0, 1.35fr); gap: 3rem; align-items: center; }
.messaging-story__layout .feature-story__heading { margin-bottom: 0; }
.message-demo__bar { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--color-brand-line); }
.message-demo__bar button { min-height: 36px; padding: .35rem .65rem; border-radius: var(--radius-control); background: var(--accent-solid); color: var(--on-accent); font-size: var(--text-caption); font-weight: 700; }
.message-demo__body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: 27rem; }
.message-list { border-right: 1px solid var(--color-brand-line); background: var(--color-surface-sunken); }
.message-list [role="tab"] { position: relative; display: flex; width: 100%; min-height: 82px; flex-direction: column; justify-content: center; padding: .8rem; border-bottom: 1px solid var(--color-brand-line-soft); text-align: left; }
.message-list [role="tab"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform var(--motion-fast); }
.message-list [role="tab"]:hover { background: var(--color-brand-beige); }
.message-list [role="tab"][aria-selected="true"] { background: var(--accent-tint); }
.message-list [role="tab"][aria-selected="true"]::before { transform: scaleY(1); }
.message-list strong { color: var(--color-content-strong); font-size: var(--text-caption); line-height: 1.35; }
.message-list span { margin-top: .25rem; color: var(--color-content-muted); font-size: var(--text-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-conversations { min-width: 0; background: var(--color-surface-sunken); }
.message-thread { min-height: 27rem; }
.message-thread__head { display: flex; min-height: 64px; flex-direction: column; justify-content: center; padding: .75rem 1rem; border-bottom: 1px solid var(--color-brand-line-soft); background: var(--color-surface); }
.message-thread__head strong { font-size: var(--text-body-sm); }
.message-thread__head span { color: var(--color-content-muted); font-size: var(--text-micro); }
.message-bubbles { display: grid; gap: .7rem; align-content: end; min-height: 22rem; padding: 1.1rem; }
.message-bubbles p { width: min(85%, 25rem); padding: .7rem .8rem; border: 1px solid var(--color-brand-line-soft); border-radius: .3rem var(--radius-inner) var(--radius-inner) var(--radius-inner); background: var(--color-surface); color: var(--color-content); font-size: var(--text-caption); }
.message-bubbles p span { display: block; margin-bottom: .2rem; color: var(--color-content-soft); font-size: var(--text-micro); font-weight: 700; }
.message-bubbles .message-bubbles__self { justify-self: end; border-color: color-mix(in srgb, var(--accent) 24%, var(--color-brand-line)); border-radius: var(--radius-inner) .3rem var(--radius-inner) var(--radius-inner); background: var(--accent-tint); }

/* Rapport : explication editoriale, sans faux ecran ni donnees inventees. */
.reporting-story__heading {
  max-width: 70rem;
  margin-inline: auto;
  text-align: center;
}
.reporting-story__heading > .section-subtitle {
  margin-inline: auto;
}
.reporting-story__heading .feature-story__copy {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
  gap: .75rem;
  margin-inline: auto;
}
.reporting-readings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-heading);
  align-items: start;
  max-width: 64rem;
  margin-inline: auto;
  padding-block: var(--space-heading);
}
.reporting-readings__intro {
  max-width: var(--measure-copy);
  margin-inline: auto;
  text-align: center;
}
.reporting-readings__intro > .section-subtitle {
  margin-inline: auto;
}
.reporting-readings__intro > p:not(.section-subtitle) {
  margin-top: var(--space-copy);
  color: var(--color-content-muted);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.reporting-readings__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.reporting-deck__controls { display: none; }
.reporting-readings__content.is-deck-ready {
  padding-top: 1.75rem;
}
.reporting-readings__content.is-deck-ready section {
  grid-area: 1 / 1;
  transition:
    transform 680ms cubic-bezier(.2, .72, .2, 1),
    opacity 420ms ease,
    filter 680ms ease;
}
.reporting-readings__content.is-deck-ready section:not(.is-active) {
  z-index: 1;
  pointer-events: none;
  opacity: .68;
  filter: saturate(.72) brightness(1.08);
  transform: translateY(-1.75rem) scale(.955);
}
.reporting-readings__content.is-deck-ready section.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: none;
  animation: reporting-card-forward 680ms cubic-bezier(.2, .72, .2, 1) both;
}
.reporting-readings__content.is-deck-ready .reporting-deck__controls {
  position: absolute;
  top: calc(50% + .875rem);
  right: 1rem;
  z-index: 4;
  display: grid;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--on-accent) 32%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.reporting-deck__controls button {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--accent-strong);
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.reporting-deck__controls button + button { border-top: 1px solid var(--color-brand-line-soft); }
.reporting-deck__controls button:hover { background: var(--accent-soft); }
.reporting-deck__controls button:focus-visible { z-index: 1; outline: 2px solid var(--accent-strong); outline-offset: -3px; }
.reporting-deck__controls svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reporting-deck__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.reporting-readings__content section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  min-height: 18rem;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(5.25rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(135deg, var(--accent-solid), color-mix(in srgb, var(--duo-prune-solid) 72%, var(--duo-indigo-solid)));
  box-shadow: var(--shadow-md);
  color: var(--on-accent);
}
.reporting-readings__content section + section {
  border-top: 0;
  background: linear-gradient(135deg, var(--duo-indigo-solid), color-mix(in srgb, var(--duo-indigo-solid) 64%, var(--duo-petrole-solid)));
}
.reporting-readings__content section::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 25rem;
  height: 25rem;
  border: 4rem solid color-mix(in srgb, var(--on-accent) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.reporting-readings__content h4 {
  position: relative;
  z-index: 1;
  max-width: 18rem;
  color: var(--on-accent);
  font-family: var(--font-display-cozy);
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}
.reporting-readings__body { position: relative; z-index: 1; min-width: 0; }
.reporting-readings__content p {
  margin-top: 0;
  /* 88 % a l'origine. Sur les aplats du mode sombre, plus clairs que ceux du
     mode clair, un blanc a 88 % ne pesait plus que 4.20:1 (4.5 exiges). Le
     pire aplat, le petrole plein #1a7a96, ne laisse que 4.92:1 au blanc PLEIN :
     la marge est etroite, il faut donc au moins 94 %. En mode clair l'ecart
     est invisible, les aplats y sont bien plus sombres. */
  color: color-mix(in srgb, var(--on-accent) 94%, transparent);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.reporting-readings__content ul { display: grid; gap: .18rem; margin-top: .8rem; }
.reporting-readings__content li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--on-accent);
  font-size: var(--text-body);
  line-height: 1.45;
}
.reporting-readings__content li::before {
  content: "";
  position: absolute;
  top: .36em;
  left: 0;
  width: .78rem;
  height: .78rem;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' fill-rule='evenodd' d='M14 10H28A22 22 0 0 1 28 54H14ZM30.87 15.75A16.5 16.5 0 0 1 30.87 48.25L29.99 43.32A11.5 11.5 0 0 0 29.99 20.68Z'/%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 64 64'%3E%3Cpath fill='black' fill-rule='evenodd' d='M14 10H28A22 22 0 0 1 28 54H14ZM30.87 15.75A16.5 16.5 0 0 1 30.87 48.25L29.99 43.32A11.5 11.5 0 0 0 29.99 20.68Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes reporting-card-forward {
  from { opacity: .72; filter: saturate(.75) brightness(1.06); transform: translateY(-1.75rem) scale(.955); }
  to { opacity: 1; filter: none; transform: none; }
}
/* Les fonctions secondaires restent une liste documentaire, pas un mur de cartes. */
.other-features .section-header { max-width: 54rem; }
.feature-disclosures { border-top: 1px solid var(--color-brand-line); }
.feature-disclosures details { border-bottom: 1px solid var(--color-brand-line); }
.feature-disclosures summary { display: flex; min-height: 66px; align-items: center; gap: 1rem; padding: .9rem .15rem; color: var(--color-content-strong); font-size: var(--text-title); font-weight: 700; list-style: none; cursor: pointer; }
.feature-disclosures summary::-webkit-details-marker { display: none; }
.feature-disclosures summary span { color: var(--accent-strong); font-family: var(--font-mono); font-size: var(--text-caption); }
.feature-disclosures summary::after { content: "+"; margin-left: auto; color: var(--color-content-muted); font-size: var(--text-section); font-weight: 400; }
.feature-disclosures details[open] summary::after { content: "−"; }
.feature-disclosures details[open] summary { color: var(--accent-strong); }
.feature-disclosures dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; padding: .25rem 0 1.5rem 2rem; }
.feature-disclosures dl > div { padding: .9rem 0; border-top: 1px solid var(--color-brand-line-soft); }
.feature-disclosures dt { color: var(--color-content-strong); font-size: var(--text-body-sm); font-weight: 700; }
.feature-disclosures dd { margin-top: .35rem; color: var(--color-content-muted); font-size: var(--text-body-sm); line-height: var(--leading-compact); }

.short-philosophy { background: var(--color-brand-cream) !important; }
.short-philosophy__layout {
  display: grid;
  grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr);
  gap: 3rem 4rem;
  align-items: center;
}
.short-philosophy__content { max-width: var(--measure-copy); }
.short-philosophy__illustration {
  min-width: 0;
  margin: 0;
}
.short-philosophy__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.short-philosophy__content > p:not(.feature-emphasis) { margin-top: var(--space-copy); font-size: var(--text-body); line-height: var(--leading-copy); }
.short-philosophy details { margin-top: var(--space-block); padding-top: 1rem; border-top: 1px solid var(--color-brand-line); }
.short-philosophy summary { min-height: 44px; color: var(--color-content-muted); font-size: var(--text-body-sm); font-weight: 650; line-height: var(--leading-compact); cursor: pointer; }
.short-philosophy details p { max-width: var(--measure-copy); margin-top: .7rem; color: var(--color-content-muted); font-size: var(--text-body-sm); line-height: var(--leading-copy); }

/* Les mots arrivent de profondeurs opposees et se rejoignent sur leur ligne.
   Le mouvement reste porte par le texte, sans element decoratif ajoute. */
.section-title.heading-motion-ready {
  perspective: 900px;
  transform-style: preserve-3d;
}
.heading-subtitle-motion-ready {
  perspective: 700px;
  transform-style: preserve-3d;
}
.heading-motion-word {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(var(--word-title-x), 22px, -110px)
    rotateX(-24deg) rotateY(var(--word-title-yaw));
  transform-origin: center 80%;
  will-change: transform, opacity, filter;
}
.heading-subtitle-motion-ready .heading-motion-word {
  filter: blur(4px);
  transform: translate3d(var(--word-subtitle-x), 12px, -48px)
    rotateX(-12deg) rotateY(var(--word-subtitle-yaw));
}
.heading-motion-visible .heading-motion-word {
  animation: heading-word-converge .88s cubic-bezier(.16, .78, .2, 1) both;
  animation-delay: var(--word-title-delay);
}
.heading-subtitle-motion-ready.heading-motion-visible .heading-motion-word {
  animation-name: heading-subtitle-word-converge;
  animation-duration: .72s;
  animation-delay: var(--word-subtitle-delay);
}

/* Reveil editorial unique. Sans script, tout demeure visible. */
[data-feature-reveal].is-reveal-ready { opacity: 0; transform: translateY(14px); }
[data-feature-reveal].is-reveal-ready.is-visible { animation: feature-copy-in var(--motion-slow) ease-out forwards; }
[data-feature-flow].is-reveal-ready li { opacity: 0; transform: translateY(10px); }
[data-feature-flow].is-reveal-ready.is-visible li { animation: feature-step-in var(--motion-base) ease-out forwards; }
[data-feature-flow].is-reveal-ready.is-visible li:nth-child(2) { animation-delay: 70ms; }
[data-feature-flow].is-reveal-ready.is-visible li:nth-child(3) { animation-delay: 140ms; }
[data-feature-flow].is-reveal-ready.is-visible li:nth-child(4) { animation-delay: 210ms; }
[data-feature-flow].is-reveal-ready.is-visible li:nth-child(5) { animation-delay: 280ms; }
[data-feature-flow].is-reveal-ready.is-visible li:nth-child(6) { animation-delay: 350ms; }

@keyframes feature-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes feature-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes feature-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heading-word-converge {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(var(--word-title-x), 22px, -110px)
      rotateX(-24deg) rotateY(var(--word-title-yaw));
  }
  62% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--word-settle-x), -2px, 10px)
      rotateX(2deg) rotateY(var(--word-settle-yaw));
  }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
}
@keyframes heading-subtitle-word-converge {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(var(--word-subtitle-x), 12px, -48px)
      rotateX(-12deg) rotateY(var(--word-subtitle-yaw));
  }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
}

@media (max-width: 1060px) {
  .event-results { grid-template-columns: 1fr; }
  .event-result { min-height: auto; }
  .event-result__action { margin-top: 1rem; }
  .responsibility-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .responsibility-flow__line { display: none; }
  .responsibility-flow h3 { min-height: auto; }
}

@media (max-width: 900px) {
  .feature-story__heading--split, .messaging-story__layout { grid-template-columns: 1fr; gap: 2rem; }
  .feature-story__heading--split { align-items: start; }
  .action-framework__layout { grid-template-columns: 1fr; gap: 2rem; }
  .action-framework__content { order: -1; max-width: 46rem; }
  .action-framework__illustration { width: min(100%, 34rem); }
  .daily-intro__layout { grid-template-columns: 1fr; gap: 2rem; }
  .short-philosophy__layout { grid-template-columns: 1fr; }
  .short-philosophy__content { max-width: 52rem; }
  .short-philosophy__illustration { width: min(100%, 48rem); }
  .site-illustration--large, .site-illustration--medium { justify-self: center; }
  .site-illustration--large { width: min(100%, 40rem); }
  .site-illustration--medium { width: min(100%, 32rem); }
  .message-demo { width: 100%; }
  .work-flow__notes { flex-direction: column; gap: .5rem; }
  .work-flow__notes > p:last-child { padding-top: 0; }
  .reporting-readings { grid-template-columns: 1fr; gap: 2.5rem; }
  .reporting-readings__intro { max-width: 42rem; }
}

@media (max-width: 700px) {
  .daily-intro { padding-block: 4rem !important; }
  .work-flow__title-row {
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
  .feature-story__copy { grid-template-columns: 1fr; gap: .75rem; }
  .reporting-readings__content section {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 4.5rem 2rem 1.5rem;
  }
  .reporting-readings__content.is-deck-ready .reporting-deck__controls { right: .65rem; }
  .product-demo__bar { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .feature-tabs [role="tab"] { align-items: flex-start; flex-direction: column; justify-content: center; gap: .1rem; padding-inline: .65rem; }
  .event-search { grid-template-columns: 1fr 1fr; }
  .event-search__field { grid-column: 1 / -1; }
  .events-screen__head { flex-direction: column; }
  .responsibility-flow ol { grid-template-columns: 1fr; gap: 2.5rem; }
  .responsibility-flow h3 { min-height: auto; }
  .message-demo__body { grid-template-columns: 1fr; min-height: auto; }
  .message-list { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-brand-line); }
  .message-list [role="tab"] { min-height: 72px; border-right: 1px solid var(--color-brand-line-soft); border-bottom: 0; }
  .message-list [role="tab"]::before { top: auto; right: .6rem; bottom: 0; left: .6rem; width: auto; height: 3px; transform: scaleX(0); }
  .message-list [role="tab"][aria-selected="true"]::before { transform: scaleX(1); }
  .message-thread, .message-bubbles { min-height: 21rem; }
  .feature-disclosures dl { grid-template-columns: 1fr; padding-left: 0; }
  .site-illustration--large { width: 100%; }
  .site-illustration--medium { width: min(100%, 28rem); }
  .action-draft-screen { padding-inline: 1.2rem; }
  .action-record__header { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .8rem; }
  .action-record__icon { width: 2.5rem; height: 2.5rem; }
  .action-record__header .draft-state { grid-column: 2; justify-self: start; }
  .action-record__tools {
    position: static;
    grid-column: 1 / -1;
    display: flex;
    width: fit-content;
    margin-top: .4rem;
    transform: none;
  }
  .action-record__tools span { border-right: 1px solid var(--color-brand-line-soft); border-bottom: 0; }
  .action-record__tools span:last-child { border-right: 0; }
  .action-record__body { padding-right: 1.15rem; }
}

@media (max-width: 520px) {
  .hero-dashboard__wrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-feature-reveal].is-reveal-ready,
  [data-feature-flow].is-reveal-ready li,
  .section-title.heading-motion-ready,
  .heading-subtitle-motion-ready,
  .heading-motion-word { opacity: 1; filter: none; transform: none; }
  [data-feature-reveal].is-reveal-ready.is-visible,
  [data-feature-flow].is-reveal-ready.is-visible li,
  .section-title.heading-motion-ready.heading-motion-visible,
  .heading-subtitle-motion-ready.heading-motion-visible,
  .heading-motion-visible .heading-motion-word,
  .tabs-enhanced .feature-tab-panel.is-entering { animation: none !important; }
  .reporting-readings__content.is-deck-ready section,
  .security-editorial__details.is-deck-ready article { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   9. SUGGESTIONS D’ACTIONS
   ========================================================================== */

.action-suggestions {
  position: relative;
  overflow: hidden;
}
.suggestions-method {
  max-width: 70rem;
  margin-inline: auto;
  padding-block: var(--space-heading);
}
.suggestions-method__intro {
  display: grid;
  justify-items: center;
  gap: .65rem;
  text-align: center;
}
.suggestions-method__intro .section-title { max-width: 54rem; }
.suggestions-method__intro > .section-subtitle {
  max-width: 60rem;
  margin-top: 0;
  color: var(--color-content);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-copy);
}
.suggestions-method__steps {
  position: relative;
  display: grid;
  max-width: 62rem;
  margin: var(--space-heading) auto 0;
}
.suggestions-method__steps::before {
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  width: 2px;
  background: var(--color-brand-line);
  content: "";
}
.suggestions-method__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  padding: 0 0 2rem;
}
.suggestions-method__steps li:last-child { padding-bottom: 0; }
.suggestions-method__number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
}
.suggestions-method__steps li > div {
  min-width: 0;
  padding: .15rem 0 .25rem;
}
.suggestions-method__steps h4 {
  color: var(--color-content-strong);
  font-size: var(--text-title);
}
.suggestions-method__steps p {
  margin-top: .45rem;
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-copy);
}
.suggestions-method__privacy-step .suggestions-method__number {
  border-color: var(--accent-action);
  background: var(--accent-action);
  color: var(--on-accent);
}
.inference-note {
  max-width: 62rem;
  margin: .5rem auto 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
  background: var(--color-surface-sunken);
  color: var(--color-content-strong);
  font-size: var(--text-body-sm);
  font-weight: 550;
  line-height: var(--leading-copy);
}

@media (max-width: 700px) {
  .suggestions-method { padding-block: 2rem; }
  .suggestions-method__intro { justify-items: start; text-align: left; }
  .suggestions-method__steps { margin-top: 2rem; }
  .suggestions-method__steps li { gap: .8rem; padding-bottom: 1.75rem; }
}

@media (max-width: 430px) {
  .suggestions-method__steps { margin-left: -.1rem; }
  .suggestions-method__steps li { grid-template-columns: 2.55rem minmax(0, 1fr); gap: .7rem; }
  .suggestions-method__steps::before { left: 1.275rem; }
  .suggestions-method__number { width: 2.55rem; height: 2.55rem; }
}

/* ==========================================================================
   10. SECURITE
   ========================================================================== */

.security-foundation {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(42rem 30rem at 82% 18%, color-mix(in srgb, var(--duo-petrole) 11%, transparent), transparent 72%),
    radial-gradient(32rem 24rem at 8% 46%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    radial-gradient(28rem 22rem at 94% 86%, color-mix(in srgb, var(--color-terracotta) 7%, transparent), transparent 72%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-brand-ivory) 94%, var(--accent) 6%),
      var(--color-brand-ivory) 52%,
      color-mix(in srgb, var(--color-brand-ivory) 95%, var(--color-state-success-fg) 5%)
    );
}
.security-foundation .container { position: relative; z-index: 1; }

.security-editorial__intro {
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}
.security-editorial__intro .section-subtitle { margin-inline: auto; }
.security-editorial__intro > p:not(.section-subtitle) {
  max-width: var(--measure-wide);
  margin: var(--space-copy) auto 0;
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.security-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 70rem;
  margin: var(--space-heading) auto 0;
  border-top: 1px solid var(--color-brand-line);
  border-bottom: 1px solid var(--color-brand-line);
}
.security-principles > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.security-principles > li:nth-child(even) { border-left: 1px solid var(--color-brand-line-soft); }
.security-principles > li:nth-child(n + 3) { border-top: 1px solid var(--color-brand-line-soft); }
.security-principles__number {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 750;
  line-height: 1.8;
}
.security-principles h3,
.security-editorial__details h3 {
  color: var(--color-content-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-title);
  line-height: var(--leading-heading);
}
.security-principles p,
.security-editorial__details p {
  margin-top: .6rem;
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-copy);
}
.security-editorial__details {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 64rem;
  margin: var(--space-heading) auto 0;
}
.security-editorial__details article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, .62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4rem);
  min-height: 16rem;
  align-items: start;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(5.25rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(135deg, var(--accent-solid), color-mix(in srgb, var(--duo-prune-solid) 72%, var(--duo-indigo-solid)));
  box-shadow: var(--shadow-md);
  color: var(--on-accent);
}
.security-editorial__details article + article {
  padding-left: clamp(2rem, 4vw, 3.5rem);
  border: 0;
}
.security-editorial__details article:nth-child(2) {
  background: linear-gradient(135deg, var(--duo-prune-solid), color-mix(in srgb, var(--duo-prune-solid) 58%, var(--duo-indigo-solid)));
}
.security-editorial__details article:nth-child(3) {
  background: linear-gradient(135deg, var(--duo-indigo-solid), color-mix(in srgb, var(--duo-indigo-solid) 64%, var(--duo-petrole-solid)));
}
.security-editorial__details article:nth-child(4) {
  background: linear-gradient(135deg, var(--duo-petrole-solid), color-mix(in srgb, var(--duo-petrole-solid) 60%, var(--duo-acier-solid)));
}
.security-editorial__details article:nth-child(5) {
  background: linear-gradient(135deg, var(--duo-acier-solid), color-mix(in srgb, var(--duo-acier-solid) 55%, var(--duo-prune-solid)));
}
.security-editorial__details article:nth-child(6) {
  background: linear-gradient(135deg, var(--duo-prune-solid), color-mix(in srgb, var(--duo-prune-solid) 60%, var(--duo-petrole-solid)));
}
.security-editorial__details article::after {
  content: "";
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 25rem;
  height: 25rem;
  border: 4rem solid color-mix(in srgb, var(--on-accent) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.security-editorial__details h3,
.security-editorial__details p {
  position: relative;
  z-index: 1;
  color: var(--on-accent);
}
.security-editorial__details h3 { font-size: var(--text-section); }
.security-card__number {
  display: block;
  margin-bottom: .7rem;
  /* 78 % a l'origine : 3.65:1 sur le pire aplat sombre. Le numero fait partie
     du titre de la carte, il doit se lire comme lui. Sa mise en retrait est
     desormais portee par la taille, la fonte a chasse fixe et l'interlettrage,
     pas par la transparence, qui ne peut plus descendre sous 94 %. */
  color: color-mix(in srgb, var(--on-accent) 94%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 750;
  letter-spacing: .04em;
  line-height: 1;
}
.security-editorial__details p {
  margin-top: 0;
  /* Meme raison que .reporting-readings__content p ci-dessus. */
  color: color-mix(in srgb, var(--on-accent) 94%, transparent);
  font-size: var(--text-body);
}
.security-editorial__details.is-deck-ready { padding-top: 1.75rem; }
.security-editorial__details.is-deck-ready article {
  grid-area: 1 / 1;
  transition:
    transform 680ms cubic-bezier(.2, .72, .2, 1),
    opacity 420ms ease,
    filter 680ms ease;
}
.security-editorial__details.is-deck-ready article:not(.is-active) {
  z-index: 1;
  pointer-events: none;
  opacity: .68;
  filter: saturate(.72) brightness(1.08);
  transform: translateY(-1.75rem) scale(.955);
}
.security-editorial__details.is-deck-ready article.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: none;
  animation: reporting-card-forward 680ms cubic-bezier(.2, .72, .2, 1) both;
}
.security-editorial__details.is-deck-ready .reporting-deck__controls {
  position: absolute;
  top: calc(50% + .875rem);
  right: 1rem;
  z-index: 4;
  display: grid;
  overflow: hidden;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--on-accent) 32%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.security-editorial__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 70rem;
  margin: var(--space-heading) auto 0;
  padding-block: var(--space-block);
  border-top: 1px solid var(--color-brand-line);
  border-bottom: 1px solid var(--color-brand-line);
}
.security-editorial__footer > p {
  max-width: 42rem;
  color: var(--color-content);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: var(--leading-copy);
}
.security-editorial__footer .security-trust-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-self: end;
  gap: .35rem;
  margin-top: 0;
}
.security-editorial__footer .security-trust-links a {
  min-height: 0;
  justify-content: center;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  color: var(--color-content);
  font-size: var(--text-caption);
  font-weight: 550;
  text-align: center;
  text-decoration: none;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.security-editorial__footer .security-trust-links a:last-child {
  background: var(--accent-solid);
  color: var(--on-accent);
}
.security-editorial__footer .security-trust-links a:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.security-editorial__footer .security-trust-links a:last-child:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

@media (max-width: 700px) {
  .security-principles,
  .security-editorial__details { grid-template-columns: 1fr; }
  .security-principles > li:nth-child(even) { border-left: 0; }
  .security-principles > li + li { border-top: 1px solid var(--color-brand-line-soft); }
  .security-editorial__details article,
  .security-editorial__details article + article {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 4.5rem 2rem 1.5rem;
  }
  .security-editorial__details.is-deck-ready .reporting-deck__controls { right: .65rem; }
  .security-editorial__footer { grid-template-columns: 1fr; }
  .security-editorial__footer .security-trust-links {
    align-items: flex-start;
    justify-self: start;
  }
  /* Cible tactile : la hauteur reduite du bureau repasse a 44 px au doigt. */
  .security-editorial__footer .security-trust-links a { min-height: 44px; }
}

.security-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(18rem, .78fr);
  gap: clamp(2rem, 5vw, 5.25rem);
  align-items: center;
}

.security-hero__copy {
  position: relative;
  max-width: 46rem;
  padding-block: clamp(.5rem, 2vw, 1.5rem);
}
.security-hero__copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2.2rem;
  left: -2.4rem;
  width: min(34rem, 84vw);
  height: 10.5rem;
  border-radius: 44% 56% 52% 48%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: rotate(-2deg);
}
.security-kicker {
  margin-bottom: .8rem;
  color: var(--accent-strong);
  font-size: var(--text-caption);
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.security-title {
  max-width: 18ch;
  font-family: var(--font-display-cozy);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}
.security-lead {
  max-width: var(--measure-copy);
  margin-top: 1.25rem;
  color: var(--color-content);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}
.security-architecture {
  display: flex;
  max-width: 43rem;
  align-items: center;
  gap: .8rem;
  margin-top: 1.35rem;
  color: var(--color-content-strong);
  font-size: var(--text-body-sm);
  font-weight: 700;
  line-height: var(--leading-compact);
}
.security-architecture > span {
  display: grid;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--color-brand-line));
  border-radius: var(--radius-inner);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.security-architecture svg { width: 1.25rem; height: 1.25rem; }

.security-visual {
  position: relative;
  width: min(100%, 27rem);
  min-width: 0;
  margin: 0;
  justify-self: end;
}
.security-visual__glow {
  position: absolute;
  inset: 13% 8% 10%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--duo-petrole) 25%, transparent);
  filter: blur(2.5rem);
}
.security-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, var(--color-content-strong) 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, var(--color-content-strong) 48%, transparent 100%);
  filter: drop-shadow(0 1.1rem 1.8rem color-mix(in srgb, var(--color-content-strong) 18%, transparent));
}

/* Une seule assise, partagee par les quatre garanties. Les separateurs et les
   reperes colores evitent l'effet de quatre cartes independantes. */
.security-guarantees {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-surface) 91%, transparent);
  box-shadow: var(--shadow-sm);
}
.security-guarantees > li {
  --guarantee-color: var(--duo-acier);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  min-width: 0;
  padding: 1.15rem 1rem;
  border-left: 1px solid var(--color-brand-line-soft);
}
.security-guarantees > li:first-child { border-left: 0; }
.security-guarantees > li:nth-child(2) { --guarantee-color: var(--color-state-success-fg); }
.security-guarantees > li:nth-child(3) {
  --guarantee-color: color-mix(in srgb, var(--color-terracotta) 68%, var(--color-content-strong));
}
.security-guarantees > li:nth-child(4) { --guarantee-color: var(--color-state-warning-fg); }
.security-guarantee__marker {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--guarantee-color) 14%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guarantee-color) 28%, transparent);
  color: var(--guarantee-color);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 750;
}
.security-guarantees h3 {
  min-height: 2.8em;
  font-size: var(--text-body-sm);
  line-height: 1.4;
}
.security-guarantees p {
  margin-top: .35rem;
  color: var(--color-content-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

.security-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.security-panel {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--accent) 6%);
  box-shadow: var(--shadow-sm);
}
.security-panel--ai {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--duo-petrole) 6%);
}
.security-panel__number {
  position: absolute;
  top: .7rem;
  right: 1.15rem;
  color: color-mix(in srgb, var(--accent) 22%, var(--color-surface));
  font-family: var(--font-display-cozy);
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.security-panel--ai .security-panel__number {
  color: color-mix(in srgb, var(--duo-petrole) 22%, var(--color-surface));
}
.security-panel > h3 {
  position: relative;
  max-width: 21ch;
  padding-right: 2.5rem;
  font-family: var(--font-display-cozy);
  font-size: var(--text-page);
  line-height: var(--leading-heading);
}
.security-panel > h3 + p {
  position: relative;
  max-width: 58ch;
  margin-top: 1rem;
  color: var(--color-content);
  font-size: var(--text-body-sm);
  line-height: var(--leading-copy);
}
.security-panel ul { display: grid; gap: .55rem; margin-top: 1.25rem; }
.security-panel li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-content-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-compact);
}
.security-panel li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 0;
  width: .45rem;
  height: .45rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
}
.security-panel--ai li::before { background: var(--duo-petrole); }
.security-panel__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 1rem;
  font-size: var(--text-caption);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.security-panel__conclusion {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-brand-line-soft);
  color: var(--color-content-strong);
  font-size: var(--text-body-sm);
  font-weight: 750;
}

.security-details {
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.security-details summary {
  position: relative;
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 1rem;
  padding: .9rem 4rem .9rem 1.25rem;
  color: var(--color-content-strong);
  font-size: var(--text-body-sm);
  font-weight: 750;
  line-height: var(--leading-compact);
  list-style: none;
  cursor: pointer;
}
.security-details summary::-webkit-details-marker { display: none; }
.security-details summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 1.15rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--text-title);
  font-weight: 500;
  transform: translateY(-50%);
}
.security-details[open] summary { border-bottom: 1px solid var(--color-brand-line); }
.security-details[open] summary::after { content: '\2212'; }
.security-details__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  padding: .5rem 1.25rem 1.25rem;
}
.security-details__content section { padding: 1.25rem 0; border-bottom: 1px solid var(--color-brand-line-soft); }
.security-details__content section:nth-last-child(-n + 2) { border-bottom: 0; }
.security-details__content h3 { font-size: var(--text-body-sm); }
.security-details__content ul { display: grid; gap: .5rem; margin-top: .7rem; }
.security-details__content li {
  position: relative;
  padding-left: 1rem;
  color: var(--color-content-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}
.security-details__content li::before {
  content: '';
  position: absolute;
  top: .68em;
  left: 0;
  width: .32rem;
  height: .32rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
}

.security-trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  margin-top: 1.25rem;
}
.security-trust-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-content-muted);
  font-size: var(--text-caption);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .22em;
}
.security-trust-links a:hover { color: var(--accent-strong); }

@media (max-width: 960px) {
  .security-hero { grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); gap: 2rem; }
  .security-guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-guarantees > li:nth-child(3) { border-left: 0; }
  .security-guarantees > li:nth-child(n + 3) { border-top: 1px solid var(--color-brand-line-soft); }
  .security-guarantees h3 { min-height: auto; }
}

@media (max-width: 780px) {
  .security-hero { grid-template-columns: 1fr; }
  .security-hero__copy { max-width: 43rem; }
  .security-visual { width: min(76vw, 25rem); justify-self: center; }
  .security-panels { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .security-hero__copy::before { left: -1.2rem; height: 9rem; }
  .security-guarantees { grid-template-columns: 1fr; }
  .security-guarantees > li { border-top: 1px solid var(--color-brand-line-soft); border-left: 0; }
  .security-guarantees > li:first-child { border-top: 0; }
  .security-details__content { grid-template-columns: 1fr; }
  .security-details__content section:nth-last-child(2) { border-bottom: 1px solid var(--color-brand-line-soft); }
  .security-details__content section:last-child { border-bottom: 0; }
  .security-trust-links { display: grid; gap: .25rem; }
}

/* ==========================================================================
   11. ABONNEMENT
   ========================================================================== */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
  align-items: start;
}
.plan {
  position: relative;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform var(--motion-base),
    box-shadow var(--motion-base),
    border-color var(--motion-base);
}
.plan-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand-line);
}
.plan-featured:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent);
}
/* Le bloc global de mouvement reduit annule les durees, pas les etats : sans
   cette regle le survol ferait sauter la carte de 3 px d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .plan:hover { transform: none; }
}
.plan-tag { position: absolute; top: -.7rem; left: 1.75rem; }

/* En-tete sans pictogramme : les deux offres se distinguent par leur nom, leur
   prix et la bordure d'accent du plan mis en avant, pas par une icone
   decorative. */
.plan-head { display: block; }
.plan-name { font-size: var(--text-section); }
.plan-for { font-size: var(--text-body-sm); color: var(--color-content-muted); margin-top: .15rem; }

.plan-priceblock { margin: 1.35rem 0; padding-bottom: 1.35rem; border-bottom: 1px solid var(--color-line-inner); }
/* Le min-height cale la ligne de prix des DEUX cartes sur la meme hauteur, quel
   que soit le corps fluide du montant : sans lui, la carte qui porte le sceau
   decalerait sa liste de fonctionnalites par rapport a l'autre. Il est un peu
   plus bas que le sceau : celui-ci deborde de quelques pixels dans les marges
   du bloc, ce qui evite de creuser un vide sous le prix de l'autre carte. */
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; min-height: 88px; }
.plan-amount { font-size: var(--text-display); font-weight: 700; color: var(--color-content-strong); letter-spacing: -0.02em; }
.plan-amount sup { font-size: var(--text-caption); vertical-align: super; color: var(--color-content-soft); }
.plan-per { font-size: var(--text-body-sm); color: var(--color-content-muted); }
/* Pastille d'offre : un sceau rond, pose a droite du prix. Il porte l'accent
   de la marque et non le vert d'etat, qui veut dire "reussite" et non
   "promotion". Il se cale sur la LIGNE DE PRIX, hors flux : il ne pousse rien
   et les deux cartes gardent leurs listes alignees. Sa condition est renvoyee
   en note de bas de section, appelee par le double asterisque. */
.plan-priceblock--offre {
  /* Diametre du sceau, fluide comme le corps du prix a cote duquel il se pose,
     et reserve de place derivee de lui : les deux ne peuvent pas se desaccorder
     au fil des largeurs. */
  --plan-seal: clamp(84px, 8vw, 96px);
}
.plan-priceblock--offre .plan-price {
  position: relative;
  padding-right: calc(var(--plan-seal) + 1rem);
}
.plan-gift {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--plan-seal);
  height: var(--plan-seal);
  padding: 0 .55rem;
  border-radius: var(--radius-pill);
  background: var(--accent-action);
  color: var(--on-accent);
  /* Halo d'accent tres dilue : detache le sceau de la carte sans cerne dur. */
  box-shadow: 0 0 0 5px var(--accent-soft), var(--shadow-sm);
  text-align: center;
  line-height: 1.18;
}
.plan-gift-lead { font-size: var(--text-body-sm); font-weight: 700; }
.plan-gift-word {
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}
/* Appel de note sur le sceau : l'asterisque simple est deja pris par la mention
   de TVA, l'offre porte donc un double. Il reste dans le disque, colle au mot,
   et ne compte pas dans l'interlettrage des capitales. */
.plan-gift-word sup {
  font-size: .82em;
  vertical-align: super;
  letter-spacing: 0;
}

.plan-feats { display: grid; gap: .6rem; flex: 1; }
.plan-feats li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--text-body-sm);
  color: var(--color-content-muted);
  line-height: var(--leading-compact);
}
.plan-feats li::before {
  content: '';
  position: absolute;
  left: 0; top: .5rem;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.plan-feats strong { color: var(--color-content-strong); font-weight: 600; }
.plan-cta { margin-top: 1.5rem; width: 100%; }

.plans-assurances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 62rem;
  margin: 2.5rem auto 0;
}
/* Memes cartes que les deux offres, en plus petit : meme fond, meme rayon,
   meme filet, meme ombre. Pas de survol en revanche : ils ne sont pas
   cliquables, et un soulevement au passage de la souris promettrait une
   interaction qui n'existe pas. */
.plans-assurances li {
  padding: 1.15rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-brand-line-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body-sm);
  color: var(--color-content-muted);
  line-height: var(--leading-compact);
}
/* Reste EN LIGNE : le balisage enchaine "<strong>...</strong>&nbsp;: la suite",
   un strong en bloc rejetterait le deux-points seul en debut de ligne. */
/* Chaque carte porte desormais un titre et un paragraphe. Le titre suit le
   niveau "contenu structure" de l'echelle editoriale, le texte le niveau
   "detail" : deux crans voisins, pas un ecart de corps. */
.plans-assurances h3 { margin-bottom: .3rem; }

.plans-faq { max-width: 62rem; margin: 2.5rem auto 0; display: grid; gap: .75rem; }
.plans-faq details { padding: 0; overflow: hidden; }
.plans-faq summary {
  padding: 1rem 1.25rem;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-content-strong);
  line-height: var(--leading-compact);
  cursor: pointer;
  list-style: none;
}
.plans-faq summary::-webkit-details-marker { display: none; }
.plans-faq summary::after {
  content: '+';
  float: right;
  color: var(--accent-strong);
  font-weight: 700;
}
.plans-faq details[open] summary::after { content: '\2212'; }
.plans-faq-a {
  padding: 0 1.25rem 1.15rem;
  font-size: var(--text-body-sm);
  color: var(--color-content-muted);
  line-height: var(--leading-copy);
}

.plans-legal {
  max-width: 62rem;
  margin: 1.5rem auto 0;
  font-size: var(--text-caption);
  color: var(--color-content-muted);
}
/* Deux notes de bas de section a la suite : la seconde se colle a la premiere
   plutot que d'ouvrir un nouveau bloc. */
.plans-legal + .plans-legal { margin-top: .35rem; }

/* ==========================================================================
   12. CONTACT ET FORMULAIRE
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-info > p:not(.section-subtitle) { max-width: var(--measure-narrow); margin-top: var(--space-copy); font-size: var(--text-body); line-height: var(--leading-copy); color: var(--color-content-muted); }

.contact-detail { display: flex; align-items: flex-start; gap: .85rem; margin-top: 1.5rem; }
.contact-detail strong { display: block; font-size: var(--text-body-sm); color: var(--color-content-strong); }
.contact-detail a, .contact-detail span { font-size: var(--text-body-sm); color: var(--color-content-muted); }
.contact-detail a { color: var(--accent-strong); }

.contact-form { padding: 1.75rem; }
.contact-form h3 { font-size: var(--text-title); margin-bottom: 1.25rem; }

/* Leurre anti-robot : hors flux et hors sequence de tabulation, sans
   display:none, que certains robots savent detecter. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  margin-bottom: .35rem;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-content-strong);
}
.opt { font-weight: 500; color: var(--color-content-muted); text-transform: none; letter-spacing: 0; }

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: .6rem .8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  color: var(--color-content-strong);
  transition: border-color var(--motion-fast);
}
.form-group textarea { min-height: 8rem; resize: vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-content-soft); }

.btn-submit { width: 100%; margin-top: .5rem; }

/* L'erreur est annoncee en TEXTE, pas seulement en couleur. */
.form-feedback {
  display: none;
  margin-top: .9rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-size: var(--text-body-sm);
}
.form-feedback.ok, .form-feedback.err { display: block; }
.form-feedback.ok { background: var(--color-state-success-bg); color: var(--color-state-success-fg); border-color: var(--color-state-success-border); }
.form-feedback.err { background: var(--color-state-danger-bg); color: var(--color-state-danger-fg); border-color: var(--color-state-danger-border); }

/* Le caractere obligatoire des champs est ENONCE : le formulaire ne marque
   que les champs facultatifs, cette convention inverse ne vaut que si elle
   est dite. */
.form-required-note {
  margin-bottom: 1.1rem;
  font-size: var(--text-caption);
  color: var(--color-content-muted);
}

/* Message d'erreur rattache a un champ, pose par le script sous le champ
   fautif. La couleur ne porte pas l'information a elle seule : le texte est
   explicite et le champ recoit aria-invalid. */
.field-error {
  margin-top: .35rem;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-state-danger-fg);
}
.contact-form [aria-invalid="true"] {
  border-color: var(--color-state-danger-fg);
}

.form-rgpd { margin-top: .9rem; font-size: var(--text-caption); color: var(--color-content-muted); line-height: 1.5; }
.form-rgpd strong { color: var(--color-content-muted); font-weight: 600; }

/* ==========================================================================
   13. PIED DE PAGE
   ========================================================================== */

footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-brand-line);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand p { margin-top: .9rem; font-size: var(--text-body-sm); color: var(--color-content-muted); max-width: 26rem; }
/* Les deux colonnes de liens sont passees de <div> a <nav> et leurs titres de
   <h4> a <h2> : ce sont des reperes de navigation de premier niveau, hors du
   contenu principal. Le selecteur suit le titre par sa classe, pas par son
   niveau, pour que le rendu ne depende plus de la balise. */
.footer-col__title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--color-content-soft); margin-bottom: .9rem; }
.footer-col ul { display: grid; gap: .55rem; }
.footer-col a { font-size: var(--text-body-sm); color: var(--color-content-muted); }
.footer-col a:hover { color: var(--accent-strong); }

/* Pied de page des pages legales : pas de colonne de marque, donc pas de
   grille a trois colonnes. Le :has() evite d'avoir a poser une classe de
   variante dans le balisage. */
.footer-inner:not(:has(.footer-brand)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 2rem 1.5rem;
  font-size: var(--text-caption);
  color: var(--color-content-muted);
}
.footer-inner:not(:has(.footer-brand)) a {
  color: var(--color-content-muted);
  margin-left: 1rem;
}
.footer-inner:not(:has(.footer-brand)) a:first-child { margin-left: 0; }
.footer-inner:not(:has(.footer-brand)) a:hover { color: var(--accent-strong); }

.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2rem;
  border-top: 1px solid var(--color-brand-separator);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--color-content-muted);
}

/* Retour au reglage systeme : discret, et affiche uniquement si un choix
   explicite est en memoire. C'est le script qui leve l'attribut hidden. */
.theme-system-reset {
  background: none;
  padding: 0;
  font-size: var(--text-caption);
  color: var(--color-content-muted);
  text-decoration: underline;
}
.theme-system-reset:hover { color: var(--accent-strong); }
.theme-system-reset[hidden] { display: none; }

.flag { display: inline-flex; width: 15px; height: 10px; border-radius: 2px; overflow: hidden; vertical-align: -1px; }
.flag i { flex: 1; }
.flag.fr i:nth-child(1) { background: var(--flag-fr-blue); }
.flag.fr i:nth-child(2) { background: var(--flag-fr-white); }
.flag.fr i:nth-child(3) { background: var(--flag-fr-red); }

/* ==========================================================================
   14. PAGES LEGALES
   ========================================================================== */

.crumb { margin-bottom: 1rem; }
.last-update { font-size: var(--text-caption); color: var(--color-content-muted); margin-bottom: 2rem; }

main.container, .legal-body { padding-top: 3rem; padding-bottom: 4rem; }
.legal-body h1 { font-size: var(--text-display); margin-bottom: .5rem; }
.legal-body h2 { font-size: var(--text-section); margin: 2.5rem 0 .75rem; }
.legal-body h3 { font-size: var(--text-title); margin: 1.5rem 0 .5rem; }
.legal-body { max-width: var(--measure-wide); }
.legal-body p, .legal-body li { font-size: var(--text-body); color: var(--color-content); line-height: var(--leading-copy); }
.legal-body p + p { margin-top: .9rem; }
.legal-body ul { margin: .75rem 0 0 1.1rem; list-style: disc; }
.legal-body li { margin-bottom: .4rem; }
.legal-body strong { color: var(--color-content-strong); font-weight: 600; }

.legal-body code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: .1rem .3rem;
  border-radius: 4px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-brand-line-soft);
  color: var(--color-content-strong);
  word-break: break-all;
}

.note {
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-brand-line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-inner);
}

/* Un tableau defile DANS son conteneur, jamais en poussant la page. */
.tbl-wrap { overflow-x: auto; margin: 1.25rem 0; }
.tbl {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-caption);
}
.tbl th, .tbl td {
  padding: .6rem .75rem;
  text-align: left;
  border: 1px solid var(--color-brand-line-soft);
  vertical-align: top;
}
.tbl th { background: var(--color-surface-sunken); color: var(--color-content-strong); font-weight: 600; }
.tbl td { color: var(--color-content-muted); }

/* ==========================================================================
   15. RESPONSIVE
   ==========================================================================
   Conception mobile d'abord dans l'esprit, verifiee a 390 x 844. Les zones
   tactiles font au moins 44 px, bascule de theme comprise. */

@media (max-width: 980px) {
  .hero-copy { max-width: 42rem; }

  .fstrip { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plans-assurances { grid-template-columns: 1fr; }
  .plan-price { min-height: 78px; }
}

/* Trois paliers, mesures au navigateur et non estimes (marque 134, cinq liens
   575 sans retour a la ligne, actions 389, gouttieres 80) :

     > 1240 px  barre complete, il faut 1178 px pour la poser sans serrer ;
     981-1240   "Demander une demonstration" sort de la barre et l'ecart des
                liens se resserre : il ne reste que 939 px a loger ;
     <= 980     menu deroulant.

   L'ancien palier unique a 900 px reposait sur une estimation de 850 px qui
   ne valait plus : entre 901 et 1100 px "Suggestions d'actions" repassait a
   la ligne, et entre 901 et 1024 px le bouton de demonstration debordait du
   cadre, jusqu'a 166 px de defilement horizontal a 901 px. */
@media (max-width: 1240px) {
  .nav-demo { display: none; }
  .nav-links { gap: 1.1rem; }
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.5rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-brand-line);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: .75rem 0; font-size: var(--text-body); }
  .nav-cta { display: none; }

  /* Zone tactile de 44 px obtenue par le rembourrage, la cible visuelle
     reste a 32 px. */
  .theme-toggle {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
  }
  .theme-toggle:hover { background: var(--color-brand-beige); }
}

@media (max-width: 760px) {
  main > section { padding: clamp(3.75rem, 10vw, 4.5rem) 0; }
  .hero-inner { padding: 3rem 1.5rem 2.5rem; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 560px) {
  .fstrip { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   Controles de navigation
   La connexion reste volontairement textuelle et sans surface au repos.
   Les trois controles visibles sur ordinateur partagent la meme hauteur. */
.theme-toggle,
.nav-login,
.nav-demo {
  height: 40px;
  min-height: 40px;
}

.theme-toggle {
  width: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-strong);
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-base);
}

.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .78rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--accent-tint);
  color: var(--color-content);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}
.nav-login__label--compact { display: none; }

@media (hover: hover) {
  .theme-toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--color-brand-line));
    background: var(--color-brand-beige);
    color: var(--accent-strong);
  }
  .theme-toggle:hover svg { transform: rotate(12deg) scale(1.06); }
  .nav-login:hover {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-strong);
    text-decoration: none;
  }
}

.nav-login:active {
  background: var(--accent-action);
  color: var(--on-accent);
}

@media (max-width: 980px) {
  .nav-inner { gap: .65rem; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { order: 3; }
  .theme-toggle,
  .nav-login {
    height: 44px;
    min-height: 44px;
  }
  .theme-toggle { width: 44px; }
}

@media (max-width: 560px) {
  .nav-inner { padding-inline: 1rem; gap: .5rem; }
  .nav-actions { gap: .35rem; }
  .nav-login { padding-inline: .62rem; font-size: var(--text-caption); }
  .nav-login__label--full { display: none; }
  .nav-login__label--compact { display: inline; }
}

@media (max-width: 360px) {
  .nav-logo .wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg,
  .nav-login { transition: none; }
}

/* ==========================================================================
   16. MOUVEMENT REDUIT
   ==========================================================================
   Les durees sont deja mises a zero dans tokens.css. Ce bloc coupe en plus le
   defilement doux et toute animation qui ne passerait pas par un jeton. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Coupe les transitions le temps d'une frame pendant la bascule de theme :
   animer background-color sur toute la page produit un fondu sale. */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after {
  transition: none !important;
}

/* Sous-titres éditoriaux : même dessin que la ligne mauve du hero, avec
   deux paliers de taille en moins. Cette règle finale empêche les styles de
   paragraphes propres aux sections de remplacer la couleur ou la graisse. */
main p.section-subtitle.section-subtitle {
  max-width: var(--measure-wide);
  margin-top: .45rem;
  color: var(--accent-strong);
  font-family: var(--font-display-cozy);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.24;
  text-wrap: balance;
}

/* ==========================================================================
   17. CONTRAT TYPOGRAPHIQUE EDITORIAL
   ==========================================================================
   Les maquettes produit conservent leur densite propre. Hors hero, tous les
   contenus editoriaux suivent quatre niveaux seulement : titre, sous-titre,
   texte principal, puis contenu structure ou detail. */

main {
  --editorial-title-size: var(--text-page);
  --editorial-subtitle-size: var(--text-section);
  --editorial-body-size: var(--text-title);
  --editorial-structured-size: var(--text-body);
  --editorial-detail-size: var(--text-body-sm);
}

main > section:not(.hero) .section-title,
main > section:not(.hero) .security-title {
  font-family: var(--font-display-cozy);
  font-size: var(--editorial-title-size);
  font-weight: 700;
  line-height: var(--leading-tight);
}

main p.section-subtitle.section-subtitle {
  font-size: var(--editorial-subtitle-size);
}

.daily-intro__content > p:not(.feature-emphasis),
.ai-trust-story__intro > p,
.ai-trust-story__content > p,
.ai-trust-story__outcome > p,
.feature-story__heading > p:not(.section-subtitle):not(.feature-emphasis),
.reporting-story__heading .feature-story__copy p,
.reporting-readings__intro > p:not(.section-subtitle),
.reporting-readings__content p,
.reporting-readings__content li,
.short-philosophy__content > p:not(.section-subtitle):not(.feature-emphasis),
.section-header > .section-sub,
.journey .dcv-054 > .section-sub,
.security-lead,
.contact-info > p:not(.section-subtitle) {
  font-family: var(--font-sans);
  font-size: var(--editorial-body-size);
  font-weight: 400;
  line-height: 1.55;
}

.suggestions-method__steps p,
.security-architecture,
.security-panel > h3 + p,
.feature-disclosures dt {
  font-size: var(--editorial-structured-size);
  line-height: var(--leading-copy);
}

.responsibility-flow li > p,
.work-flow__notes > p:last-child,
.feature-disclosures dd,
.short-philosophy summary,
.short-philosophy details p,
.security-guarantees p,
.security-panel li,
.security-panel__link,
.security-panel__conclusion,
.security-details summary,
.security-details__content li,
.security-trust-links a,
.plan-feats li,
.plans-assurances li,
.plans-assurances p,
.plans-faq summary,
.plans-faq-a,
.contact-detail strong,
.contact-detail a,
.contact-detail span {
  font-size: var(--editorial-detail-size);
}

.security-guarantees h3,
.security-details__content h3,
.plans-assurances h3 {
  font-size: var(--editorial-structured-size);
}

.security-panel > h3 {
  font-size: var(--editorial-body-size);
}