@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(polices/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(polices/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(polices/plus-jakarta-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(polices/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(polices/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(polices/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 106.14%; ascent-override: 91.27%; descent-override: 22.73%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); size-adjust: 103.3%; ascent-override: 93.78%; descent-override: 23.35%; line-gap-override: 0%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 104.90%; ascent-override: 98.95%; descent-override: 21.16%; line-gap-override: 0%; }
/* Kendu Intelligence : pages internes (l'accueil garde ses styles), identité de docs/identite.md. */
/* Jetons de la charte : docs/identite.md §1.6 (thèmes clair et sombre), §1.2 et §1.3 (variantes, états), §5
   (boutons : sur fond clair, bleu pétrole à texte ivoire ; sur fond foncé, corail à texte brun-encre ; jamais
   de corail et de bleu dans un même bouton, journal du 2026-10-12). */
:root {
  color-scheme: light dark;
  --brand-petrol: #0B3D4A;   --brand-ivory: #F7F5F0;   --brand-coral: #FC875A;
  --brand-light-blue: #61B1EF; --brand-slate: #435866;
  --bg: #FBF7F2; --surface: #FFFFFF; --surface-tint: #DDEBEE;
  --text: #0B3D4A; --text-muted: #435866;
  --link: #215DA5; --link-hover: #0B3D4A; --focus: #215DA5;
  --line: #E8E2D7; --input-border: #71848C;
  --btn-primary-bg: #0B3D4A; --btn-primary-bg-hover: #205564; --btn-primary-text: #F7F5F0;
  --btn-secondary-border: #0B3D4A; --btn-secondary-text: #0B3D4A; --btn-secondary-bg-hover: #DDEBEE;
  --success: #2C6C47; --warning: #7E5D1D; --danger: #A83636;
  --accent-text: #B04C26;                         /* corail-fonce sur clair ; corail en sombre */
  /* Encadré (pétrole 100) et cellule d'en-tête de ligne d'un tableau : en sombre, des fonds où le lien bleu
     clair passe (5,08 sur pétrole, 6,61 sur pétrole 950), jamais pétrole 700 (3,55, interdit par la charte §1.2). */
  --surface-encadre: #DDEBEE; --surface-entete: #DDEBEE;
  /* Sélecteurs (filtres, onglets, choix) : contour bleu pétrole, choisi plein bleu pétrole à texte ivoire ;
     en sombre, contour ivoire, choisi pétrole 700 à texte ivoire. Jamais un fond ivoire (charte §1.1). */
  --sel-bord: #0B3D4A; --sel-texte: #0B3D4A; --sel-survol: #DDEBEE;
  --sel-fond: #0B3D4A; --sel-fond-texte: #F7F5F0; --sel-fond-bord: #0B3D4A;
  /* Jetons fixes : surfaces foncées des deux thèmes (en-tête, appel, pied) et ce qu'elles portent. */
  --petrol-950: #032933; --petrol-700: #205564; --blue: #215DA5; --coral-dark: #B04C26;
  --slate-light: #B3C9CE; --sand: #E8E2D7; --on-dark: #F7F5F0;
  /* Signature de la charte : la coupe en feuille (un coin franc, le coin opposé arrondi), à la place des vagues. */
  --feuille: clamp(40px, 8vw, 120px);
  --motion-fast: 120ms;
  --gouttiere: clamp(16px, 5vw, 32px);
  --largeur: 1440px;   /* conteneur des blocs sur grand écran (1 200 px jusqu'au 2026-10-15) ; texte courant en rem */
  --f-titre: Inter, 'Inter Fallback', Arial, sans-serif;
  --f-corps: Inter, 'Inter Fallback', Arial, sans-serif;
  --f-accent: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', Arial, sans-serif;
  /* Alias des jetons de l'accueil (--k-*), pour les illustrations partagées. */
  --k-fond: var(--bg); --k-surface: var(--surface); --k-teinte: var(--surface-tint); --k-sable: var(--sand);
  --k-texte: var(--text); --k-doux: var(--text-muted); --k-lien: var(--link); --k-accent: var(--accent-text);
  --k-succes: var(--success); --k-attention: var(--warning); --k-ligne: var(--line); --k-btn-fond: var(--btn-primary-bg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --k-sable: #205564;
    --bg: #032933; --surface: #0B3D4A; --surface-tint: #205564;
    --text: #F7F5F0; --text-muted: #B3C9CE;
    --link: #61B1EF; --link-hover: #F7F5F0; --focus: #61B1EF;
    --line: #205564; --input-border: #6C8C97;
    --btn-primary-bg: #FC875A; --btn-primary-bg-hover: #E66C3B; --btn-primary-text: #2A1810;
    --btn-secondary-border: #F7F5F0; --btn-secondary-text: #F7F5F0; --btn-secondary-bg-hover: #205564;
    --success: #88C99E; --warning: #E2BF76; --danger: #F88D99;
    --accent-text: #FC875A;
    --surface-encadre: #0B3D4A; --surface-entete: #032933;
    --sel-bord: #F7F5F0; --sel-texte: #F7F5F0; --sel-survol: #0B3D4A;
    --sel-fond: #205564; --sel-fond-texte: #F7F5F0; --sel-fond-bord: #F7F5F0;
  }
}
/* Surfaces foncées dans les deux thèmes : bouton corail à texte brun-encre, liens et focus bleu clair. */
.pied {
  --link: #61B1EF; --link-hover: #F7F5F0; --focus: #61B1EF;
  --btn-primary-bg: #FC875A; --btn-primary-bg-hover: #E66C3B; --btn-primary-text: #2A1810;
  --btn-secondary-border: #F7F5F0; --btn-secondary-text: #F7F5F0; --btn-secondary-bg-hover: #205564;
}
/* Bandes d'en-tête et d'appel : crème (appel : teinte pétrole 100) en mode clair, bleu pétrole en mode sombre. */
.entete, .appel {
  --z-texte: #0B3D4A; --z-doux: #435866; --z-fond: #FBF7F2; --z-trait: rgba(11,61,74,.55); --z-trait-fond: rgba(11,61,74,.08);
  --z-accent: #B04C26; --z-panneau: #FFFFFF; --z-panneau-bord: #E8E2D7;
}
/* Direction B (Maxime, 2026-10-14) : l'en-tête de chaque page est un bandeau bleu pétrole, dans les deux thèmes. */
.entete {
  --z-texte: #F7F5F0; --z-doux: #B3C9CE; --z-fond: #0B3D4A; --z-trait: rgba(247,245,240,.6); --z-trait-fond: rgba(255,255,255,.12);
  --z-accent: #FC875A; --z-panneau: #032933; --z-panneau-bord: #205564;
  --link: #61B1EF; --link-hover: #F7F5F0; --focus: #61B1EF;
  --btn-primary-bg: #FC875A; --btn-primary-bg-hover: #E66C3B; --btn-primary-text: #2A1810;
  --btn-secondary-border: #F7F5F0; --btn-secondary-text: #F7F5F0; --btn-secondary-bg-hover: #205564;
}
.appel { --z-fond: #DDEBEE; --z-accent: #A3441F; }
@media (prefers-color-scheme: dark) {
  .entete, .appel {
    --z-texte: #F7F5F0; --z-doux: #B3C9CE; --z-fond: #0B3D4A; --z-trait: rgba(247,245,240,.6); --z-trait-fond: rgba(255,255,255,.12);
    --z-accent: #FC875A; --z-panneau: #032933; --z-panneau-bord: #205564;
    --link: #61B1EF; --link-hover: #F7F5F0; --focus: #61B1EF;
    --btn-primary-bg: #FC875A; --btn-primary-bg-hover: #E66C3B; --btn-primary-text: #2A1810;
    --btn-secondary-border: #F7F5F0; --btn-secondary-text: #F7F5F0; --btn-secondary-bg-hover: #205564;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--f-corps); font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
svg { max-width: 100%; }
a { color: var(--text); }
a:hover { color: var(--link); }
/* Anneau de focus : bleu sur fond clair, bleu clair sur fond foncé (charte §5, jeton --focus). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 16px; top: -100px; z-index: 20; background: var(--brand-ivory); color: var(--brand-petrol); padding: 12px 18px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.evitement:focus { top: 16px; }
/* Accent du titre de la page et de l'appel final (deux par page au plus) : la couleur seule, même police. */
.ser { font-style: normal; }
/* Surtitre de la charte §3 : Inter 600, 13 px, capitales espacées de 0,12 em. */
.surtitre { margin: 0; font-family: var(--f-corps); font-weight: 600; font-size: .8125rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* Boutons de la charte §5 : 44 px, coins 6 px, Inter 600 16 px ; survol par le fond, le soulignement et la flèche
   qui avance de 2 px, en 120 ms, sans soulèvement ni ombre. Couleurs données par le fond (jetons --btn-*). */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: 6px; border: 0;
  background: var(--btn-primary-bg); color: var(--btn-primary-text); text-decoration: none;
  font-family: var(--f-corps); font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: background-color var(--motion-fast) ease;
}
.bouton svg { flex-shrink: 0; transition: transform var(--motion-fast) ease; }
.bouton:hover { color: var(--btn-primary-text); background: var(--btn-primary-bg-hover); text-decoration: none; }
.bouton:hover svg { transform: translateX(2px); }
.bouton--contour { background: transparent; color: var(--btn-secondary-text); border: 1.5px solid var(--btn-secondary-border); }
.bouton--contour:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text); }

/* Sélecteurs (filtres du blog) : des choix, pas des boutons d'action ; contour, jamais de fond ivoire. Le choix
   courant se voit autrement que par la couleur : libellé souligné. */
.selecteur {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1.5px solid var(--sel-bord);
  background: transparent; color: var(--sel-texte); font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}
.selecteur:hover { background: var(--sel-survol); }
.selecteur[aria-pressed="true"], .selecteur[aria-checked="true"], .selecteur[aria-selected="true"] {
  background: var(--sel-fond); color: var(--sel-fond-texte); border-color: var(--sel-fond-bord);
}

/* En-tête et héros : bandeau bleu pétrole coupé en feuille (coin bas droit arrondi). */
.entete { position: relative; background: var(--z-fond); color: var(--z-texte); padding-bottom: 72px; border-bottom-right-radius: var(--feuille); }
.entete__barre {
  position: relative; z-index: 3; max-width: var(--largeur, 1440px); margin: 0 auto;
  padding: 18px max(var(--gouttiere), env(safe-area-inset-right)) 18px max(var(--gouttiere), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--z-texte); text-decoration: none; }
/* Logo horizontal de la charte : 160 px sur mobile, sa taille minimale à l'écran (docs/identite.md §4.4, où
   « INTELLIGENCE » ne fait que 5 à 6 px de haut) ; 196 px sur grand écran. */
.logo__image { display: block; flex-shrink: 0; width: 160px; height: auto; }
@media (min-width: 1280px) { .logo__image { width: 196px; } }
.logo:hover { color: var(--z-texte); }
.nav-large { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-large ul { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.nav-large ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--z-doux); text-decoration: none; white-space: nowrap; }
.nav-large .bouton { white-space: nowrap; }   /* version anglaise : « Book my assessment » sur une ligne */
.nav-large ul a:hover, .nav-large ul a[aria-current="page"] { color: var(--z-texte); }
/* Sélecteur de langue « Français · English », avant le bouton d'appel ; ajouté par traduction.py. */
.langues { display: inline-flex; align-items: center; gap: 2px; font-size: .875rem; color: var(--z-doux); }
.langue { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--z-doux); text-decoration: none; }
.nav-large .langue { padding: 0 4px; }   /* barre large : 2 px de moins par côté pour la version espagnole (libellés plus longs) */
a.langue:hover { color: var(--z-texte); }
.langue[aria-current] { color: var(--z-texte); font-weight: 700; }
.menu__panneau .langues { display: flex; margin: 8px 6px 0; padding: 0 4px; font-size: 1rem; }
.nav-large ul a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--z-accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px; border-radius: 6px; border: 1.5px solid var(--z-trait);
  color: var(--z-texte); font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--z-trait-fond); }
.menu__panneau {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: calc(100% - 6px); z-index: 10;
  background: var(--z-panneau); border: 1px solid var(--z-panneau-bord); border-radius: 6px; padding: 10px;
}
.menu__panneau ul { list-style: none; margin: 0; padding: 0; }
.menu__panneau ul a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 4px; color: var(--z-texte); text-decoration: none; }
.menu__panneau ul a:hover { background: var(--z-trait-fond); color: var(--z-texte); }
.menu__panneau ul a[aria-current="page"] { background: var(--z-trait-fond); }
.menu__panneau .bouton { display: flex; margin: 8px 6px 6px; }
/* Menu large à partir de 1201 px : logo sur deux lignes + sept liens tiennent dans la barre de 1200 px même en police de repli. */
@media (max-width: 1279px) { .nav-large { display: none; } .menu { display: block; } }

.hero {
  position: relative; z-index: 2; max-width: var(--largeur, 1440px); margin: 0 auto;
  padding: 24px max(var(--gouttiere), env(safe-area-inset-right)) 0 max(var(--gouttiere), env(safe-area-inset-left));
}
.hero > * { max-width: 54rem; }
.fil { font-size: .9375rem; color: var(--z-doux); margin: 0 0 18px; }
.fil a { color: var(--z-doux); display: inline-block; min-height: 24px; padding: 2px 0; box-sizing: border-box; }
.fil a:hover { color: var(--z-texte); }
.fil [aria-current] { color: var(--z-texte); }
/* Échelle de la charte §3 : affichage 56 / 36 px, interligne 1,08, approche -0,02 em. */
.hero h1 {
  margin: 0; font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em;
}
.hero h1 .ser { display: inline; color: inherit; font-size: 1em; }
.hero h1 .ser--en-ligne { display: inline; font-size: 1em; }
/* Fiche d'agent : « agent IA · métier · niveau » sur sa propre ligne, plus petit, sous le nom. */
.hero h1 .sous-titre-agent { display: block; margin-top: 10px; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--z-doux); }
/* Titre d'un article : titre 1 de la charte (40 / 32 px). */
.hero--article h1 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; }
.chapeau { margin: 22px 0 0; font-family: var(--f-corps); font-weight: 400; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.45; color: var(--z-doux); max-width: 42em; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }

/* Puces de catégorie (fond pâle, texte bleu pétrole ou ardoise : le bleu est réservé aux liens). */
/* Les puces gardent leur fond pâle et leur texte foncé dans les deux thèmes. */
.puce { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 6px; font-size: .875rem; font-weight: 600; text-decoration: none; background: var(--cat-pale, #DDEBEE); color: var(--cat-texte, #0B3D4A); }
a.puce { min-height: 32px; }
a.puce:hover { color: var(--cat-texte, #0B3D4A); text-decoration: none; }
.puce--sombre { background: var(--z-trait-fond, rgba(255,255,255,.12)); color: var(--z-texte, var(--on-dark)); }
.cat-guide { --cat: #61B1EF; --cat-pale: #DDEBEE; --cat-texte: #0B3D4A; }
.cat-cas-type { --cat: #FC875A; --cat-pale: #E8E2D7; --cat-texte: #0B3D4A; }
.cat-methode { --cat: #215DA5; --cat-pale: #DDEBEE; --cat-texte: #0B3D4A; }
.cat-reglementation { --cat: #B3C9CE; --cat-pale: #E8E2D7; --cat-texte: #435866; }
.cat-outils { --cat: #0B3D4A; --cat-pale: #DDEBEE; --cat-texte: #435866; }
.cat-prix-et-organisation { --cat: #B04C26; --cat-pale: #E8E2D7; --cat-texte: #435866; }

/* Colonne de lecture (~65 caractères) */
.colonne {
  width: 100%; max-width: calc(36rem + 2 * var(--gouttiere)); margin: 0 auto;
  padding: 0 max(var(--gouttiere), env(safe-area-inset-right)) 0 max(var(--gouttiere), env(safe-area-inset-left));
}
.large {
  width: 100%; max-width: var(--largeur, 1440px); margin: 0 auto;
  padding: 8px max(var(--gouttiere), env(safe-area-inset-right)) 72px max(var(--gouttiere), env(safe-area-inset-left));
}
.prose { padding: 36px 0 8px; font-size: 1.125rem; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .tableau, .prose pre { margin: 0 0 1.15em; }
/* Titre 2 de la charte (32 / 26 px), titre 3 (24 / 20 px, Inter 600). */
.prose h2 { margin: 2.1em 0 .6em; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.625rem, 1.35rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.prose h3 { margin: 1.8em 0 .5em; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.25; }
.prose h4 { margin: 1.6em 0 .4em; font-size: 1.125rem; font-weight: 700; }
.prose h2 + h3 { margin-top: .9em; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li > ul, .prose li > ol { margin: .35em 0 .2em; }
.prose li > p { margin: 0 0 .6em; }
.prose ul > li::marker { color: var(--accent-text); }
.prose ol > li::marker { color: var(--link); font-weight: 700; }
/* Liens dans le texte : bleu (bleu clair en sombre), toujours soulignés (journal du 2026-10-12). */
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a.url { word-break: break-all; }
.prose blockquote { padding: 20px 24px; background: var(--surface-encadre); border-radius: 6px; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote p { margin-bottom: .5em; }
.prose blockquote ul { padding-left: 1.2em; }
.prose hr { border: 0; height: 2px; background: var(--line); margin: 2em 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--surface-tint); color: var(--text); padding: .08em .35em; border-radius: 6px; overflow-wrap: anywhere; }
.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--surface); border-radius: 6px; }
.trou { background: #E8E2D7; color: #7E5D1D; border: 1px dashed #7E5D1D; border-radius: 8px; padding: 0 .3em; font-weight: 600; font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Ombres de défilement (CSS seul) : signalent un tableau plus large que l'écran. */
.tableau {
  overflow: visible; border-radius: 6px; border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.tableau table { border-collapse: collapse; width: 100%; font-size: .9375rem; line-height: 1.45; }
.tableau th, .tableau td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }   /* break-word : une colonne ne se resserre pas au point de couper un mot */
.tableau th, .tableau thead .coin { background: var(--brand-petrol); color: var(--on-dark); font-weight: 600; }
.tableau tbody th { background: var(--surface-entete); color: var(--text); }
.tableau tr:last-child td, .tableau tr:last-child th { border-bottom: 0; }
.tableau:focus-visible { outline-offset: 2px; }
/* Sous 600 px, un tableau de 3 colonnes ou plus devient une pile de cartes (une par ligne) :
   chaque valeur porte le nom de sa colonne, rien ne défile ni ne se coupe. */
@media (max-width: 600px) {
  .tableau--cartes { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tableau--cartes table, .tableau--cartes tbody, .tableau--cartes tr,
  .tableau--cartes td, .tableau--cartes th { display: block; width: auto; min-width: 0; }
  .tableau--cartes thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tableau--cartes tr { background: var(--surface); border-radius: 6px; border: 1px solid var(--line); margin: 0 0 12px; overflow: hidden; }
  .tableau--cartes td, .tableau--cartes tbody th { padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .tableau--cartes tr > :last-child { border-bottom: 0; }
  /* En-tête de chaque carte : fond --surface-entete (pétrole 950 en sombre), où un lien bleu clair fait 6,61. */
  .tableau--cartes tbody tr > :first-child { background: var(--surface-entete); font-family: var(--f-titre); font-weight: 700; font-size: 1rem; }
  .tableau--cartes td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font-size: .8125rem; font-weight: 600; color: var(--text-muted); }
}
.ancres-categories { height: 0; overflow: hidden; }
.ancres-categories span { display: block; height: 0; }
.mentions { margin: 0 0 1.15em; display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 6px 18px; }
.mentions dt { font-weight: 600; }
.mentions dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .mentions { grid-template-columns: minmax(0, 1fr); gap: 2px; } .mentions dd { margin-bottom: 10px; } }
.note-legale { font-size: .9375rem; color: var(--text-muted); }

/* Sources */
.sources { margin-top: 36px; padding: 26px 0 8px; border-top: 2px solid var(--line); font-size: .875rem; line-height: 1.55; color: var(--text-muted); }
.sources h2 { margin: 0 0 6px; font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; color: var(--text); }
.sources__date { margin: 0 0 12px; }
.sources ol { margin: 0; padding-left: 1.7em; }
.sources li { margin: 0 0 .55em; padding-left: .2em; }
.sources li::marker { color: var(--text-muted); }
.sources a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .38em; }
.consulte { white-space: nowrap; }

/* Articles voisins et retour */
.voisins { margin-top: 36px; }
.voisins h2 { margin: 0 0 14px; font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; }
.voisins__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.voisin { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; transition: border-color var(--motion-fast) ease; }
.voisin:hover { border-color: var(--text); color: var(--text); }
.voisin:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.voisin--suivant { text-align: right; }
.voisin__sens { font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.voisin strong { font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.retour { margin: 28px 0 64px; }
.retour a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.retour a:hover { color: var(--link-hover); }
.colonne > .sources:last-child { margin-bottom: 56px; }

/* Appel « Réserver mon audit » */
/* Appel « Réserver mon audit » : bandeau bleu pétrole coupé en feuille (coin haut gauche arrondi). */
.appel { position: relative; background: var(--z-fond); color: var(--z-texte); margin-top: 48px; border-top-left-radius: var(--feuille); }
.appel__inner {
  position: relative; z-index: 2; max-width: var(--largeur, 1440px); margin: 0 auto;
  padding: 72px max(var(--gouttiere), env(safe-area-inset-right)) 72px max(var(--gouttiere), env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px;
}
.appel .surtitre { margin-bottom: 12px; color: var(--z-doux); }
.appel h2 { margin: 0; max-width: 16em; font-family: var(--f-titre); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; }
.appel h2 .ser { color: var(--z-accent); }
.appel p { margin: 16px 0 0; max-width: 34em; color: var(--z-doux); }

/* Pied de page : logo complet (version fond foncé), zone de protection d'une demi-hauteur de symbole (§4.3). */
.pied { background: var(--petrol-950); color: var(--slate-light); font-size: .9375rem; }
.pied__inner {
  max-width: var(--largeur, 1440px); margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
  padding: 32px max(var(--gouttiere), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gouttiere), env(safe-area-inset-left));
}
.pied__logo { display: block; width: 160px; height: auto; margin: 0 0 8px; }
.pied ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.pied a { display: inline-flex; align-items: center; min-height: 36px; color: var(--slate-light); }
.pied a:hover { color: var(--on-dark); }
.pied strong { color: var(--on-dark); }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.pied__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Blog : filtres et cartes */
.blog-outils { display: flex; flex-direction: column; gap: 10px; margin: 28px 0 24px; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.filtres .nb { font-weight: 500; font-variant-numeric: tabular-nums; }
.statut { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.blog-mention-ia { margin: 0; color: var(--text-muted); font-size: .875rem; }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.cartes > li { display: flex; }
/* Cartes : coins 6 px, filet sable au lieu d'une ombre ; au survol, le filet fonce et le titre se souligne. */
.carte {
  position: relative; flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; transition: border-color var(--motion-fast) ease;
}
.carte:hover { border-color: var(--text); }
.carte:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.carte__corps { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.carte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.carte__titre { margin: 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.carte__titre a { color: var(--text); text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; }
.carte__titre a:focus-visible { outline: none; }
.carte:hover .carte__titre a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.carte__desc { margin: 0; color: var(--text-muted); font-size: .9375rem; line-height: 1.5; }
.carte__lire { margin-top: auto; padding-top: 4px; font-weight: 700; }

/* Photos générées par IA : légende visible « Image générée par IA » sous chacune (règlement (UE) 2024/1689,
   art. 50 §4). Largeur et hauteur déclarées dans le HTML : la place est réservée avant le chargement. */
/* Masque en feuille (coin haut gauche et coin bas droit arrondis de 12 px, les deux autres francs), sans ombre ;
   en thème sombre, un léger voile pour que la photo n'éblouisse pas sur le fond pétrole 950. */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 12px 0; background: var(--surface-tint); }
.mention-ia { margin: 8px 0 0; font-size: .8125rem; line-height: 1.4; font-weight: 500; color: var(--text-muted); }
.entete .mention-ia { color: var(--z-doux); }
.hero--photo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero--photo > * { max-width: none; }
.hero__texte > * { max-width: 54rem; }
.hero__photo { max-width: 36rem; }
@media (min-width: 960px) {
  .hero--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; }
  .hero--photo .hero__photo { max-width: none; }
}
@media (prefers-color-scheme: dark) { .photo img { filter: brightness(.88); } }
.prose .photo { margin: 0 0 1.15em; }
.prose .photo--portrait { max-width: 22rem; margin-left: auto; margin-right: auto; }
/* Couvertures du blog (images/blog-NN-sujet) : affichées seulement quand elles existent ; sous l'image, un filet
   de la couleur de la catégorie (aucune bande de couleur en attendant les couvertures). */
.couverture { margin: 36px 0 0; }
.couverture img { aspect-ratio: 3 / 2; object-fit: cover; }
.carte__couverture { margin: 0; }
.carte__couverture img { border-radius: 0; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 4px solid var(--cat, var(--line)); }
.carte__couverture .mention-ia { margin: 8px 22px 0; }

/* Sommaire des pages et des articles longs : colonne fixe à gauche à partir de 1200 px, absent en dessous. */
.sommaire { display: none; }
@media (min-width: 1200px) {
  .avec-sommaire {
    max-width: calc(15rem + 4rem + 36rem + 2 * var(--gouttiere));
    display: grid; grid-template-columns: 15rem minmax(0, 36rem); column-gap: 4rem; align-items: start;
  }
  .avec-sommaire > * { grid-column: 2; }
  .avec-sommaire > .sommaire {
    display: block; grid-column: 1; grid-row: 1 / span 8; position: sticky; top: 24px; margin-top: 40px;
    max-height: calc(100vh - 48px); overflow-y: auto; font-size: .9375rem; line-height: 1.4;
  }
  .sommaire ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 2px solid var(--line); }
  .sommaire a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; }
  .sommaire a:hover { color: var(--text); border-left-color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
}

/* Aucun mouvement qui dure ou se répète (charte §5) ; sous « mouvement réduit », plus de transition du tout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bouton:hover svg { transform: none; }
}
/* Apparitions au défilement : cachées seulement sous .js-anim (posée par le script) ; le script retire .rev ensuite. */
.js-anim .rev{opacity:0;transform:translateY(36px) scale(.97)}
.js-anim .rev.rev-sec{opacity:1;transform:none;transition:none}
.js-anim .rev.rev-vu{opacity:1;transform:none;transition:opacity .8s ease var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
@media print{.js-anim .rev{opacity:1;transform:none;transition:none}}
.illu{margin:0}
.il{position:relative;background:var(--k-surface);color:var(--k-texte);border:1px solid var(--k-ligne);border-radius:6px;overflow:hidden;text-align:left}
.il__barre{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0B3D4A;color:#F7F5F0;font-size:14px}
.il__points{display:inline-flex;gap:5px}.il__points i{width:9px;height:9px;border-radius:50%;background:#FC875A}.il__points i:nth-child(2){background:#E8E2D7}.il__points i:nth-child(3){background:#61B1EF}
.il__exemple{margin-left:auto;padding:2px 9px;border-radius:6px;background:#F7F5F0;color:#0B3D4A;font-weight:700;font-size:12px}
.il__liste{margin:0;padding:12px;list-style:none;display:flex;flex-direction:column;gap:8px}
.il__ligne{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--k-fond);border:1px solid var(--k-ligne);border-radius:6px}
.il__ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px}
.il__ic--grand{width:56px;height:56px}
.il__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.il__txt strong{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.il__txt span{color:var(--k-doux);font-size:13px;overflow-wrap:anywhere}
.il__ligne .st{flex:0 0 auto}
.fixe-sombre .il{--k-doux:#435866;--k-lien:#215DA5;--k-ligne:#E8E2D7}
@media (prefers-color-scheme: dark){.fixe-sombre .il{--k-doux:#B3C9CE;--k-lien:#61B1EF;--k-ligne:#205564;--k-fond:#032933;--k-surface:#0B3D4A;--k-teinte:#205564;--k-sable:#205564;--k-texte:#F7F5F0;--k-succes:#88C99E;--k-attention:#E2BF76;--k-accent:#FC875A}}
.il--tuiles .il__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}
.il__agent{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;background:var(--k-fond);border:1px solid var(--k-ligne);border-radius:6px;text-align:center}
.il--methode{padding:14px 12px 10px}
.il--methode svg{display:block;width:100%;height:auto}
.il--methode .il__exemple{position:absolute;right:10px;top:8px}
.il__rond{transform-box:fill-box;transform-origin:center}
.il--schema .il__flux{list-style:none;margin:0;padding:16px 14px;display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center}
.il__etape{padding:8px 12px;border-radius:6px;font-weight:600;font-size:14px;line-height:1.3}
.il__etape:not(:last-child)::after{content:"\2192";margin-left:10px;color:var(--k-doux);font-weight:400}
.il__etape--info{background:var(--k-teinte);color:var(--k-lien)}
.il__etape--ok{background:#B04C26;color:#FFFFFF}
.il__etape--retard{background:var(--k-sable);color:var(--k-attention)}
.il--heberg{background:var(--b-carte,var(--k-surface));border-color:var(--b-trait,var(--k-ligne))}
.il--heberg svg{display:block;width:100%;height:auto}
.prose .illu{margin:0 0 1.15em}
.il__ligne,.il__agent,.il__etape,.il__rond{transition:opacity .5s ease calc(.15s + var(--i,0)*.2s),transform .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i,0)*.2s)}
.js-anim .illu:not(.illu-vue) .il__ligne,.js-anim .illu:not(.illu-vue) .il__agent{opacity:0;transform:translateX(-24px)}
.js-anim .illu:not(.illu-vue) .il__etape,.js-anim .illu:not(.illu-vue) .il__rond{opacity:0;transform:scale(.8)}
@media print{.js-anim .illu .il__ligne,.js-anim .illu .il__agent,.js-anim .illu .il__etape,.js-anim .illu .il__rond{opacity:1 !important;transform:none !important}}
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;min-height:24px;box-sizing:border-box;border-radius:6px;font-size:13px;line-height:1.2;font-weight:600}
.st--ok{background:var(--k-teinte);color:var(--k-succes)}
.st--retard{background:var(--k-sable);color:var(--k-attention)}
.st--info{background:var(--k-teinte);color:var(--k-lien)}
@media (prefers-color-scheme: dark){.st--ok,.st--info{background:#032933}}
.coche{position:relative;display:inline-block;width:14px;height:14px;flex:0 0 auto}
.coche i{position:absolute;height:2.5px;border-radius:2px;background:currentColor;transform-origin:left center}
.coche i:first-child{--r:rotate(45deg);width:6px;left:1px;top:8px;transform:var(--r);animation:trace-coche .18s ease-out both}
.coche i:last-child{--r:rotate(-50deg);width:11px;left:4px;top:11px;transform:var(--r);animation:trace-coche .26s ease-out .16s both}
@keyframes trace-coche{from{transform:var(--r) scaleX(0)}to{transform:var(--r) scaleX(1)}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes flotte2{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(10px) rotate(2deg)}}
@keyframes curseur{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pouls{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.25);opacity:0}}
.flotte{animation:flotte 6s ease-in-out infinite}
.flotte-b{animation:flotte2 7s ease-in-out infinite}
.flotte-c{animation:flotte 8s ease-in-out 1.5s infinite}
html.mvt-pause .flotte,html.mvt-pause .flotte-b,html.mvt-pause .flotte-c{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){.flotte,.flotte-b,.flotte-c{animation:none}}
/* Bouton de pause du mouvement (accueil, et pied des pages qui ont une illustration animée en boucle) */
.mvt-bouton{display:inline-grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;border:1.5px solid var(--k-sel-bord,#0B3D4A);background:transparent;color:var(--k-texte);font:600 14px/1.3 Inter,'Inter Fallback',Arial,sans-serif;cursor:pointer}
.mvt-bouton[aria-pressed="true"]{background:var(--k-sel-fond,#0B3D4A);border-color:var(--k-sel-fond-bord,#0B3D4A);color:#F7F5F0}
.pied .mvt-zone{margin:14px 0 0}
.pied .mvt-bouton{color:#F7F5F0;border-color:#B3C9CE}
.pied .mvt-bouton[aria-pressed="true"]{background:#205564;border-color:#F7F5F0}
@media (prefers-reduced-motion: reduce){.mvt-zone{display:none}}
/* Carte « budget » du logiciel sur mesure (curseur qui glisse, bulle de réponse) */
.ml{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px 22px 24px;background:var(--k-surface);color:var(--k-texte);border:1px solid var(--k-ligne);border-radius:6px}
.ml__tete{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ml__tete strong{font-size:18px}
.ml__badge{padding:3px 10px;border-radius:6px;background:var(--k-sable);color:var(--k-attention);font-weight:700;font-size:13px}
.ml__lib{color:var(--k-doux);font-size:14px}
.ml__rail{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#B3C9CE,#FC875A);container-type:inline-size;margin:6px 17px 6px 0}
.ml__bouton{position:absolute;left:0;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#0B3D4A;border:3px solid var(--k-surface);box-shadow:0 0 0 3px rgba(11,61,74,.25);transform:translateX(54cqw)}
.glisse{animation:glisse 7s ease-in-out infinite}
.ml__bulle{align-self:flex-end;max-width:78%;padding:9px 12px;border-radius:12px 12px 0 12px;background:#0B3D4A;color:#F7F5F0;font-size:14px;line-height:1.35}
.bulle-solo{animation:bulle-solo 8s ease-in-out infinite}
@keyframes glisse{0%,100%{transform:translateX(22cqw)}45%{transform:translateX(68cqw)}70%{transform:translateX(54cqw)}}
@keyframes bulle-solo{0%{opacity:0;transform:translateY(16px) scale(.92)}10%{opacity:1;transform:translateY(0) scale(1)}85%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.96)}}
html.mvt-pause .bulle-solo,html.mvt-pause .glisse{animation:none}
@media (prefers-reduced-motion: reduce){.bulle-solo,.glisse{animation:none}}
.logo--sombre{display:none !important}
/* Bandes d'alternance de l'accueil (pleine largeur, coupe en feuille) : blanc, teinte pétrole 100, sable. */
.bande-alt{margin:0}.bande-alt--blanc{background:var(--k-surface)}.bande-alt--teinte{background:var(--k-teinte)}.bande-alt--sable{background:var(--k-bande)}
.bande--haut .logo--clair,.entete .logo--clair{display:none !important}.bande--haut .logo--sombre,.entete .logo--sombre{display:block !important}
@media (prefers-color-scheme: dark){.logo--clair{display:none !important}.logo--sombre{display:block !important}}
/* Survols */
.offre,.voisin,a.carte,.cartes>li>.carte,.carte:not(details,.contact,.ilot){transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color 120ms ease}
.offre:hover,.voisin:hover,a.carte:hover,.cartes>li>.carte:hover,.carte:not(details,.contact,.ilot):hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 28px 60px rgba(11,61,74,.16)}
#autonomie .carte{transition:none}#autonomie .carte:hover{transform:none;box-shadow:none}
.bouton{transition:background-color 120ms ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.bouton:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,61,74,.28)}
@media (prefers-color-scheme: dark){.offre:hover,.voisin:hover,a.carte:hover,.cartes>li>.carte:hover,.carte:not(details,.contact,.ilot):hover{box-shadow:0 28px 60px rgba(0,0,0,.5)}.bouton:hover{box-shadow:0 14px 30px rgba(0,0,0,.45)}}
/* Démo de l'accueil (reprise) */
.demo__fenetre{background:var(--k-surface);color:var(--k-texte);border:1px solid var(--k-ligne);border-top:0;border-radius:0 0 6px 6px;overflow:hidden}
.demo__barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 20px;background:#0B3D4A;color:#F7F5F0;font-size:14px}
.demo__exemple{background:#F7F5F0;color:#0B3D4A;font-weight:700;font-size:13px;padding:3px 10px;border-radius:6px}
.coche{position:relative;display:inline-block;width:14px;height:14px;flex:0 0 auto}
.coche i{position:absolute;height:2.5px;border-radius:2px;background:currentColor;transform-origin:left center}
.coche i:first-child{--r:rotate(45deg);width:6px;left:1px;top:8px;transform:var(--r);animation:trace-coche .18s ease-out both}
.coche i:last-child{--r:rotate(-50deg);width:11px;left:4px;top:11px;transform:var(--r);animation:trace-coche .26s ease-out .16s both}
.demo__avalider{background:var(--k-sable);color:var(--k-attention);font-weight:700;font-size:13px;padding:4px 10px;border-radius:6px}
.demo__discret{margin:0;color:var(--k-doux);font-size:13px}
.demo__mail{background:var(--k-fond);border:1px solid var(--k-ligne);border-radius:6px;padding:14px 16px;min-height:8rem}
.demo__meta{margin:0 0 10px;min-height:1.4em;font-size:13px;color:var(--k-doux);overflow-wrap:anywhere}
.demo__texte{margin:0;white-space:pre-line;line-height:1.55}
.demo__actions{display:flex;flex-wrap:wrap;gap:10px}
.demo__ton{display:flex;flex-direction:column;gap:8px}
.demo__resultat{position:relative;border:2px solid var(--k-succes);border-radius:6px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px}
.demo__tampon{position:absolute;right:14px;top:-16px;padding:3px 12px;border:2px solid var(--k-succes);border-radius:6px;background:var(--k-surface);color:var(--k-succes);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg);animation:tampon .55s cubic-bezier(.2,1.4,.4,1) both}
.demo__suite{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.demo__suite li{display:flex;gap:10px;align-items:flex-start}
.demo__suite .coche{color:var(--k-succes);margin-top:4px}
@keyframes glisse-ligne{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes trace-coche{from{transform:var(--r) scaleX(0)}to{transform:var(--r) scaleX(1)}}
@keyframes tampon{0%{opacity:0;transform:rotate(-22deg) scale(2.4)}60%{opacity:1;transform:rotate(-6deg) scale(.92)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
/* Pages intérieures dynamiques : bandes alternées, schémas animés, mini-démos, chiffres, cartes (généré par dynamisme.py).
   Palette de la charte : pétrole #0B3D4A, corail #FC875A, bleu clair #61B1EF, crème #FBF7F2, pétrole clair #DDEBEE, sable clair #F1EBDF.
   Animations : transform, opacity et stroke-dashoffset seulement, une seule fois, à l'arrivée dans l'écran ; aucune boucle. */
:root { --bande-creme: #FBF7F2; --bande-petrole: #DDEBEE; --bande-sable: #F1EBDF; --sv-pet: #0B3D4A; --sv-pet-t: #F7F5F0;
  --sv-corail: #FC875A; --sv-corail-t: #2A1810; --sv-bleu: #61B1EF; --sv-trait: #435866; --tuile-1: #FC875A; --tuile-2: #61B1EF; --tuile-3: #B3C9CE; --tuile-t: #0B3D4A; }
@media (prefers-color-scheme: dark) {
  :root { --bande-creme: #032933; --bande-petrole: #06303B; --bande-sable: #0A3743; --sv-pet: #205564; --sv-trait: #B3C9CE; }
}
main.bandes { max-width: none; padding: 0; margin: 0; display: block; }
.bande { background: var(--bande-creme); }
.bande--petrole { background: var(--bande-petrole); --accent-text: #9A3F1B; --link: #1B4F8F; }
.bande--sable { background: var(--bande-sable); }
@media (prefers-color-scheme: dark) { .bande--petrole { --accent-text: #FC875A; --link: #61B1EF; } }
.bande__in.prose {
  max-width: 1100px; margin: 0 auto; font-size: 1.125rem;
  padding: 44px max(var(--gouttiere), env(safe-area-inset-right)) 36px max(var(--gouttiere), env(safe-area-inset-left));
}
@media (min-width: 900px) { .bande__in.prose { padding-top: 64px; padding-bottom: 52px; } }
.bande__in > :where(h2, h3, p, ul, ol, blockquote, .tableau, .exemple) { max-width: 44rem; }
.bande__in > h2 { margin-top: 0; }
.bande--sources .bande__in { padding-top: 8px; padding-bottom: 24px; }
.bande--sources .sources { margin-top: 0; max-width: 44rem; }
.bande__in > .tableau { max-width: 100%; }

/* Deux colonnes : texte, puis figure collante à droite ; sur écran étroit la figure passe d'abord. */
.duo { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }
.duo__fig { order: -1; min-width: 0; }
.duo__txt { min-width: 0; }
@media (min-width: 1000px) {
  .duo { display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: 56px; align-items: start; }
  .duo__fig { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .duo__txt { grid-column: 1; grid-row: 1; }
}

/* Chiffres clés */
.chiffres { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 18px 24px; max-width: none; }
.prose .chiffres > li { margin: 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--tuile-1); }
.chiffres__n { display: block; font-family: var(--f-titre); font-weight: 700; font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.chiffres__t { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.4; color: var(--text-muted); }
.prose .surtitre { margin: 28px 0 10px; }
.prose .bande__in > .surtitre:first-child { margin-top: 0; }

/* Cartes à pictogramme */
.prose ul.cp-liste, .prose ol.cn-liste { list-style: none; margin: 18px 0 1.15em; padding: 0; display: grid; gap: 14px; max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cp-liste--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important; }
.cp-liste--compacte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
/* Pas de carte seule sur sa ligne (2026-10-14) : quatre étapes numérotées en deux rangées de deux ; une liste compacte
   de cinq éléments en trois colonnes, la cinquième carte sur deux. */
@media (min-width: 760px) { .prose ol.cn-liste:not(.cn-liste--flux):has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) { .cp-liste--compacte:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cp-liste--compacte > li:nth-child(5):last-child { grid-column: span 2; } }
.duo__txt .cp-liste, .duo__txt .cn-liste { grid-template-columns: minmax(0, 1fr); }
.prose .cp, .prose .cn { margin: 0; padding: 18px 18px 16px; display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 0; }
.cp__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tuile-1); color: var(--tuile-t); }
.cp:nth-child(3n+2) .cp__ico { background: var(--tuile-2); }
.cp:nth-child(3n) .cp__ico { background: var(--tuile-3); }
.cp__txt, .cn__txt { min-width: 0; font-size: 1rem; line-height: 1.55; }
.cp__txt > :last-child, .cn__txt > :last-child { margin-bottom: 0; }
.prose .cp__txt p { margin: 0 0 .6em; }
.prose .cp__txt ul { padding-left: 1.2em; margin: .4em 0 0; }
.cn__n { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 1.25rem; background: var(--brand-petrol); color: var(--on-dark); }
@media (prefers-color-scheme: dark) { .cn__n { background: var(--tuile-1); color: #2A1810; } }
.cn-liste--decision { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
.cn-liste--decision .cn__n { background: var(--tuile-1); color: #2A1810; }
.cn-liste--flux { grid-template-columns: minmax(0, 1fr) !important; max-width: 44rem; gap: 0 !important; position: relative; }
.cn-liste--flux .cn { border-radius: 0; border-bottom-width: 0; }
.cn-liste--flux .cn:first-child { border-radius: 12px 0 0 0; }
.cn-liste--flux .cn:last-child { border-bottom-width: 1px; border-radius: 0 0 12px 0; }
.cn-liste--flux .cn--valid { background: var(--bande-sable); border-left: 6px solid var(--tuile-1); }
.cn-liste--flux .cn--valid .cn__n { background: var(--tuile-1); color: #2A1810; }
.exemple, .exemple-titre { position: relative; }
.prose p.exemple { padding: 16px 18px 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--tuile-2); border-radius: 0 12px 0 12px; }
.prose p.exemple::before { content: "Exemple" / ""; display: inline-block; margin-right: 10px; padding: 1px 10px; border-radius: 6px; background: var(--brand-ivory); color: #0B3D4A; border: 1px solid #0B3D4A; font-weight: 700; font-size: .8125rem; vertical-align: .08em; }
.prose p.exemple-titre { margin-bottom: 8px; }

/* Étapes en cartes */
.etape { margin: 0 0 18px; padding: 20px 22px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 0; }
.etape__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.etape__n { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; background: var(--brand-petrol); color: var(--on-dark); }
@media (prefers-color-scheme: dark) { .etape__n { background: var(--tuile-1); color: #2A1810; } }
.prose .etape h3 { margin: 0; font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.375rem); }
.etape > :last-child { margin-bottom: 14px; }
.prose .etape li { margin: .3em 0; }

/* Schémas SVG */
.schema { margin: 0; padding: 16px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 0; --sv-fond: var(--surface); }
.schema > svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.schema figcaption { margin: 10px 4px 0; font-size: .9375rem; line-height: 1.45; color: var(--text-muted); text-align: center; }
.schema text { font-family: var(--f-corps); fill: var(--text); }
.sv-t { font-weight: 700; font-size: 16px; } .sv-s { font-size: 14px; fill: var(--text-muted) !important; } .sv-x { font-weight: 700; font-size: 14px; fill: var(--accent-text) !important; }
.sv-c { text-anchor: middle; }
.sv-num { font-weight: 700; font-size: 17px; fill: var(--sv-pet-t) !important; }
.sv-noeud { fill: var(--sv-pet); }
.schema--feuille .sv-num, .schema--carre .sv-num, .schema--losange .sv-num { fill: var(--sv-pet-t) !important; }
.sv-chemin { fill: none; stroke: var(--sv-trait); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sv-decision { fill: var(--sv-corail); } .sv-dt { font-weight: 700; font-size: 14.5px; fill: var(--sv-corail-t) !important; }
.sv-boite { fill: var(--surface); stroke: var(--sv-pet); stroke-width: 2; }
@media (prefers-color-scheme: dark) { .sv-boite { stroke: var(--sv-trait); } }
.sv-tirets-b { stroke-dasharray: 6 5; }
.sv-kendu { fill: var(--sv-bleu); stroke: none; }
.schema--donnees .sv-kendu + text, .schema--donnees .sv-kendu + text + text { fill: #0B3D4A !important; }
.sv-lieu { fill: none; stroke: var(--sv-trait); stroke-width: 2; stroke-dasharray: 7 6; }
.sv-lieu-t { font-weight: 600 !important; }
.sv-noeud-b { fill: var(--sv-pet); }
.sv-sur { fill: var(--sv-pet-t) !important; }
.sv-fleche { fill: none; stroke: var(--sv-trait); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sv-pointe { fill: none; stroke: var(--sv-trait); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lg { display: none; color: var(--text); }
.lg svg { overflow: visible; }
.schema[data-lieu="cloud"] .lg-cloud, .schema[data-lieu="serveurs"] .lg-serveurs, .schema[data-lieu="chez-nous"] .lg-chez-nous { display: block; }
.schema[data-lieu="cloud"] .sv-lieu { stroke: var(--sv-bleu); } .schema[data-lieu="serveurs"] .sv-lieu { stroke: var(--sv-corail); } .schema[data-lieu="chez-nous"] .sv-lieu { stroke: var(--sv-pet); }
@media (prefers-color-scheme: dark) { .schema[data-lieu="chez-nous"] .sv-lieu { stroke: #F7F5F0; } }
.schema[data-lieu] .sv-lieu { stroke-width: 3; stroke-dasharray: none; }
.k-p { fill: var(--sv-pet); } .k-c { fill: #FC875A; } .k-b { fill: #61B1EF; }
@media (prefers-color-scheme: dark) { .k-p { fill: #F7F5F0; } }
.sv-bar { fill: var(--sv-pet); transform-box: fill-box; transform-origin: left center; }
.sv-b3 .sv-bar { fill: var(--sv-corail); }
.sv-b3 .sv-bt, .sv-b3 .sv-bs { fill: var(--sv-corail-t) !important; }
.sv-bt { font-weight: 700; font-size: 16px; fill: var(--sv-pet-t) !important; } .sv-bs { font-size: 13.5px; fill: var(--sv-pet-t) !important; }
.sv-alerte { fill: var(--sv-corail); stroke: var(--sv-corail-t); stroke-width: 2; stroke-linejoin: round; }
.sv-alerte-t { fill: none; stroke: var(--sv-corail-t); stroke-width: 3; stroke-linecap: round; }
.sv-retour { stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.schema--paliers .sv-pointe { stroke: var(--accent-text); }
.sv-fin { text-anchor: middle; }

/* Apparition : état de départ posé par le script (sans lui, ou en mouvement réduit, tout est dans l'état final) */
.d1 { --dl: .2s; } .d2 { --dl: .55s; } .d3 { --dl: .9s; } .d4 { --dl: 1.25s; } .d5 { --dl: 1.6s; } .d6 { --dl: 1.95s; } .d7 { --dl: 2.3s; } .d8 { --dl: 2.65s; }
.d9 { --dl: 3s; } .d10 { --dl: 3.35s; } .d11 { --dl: 3.7s; } .d12 { --dl: 4.05s; }
.sv-etape, .sv-pointe { transform-box: fill-box; }
.schema--pret .sv-etape { opacity: 0; transform: translateY(14px); }
.schema--pret .sv-pointe { opacity: 0; }
.schema--pret .sv-chemin, .schema--pret .sv-fleche, .schema--pret .sv-retour { stroke-dashoffset: 1; }
.schema--pret .sv-bar { transform: scaleX(0); }
.schema--pret .sv-barre text { opacity: 0; }
.schema--on .sv-etape { opacity: 1; transform: none; transition: opacity .5s ease var(--dl, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s); }
.schema--on .sv-pointe { opacity: 1; transition: opacity .3s ease calc(var(--dl, 0s) + .5s); }
.schema--on .sv-chemin { stroke-dashoffset: 0; transition: stroke-dashoffset 3s ease-in-out .2s; }
.schema--on .sv-fleche, .schema--on .sv-retour { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out var(--dl, 0s); }
.schema--on .sv-bar { transform: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s); }
.schema--on .sv-barre text { opacity: 1; transition: opacity .4s ease calc(var(--dl, 0s) + .3s); }

/* Mini-démos */
.demo { margin: 28px 0 1.15em; max-width: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 0; overflow: hidden; }
.demo__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; background: #0B3D4A; color: #F7F5F0; }
.prose .demo__tete h3 { margin: 0; font-size: 1.1875rem; color: #F7F5F0; }
.demo__tag { margin: 0 0 10px; font-size: .9375rem; color: var(--text-muted); }
.demo .demo-js { padding: 18px 20px 6px; }
.demo .demo-secours { padding: 18px 20px 6px; }
.demo__note { margin: 14px 0 12px; font-size: .875rem; color: var(--text-muted); max-width: 46rem; }
.prose .demo__note { margin-bottom: 12px; }
.demo__bilan { margin: 14px 0; padding: 12px 14px; border-radius: 6px; background: var(--surface-tint); font-size: 1rem; line-height: 1.45; min-height: 4.6em; }
.schema__bilan { margin: 0; font-size: .9375rem; line-height: 1.45; text-align: left; min-height: 6.4em; }
.schema__bilan a { color: var(--link); }
@media (prefers-color-scheme: dark) { .demo__bilan { background: #032933; } }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.seg legend { padding: 0; margin: 0 0 8px; font-size: .9375rem; font-weight: 600; }
.seg__o { position: relative; display: inline-flex; }
.seg__o input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg__o span { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 14px; border-radius: 6px; border: 1.5px solid var(--sel-bord); color: var(--sel-texte); font-weight: 600; font-size: .9375rem; line-height: 1.25; transition: background-color var(--motion-fast) ease; }
.seg__o small { font-weight: 500; font-size: .75rem; }
.seg__o:hover span { background: var(--sel-survol); }
.seg__o input:checked + span { background: var(--sel-fond); color: var(--sel-fond-texte); border-color: var(--sel-fond-bord); }
.seg__o input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.seg__o input:checked + span::after { content: ""; }
.schema .seg { margin-bottom: 6px; }
.schema .demo-js { padding: 0 4px; margin-bottom: 8px; }
.act-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: none; }
.prose .act { margin: 0; padding: 10px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; background: var(--k-fond, var(--bg)); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; }
.act__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: var(--tuile-3); color: #0B3D4A; }
.act__txt { display: flex; flex-direction: column; min-width: 0; font-size: 1rem; }
.act__phrase { color: var(--text-muted); font-size: .875rem; line-height: 1.4; }
.etat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; min-height: 28px; border-radius: 6px; font-size: .875rem; font-weight: 600; line-height: 1.2; background: var(--surface-tint); }
.etat .i { display: none; } .etat--seul .i-seul, .etat--propose .i-propose, .etat--ombre .i-ombre, .etat--arret .i-arret { display: inline-flex; }
.etat--seul { color: var(--success); } .etat--propose { color: var(--link); } .etat--ombre { color: var(--text-muted); } .etat--arret { color: var(--warning); }
@media (prefers-color-scheme: dark) { .etat { background: #032933; } }
.act--maj .etat, .act--maj .act__phrase { animation: apparait .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .prose .act { grid-template-columns: 40px minmax(0, 1fr); } .act .etat { grid-column: 2; justify-self: start; } }
.demo--valider { padding: 0; }
.demo--valider .demo__fenetre { border: 0; border-radius: 0; }
.demo--valider .demo__prop { gap: 12px; }
.demo--valider .demo__mail { min-height: 11.5rem; }
.demo--valider .demo__resultat { margin-top: 6px; }
.demo--valider .demo__resultat[hidden] { display: none; }
.demo__bilan { min-height: 3em; }
.demo--valider .demo__avalider[data-etat-badge="ok"] { background: var(--surface-tint); color: var(--success); }

@media print { .schema--pret .sv-etape, .schema--pret .sv-pointe { opacity: 1; transform: none; } .schema--pret .sv-bar { transform: none; } .schema--pret .sv-chemin, .schema--pret .sv-fleche, .schema--pret .sv-retour { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .schema--pret .sv-etape, .schema--pret .sv-pointe, .schema--pret .sv-barre text { opacity: 1 !important; transform: none !important; } .schema--pret .sv-bar { transform: none !important; } .schema--pret .sv-chemin, .schema--pret .sv-fleche, .schema--pret .sv-retour { stroke-dashoffset: 0 !important; } }
.demo__prop { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.demo--valider .demo__bilan { margin: 0; }
.demo__actions { padding: 0; }
.demo__ton { padding: 0; }
.cp-liste--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)) !important; }
.prose .act-liste { padding: 0; margin: 0; }
.prose .duo__txt ul.cp-liste, .prose .duo__txt ol.cn-liste { grid-template-columns: minmax(0, 1fr) !important; }

/* Résumé visible, détail à déplier (2026-10-14) : « En bref » en tête, le texte complet dans un <details> natif. */
.prose .en-bref { font-size: 1.1875rem; line-height: 1.5; color: var(--text); padding-left: 14px; border-left: 4px solid var(--tuile-1); }
.prose .en-bref > strong:first-child { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-right: 2px; }
.detail { max-width: 44rem; margin: 6px 0 4px; }
.detail > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--sel-bord); border-radius: 12px 0; background: var(--surface); font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--text); }
.detail > summary::-webkit-details-marker { display: none; }
.detail > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.detail[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.detail > summary:hover { border-color: var(--tuile-1); }
.detail > summary:focus-visible { outline: 3px solid var(--focus, var(--link)); outline-offset: 2px; }
.detail__fermer, .detail[open] .detail__ouvrir { display: none; }
.detail[open] .detail__fermer { display: inline; }
.detail__corps { padding-top: 14px; }
.detail__corps > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .detail[open] .detail__corps { animation: detail-ouvre .28s ease-out; }
  @keyframes detail-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* Méthode, version visuelle (2026-10-14) : flux en trois tuiles, frise des étapes, échelle des paliers, pastilles d'arrêt. */
/* Apparition à l'arrivée dans l'écran : état de départ posé par le script, sinon tout est visible. */
.flux__t.schema--pret, .frise__etape.schema--pret, .frise__decision.schema--pret, .marche.schema--pret { opacity: 0; transform: translateY(18px); }
.flux__t.schema--on, .frise__etape.schema--on, .frise__decision.schema--on, .marche.schema--on {
  opacity: 1; transform: none; transition: opacity .5s ease var(--dl, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s); }

.prose ol.flux { list-style: none; margin: 22px 0 8px; padding: 0; max-width: none; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 760px) { .prose ol.flux { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.prose .flux__t { position: relative; margin: 0; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px 0; }
.flux__ico { width: 56px; height: 56px; border-radius: 16px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tuile-1); color: var(--tuile-t); margin-bottom: 6px; }
.flux__t:nth-child(2) .flux__ico { background: var(--tuile-2); }
.flux__t:nth-child(3) .flux__ico { background: var(--btn-primary-bg); color: var(--btn-primary-text); }   /* l'étape clé (votre équipe valide) : plus d'aplat ardoise clair, qui paraissait grisé */
.prose .flux__t:nth-child(3) { border-color: var(--text); }
.flux__titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; color: var(--text); }
.flux__sous { font-size: .9375rem; line-height: 1.45; color: var(--text-muted); }
/* flèche entre deux tuiles : vers le bas sur téléphone, vers la droite sur grand écran */
.flux__t + .flux__t::before { content: ""; position: absolute; left: 44px; top: -30px; width: 2px; height: 22px; background: var(--accent-text); }
.flux__t + .flux__t::after { content: ""; position: absolute; left: 39px; top: -14px; border: 6px solid transparent; border-top: 8px solid var(--accent-text); border-bottom: 0; }
@media (min-width: 760px) {
  .flux__t + .flux__t::before { left: -34px; top: 48px; width: 24px; height: 2px; }
  .flux__t + .flux__t::after { left: -14px; top: 43px; border: 6px solid transparent; border-left: 8px solid var(--accent-text); border-right: 0; }
}

/* Frise des six étapes */
.prose ol.frise { list-style: none; margin: 26px 0 8px; padding: 0; max-width: none; position: relative; display: grid; gap: 18px; }
.frise::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: linear-gradient(var(--sv-pet), var(--tuile-1)); opacity: .55; }
.prose .frise__etape { margin: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; }
.frise__marque { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.frise__n { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 1.5rem; background: var(--brand-petrol); color: var(--on-dark); box-shadow: 0 0 0 5px var(--bande-petrole); }
.frise__ico { width: 40px; height: 40px; border-radius: 12px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tuile-2); color: var(--tuile-t); }
.frise__etape:nth-child(3n+1) .frise__ico { background: var(--tuile-1); }
.frise__etape:nth-child(3n) .frise__ico { background: var(--tuile-3); }
@media (prefers-color-scheme: dark) { .frise__n { background: var(--tuile-1); color: #2A1810; } }
.frise .etape { margin: 0; }
.prose .frise .etape h3 { margin: 6px 0 10px; }
.prose .frise__decision { margin: 0 0 0 72px; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px 0; background: var(--tuile-1); color: #2A1810; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.frise__dico { display: inline-flex; }
@media (min-width: 1000px) {
  /* Frise centrée, cartes alternées de part et d'autre du trait. */
  .prose ol.frise { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); column-gap: 26px; row-gap: 22px; }
  .frise::before { left: calc(50% - 1.5px); }
  .prose .frise__etape { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .frise__etape .frise__marque { grid-column: 2; grid-row: 1; }
  .frise__etape .etape { grid-column: 1; grid-row: 1; }
  .frise__etape--droite .etape { grid-column: 3; }
  .prose .frise__decision { grid-column: 1 / -1; justify-self: center; margin: 0; position: relative; z-index: 1; }
}

/* Échelle des paliers 0 à 3 */
.prose ol.echelle { list-style: none; margin: 22px 0 1.15em; padding: 0; max-width: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .prose ol.echelle { grid-template-columns: repeat(4, minmax(0, 1fr)); } .marche--0 { margin-bottom: 0; } .marche--1 { margin-bottom: 26px !important; } .marche--2 { margin-bottom: 52px !important; } .marche--3 { margin-bottom: 78px !important; } }
.prose .marche { margin: 0; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 0; border-top: 5px solid var(--tuile-3); }
.marche--1 { border-top-color: var(--tuile-2) !important; } .marche--2 { border-top-color: var(--tuile-1) !important; } .marche--3 { border-top-color: var(--sv-pet) !important; }
.marche__n { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--accent-text); }
.marche__jauge { display: block; height: 6px; margin: 10px 0 12px; border-radius: 3px; background: var(--surface-tint); overflow: hidden; }
.marche__jauge > span { display: block; height: 100%; width: calc(8% + var(--niv) * 30.6%); background: var(--tuile-1); border-radius: 3px; }
.marche__txt { font-size: 1rem; line-height: 1.5; }
.mini { margin-top: 10px; }
.mini > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: .9375rem; font-weight: 600; color: var(--link); list-style: none; }
.mini > summary::-webkit-details-marker { display: none; }
.mini > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mini[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.mini > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.prose .mini p { margin: 6px 0 0; font-size: .9375rem; color: var(--text-muted); }

/* Pastilles : les cas où l'agent passe la main */
.prose ul.pastilles { list-style: none; margin: 4px 0 1.15em; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 10px; }
.prose .pastilles > li { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; line-height: 1.3; }
.pastille__ico { display: inline-flex; color: var(--accent-text); }
@media (max-width: 600px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .frise__etape { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .frise::before { left: 22px; }
  .frise__n { width: 44px; height: 44px; font-size: 1.25rem; }
  .frise__ico { width: 34px; height: 34px; }
  .frise .etape { padding: 16px 16px 6px; }
  .prose .frise .en-bref { padding-left: 10px; }
  .prose .frise__decision { margin-left: 56px; }
}

/* Fiches d'agents en bandes (2026-10-14) : carte d'identité en trois colonnes, parcours, pastilles. */
.fiche-trio { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 4px 0 8px; }
@media (min-width: 900px) { .fiche-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fiche-carte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 0; padding: 20px 20px 10px; border-top: 5px solid var(--tuile-2); min-width: 0; }
.fiche-carte--fera { border-top-color: var(--tuile-1); }
.fiche-carte--jamais { border-top-color: var(--sv-pet); }
.fiche-carte__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fiche-carte__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tuile-2); color: var(--tuile-t); }
.fiche-carte--fera .fiche-carte__ico { background: var(--tuile-1); }
.fiche-carte--jamais .fiche-carte__ico { background: var(--tuile-3); }
.prose .fiche-carte h2 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.prose .fiche-carte ul { margin: 0 0 10px; padding-left: 1.1em; font-size: 1rem; }
.prose .fiche-carte li { margin: .35em 0; }
.prose .bande__in > .fiche-trio, .prose .bande__in > .fiche-duo { max-width: none; }
.fiche-duo { display: grid; gap: 28px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fiche-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prose .fiche-duo h2 { margin-top: 0; }
.fiche-note { font-size: .9375rem; color: var(--text-muted); }
.prose ul.pastilles--outils > li { font-weight: 600; }
.prose .bande__in > .garde-fou { max-width: 44rem; margin: 0 0 18px; }
/* Mouvement réduit : plus aucune animation ni transition, plus de soulèvement ; tout est visible tout de suite. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
.rev,.js-anim .rev{opacity:1 !important;transform:none !important}
.offre:hover,.voisin:hover,a.carte:hover,.carte:hover,.bouton:hover{transform:none !important}
}
/* Équipe d'agents : catalogue (filtres, cartes qui se déplient) et fiches. Aucun défilement horizontal : tout passe à la ligne. */
/* Catalogue : filtres dans une colonne à gauche (collée en haut au défilement) et cartes à droite ; sous 960 px, les
   filtres passent au-dessus, repliés derrière « Filtrer les agents ». */
.agents-zone { display: grid; gap: 24px; margin-top: 30px; }
@media (min-width: 960px) {
  .agents-zone { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
  .agents-cote { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
  .agents-tiroir__titre { display: none !important; }
}
.agents-tiroir { background: var(--bg); border: 1px solid var(--line); border-radius: 12px 12px 12px 0; }
.agents-tiroir__titre { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 18px; font-weight: 700; }
.agents-tiroir__titre::-webkit-details-marker { display: none; }
.agents-tiroir__titre::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--motion-fast) ease; }
.agents-tiroir[open] .agents-tiroir__titre::after { transform: translateY(2px) rotate(-135deg); }
.agents-tiroir__corps { display: flex; flex-direction: column; gap: 20px; padding: 6px 14px 18px; }
@media (min-width: 960px) { .agents-tiroir__corps { padding-top: 18px; } }
.agents-groupe { display: flex; flex-direction: column; gap: 2px; }
.agents-groupe__titre { margin: 0 0 6px; padding: 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* Chaque choix est une ligne : libellé à gauche, nombre d'agents à droite ; le choix actif est plein bleu pétrole. */
.agents-groupe .selecteur { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.agents-groupe .selecteur:hover { background: var(--sel-survol); }
.agents-groupe .selecteur[aria-pressed="true"] { background: var(--sel-fond); color: var(--sel-fond-texte); font-weight: 600; }
.agents-groupe .selecteur:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.agents-filtres .nb { font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums; opacity: .8; }
.agents-resultats .statut { margin: 0 0 14px; color: var(--text-muted); font-weight: 600; }
.agents-vide { margin: 0 0 24px; padding: 28px 24px; border: 1.5px dashed var(--line); border-radius: 12px 12px 12px 0; text-align: center; background: var(--surface); }
.agents-vide p { margin: 0 0 14px; }
/* Cartes : même hauteur dans une rangée ; toute la carte mène à la fiche (le lien du nom la couvre). */
.agents-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.agents-liste > li { display: flex; min-width: 0; }
.agents-liste:not(:last-child) { margin-bottom: 48px; }   /* pages de secteur : de l'air avant le titre suivant */
.agent { flex: 1; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 0; transition: border-color var(--motion-fast) ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.bande-page--blanc .agent { background: var(--bg); }
.agent:hover { border-color: var(--text); }
.agent:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .agent:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,61,74,.14); } }
@media (hover: hover) and (prefers-color-scheme: dark) { .agent:hover { box-shadow: 0 18px 40px rgba(0,0,0,.5); } }
.agent__tete { display: flex; align-items: center; gap: 14px; }
.agent__pic { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px 14px 14px 0; background: #DDEBEE; }
.agent__pic svg { width: 26px; height: 26px; }
.agent__pic--finance { background: #E2BF76; } .agent__pic--vente { background: #FC875A; } .agent__pic--support { background: #61B1EF; }
.agent__pic--operations { background: #B3C9CE; } .agent__pic--rh { background: #DDEBEE; } .agent__pic--direction { background: #E8E2D7; }
.agent__nom { margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
.agent__nom a { color: var(--text); text-decoration: none; }
.agent__nom a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.agent__nom a:focus-visible { outline: none; }
.agent__etiquettes { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.agent__etiquettes .puce { min-height: 24px; padding: 2px 8px; font-size: .8125rem; }
.puce--ia { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px currentColor; }
.niv { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.niv i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.niv i.on { background: currentColor; }
.agent__phrase { margin: 0; color: var(--text-muted); font-size: .9375rem; line-height: 1.5; }
.agent__mention { margin: 0; font-size: .875rem; font-weight: 600; color: var(--warning); }
.agent__voir { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; font-size: .9375rem; color: var(--link); }
.hero .meta { margin: 20px 0 0; gap: 6px; }
.hero .meta .puce { white-space: nowrap; padding: 3px 8px; font-size: .8125rem; }
.mention-agent { margin: 12px 0 0; font-weight: 600; color: var(--z-texte); }
.hero .meta .niv { margin-left: 4px; }
.garde-fou { max-width: 46rem; margin: 0 0 8px; padding: 16px 20px; border-left: 4px solid var(--accent-text); border-radius: 0 6px 6px 0; background: var(--surface-encadre); font-size: 1.0625rem; line-height: 1.55; }
.garde-fou p { margin: 0; }
.agent__garde { padding: 10px 14px; margin: 8px 0 4px; border-left: 4px solid var(--accent-text); border-radius: 0 6px 6px 0; background: var(--surface-encadre); }
.agent__garde h4 { margin: 0 0 2px; }
.titre-agents-secteur { margin: 28px 0 18px; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.625rem, 1.35rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
/* Page /secteurs/ (direction B, 2026-10-14) : dix cartes de même hauteur par rangée, puis une bande en feuille. */
.secteurs-grille {
  list-style: none; margin: 0 auto; max-width: var(--largeur, 1440px);
  padding: 56px max(var(--gouttiere), env(safe-area-inset-right)) 64px max(var(--gouttiere), env(safe-area-inset-left));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 22px;
}
.secteurs-grille > li { display: flex; }
.secteur-carte {
  flex: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 6px 18px;
  padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 0; position: relative;
}
.secteur-carte__ic { grid-row: 1 / 4; width: 56px; height: 56px; border-radius: 14px 14px 14px 0; display: grid; place-items: center; color: #0B3D4A; }
.secteur-carte__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secteur-carte__titre { grid-column: 2; margin: 2px 0 0; font-family: var(--f-titre); font-weight: 700; font-size: 1.375rem; line-height: 1.25; }
.secteur-carte__titre a { color: var(--text); text-decoration: none; }
/* Toute la carte est cliquable par le lien du titre ; le focus reste visible sur la carte. */
.secteur-carte__titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.secteur-carte:hover { border-color: var(--text); }
.secteur-carte:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.secteur-carte__titre a:focus-visible { outline: none; }
.secteur-carte__desc { grid-column: 2; margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.secteur-carte__agents { grid-column: 2; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.secteur-carte__agents li { font-size: .875rem; font-weight: 600; padding: 5px 10px; border-radius: 6px; background: var(--surface-tint); color: var(--text); }
.secteur-carte__pied { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--text-muted); }
.secteur-carte__lire { color: var(--link); font-weight: 600; font-size: .9375rem; }
/* Bande en feuille (coins haut gauche et bas droit arrondis), teinte pétrole 100 : l'alternance des blocs demandée par
   Maxime le 2026-10-14 (« une sorte d'alternance entre les blocs pour une bonne visibilité »). */
.bande-feuille { background: var(--surface-tint); border-radius: var(--feuille) 0 var(--feuille) 0; margin: 0 0 72px; }
.bande-feuille__inner { max-width: 1080px; margin: 0 auto; padding: 60px max(var(--gouttiere), env(safe-area-inset-right)) 64px max(var(--gouttiere), env(safe-area-inset-left)); }
.bande-feuille__inner h2 { margin-top: 8px; }
/* Trois règles côte à côte (liste à puces de la source : « **Titre.** texte »). */
.regles-trois ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 34px; }
.regles-trois li { margin: 0; padding: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.regles-trois li strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 1.125rem; }
/* Pages en bandes (mise_en_bandes) : une bande pleine largeur par titre h2, fonds alternés, coupe en feuille. */
.bandes-page { --bande-sable: #F1EBDF; }
@media (prefers-color-scheme: dark) { .bandes-page { --bande-sable: #0B3D4A; } }
.bande-page { margin: 0; }
.bande-page--teinte { background: var(--surface-tint); }
.bande-page--blanc { background: var(--surface); }
.bande-page--sable { background: var(--bande-sable); }
.bande-page--feuille { border-radius: var(--feuille) 0 var(--feuille) 0; }
.bande-page--feuille-inverse { border-radius: 0 var(--feuille) 0 var(--feuille); }
.bande-page__inner { max-width: var(--largeur, 1440px); margin: 0 auto; padding: 72px max(var(--gouttiere), env(safe-area-inset-right)) 76px max(var(--gouttiere), env(safe-area-inset-left)); }
.bande-page__inner > h2 { margin: 0 0 14px; max-width: 26ch; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; }
.bande-page__inner > p { max-width: 46rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; }
.bande-page__inner > h2 + p { font-size: 1.125rem; margin-bottom: 30px; }
.bande-page__cartes { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
@media (min-width: 900px) { .bande-page__cartes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bande-page__cartes li { margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.bande-page--teinte .bande-page__cartes li, .bande-page--sable .bande-page__cartes li { border-color: transparent; }
.bande-page--blanc .bande-page__cartes li { background: var(--bg); }
/* Carte de prix (page Tarifs) : libellé, montant en grand, unité, puis le texte ; filet corail en haut. */
.bande-page__cartes .carte-prix { display: flex; flex-direction: column; gap: 4px; border-top: 4px solid #FC875A; }
.carte-prix__libelle { color: var(--text); font-weight: 700; font-size: 1rem; }
.carte-prix__montant { margin-top: 6px; color: var(--text); font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; }
.carte-prix__unite { color: var(--text-muted); font-size: .9375rem; font-weight: 600; }
.carte-prix__texte { margin-top: 10px; }
.bande-page__cartes li strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 1.1875rem; line-height: 1.3; }
/* Frise : huit étapes numérotées sur une ligne au-delà de 1100 px, en grille de quatre, puis en colonne sur téléphone. */
.bande-page__frise { list-style: none; margin: 8px 0 24px; padding: 0; counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px 0; position: relative; }
@media (min-width: 1100px) {
  .bande-page__frise { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bande-page__frise::before { content: ""; position: absolute; left: 22px; right: 4%; top: 21px; height: 3px; background: var(--text); opacity: .22; }
}
.bande-page__frise li { counter-increment: etape; position: relative; margin: 0; padding: 0 12px 0 0; color: var(--text-muted); font-size: .9375rem; line-height: 1.45; }
.bande-page__frise li::before { content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 700; position: relative; }
.bande-page__frise li strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 1rem; line-height: 1.3; }
.bande-page__frise li em { display: table; margin-top: 10px; padding: 3px 8px; border-radius: 6px; background: #FC875A; color: #2A1810; font-style: normal; font-weight: 700; font-size: .8125rem; }
.bande-page__encadre { max-width: 46rem; margin: 8px 0 24px; padding: 18px 22px; border-left: 4px solid #FC875A; border-radius: 0 8px 8px 0; background: var(--surface); color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.bande-page--blanc .bande-page__encadre { background: var(--bg); }
.bande-page__encadre p { margin: 0; }
.bande-page__encadre strong { color: var(--text); }
.bande-page__plus { max-width: 46rem; margin-top: 18px; color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }
.bande-page__plus summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 6px 0; }
.bande-page__plus summary:hover { color: var(--link-hover); }
.bandes-page__sources { max-width: var(--largeur, 1440px); margin: 0 auto; padding: 40px max(var(--gouttiere), env(safe-area-inset-right)) 24px max(var(--gouttiere), env(safe-area-inset-left)); }
.etroit { max-width: 46rem; }
.etroit.prose { padding-top: 12px; }
.large > .etroit .sources { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .agent:hover, .agent:not([open]):hover { transform: none !important; } }

.ag{margin-top:22px;max-width:44rem}
.ag-commandes{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
@media (min-width:760px){.ag-commandes{justify-content:flex-end}}
.ag-commandes:not(:empty){margin-bottom:10px}
.ag-annonce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ag-defs{position:absolute;width:0;height:0}
.prose .ag-scene{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:18px;border-radius:12px;background:var(--k-surface);border:1px solid var(--k-ligne);color:var(--k-texte)}
@media (min-width:760px){.prose .ag-scene{padding:24px}}
.prose .ag-scene ul{list-style:none;margin:0;padding:0}
.prose .ag-scene li{margin:0;padding:0}
.prose .ag-scene p{margin:0}
.prose .ag-outils{display:flex;flex-wrap:wrap;gap:8px}
.prose .ag-outil{padding:6px 12px;border-radius:999px;background:var(--k-fond);border:1px solid var(--k-ligne);font-weight:700}
.prose .ag-note{color:var(--k-doux)}
.prose .ag-taches,.prose .ag-limites,.prose .ag-valides{display:grid;gap:10px}
.prose .ag-tache,.prose .ag-limite{display:flex;align-items:flex-start;gap:10px}
.ag-i{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-tache .ag-i{color:var(--k-succes)}
.ag-joue .ag-tache:not(.ag-ok) .ag-i{color:var(--k-doux)}
.ag-limite .ag-i{color:var(--k-texte)}
.prose .ag-validation{display:flex;align-items:flex-start;gap:10px;padding-top:14px;border-top:1px solid var(--k-ligne)}
.ag-validation>.ag-i{color:var(--k-doux)}
.prose .ag-valides{flex:1;min-width:0}
.prose .ag-tampon{display:inline-block;align-self:flex-start;padding:2px 10px;border:2px solid var(--k-succes);border-radius:6px;color:var(--k-texte);font-weight:700;text-transform:uppercase;letter-spacing:.06em;transform:rotate(-4deg)}
.prose .ag-limites{padding-top:14px;border-top:1px solid var(--k-ligne)}
.ag-e{transition:opacity 120ms ease,transform 120ms ease}
.ag-joue .ag-e:not(.ag-on){opacity:0;transform:translateY(6px)}
.ag-joue .ag-tampon:not(.ag-on){transform:rotate(-4deg) scale(1.3)}