:root {
  --c-bleu-nuit: #0B132B;
  --c-bleu-profond: #122451;
  --c-blanc-casse: #F7F9FC;
  --c-blanc: #FFFFFF;
  --c-jaune: #FFC94D;
  --c-jaune-fonce: #FFB100;
  --c-jaune-texte: #8F6300;
  --c-beige: #FFF1CC;
  --c-bleu-google: #4285F4;
  --c-bleu-google-texte: #0D5DE1;
  --c-bleu-google-sombre: #5F98F6;
  --c-bleu-gris: #82A7E2;
  --c-ardoise: #4A5568;
  --c-gris-texte: #5F6E8C;
  --c-bordure: #E3E8F0;
  --c-texte-editorial: #2B3550;
  --c-lien-pied: #B9CBEA;
  --c-copyright: #8FA3C8;
  --c-fond-citation: #FFFCF3;
  --c-vert: #2DAA6E;
  --c-teinte-jaune: #FFEFCC;
  --c-teinte-bleu: #DDE8FC;
  --c-teinte-vert: #DFF3E8;
  --c-teinte-violet: #E7DEFD;
  --c-teinte-orange: #FDE4D6;
  --c-teinte-rouge: #FBE0E1;
  --g-sombre: linear-gradient(135deg,#122451,#0B132B);
  --f-display: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --f-corps: "Open Sans", "Open Sans Fallback", system-ui, sans-serif;
  --t-h1-hero: clamp(44px, 5.8vw, 82px);
  --t-h2: clamp(28px, 3.6vw, 46px);
  --t-corps: 16px;
  --t-corps-editorial: 17px;
  --l-contenu: 1320px;
  --l-marge: clamp(20px, 4vw, 60px);
  --l-gouttiere: 28px;
  --r-carte: 20px;
  --r-photo: 16px;
  --r-pill: 999px;
  --o-ombre: 0 2px 10px rgba(11,19,43,.06);
  --m-transition: 140ms ease-out;
  --m-courbe: cubic-bezier(.22,.61,.36,1);
}

/* Feuille de base — docs/specs/cms-socle/07_public-render.md § Feuille de base, relevée dans
   docs/design-reference/cms-socle/maquettes-base.html : base du design system, puis règles de page
   communes des maquettes. */
* { box-sizing: border-box }
/* media.Picture pose width et height sur <img> pour réserver la place avant le chargement ; sans
   height: auto, cette hauteur d'attribut fige la boîte et l'aspect-ratio des modules ne s'applique
   jamais — la photo s'affiche à sa hauteur naturelle (15 FR-3, mesuré au build 102). */
img { height: auto }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important }
}
body {
  margin: 0;
  background: var(--c-blanc-casse);
  color: var(--c-bleu-nuit);
  font-family: var(--f-corps);
  font-size: var(--t-corps);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-bleu-nuit);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: 48px }
h2 { font-size: 24px; line-height: 1.25 }
h3 { font-size: 21px; font-weight: 400 }
p { margin: 0 }
/* Cette règle est un contrat de fond CLAIR, et le survol y prend le jeton de TEXTE : `--c-jaune-fonce`
   donne 1,73 sur le `--c-blanc-casse` que `body` déclare et 1,82 sur le `#FFFFFF` des cartes, quand
   `--c-jaune-texte` y donne 5,04 et 5,31. axe ne l'aurait jamais relevé — il n'évalue que l'état de
   repos —, et c'est justement pourquoi le survol doit SUIVRE le repos, qui est déjà à 17,43. Sur fond
   sombre le jeton tomberait à 2,83 sur `--c-bleu-profond`, le bout clair de `--g-sombre` : les deux
   surfaces qui y rendent du texte riche redéclarent `a` chez elles, le corps sombre de `texte-media` et
   l'intérieur d'une citation sombre de `corps-riche`. Le pied de page fait déjà ce partage plus bas, où
   le jaune de la charte est la bonne réponse (10,10 sur le bleu nuit). Mesuré le 2026-09-20 au build 118
   (07 § Jaune et gris de TEXTE, 15 FR-8.4.7). */
a { color: var(--c-bleu-nuit); text-decoration: none; border-bottom: 1px solid var(--c-jaune-fonce) }
a:hover { color: var(--c-jaune-texte); border-bottom-color: currentColor }
/* Un lien DANS le texte — paragraphe ou liste, sans classe, donc ni carte, ni bouton, ni menu, ni pied
   de page — reste bleu nuit au survol et se souligne en jaune, 3 px à 4 px sous le texte ; son trait de
   repos s'efface (charte du marketing du 2026-09-24 : aucun texte jaune sur fond clair). */
p a:not([class]):hover, li a:not([class]):hover { color: var(--c-bleu-nuit); border-bottom-color: transparent; text-decoration: underline 3px var(--c-jaune-fonce); text-underline-offset: 4px }
strong, b { font-weight: 600 }
ul { margin: 0; padding-left: 1.1em; list-style: none }
ul > li { position: relative }
ul > li::before {
  content: "";
  position: absolute; left: -1em; top: .62em;
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--c-jaune-fonce);
}
[id] { scroll-margin-top: 92px }
@keyframes pylUp { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes pylFade { from { opacity: 0 } to { opacity: 1 } }
/* Révélation (§ Animations, FR-12.1) : masquée seulement si le script peut tourner, révélée par site.js
   (data-revealed, data-revealing pendant la transition), sinon par le secours à 3 s que data-site-js annule. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not([data-revealed]) { opacity: 0; transform: translateY(22px); animation: pylSecours 0s 3s forwards }
  [data-reveal-x="left"]:not([data-revealed]) { transform: translateX(-40px) }
  [data-reveal-x="right"]:not([data-revealed]) { transform: translateX(40px) }
  [data-reveal-x="grow"]:not([data-revealed]) { transform: scaleX(0); transform-origin: left center }
  html[data-site-js] [data-reveal]:not([data-revealed]) { animation: none }
  [data-reveal][data-revealing] { transition: opacity 700ms var(--m-courbe), transform 700ms var(--m-courbe) !important }
  [data-reveal][data-revealing="1"] { transition-delay: 70ms !important }
  [data-reveal][data-revealing="2"] { transition-delay: 140ms !important }
  [data-reveal][data-revealing="3"] { transition-delay: 210ms !important }
  [data-reveal][data-revealing="4"] { transition-delay: 280ms !important }
  [data-reveal][data-revealing="5"] { transition-delay: 350ms !important }
  /* Barre qui s'allonge (FR-12.7) : scaleX depuis la gauche, 150 ms de plus que le délai du rang.
     Ces règles suivent celles qu'elles remplacent : à spécificité égale la dernière l'emporte. */
  [data-reveal][data-reveal-x="grow"][data-revealing] { transition: opacity 400ms ease-out, transform 900ms var(--m-courbe) !important; transform-origin: left center }
  [data-reveal][data-reveal-x="grow"][data-revealing="0"] { transition-delay: 150ms !important }
  [data-reveal][data-reveal-x="grow"][data-revealing="1"] { transition-delay: 220ms !important }
  [data-reveal][data-reveal-x="grow"][data-revealing="2"] { transition-delay: 290ms !important }
  [data-reveal][data-reveal-x="grow"][data-revealing="3"] { transition-delay: 360ms !important }
  [data-reveal][data-reveal-x="grow"][data-revealing="4"] { transition-delay: 430ms !important }
  [data-reveal][data-reveal-x="grow"][data-revealing="5"] { transition-delay: 500ms !important }
  [data-parallax] { will-change: transform }
}
@keyframes pylSecours { to { opacity: 1; transform: none } }

/* Gabarit — 07 § Gabarit, relevé dans docs/design-reference/cms-socle/maquettes-gabarit.html. */
.l-skip {
  position: absolute; left: 16px; top: 12px; z-index: 50;
  padding: 10px 18px; border-radius: var(--r-pill); border-bottom: none;
  background: var(--c-bleu-nuit); color: #FFFFFF;
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  transform: translateY(-200%);
}
.l-skip:focus { transform: none }
.l-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 16px var(--l-marge);
  background: var(--c-blanc-casse); border-bottom: 1px solid var(--c-bordure);
}
.l-header__logo { display: flex; align-items: center; border-bottom: none }
.l-header__logo img { display: block; height: 32px; width: auto }
.l-nav { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0 }
.l-nav__link { font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); border-bottom: none; transition: background 140ms ease-out }
.l-nav__link:hover { background: rgba(11,19,43,.05) }
.l-nav__link--parent { display: inline-flex; align-items: center; gap: 8px }
.l-nav__chevron {
  display: inline-block; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.l-nav__item { position: relative; padding-bottom: 16px; margin-bottom: -16px }
.l-nav__panel {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 40;
  min-width: 250px; gap: 2px; padding: 14px;
  background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre);
}
@media (min-width: 1050px) {
  .l-nav__item:hover > .l-nav__panel, .l-nav__item:focus-within > .l-nav__panel { display: grid }
}
.l-nav__sublink { display: block; padding: 9px 12px; border-radius: 10px; border-bottom: none; font-size: 15px; line-height: 1.35 }
.l-nav__sublink:hover { background: rgba(11,19,43,.05) }
.l-nav__sublink--sep { margin-top: 6px; border-top: 1px solid var(--c-bordure) }
/* Rubrique de menu : un bouton rendu comme un lien parent, dont aria-expanded, écrit par site.js, ouvre
   le panneau à toute largeur. Tant que data-nav-js manque sur la racine — script absent ou en erreur —,
   le survol et le focus l'ouvrent. */
.l-nav__rubrique { position: relative; padding-bottom: 16px; margin-bottom: -16px }
.l-nav__toggle { margin: 0; border: 0; background: none; color: inherit; font-family: inherit; line-height: inherit; cursor: pointer }
.l-nav__toggle:hover { color: var(--c-jaune-texte) }
.l-nav__toggle[aria-expanded="true"] + .l-nav__panel { display: grid }
:root:not([data-nav-js]) .l-nav__rubrique:hover > .l-nav__panel, :root:not([data-nav-js]) .l-nav__rubrique:focus-within > .l-nav__panel { display: grid }
/* La page courante du menu : texte bleu nuit en 600, sans fond, soulignée d'un trait jaune de 3 px
   (charte du marketing du 2026-09-24 : le jaune ne sert qu'en fond, en trait ou en soulignement). C'est
   le seul état de lien de repos de cette feuille, donc le seul qu'axe juge : le bleu nuit y passe sans
   peine sur --c-blanc-casse. */
.l-nav__link[aria-current], .l-nav__sublink[aria-current] { font-weight: 600; color: var(--c-bleu-nuit); text-decoration: underline 3px var(--c-jaune-fonce); text-underline-offset: 4px }
.l-header__end { display: flex; align-items: center; gap: 8px; flex: none }
@media (max-width: 1049px) {
  .l-nav { gap: 0; overflow-x: auto; scrollbar-width: none }
  .l-nav::-webkit-scrollbar { display: none }
  .l-nav__link { font-size: 13px; padding: 7px 8px }
  .l-nav__item { padding-bottom: 0; margin-bottom: 0 }
  .l-nav__rubrique { position: static; padding-bottom: 0; margin-bottom: 0 }
  .l-nav__rubrique > .l-nav__panel { left: var(--l-marge); right: var(--l-marge); min-width: 0; white-space: normal }
}
/* Téléphone : le logo, la langue et le bouton d'action prennent la première ligne de l'en-tête, la barre
   du menu passe dessous sur toute la largeur, défilante comme au-dessus de 600 px (bead Pyl-Tech-tbq). */
@media (max-width: 599px) {
  .l-header { flex-wrap: wrap; column-gap: 12px; row-gap: 10px }
  .l-header__logo img { height: 28px }
  .l-nav { order: 3; flex: 0 0 100% }
  .l-header .l-header__cta { padding: 9px 14px; font-size: 13px }
}
.l-footer { padding: clamp(48px, 5vw, 76px) var(--l-marge) clamp(36px, 4vw, 56px); background: var(--c-bleu-nuit) }
.l-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); max-width: var(--l-contenu); margin: 0 auto;
}
@media (max-width: 1023px) { .l-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 599px) { .l-footer__grid { grid-template-columns: minmax(0, 1fr) } }
.l-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px }
.l-footer__logo { display: block; height: 36px; width: auto }
.l-footer__copy { max-width: 20ch; font-size: 14px; line-height: 1.6; color: var(--c-copyright) }
.l-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px }
.l-footer__title { margin: 0 0 10px; font-family: var(--f-display); font-size: 16px; font-weight: 600; color: #FFFFFF }
.l-footer__link { font-size: 15px; line-height: 1.5; color: var(--c-lien-pied); border-bottom: none }
a.l-footer__link:hover { color: var(--c-jaune-fonce) }
.l-footer__social { display: flex; margin-top: 4px; border-bottom: none }
.l-footer__social img { display: block }
.l-totop {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 40;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--r-pill); border-bottom: none;
  background: var(--c-bleu-nuit); box-shadow: var(--o-ombre);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease-out, background 140ms ease-out;
}
.l-totop:hover { background: var(--c-bleu-profond) }
.l-totop:focus-visible { opacity: 1; pointer-events: auto }
.l-totop[data-on] { opacity: 1; pointer-events: auto }
.l-totop__chevron {
  display: inline-block; width: 11px; height: 11px;
  border-top: 2px solid var(--c-jaune); border-right: 2px solid var(--c-jaune);
  transform: translateY(2px) rotate(-45deg);
}
.l-error {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  padding: clamp(56px, 6vw, 92px) max(var(--l-marge), calc((100% - var(--l-contenu)) / 2)) clamp(48px, 5vw, 76px);
  background: var(--g-sombre);
}
.l-error__title {
  max-width: 22ch; font-family: var(--f-display); font-size: clamp(34px, 4.4vw, 58px); font-weight: 600;
  line-height: 1.04; letter-spacing: -.015em; color: #FFFFFF;
}

/* Cadres, colonnes et bande emploi — 07 § Cadres et colonnes, relevé dans
   docs/design-reference/cms-socle/maquettes-cadres.html. */
.l-frame--etroit { background: var(--c-blanc-casse); padding: clamp(40px, 4.5vw, 64px) max(var(--l-marge), calc((100% - 900px) / 2)) clamp(56px, 6vw, 88px) }
.l-frame--texte { background: #FFFFFF; padding: 0 max(var(--l-marge), calc((100% - 760px) / 2)) clamp(56px, 6vw, 88px) }
.l-frame--contenu { background: var(--c-blanc-casse); padding: 0 max(var(--l-marge), calc((100% - var(--l-contenu)) / 2)) 96px }
.l-frame--blanc { background: #FFFFFF; padding: 0 max(var(--l-marge), calc((100% - var(--l-contenu)) / 2)) clamp(72px, 8vw, 104px) }
.m-corps-riche--article:has(+ .l-frame--texte), .m-corps-riche--cas-client:has(+ .l-frame--texte) { padding-bottom: 0 }
/* L'article perdant sa marge basse et le cadre n'ayant pas de marge haute, une citation qui le suit
   dans la même section collait au texte : le cadre qui l'ouvre prend l'écart d'un paragraphe avant une
   citation rt-quote (07 FR-5.2, retour du marketing du 2026-09-24). Une marge interne du cadre et non
   une margin-top de la citation : celle-ci fusionnerait à travers le cadre et tomberait sur le fond
   de la section, en bande claire entre deux blocs blancs. */
.m-corps-riche--article + .l-frame--texte:has(> .m-temoignages--citation:first-child), .m-corps-riche--cas-client + .l-frame--texte:has(> .m-temoignages--citation:first-child) { padding-top: 26px }
.l-section--1-1, .l-section--2-1, .l-section--1-2, .l-section--1-1-1 {
  display: grid; align-items: start; gap: 32px;
  padding: 0 max(var(--l-marge), calc((100% - var(--l-contenu)) / 2)) 96px;
  background: var(--c-blanc-casse);
}
.l-section--1-1 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) }
.l-section--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) }
.l-section--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) }
.l-section--1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 899px) { .l-section--1-1, .l-section--2-1, .l-section--1-2, .l-section--1-1-1 { grid-template-columns: minmax(0, 1fr) } }
.l-job { padding: clamp(24px, 3vw, 36px) max(var(--l-marge), calc((100% - var(--l-contenu)) / 2)) }
.l-job__filled {
  display: inline-flex; padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-beige);
  font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit);
}

/* Composants communs — docs/specs/cms-socle/04_module-system.md § Composants communs.
   Relevés : bouton Button et damier PixelMotif du design system, lien contour, fil d'Ariane
   et filigrane des sections de hero (docs/design-reference/cms-socle/maquettes-hero.html), en-tête des
   sections (docs/design-reference/cms-socle/maquettes-en-tetes.html). */

.c-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer }
.c-btn--primary, .c-btn--outline { justify-content: center; padding: 12px 24px; border: none; font-family: var(--f-display); line-height: 1.2; transition: var(--m-transition) }
.c-btn--primary, .c-btn--primary:hover { background: var(--c-jaune-fonce); color: var(--c-bleu-nuit) }
.c-btn--primary:hover { filter: brightness(.95) }
.c-btn--outline, .c-btn--outline:hover { background: transparent; color: var(--c-bleu-nuit); box-shadow: inset 0 0 0 1.5px var(--c-bleu-nuit) }
.c-btn--outline:hover { background: rgba(11, 19, 43, .05) }
.c-btn--ghost-dark, .c-btn--ghost-dark:hover { gap: 10px; padding: 11px 22px; border: 1.5px solid rgba(255, 255, 255, .35); color: #FFFFFF; transition: background 140ms ease-out, border-color 140ms ease-out }
.c-btn--ghost-dark:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .6) }

.c-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 14px }
.c-breadcrumb--sombre { color: var(--c-bleu-gris) }
.c-breadcrumb--sombre a, .c-breadcrumb--sombre a:hover { color: var(--c-bleu-gris); border-bottom: none }
.c-breadcrumb--sombre .c-breadcrumb__sep { opacity: .5 }
.c-breadcrumb--sombre .c-breadcrumb__current { color: #FFFFFF }
.c-breadcrumb--clair { color: var(--c-gris-texte) }
.c-breadcrumb--clair a, .c-breadcrumb--clair a:hover { color: #5F6368; border-bottom: none }
.c-breadcrumb--clair .c-breadcrumb__current { color: var(--c-bleu-nuit); font-weight: 600 }

.c-watermark { position: absolute; width: auto; max-width: none; pointer-events: none }

.c-motif { position: absolute; top: 0; right: 0; pointer-events: none }
.c-motif span { position: absolute; background: var(--motif-color, var(--c-jaune)); box-shadow: inset 0 0 0 1px rgba(247, 249, 252, .55) }

/* Aucun texte jaune sur fond clair (charte du marketing du 2026-09-24) : le surtitre est bleu nuit, et
   le jaune passe dans le trait qui le précède, 18 × 3 px à 10 px du texte. Sur fond sombre, une variante
   rend le texte jaune par-dessus ; le trait reste. */
.c-header__kicker { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.c-header__kicker::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 10px; border-radius: 2px; background: var(--c-jaune-fonce); vertical-align: middle }
/* Le ton google prend le jeton de TEXTE du bleu, et non le bleu de la charte : le surtitre est en
   15 px 600, donc du petit texte, et `--c-bleu-google` #4285F4 y vaut 3,56 sur #FFFFFF, 3,38 sur
   var(--c-blanc-casse), 3,17 sur var(--c-beige) et 2,89 sur var(--c-teinte-bleu) — les quatre sous 4,5.
   `--c-bleu-google-texte` #0D5DE1, dérivé en gardant la teinte 217° de l'original comme le jaune l'a été
   à 42°, les porte à 5,72, 5,43, 5,10 et 4,64 (07 § Jaune et gris de TEXTE). Le jeton d'origine ne bouge
   pas : il sert de FOND ailleurs, et la règle d'emploi ne touche jamais un fond. Sur fond SOMBRE, une
   variante redéclare `--c-bleu-google-sombre` par-dessus, car #0D5DE1 y tomberait. Mesuré le 2026-09-20,
   build 115. */
.c-header__kicker--google { color: var(--c-bleu-google-texte) }
.c-header__title { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: pretty }
.c-header__intro { margin: 0; font-size: 18px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }

/* Vidéo — rendue par media.Video (09 FR-5.1, 04 § Composants communs) : le bouton de pause d'une vidéo
   d'ambiance au coin bas droit, caché par son attribut hidden tant que site.js ne l'a pas montré ; aucune
   règle ne lui donne de display, qui l'emporterait sur hidden. Deux barres blanches, un triangle en pause. */
.c-video { position: relative }
.c-video__media { display: block; width: 100%; height: auto }
.c-video__toggle { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 19, 43, .64); opacity: .72; cursor: pointer }
.c-video__toggle:hover { opacity: 1 }
.c-video__toggle:focus-visible { opacity: 1; outline: 2px solid #FFB100; outline-offset: 2px }
.c-video__toggle::before, .c-video__toggle::after { content: ""; position: absolute; top: 13px; width: 4px; height: 14px; background: #FFFFFF }
.c-video__toggle::before { left: 14px }
.c-video__toggle::after { left: 22px }
.c-video__toggle[data-paused]::before { left: 15px; width: 0; height: 0; background: none; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #FFFFFF }
.c-video__toggle[data-paused]::after { content: none }

/* Lecteur — barre de contrôles d'une vidéo avec le lecteur (09 FR-5.1, correctif du 2026-10-01) : rendue
   hidden, montrée par site.js, qui retire controls ; aucune règle ne lui donne de display tant qu'elle
   porte hidden. L'état passe par data-playing, data-muted et data-fullscreen sur .c-video, jamais par un
   style écrit en ligne. En lecture, la barre s'efface et ne prend plus les clics, sauf au survol et au focus. */
.c-video__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(11, 19, 43, .72); backdrop-filter: blur(8px); color: #FFFFFF; transition: opacity 160ms ease-out }
.c-video__bar:not([hidden]) { display: flex }
.c-video[data-playing] .c-video__bar { opacity: 0; pointer-events: none }
.c-video[data-playing]:hover .c-video__bar, .c-video[data-playing]:focus-within .c-video__bar { opacity: 1; pointer-events: auto }
.c-video__btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer }
.c-video__btn:hover { background: rgba(255, 255, 255, .16) }
.c-video__btn:focus-visible, .c-video__seek:focus-visible { outline: 2px solid #FFB100; outline-offset: 2px }
.c-video__btn[aria-pressed="true"] { color: #FFB100 }
.c-video__icon { display: grid }
.c-video__icon svg { display: block; width: 20px; height: 20px }
.c-video__icon--pause, .c-video__icon--unmute, .c-video__icon--exit { display: none }
.c-video[data-playing] .c-video__icon--play, .c-video[data-muted] .c-video__icon--mute, .c-video[data-fullscreen] .c-video__icon--enter { display: none }
.c-video[data-playing] .c-video__icon--pause, .c-video[data-muted] .c-video__icon--unmute, .c-video[data-fullscreen] .c-video__icon--exit { display: grid }
.c-video__time { flex: none; font-family: var(--f-corps); font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums }
.c-video__seek { flex: 1; min-width: 0; margin: 0; accent-color: #FFB100; cursor: pointer }
.c-video:fullscreen { display: grid; background: #000000 }
.c-video:fullscreen .c-video__media { width: 100%; height: 100%; max-height: none; object-fit: contain }
@media (prefers-reduced-motion: reduce) { .c-video__bar { transition: none } }

/* Icône — valeur `icon` rendue par la fonction icon (04 § Composants communs, 16 § Icônes) : le <svg>
   de la bibliothèque trace en currentColor, bleu nuit par défaut, la couleur choisie icône par icône
   posée en style="color: …" sur la boîte ; la taille de la boîte vient de la feuille de la variante. */
.c-icon { display: inline-grid; place-items: center; color: #0B132B }
.c-icon svg { display: block; width: 100%; height: 100% }

/* M10 Appel à l'action en bandeau — docs/specs/cms-socle/05_modules-m01-m12.md § M10. Styles calculés des sections de maquette
   relevés dans docs/design-reference/cms-socle/maquettes-cta.html ; boutons et liens gardent leur couleur au survol, que la règle
   a:hover des pages de maquette ne touche pas sous leur style en ligne. */

/* deux-colonnes — Qui sommes-nous.dc.html, Pyl.Academy.dc.html et Nos partenaires.dc.html, section#contact */
.m-cta-bandeau--deux-colonnes { position: relative; overflow: hidden; background: var(--c-bleu-nuit); padding: clamp(72px, 8vw, 112px) var(--l-marge) }
.m-cta-bandeau--deux-colonnes[data-background="degrade"] { background: var(--g-sombre) }
.m-cta-bandeau--deux-colonnes .c-watermark { bottom: -18%; right: -70px; height: min(130%, 420px); opacity: .1 }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__columns { position: relative; max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, auto); gap: clamp(28px, 4vw, 56px); align-items: center }
.m-cta-bandeau--deux-colonnes .c-header__kicker { margin: 0 0 20px; color: var(--c-jaune) }
/* Le ton google est redéclaré APRÈS la règle jaune ci-dessus, à égalité de spécificité, sinon il est AVALÉ : la règle
   de variante porte deux classes quand la règle commune du ton n'en porte qu'une, et le surtitre de ton google sort en
   jaune. Il prend le jeton SOMBRE et non celui de fond clair : mesuré le 2026-09-20 au build 116, en 15 px 600,
   `--c-bleu-google` vaut 4,22 sur `--c-bleu-profond`, le bout clair de `--g-sombre` où un dégradé à 135deg pose le
   surtitre, et `--c-bleu-google-texte` y tomberait à 2,63 ; `--c-bleu-google-sombre` donne 5,23 sur ce bout clair et
   6,40 sur `--c-bleu-nuit` (07 § Jaune et gris de TEXTE). */
.m-cta-bandeau--deux-colonnes .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-cta-bandeau--deux-colonnes .c-header__title { max-width: 26ch; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.015em; color: #FFFFFF }
.m-cta-bandeau--deux-colonnes .c-highlight { color: var(--c-jaune) }
.m-cta-bandeau--deux-colonnes .c-header__intro { margin: 22px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--c-bleu-gris) }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__action { justify-self: start }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__button, .m-cta-bandeau--deux-colonnes .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 14px; padding: 20px 34px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 18px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__button:hover { filter: brightness(.95) }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-cta-bandeau--deux-colonnes .m-cta-bandeau__button:hover .m-cta-bandeau__arrow { transform: translateX(7px) rotate(45deg) }

/* centre-reassurance — Offre Agents IA v2.dc.html et Gemini Enterprise DA2.dc.html, section#contact */
.m-cta-bandeau--centre-reassurance { position: relative; overflow: hidden; background: var(--c-bleu-nuit); padding: clamp(72px, 8vw, 116px) var(--l-marge) }
.m-cta-bandeau--centre-reassurance[data-background="degrade"] { background: var(--g-sombre) }
.m-cta-bandeau--centre-reassurance .c-watermark { bottom: -14%; right: -70px; height: min(120%, 420px); opacity: .1 }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__column { position: relative; max-width: var(--l-contenu); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start }
.m-cta-bandeau--centre-reassurance .c-header__kicker { margin: 0 0 20px; color: var(--c-jaune) }
.m-cta-bandeau--centre-reassurance .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-cta-bandeau--centre-reassurance .c-header__title { max-width: 26ch; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.015em; color: #FFFFFF }
.m-cta-bandeau--centre-reassurance .c-highlight { color: var(--c-jaune) }
.m-cta-bandeau--centre-reassurance .c-header__intro { margin: 24px 0 40px; max-width: 58ch; font-size: 19px; line-height: 1.55; color: var(--c-bleu-gris) }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__action { display: block }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__button, .m-cta-bandeau--centre-reassurance .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 14px; padding: 20px 34px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 19px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__button:hover { filter: brightness(.95) }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__arrow { display: inline-block; width: 9px; height: 9px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg) }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__reassurance { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 15px; color: var(--c-bleu-gris) }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__separator { opacity: .4 }
.m-cta-bandeau--centre-reassurance .m-cta-bandeau__email, .m-cta-bandeau--centre-reassurance .m-cta-bandeau__email:hover { color: #FFFFFF }

/* carte-sombre — Offre Agents IA - Onglets.dc.html, section#contact */
.m-cta-bandeau--carte-sombre { padding: 0 var(--l-marge) }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__card { max-width: var(--l-contenu); margin: 0 auto; background: var(--c-bleu-nuit); border-radius: var(--r-carte); padding: 44px clamp(24px, 3vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__text { display: block }
.m-cta-bandeau--carte-sombre .c-header__kicker { margin: 0 0 14px; color: var(--c-jaune) }
.m-cta-bandeau--carte-sombre .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-cta-bandeau--carte-sombre .c-header__title { max-width: 26ch; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: #FFFFFF }
.m-cta-bandeau--carte-sombre .c-highlight { color: var(--c-jaune) }
.m-cta-bandeau--carte-sombre .c-header__intro { margin: 14px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--c-bleu-gris) }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__button, .m-cta-bandeau--carte-sombre .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 14px; padding: 20px 34px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 18px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__button:hover { filter: brightness(.95) }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-cta-bandeau--carte-sombre .m-cta-bandeau__button:hover .m-cta-bandeau__arrow { transform: translateX(7px) rotate(45deg) }

/* bouton-seul — Article - Expedition Ivarus.dc.html et Cas client - Foodles.dc.html, fin de l'article */
.m-cta-bandeau--bouton-seul { margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--c-bordure); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.m-cta-bandeau--bouton-seul .m-cta-bandeau__button, .m-cta-bandeau--bouton-seul .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 16px; font-weight: 600 }
.m-cta-bandeau--bouton-seul .m-cta-bandeau__button:hover { filter: brightness(.95) }

/* carte-claire — Gemini Enterprise DA2.dc.html, section#custom, carte « Un agent sur mesure en tête ? » */
.m-cta-bandeau--carte-claire .m-cta-bandeau__card { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); border-radius: var(--r-carte); padding: clamp(20px, 2vw, 26px) }
.m-cta-bandeau--carte-claire .m-cta-bandeau__text { flex: 1 1 380px; min-width: min(100%, 320px) }
.m-cta-bandeau--carte-claire .m-cta-bandeau__title { margin: 0 0 10px; font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.2; text-wrap: pretty }
.m-cta-bandeau--carte-claire .m-cta-bandeau__paragraph { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--c-ardoise) }
.m-cta-bandeau--carte-claire .m-cta-bandeau__button, .m-cta-bandeau--carte-claire .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 12px; flex: none; padding: 14px 24px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 17px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-cta-bandeau--carte-claire .m-cta-bandeau__button:hover { filter: brightness(.95) }
.m-cta-bandeau--carte-claire .m-cta-bandeau__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-cta-bandeau--carte-claire .m-cta-bandeau__button:hover .m-cta-bandeau__arrow { transform: translateX(7px) rotate(45deg) }

/* centre-deux-boutons — Ingenierie data et agents - Pyl.Tech.html et Workplace agentique - Pyl.Tech.html, section#contact,
   relevées dans docs/design-reference/cms-socle/maquettes-offre-data.html et maquettes-offre-workplace.html : fond et position de
   centre-reassurance, puis le bouton jaune et le lien contour côte à côte. */
.m-cta-bandeau--centre-deux-boutons { position: relative; overflow: hidden; background: var(--c-bleu-nuit); padding: clamp(72px, 8vw, 116px) var(--l-marge) }
.m-cta-bandeau--centre-deux-boutons[data-background="degrade"] { background: var(--g-sombre) }
.m-cta-bandeau--centre-deux-boutons .c-watermark { bottom: -16%; right: -70px; height: min(120%, 420px); opacity: .1 }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__column { position: relative; max-width: var(--l-contenu); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start }
.m-cta-bandeau--centre-deux-boutons .c-header__kicker { margin: 0 0 20px; color: var(--c-jaune) }
.m-cta-bandeau--centre-deux-boutons .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-cta-bandeau--centre-deux-boutons .c-header__title { max-width: 24ch; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.015em; color: #FFFFFF }
.m-cta-bandeau--centre-deux-boutons .c-highlight { color: var(--c-jaune) }
.m-cta-bandeau--centre-deux-boutons .c-header__intro { margin: 24px 0 40px; max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--c-lien-pied) }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__button, .m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__button:hover { display: inline-flex; align-items: center; gap: 14px; padding: 20px 34px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 19px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__button:hover { filter: brightness(.95) }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__arrow { flex: none; display: inline-block; width: 9px; height: 9px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__button:hover .m-cta-bandeau__arrow { transform: translateX(6px) rotate(45deg) }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__secondary, .m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__secondary:hover { display: inline-flex; align-items: center; padding: 19px 30px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: var(--r-pill); color: #FFFFFF; font-size: 17px; font-weight: 600; white-space: nowrap; transition: background 140ms ease-out, border-color 140ms ease-out }
.m-cta-bandeau--centre-deux-boutons .m-cta-bandeau__secondary:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .6) }

@media (max-width: 959px) {
  .m-cta-bandeau--deux-colonnes .m-cta-bandeau__columns { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* Bande photo et phrase — docs/specs/cms-socle/06_modules-m13-m23.md § M19.
   Relevé : docs/design-reference/cms-socle/maquettes-bande-schema.html (bande photo de Pyl.Academy) ; le cadre data-para
   est translaté par la parallaxe de site.js (07 § Animations). */

/* parallaxe — Pyl.Academy.dc.html, 4e section */
.m-bande-photo--parallaxe { position: relative; overflow: hidden; height: clamp(260px, 34vw, 420px) }
.m-bande-photo--parallaxe .m-bande-photo__media { position: absolute; top: 0; left: 0; width: 100%; height: 118%; will-change: transform }
.m-bande-photo--parallaxe .m-bande-photo__media picture { display: block; height: 100% }
.m-bande-photo--parallaxe .m-bande-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35% }
.m-bande-photo--parallaxe .m-bande-photo__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 19, 43, .92) 0%, rgba(11, 19, 43, .62) 55%, rgba(11, 19, 43, .3) 100%) }
.m-bande-photo--parallaxe .m-bande-photo__content { position: relative; height: 100%; max-width: var(--l-contenu); margin: 0 auto; display: flex; align-items: center; padding: 0 var(--l-marge) }
.m-bande-photo--parallaxe .m-bande-photo__sentence { margin: 0; max-width: 30ch; font-family: var(--f-display); font-size: clamp(22px, 2.8vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #FFFFFF; text-wrap: pretty }

/* M01 Hero — docs/specs/cms-socle/05_modules-m01-m12.md § M01. Styles calculés des sections de
   maquette relevées dans docs/design-reference/cms-socle/maquettes-hero.html. */

/* accueil — Accueil Pyl.Tech.dc.html, section#accueil */
.m-hero--accueil { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(60px, 7vw, 108px) var(--l-marge) clamp(48px, 6vw, 76px) }
.m-hero--accueil .c-watermark { top: 4%; right: -100px; height: min(82%, 560px); opacity: .17 }
.m-hero--accueil .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
/* Le trait jaune de tous les surtitres de section (charte du marketing du 2026-09-24) ; sur le fond
   sombre du hero, le texte reste jaune. Le surtitre est une ligne flex, comme dans les maquettes : replié
   sur deux lignes, son texte reste à droite du trait au lieu de repartir dessous. */
.m-hero__kicker { display: flex; align-items: center; gap: 10px }
.m-hero__kicker::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: var(--c-jaune-fonce) }
.m-hero--accueil .m-hero__kicker { margin: 0 0 26px; font-size: 15px; font-weight: 600; color: var(--c-jaune); animation: pylFade 600ms ease-out both }
.m-hero--accueil .m-hero__title { margin: 0; max-width: 19ch; font-family: var(--f-display); font-size: clamp(44px, 5.8vw, 82px); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 60ms both }
.m-hero--accueil .c-highlight { color: var(--c-jaune) }
.m-hero--accueil .m-hero__subtitle { margin: 30px 0 0; max-width: 62ch; font-size: 20px; line-height: 1.5; color: var(--c-bleu-gris); text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 160ms both }
.m-hero--accueil .m-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; animation: pylUp 720ms var(--m-courbe) 240ms both }
.m-hero--accueil .m-hero__spacer { height: clamp(56px, 6vw, 92px) }

/* bandeau — Actualités.dc.html, 1re section */
.m-hero--bandeau { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 6vw, 92px) var(--l-marge) clamp(48px, 5vw, 76px) }
.m-hero--bandeau .c-watermark { top: 6%; right: -100px; height: min(80%, 480px); opacity: .15 }
.m-hero--bandeau .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--bandeau .c-breadcrumb { margin-bottom: 26px }
.m-hero--bandeau .m-hero__kicker { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--c-jaune) }
.m-hero--bandeau .m-hero__title { margin: 0; max-width: 22ch; font-family: var(--f-display); font-size: clamp(34px, 4.4vw, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 700ms var(--m-courbe) both }
.m-hero--bandeau .c-highlight { color: var(--c-jaune) }
.m-hero--bandeau .m-hero__subtitle { margin: 26px 0 0; max-width: 58ch; font-size: 19px; line-height: 1.55; color: var(--c-bleu-gris); text-wrap: pretty }

/* bandeau-legal — Mentions legales.dc.html, Cookies.dc.html, Politique de confidentialite.dc.html, 1re section */
.m-hero--bandeau-legal { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(44px, 5vw, 72px) var(--l-marge) }
.m-hero--bandeau-legal .m-hero__inner { position: relative; max-width: 880px; margin: 0 auto }
.m-hero--bandeau-legal .c-breadcrumb { margin-bottom: 24px; flex-wrap: wrap }
.m-hero--bandeau-legal .m-hero__kicker { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--c-jaune) }
.m-hero--bandeau-legal .m-hero__title { margin: 0; max-width: 26ch; font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty }
.m-hero--bandeau-legal .m-hero__subtitle { margin: 20px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--c-bleu-gris); text-wrap: pretty }

/* bandeau-a-propos — Nos partenaires.dc.html, 1re section */
.m-hero--bandeau-a-propos { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 6vw, 96px) var(--l-marge) clamp(48px, 6vw, 84px) }
.m-hero--bandeau-a-propos .c-watermark { top: 6%; right: -100px; height: min(80%, 520px); opacity: .15 }
.m-hero--bandeau-a-propos .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--bandeau-a-propos .c-breadcrumb { margin-bottom: 28px; animation: pylFade 600ms ease-out both }
.m-hero--bandeau-a-propos .m-hero__title { margin: 0; max-width: 20ch; font-family: var(--f-display); font-size: clamp(38px, 4.8vw, 66px); font-weight: 600; line-height: 1.03; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 60ms both }
.m-hero--bandeau-a-propos .c-highlight { color: var(--c-jaune) }

/* bandeau-academy — Pyl.Academy.dc.html, 1re section */
.m-hero--bandeau-academy { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 6vw, 96px) var(--l-marge) clamp(48px, 6vw, 84px) }
.m-hero--bandeau-academy .c-watermark { top: 6%; right: -100px; height: min(80%, 520px); opacity: .15 }
.m-hero--bandeau-academy .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--bandeau-academy .m-hero__kicker { margin: 0 0 26px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--c-jaune); animation: pylFade 600ms ease-out both }
.m-hero--bandeau-academy .m-hero__title { margin: 0; max-width: 24ch; font-family: var(--f-display); font-size: clamp(38px, 4.8vw, 62px); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 60ms both }
.m-hero--bandeau-academy .c-highlight { color: var(--c-jaune) }
.m-hero--bandeau-academy .m-hero__subtitle { margin: 28px 0 0; max-width: 70ch; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--c-bleu-gris); text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 140ms both }

/* offre-risques — Offre Agents IA v2.dc.html, 1re section */
.m-hero--offre-risques { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 7vw, 104px) var(--l-marge) 0 }
.m-hero--offre-risques .c-watermark { top: 6%; right: -90px; height: min(78%, 520px); opacity: .17 }
.m-hero--offre-risques .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--offre-risques .c-breadcrumb { margin-bottom: 30px; animation: pylFade 600ms ease-out both }
.m-hero--offre-risques .m-hero__pill { display: inline-flex; align-items: center; margin-bottom: 30px; padding: 13px 26px; border-radius: var(--r-pill); background: #FFFFFF; animation: pylUp 720ms var(--m-courbe) 40ms both }
.m-hero--offre-risques .m-hero__pill-label { font-family: var(--f-display); font-size: clamp(17px, 1.9vw, 22px); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--c-bleu-nuit) }
.m-hero--offre-risques .m-hero__title { margin: 0; max-width: 19ch; font-family: var(--f-display); font-size: clamp(46px, 5.6vw, 78px); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 60ms both }
.m-hero--offre-risques .c-highlight { color: var(--c-jaune) }
.m-hero--offre-risques .m-hero__subtitle { margin: 30px 0 0; max-width: 56ch; font-size: 20px; line-height: 1.5; color: var(--c-bleu-gris); text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 160ms both }
.m-hero--offre-risques .m-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; animation: pylUp 720ms var(--m-courbe) 240ms both }
.m-hero--offre-risques .m-hero__items-intro { margin: clamp(56px, 6vw, 88px) 0 20px; max-width: 60ch; font-size: 17px; line-height: 1.5; color: var(--c-bleu-gris); animation: pylFade 700ms ease-out 320ms both }
.m-hero--offre-risques .m-hero__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(130, 167, 226, .28); animation: pylUp 720ms var(--m-courbe) 400ms both }
.m-hero--offre-risques .m-hero__item { padding: 26px 32px 30px }
.m-hero--offre-risques .m-hero__item:first-child { padding-left: 0 }
.m-hero--offre-risques .m-hero__item:last-child { padding-right: 0 }
.m-hero--offre-risques .m-hero__item + .m-hero__item { border-left: 1px solid rgba(130, 167, 226, .28) }
.m-hero--offre-risques .m-hero__item-label { margin: 0 0 10px; font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--c-jaune) }
.m-hero--offre-risques .m-hero__item-text { margin: 0; font-size: 17px; line-height: 1.45; color: #FFFFFF }
.m-hero--offre-risques .m-hero__spacer { height: clamp(40px, 5vw, 64px) }

/* offre-logo — Gemini Enterprise DA2.dc.html, 1re section */
.m-hero--offre-logo { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 6vw, 96px) var(--l-marge) clamp(48px, 6vw, 80px) }
.m-hero--offre-logo .c-watermark { top: 6%; right: -100px; height: min(80%, 520px); opacity: .17 }
.m-hero--offre-logo .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--offre-logo .c-breadcrumb { margin-bottom: 28px; animation: pylFade 600ms ease-out both }
.m-hero--offre-logo .m-hero__pill { display: inline-flex; align-items: center; margin-bottom: 30px; padding: 14px 26px; border-radius: var(--r-pill); background: #FFFFFF; animation: pylUp 720ms var(--m-courbe) 40ms both }
.m-hero--offre-logo .m-hero__pill picture { display: block }
.m-hero--offre-logo .m-hero__pill img { display: block; width: auto; height: clamp(24px, 2.6vw, 32px) }
.m-hero--offre-logo .m-hero__title { margin: 0; max-width: 20ch; font-family: var(--f-display); font-size: clamp(42px, 5.4vw, 74px); font-weight: 600; line-height: 1.02; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 80ms both }
.m-hero--offre-logo .c-highlight { color: var(--c-jaune) }
.m-hero--offre-logo .m-hero__subtitle { margin: 30px 0 0; max-width: 58ch; font-size: 20px; line-height: 1.5; color: var(--c-bleu-gris); text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 180ms both }
.m-hero--offre-logo .m-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; animation: pylUp 720ms var(--m-courbe) 260ms both }

/* editorial — Article - Expedition Ivarus.dc.html, Cas client - Foodles.dc.html, 1re section */
.m-hero--editorial { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(48px, 5vw, 80px) var(--l-marge) clamp(44px, 5vw, 72px) }
.m-hero--editorial > picture { position: absolute; top: 0; right: 0; width: 52%; height: 100%; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 26%, rgba(0, 0, 0, .62) 56%, rgba(0, 0, 0, .95) 82%, #000000 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 26%, rgba(0, 0, 0, .62) 56%, rgba(0, 0, 0, .95) 82%, #000000 100%) }
.m-hero--editorial > picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center }
.m-hero--editorial .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto; padding-right: clamp(0px, 30vw, 470px) }
.m-hero--editorial .c-breadcrumb { margin-bottom: 26px; flex-wrap: wrap }
.m-hero--editorial .m-hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px }
.m-hero--editorial .m-hero__type { padding: 6px 14px; border: 1px solid rgba(255, 201, 77, .42); border-radius: var(--r-pill); background: rgba(255, 201, 77, .16); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--c-jaune) }
.m-hero--editorial .m-hero__meta-line { font-size: 14px; color: var(--c-bleu-gris) }
.m-hero--editorial .m-hero__title { margin: 0; max-width: 26ch; font-family: var(--f-display); font-size: clamp(30px, 3.8vw, 50px); font-weight: 600; line-height: 1.06; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 700ms var(--m-courbe) both }
.m-hero--editorial .c-highlight { color: var(--c-jaune) }
.m-hero--editorial .m-hero__tags { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.m-hero--editorial .m-hero__tag { padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); font-size: 14px; color: var(--c-lien-pied) }

/* plein-ecran — Qui sommes-nous.dc.html, 1re section */
.m-hero--plein-ecran { position: relative; overflow: hidden; display: grid; place-items: center; min-height: min(84vh, 720px); padding: clamp(72px, 9vw, 128px) var(--l-marge) }
.m-hero--plein-ecran > picture { position: absolute; inset: 0 }
.m-hero--plein-ecran > picture img { display: block; width: 100%; height: 100%; object-fit: cover }
.m-hero--plein-ecran .m-hero__scrim { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11, 19, 43, .5), rgba(18, 36, 81, .34)) }
.m-hero--plein-ecran .m-hero__panel { position: relative; width: 100%; max-width: 880px; padding: clamp(28px, 4vw, 56px); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-carte); background: rgba(11, 19, 43, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 24px 60px rgba(11, 19, 43, .34); animation: pylUp 760ms var(--m-courbe) both }
.m-hero--plein-ecran .m-hero__kicker { margin: 0 0 22px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--c-jaune) }
.m-hero--plein-ecran .m-hero__title { margin: 0; font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; line-height: 1.06; letter-spacing: -.01em; color: #FFFFFF; text-wrap: pretty }
.m-hero--plein-ecran .m-hero__text { margin: 28px 0 0; max-width: 64ch; font-size: 18px; line-height: 1.6; color: #E2E8F0; text-wrap: pretty }

/* clair-damier — Offre Agents IA - Onglets.dc.html, 1re section */
.m-hero--clair-damier { position: relative; padding: 60px var(--l-marge) 72px }
.m-hero--clair-damier .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--clair-damier .c-breadcrumb { margin-bottom: 28px }
.m-hero--clair-damier .m-hero__title { margin: 0; max-width: 24ch; font-family: var(--f-display); font-size: 56px; font-weight: 600; line-height: 1.08; letter-spacing: -.01em; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-hero--clair-damier .m-hero__subtitle { margin: 26px 0 0; max-width: 62ch; font-size: 19px; line-height: 1.55; color: var(--c-ardoise); text-wrap: pretty }
.m-hero--clair-damier .m-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap }

/* carte-contact — Contact.dc.html, carte sombre au-dessus du formulaire */
.m-hero--carte-contact { position: relative; overflow: hidden; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px); border-radius: var(--r-carte) var(--r-carte) 0 0; background: var(--g-sombre) }
.m-hero--carte-contact .c-watermark { top: -10%; right: -60px; height: min(150%, 300px); opacity: .14 }
.m-hero--carte-contact .m-hero__inner { position: relative }
.m-hero--carte-contact .m-hero__kicker { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--c-jaune) }
.m-hero--carte-contact .m-hero__title { margin: 0; max-width: 24ch; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 700ms var(--m-courbe) both }
.m-hero--carte-contact .c-highlight { color: var(--c-jaune) }
.m-hero--carte-contact .m-hero__subtitle { margin: 18px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--c-bleu-gris); text-wrap: pretty }

/* offre-partenaire — Ingenierie data et agents - Pyl.Tech.html et Workplace agentique - Pyl.Tech.html, section#top, relevées
   dans docs/design-reference/cms-socle/maquettes-offre-data.html et maquettes-offre-workplace.html. Le bouton primary de la
   maquette est un <a> à flèche qui hérite la hauteur de ligne du corps : le composant garde son balisage, la flèche est son
   ::after (hors de `* { box-sizing }`, d'où la déclaration) et la hauteur de ligne celle du corps. */
.m-hero--offre-partenaire { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(56px, 6vw, 96px) var(--l-marge) clamp(44px, 5vw, 64px) }
.m-hero--offre-partenaire .c-watermark { top: 6%; right: -100px; height: min(80%, 520px); opacity: .17 }
.m-hero--offre-partenaire .m-hero__inner { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-hero--offre-partenaire .c-breadcrumb { margin-bottom: 28px; animation: pylFade 600ms ease-out both }
.m-hero--offre-partenaire .m-hero__kicker { margin: 0 0 22px; font-size: 15px; font-weight: 600; color: var(--c-jaune); animation: pylUp 720ms var(--m-courbe) 40ms both }
.m-hero--offre-partenaire .m-hero__title { margin: 0; max-width: 22ch; font-family: var(--f-display); font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; color: #FFFFFF; text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 80ms both }
.m-hero--offre-partenaire .c-highlight { color: var(--c-jaune) }
.m-hero--offre-partenaire .m-hero__subtitle { margin: 30px 0 0; max-width: 62ch; font-size: 20px; line-height: 1.5; color: var(--c-lien-pied); text-wrap: pretty; animation: pylUp 720ms var(--m-courbe) 180ms both }
.m-hero--offre-partenaire .m-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; animation: pylUp 720ms var(--m-courbe) 260ms both }
.m-hero--offre-partenaire .c-btn--primary { flex: none; gap: 12px; padding: 14px 26px; font-size: 17px; line-height: 1.5; transition: filter 140ms ease-out }
.m-hero--offre-partenaire .c-btn--primary::after { content: ""; box-sizing: border-box; flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-hero--offre-partenaire .c-btn--primary:hover::after { transform: translateX(6px) rotate(45deg) }
.m-hero--offre-partenaire .c-btn--ghost-dark { padding: 13px 24px; font-size: 16px }
.m-hero--offre-partenaire .m-hero__partner { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; margin-top: clamp(44px, 5vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); animation: pylFade 800ms ease-out 400ms both }
.m-hero--offre-partenaire .m-hero__partner-badge { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 14px; background: #FFFFFF }
.m-hero--offre-partenaire .m-hero__partner-badge picture { display: block }
.m-hero--offre-partenaire .m-hero__partner-badge img { display: block; width: auto; height: 34px }
.m-hero--offre-partenaire .m-hero__partner-label { margin: 0; font-size: 15px; font-weight: 600; color: #FFFFFF }
.m-hero--offre-partenaire .m-hero__partner-separator { opacity: .4; color: var(--c-bleu-gris) }
.m-hero--offre-partenaire .m-hero__competences-label { margin: 0; font-size: 15px; color: var(--c-lien-pied) }
.m-hero--offre-partenaire .m-hero__competences { display: flex; gap: 8px; flex-wrap: wrap }
.m-hero--offre-partenaire .m-hero__competence { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 600; color: #FFFFFF }

@media (max-width: 959px) {
  .m-hero--accueil .m-hero__title { font-size: 44px }
  .m-hero--bandeau .m-hero__title { font-size: 34px }
  .m-hero--bandeau-legal .m-hero__title { font-size: 30px }
  .m-hero--bandeau-a-propos .m-hero__title, .m-hero--bandeau-academy .m-hero__title { font-size: 38px }
  .m-hero--offre-risques .m-hero__title { font-size: 46px }
  .m-hero--offre-risques .m-hero__items { grid-template-columns: minmax(0, 1fr) }
  .m-hero--offre-logo .m-hero__title { font-size: 42px }
  .m-hero--editorial .m-hero__title { font-size: 30px }
  .m-hero--plein-ecran .m-hero__title { font-size: 28px }
  .m-hero--carte-contact .m-hero__title { font-size: 34px }
  .m-hero--offre-partenaire .m-hero__title { font-size: 40px }
}

@media (max-width: 899px) {
  .m-hero--editorial > picture { display: none }
  .m-hero--editorial .m-hero__inner { padding-right: 0 }
}

/* Intro texte — docs/specs/cms-socle/06_modules-m13-m23.md § M23.
   Relevé : docs/design-reference/cms-socle/maquettes-intro-texte.html (2e section de Nos partenaires). */

/* texte — Nos partenaires.dc.html, section sous le hero */
.m-intro-texte--texte { background: var(--c-blanc-casse); padding: clamp(48px, 5vw, 72px) var(--l-marge) }
.m-intro-texte--texte .m-intro-texte__content { max-width: var(--l-contenu); margin: 0 auto }
.m-intro-texte--texte .m-intro-texte__lead { max-width: 80ch; margin: 0; font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-intro-texte--texte .m-intro-texte__lead:has(+ .m-intro-texte__body) { margin-bottom: 22px }
.m-intro-texte--texte .m-intro-texte__body { max-width: 88ch; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: var(--c-ardoise); text-wrap: pretty }
.m-intro-texte--texte .m-intro-texte__body p { margin: 0 }
.m-intro-texte--texte .m-intro-texte__body p + p { margin-top: 22px }

/* Sommaire — docs/specs/cms-socle/16_pages-offre.md § M25.
   Relevés : docs/design-reference/cms-socle/maquettes-offre-data.html et maquettes-offre-workplace.html — 2e section
   sans id (index) et nav[data-subnav] (barre). Les couleurs de survol des cartes reprennent hoverIdx et hoverIdxAlt de
   la maquette (texte bleu nuit), que la règle a:hover de la feuille de base passerait sinon au jaune de texte. */

/* Index */
.m-sommaire--index { padding: clamp(40px, 4vw, 56px) var(--l-marge) 0 }
.m-sommaire__index { display: flex; flex-direction: column; gap: 22px; max-width: var(--l-contenu); margin: 0 auto }
.m-sommaire__label { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--c-gris-texte) }
.m-sommaire__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.m-sommaire__card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #FFFFFF; border: 1px solid #E3E8F0; border-radius: 14px; color: #0B132B; font-size: 15px; font-weight: 600; line-height: 1.3; transition: border-color 140ms ease-out, transform 140ms ease-out }
.m-sommaire__card:hover { border-color: #FFB100; color: #0B132B; transform: translateY(-2px) }
.m-sommaire__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: #FFEFCC; font-family: var(--f-display); font-size: 12px; font-weight: 600 }
.m-sommaire__card--end { justify-content: space-between; padding: 14px 18px; background: #FFB100; border: none; transition: filter 140ms ease-out }
.m-sommaire__card--end:hover { filter: brightness(.95); color: #0B132B; transform: none }
.m-sommaire__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid #0B132B; border-right: 2px solid #0B132B; transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-sommaire__card--end:hover .m-sommaire__arrow { transform: translateX(6px) rotate(45deg) }
@media (max-width: 1023px) {
  .m-sommaire__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 599px) {
  .m-sommaire__grid { grid-template-columns: minmax(0, 1fr) }
}

/* Barre collante : masquée au repos, montrée à [data-on] que site.js pose (16 FR-2). */
.m-sommaire__bar { position: fixed; left: 0; right: 0; top: var(--l-header-h, 77px); z-index: 25; background: rgba(247, 249, 252, .96); backdrop-filter: blur(8px); border-bottom: 1px solid #E3E8F0; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 260ms var(--m-courbe), opacity 200ms ease-out }
.m-sommaire__bar[data-on] { transform: none; opacity: 1; pointer-events: auto }
.m-sommaire__track { display: flex; align-items: center; gap: 6px; max-width: var(--l-contenu); margin: 0 auto; padding: 10px var(--l-marge); overflow-x: auto; scrollbar-width: none; white-space: nowrap }
.m-sommaire__track::-webkit-scrollbar { display: none }
.m-sommaire__link { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); border-bottom: none; background: transparent; color: #0B132B; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background 160ms ease-out, color 160ms ease-out }
.m-sommaire__link-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: #FFEFCC; color: #0B132B; font-family: var(--f-display); font-size: 11px; font-weight: 600; transition: background 160ms ease-out }
.m-sommaire__link[aria-current="true"] { background: #0B132B; color: #FFFFFF }
.m-sommaire__link[aria-current="true"] .m-sommaire__link-num { background: #FFB100 }
@media (prefers-reduced-motion: reduce) {
  .m-sommaire__bar { transition: none }
}

/* Page qui porte la barre : un lien de l'index ou de la barre arrive sous l'en-tête et la barre (16 FR-2.1). */
html:has(.m-sommaire__bar) [id] { scroll-margin-top: 150px }

/* Chapitre d'offre — docs/specs/cms-socle/16_pages-offre.md § M26.
   Relevés : docs/design-reference/cms-socle/maquettes-offre-data.html (#plateforme, #legacy, #dataviz, #agents, #cx,
   #finops-ia) et maquettes-offre-workplace.html (#gemini-app, #uc-factory, #ai-compass, #adoption, #m365-exit, #run,
   #securite), puis la maquette « Ingenierie Cloud - Pyl.Tech.html » de reference/maquettes/ (#dev-ia, #migration,
   #s3ns ; 16 § Ajouts de la page Ingénierie cloud). Les règles sont communes aux neuf variantes ; les couleurs d'un
   ton sont portées par [data-tone] de la racine (FR-3.1, anti-pattern 5), celles d'un schéma sans ton par la valeur
   claire que le spec décrit. */

/* Rendu commun. La feuille de base ne pose `box-sizing: border-box` que sur `*` : chaque chevron ou coche dessiné
   en pseudo-élément à bordure le reprend, pour mesurer la taille que le spec lui donne, bordure comprise. */
.m-chapitre-offre { padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-chapitre-offre__content { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-chapitre-offre__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 15px; font-weight: 600 }
.m-chapitre-offre__kicker::before { content: ""; flex: 0 0 auto; width: 18px; height: 3px; border-radius: 2px; background: #FFB100 }
/* Logo de chapitre — cloud #s3ns : tuile blanche de 36 px après le surtitre, image de 18 px jamais cadrée (FR-15). */
.m-chapitre-offre__brand { display: flex; margin: 0 0 22px }
.m-chapitre-offre__brand-tile { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; background: #FFFFFF }
.m-chapitre-offre__brand-tile img { display: block; width: auto; height: 18px }
.m-chapitre-offre__head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 28px }
.m-chapitre-offre__num { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; margin-top: clamp(0px, 0.4vw, 5px); border-radius: var(--r-pill); background: #FFB100; color: #0B132B; font-family: var(--f-display); font-size: 14px; font-weight: 600 }
.m-chapitre-offre__title { max-width: 40ch; margin: 0; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance }
.m-chapitre-offre__body { display: flex; flex-direction: column; gap: 16px; max-width: 74ch }
.m-chapitre-offre__lead { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; text-wrap: pretty }
.m-chapitre-offre__text { display: flex; flex-direction: column; gap: 16px }
.m-chapitre-offre__text p { margin: 0; font-size: 18px; line-height: 1.65; text-wrap: pretty }
.m-chapitre-offre__text strong { font-weight: 600 }
/* Bouton du relevé #gemini-app : 8 px de plus que l'écart du corps, calé à gauche, flèche jaune (spec corrigé au build 4). */
.m-chapitre-offre__button { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 13px 24px; border-bottom: none; border-radius: var(--r-pill); background: #0B132B; color: #FFFFFF; font-family: var(--f-display); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background 140ms ease-out }
.m-chapitre-offre__button:hover { background: #122451; color: #FFFFFF }
.m-chapitre-offre__arrow { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-top: 2px solid #FFB100; border-right: 2px solid #FFB100; transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-chapitre-offre__button:hover .m-chapitre-offre__arrow { transform: translateX(6px) rotate(45deg) }
.m-chapitre-offre__schema { margin-top: clamp(36px, 4vw, 48px); border-radius: 20px }
.m-chapitre-offre__schema-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--f-display); font-size: 17px; font-weight: 600 }
.m-chapitre-offre__callout { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 18px 22px; border-radius: 14px; background: #FFEFCC }
.m-chapitre-offre__diamond { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 6px; background: #FFB100; transform: rotate(45deg) }
.m-chapitre-offre__callout p { margin: 0; font-size: 16px; line-height: 1.55; color: #0B132B }
.m-chapitre-offre__callout strong { font-weight: 600 }
.m-chapitre-offre__section-title { margin: clamp(40px, 4.4vw, 56px) 0 16px; font-family: var(--f-display); font-size: 19px; font-weight: 600 }
.m-chapitre-offre__gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none }
.m-chapitre-offre__gain { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 22px; border-radius: 18px; font-size: 16px; line-height: 1.5; color: #0B132B; text-wrap: pretty }
.m-chapitre-offre__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px }
.m-chapitre-offre__icon .c-icon { width: 26px; height: 26px }
.m-chapitre-offre__proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 4.4vw, 56px); padding-top: 28px; border-top: 1px solid }
/* Une seule colonne rendue — technologies sans référence, ou l'inverse — prend toute la bande (#finops-ia). */
.m-chapitre-offre__proof > :only-child { grid-column: 1 / -1 }
.m-chapitre-offre__techs, .m-chapitre-offre__refs { display: flex; flex-direction: column; align-items: flex-start; gap: 12px }
.m-chapitre-offre__proof-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.m-chapitre-offre__techs > ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.m-chapitre-offre__tech { padding: 7px 14px; border: 1px solid; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; line-height: 1.3 }
.m-chapitre-offre__ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none }
.m-chapitre-offre__ref-grid--4 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) }
.m-chapitre-offre__ref { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.m-chapitre-offre__logo { display: grid; place-items: center; height: 64px; padding: 6px; overflow: hidden; border: 1px solid #E3E8F0; border-radius: 12px; background: #FFFFFF; color: #0B132B; font-size: 13px; font-weight: 600; text-align: center }
.m-chapitre-offre__logo picture { display: block; width: 100%; height: 100% }
.m-chapitre-offre__logo img { display: block; width: 100%; height: 100%; object-fit: contain }
.m-chapitre-offre__caption { font-size: 13px; line-height: 1.4; text-wrap: pretty }
.m-chapitre-offre__caption strong { font-weight: 600 }
/* Aucune liste des maquettes ne porte de puce : celle de ul > li::before de base.css est retirée (04 § Rendu d'un module). */
.m-chapitre-offre__gain::before, .m-chapitre-offre__tech::before, .m-chapitre-offre__ref::before, .m-chapitre-offre__deliverable::before, .m-chapitre-offre__planning-row::before { content: none }

/* Rendu par ton (FR-3.1) */
.m-chapitre-offre[data-tone="clair"] { background: #F7F9FC }
.m-chapitre-offre[data-tone="blanc"] { background: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 108px) var(--l-marge); background: var(--g-sombre) }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__kicker, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__kicker { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__kicker { color: #FFC94D }
/* La tuile de logo est bordée sur les fonds clair et blanc, sans maquette et voulus (FR-15.1). */
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__brand-tile, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__brand-tile { border: 1px solid #E3E8F0 }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__title, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__title { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__title { color: #FFFFFF }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__title .c-highlight, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__title .c-highlight { color: #4A5568 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__title .c-highlight { color: #FFC94D }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__lead, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__lead { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__lead { color: #FFFFFF }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__text p, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__text p { color: #4A5568 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__text p { color: #B9CBEA }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__text strong, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__text strong { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__text strong { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__text a, .m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__text a:hover { color: #FFC94D }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__schema { padding: clamp(20px, 2.4vw, 30px); background: #FFFFFF; box-shadow: var(--o-ombre) }
.m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__schema { padding: clamp(20px, 2.4vw, 28px); border: 1px solid #E3E8F0; background: #F7F9FC }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__schema { padding: clamp(20px, 2.4vw, 32px); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05) }
/* Le titre du schéma suit la ligne « titre de section » du tableau ; relevé blanc sur #agents et #adoption. */
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__schema-title, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__schema-title { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__schema-title { margin-bottom: 20px; color: #FFFFFF }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__gain { background: #FFFFFF; box-shadow: var(--o-ombre) }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__icon { background: #F7F9FC }
.m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__gain { border: 1px solid #E3E8F0; background: #F7F9FC }
.m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__icon { background: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__gain { background: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__icon { background: #F7F9FC }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__section-title, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__section-title { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__section-title { color: #FFFFFF }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__proof, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__proof { border-top-color: #E3E8F0 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__proof { border-top-color: rgba(255, 255, 255, .16) }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__proof-label, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__proof-label { color: var(--c-gris-texte) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__proof-label { color: #82A7E2 }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__tech { border-color: #E3E8F0; background: #FFFFFF; color: #0B132B }
.m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__tech { border-color: #E3E8F0; background: #F7F9FC; color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__tech { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #FFFFFF }
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__caption, .m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__caption { color: #4A5568 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__caption { color: #B9CBEA }

/* Rails des schémas : colonnes-reliees, etapes-reliees, etapes-nuage */
.m-chapitre-offre__rail { display: flex; align-items: center; padding: 0 8px }
.m-chapitre-offre__track { position: relative; display: block; width: 100%; height: 2px; border-radius: var(--r-pill); background: #C9D3E3 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__track { background: rgba(255, 255, 255, .2) }
.m-chapitre-offre__dot { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: var(--r-pill); background: #FFB100 }

/* colonnes-reliees — #plateforme, #finops-ia, #gemini-app */
.m-chapitre-offre__flow { display: grid; align-items: center }
.m-chapitre-offre__column { display: flex; flex-direction: column; gap: 8px }
/* 10 px entre cartes seules (#plateforme) ; un libellé suivi d'une carte reste à 8 px (#gemini-app). */
.m-chapitre-offre__column:not(:has(> :not(.m-chapitre-offre__node--carte))) { gap: 10px }
/* Quatre colonnes — cloud #dev-ia : l'étirement vient de data-columns="4", que le gabarit pose à quatre colonnes
   exactement, et d'aucun champ ; à deux, à trois et hors contrat, les colonnes restent centrées (FR-13.1, FR-13.3). */
.m-chapitre-offre__flow[data-columns="4"] { align-items: stretch }
.m-chapitre-offre__flow[data-columns="4"] .m-chapitre-offre__node { flex: 1 1 auto }
.m-chapitre-offre__column-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-chapitre-offre__node--carte { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; border-radius: 16px }
.m-chapitre-offre__node--carte .m-chapitre-offre__node-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.m-chapitre-offre__node--carte .m-chapitre-offre__node-title { margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.25; color: #0B132B; text-wrap: pretty }
.m-chapitre-offre__node--carte .m-chapitre-offre__node-text { font-size: 14px; line-height: 1.4; color: #4A5568 }
.m-chapitre-offre__node--carte[data-tone="neutre"] { background: #F7F9FC }
.m-chapitre-offre__node--carte[data-tone="neutre"] .m-chapitre-offre__node-label { color: var(--c-gris-texte) }
.m-chapitre-offre__node--carte[data-tone="bleu"] { background: #DDE8FC }
.m-chapitre-offre__node--carte[data-tone="bleu"] .m-chapitre-offre__node-label { color: #1A56C4 }
.m-chapitre-offre__node--carte[data-tone="vert"] { background: #DFF3E8 }
.m-chapitre-offre__node--carte[data-tone="vert"] .m-chapitre-offre__node-label { color: #1F7A4F }
.m-chapitre-offre__node--carte[data-tone="jaune"] { padding: 20px 20px 22px; border: 2px solid #FFB100; background: #FFEFCC }
.m-chapitre-offre__node--carte[data-tone="jaune"] .m-chapitre-offre__node-label { color: #8A5E00 }
.m-chapitre-offre__node-chips { display: flex; flex-wrap: wrap; gap: 8px }
.m-chapitre-offre__node-chip { padding: 5px 10px; border-radius: var(--r-pill); background: #FFFFFF; color: #0B132B; font-size: 13px; font-weight: 600 }
.m-chapitre-offre__node--ligne { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px; border-radius: 12px; background: #F7F9FC }
.m-chapitre-offre__node-bar { grid-row: 1 / 3; align-self: stretch; width: 6px; border-radius: var(--r-pill) }
.m-chapitre-offre__node--ligne[data-tone="neutre"] .m-chapitre-offre__node-bar { background: #C9D3E3 }
.m-chapitre-offre__node--ligne[data-tone="bleu"] .m-chapitre-offre__node-bar { background: #4285F4 }
.m-chapitre-offre__node--ligne[data-tone="jaune"] .m-chapitre-offre__node-bar { background: #FFB100 }
.m-chapitre-offre__node--ligne[data-tone="vert"] .m-chapitre-offre__node-bar { background: #2DAA6E }
.m-chapitre-offre__node--ligne .m-chapitre-offre__node-title { align-self: center; font-family: var(--f-display); font-size: 17px; font-weight: 600; color: #0B132B }
.m-chapitre-offre__node--ligne .m-chapitre-offre__node-text { font-size: 14px; color: #4A5568 }
.m-chapitre-offre__node--puce { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #FFEFCC; color: #0B132B; font-family: var(--f-display); font-size: 17px; font-weight: 600 }
.m-chapitre-offre__node--puce::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; background: #FFB100; transform: rotate(45deg) }
.m-chapitre-offre__node--bloc { padding: 14px 16px; border: 1px solid #E3E8F0; border-radius: 12px; background: #F7F9FC; color: #0B132B; font-family: var(--f-display); font-size: 16px; font-weight: 600 }
.m-chapitre-offre__node--bande { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: #0B132B; font-size: 14px; font-weight: 600; text-align: center }
.m-chapitre-offre__node--bande[data-tone="neutre"], .m-chapitre-offre__node--bande[data-tone="jaune"] { background: #FFEFCC }
.m-chapitre-offre__node--bande[data-tone="bleu"] { background: #DDE8FC }
.m-chapitre-offre__node--bande[data-tone="vert"] { background: #DFF3E8 }
.m-chapitre-offre__node--bande .m-chapitre-offre__node-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #4A5568 }
.m-chapitre-offre__node--logo { display: grid; place-items: center; padding: 24px 18px; border: 2px solid #0B132B; border-radius: 16px; background: #FFFFFF }
.m-chapitre-offre__node--logo picture { display: block; max-width: 100% }
.m-chapitre-offre__node--logo img { display: block; width: auto; max-width: 100%; height: 34px }
.m-chapitre-offre__band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 12px 16px; border: 1.5px dashed #C9D3E3; border-radius: 12px; color: #0B132B; font-size: 15px; font-weight: 600 }
.m-chapitre-offre__band-label { margin-right: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-chapitre-offre__band-sep { color: #C9D3E3 }
/* La pastille garde bleu nuit sur son fond propre, quel que soit le texte de la bande (ton sombre). */
.m-chapitre-offre__band--pastilles .m-chapitre-offre__band-item { padding: 5px 12px; border: 1px solid #E3E8F0; border-radius: var(--r-pill); background: #F7F9FC; color: #0B132B; font-size: 14px }

/* Étapes : etapes-boucle (#agents), etapes-reliees (#uc-factory), etapes-nuage (#adoption) */
.m-chapitre-offre__steps { display: grid }
.m-chapitre-offre--etapes-boucle .m-chapitre-offre__steps { gap: 12px }
.m-chapitre-offre__step { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; border: 1px solid; border-radius: 16px }
.m-chapitre-offre--etapes-reliees .m-chapitre-offre__step { gap: 8px; border-radius: 14px }
.m-chapitre-offre__step-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600 }
.m-chapitre-offre__step-phase { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.m-chapitre-offre__step-title { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; text-wrap: pretty }
.m-chapitre-offre--etapes-reliees .m-chapitre-offre__step-title { font-size: 18px; line-height: 1.25 }
.m-chapitre-offre__step-text { max-width: 22ch; font-size: 14px; line-height: 1.4; color: #4A5568 }
/* Traitements neutre, accent et succès de etapes-boucle : sur fond clair et blanc, puis en sombre ; etapes-reliees
   et etapes-nuage prennent neutre, et accent pour une étape mise en avant. */
.m-chapitre-offre__step[data-tone="neutre"], .m-chapitre-offre--etapes-reliees .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted), .m-chapitre-offre--etapes-nuage .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted) { border-color: #E3E8F0; background: #FFFFFF }
.m-chapitre-offre__step[data-tone="neutre"] .m-chapitre-offre__step-num, .m-chapitre-offre--etapes-reliees .m-chapitre-offre__step-num { background: #0B132B; color: #FFFFFF }
.m-chapitre-offre__step[data-tone="neutre"] .m-chapitre-offre__step-phase, .m-chapitre-offre--etapes-nuage .m-chapitre-offre__step-phase { color: var(--c-gris-texte) }
.m-chapitre-offre__step[data-tone="accent"], .m-chapitre-offre__step--highlighted { border-color: #FFB100; background: #FFEFCC }
.m-chapitre-offre__step[data-tone="accent"] .m-chapitre-offre__step-num, .m-chapitre-offre__step--highlighted .m-chapitre-offre__step-num { background: #FFB100; color: #0B132B }
.m-chapitre-offre__step[data-tone="accent"] .m-chapitre-offre__step-phase, .m-chapitre-offre__step--highlighted .m-chapitre-offre__step-phase { color: var(--c-jaune-texte) }
.m-chapitre-offre__step[data-tone="succes"] { border-color: rgba(45, 170, 110, .6); background: #DFF3E8 }
.m-chapitre-offre__step[data-tone="succes"] .m-chapitre-offre__step-num { background: #2DAA6E; color: #FFFFFF }
.m-chapitre-offre__step[data-tone="succes"] .m-chapitre-offre__step-phase { color: #1F7A4F }
.m-chapitre-offre__step-title { color: #0B132B }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="neutre"], .m-chapitre-offre[data-tone="sombre"].m-chapitre-offre--etapes-reliees .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted), .m-chapitre-offre[data-tone="sombre"].m-chapitre-offre--etapes-nuage .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted) { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="neutre"] .m-chapitre-offre__step-num, .m-chapitre-offre[data-tone="sombre"].m-chapitre-offre--etapes-reliees .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted) .m-chapitre-offre__step-num { background: rgba(255, 255, 255, .14); color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="neutre"] .m-chapitre-offre__step-phase, .m-chapitre-offre[data-tone="sombre"].m-chapitre-offre--etapes-nuage .m-chapitre-offre__step:not(.m-chapitre-offre__step--highlighted) .m-chapitre-offre__step-phase { color: #82A7E2 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="accent"], .m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step--highlighted { border-color: #FFB100; background: rgba(255, 177, 0, .14) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="accent"] .m-chapitre-offre__step-phase, .m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step--highlighted .m-chapitre-offre__step-phase { color: #FFC94D }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="succes"] { border-color: rgba(45, 170, 110, .6); background: rgba(45, 170, 110, .16) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step[data-tone="succes"] .m-chapitre-offre__step-phase { color: #7FD6A8 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step-title { color: #FFFFFF }
.m-chapitre-offre__loop { display: grid; gap: 12px; margin-top: 12px }
.m-chapitre-offre__loop-bracket { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--c-jaune-texte) }
.m-chapitre-offre__loop-line { width: 100%; height: 16px; border: 1.5px dashed currentColor; border-top: none; border-radius: 0 0 12px 12px }
.m-chapitre-offre__loop-text { font-size: 14px; font-weight: 600 }
.m-chapitre-offre__success { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 16px; color: #1F7A4F; font-size: 14px; font-weight: 600 }
.m-chapitre-offre__success::before { content: ""; display: block; box-sizing: border-box; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__loop-bracket { color: #FFC94D }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__success { color: #7FD6A8 }
.m-chapitre-offre--etapes-reliees .m-chapitre-offre__rail { padding: 0 2px 0 6px }
.m-chapitre-offre__chevron { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; margin-left: -9px; border-top: 2px solid #8F9BB3; border-right: 2px solid #8F9BB3; transform: rotate(45deg) }
.m-chapitre-offre__cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px }
.m-chapitre-offre__cloud-dot { width: 12px; height: 12px; border-radius: var(--r-pill); background: #FFB100 }
.m-chapitre-offre__cloud--dense .m-chapitre-offre__cloud-dot { width: 8px; height: 8px; background: #FFC94D }
.m-chapitre-offre__cloud-footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1.5px dashed #FFB100; border-radius: 12px; color: var(--c-jaune-texte); font-size: 15px; font-weight: 600 }
.m-chapitre-offre__cloud-footer::before { content: ""; flex: 0 0 auto; display: inline-block; box-sizing: border-box; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(225deg) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__cloud-footer { border-color: rgba(255, 201, 77, .6); color: #FFC94D }

/* piste — #run */
.m-chapitre-offre--piste .m-chapitre-offre__schema-title::after { content: ""; flex: 0 0 auto; display: inline-block; box-sizing: border-box; width: 9px; height: 9px; border-top: 2px solid #FFB100; border-right: 2px solid #FFB100; transform: rotate(45deg) }
.m-chapitre-offre__piste { position: relative; display: grid; gap: 12px }
.m-chapitre-offre__piste-track { position: absolute; top: 21px; display: block; height: 2px; border-radius: var(--r-pill); background: #C9D3E3 }
.m-chapitre-offre__station { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center }
.m-chapitre-offre__station-dot { width: 44px; height: 44px; border: 2px solid; border-radius: var(--r-pill) }
.m-chapitre-offre__station[data-tone="bleu"] .m-chapitre-offre__station-dot { border-color: #4285F4; background: #DDE8FC }
.m-chapitre-offre__station[data-tone="jaune"] .m-chapitre-offre__station-dot { border-color: #FFB100; background: #FFEFCC }
.m-chapitre-offre__station[data-tone="vert"] .m-chapitre-offre__station-dot { border-color: #2DAA6E; background: #DFF3E8 }
/* L'anneau prend la couleur du cadre du schéma, celle du ton. */
.m-chapitre-offre[data-tone="clair"] .m-chapitre-offre__station-dot { box-shadow: 0 0 0 6px #FFFFFF }
.m-chapitre-offre[data-tone="blanc"] .m-chapitre-offre__station-dot { box-shadow: 0 0 0 6px #F7F9FC }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__station-dot { box-shadow: 0 0 0 6px rgba(255, 255, 255, .05) }
.m-chapitre-offre__station-title { margin: 6px 0 0; color: #0B132B; font-family: var(--f-display); font-size: 17px; font-weight: 600 }
.m-chapitre-offre__station-text { max-width: 22ch; font-size: 14px; line-height: 1.4; color: #4A5568 }

/* correspondance — #m365-exit */
.m-chapitre-offre__map-head, .m-chapitre-offre__map-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 16px }
.m-chapitre-offre__map-head { padding: 0 16px 10px }
.m-chapitre-offre__map-head .m-chapitre-offre__map-before, .m-chapitre-offre__map-head .m-chapitre-offre__map-after { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-chapitre-offre__map-row { padding: 14px 16px; border-top: 1px solid #E3E8F0; background: #FFFFFF }
.m-chapitre-offre__map-row .m-chapitre-offre__map-name { color: #0B132B; font-family: var(--f-display); font-size: 16px; font-weight: 600 }
.m-chapitre-offre__map-row .m-chapitre-offre__map-before { font-size: 15px; color: #4A5568 }
.m-chapitre-offre__map-row .m-chapitre-offre__map-arrow { display: inline-block; width: 8px; height: 8px; border-top: 2px solid #8F9BB3; border-right: 2px solid #8F9BB3; transform: rotate(45deg) }
.m-chapitre-offre__map-row .m-chapitre-offre__map-after { color: #0B132B; font-size: 15px; font-weight: 600 }
.m-chapitre-offre__map-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: #FFB100; color: #0B132B; font-family: var(--f-display); font-size: 16px; font-weight: 600 }
.m-chapitre-offre__map-badge { padding: 4px 10px; border-radius: var(--r-pill); background: #0B132B; color: #FFFFFF; font-family: inherit; font-size: 12px; letter-spacing: .06em; text-transform: uppercase }

/* planning — cloud #migration : cadre borné à 760 px et centré, une rangée par ligne, jamais empilée ; la piste
   tient la seconde colonne par grid-column: 2, que la rangée porte ou non son libellé (FR-14, FR-14.3). La barre
   reçoit sa colonne du gabarit et s'allonge par data-reveal-x="grow" de la feuille de base (FR-14.1). */
.m-chapitre-offre--planning .m-chapitre-offre__schema { max-width: 760px; margin-left: auto; margin-right: auto }
.m-chapitre-offre__planning { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none }
.m-chapitre-offre__planning-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px }
.m-chapitre-offre__planning-label { color: #0B132B; font-size: 14px; font-weight: 600; line-height: 1.5 }
.m-chapitre-offre__planning-track { grid-column: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 30px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 calc(100%/12 - 1px), #E3E8F0 calc(100%/12 - 1px) calc(100%/12)) }
.m-chapitre-offre__planning-bar { border-radius: 8px }
.m-chapitre-offre__planning-bar[data-tone="bleu-clair"] { background: #8AB4F8 }
.m-chapitre-offre__planning-bar[data-tone="bleu"] { background: #4285F4 }
.m-chapitre-offre__planning-bar[data-tone="jaune"] { background: #FFB100 }
.m-chapitre-offre__footnote { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: #4A5568 }
.m-chapitre-offre__footnote strong { color: #0B132B; font-weight: 600 }

/* livrables — #ai-compass ; le numéro garde le rétrécissement de la maquette (aucun flex: none). */
.m-chapitre-offre__deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); max-width: 1040px; margin: 0; padding: 0; list-style: none }
.m-chapitre-offre__deliverable { display: flex; align-items: flex-start; gap: 14px }
.m-chapitre-offre__deliverable-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: #0B132B; color: #FFFFFF; font-size: 12px; font-weight: 600 }
.m-chapitre-offre__deliverable--highlighted .m-chapitre-offre__deliverable-num { background: #FFB100; color: #0B132B }
.m-chapitre-offre__deliverable-title { margin: 0; color: #0B132B; font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.25; text-wrap: pretty }
.m-chapitre-offre__deliverable-text { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: #4A5568; text-wrap: pretty }

/* Textes de schéma posés sur le cadre, au seul ton sombre (16 § M26 Rendu des schémas, dernier point ; bead
   Pyl-Tech-hi6, à confirmer par Jérémy) : la correspondance du corps du chapitre — bleu nuit en blanc, #4A5568
   en #B9CBEA, --c-gris-texte en #82A7E2. Aucune maquette ne montre ces schémas en sombre ; les blocs et rangées
   à fond propre gardent leurs couleurs. */
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__column-label { color: #82A7E2 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__band { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__band-label { color: #82A7E2 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__step-text { color: #B9CBEA }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__station-title { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__station-text { color: #B9CBEA }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__map-head .m-chapitre-offre__map-before, .m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__map-head .m-chapitre-offre__map-after { color: #82A7E2 }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__deliverable-title { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__deliverable-text { color: #B9CBEA }
/* planning au ton sombre, sans maquette et voulu (FR-15.1) : libellé blanc, quadrillage clair, phrase du bas. */
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__planning-label { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__planning-track { background: repeating-linear-gradient(90deg, transparent 0 calc(100%/12 - 1px), rgba(255, 255, 255, .14) calc(100%/12 - 1px) calc(100%/12)) }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__footnote { color: #B9CBEA }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__footnote strong { color: #FFFFFF }
.m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__footnote a, .m-chapitre-offre[data-tone="sombre"] .m-chapitre-offre__footnote a:hover { color: #FFC94D }

/* Points des rails et de la piste : délai de n × 1,5 s (colonnes) ou n × 1 s (étapes), n compté de 0 (FR-4) ;
   à quatre colonnes, n × 1 s sous data-columns="4", la règle des colonnes restant celle de deux et trois (FR-13). */
@keyframes m-chapitre-offre-dot { 0% { left: -8px; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@media (prefers-reduced-motion: no-preference) {
  .m-chapitre-offre__rail .m-chapitre-offre__dot { animation: m-chapitre-offre-dot 3s linear infinite }
  .m-chapitre-offre--colonnes-reliees .m-chapitre-offre__rail:nth-child(4) .m-chapitre-offre__dot { animation-delay: 1.5s }
  .m-chapitre-offre__flow[data-columns="4"] .m-chapitre-offre__rail:nth-child(4) .m-chapitre-offre__dot { animation-delay: 1s }
  .m-chapitre-offre__flow[data-columns="4"] .m-chapitre-offre__rail:nth-child(6) .m-chapitre-offre__dot { animation-delay: 2s }
  .m-chapitre-offre--etapes-reliees .m-chapitre-offre__rail:nth-child(4) .m-chapitre-offre__dot, .m-chapitre-offre--etapes-nuage .m-chapitre-offre__rail:nth-child(4) .m-chapitre-offre__dot { animation-delay: 1s }
  .m-chapitre-offre--etapes-reliees .m-chapitre-offre__rail:nth-child(6) .m-chapitre-offre__dot, .m-chapitre-offre--etapes-nuage .m-chapitre-offre__rail:nth-child(6) .m-chapitre-offre__dot { animation-delay: 2s }
  .m-chapitre-offre--etapes-reliees .m-chapitre-offre__rail:nth-child(8) .m-chapitre-offre__dot, .m-chapitre-offre--etapes-nuage .m-chapitre-offre__rail:nth-child(8) .m-chapitre-offre__dot { animation-delay: 3s }
  .m-chapitre-offre--etapes-reliees .m-chapitre-offre__rail:nth-child(10) .m-chapitre-offre__dot { animation-delay: 4s }
  .m-chapitre-offre__piste-track .m-chapitre-offre__dot { animation: m-chapitre-offre-dot 3.2s linear infinite }
}

/* Sous 960 px : colonnes et étapes s'empilent, rails, piste et rangée de boucle masqués (FR-4) ; les grilles
   posées en style par le gabarit cèdent à !important, comme dans les maquettes. L'écart de 10 px vaut aussi pour
   etapes-boucle, dont les 12 px sont posés plus spécifiquement (#agents empilé, [data-flow5] à gap: 10px). Le
   chevron d'une rangée de correspondance se masque au cran de la règle qui le dessine (#m365-exit empilé). */
@media (max-width: 959px) {
  .m-chapitre-offre__gains { grid-template-columns: minmax(0, 1fr) }
  .m-chapitre-offre__proof { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .m-chapitre-offre__flow, .m-chapitre-offre__steps, .m-chapitre-offre--etapes-boucle .m-chapitre-offre__steps { grid-template-columns: minmax(0, 1fr) !important; gap: 10px }
  .m-chapitre-offre__rail, .m-chapitre-offre__loop, .m-chapitre-offre__piste-track { display: none }
  .m-chapitre-offre__piste { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 20px }
  .m-chapitre-offre__map-head, .m-chapitre-offre__map-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px }
  .m-chapitre-offre__map-name { grid-column: 1 / -1 }
  .m-chapitre-offre__map-arrow, .m-chapitre-offre__map-row .m-chapitre-offre__map-arrow { display: none }
  .m-chapitre-offre__deliverables { grid-template-columns: minmax(0, 1fr); gap: 28px }
}

/* M11 Chronologie — docs/specs/cms-socle/05_modules-m01-m12.md § M11. Styles calculés des sections de maquette relevés dans
   docs/design-reference/cms-socle/maquettes-chronologie.html ; les états que site.js pose (data-on, data-filled, aria-expanded)
   ne masquent rien sans script et changent sans transition sous réduction de mouvement ; les rangs sont écrits par le
   compteur chronologie-step. */

/* verticale-photos — Qui sommes-nous.dc.html, section#trajectoire */
.m-chronologie--verticale-photos { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-chronologie--verticale-photos .m-chronologie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--verticale-photos .c-header__kicker { margin: 0 0 18px }
.m-chronologie--verticale-photos .c-header__title { max-width: 24ch; margin: 0 0 clamp(44px, 5vw, 68px); font-size: clamp(28px, 3.2vw, 42px) }
.m-chronologie--verticale-photos .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-chronologie--verticale-photos .c-header__intro { margin: 0 0 clamp(44px, 5vw, 68px); max-width: 60ch; line-height: 1.5 }
.m-chronologie--verticale-photos .m-chronologie__timeline { position: relative; padding-left: clamp(32px, 4vw, 56px) }
.m-chronologie--verticale-photos .m-chronologie__rail { position: absolute; left: 7px; top: 18px; bottom: 18px; width: 2px; background: var(--c-bordure); border-radius: var(--r-pill) }
.m-chronologie--verticale-photos .m-chronologie__fill { height: 100%; background: var(--c-jaune-fonce); border-radius: var(--r-pill); transform-origin: top; transition: transform 140ms linear }
.m-chronologie--verticale-photos .m-chronologie__step { position: relative; padding-bottom: 20px }
.m-chronologie--verticale-photos .m-chronologie__marker { position: absolute; left: calc(2px - clamp(32px, 4vw, 56px)); top: 34px; width: 12px; height: 12px; background: var(--c-bordure); transform: rotate(45deg); transition: transform 300ms ease-out }
.m-chronologie--verticale-photos .m-chronologie__marker::after { content: ""; position: absolute; inset: 0; background: var(--c-jaune-fonce); transition: opacity 300ms ease-out }
.m-chronologie--verticale-photos .m-chronologie__card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); overflow: hidden; background: #FFFFFF; border-radius: var(--r-carte); border: 1px solid var(--c-bordure); box-shadow: var(--o-ombre) }
.m-chronologie--verticale-photos .m-chronologie__card--text { grid-template-columns: minmax(0, 1fr) }
.m-chronologie--verticale-photos .m-chronologie__photo { overflow: hidden; min-height: 170px; transition: opacity 320ms ease-out }
.m-chronologie--verticale-photos .m-chronologie__photo picture, .m-chronologie--verticale-photos .m-chronologie__photo img { display: block; width: 100%; height: 100% }
.m-chronologie--verticale-photos .m-chronologie__photo img { object-fit: cover }
.m-chronologie--verticale-photos .m-chronologie__logo { display: grid; place-items: center; min-height: 170px; padding: 24px; background: var(--c-blanc-casse); transition: opacity 320ms ease-out }
.m-chronologie--verticale-photos .m-chronologie__logo picture { display: block; width: 100%; max-width: 150px }
.m-chronologie--verticale-photos .m-chronologie__logo img { display: block; width: 100%; height: auto; object-position: 50% 50% !important; transform-origin: 50% 50% !important; scale: 1 !important }
.m-chronologie--verticale-photos .m-chronologie__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2vw, 28px) }
/* Charte du marketing du 2026-09-24 : aucun texte jaune sur fond clair ; le jaune sert en fond. */
.m-chronologie--verticale-photos .m-chronologie__date { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-chronologie--verticale-photos .m-chronologie__title { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 1.9vw, 23px); font-weight: 600; line-height: 1.2 }
.m-chronologie--verticale-photos .m-chronologie__text { max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-chronologie--verticale-photos .m-chronologie__text p { margin: 0 }
.m-chronologie--verticale-photos .m-chronologie__text p + p { margin-top: 1em }

/* horizontale-3 — Offre Agents IA v2.dc.html, 2e section */
.m-chronologie--horizontale-3 { position: relative; padding: clamp(72px, 8vw, 112px) var(--l-marge) clamp(64px, 7vw, 96px) }
.m-chronologie--horizontale-3 .m-chronologie__content { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--horizontale-3 .c-header__kicker { margin: 0 0 18px }
.m-chronologie--horizontale-3 .c-header__title { max-width: 34ch; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14 }
.m-chronologie--horizontale-3 .c-highlight { padding: 0 .12em; border-radius: 4px; background: #FFF1CC; color: var(--c-bleu-nuit); box-decoration-break: clone; -webkit-box-decoration-break: clone }
.m-chronologie--horizontale-3 .c-header__intro { margin: clamp(48px, 5vw, 76px) 0 44px; font-size: 15px; font-weight: 600; color: var(--c-gris-texte); line-height: inherit }
.m-chronologie--horizontale-3 .m-chronologie__frieze { position: relative; padding-top: 46px }
.m-chronologie--horizontale-3 .m-chronologie__rail { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--c-bordure); border-radius: var(--r-pill); overflow: hidden }
.m-chronologie--horizontale-3 .m-chronologie__fill { height: 100%; background: var(--c-jaune-fonce); transform-origin: left; transition: transform 1200ms var(--m-courbe) }
.m-chronologie--horizontale-3 .m-chronologie__grid { counter-reset: chronologie-step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px) }
.m-chronologie--horizontale-3 .m-chronologie__step { counter-increment: chronologie-step; position: relative }
.m-chronologie--horizontale-3 .m-chronologie__marker { position: absolute; top: -43px; left: 0; width: 14px; height: 14px; background: var(--c-jaune-fonce); transform: rotate(45deg) }
.m-chronologie--horizontale-3 .m-chronologie__box, .m-chronologie--horizontale-3 .m-chronologie__box:hover { display: block; padding: 20px 22px 22px; margin: 0 -22px; border-radius: 16px; color: var(--c-bleu-nuit); transition: background 140ms ease-out; border-bottom: none }
.m-chronologie--horizontale-3 a.m-chronologie__box:hover { background: #FFF1CC }
.m-chronologie--horizontale-3 .m-chronologie__rank { display: block; margin: 0 0 14px; font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--c-jaune-texte) }
.m-chronologie--horizontale-3 .m-chronologie__rank::before { content: counter(chronologie-step, decimal-leading-zero) }
.m-chronologie--horizontale-3 .m-chronologie__title { margin: 0 0 12px; font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em }
.m-chronologie--horizontale-3 .m-chronologie__text { margin: 0 0 16px; font-size: 17px; line-height: 1.55; color: var(--c-ardoise) }
.m-chronologie--horizontale-3 .m-chronologie__text p { margin: 0 }
.m-chronologie--horizontale-3 .m-chronologie__text p + p { margin-top: 1em }
.m-chronologie--horizontale-3 .m-chronologie__more { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-chronologie--horizontale-3 .m-chronologie__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-chronologie--horizontale-3 a.m-chronologie__box:hover .m-chronologie__arrow { transform: translateX(7px) rotate(45deg) }

/* colonnes-structurees — Gemini Enterprise DA2.dc.html, section#pov */
.m-chronologie--colonnes-structurees { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-chronologie--colonnes-structurees .m-chronologie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--colonnes-structurees .c-header__kicker { margin: 0 0 18px }
.m-chronologie--colonnes-structurees .c-header__title { max-width: 24ch; margin: 0 0 clamp(40px, 5vw, 60px); font-size: clamp(28px, 3.2vw, 42px) }
.m-chronologie--colonnes-structurees .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-chronologie--colonnes-structurees .c-header__intro { margin: 0 0 clamp(40px, 5vw, 60px); max-width: 60ch; line-height: 1.5 }
.m-chronologie--colonnes-structurees .m-chronologie__panel { background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); border-radius: 24px; padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--o-ombre) }
.m-chronologie--colonnes-structurees .m-chronologie__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 24px) }
.m-chronologie--colonnes-structurees .m-chronologie__panel-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--c-gris-texte) }
.m-chronologie--colonnes-structurees .m-chronologie__pill { padding: 7px 16px; border-radius: var(--r-pill); background: #FFEFCC; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-chronologie--colonnes-structurees .m-chronologie__grid { counter-reset: chronologie-step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(16px, 1.8vw, 22px) }
.m-chronologie--colonnes-structurees .m-chronologie__column { counter-increment: chronologie-step; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: 18px; transition: transform 180ms ease-out, box-shadow 180ms ease-out }
.m-chronologie--colonnes-structurees .m-chronologie__column:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12) }
.m-chronologie--colonnes-structurees .m-chronologie__column-head { display: flex; align-items: center; gap: 12px; padding: 16px clamp(16px, 1.8vw, 22px) }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(1) .m-chronologie__column-head { background: var(--c-jaune-fonce) }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(2) .m-chronologie__column-head { background: #4285F4 }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(3) .m-chronologie__column-head { background: #2DAA6E }
.m-chronologie--colonnes-structurees .m-chronologie__rank { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 13px; font-weight: 600 }
.m-chronologie--colonnes-structurees .m-chronologie__rank::before { content: counter(chronologie-step, decimal-leading-zero) }
.m-chronologie--colonnes-structurees .m-chronologie__title { margin: 0; font-family: var(--f-display); font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; line-height: 1.2; color: #FFFFFF }
.m-chronologie--colonnes-structurees .m-chronologie__column-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 2vw, 24px) }
.m-chronologie--colonnes-structurees .m-chronologie__label { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--c-gris-texte) }
.m-chronologie--colonnes-structurees .m-chronologie__objective { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-chronologie--colonnes-structurees .m-chronologie__actions { margin: 0 0 18px; padding: 0 0 0 18px; list-style: disc; display: flex; flex-direction: column; gap: 8px; color: #B9C3D4 }
.m-chronologie--colonnes-structurees .m-chronologie__actions li { font-size: 15px; line-height: 1.5; color: var(--c-ardoise); text-wrap: pretty }
.m-chronologie--colonnes-structurees .m-chronologie__deliverable { margin: auto 0 0; border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(1) .m-chronologie__deliverable { background: #FFEFCC }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(2) .m-chronologie__deliverable { background: #DDE8FC }
.m-chronologie--colonnes-structurees .m-chronologie__column:nth-child(3) .m-chronologie__deliverable { background: #DFF3E8 }
.m-chronologie--colonnes-structurees .m-chronologie__outputs { margin-top: clamp(22px, 2.4vw, 30px); padding-top: clamp(22px, 2.4vw, 28px); border-top: 1px solid var(--c-bordure) }
.m-chronologie--colonnes-structurees .m-chronologie__outputs-title { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--c-gris-texte) }
.m-chronologie--colonnes-structurees .m-chronologie__outputs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px) }
.m-chronologie--colonnes-structurees .m-chronologie__output { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--c-bleu-nuit) }
.m-chronologie--colonnes-structurees .m-chronologie__check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: var(--r-pill); background: #2DAA6E }
.m-chronologie--colonnes-structurees .m-chronologie__check::before { content: ""; display: block; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg) }
.m-chronologie--colonnes-structurees .m-chronologie__footer { margin-top: clamp(22px, 2.4vw, 30px); padding-top: clamp(20px, 2.2vw, 26px); border-top: 1px solid var(--c-bordure); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.m-chronologie--colonnes-structurees .m-chronologie__button, .m-chronologie--colonnes-structurees .m-chronologie__button:hover { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 16px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out; flex: none }
.m-chronologie--colonnes-structurees .m-chronologie__button:hover { filter: brightness(.95) }
.m-chronologie--colonnes-structurees .m-chronologie__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-chronologie--colonnes-structurees .m-chronologie__button:hover .m-chronologie__arrow { transform: translateX(7px) rotate(45deg) }

/* accordeon — Pyl.Academy.dc.html, section#methode */
.m-chronologie--accordeon { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-chronologie--accordeon .m-chronologie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--accordeon .c-header__kicker { margin: 0 0 18px }
.m-chronologie--accordeon .c-header__title { max-width: 26ch; margin: 0 0 clamp(36px, 4vw, 52px); font-size: clamp(28px, 3.2vw, 42px) }
.m-chronologie--accordeon .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-chronologie--accordeon .c-header__intro { margin: 0 0 clamp(36px, 4vw, 52px); max-width: 66ch }
.m-chronologie--accordeon .m-chronologie__stack { display: flex; flex-direction: column; gap: 14px }
.m-chronologie--accordeon .m-chronologie__list { counter-reset: chronologie-step; border-radius: var(--r-carte); border: 1px solid var(--c-bordure); overflow: hidden; background: var(--c-blanc-casse) }
.m-chronologie--accordeon .m-chronologie__step { counter-increment: chronologie-step; position: relative; background: transparent; border-top: 1px solid var(--c-bordure); transition: background 260ms ease-out }
.m-chronologie--accordeon .m-chronologie__step:first-child { border-top: none }
.m-chronologie--accordeon .m-chronologie__step:has(> .m-chronologie__heading > [aria-expanded="true"]) { background: #FFFFFF }
.m-chronologie--accordeon .m-chronologie__line { position: absolute; left: 41px; width: 2px; top: 0; bottom: 0; background: var(--c-bordure) }
.m-chronologie--accordeon .m-chronologie__step:first-child .m-chronologie__line { top: 42px }
.m-chronologie--accordeon .m-chronologie__step:has(~ .m-chronologie__step [aria-expanded="true"]) .m-chronologie__line, .m-chronologie--accordeon .m-chronologie__step:has(> .m-chronologie__heading > [aria-expanded="true"]) .m-chronologie__line { background: linear-gradient(var(--c-jaune-fonce), var(--c-jaune)) }
.m-chronologie--accordeon .m-chronologie__heading { margin: 0 }
.m-chronologie--accordeon .m-chronologie__toggle { appearance: none; cursor: pointer; width: 100%; background: transparent; border: none; padding: 22px 24px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 16px; align-items: center; text-align: left; transition: background 200ms ease-out }
.m-chronologie--accordeon .m-chronologie__toggle:hover { background: rgba(255, 177, 0, .06) }
.m-chronologie--accordeon .m-chronologie__rank { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); flex: none; font-family: var(--f-display); font-size: 15px; font-weight: 600; background: #FFFFFF; color: var(--c-gris-texte); border: 2px solid var(--c-bordure); box-shadow: none; transition: background 320ms ease-out, border-color 320ms ease-out, box-shadow 320ms ease-out, color 320ms ease-out }
.m-chronologie--accordeon .m-chronologie__rank::before { content: counter(chronologie-step) }
.m-chronologie--accordeon .m-chronologie__step:has(~ .m-chronologie__step [aria-expanded="true"]) .m-chronologie__rank, .m-chronologie--accordeon .m-chronologie__toggle[aria-expanded="true"] .m-chronologie__rank { background: var(--c-jaune-fonce); border-color: var(--c-jaune-texte); color: var(--c-bleu-nuit) }
.m-chronologie--accordeon .m-chronologie__toggle[aria-expanded="true"] .m-chronologie__rank { box-shadow: 0 0 0 6px rgba(255, 177, 0, .16) }
.m-chronologie--accordeon .m-chronologie__names { display: flex; flex-direction: column; gap: 5px }
.m-chronologie--accordeon .m-chronologie__kicker { font-family: var(--f-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-jaune-texte) }
.m-chronologie--accordeon .m-chronologie__kicker::after { content: " " counter(chronologie-step, decimal-leading-zero) }
.m-chronologie--accordeon .m-chronologie__title { font-family: var(--f-display); font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; line-height: 1.2; color: var(--c-bleu-nuit) }
.m-chronologie--accordeon .m-chronologie__chevron { flex: none; display: block; width: 10px; height: 10px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(135deg); transition: transform 280ms var(--m-courbe) }
.m-chronologie--accordeon .m-chronologie__toggle[aria-expanded="true"] .m-chronologie__chevron { transform: rotate(-45deg) }
.m-chronologie--accordeon .m-chronologie__panel { overflow: hidden; transition: max-height 400ms var(--m-courbe), opacity 260ms ease-out }
.m-chronologie--accordeon .m-chronologie__text { margin: 0; padding: 0 24px 26px 76px; max-width: 74ch; font-size: 16px; line-height: 1.65; color: var(--c-ardoise); text-wrap: pretty }
.m-chronologie--accordeon .m-chronologie__result { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; background: var(--g-sombre); border-radius: 18px; padding: clamp(22px, 2.4vw, 32px) }
.m-chronologie--accordeon .m-chronologie__result-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start }
.m-chronologie--accordeon .m-chronologie__check { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-chronologie--accordeon .m-chronologie__check::before { content: ""; display: block; width: 18px; height: 10px; margin-top: -4px; border-left: 3px solid var(--c-bleu-nuit); border-bottom: 3px solid var(--c-bleu-nuit); border-radius: 1px; transform: rotate(-45deg) }
.m-chronologie--accordeon .m-chronologie__result-label { font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--c-jaune) }
.m-chronologie--accordeon .m-chronologie__result-title { margin: 0 0 8px; font-family: var(--f-display); font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; line-height: 1.2; color: #FFFFFF }
.m-chronologie--accordeon .m-chronologie__result-text { margin: 0; max-width: 70ch; font-size: 16px; line-height: 1.6; color: #B9CBEA; text-wrap: pretty }

/* escalier — Pyl.Academy - Pyl.Tech.html, section#chaine (FR-18). Autant de colonnes égales que de marches, sans nombre
   écrit nulle part : la grille les pose en colonnes automatiques. La hauteur minimale suit le rang, 170 px puis 30 px de
   plus jusqu'au sixième, qu'une marche publiée au-delà garde (FR-21.2). La feuille de base ne pose rien sur ol : la liste
   retire ici la marge, le retrait et la numérotation du navigateur. Le titre de marche est un paragraphe dans la
   maquette : il ne prend pas le resserrement des titres de la feuille de base. */
.m-chronologie--escalier { background: #FFFFFF; padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-chronologie--escalier .m-chronologie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--escalier .c-header__kicker { margin: 0 0 16px }
.m-chronologie--escalier .c-header__title { max-width: 30ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; text-wrap: balance }
.m-chronologie--escalier .c-header__intro { max-width: 62ch; margin: 18px 0 0; font-size: 19px; line-height: 1.55 }
.m-chronologie--escalier .m-chronologie__stairs { counter-reset: chronologie-step; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; margin: clamp(32px, 3.6vw, 44px) 0 0; padding: 0; list-style: none }
.m-chronologie--escalier .m-chronologie__step { counter-increment: chronologie-step; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 20px; border-radius: 16px }
.m-chronologie--escalier .m-chronologie__step:nth-child(1) { min-height: 170px }
.m-chronologie--escalier .m-chronologie__step:nth-child(2) { min-height: 200px }
.m-chronologie--escalier .m-chronologie__step:nth-child(3) { min-height: 230px }
.m-chronologie--escalier .m-chronologie__step:nth-child(4) { min-height: 260px }
.m-chronologie--escalier .m-chronologie__step:nth-child(5) { min-height: 290px }
.m-chronologie--escalier .m-chronologie__step:nth-child(n + 6) { min-height: 320px }
/* data-tone ne porte que l'un de ces quatre tons : le gabarit rend neutre pour un ton vide ou hors liste (FR-21.1). */
.m-chronologie--escalier .m-chronologie__step[data-tone="neutre"] { background: var(--c-blanc-casse); border: 1px solid var(--c-bordure) }
.m-chronologie--escalier .m-chronologie__step[data-tone="bleu"] { background: #DDE8FC; border: 1px solid #C9D8F5 }
.m-chronologie--escalier .m-chronologie__step[data-tone="vert"] { background: #DFF3E8; border: 1px solid #BFE5D0 }
.m-chronologie--escalier .m-chronologie__step[data-tone="jaune"] { background: #FFEFCC; border: 1px solid var(--c-jaune-fonce) }
.m-chronologie--escalier .m-chronologie__rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--c-bleu-nuit); color: #FFFFFF; font-size: 12px; font-weight: 600 }
.m-chronologie--escalier .m-chronologie__rank::before { content: counter(chronologie-step, decimal) }
.m-chronologie--escalier .m-chronologie__step[data-tone="jaune"] .m-chronologie__rank { background: var(--c-jaune-fonce); color: var(--c-bleu-nuit) }
.m-chronologie--escalier .m-chronologie__title { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: normal; color: var(--c-bleu-nuit) }
.m-chronologie--escalier .m-chronologie__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-ardoise) }

/* frise-numerotee — Pyl.Academy - Pyl.Tech.html, section#methodologie (FR-19). Le rail est plein dès le rendu : aucun
   état de site.js, aucune transition ; sa pointe est son pseudo-élément. La liste passe au-dessus du rail. Le titre
   d'étape est un paragraphe dans la maquette : il ne prend pas le resserrement des titres de la feuille de base. */
.m-chronologie--frise-numerotee { background: #FFFFFF; padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-chronologie--frise-numerotee .m-chronologie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-chronologie--frise-numerotee .c-header__kicker { margin: 0 0 16px }
.m-chronologie--frise-numerotee .c-header__title { max-width: 30ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; text-wrap: balance }
.m-chronologie--frise-numerotee .c-header__intro { max-width: 62ch; margin: 18px 0 0; font-size: 19px; line-height: 1.55 }
.m-chronologie--frise-numerotee .m-chronologie__frieze { position: relative; margin-top: clamp(36px, 4vw, 52px) }
.m-chronologie--frise-numerotee .m-chronologie__track { position: absolute; left: 18px; right: 0; top: 17px; height: 2px; background: var(--c-bordure) }
.m-chronologie--frise-numerotee .m-chronologie__track::after { content: ""; position: absolute; right: -2px; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg) }
.m-chronologie--frise-numerotee .m-chronologie__steps { counter-reset: chronologie-step; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none }
.m-chronologie--frise-numerotee .m-chronologie__step { counter-increment: chronologie-step; display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.m-chronologie--frise-numerotee .m-chronologie__rank { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 14px; font-weight: 600 }
.m-chronologie--frise-numerotee .m-chronologie__rank::before { content: counter(chronologie-step, decimal-leading-zero) }
.m-chronologie--frise-numerotee .m-chronologie__title { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--c-bleu-nuit) }
.m-chronologie--frise-numerotee .m-chronologie__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ardoise) }

@media (scripting: enabled) {
  .m-chronologie--verticale-photos .m-chronologie__fill { transform: scaleY(0) }
  /* 15 FR-8 : l'extinction d'une étape non atteinte porte sur son IMAGE, jamais sur son texte.
     Posée sur l'étape, elle composait la date `--c-jaune-texte` et le titre `--c-bleu-nuit` sur le
     blanc de la carte — mesuré le 2026-09-20, axe y lisait `#FFDE94` à 1,30:1 et `#989DA6` à 2,74,
     les 4 derniers de ses 44 nœuds, et aucune couleur ne les sauvait : une teinte deux fois plus
     sombre composée à .42 reste au-dessus de `#D0BE94`. Le losange et le rail disent déjà la
     progression ; l'image la dit une troisième fois, sans rien devoir au contraste d'un texte. */
  .m-chronologie--verticale-photos .m-chronologie__photo, .m-chronologie--verticale-photos .m-chronologie__logo { opacity: .42 }
  .m-chronologie--verticale-photos .m-chronologie__step[data-on] .m-chronologie__photo, .m-chronologie--verticale-photos .m-chronologie__step[data-on] .m-chronologie__logo { opacity: 1 }
  .m-chronologie--verticale-photos .m-chronologie__marker { transform: rotate(45deg) scale(.8) }
  .m-chronologie--verticale-photos .m-chronologie__marker::after { opacity: 0 }
  .m-chronologie--verticale-photos .m-chronologie__step[data-on] .m-chronologie__marker { transform: rotate(45deg) scale(1) }
  .m-chronologie--verticale-photos .m-chronologie__step[data-on] .m-chronologie__marker::after { opacity: 1 }
  .m-chronologie--horizontale-3 .m-chronologie__fill { transform: scaleX(0) }
  .m-chronologie--horizontale-3 .m-chronologie__frieze[data-filled] .m-chronologie__fill { transform: scaleX(1) }
  .m-chronologie--accordeon .m-chronologie__panel { max-height: 0; opacity: 0 }
  .m-chronologie--accordeon .m-chronologie__heading:has(> [aria-expanded="true"]) + .m-chronologie__panel { max-height: 260px; opacity: 1 }
}

/* La frise numérotée passe à la verticale sous 1200 px, et non sous 1024 (FR-19.1) : une colonne, le rond sur les deux
   rangées de l'étape, le rail vertical et sa pointe masquée. */
@media (max-width: 1199px) {
  .m-chronologie--frise-numerotee .m-chronologie__steps { grid-auto-flow: row; gap: 26px }
  .m-chronologie--frise-numerotee .m-chronologie__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 18px }
  .m-chronologie--frise-numerotee .m-chronologie__rank { grid-row: 1 / span 2 }
  .m-chronologie--frise-numerotee .m-chronologie__title, .m-chronologie--frise-numerotee .m-chronologie__text { grid-column: 2 }
  .m-chronologie--frise-numerotee .m-chronologie__track { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto }
  .m-chronologie--frise-numerotee .m-chronologie__track::after { display: none }
}

@media (max-width: 1023px) {
  .m-chronologie--verticale-photos .m-chronologie__card { grid-template-columns: minmax(0, 1fr) }
  .m-chronologie--escalier .m-chronologie__stairs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@media (max-width: 959px) {
  .m-chronologie--horizontale-3 .m-chronologie__grid { grid-template-columns: minmax(0, 1fr) }
  .m-chronologie--horizontale-3 .m-chronologie__rail, .m-chronologie--horizontale-3 .m-chronologie__marker { display: none }
  .m-chronologie--horizontale-3 .m-chronologie__step { border-top: 1px solid var(--c-bordure); padding-top: 12px }
  .m-chronologie--colonnes-structurees .m-chronologie__grid { grid-template-columns: minmax(0, 1fr) }
  .m-chronologie--colonnes-structurees .m-chronologie__outputs-grid { grid-template-columns: minmax(0, 1fr) }
  .m-chronologie--accordeon .m-chronologie__result { grid-template-columns: minmax(0, 1fr); gap: 8px }
}

/* Sous 600 px l'escalier tient en une colonne sans hauteur minimale (FR-18.1) : :nth-child(n) vise chaque marche à la
   spécificité des règles de hauteur par rang, qu'il suit dans la feuille. */
@media (max-width: 599px) {
  .m-chronologie--escalier .m-chronologie__stairs { grid-template-columns: minmax(0, 1fr) }
  .m-chronologie--escalier .m-chronologie__step:nth-child(n) { min-height: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .m-chronologie--verticale-photos .m-chronologie__fill, .m-chronologie--verticale-photos .m-chronologie__step, .m-chronologie--verticale-photos .m-chronologie__marker, .m-chronologie--verticale-photos .m-chronologie__marker::after, .m-chronologie--horizontale-3 .m-chronologie__fill, .m-chronologie--accordeon .m-chronologie__step, .m-chronologie--accordeon .m-chronologie__rank, .m-chronologie--accordeon .m-chronologie__chevron, .m-chronologie--accordeon .m-chronologie__panel { transition: none }
}

/* Corps riche — docs/specs/cms-socle/06_modules-m13-m23.md § M17.
   Relevé : docs/design-reference/cms-socle/maquettes-corps-galerie.html (corps d'Ivarus, de Foodles et des pages légales).
   Classes rt-* : docs/specs/cms-socle/04_module-system.md § Rendu du texte riche ; rt-video-frame est l'iframe que site.js
   met à la place de la façade (FR-7.1). */

/* commun aux trois variantes */
.m-corps-riche--article, .m-corps-riche--cas-client, .m-corps-riche--legal { background: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body strong, .m-corps-riche--cas-client .m-corps-riche__body strong, .m-corps-riche--legal .m-corps-riche__body strong { font-weight: 600; color: var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body a, .m-corps-riche--cas-client .m-corps-riche__body a, .m-corps-riche--legal .m-corps-riche__body a { font-weight: 600; color: var(--c-bleu-nuit); border-bottom: 2px solid var(--c-jaune-fonce); text-decoration: none }
/* Le survol de lien et le marqueur de liste numérotée prennent le jeton de TEXTE, parce que le corps de ce module
   est du `#FFFFFF` : `--c-jaune-fonce` y valait 1,82, `--c-jaune-texte` y donne 5,31. Ces deux règles sont les
   SEULES de la feuille qui étaient justes dans une citation sombre et fausses partout ailleurs — le validateur
   laisse un `blockquote` accepter tous les blocs, donc elles atteignent l'intérieur d'une `.rt-quote--sombre`, où
   le jaune de la charte vaut 8,26 sur le bout clair du dégradé et où le jeton de texte tomberait à 2,83. Le bloc
   de la citation sombre, plus bas, les y rétablit sur son propre accent : corriger un seul côté aggravait l'autre
   (mesuré le 2026-09-20 au build 118, 15 FR-8.4.7). */
.m-corps-riche--article .m-corps-riche__body a:not([class]):hover, .m-corps-riche--cas-client .m-corps-riche__body a:not([class]):hover, .m-corps-riche--legal .m-corps-riche__body a:not([class]):hover { color: var(--c-bleu-nuit); border-bottom-color: transparent; text-decoration: underline 3px var(--c-jaune-fonce); text-underline-offset: 4px }
.m-corps-riche--article .m-corps-riche__body h3, .m-corps-riche--cas-client .m-corps-riche__body h3, .m-corps-riche--legal .m-corps-riche__body h3 { margin: 26px 0 10px; font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; line-height: 1.3; color: var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body ul.rt-list, .m-corps-riche--cas-client .m-corps-riche__body ul.rt-list, .m-corps-riche--legal .m-corps-riche__body ul.rt-list { list-style: none }
.m-corps-riche--article .m-corps-riche__body ul.rt-list > li > *, .m-corps-riche--cas-client .m-corps-riche__body ul.rt-list > li > *, .m-corps-riche--legal .m-corps-riche__body ul.rt-list > li > * { grid-column: 2 }
.m-corps-riche--article .m-corps-riche__body .rt-list li p, .m-corps-riche--cas-client .m-corps-riche__body .rt-list li p, .m-corps-riche--legal .m-corps-riche__body .rt-list li p { margin: 0; font-size: inherit; line-height: inherit }
.m-corps-riche--article .m-corps-riche__body ol.rt-list, .m-corps-riche--cas-client .m-corps-riche__body ol.rt-list, .m-corps-riche--legal .m-corps-riche__body ol.rt-list { padding-left: 1.4em }
.m-corps-riche--article .m-corps-riche__body ol.rt-list > li::marker, .m-corps-riche--cas-client .m-corps-riche__body ol.rt-list > li::marker, .m-corps-riche--legal .m-corps-riche__body ol.rt-list > li::marker { font-weight: 600; color: var(--c-jaune-texte) }
.m-corps-riche--article .m-corps-riche__body .rt-quote, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote, .m-corps-riche--legal .m-corps-riche__body .rt-quote { margin: 0 0 28px; display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); border-radius: var(--r-carte); padding: clamp(24px, 3vw, 34px) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--clair, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--clair, .m-corps-riche--legal .m-corps-riche__body .rt-quote--clair { background: var(--c-fond-citation); border: 1px solid rgba(255, 177, 0, .3) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre { background: var(--g-sombre) }
/* Une citation accepte TOUS les blocs (internal/richtext/validate.go, accepts : blockquote -> blocks), et la
   marque `link` est admise partout où du texte l'est. Le ton sombre ne déclarait que son fond, sa barre, ses
   paragraphes, son nom et sa fonction : tout le reste tombait dans les règles de fond clair et se peignait sur
   `--g-sombre`. Mesuré le 2026-09-20 au build 118 sur `--c-bleu-profond`, le bout CLAIR du dégradé et le pire des
   deux — lien au repos 1,22, gras 1,22, titres 1,22, texte des deux listes 1,24, titre de façade vidéo 2,00. Le
   premier plan retenu est celui que la citation pose DÉJÀ pour elle-même : `#FFFFFF` pour son texte, comme ses
   paragraphes (15,03), et `--c-jaune` pour son accent, comme sa barre (9,82). Le titre de façade prend le gris
   bleuté de sa fonction (9,16). Aucun jeton de TEXTE ici : les trois y tombent sous 3,0. */
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre a, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre a, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre a { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre a:hover, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre a:hover, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre a:hover { color: var(--c-jaune) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre strong, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre strong, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre strong { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre h2, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre h2, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre h2, .m-corps-riche--article .m-corps-riche__body .rt-quote--sombre h3, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre h3, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre h3 { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre .rt-numbered h2, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre .rt-numbered h2, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre .rt-numbered h2 { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre ul.rt-list > li, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre ul.rt-list > li, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre ul.rt-list > li, .m-corps-riche--article .m-corps-riche__body .rt-quote--sombre ol.rt-list > li, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre ol.rt-list > li, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre ol.rt-list > li { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre ol.rt-list > li::marker, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre ol.rt-list > li::marker, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre ol.rt-list > li::marker { color: var(--c-jaune) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre .rt-video-title, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre .rt-video-title, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre .rt-video-title { color: #B9CBEA }
.m-corps-riche--article .m-corps-riche__body .rt-quote-bar, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-bar, .m-corps-riche--legal .m-corps-riche__body .rt-quote-bar { display: block; height: 100%; border-radius: 3px; background: var(--c-jaune-fonce) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre .rt-quote-bar, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre .rt-quote-bar, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre .rt-quote-bar { background: var(--c-jaune) }
.m-corps-riche--article .m-corps-riche__body .rt-quote-body, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-body, .m-corps-riche--legal .m-corps-riche__body .rt-quote-body { display: flex; flex-direction: column; gap: 16px }
.m-corps-riche--article .m-corps-riche__body .rt-quote-body:has(.rt-quote-author > picture), .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-body:has(.rt-quote-author > picture), .m-corps-riche--legal .m-corps-riche__body .rt-quote-body:has(.rt-quote-author > picture) { gap: 18px }
.m-corps-riche--article .m-corps-riche__body .rt-quote blockquote, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote blockquote, .m-corps-riche--legal .m-corps-riche__body .rt-quote blockquote { margin: 0 }
.m-corps-riche--article .m-corps-riche__body .rt-quote blockquote p, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote blockquote p, .m-corps-riche--legal .m-corps-riche__body .rt-quote blockquote p { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.45; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-corps-riche--article .m-corps-riche__body .rt-quote blockquote p + p, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote blockquote p + p, .m-corps-riche--legal .m-corps-riche__body .rt-quote blockquote p + p { margin-top: 1em }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre blockquote p, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre blockquote p, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre blockquote p { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote-author, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-author, .m-corps-riche--legal .m-corps-riche__body .rt-quote-author { display: flex; align-items: center; gap: 14px }
.m-corps-riche--article .m-corps-riche__body .rt-quote-author > picture, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-author > picture, .m-corps-riche--legal .m-corps-riche__body .rt-quote-author > picture { flex: 0 0 auto; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-pill) }
.m-corps-riche--article .m-corps-riche__body .rt-quote-author img, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-author img, .m-corps-riche--legal .m-corps-riche__body .rt-quote-author img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block }
.m-corps-riche--article .m-corps-riche__body .rt-quote-who, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-who, .m-corps-riche--legal .m-corps-riche__body .rt-quote-who { display: flex; flex-direction: column; gap: 2px }
.m-corps-riche--article .m-corps-riche__body .rt-quote-name, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-name, .m-corps-riche--legal .m-corps-riche__body .rt-quote-name { font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre .rt-quote-name, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre .rt-quote-name, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre .rt-quote-name { color: #FFFFFF }
.m-corps-riche--article .m-corps-riche__body .rt-quote-role, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote-role, .m-corps-riche--legal .m-corps-riche__body .rt-quote-role { font-size: 14px; color: var(--c-ardoise) }
.m-corps-riche--article .m-corps-riche__body .rt-quote--sombre .rt-quote-role, .m-corps-riche--cas-client .m-corps-riche__body .rt-quote--sombre .rt-quote-role, .m-corps-riche--legal .m-corps-riche__body .rt-quote--sombre .rt-quote-role { color: #B9CBEA }
.m-corps-riche--article .m-corps-riche__body .rt-callout, .m-corps-riche--cas-client .m-corps-riche__body .rt-callout, .m-corps-riche--legal .m-corps-riche__body .rt-callout { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: clamp(22px, 2.4vw, 30px); background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); border-radius: var(--r-carte) }
.m-corps-riche--article .m-corps-riche__body .rt-callout p, .m-corps-riche--cas-client .m-corps-riche__body .rt-callout p, .m-corps-riche--legal .m-corps-riche__body .rt-callout p { margin: 0; font-size: 17px; line-height: 1.65; color: #2B3550 }
.m-corps-riche--article .m-corps-riche__body .rt-callout p:first-child, .m-corps-riche--cas-client .m-corps-riche__body .rt-callout p:first-child, .m-corps-riche--legal .m-corps-riche__body .rt-callout p:first-child { font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body .rt-video, .m-corps-riche--cas-client .m-corps-riche__body .rt-video, .m-corps-riche--legal .m-corps-riche__body .rt-video { margin: 0 0 28px }
.m-corps-riche--article .m-corps-riche__body .rt-video-play, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-play, .m-corps-riche--legal .m-corps-riche__body .rt-video-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: none; border-radius: var(--r-carte); overflow: hidden; background: var(--c-bleu-nuit); cursor: pointer }
.m-corps-riche--article .m-corps-riche__body .rt-video-play picture, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-play picture, .m-corps-riche--legal .m-corps-riche__body .rt-video-play picture { position: absolute; inset: 0; display: block }
.m-corps-riche--article .m-corps-riche__body .rt-video-play img, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-play img, .m-corps-riche--legal .m-corps-riche__body .rt-video-play img { width: 100%; height: 100%; object-fit: cover; display: block }
.m-corps-riche--article .m-corps-riche__body .rt-video-icon, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-icon, .m-corps-riche--legal .m-corps-riche__body .rt-video-icon { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); box-shadow: var(--o-ombre); transition: filter 140ms ease-out }
.m-corps-riche--article .m-corps-riche__body .rt-video-icon::before, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-icon::before, .m-corps-riche--legal .m-corps-riche__body .rt-video-icon::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -7px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body .rt-video-play:hover .rt-video-icon, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-play:hover .rt-video-icon, .m-corps-riche--legal .m-corps-riche__body .rt-video-play:hover .rt-video-icon { filter: brightness(.95) }
.m-corps-riche--article .m-corps-riche__body .rt-video-title, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-title, .m-corps-riche--legal .m-corps-riche__body .rt-video-title { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--c-ardoise) }
.m-corps-riche--article .m-corps-riche__body .rt-video-frame, .m-corps-riche--cas-client .m-corps-riche__body .rt-video-frame, .m-corps-riche--legal .m-corps-riche__body .rt-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--r-carte); background: var(--c-bleu-nuit) }
.m-corps-riche--article .m-corps-riche__body .rt-cta, .m-corps-riche--cas-client .m-corps-riche__body .rt-cta, .m-corps-riche--legal .m-corps-riche__body .rt-cta { margin: 0 0 20px }
.m-corps-riche--article .m-corps-riche__body .rt-cta-link, .m-corps-riche--cas-client .m-corps-riche__body .rt-cta-link, .m-corps-riche--legal .m-corps-riche__body .rt-cta-link, .m-corps-riche--article .m-corps-riche__body .rt-cta-link:hover, .m-corps-riche--cas-client .m-corps-riche__body .rt-cta-link:hover, .m-corps-riche--legal .m-corps-riche__body .rt-cta-link:hover { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: var(--r-pill); border-bottom: none; background: var(--c-jaune-fonce); color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 16px; font-weight: 600 }
.m-corps-riche--article .m-corps-riche__body .rt-cta-link:hover, .m-corps-riche--cas-client .m-corps-riche__body .rt-cta-link:hover, .m-corps-riche--legal .m-corps-riche__body .rt-cta-link:hover { filter: brightness(.95) }

/* numérotation — Foodles en cas-client, pages légales en legal */
.m-corps-riche--cas-client .m-corps-riche__body .rt-numbered { display: flex; align-items: center; gap: 18px; margin: 52px 0 18px }
.m-corps-riche--cas-client .m-corps-riche__body .rt-number { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-corps-riche--cas-client .m-corps-riche__body .rt-numbered h2 { margin: 0; font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-corps-riche--legal .m-corps-riche__body .rt-numbered { display: flex; align-items: center; gap: 16px; margin: clamp(38px, 4vw, 54px) 0 20px }
.m-corps-riche--legal .m-corps-riche__body .rt-number { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-corps-riche--legal .m-corps-riche__body .rt-numbered h2 { margin: 0; font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--c-bleu-nuit); text-wrap: pretty }

/* legal — Mentions legales.dc.html et Politique de confidentialite.dc.html, 2e section */
.m-corps-riche--legal { padding: clamp(40px, 5vw, 64px) var(--l-marge) clamp(52px, 6vw, 80px) }
.m-corps-riche--legal .m-corps-riche__content { max-width: 800px; margin: 0 auto }
.m-corps-riche--legal .m-corps-riche__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: #2B3550; text-wrap: pretty }
.m-corps-riche--legal .m-corps-riche__body .rt-list { margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px }
.m-corps-riche--legal .m-corps-riche__body ul.rt-list > li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; line-height: 1.7; color: #2B3550 }
.m-corps-riche--legal .m-corps-riche__body ul.rt-list > li::before { content: ""; margin-top: 9px; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-corps-riche--legal .m-corps-riche__body ol.rt-list > li { padding-left: .3em; font-size: 17px; line-height: 1.7; color: #2B3550 }

/* article — Article - Expedition Ivarus.dc.html, 2e section ; cas-client — Cas client - Foodles.dc.html, 3e section */
.m-corps-riche--article { padding: clamp(48px, 6vw, 80px) var(--l-marge) clamp(56px, 6vw, 88px) }
.m-corps-riche--cas-client { padding: clamp(40px, 5vw, 64px) var(--l-marge) clamp(56px, 6vw, 88px) }
.m-corps-riche--article .m-corps-riche__content, .m-corps-riche--cas-client .m-corps-riche__content { max-width: 760px; margin: 0 auto }
.m-corps-riche--article .m-corps-riche__kicker, .m-corps-riche--cas-client .m-corps-riche__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-jaune-texte) }
.m-corps-riche--article .m-corps-riche__lead, .m-corps-riche--cas-client .m-corps-riche__lead { margin: 0 0 24px; font-size: 21px; font-weight: 500; line-height: 1.65; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-corps-riche--article .m-corps-riche__body p, .m-corps-riche--cas-client .m-corps-riche__body p { margin: 0 0 20px; font-size: 18px; line-height: 1.75; color: #2B3550; text-wrap: pretty }
.m-corps-riche--article .m-corps-riche__body > p:has(+ .rt-list), .m-corps-riche--cas-client .m-corps-riche__body > p:has(+ .rt-list) { margin-bottom: 22px }
.m-corps-riche--article .m-corps-riche__body > p:has(+ .rt-quote), .m-corps-riche--cas-client .m-corps-riche__body > p:has(+ .rt-quote) { margin-bottom: 26px }
.m-corps-riche--article .m-corps-riche__body > p:has(+ .rt-video), .m-corps-riche--cas-client .m-corps-riche__body > p:has(+ .rt-video) { margin-bottom: 28px }
.m-corps-riche--article .m-corps-riche__body h2 { margin: 56px 0 18px; font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-corps-riche--article .m-corps-riche__body .rt-list, .m-corps-riche--cas-client .m-corps-riche__body .rt-list { margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 16px }
.m-corps-riche--article .m-corps-riche__body ul.rt-list > li, .m-corps-riche--cas-client .m-corps-riche__body ul.rt-list > li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; align-items: start; font-size: 18px; line-height: 1.7; color: #2B3550 }
.m-corps-riche--article .m-corps-riche__body ul.rt-list > li::before, .m-corps-riche--cas-client .m-corps-riche__body ul.rt-list > li::before { content: ""; margin-top: 11px; width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-corps-riche--article .m-corps-riche__body ol.rt-list > li, .m-corps-riche--cas-client .m-corps-riche__body ol.rt-list > li { padding-left: .3em; font-size: 18px; line-height: 1.7; color: #2B3550 }
.m-corps-riche--article .m-corps-riche__body > :last-child, .m-corps-riche--cas-client .m-corps-riche__body > :last-child { margin-bottom: 0 }

/* M16 FAQ — docs/specs/cms-socle/06_modules-m13-m23.md § M16. Styles calculés relevés dans
   docs/design-reference/cms-socle/maquettes-faq.html. */

/* deux-colonnes — Offre Agents IA v2.dc.html, section#faq ; Gemini Enterprise DA2.dc.html, section#confiance ; avec top_rule,
   Ingenierie data et agents - Pyl.Tech.html et Workplace agentique - Pyl.Tech.html, section#faq (filet haut de la section, relevé
   dans docs/design-reference/cms-socle/maquettes-offre-data.html et maquettes-offre-workplace.html) ; au sign plus,
   Ingenierie Cloud - Pyl.Tech.html, section#faq */
.m-faq--deux-colonnes { background: var(--c-blanc-casse); padding: clamp(56px, 6vw, 88px) var(--l-marge) }
.m-faq--deux-colonnes[data-top-rule] { border-top: 1px solid var(--c-bordure) }
.m-faq--deux-colonnes .m-faq__content { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start }
.m-faq--deux-colonnes .m-faq__aside { display: block }
.m-faq--deux-colonnes .c-header__kicker { margin: 0 0 14px }
.m-faq--deux-colonnes .c-header__title { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15 }
.m-faq--deux-colonnes .c-header__intro { font-size: 16px; line-height: 1.55 }
.m-faq--deux-colonnes .m-faq__contact { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; border-bottom: none; font-size: 16px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes .m-faq__contact:hover { border-bottom: none; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes .m-faq__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-faq--deux-colonnes .m-faq__contact:hover .m-faq__arrow { transform: translateX(7px) rotate(45deg) }
.m-faq--deux-colonnes .m-faq__list { display: flex; flex-direction: column; gap: 12px }
.m-faq--deux-colonnes .m-faq__item { overflow: hidden; background: #FFFFFF; border-radius: 16px; box-shadow: var(--o-ombre) }
.m-faq--deux-colonnes .m-faq__heading { margin: 0 }
.m-faq--deux-colonnes .m-faq__toggle { appearance: none; border: none; cursor: pointer; background: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: clamp(18px, 2vw, 22px) clamp(20px, 2vw, 28px); font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes .m-faq__question { display: block }
.m-faq--deux-colonnes .m-faq__sign { flex: none; display: inline-block; width: 9px; height: 9px; border-right: 2px solid var(--c-jaune-fonce); border-bottom: 2px solid var(--c-jaune-fonce); transform: translateY(-2px) rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-faq--deux-colonnes .m-faq__toggle[aria-expanded="true"] .m-faq__sign { transform: translateY(-2px) rotate(-135deg) }
.m-faq--deux-colonnes .m-faq__answer { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms var(--m-courbe) }
.m-faq--deux-colonnes .m-faq__clip { overflow: hidden }
.m-faq--deux-colonnes .m-faq__text { padding: 0 clamp(20px, 2vw, 28px) 22px; font-size: 16px; line-height: 1.6; color: var(--c-ardoise) }
.m-faq--deux-colonnes .m-faq__text p { margin: 0; max-width: 72ch }
.m-faq--deux-colonnes .m-faq__text p + p { margin-top: 1em }
/* top_rule : les deux maquettes d'offre bornent la réponse à 72ch padding compris — padding et largeur sur le même
   paragraphe —, empilent à 28 px sous 960 px, et peignent en bleu nuit le gras des réponses et la flèche du lien de
   contact (06 FR-4.2). */
.m-faq--deux-colonnes[data-top-rule] .m-faq__text { max-width: 72ch }
.m-faq--deux-colonnes[data-top-rule] .m-faq__text p { max-width: none }
.m-faq--deux-colonnes[data-top-rule] .m-faq__text strong { color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes[data-top-rule] .m-faq__arrow { border-top-color: var(--c-bleu-nuit); border-right-color: var(--c-bleu-nuit) }
/* sign plus — Ingenierie Cloud - Pyl.Tech.html, section#faq (06 FR-4.3) : le signe vide du chevron devient un rond de
   32 px portant deux traits, le vertical non peint sur la question ouverte, sans transition comme celui de simple.
   La règle du chevron ouvert pèse plus que le rond : sa rotation est défaite à son poids. Viennent avec le signe les
   trois valeurs que la maquette cloud partage avec les pages d'offre ; ni le filet ni l'écart de la grille, qui
   restent à deux-colonnes et à data-top-rule. */
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__sign { position: relative; width: 32px; height: 32px; border: none; border-radius: var(--r-pill); background: var(--c-teinte-jaune); transform: none; transition: none }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__sign::before { content: ""; position: absolute; left: 10px; top: 15px; width: 12px; height: 2px; border-radius: 2px; background: var(--c-bleu-nuit) }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__sign::after { content: ""; position: absolute; left: 15px; top: 10px; width: 2px; height: 12px; border-radius: 2px; background: var(--c-bleu-nuit) }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__toggle[aria-expanded="true"] .m-faq__sign { transform: none }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__toggle[aria-expanded="true"] .m-faq__sign::after { display: none }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__text { box-sizing: border-box; max-width: 72ch }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__text p { max-width: none }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__text strong { color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes[data-sign="plus"] .m-faq__arrow { border-top-color: var(--c-bleu-nuit); border-right-color: var(--c-bleu-nuit) }

/* deux-colonnes-larges — Pyl.Academy.dc.html, section#faq */
.m-faq--deux-colonnes-larges { background: var(--c-blanc-casse); border-top: 1px solid var(--c-bordure); padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-faq--deux-colonnes-larges .m-faq__content { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start }
.m-faq--deux-colonnes-larges .m-faq__aside { display: block }
.m-faq--deux-colonnes-larges .c-header__title { max-width: 20ch; margin: 0 0 14px; font-size: clamp(26px, 2.8vw, 36px) }
.m-faq--deux-colonnes-larges .c-header__intro { font-size: 16px; line-height: 1.55 }
.m-faq--deux-colonnes-larges .m-faq__contact { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; border-bottom: none; font-size: 16px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes-larges .m-faq__contact:hover { border-bottom: none; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes-larges .m-faq__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-faq--deux-colonnes-larges .m-faq__contact:hover .m-faq__arrow { transform: translateX(7px) rotate(45deg) }
.m-faq--deux-colonnes-larges .m-faq__list { display: flex; flex-direction: column; gap: 12px }
.m-faq--deux-colonnes-larges .m-faq__item { overflow: hidden; background: #FFFFFF; border-radius: 16px; box-shadow: var(--o-ombre) }
.m-faq--deux-colonnes-larges .m-faq__heading { margin: 0 }
.m-faq--deux-colonnes-larges .m-faq__toggle { appearance: none; border: none; cursor: pointer; background: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: clamp(18px, 2vw, 22px) clamp(20px, 2vw, 28px); font-family: var(--f-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--c-bleu-nuit) }
.m-faq--deux-colonnes-larges .m-faq__question { display: block }
.m-faq--deux-colonnes-larges .m-faq__sign { flex: none; display: inline-block; width: 9px; height: 9px; border-right: 2px solid var(--c-jaune-fonce); border-bottom: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-faq--deux-colonnes-larges .m-faq__toggle[aria-expanded="true"] .m-faq__sign { transform: rotate(-135deg) }
.m-faq--deux-colonnes-larges .m-faq__answer { padding: 0 clamp(20px, 2vw, 28px) 22px; font-size: 16px; line-height: 1.6; color: var(--c-ardoise) }
.m-faq--deux-colonnes-larges .m-faq__answer p { margin: 0; max-width: 72ch }
.m-faq--deux-colonnes-larges .m-faq__answer p + p { margin-top: 1em }

/* simple — Offre Agents IA - Onglets.dc.html, section « Questions fréquentes » */
.m-faq--simple { padding: 0 var(--l-marge) 96px }
.m-faq--simple .m-faq__content { max-width: var(--l-contenu); margin: 0 auto }
.m-faq--simple .c-header__title { margin: 0 0 32px; font-size: 36px; line-height: 1.15 }
.m-faq--simple .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-faq--simple .c-header__intro { margin: 0 0 32px }
.m-faq--simple .m-faq__list { display: flex; flex-direction: column; gap: 14px }
.m-faq--simple .m-faq__item { background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 26px 28px }
.m-faq--simple .m-faq__heading { margin: 0; font: inherit }
.m-faq--simple .m-faq__toggle { appearance: none; background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; text-align: left }
.m-faq--simple .m-faq__question { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.3 }
.m-faq--simple .m-faq__sign { flex: none; width: 14px; height: 14px; margin-top: 4px; background: linear-gradient(var(--c-jaune-fonce), var(--c-jaune-fonce)) center / 14px 2px no-repeat, linear-gradient(var(--c-jaune-fonce), var(--c-jaune-fonce)) center / 2px 14px no-repeat }
.m-faq--simple .m-faq__toggle[aria-expanded="true"] .m-faq__sign { background: linear-gradient(var(--c-jaune-fonce), var(--c-jaune-fonce)) center / 14px 2px no-repeat }
.m-faq--simple .m-faq__answer { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--c-ardoise) }
.m-faq--simple .m-faq__answer p { margin: 0; max-width: 88ch; text-wrap: pretty }
.m-faq--simple .m-faq__answer p + p { margin-top: 1em }

@media (scripting: enabled) {
  .m-faq--deux-colonnes .m-faq__answer { grid-template-rows: 0fr }
  .m-faq--deux-colonnes .m-faq__heading:has(> [aria-expanded="true"]) + .m-faq__answer { grid-template-rows: 1fr }
  .m-faq--deux-colonnes-larges .m-faq__answer { display: none }
  .m-faq--deux-colonnes-larges .m-faq__heading:has(> [aria-expanded="true"]) + .m-faq__answer { display: block }
  .m-faq--simple .m-faq__answer { display: none }
  .m-faq--simple .m-faq__heading:has(> [aria-expanded="true"]) + .m-faq__answer { display: block }
}

@media (max-width: 959px) {
  .m-faq--deux-colonnes .m-faq__content { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-faq--deux-colonnes[data-top-rule] .m-faq__content { gap: 28px }
  .m-faq--deux-colonnes-larges .m-faq__content { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* Liste à icônes — docs/specs/cms-socle/06_modules-m13-m23.md § M21.
   Relevé : docs/design-reference/cms-socle/maquettes-listes-coordonnees.html (livrables de DA2, méthodologie d'Onglets,
   pastilles de v2). */

/* coches — Gemini Enterprise DA2.dc.html#pov, bloc « Livrables de sortie » */
/* Le libellé prend le gris de TEXTE : la variante ne déclare aucun fond, donc il atterrit sur un cadre de
   base.css, et aucun n'est sombre — 2,80 sur #FFFFFF et 2,65 sur var(--c-blanc-casse) devenaient 5,13 et 4,86
   (07 § Jaune et gris de TEXTE). */
.m-liste-icones--coches .m-liste-icones__label { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--c-gris-texte) }
.m-liste-icones--coches .m-liste-icones__list { display: grid; gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none }
.m-liste-icones--coches .m-liste-icones__list--cols-1 { grid-template-columns: minmax(0, 1fr) }
.m-liste-icones--coches .m-liste-icones__list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.m-liste-icones--coches .m-liste-icones__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.m-liste-icones--coches .m-liste-icones__item { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--c-bleu-nuit) }
.m-liste-icones--coches .m-liste-icones__check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: var(--r-pill); background: #2DAA6E }
.m-liste-icones--coches .m-liste-icones__check::before { content: ""; display: block; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg) }
.m-liste-icones--coches .m-liste-icones__text { margin: 0 }
.m-liste-icones--coches .m-liste-icones__bold { font-weight: 600 }

/* puces — Offre Agents IA - Onglets.dc.html, 2e section, encart « Notre méthodologie » */
.m-liste-icones--puces { background: #FFF1CC; border-radius: var(--r-carte); padding: 32px }
.m-liste-icones--puces .m-liste-icones__label { margin: 0 0 22px; font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.3 }
.m-liste-icones--puces .m-liste-icones__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none }
.m-liste-icones--puces .m-liste-icones__list--cols-1 { grid-template-columns: minmax(0, 1fr) }
.m-liste-icones--puces .m-liste-icones__list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.m-liste-icones--puces .m-liste-icones__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.m-liste-icones--puces .m-liste-icones__item { display: flex; gap: 14px; align-items: flex-start }
.m-liste-icones--puces .m-liste-icones__dot { flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-liste-icones--puces .m-liste-icones__text { margin: 0; font-size: 16px; line-height: 1.5 }
.m-liste-icones--puces .m-liste-icones__bold { font-weight: 600 }

/* pastilles — Offre Agents IA v2.dc.html#offre, pastilles de la carte « Vertex AI Agent Builder » */
.m-liste-icones--pastilles .m-liste-icones__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.m-liste-icones--pastilles .m-liste-icones__item { padding: 7px 14px; border-radius: var(--r-pill); background: #FFF1CC; font-size: 14px; font-weight: 600; white-space: nowrap }

/* capsules — Pyl.Academy - Pyl.Tech.html#constat (06 FR-9.1) : seule variante pleine largeur et à en-tête. La racine
   ne déclare aucun fond : la section repose sur le cadre de la page, du blanc cassé de la maquette. */
.m-liste-icones--capsules { padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-liste-icones--capsules .m-liste-icones__content { max-width: var(--l-contenu); margin: 0 auto }
.m-liste-icones--capsules .c-header__kicker { margin: 0 0 16px }
.m-liste-icones--capsules .c-header__title { max-width: 30ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; text-wrap: balance }
.m-liste-icones--capsules .c-header__intro { max-width: 62ch; margin: 18px 0 0; font-size: 19px; line-height: 1.55 }
.m-liste-icones--capsules .m-liste-icones__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1100px; margin: clamp(28px, 3vw, 36px) 0 0; padding: 0; list-style: none }
.m-liste-icones--capsules .m-liste-icones__item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px; border-radius: 18px; background: #EDF1F7; font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-liste-icones--capsules .m-liste-icones__diamond { flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--c-jaune-fonce); transform: rotate(45deg) }
.m-liste-icones--capsules .m-liste-icones__text { margin: 0 }
.m-liste-icones--capsules .m-liste-icones__bold { font-weight: 600; color: var(--c-bleu-nuit) }

/* Les quatre maquettes dessinent ces listes en <div> ou en <p> : la puce de ul > li::before de base.css n'y est pas
   (04 § Rendu d'un module). */
.m-liste-icones--coches .m-liste-icones__item::before, .m-liste-icones--puces .m-liste-icones__item::before, .m-liste-icones--pastilles .m-liste-icones__item::before, .m-liste-icones--capsules .m-liste-icones__item::before { content: none }

/* Une colonne sous 960 px, après les règles de colonnes qu'elle remplace à spécificité égale ; les capsules s'y
   empilent à 24 px. */
@media (max-width: 959px) {
  .m-liste-icones--coches .m-liste-icones__list, .m-liste-icones--puces .m-liste-icones__list { grid-template-columns: minmax(0, 1fr) }
  .m-liste-icones--capsules .m-liste-icones__list { grid-template-columns: minmax(0, 1fr); gap: 24px }
}

/* Média — docs/specs/cms-socle/06_modules-m13-m23.md § M24. Sans maquette (décision de Jérémy du
   2026-09-24) : jetons du design system. Le cadre bleu nuit se voit autour d'une vidéo avec le lecteur
   d'autres proportions que son image d'attente ; le bouton de pause est celui de .c-video.
   size borne le cadre, ratio donne ses proportions à une vidéo, et le lecteur ne dépasse jamais
   85 % de la hauteur de l'écran (correctif du 2026-10-01 : une vidéo verticale prenait les deux
   tiers de la page). */
.m-media-seul--standard { background: #FFFFFF; padding: clamp(40px, 5vw, 72px) var(--l-marge) }
.m-media-seul--standard .m-media-seul__frame { max-width: var(--l-contenu); margin: 0 auto; overflow: hidden; border-radius: var(--r-carte); background: var(--c-bleu-nuit) }
.m-media-seul--standard[data-size="moyenne"] .m-media-seul__frame { max-width: 880px }
.m-media-seul--standard[data-size="etroite"] .m-media-seul__frame { max-width: 560px }
.m-media-seul--standard .m-media-seul__frame picture { display: block }
.m-media-seul--standard .m-media-seul__frame img { display: block; width: 100%; height: auto }
.m-media-seul--standard .c-video__media { object-fit: contain }
.m-media-seul--standard .c-video__media:not([height]) { aspect-ratio: 16 / 9 }
.m-media-seul--standard[data-ratio="16-9"] .c-video__media { aspect-ratio: 16 / 9 }
.m-media-seul--standard[data-ratio="4-3"] .c-video__media { aspect-ratio: 4 / 3 }
.m-media-seul--standard[data-ratio="1-1"] .c-video__media { aspect-ratio: 1 / 1 }
.m-media-seul--standard[data-ratio="9-16"] .c-video__media { aspect-ratio: 9 / 16 }
.m-media-seul--standard .c-video__media[data-video="ambiance"] { object-fit: cover }
.m-media-seul--standard .c-video:not(:fullscreen) .c-video__media:not([data-video="ambiance"]) { max-height: 85vh }

/* M15 Onglets — docs/specs/cms-socle/06_modules-m13-m23.md § M15. Styles calculés relevés dans
   docs/design-reference/cms-socle/maquettes-onglets.html. */

/* pills — Offre Agents IA - Onglets.dc.html, section#offre */
.m-onglets--pills { padding: 0 var(--l-marge) 96px }
.m-onglets--pills .m-onglets__content { max-width: var(--l-contenu); margin: 0 auto }
.m-onglets--pills .c-header__title { margin: 0 0 32px; font-size: 36px; line-height: 1.15 }
.m-onglets--pills .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-onglets--pills .c-header__intro { margin: 0 0 32px }
.m-onglets--pills .m-onglets__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; border-bottom: 1px solid var(--c-bordure) }
.m-onglets--pills .m-onglets__tab { appearance: none; border: none; cursor: pointer; font: inherit; font-family: var(--f-display); font-size: 17px; font-weight: 600; white-space: nowrap; padding: 14px 22px; border-radius: 14px 14px 0 0; margin-bottom: -1px; background: transparent; color: #5F6368; box-shadow: none; transition: background 140ms ease-out, color 140ms ease-out }
.m-onglets--pills .m-onglets__tab[aria-selected="true"] { background: #FFFFFF; color: var(--c-bleu-nuit); box-shadow: 0 -2px 10px rgba(11, 19, 43, .06) }
.m-onglets--pills .m-onglets__panels { display: flex; flex-direction: column; gap: 36px }
.m-onglets--pills .m-onglets__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; align-items: start }
.m-onglets--pills .m-onglets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.m-onglets--pills .m-onglets__card { display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 28px }
.m-onglets--pills .m-onglets__card-title { margin: 0; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.25 }
.m-onglets--pills .m-onglets__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ardoise) }
.m-onglets--pills .m-onglets__points { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none }
.m-onglets--pills .m-onglets__point { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45 }
.m-onglets--pills .m-onglets__point::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); position: static }
.m-onglets--pills .m-onglets__image { position: relative; overflow: hidden; min-height: 220px; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre) }
.m-onglets--pills .m-onglets__image picture { position: absolute; inset: 0; display: block }
.m-onglets--pills .m-onglets__image img { display: block; width: 100%; height: 100%; object-fit: cover }
.m-onglets--pills .m-onglets__badges { display: flex; flex-direction: column; justify-content: center; gap: 18px; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 28px }
.m-onglets--pills .m-onglets__badge-row { display: flex; flex-wrap: wrap; gap: 18px }
.m-onglets--pills .m-onglets__badge-row picture { display: block }
.m-onglets--pills .m-onglets__badge-row img { display: block; width: 132px; height: auto }
.m-onglets--pills .m-onglets__badges-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ardoise) }
.m-onglets--pills .m-onglets__gains { padding-top: 4px }
.m-onglets--pills .m-onglets__gains-label { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--c-gris-texte) }
.m-onglets--pills .m-onglets__gains-text { font-size: 16px; line-height: 1.6; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-onglets--pills .m-onglets__gains-text p { display: inline; margin: 0 }

/* soulignes — Offre Agents IA v2.dc.html, section#offre */
.m-onglets--soulignes { border-top: 1px solid var(--c-bordure); padding: clamp(72px, 8vw, 108px) var(--l-marge) clamp(72px, 8vw, 104px) }
.m-onglets--soulignes .m-onglets__content { max-width: var(--l-contenu); margin: 0 auto }
.m-onglets--soulignes .c-header__title { margin: 0 0 36px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15 }
.m-onglets--soulignes .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-onglets--soulignes .c-header__intro { margin: 0 0 36px }
.m-onglets--soulignes .m-onglets__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 44px }
.m-onglets--soulignes .m-onglets__tab { appearance: none; border: none; cursor: pointer; background: none; position: relative; font-family: var(--f-display); font-size: 18px; font-weight: 600; white-space: nowrap; padding: 10px 18px 14px; color: var(--c-gris-texte); transition: color 140ms ease-out }
.m-onglets--soulignes .m-onglets__tab[aria-selected="true"] { color: var(--c-bleu-nuit) }
.m-onglets--soulignes .m-onglets__rule { position: absolute; left: 18px; bottom: 0; width: 0; height: 3px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); transition: width 240ms var(--m-courbe) }
.m-onglets--soulignes .m-onglets__tab[aria-selected="true"] .m-onglets__rule { width: calc(100% - 36px) }
.m-onglets--soulignes .m-onglets__panels { display: flex; flex-direction: column; gap: 44px }
.m-onglets--soulignes .m-onglets__panel { display: block }
.m-onglets--soulignes .m-onglets__panel-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: 44px }
.m-onglets--soulignes .m-onglets__panel-title { margin: 0; max-width: 20ch; font-family: var(--f-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: pretty }
.m-onglets--soulignes .m-onglets__panel-intro { font-size: 18px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-onglets--soulignes .m-onglets__panel-intro p { margin: 0 }
.m-onglets--soulignes .m-onglets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.m-onglets--soulignes .m-onglets__card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 34px 30px 30px; transition: filter 140ms ease-out }
.m-onglets--soulignes .m-onglets__card:hover { filter: brightness(.985) }
.m-onglets--soulignes .m-onglets__accent { position: absolute; top: 0; left: 0; width: 100%; height: 4px; border-radius: 20px 20px 0 0; background: var(--c-jaune) }
.m-onglets--soulignes .m-onglets__accent--bleu { background: var(--c-bleu-google) }
.m-onglets--soulignes .m-onglets__card-title { margin: 0; font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.25 }
.m-onglets--soulignes .m-onglets__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-onglets--soulignes .m-onglets__points { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none }
.m-onglets--soulignes .m-onglets__point { padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-beige); font-size: 14px; font-weight: 600; white-space: nowrap }
.m-onglets--soulignes .m-onglets__point::before { content: none }
.m-onglets--soulignes .m-onglets__image { position: relative; overflow: hidden; min-height: 260px; background: var(--c-bleu-nuit); border-radius: var(--r-carte) }
.m-onglets--soulignes .m-onglets__image picture { position: absolute; inset: 0; display: block }
.m-onglets--soulignes .m-onglets__image img { display: block; width: 100%; height: 100%; object-fit: cover }
.m-onglets--soulignes .m-onglets__badges { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 260px; padding: 30px; border-radius: var(--r-carte); background: var(--c-bleu-nuit) }
.m-onglets--soulignes .m-onglets__badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px }
.m-onglets--soulignes .m-onglets__badge-row picture { display: block }
.m-onglets--soulignes .m-onglets__badge-row img { display: block; width: 112px; height: auto }
.m-onglets--soulignes .m-onglets__badges-text { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.55; color: #FFFFFF }

/* verticaux-numerotes — Gemini Enterprise DA2.dc.html, section#echelle */
.m-onglets--verticaux-numerotes { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-onglets--verticaux-numerotes .m-onglets__content { max-width: var(--l-contenu); margin: 0 auto }
.m-onglets--verticaux-numerotes .c-header__title { max-width: 26ch; margin: 0 0 40px; font-size: clamp(28px, 3.2vw, 42px) }
.m-onglets--verticaux-numerotes .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-onglets--verticaux-numerotes .c-header__intro { margin: 0 0 40px; max-width: 62ch; line-height: 1.5 }
.m-onglets--verticaux-numerotes .m-onglets__body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start }
.m-onglets--verticaux-numerotes .m-onglets__side { display: flex; flex-direction: column; gap: 10px }
.m-onglets--verticaux-numerotes .m-onglets__tabs { display: flex; flex-direction: column; gap: 10px; counter-reset: onglets-tab }
.m-onglets--verticaux-numerotes .m-onglets__tab { counter-increment: onglets-tab; appearance: none; cursor: pointer; text-align: left; width: 100%; display: flex; align-items: center; gap: 14px; background: transparent; border: 1px solid var(--c-bordure); border-radius: 16px; padding: 16px 18px; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--c-bleu-nuit); box-shadow: none; transition: background 160ms ease-out, border-color 160ms ease-out }
.m-onglets--verticaux-numerotes .m-onglets__tab[aria-selected="true"] { background: #FFFFFF; border-color: var(--c-jaune-fonce); box-shadow: var(--o-ombre) }
/* Les DEUX états du rang prennent `--c-bleu-nuit`, qui est déjà la couleur de l'onglet lui-même, et les deux fonds
   de pastille ne bougent pas. Aucun jeton de TEXTE ne résout cet élément : en 13 px 600 — du petit texte —, au
   repos `#8F9BB3` valait 2,27 sur `--c-bordure`, et le gris de texte ne l'y porterait qu'à 4,17,
   toujours sous 4,5 ; sélectionné, `#FFFFFF` valait 1,82 sur `--c-jaune-fonce`. C'est donc le FOND de la pastille
   qui commande le premier plan, jamais une teinte de texte. `--c-bleu-nuit` donne 14,94 au repos et 10,10
   sélectionné — ce dernier est le rapport exact du bouton de la même variante, qui posait déjà le bon premier plan
   sur ce même jaune (mesuré le 2026-09-20 au build 117, 15 FR-8.4.6). */
.m-onglets--verticaux-numerotes .m-onglets__number { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--c-bordure); color: var(--c-bleu-nuit); font-size: 13px; font-weight: 600 }
.m-onglets--verticaux-numerotes .m-onglets__number::before { content: counter(onglets-tab, decimal-leading-zero) }
.m-onglets--verticaux-numerotes .m-onglets__tab[aria-selected="true"] .m-onglets__number { background: var(--c-jaune-fonce); color: var(--c-bleu-nuit) }
.m-onglets--verticaux-numerotes .m-onglets__button, .m-onglets--verticaux-numerotes .m-onglets__button:hover { align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 12px; flex: none; padding: 14px 24px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 17px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-onglets--verticaux-numerotes .m-onglets__button:hover { filter: brightness(.95) }
.m-onglets--verticaux-numerotes .m-onglets__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-onglets--verticaux-numerotes .m-onglets__button:hover .m-onglets__arrow { transform: translateX(7px) rotate(45deg) }
.m-onglets--verticaux-numerotes .m-onglets__card { background: #FFFFFF; border-radius: var(--r-carte); padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--o-ombre) }
.m-onglets--verticaux-numerotes .m-onglets__panels { display: flex; flex-direction: column; gap: 26px }
.m-onglets--verticaux-numerotes .m-onglets__panel { display: flex; flex-direction: column; gap: 18px }
.m-onglets--verticaux-numerotes .m-onglets__panel-title { margin: 0; font-family: var(--f-display); font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.2 }
.m-onglets--verticaux-numerotes .m-onglets__panel-intro { max-width: 70ch; font-size: 17px; line-height: 1.6; color: var(--c-ardoise) }
.m-onglets--verticaux-numerotes .m-onglets__panel-intro p { margin: 0 }
.m-onglets--verticaux-numerotes .m-onglets__bullets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--c-bordure) }
.m-onglets--verticaux-numerotes .m-onglets__bullet { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--c-ardoise) }
.m-onglets--verticaux-numerotes .m-onglets__bullet::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); position: static }
.m-onglets--verticaux-numerotes .m-onglets__note { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--c-bordure) }
.m-onglets--verticaux-numerotes .m-onglets__note::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 5px; background: var(--c-jaune-fonce); transform: rotate(45deg) }
.m-onglets--verticaux-numerotes .m-onglets__note-text { margin: 0; max-width: 78ch; font-size: 16px; line-height: 1.6; color: var(--c-bleu-nuit) }

/* catalogue — Pyl.Academy - Pyl.Tech.html, section#catalogue (06 FR-3.2, FR-3.3) : variante dédiée, dont chaque règle
   commence par sa racine et dont aucune n'est partagée avec verticaux-numerotes. La racine ne pose pas de fond, et
   sa marge basse est l'écart qui la sépare de l'encart de cartes qui la suit dans la même section de la maquette.
   Le titre de panneau est écrit dans un paragraphe de la maquette : il ne prend pas le resserrement des titres de
   la feuille de base. La tête de panneau ne porte pas de marge basse : le panneau est une colonne flex, où elle
   s'ajouterait aux 8 px de marge haute du titre au lieu de s'y fusionner comme dans le panneau en bloc de la
   maquette — 16 px mesurés pour 8 (06 § M15). */
.m-onglets--catalogue { padding: clamp(64px, 7vw, 96px) var(--l-marge) clamp(48px, 5vw, 64px) }
.m-onglets--catalogue .m-onglets__content { max-width: var(--l-contenu); margin: 0 auto }
.m-onglets--catalogue .c-header__kicker { margin: 0 0 16px }
.m-onglets--catalogue .c-header__title { max-width: 30ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; text-wrap: balance }
.m-onglets--catalogue .c-header__intro { max-width: 62ch; margin: 18px 0 0; font-size: 19px; line-height: 1.55 }
.m-onglets--catalogue .m-onglets__body { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: clamp(32px, 3.6vw, 44px) }
.m-onglets--catalogue .m-onglets__tabs { display: flex; flex-direction: column; gap: 8px; counter-reset: onglets-tab }
.m-onglets--catalogue .m-onglets__tab { counter-increment: onglets-tab; appearance: none; cursor: pointer; text-align: left; width: 100%; display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: 14px; padding: 14px 16px; font-family: var(--f-display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--c-bleu-nuit); box-shadow: none; transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out }
.m-onglets--catalogue .m-onglets__tab[aria-selected="true"] { background: var(--c-bleu-nuit); border-color: var(--c-bleu-nuit); color: #FFFFFF }
.m-onglets--catalogue .m-onglets__number { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: #FFEFCC; color: var(--c-bleu-nuit); font-size: 13px; font-weight: 600 }
.m-onglets--catalogue .m-onglets__number::before { content: counter(onglets-tab, decimal-leading-zero) }
.m-onglets--catalogue .m-onglets__tab[aria-selected="true"] .m-onglets__number { background: var(--c-jaune-fonce); color: var(--c-bleu-nuit) }
.m-onglets--catalogue .m-onglets__card { background: #FFFFFF; border-radius: var(--r-carte); padding: clamp(22px, 2.6vw, 34px); box-shadow: var(--o-ombre) }
.m-onglets--catalogue .m-onglets__panels { display: flex; flex-direction: column; gap: 26px }
.m-onglets--catalogue .m-onglets__panel { display: flex; flex-direction: column; gap: 0 }
.m-onglets--catalogue .m-onglets__panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px }
.m-onglets--catalogue .m-onglets__badge { padding: 5px 12px; border-radius: var(--r-pill); background: #FFEFCC; font-size: 13px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-onglets--catalogue .m-onglets__meta { font-size: 14px; font-weight: 600; color: var(--c-ardoise) }
.m-onglets--catalogue .m-onglets__panel-title { margin: 8px 0 0; font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: normal }
.m-onglets--catalogue .m-onglets__panel-intro { max-width: 70ch; margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--c-ardoise) }
.m-onglets--catalogue .m-onglets__panel-intro p { margin: 0 }
.m-onglets--catalogue .m-onglets__bullets { display: flex; flex-direction: column; margin: 18px 0 0; padding: 0; list-style: none }
.m-onglets--catalogue .m-onglets__bullet { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--c-bordure) }
.m-onglets--catalogue .m-onglets__bullet:first-child { border-top: none }
.m-onglets--catalogue .m-onglets__bullet--highlighted { margin-top: 12px; padding: 16px 18px; border-top: none; border-radius: 14px; background: #FFEFCC }
.m-onglets--catalogue .m-onglets__bullet::before { content: none }
.m-onglets--catalogue .m-onglets__diamond { flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--c-jaune-fonce); transform: rotate(45deg) }
.m-onglets--catalogue .m-onglets__bullet-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-onglets--catalogue .m-onglets__bold { font-weight: 600; color: var(--c-bleu-nuit) }

@media (scripting: enabled) {
  .m-onglets--pills .m-onglets__panel:not([data-on]) { display: none }
  .m-onglets--soulignes .m-onglets__panel:not([data-on]) { display: none }
  .m-onglets--verticaux-numerotes .m-onglets__panel:not([data-on]) { display: none }
  .m-onglets--catalogue .m-onglets__panel:not([data-on]) { display: none }
}

/* changement de panneau des soulignés — componentDidUpdate d'Offre Agents IA v2.dc.html, posé par site.js (06 FR-3.1) */
@keyframes m-onglets-fade { from { opacity: 0 } }
@keyframes m-onglets-up { from { transform: translateY(14px) } }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .m-onglets--soulignes[data-switched] .m-onglets__panel[data-on] { animation: m-onglets-fade 300ms ease-out, m-onglets-up 300ms var(--m-courbe) }
}

@media (max-width: 959px) {
  .m-onglets--soulignes .m-onglets__panel-head { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-onglets--soulignes .m-onglets__grid { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-onglets--verticaux-numerotes .m-onglets__body { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-onglets--catalogue .m-onglets__body { grid-template-columns: minmax(0, 1fr); gap: 24px }
}

@media (max-width: 899px) {
  .m-onglets--pills .m-onglets__panel { grid-template-columns: minmax(0, 1fr) }
  .m-onglets--pills .m-onglets__grid { grid-template-columns: minmax(0, 1fr) }
}

/* M07 Texte et média — docs/specs/cms-socle/05_modules-m01-m12.md § M07. Styles calculés des blocs de maquette
   relevés dans docs/design-reference/cms-socle/maquettes-texte-media.html. */

/* sombre-deux-photos — Accueil Pyl.Tech.dc.html, section#equipe */
.m-texte-media--sombre-deux-photos { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(76px, 8vw, 108px) var(--l-marge) }
.m-texte-media--sombre-deux-photos .m-texte-media__columns { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center }
.m-texte-media--sombre-deux-photos .c-header__kicker { color: var(--c-jaune) }
/* Ton google redéclaré après la règle jaune, à égalité de spécificité : sans cela la règle de variante, qui porte deux
   classes, avale la règle commune du ton. Jeton SOMBRE — mesuré le 2026-09-20, 5,23 sur `--c-bleu-profond`, le bout
   clair de `--g-sombre`, quand `--c-bleu-google` y vaut 4,22 et `--c-bleu-google-texte` 2,63 (07 § Jaune et gris de TEXTE). */
.m-texte-media--sombre-deux-photos .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-texte-media--sombre-deux-photos .c-header__title { margin: 0 0 20px; max-width: 22ch; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: #FFFFFF }
.m-texte-media--sombre-deux-photos .m-texte-media__tagline { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: #FFFFFF }
.m-texte-media--sombre-deux-photos .m-texte-media__body { margin: 0 0 34px; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--c-bleu-gris) }
.m-texte-media--sombre-deux-photos .m-texte-media__body p { margin: 0 }
.m-texte-media--sombre-deux-photos .m-texte-media__body p + p { margin-top: 1em }
/* Le lien de ce corps est redéclaré ici parce que `base.css` est un contrat de fond CLAIR : sa règle
   `a` au repos peint `--c-bleu-nuit`, soit 1,22 sur `--c-bleu-profond`, le bout CLAIR de `--g-sombre`
   et le pire des deux, et 1,00 sur son bout foncé. Rien dans cette feuille ne le reprenait, alors que
   `body` est du texte riche et que la marque `link` y est admise — le validateur ne gate jamais les
   marques par profil. Le repos prend la couleur du corps lui-même, `--c-bleu-gris` à 6,14, la bordure
   basse jaune de `base.css` portant seule l'affordance ; le survol prend `--c-jaune-fonce` à 8,26. C'est
   le geste exact du lien de pied de page, à ceci près qu'il est ici sur un dégradé. Le jeton de TEXTE
   est interdit sur ce fond : il y tomberait à 2,83 (07 § Jaune et gris de TEXTE, 15 FR-8.4.7, mesuré le
   2026-09-20 au build 118). */
.m-texte-media--sombre-deux-photos .m-texte-media__body a { color: var(--c-bleu-gris) }
.m-texte-media--sombre-deux-photos .m-texte-media__body a:hover { color: var(--c-jaune-fonce) }
.m-texte-media--sombre-deux-photos .m-texte-media__button { display: flex }
.m-texte-media--sombre-deux-photos .m-texte-media__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.m-texte-media--sombre-deux-photos .m-texte-media__photo { border-radius: var(--r-carte); overflow: hidden }
.m-texte-media--sombre-deux-photos .m-texte-media__photo[data-parallax="down"] { margin-top: 36px }
.m-texte-media--sombre-deux-photos .m-texte-media__photo picture { display: block }
.m-texte-media--sombre-deux-photos .m-texte-media__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block }

/* clair-une-photo — Qui sommes-nous.dc.html, section#specialisation */
.m-texte-media--clair-une-photo { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-texte-media--clair-une-photo .m-texte-media__columns { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center }
.m-texte-media--clair-une-photo .c-header__title { margin: 0 0 24px; max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px) }
.m-texte-media--clair-une-photo .m-texte-media__body { max-width: 60ch; font-size: 18px; line-height: 1.7; color: var(--c-ardoise); text-wrap: pretty }
.m-texte-media--clair-une-photo .m-texte-media__body p { margin: 0 }
.m-texte-media--clair-une-photo .m-texte-media__body p + p { margin-top: 1em }
.m-texte-media--clair-une-photo .m-texte-media__link, .m-texte-media--clair-une-photo .m-texte-media__link:hover { margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: var(--r-pill); border: 1.5px solid var(--c-bleu-nuit); color: var(--c-bleu-nuit); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background 140ms ease-out, color 140ms ease-out }
.m-texte-media--clair-une-photo .m-texte-media__link:hover { background: var(--c-bleu-nuit); color: #FFFFFF }
.m-texte-media--clair-une-photo .m-texte-media__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-texte-media--clair-une-photo .m-texte-media__link:hover .m-texte-media__arrow { transform: translateX(7px) rotate(45deg) }
.m-texte-media--clair-une-photo .m-texte-media__photo { border-radius: var(--r-carte); overflow: hidden; box-shadow: var(--o-ombre) }
.m-texte-media--clair-une-photo .m-texte-media__photo picture { display: block }
.m-texte-media--clair-une-photo .m-texte-media__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }

/* texte-deux-colonnes — Nos partenaires.dc.html, haut de section#socle */
.m-texte-media--texte-deux-colonnes { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) 0 }
.m-texte-media--texte-deux-colonnes .m-texte-media__columns { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: start }
.m-texte-media--texte-deux-colonnes .c-header__kicker { grid-column: 1 / -1 }
.m-texte-media--texte-deux-colonnes .c-header__title { grid-column: 1; max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px) }
.m-texte-media--texte-deux-colonnes .c-header__intro { grid-column: 1 }
.m-texte-media--texte-deux-colonnes .m-texte-media__aside { grid-column: 2 }
.m-texte-media--texte-deux-colonnes .m-texte-media__lead { margin: 0 0 18px; max-width: 62ch; font-size: 18px; line-height: 1.7; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-texte-media--texte-deux-colonnes .m-texte-media__body { max-width: 62ch; font-size: 17px; line-height: 1.7; color: var(--c-ardoise); text-wrap: pretty }
.m-texte-media--texte-deux-colonnes .m-texte-media__body p { margin: 0 }
.m-texte-media--texte-deux-colonnes .m-texte-media__body p + p { margin-top: 1em }

/* encart-beige — Offre Agents IA - Onglets.dc.html, approche */
.m-texte-media--encart-beige { padding: 0 var(--l-marge) 96px }
.m-texte-media--encart-beige .m-texte-media__columns { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start }
.m-texte-media--encart-beige .c-header__title { margin: 0 0 20px; font-size: 36px; line-height: 1.15 }
.m-texte-media--encart-beige .m-texte-media__lead { margin: 0 0 18px; max-width: 52ch; font-size: 19px; line-height: 1.5; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-texte-media--encart-beige .m-texte-media__body { max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--c-ardoise); text-wrap: pretty }
.m-texte-media--encart-beige .m-texte-media__body p { margin: 0 }
.m-texte-media--encart-beige .m-texte-media__body p + p { margin-top: 1em }
.m-texte-media--encart-beige .m-texte-media__box { background: var(--c-beige); border-radius: var(--r-carte); padding: 32px }
.m-texte-media--encart-beige .m-texte-media__box-title { margin: 0 0 22px; font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.3 }
.m-texte-media--encart-beige .m-texte-media__points { display: flex; flex-direction: column; gap: 18px }
.m-texte-media--encart-beige .m-texte-media__point { display: flex; gap: 14px; align-items: flex-start }
.m-texte-media--encart-beige .m-texte-media__dot { flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-texte-media--encart-beige .m-texte-media__point p { margin: 0; font-size: 16px; line-height: 1.5 }
.m-texte-media--encart-beige .m-texte-media__point strong { font-weight: 600 }

@media (max-width: 959px) {
  .m-texte-media--sombre-deux-photos .m-texte-media__columns { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-texte-media--clair-une-photo .m-texte-media__columns { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-texte-media--texte-deux-colonnes .m-texte-media__columns { grid-template-columns: minmax(0, 1fr) }
  .m-texte-media--texte-deux-colonnes .m-texte-media__aside { grid-column: 1; margin-top: 32px }
}

@media (max-width: 899px) {
  .m-texte-media--encart-beige .m-texte-media__columns { grid-template-columns: minmax(0, 1fr) }
}

/* M06 Cas client en vedette — docs/specs/cms-socle/05_modules-m01-m12.md § M06. Styles calculés de la
   section #references relevés dans docs/design-reference/cms-socle/maquettes-cas-client.html. */

/* carte — Accueil Pyl.Tech.dc.html, section#references */
.m-cas-client-vedette--carte { padding: clamp(48px, 5vw, 68px) var(--l-marge) clamp(72px, 8vw, 104px) }
.m-cas-client-vedette--carte .m-cas-client-vedette__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-cas-client-vedette--carte .c-header__title { margin: 0 0 40px; max-width: 24ch; font-size: clamp(28px, 3.2vw, 40px) }
.m-cas-client-vedette--carte .m-cas-client-vedette__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: clamp(24px, 3vw, 40px) }
.m-cas-client-vedette--carte .m-cas-client-vedette__meta { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--c-gris-texte) }
.m-cas-client-vedette--carte .m-cas-client-vedette__title { margin: 0 0 18px; max-width: 26ch; font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.15; text-wrap: pretty }
.m-cas-client-vedette--carte .m-cas-client-vedette__summary { margin: 0 0 24px; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--c-ardoise) }
.m-cas-client-vedette--carte .m-cas-client-vedette__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.m-cas-client-vedette--carte .m-cas-client-vedette__pill { display: inline-flex; padding: 7px 16px; border-radius: var(--r-pill); background: var(--c-beige); font-size: 14px; font-weight: 600; white-space: nowrap }
.m-cas-client-vedette--carte .m-cas-client-vedette__image { border-radius: var(--r-photo); overflow: hidden }
.m-cas-client-vedette--carte .m-cas-client-vedette__image picture { display: block }
.m-cas-client-vedette--carte .m-cas-client-vedette__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }

@media (max-width: 959px) {
  .m-cas-client-vedette--carte .m-cas-client-vedette__card { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* M13 Équipe — docs/specs/cms-socle/06_modules-m13-m23.md § M13. Styles calculés de la section de maquette relevés dans
   docs/design-reference/cms-socle/maquettes-equipe-temoignages.html. */

/* cartes-3 — Qui sommes-nous.dc.html, section#fondateurs */
.m-equipe--cartes-3 { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-equipe--cartes-3 .m-equipe__content { max-width: var(--l-contenu); margin: 0 auto }
.m-equipe--cartes-3 .c-header__kicker { margin: 0 0 18px }
.m-equipe--cartes-3 .c-header__title { max-width: 24ch; margin: 0 0 clamp(36px, 4vw, 56px); font-size: clamp(28px, 3.2vw, 42px) }
.m-equipe--cartes-3 .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-equipe--cartes-3 .c-header__intro { margin: 0 0 clamp(36px, 4vw, 56px); max-width: 64ch; line-height: 1.55 }
.m-equipe--cartes-3 .m-equipe__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px }
.m-equipe--cartes-3 .m-equipe__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre) }
.m-equipe--cartes-3 .m-equipe__portrait { overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-bleu-nuit) }
.m-equipe--cartes-3 .m-equipe__portrait picture { display: block; height: 100% }
.m-equipe--cartes-3 .m-equipe__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block }
.m-equipe--cartes-3 .m-equipe__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.8vw, 24px); flex: 1 1 auto }
.m-equipe--cartes-3 .m-equipe__name { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; line-height: 1.2 }
/* Charte du marketing du 2026-09-24 : aucun texte jaune sur fond clair ; le jaune sert en fond. */
.m-equipe--cartes-3 .m-equipe__role { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-beige); font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-equipe--cartes-3 .m-equipe__bio { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--c-ardoise); text-wrap: pretty }
.m-equipe--cartes-3 .m-equipe__quote { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--c-bordure); font-size: 15px; line-height: 1.55; font-style: italic; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-equipe--cartes-3 .m-equipe__linkedin { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; border-bottom: none; font-size: 14px; font-weight: 400; font-style: italic; color: var(--c-gris-texte); transition: color 140ms ease-out }
.m-equipe--cartes-3 .m-equipe__linkedin:hover { color: var(--c-bleu-nuit) }
.m-equipe--cartes-3 .m-equipe__linkedin-icon { flex: none; display: block; width: 20px; height: 20px }

@media (max-width: 959px) {
  .m-equipe--cartes-3 .m-equipe__grid { grid-template-columns: minmax(0, 1fr) }
}

/* M09 Formulaire HubSpot — docs/specs/cms-socle/05_modules-m01-m12.md § M09. Styles calculés des sections de maquette
   relevés dans docs/design-reference/cms-socle/maquettes-formulaire.html ; l'iframe HubSpot est exemptée de la conformité
   au pixel, le cadre qui l'entoure y reste soumis. */

/* sombre-coordonnees — Accueil Pyl.Tech.dc.html, section#contact */
.m-formulaire-hubspot--sombre-coordonnees { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(72px, 8vw, 108px) var(--l-marge) }
.m-formulaire-hubspot--sombre-coordonnees .c-watermark { bottom: -18%; right: -80px; height: min(120%, 440px); opacity: .1 }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__columns { position: relative; max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center }
.m-formulaire-hubspot--sombre-coordonnees .c-header__kicker { margin: 0 0 20px; color: var(--c-jaune) }
/* Ton google redéclaré après la règle jaune, à égalité de spécificité : sans cela la règle de variante, qui porte deux
   classes, avale la règle commune du ton. Jeton SOMBRE — mesuré le 2026-09-20, 5,23 sur `--c-bleu-profond`, le bout
   clair de `--g-sombre`, quand `--c-bleu-google` y vaut 4,22 et `--c-bleu-google-texte` 2,63 (07 § Jaune et gris de TEXTE). */
.m-formulaire-hubspot--sombre-coordonnees .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-formulaire-hubspot--sombre-coordonnees .c-header__title { max-width: 22ch; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.015em; color: #FFFFFF }
.m-formulaire-hubspot--sombre-coordonnees .c-highlight { color: var(--c-jaune) }
.m-formulaire-hubspot--sombre-coordonnees .c-header__intro { margin: 22px 0 28px; max-width: 48ch; font-size: 18px; line-height: 1.55; color: var(--c-bleu-gris) }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__details { display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #FFFFFF }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__email { margin: 0 }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__address { margin: 0; color: var(--c-bleu-gris) }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__card { background: #FFFFFF; border-radius: var(--r-carte); padding: 26px; display: flex; flex-direction: column; gap: 14px }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__inert { display: grid; place-items: center; min-height: 260px; border: 1px dashed var(--c-bordure); border-radius: var(--r-carte); background: var(--c-blanc-casse); margin: 0; padding: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }
.m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__mailto { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }

/* carte — Contact.dc.html, section#formulaire, élément form sous la carte hero/carte-contact */
.m-formulaire-hubspot--carte .m-formulaire-hubspot__card { display: flex; flex-direction: column; gap: 18px; background: #FFFFFF; border-radius: 0 0 20px 20px; border: 1px solid var(--c-bordure); border-top: none; padding: clamp(28px, 3vw, 40px); box-shadow: var(--o-ombre) }
.m-formulaire-hubspot--carte .m-formulaire-hubspot__inert { display: grid; place-items: center; min-height: 260px; border: 1px dashed var(--c-bordure); border-radius: var(--r-carte); background: var(--c-blanc-casse); margin: 0; padding: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }
.m-formulaire-hubspot--carte .m-formulaire-hubspot__mailto { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }

@media (max-width: 959px) {
  .m-formulaire-hubspot--sombre-coordonnees .m-formulaire-hubspot__columns { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* M04 Liste d'offres — docs/specs/cms-socle/05_modules-m01-m12.md § M04. Styles calculés du bas de la
   section #offres relevés dans docs/design-reference/cms-socle/maquettes-offres.html. */

/* lignes-2-colonnes — Accueil Pyl.Tech.dc.html, section#offres sous la carte a#gemini */
.m-liste-offres--lignes-2-colonnes { padding: 0 var(--l-marge) clamp(64px, 7vw, 96px) }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px) }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__row, .m-liste-offres--lignes-2-colonnes .m-liste-offres__row:hover { display: flex; align-items: flex-start; gap: 20px; border-bottom: none; color: var(--c-bleu-nuit); padding: 26px 20px 26px 0; border-top: 1px solid var(--c-jaune); border-radius: 16px; transition: background 160ms ease-out, padding-left 160ms ease-out }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__row:hover { background: #FFFFFF; padding-left: 20px }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__icon { flex: none; display: flex; padding-top: 2px }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__icon img { width: 28px; height: 28px; display: block }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0 }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__name { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.25 }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__summary { font-size: 16px; line-height: 1.5; color: var(--c-ardoise) }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-liste-offres--lignes-2-colonnes .m-liste-offres__row:hover .m-liste-offres__arrow { transform: translateX(7px) rotate(45deg) }

@media (max-width: 959px) {
  .m-liste-offres--lignes-2-colonnes .m-liste-offres__rows { grid-template-columns: minmax(0, 1fr) }
}

/* M08 Liste de pages — docs/specs/cms-socle/05_modules-m01-m12.md § M08. Styles calculés des sections de maquette
   relevés dans docs/design-reference/cms-socle/maquettes-listes.html, survols déclarés dans la logique des maquettes. */

/* cartes-3 — Accueil Pyl.Tech.dc.html, section#actualites */
.m-liste-pages--cartes-3 { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-liste-pages--cartes-3 .m-liste-pages__content { max-width: var(--l-contenu); margin: 0 auto }
.m-liste-pages--cartes-3 .c-header__title { margin: 0 0 40px; max-width: 24ch; font-size: clamp(28px, 3.2vw, 40px) }
.m-liste-pages--cartes-3 .m-liste-pages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px }
.m-liste-pages--cartes-3 .m-liste-pages__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-bottom: none; color: var(--c-bleu-nuit); background: var(--c-blanc-casse); border-radius: var(--r-carte); box-shadow: var(--o-ombre) }
.m-liste-pages--cartes-3 .m-liste-pages__card:hover { filter: brightness(.985) }
.m-liste-pages--cartes-3 .m-liste-pages__card picture { display: block }
.m-liste-pages--cartes-3 .m-liste-pages__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
.m-liste-pages--cartes-3 .m-liste-pages__flat { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--c-bordure) }
.m-liste-pages--cartes-3 .m-liste-pages__body { display: flex; flex-direction: column; gap: 12px; padding: 26px }
.m-liste-pages--cartes-3 .m-liste-pages__meta { font-size: 14px; font-weight: 600; color: var(--c-jaune-texte) }
.m-liste-pages--cartes-3 .m-liste-pages__title { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.25 }
.m-liste-pages--cartes-3 .m-liste-pages__summary { font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-liste-pages--cartes-3 .m-liste-pages__empty { display: grid; place-items: center; min-height: 260px; margin: 0; padding: 28px; border-radius: var(--r-carte); border: 1px dashed var(--c-bordure); background: var(--c-blanc-casse) }
.m-liste-pages--cartes-3 .m-liste-pages__empty span { max-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }

/* cartes-type — Actualités.dc.html, section#cas-clients (fond de page) et section#articles (fond blanc) */
.m-liste-pages--cartes-type { padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-liste-pages--cartes-type[data-white] { background: #FFFFFF }
.m-liste-pages--cartes-type .m-liste-pages__content { max-width: var(--l-contenu); margin: 0 auto }
.m-liste-pages--cartes-type .c-header__kicker { margin: 0 0 16px }
.m-liste-pages--cartes-type .c-header__title { margin: 0 0 14px; max-width: 24ch; font-size: clamp(28px, 3.2vw, 42px) }
.m-liste-pages--cartes-type .c-header__intro { margin: 0 0 clamp(28px, 3vw, 40px); max-width: 62ch }
.m-liste-pages--cartes-type .m-liste-pages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px }
.m-liste-pages--cartes-type .m-liste-pages__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #FFFFFF; border-radius: var(--r-carte); border-bottom: none; color: var(--c-bleu-nuit); box-shadow: var(--o-ombre); transition: transform 180ms ease-out, box-shadow 180ms ease-out }
.m-liste-pages--cartes-type .m-liste-pages__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12); color: var(--c-jaune-texte) }
.m-liste-pages--cartes-type .m-liste-pages__card picture { display: block }
.m-liste-pages--cartes-type .m-liste-pages__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
.m-liste-pages--cartes-type .m-liste-pages__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 26px); flex: 1 1 auto }
.m-liste-pages--cartes-type .m-liste-pages__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.m-liste-pages--cartes-type .m-liste-pages__pill { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: #E8EDF6; font-size: 13px; font-weight: 600 }
.m-liste-pages--cartes-type .m-liste-pages__pill--cas-client { background: #FFEFCC }
.m-liste-pages--cartes-type .m-liste-pages__pill--article { background: #DDE8FC }
.m-liste-pages--cartes-type .m-liste-pages__date { font-size: 14px; font-weight: 600; color: var(--c-jaune-texte) }
.m-liste-pages--cartes-type .m-liste-pages__title { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 1.9vw, 22px); font-weight: 600; line-height: 1.25 }
.m-liste-pages--cartes-type .m-liste-pages__summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-liste-pages--cartes-type .m-liste-pages__bottom { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--c-gris-texte) }
.m-liste-pages--cartes-type .m-liste-pages__empty { display: grid; place-items: center; min-height: 260px; margin: 0; padding: 28px; border-radius: var(--r-carte); border: 1px dashed var(--c-bordure); background: var(--c-blanc-casse) }
.m-liste-pages--cartes-type .m-liste-pages__empty span { max-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }
.m-liste-pages--cartes-type .m-liste-pages__pagination { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px }
.m-liste-pages--cartes-type .m-liste-pages__page { display: inline-flex; align-items: center; gap: 10px; border-bottom: none; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-liste-pages--cartes-type .m-liste-pages__arrow { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-liste-pages--cartes-type .m-liste-pages__page:hover .m-liste-pages__arrow { transform: translateX(7px) rotate(45deg) }
.m-liste-pages--cartes-type .m-liste-pages__page--previous .m-liste-pages__arrow { transform: rotate(-135deg) }
.m-liste-pages--cartes-type .m-liste-pages__page--previous:hover .m-liste-pages__arrow { transform: translateX(-7px) rotate(-135deg) }

/* carrousel-evenements — Actualités.dc.html, section#evenements */
.m-liste-pages--carrousel-evenements { background: #FFFFFF; padding: clamp(64px, 7vw, 96px) 0 }
.m-liste-pages--carrousel-evenements .m-liste-pages__head { max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto clamp(28px, 3vw, 44px); padding: 0 var(--l-marge); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: end }
.m-liste-pages--carrousel-evenements .c-header__kicker { grid-column: 1 / -1; grid-row: 1; margin: 0 0 16px }
.m-liste-pages--carrousel-evenements .c-header__title { grid-column: 1; grid-row: 2; max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px) }
.m-liste-pages--carrousel-evenements .c-header__intro { grid-column: 1 / -1; grid-row: 3 }
.m-liste-pages--carrousel-evenements .m-liste-pages__arrows { grid-column: 2; grid-row: 2; display: flex; gap: 12px }
.m-liste-pages--carrousel-evenements .m-liste-pages__arrow-button { appearance: none; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: var(--r-pill); background: #FFFFFF; border: 1.5px solid var(--c-bordure); transition: background 140ms ease-out, border-color 140ms ease-out }
.m-liste-pages--carrousel-evenements .m-liste-pages__arrow-button:hover { background: var(--c-blanc-casse); border-color: var(--c-bleu-nuit) }
.m-liste-pages--carrousel-evenements .m-liste-pages__chevron { display: block; width: 9px; height: 9px; margin-right: 3px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg) }
.m-liste-pages--carrousel-evenements .m-liste-pages__chevron--previous { margin: 0 0 0 3px; transform: rotate(-135deg) }
.m-liste-pages--carrousel-evenements .m-liste-pages__track { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto; padding: 4px var(--l-marge) 8px }
.m-liste-pages--carrousel-evenements .m-liste-pages__track::-webkit-scrollbar { display: none }
.m-liste-pages--carrousel-evenements .m-liste-pages__card { flex: 0 0 auto; width: min(88vw, 380px); display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border-radius: var(--r-carte); border: 1px solid var(--c-bordure); box-shadow: var(--o-ombre); transition: transform 180ms ease-out, box-shadow 180ms ease-out }
.m-liste-pages--carrousel-evenements .m-liste-pages__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12) }
.m-liste-pages--carrousel-evenements .m-liste-pages__card picture { display: block }
.m-liste-pages--carrousel-evenements .m-liste-pages__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
.m-liste-pages--carrousel-evenements .m-liste-pages__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 26px); flex: 1 1 auto }
.m-liste-pages--carrousel-evenements .m-liste-pages__meta { font-size: 14px; font-weight: 600; color: var(--c-jaune-texte) }
.m-liste-pages--carrousel-evenements .m-liste-pages__title { margin: 0; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.25 }
.m-liste-pages--carrousel-evenements .m-liste-pages__summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-liste-pages--carrousel-evenements .m-liste-pages__register { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; border-bottom: none; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-liste-pages--carrousel-evenements .m-liste-pages__arrow { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-liste-pages--carrousel-evenements .m-liste-pages__register:hover .m-liste-pages__arrow { transform: translateX(7px) rotate(45deg) }
.m-liste-pages--carrousel-evenements .m-liste-pages__empty { flex: 0 0 auto; width: min(88vw, 380px); display: grid; place-items: center; min-height: 260px; margin: 0; padding: 28px; border-radius: var(--r-carte); border: 1px dashed var(--c-bordure); background: var(--c-blanc-casse) }
.m-liste-pages--carrousel-evenements .m-liste-pages__empty span { max-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }

/* lignes — Actualités.dc.html, section#passes */
.m-liste-pages--lignes { border-top: 1px solid var(--c-bordure); padding: clamp(48px, 5.5vw, 76px) var(--l-marge) }
.m-liste-pages--lignes .m-liste-pages__content { max-width: var(--l-contenu); margin: 0 auto }
.m-liste-pages--lignes .m-liste-pages__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; margin-bottom: clamp(20px, 2.4vw, 30px) }
.m-liste-pages--lignes .c-header__kicker { grid-column: 1; grid-row: 1; margin: 0 0 12px }
.m-liste-pages--lignes .c-header__title { grid-column: 1; grid-row: 2; max-width: 24ch; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15 }
.m-liste-pages--lignes .c-header__intro { grid-column: 2; grid-row: 1 / span 2; max-width: 44ch; font-size: 16px; line-height: 1.55 }
.m-liste-pages--lignes .m-liste-pages__rows { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: var(--r-carte); overflow: hidden }
.m-liste-pages--lignes .m-liste-pages__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 10px; gap: 20px; align-items: center; padding: 20px clamp(18px, 2vw, 26px); border-bottom: 1px solid #EDF1F8; color: var(--c-bleu-nuit); transition: background 160ms ease-out }
.m-liste-pages--lignes .m-liste-pages__row:last-child { border-bottom: none }
.m-liste-pages--lignes .m-liste-pages__row:hover { background: var(--c-fond-citation) }
.m-liste-pages--lignes .m-liste-pages__period { font-size: 14px; font-weight: 600; color: var(--c-jaune-texte) }
.m-liste-pages--lignes .m-liste-pages__title { font-family: var(--f-display); font-size: clamp(17px, 1.7vw, 19px); font-weight: 600; line-height: 1.3 }
.m-liste-pages--lignes .m-liste-pages__pill { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: #E8EDF6; font-size: 13px; font-weight: 600; color: var(--c-ardoise) }
.m-liste-pages--lignes .m-liste-pages__arrow { grid-column: 4; flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune-fonce); border-right: 2px solid var(--c-jaune-fonce); transform: rotate(45deg); transition: transform 220ms var(--m-courbe) }
.m-liste-pages--lignes .m-liste-pages__row:hover .m-liste-pages__arrow { transform: translateX(7px) rotate(45deg) }
.m-liste-pages--lignes .m-liste-pages__empty { display: grid; place-items: center; min-height: 260px; margin: 0; padding: 28px; border-radius: var(--r-carte); border: 1px dashed var(--c-bordure); background: var(--c-blanc-casse) }
.m-liste-pages--lignes .m-liste-pages__empty span { max-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }
.m-liste-pages--lignes .m-liste-pages__pagination { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px }
.m-liste-pages--lignes .m-liste-pages__page { display: inline-flex; align-items: center; gap: 10px; border-bottom: none; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-liste-pages--lignes .m-liste-pages__page:hover .m-liste-pages__arrow { transform: translateX(7px) rotate(45deg) }
.m-liste-pages--lignes .m-liste-pages__page--previous .m-liste-pages__arrow { transform: rotate(-135deg) }
.m-liste-pages--lignes .m-liste-pages__page--previous:hover .m-liste-pages__arrow { transform: translateX(-7px) rotate(-135deg) }

/* carrousel-a-lire — Article - Expedition Ivarus.dc.html, 3e section */
.m-liste-pages--carrousel-a-lire { border-top: 1px solid var(--c-bordure); padding: clamp(56px, 6vw, 84px) 0 }
.m-liste-pages--carrousel-a-lire .m-liste-pages__head { max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto clamp(24px, 3vw, 36px); padding: 0 var(--l-marge); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end }
.m-liste-pages--carrousel-a-lire .c-header__kicker { grid-column: 1; margin: 0 0 12px }
.m-liste-pages--carrousel-a-lire .c-header__title { grid-column: 1; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15 }
.m-liste-pages--carrousel-a-lire .c-header__intro { grid-column: 1 }
.m-liste-pages--carrousel-a-lire .m-liste-pages__arrows { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 12px }
.m-liste-pages--carrousel-a-lire .m-liste-pages__arrow-button { appearance: none; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: var(--r-pill); background: #FFFFFF; border: 1.5px solid var(--c-bordure) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__arrow-button:hover { background: var(--c-blanc-casse); border-color: var(--c-bleu-nuit) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__chevron { display: block; width: 9px; height: 9px; margin-right: 3px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__chevron--previous { margin: 0 0 0 3px; transform: rotate(-135deg) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__track { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto; padding: 4px var(--l-marge) 8px }
.m-liste-pages--carrousel-a-lire .m-liste-pages__track::-webkit-scrollbar { display: none }
.m-liste-pages--carrousel-a-lire .m-liste-pages__card { flex: 0 0 auto; width: min(86vw, 340px); display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: var(--r-carte); box-shadow: var(--o-ombre); color: var(--c-bleu-nuit) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__card picture { display: block }
.m-liste-pages--carrousel-a-lire .m-liste-pages__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
.m-liste-pages--carrousel-a-lire .m-liste-pages__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 24px); flex: 1 1 auto }
.m-liste-pages--carrousel-a-lire .m-liste-pages__pill { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: #E8EDF6; font-size: 13px; font-weight: 600 }
.m-liste-pages--carrousel-a-lire .m-liste-pages__pill--cas-client { background: #FFEFCC }
.m-liste-pages--carrousel-a-lire .m-liste-pages__pill--article { background: #DDE8FC }
.m-liste-pages--carrousel-a-lire .m-liste-pages__title { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.25 }
.m-liste-pages--carrousel-a-lire .m-liste-pages__summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-liste-pages--carrousel-a-lire .m-liste-pages__bottom { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--c-gris-texte) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__empty { flex: 0 0 auto; width: min(86vw, 340px); display: grid; place-items: center; min-height: 260px; margin: 0; padding: 28px; border-radius: var(--r-carte); border: 1px dashed var(--c-bordure); background: var(--c-blanc-casse) }
.m-liste-pages--carrousel-a-lire .m-liste-pages__empty span { max-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--c-gris-texte); text-align: center }

@media (max-width: 959px) {
  .m-liste-pages--cartes-3 .m-liste-pages__grid { grid-template-columns: minmax(0, 1fr) }
  .m-liste-pages--cartes-type .m-liste-pages__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto }
  .m-liste-pages--carrousel-evenements .m-liste-pages__head { grid-template-columns: minmax(0, 1fr) }
  .m-liste-pages--carrousel-evenements .m-liste-pages__arrows { display: none }
}

@media (max-width: 899px) {
  .m-liste-pages--carrousel-a-lire .m-liste-pages__head { grid-template-columns: minmax(0, 1fr) }
  .m-liste-pages--carrousel-a-lire .m-liste-pages__arrows { display: none }
}

@media (max-width: 767px) {
  .m-liste-pages--lignes .m-liste-pages__head { grid-template-columns: minmax(0, 1fr) }
  .m-liste-pages--lignes .c-header__intro { grid-column: 1; grid-row: 3; margin-top: 24px }
  .m-liste-pages--lignes .m-liste-pages__row { grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start }
  .m-liste-pages--lignes .m-liste-pages__arrow { grid-column: auto }
}

/* M03 Offre en vedette — docs/specs/cms-socle/05_modules-m01-m12.md § M03. Styles calculés du haut de la
   section #offres relevés dans docs/design-reference/cms-socle/maquettes-offres.html. */

/* jaune — Accueil Pyl.Tech.dc.html, section#offres jusqu'à la carte a#gemini */
.m-offre-vedette--jaune { padding: clamp(72px, 8vw, 108px) var(--l-marge) 0 }
.m-offre-vedette--jaune .m-offre-vedette__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-offre-vedette--jaune .c-header__title { margin: 0 0 40px; max-width: 26ch; font-size: clamp(30px, 3.4vw, 44px) }
.m-offre-vedette--jaune .m-offre-vedette__card, .m-offre-vedette--jaune .m-offre-vedette__card:hover { display: block; border-bottom: none; color: var(--c-bleu-nuit); background: var(--c-jaune); border-radius: var(--r-carte); padding: clamp(28px, 3.4vw, 44px); transition: filter 140ms ease-out }
.m-offre-vedette--jaune .m-offre-vedette__card:hover { filter: brightness(.97) }
.m-offre-vedette--jaune .m-offre-vedette__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 4vw, 56px); align-items: center }
.m-offre-vedette--jaune .m-offre-vedette__pill { margin: 0 0 20px; display: inline-flex; align-items: center; background: #FFFFFF; border-radius: var(--r-pill); padding: 14px 26px }
.m-offre-vedette--jaune .m-offre-vedette__pill img { height: clamp(26px, 2.8vw, 34px); width: auto; display: block }
.m-offre-vedette--jaune .m-offre-vedette__title { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.3 }
.m-offre-vedette--jaune .m-offre-vedette__text { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6 }
.m-offre-vedette--jaune .m-offre-vedette__button { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: var(--r-pill); background: var(--c-bleu-nuit); color: #FFFFFF; font-family: var(--f-display); font-size: 16px; font-weight: 600; white-space: nowrap }
.m-offre-vedette--jaune .m-offre-vedette__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-jaune); border-right: 2px solid var(--c-jaune); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-offre-vedette--jaune .m-offre-vedette__card:hover .m-offre-vedette__arrow { transform: translateX(7px) rotate(45deg) }

@media (max-width: 959px) {
  .m-offre-vedette--jaune .m-offre-vedette__grid { grid-template-columns: minmax(0, 1fr); gap: 32px }
}

/* M05 Badges Google Cloud — docs/specs/cms-socle/05_modules-m01-m12.md § M05. Styles calculés des blocs de
   maquette relevés dans docs/design-reference/cms-socle/maquettes-badges.html. */

/* grille-6 — Accueil Pyl.Tech.dc.html, section#google */
.m-badges--grille-6 { padding: 0 var(--l-marge) 96px }
.m-badges--grille-6 .m-badges__card { max-width: var(--l-contenu); margin: 0 auto; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 52px clamp(24px, 3vw, 56px) }
.m-badges--grille-6 .m-badges__columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center }
.m-badges--grille-6 .c-header__title { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.15 }
.m-badges--grille-6 .c-header__intro { margin: 0 0 26px; font-size: 16px }
.m-badges--grille-6 .m-badges__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.m-badges--grille-6 .m-badges__grid img { width: 100%; height: auto; display: block }

/* rangee — Offre Agents IA - Onglets.dc.html, bloc partenariat */
.m-badges--rangee { padding: 0 var(--l-marge) 96px }
.m-badges--rangee .m-badges__card { max-width: var(--l-contenu); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: center; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: 36px clamp(24px, 3vw, 44px) }
.m-badges--rangee .m-badges__text { margin: 0; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.3; text-wrap: pretty }
.m-badges--rangee .m-badges__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap }
.m-badges--rangee .m-badges__row img { width: 112px; height: auto; display: block }

/* niveaux — Nos partenaires.dc.html, section#socle, tuiles de niveau */
.m-badges--niveaux { background: #FFFFFF; padding: clamp(40px, 4.5vw, 64px) var(--l-marge) 0 }
.m-badges--niveaux .m-badges__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-badges--niveaux .m-badges__label { margin: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-badges--niveaux .m-badges__tiers { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 24px) }
.m-badges--niveaux .m-badges__tier { flex: 1 1 320px; display: flex; align-items: center; gap: clamp(18px, 2vw, 26px); background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); border-radius: var(--r-carte); padding: clamp(18px, 2vw, 26px) }
.m-badges--niveaux .m-badges__tier picture { display: block; width: 100%; max-width: 190px }
.m-badges--niveaux .m-badges__tier img { width: 100%; height: auto; display: block }
.m-badges--niveaux .m-badges__title { margin: 0 0 6px; font-family: var(--f-display); font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; line-height: 1.25 }
.m-badges--niveaux .m-badges__description { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--c-ardoise); text-wrap: pretty }

/* competences — Nos partenaires.dc.html, section#socle, tuiles de compétence à retourner */
.m-badges--competences { background: #FFFFFF; padding: clamp(36px, 4vw, 56px) var(--l-marge) 0 }
.m-badges--competences .m-badges__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-badges--competences .m-badges__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px }
.m-badges--competences .m-badges__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-badges--competences .m-badges__hint { margin: 0; font-size: 14px; color: var(--c-gris-texte) }
.m-badges--competences .m-badges__comps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px) }
.m-badges--competences .m-badges__flip { display: block; width: 100%; height: clamp(180px, 15vw, 210px); margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; perspective: 1200px }
.m-badges--competences .m-badges__flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 620ms var(--m-courbe) }
.m-badges--competences .m-badges__front, .m-badges--competences .m-badges__back { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 220ms ease-out 0ms }
.m-badges--competences .m-badges__front { align-items: center; justify-content: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: 18px; padding: 14px; overflow: hidden; opacity: 1; transition-delay: 260ms }
.m-badges--competences .m-badges__front picture { display: block; width: 100%; height: 100% }
.m-badges--competences .m-badges__front img { width: 100%; height: 100%; max-width: none; object-fit: contain; display: block }
.m-badges--competences .m-badges__back { gap: 10px; justify-content: center; transform: rotateY(180deg); background: var(--g-sombre); border-radius: 18px; padding: clamp(18px, 1.8vw, 24px); opacity: 0 }
.m-badges--competences .m-badges__flip[aria-pressed="true"] .m-badges__flip-inner { transform: rotateY(180deg) }
.m-badges--competences .m-badges__flip[aria-pressed="true"] .m-badges__front { opacity: 0; transition-delay: 0ms }
.m-badges--competences .m-badges__flip[aria-pressed="true"] .m-badges__back { opacity: 1; transition-delay: 260ms }
.m-badges--competences .m-badges__title { font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--c-jaune) }
.m-badges--competences .m-badges__description { font-size: 15px; line-height: 1.5; color: #FFFFFF; text-wrap: pretty }

@media (max-width: 959px) {
  .m-badges--grille-6 .m-badges__columns { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-badges--niveaux .m-badges__tier { flex: 1 1 100% }
  .m-badges--competences .m-badges__comps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 899px) {
  .m-badges--rangee .m-badges__card { grid-template-columns: minmax(0, 1fr) }
}

/* Coordonnées et bureaux — docs/specs/cms-socle/06_modules-m13-m23.md § M22.
   Relevé : docs/design-reference/cms-socle/maquettes-listes-coordonnees.html (Contact, bloc sous le formulaire et #bureaux) ;
   la zone googlemapsembed reçoit l'iframe ou le bloc d'activation de tarteaucitron (07 FR-15). */

/* liens-carte — Contact.dc.html#formulaire, bloc sous le formulaire ; sans adresse, les cartes s'empilent sur toute la largeur */
.m-coordonnees--liens-carte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px }
.m-coordonnees--liens-carte:has(> .m-coordonnees__address):has(> .m-coordonnees__cards) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) }
/* Le surtitre et le lien de l'ADRESSE gardent leurs littéraux : la règle ci-dessous déclare
   background: var(--c-bleu-nuit), où #8F9BB3 est déjà à 6,57 et où var(--c-gris-texte) le ferait TOMBER à 3,59 ;
   le lien y vaut 12,01 au repos et 10,10 au survol, quand var(--c-jaune-texte) y tomberait à 3,46. Les deux jetons
   de texte sont réservés au fond CLAIR (07 § Jaune et gris de TEXTE). Le surtitre de CARTE, lui, est sur le #FFFFFF
   que la carte déclare plus bas : il prend son jeton (1,82 -> 5,31). Mesuré le 2026-09-20, build 114. */
.m-coordonnees--liens-carte .m-coordonnees__address { display: flex; flex-direction: column; background: var(--c-bleu-nuit); color: #FFFFFF; border-radius: var(--r-carte); padding: clamp(22px, 2.4vw, 30px) }
.m-coordonnees--liens-carte .m-coordonnees__kicker { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #8F9BB3 }
.m-coordonnees--liens-carte .m-coordonnees__street { margin: 0 0 6px; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.25 }
.m-coordonnees--liens-carte .m-coordonnees__locality { margin: 0; font-size: 16px; color: #E2E8F0 }
.m-coordonnees--liens-carte .m-coordonnees__map { margin-top: 20px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07) }
.m-coordonnees--liens-carte .m-coordonnees__map iframe { display: block; width: 100%; height: 230px; border: 0 }
.m-coordonnees--liens-carte .m-coordonnees__map-link { align-self: flex-start; margin-top: 14px; border-bottom: none; font-size: 15px; font-weight: 600; color: var(--c-jaune) }
.m-coordonnees--liens-carte .m-coordonnees__map-link:hover { color: var(--c-jaune-fonce) }
.m-coordonnees--liens-carte .m-coordonnees__address:has(iframe) .m-coordonnees__map-link { display: none }
.m-coordonnees--liens-carte .m-coordonnees__cards { display: flex; flex-direction: column; gap: 18px }
.m-coordonnees--liens-carte .m-coordonnees__card { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 auto; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: var(--r-carte); padding: clamp(20px, 2.2vw, 26px); color: var(--c-bleu-nuit); transition: transform 160ms ease-out, box-shadow 160ms ease-out }
.m-coordonnees--liens-carte .m-coordonnees__card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12); color: var(--c-bleu-nuit) }
.m-coordonnees--liens-carte .m-coordonnees__icon { flex: none; display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 10px }
.m-coordonnees--liens-carte .m-coordonnees__icon picture { display: block; height: 100% }
.m-coordonnees--liens-carte .m-coordonnees__icon img { display: block; width: 100%; height: 100%; object-fit: cover }
.m-coordonnees--liens-carte .m-coordonnees__card-body { display: flex; flex-direction: column; gap: 5px }
.m-coordonnees--liens-carte .m-coordonnees__card-kicker { font-size: 13px; font-weight: 600; color: var(--c-jaune-texte) }
.m-coordonnees--liens-carte .m-coordonnees__card-title { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.25 }
.m-coordonnees--liens-carte .m-coordonnees__card-text { font-size: 15px; line-height: 1.5; color: var(--c-ardoise) }

/* bureaux — Contact.dc.html#bureaux ; un bureau lié reprend le survol des cartes liens */
.m-coordonnees--bureaux { background: #FFFFFF; border-top: 1px solid var(--c-bordure); padding: clamp(56px, 6vw, 88px) var(--l-marge) }
.m-coordonnees--bureaux .m-coordonnees__content { max-width: var(--l-contenu); margin: 0 auto }
.m-coordonnees--bureaux .c-header__kicker { margin: 0 0 14px }
.m-coordonnees--bureaux .c-header__title { max-width: 24ch; margin: 0 0 clamp(28px, 3vw, 40px); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15 }
.m-coordonnees--bureaux .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-coordonnees--bureaux .c-header__intro { margin: 0 0 clamp(28px, 3vw, 40px); max-width: 64ch; line-height: 1.55 }
.m-coordonnees--bureaux .m-coordonnees__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.m-coordonnees--bureaux .m-coordonnees__office { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: var(--r-carte); color: var(--c-bleu-nuit) }
.m-coordonnees--bureaux a.m-coordonnees__office { transition: transform 160ms ease-out, box-shadow 160ms ease-out }
.m-coordonnees--bureaux a.m-coordonnees__office:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12); color: var(--c-bleu-nuit) }
.m-coordonnees--bureaux .m-coordonnees__office-map { aspect-ratio: 16 / 9; overflow: hidden }
.m-coordonnees--bureaux .m-coordonnees__office-map picture { display: block; height: 100% }
.m-coordonnees--bureaux .m-coordonnees__office-map img { display: block; width: 100%; height: 100%; object-fit: cover }
.m-coordonnees--bureaux .m-coordonnees__office-body { padding: clamp(18px, 2vw, 24px) }
.m-coordonnees--bureaux .m-coordonnees__city { margin: 0 0 6px; font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.2 }
.m-coordonnees--bureaux .m-coordonnees__office-address { margin: 0; font-size: 15px; color: var(--c-ardoise) }

@media (max-width: 959px) {
  .m-coordonnees--liens-carte:has(> .m-coordonnees__address):has(> .m-coordonnees__cards) { grid-template-columns: minmax(0, 1fr) }
  .m-coordonnees--bureaux .m-coordonnees__offices { grid-template-columns: minmax(0, 1fr) }
}

/* Galerie photos — docs/specs/cms-socle/06_modules-m13-m23.md § M18.
   Relevé : docs/design-reference/cms-socle/maquettes-corps-galerie.html (fin de #socle de Nos partenaires). */

/* grille-4 — Nos partenaires.dc.html#socle, libellé, lien et photos */
.m-galerie--grille-4 { background: #FFFFFF; padding: clamp(48px, 5vw, 72px) var(--l-marge) clamp(72px, 8vw, 104px) }
.m-galerie--grille-4 .m-galerie__content { max-width: var(--l-contenu); margin: 0 auto }
.m-galerie--grille-4 .m-galerie__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px }
.m-galerie--grille-4 .m-galerie__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gris-texte) }
.m-galerie--grille-4 .m-galerie__link { display: inline-flex; align-items: center; gap: 10px; border-bottom: none; font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit); transition: color 140ms ease-out }
.m-galerie--grille-4 .m-galerie__link:hover { border-bottom: none; color: var(--c-jaune-texte) }
.m-galerie--grille-4 .m-galerie__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-galerie--grille-4 .m-galerie__link:hover .m-galerie__arrow { transform: translateX(7px) rotate(45deg) }
.m-galerie--grille-4 .m-galerie__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start }
.m-galerie--grille-4 .m-galerie__figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-photo); background: var(--c-bleu-nuit); box-shadow: 0 2px 10px rgba(11, 19, 43, .08); transition: box-shadow 320ms ease-out }
.m-galerie--grille-4 .m-galerie__figure:hover { box-shadow: 0 22px 44px rgba(11, 19, 43, .22) }
.m-galerie--grille-4 .m-galerie__figure:nth-child(even) { margin-top: clamp(12px, 2vw, 28px) }
.m-galerie--grille-4 .m-galerie__figure picture { display: block }
.m-galerie--grille-4 .m-galerie__figure img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: transform 620ms var(--m-courbe) }
.m-galerie--grille-4 .m-galerie__figure:nth-child(even) img { aspect-ratio: 16 / 11 }
.m-galerie--grille-4 .m-galerie__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(11, 19, 43, .88), rgba(11, 19, 43, 0)); font-size: 14px; font-weight: 600; color: #FFFFFF }
@media (prefers-reduced-motion: no-preference) {
  .m-galerie--grille-4 .m-galerie__figure:hover img { transform: scale(1.07) }
}
@media (max-width: 959px) {
  .m-galerie--grille-4 .m-galerie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch }
  .m-galerie--grille-4 .m-galerie__figure:nth-child(even) { margin-top: 0 }
  .m-galerie--grille-4 .m-galerie__figure img, .m-galerie--grille-4 .m-galerie__figure:nth-child(even) img { aspect-ratio: 4 / 3 }
}

/* M12 Grille de cartes — docs/specs/cms-socle/05_modules-m01-m12.md § M12. Styles calculés des sections de maquette relevés dans
   docs/design-reference/cms-socle/maquettes-grille-cartes.html ; les couleurs suivent le rang de la carte par --grille-cartes-accent
   et --grille-cartes-tint, le rang est écrit par le compteur grille-cartes-card. */

/* bento-12 — Qui sommes-nous.dc.html, section#engagements */
.m-grille-cartes--bento-12 { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-grille-cartes--bento-12 .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--bento-12 .c-header__kicker { margin: 0 0 18px }
.m-grille-cartes--bento-12 .c-header__title { max-width: 24ch; margin: 0 0 clamp(36px, 4vw, 56px); font-size: clamp(28px, 3.2vw, 42px) }
.m-grille-cartes--bento-12 .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-grille-cartes--bento-12 .c-header__intro { margin: 0 0 clamp(36px, 4vw, 56px); max-width: 64ch; line-height: 1.55 }
.m-grille-cartes--bento-12 .m-grille-cartes__grid { counter-reset: grille-cartes-card; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px }
.m-grille-cartes--bento-12 .m-grille-cartes__card { counter-increment: grille-cartes-card; display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: var(--r-carte); box-shadow: var(--o-ombre); transition: transform 200ms ease-out, box-shadow 200ms ease-out }
.m-grille-cartes--bento-12 .m-grille-cartes__card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(11, 19, 43, .18) }
.m-grille-cartes--bento-12 .m-grille-cartes__card--span-4 { grid-column: span 4 }
.m-grille-cartes--bento-12 .m-grille-cartes__card--span-5 { grid-column: span 5 }
.m-grille-cartes--bento-12 .m-grille-cartes__card--span-6 { grid-column: span 6 }
.m-grille-cartes--bento-12 .m-grille-cartes__card--span-7 { grid-column: span 7 }
.m-grille-cartes--bento-12 .m-grille-cartes__card--span-12 { grid-column: span 12 }
.m-grille-cartes--bento-12 .m-grille-cartes__card--dark { background: #122451; border-color: rgba(255, 255, 255, .16); box-shadow: none }
.m-grille-cartes--bento-12 .m-grille-cartes__card--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) }
.m-grille-cartes--bento-12 .m-grille-cartes__media { overflow: hidden; aspect-ratio: 20 / 9; background: var(--c-bleu-nuit) }
.m-grille-cartes--bento-12 .m-grille-cartes__card--split .m-grille-cartes__media { aspect-ratio: auto; min-height: 150px }
.m-grille-cartes--bento-12 .m-grille-cartes__media picture { display: block; height: 100% }
.m-grille-cartes--bento-12 .m-grille-cartes__media img { width: 100%; height: 100%; object-fit: cover; display: block }
.m-grille-cartes--bento-12 .m-grille-cartes__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 22px); flex: 1 1 auto }
/* Charte du marketing du 2026-09-24 : aucun texte jaune sur fond clair ; le jaune sert en fond. */
.m-grille-cartes--bento-12 .m-grille-cartes__rank { align-self: flex-start; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-bleu-profond); font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-jaune) }
.m-grille-cartes--bento-12 .m-grille-cartes__rank::before { content: counter(grille-cartes-card, decimal-leading-zero) }
.m-grille-cartes--bento-12 .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; line-height: 1.2 }
.m-grille-cartes--bento-12 .m-grille-cartes__text { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--c-ardoise); text-wrap: pretty }
.m-grille-cartes--bento-12 .m-grille-cartes__card--dark .m-grille-cartes__rank { color: var(--c-jaune) }
.m-grille-cartes--bento-12 .m-grille-cartes__card--dark .m-grille-cartes__title { color: #FFFFFF }
.m-grille-cartes--bento-12 .m-grille-cartes__card--dark .m-grille-cartes__text { color: #B9CBEA }
.m-grille-cartes--bento-12 .m-grille-cartes__text:has(+ .m-grille-cartes__logo) { margin-bottom: 16px }
.m-grille-cartes--bento-12 .m-grille-cartes__logo { margin-top: auto; max-width: 160px }
.m-grille-cartes--bento-12 .m-grille-cartes__logo img { width: auto; max-width: 100%; height: auto; display: block }

/* offres-3 — Gemini Enterprise DA2.dc.html, section#offres */
.m-grille-cartes--offres-3 { padding: clamp(64px, 7vw, 96px) var(--l-marge) }
.m-grille-cartes--offres-3 .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--offres-3 .c-header__kicker { margin: 0 0 18px }
.m-grille-cartes--offres-3 .c-header__title { max-width: 24ch; margin: 0 0 40px; font-size: clamp(30px, 3.4vw, 44px) }
.m-grille-cartes--offres-3 .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-grille-cartes--offres-3 .c-header__intro { margin: 0 0 40px; max-width: 64ch; line-height: 1.55 }
.m-grille-cartes--offres-3 .m-grille-cartes__grid { counter-reset: grille-cartes-card; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px }
.m-grille-cartes--offres-3 .m-grille-cartes__card { counter-increment: grille-cartes-card; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; border-radius: var(--r-carte); padding: 32px 28px 28px; box-shadow: var(--o-ombre) }
.m-grille-cartes--offres-3 .m-grille-cartes__card:hover { filter: brightness(.985) }
.m-grille-cartes--offres-3 .m-grille-cartes__card:nth-child(1) { --grille-cartes-accent: #FFB100; --grille-cartes-tint: #FFEFCC }
.m-grille-cartes--offres-3 .m-grille-cartes__card:nth-child(2) { --grille-cartes-accent: #4285F4; --grille-cartes-tint: #DDE8FC }
.m-grille-cartes--offres-3 .m-grille-cartes__card:nth-child(3) { --grille-cartes-accent: #2DAA6E; --grille-cartes-tint: #DFF3E8 }
.m-grille-cartes--offres-3 .m-grille-cartes__rule { position: absolute; top: 0; left: 0; height: 5px; width: 100%; border-radius: 20px 20px 0 0; background: var(--grille-cartes-accent) }
.m-grille-cartes--offres-3 .m-grille-cartes__head { display: flex; align-items: center; gap: 12px }
/* Le rang est en BLEU NUIT et non en blanc, seul écart assumé à la maquette dans cette variante : le fond de la
   pastille suit l'accent du rang, et en 14 px 600 — du petit texte — un premier plan blanc y vaut 1,82 sur
   `#FFB100`, 3,56 sur `#4285F4` et 2,96 sur `#2DAA6E`, les trois sous 4,5. Le blanc n'est pas un jeton de la
   palette : corriger, ici, n'est pas assombrir une teinte mais INVERSER un premier plan. Le geste est celui que
   la pilule de lien plus bas fait déjà sur ces trois mêmes accents — `--c-bleu-nuit` y donne 10,10, 5,16 et 6,20
   (mesuré le 2026-09-20 au build 117, 15 FR-8.4.6). */
.m-grille-cartes--offres-3 .m-grille-cartes__rank { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--grille-cartes-accent); color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 14px; font-weight: 600 }
.m-grille-cartes--offres-3 .m-grille-cartes__rank::before { content: counter(grille-cartes-card, decimal-leading-zero) }
.m-grille-cartes--offres-3 .m-grille-cartes__label { padding: 6px 14px; border-radius: var(--r-pill); background: var(--grille-cartes-tint); font-size: 13px; font-weight: 600; white-space: nowrap }
.m-grille-cartes--offres-3 .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em }
.m-grille-cartes--offres-3 .m-grille-cartes__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-grille-cartes--offres-3 .m-grille-cartes__link, .m-grille-cartes--offres-3 .m-grille-cartes__link:hover { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 22px; border-radius: var(--r-pill); background: var(--grille-cartes-accent); border-bottom: none; color: var(--c-bleu-nuit); font-size: 15px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-grille-cartes--offres-3 .m-grille-cartes__link:hover { filter: brightness(.94) }
.m-grille-cartes--offres-3 .m-grille-cartes__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-grille-cartes--offres-3 .m-grille-cartes__link:hover .m-grille-cartes__arrow { transform: translateX(7px) rotate(45deg) }

/* bento-teinte — Gemini Enterprise DA2.dc.html, section#custom, grille des quatre agents */
.m-grille-cartes--bento-teinte { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) clamp(32px, 3.4vw, 48px) }
.m-grille-cartes--bento-teinte .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--bento-teinte .c-header__kicker { margin: 0 0 18px }
.m-grille-cartes--bento-teinte .c-header__title { max-width: 26ch; margin: 0 0 40px; font-size: clamp(28px, 3.2vw, 42px) }
.m-grille-cartes--bento-teinte .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-grille-cartes--bento-teinte .c-header__intro { margin: 0 0 40px; max-width: 64ch; line-height: 1.5 }
.m-grille-cartes--bento-teinte .m-grille-cartes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px }
.m-grille-cartes--bento-teinte .m-grille-cartes__card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #122451; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-carte); padding: clamp(20px, 2vw, 26px); color: #FFFFFF; transition: transform 180ms ease-out, border-color 180ms ease-out }
.m-grille-cartes--bento-teinte .m-grille-cartes__card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .36) }
.m-grille-cartes--bento-teinte .m-grille-cartes__card--span-4 { grid-column: span 4 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card--span-5 { grid-column: span 5 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card--span-6 { grid-column: span 6 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card--span-7 { grid-column: span 7 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card--span-12 { grid-column: span 12 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+1) { --grille-cartes-accent: #FFC94D }
.m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+2) { --grille-cartes-accent: #8AB4F8 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+3) { --grille-cartes-accent: #6FD3A3 }
.m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+4) { --grille-cartes-accent: #C4B0FD }
.m-grille-cartes--bento-teinte .m-grille-cartes__badge { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--grille-cartes-accent); color: var(--grille-cartes-accent); font-size: 12px; font-weight: 600; white-space: nowrap }
.m-grille-cartes--bento-teinte .m-grille-cartes__head { display: flex; align-items: center; gap: 14px }
.m-grille-cartes--bento-teinte .m-grille-cartes__badge + .m-grille-cartes__head { padding-right: 150px }
.m-grille-cartes--bento-teinte .m-grille-cartes__mark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04) }
.m-grille-cartes--bento-teinte .m-grille-cartes__diamond { display: block; width: 14px; height: 14px; background: var(--grille-cartes-accent); transform: rotate(45deg) }
.m-grille-cartes--bento-teinte .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: clamp(20px, 2.1vw, 25px); font-weight: 600; line-height: 1.2; color: #FFFFFF }
.m-grille-cartes--bento-teinte .m-grille-cartes__text { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #B9CBEA }
@keyframes m-grille-cartes-spin { 0%, 100% { transform: rotate(45deg) } 50% { transform: rotate(135deg) } }

/* bento-organisme — Pyl.Academy.dc.html, section#academy */
.m-grille-cartes--bento-organisme { background: #FFFFFF; padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-grille-cartes--bento-organisme .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--bento-organisme .m-grille-cartes__kicker { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--c-jaune-texte) }
.m-grille-cartes--bento-organisme .m-grille-cartes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--main { grid-column: span 7; position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid var(--c-bordure); border-radius: 24px; padding: clamp(30px, 3vw, 44px); box-shadow: var(--o-ombre) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--main .m-grille-cartes__rule { position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #FFB100, #FFC94D 60%, rgba(255, 201, 77, 0)) }
.m-grille-cartes--bento-organisme .c-watermark { right: -60px; bottom: -70px; width: 260px; height: auto; opacity: .06 }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--main .m-grille-cartes__label { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 177, 0, .12); border: 1px solid rgba(255, 177, 0, .35); font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #9A6B00 }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--main .m-grille-cartes__title { margin: 0 0 20px; max-width: 22ch; font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: pretty }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--main .m-grille-cartes__text { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.7; color: var(--c-ardoise); text-wrap: pretty }
.m-grille-cartes--bento-organisme .m-grille-cartes__chips { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.m-grille-cartes--bento-organisme .m-grille-cartes__chip { padding: 9px 16px; border-radius: var(--r-pill); background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo { grid-column: span 5; position: relative; overflow: hidden; border-radius: 24px; min-height: 300px; box-shadow: var(--o-ombre); transition: box-shadow 320ms ease-out }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo:hover { box-shadow: 0 24px 50px rgba(11, 19, 43, .2) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo .m-grille-cartes__media { position: absolute; inset: 0 }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo .m-grille-cartes__media picture { display: block; height: 100% }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo .m-grille-cartes__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--m-courbe) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo:hover .m-grille-cartes__media img { transform: scale(1.06) }
.m-grille-cartes--bento-organisme .m-grille-cartes__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 19, 43, 0) 38%, rgba(11, 19, 43, .8) 100%) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--photo .m-grille-cartes__label { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-bleu-nuit); box-shadow: 0 12px 30px rgba(11, 19, 43, .3) }
.m-grille-cartes--bento-organisme .m-grille-cartes__dot { display: block; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-jaune-fonce) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--dark { grid-column: span 5; display: flex; flex-direction: column; background: var(--g-sombre); border-radius: 24px; padding: clamp(26px, 3vw, 40px) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--dark .m-grille-cartes__logo { align-self: flex-start; display: inline-flex; align-items: center; background: #FFFFFF; border-radius: 14px; padding: 12px 16px; margin-bottom: 24px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28) }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--dark .m-grille-cartes__logo img { height: 34px; width: auto; display: block }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--dark .m-grille-cartes__title { margin: 0 0 12px; font-family: var(--f-display); font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.2; color: #FFFFFF }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--dark .m-grille-cartes__text { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.7; color: #B9CBEA; text-wrap: pretty }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--cream { grid-column: span 7; display: flex; flex-direction: column; background: linear-gradient(125deg, #FFF6E0, #FFFDF8 65%); border: 1px solid rgba(255, 177, 0, .32); border-radius: 24px; padding: clamp(30px, 3vw, 44px) }
.m-grille-cartes--bento-organisme .m-grille-cartes__bar { display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--c-jaune-fonce); margin-bottom: 20px }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--cream .m-grille-cartes__title { margin: 0 0 14px; font-family: var(--f-display); font-size: clamp(21px, 2.1vw, 26px); font-weight: 600; line-height: 1.2 }
.m-grille-cartes--bento-organisme .m-grille-cartes__card--cream .m-grille-cartes__text { margin: 0; max-width: 58ch; font-size: 19px; line-height: 1.7; color: #3A4560; text-wrap: pretty }

/* piliers-4 — Pyl.Academy.dc.html, section#piliers, sans le bloc « Les offres — à faire » */
.m-grille-cartes--piliers-4 { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-grille-cartes--piliers-4 .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--piliers-4 .c-header__kicker { margin: 0 0 18px }
.m-grille-cartes--piliers-4 .c-header__title { max-width: 24ch; margin: 0 0 clamp(36px, 4vw, 52px); font-size: clamp(28px, 3.2vw, 42px) }
.m-grille-cartes--piliers-4 .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-grille-cartes--piliers-4 .c-header__intro { margin: 0 0 clamp(36px, 4vw, 52px); max-width: 64ch; line-height: 1.55 }
.m-grille-cartes--piliers-4 .m-grille-cartes__grid { counter-reset: grille-cartes-card; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px }
.m-grille-cartes--piliers-4 .m-grille-cartes__card { counter-increment: grille-cartes-card; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; height: 100%; background: #FFFFFF; border-radius: var(--r-carte); border: 1px solid var(--c-bordure); padding: 32px 24px 26px; box-shadow: var(--o-ombre); transition: transform 220ms ease-out, box-shadow 220ms ease-out }
.m-grille-cartes--piliers-4 .m-grille-cartes__card:hover { transform: translateY(-6px); border-color: var(--c-jaune); box-shadow: 0 18px 40px rgba(11, 19, 43, .12), 0 0 0 3px rgba(255, 201, 77, .22) }
.m-grille-cartes--piliers-4 .m-grille-cartes__rule { position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: var(--c-jaune) }
.m-grille-cartes--piliers-4 .m-grille-cartes__rank { align-self: flex-start; margin-bottom: 4px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-bleu-profond); font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-jaune) }
.m-grille-cartes--piliers-4 .m-grille-cartes__rank::before { content: counter(grille-cartes-card, decimal-leading-zero) }
.m-grille-cartes--piliers-4 .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; line-height: 1.2 }
.m-grille-cartes--piliers-4 .m-grille-cartes__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }

/* partenaires-2 — Nos partenaires.dc.html, section#strategiques */
.m-grille-cartes--partenaires-2 { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-grille-cartes--partenaires-2 .m-grille-cartes__content { max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--partenaires-2 .c-header__kicker { margin: 0 0 18px }
.m-grille-cartes--partenaires-2 .c-header__title { max-width: 26ch; margin: 0 0 clamp(36px, 4vw, 52px); font-size: clamp(28px, 3.2vw, 42px) }
.m-grille-cartes--partenaires-2 .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-grille-cartes--partenaires-2 .c-header__intro { margin: 0 0 clamp(36px, 4vw, 52px); max-width: 62ch }
.m-grille-cartes--partenaires-2 .m-grille-cartes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card, .m-grille-cartes--partenaires-2 .m-grille-cartes__card:hover { display: flex; flex-direction: column; gap: 12px; height: 100%; background: #FFFFFF; border-radius: var(--r-carte); border: 1px solid var(--c-bordure); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--o-ombre); color: var(--c-bleu-nuit); transition: transform 180ms ease-out, box-shadow 180ms ease-out }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11, 19, 43, .12) }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card:nth-child(4n+1) { --grille-cartes-tint: #FFEFCC }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card:nth-child(4n+2) { --grille-cartes-tint: #DDE8FC }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card:nth-child(4n+3) { --grille-cartes-tint: #DFF3E8 }
.m-grille-cartes--partenaires-2 .m-grille-cartes__card:nth-child(4n+4) { --grille-cartes-tint: #E7DEFD }
.m-grille-cartes--partenaires-2 .m-grille-cartes__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.m-grille-cartes--partenaires-2 .m-grille-cartes__logo { display: block; width: 150px }
.m-grille-cartes--partenaires-2 .m-grille-cartes__logo picture { display: block }
.m-grille-cartes--partenaires-2 .m-grille-cartes__logo img { width: 100%; height: auto; object-fit: contain; display: block }
.m-grille-cartes--partenaires-2 .m-grille-cartes__category { padding: 6px 13px; border-radius: var(--r-pill); background: var(--grille-cartes-tint); color: var(--c-bleu-nuit); font-size: 13px; font-weight: 600; white-space: nowrap }
.m-grille-cartes--partenaires-2 .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--c-ardoise) }
.m-grille-cartes--partenaires-2 .m-grille-cartes__text { max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--c-ardoise); text-wrap: pretty }
.m-grille-cartes--partenaires-2 .m-grille-cartes__text p { margin: 0 }

/* cartes-icones — Pyl.Academy - Pyl.Tech.html : section#missions pour le cadre bande, encart « Pour aller plus loin » de
   section#catalogue pour le cadre encart. Les règles du cadre posent la section, le panneau, la carte et l'écart de la
   grille ; celles des colonnes, leur nombre et ses seuils : aucun sélecteur ne réunit les deux, et chacune des quatre
   combinaisons est la somme de deux moitiés relevées (05 FR-20.4). Le titre de carte et le titre de l'encart sont des
   paragraphes dans la maquette : ils ne prennent pas le resserrement des titres de la feuille de base. */
.m-grille-cartes--cartes-icones .m-grille-cartes__content { position: relative; max-width: var(--l-contenu); margin: 0 auto }
.m-grille-cartes--cartes-icones .m-grille-cartes__grid { display: grid }
.m-grille-cartes--cartes-icones .m-grille-cartes__card { display: flex; flex-direction: column; height: 100%; background: #FFFFFF; border-radius: 18px; color: var(--c-bleu-nuit) }
.m-grille-cartes--cartes-icones a.m-grille-cartes__card { border-bottom: none; outline: 2px solid transparent; transition: transform 160ms ease-out, outline-color 160ms ease-out }
.m-grille-cartes--cartes-icones a.m-grille-cartes__card:hover, .m-grille-cartes--cartes-icones a.m-grille-cartes__card:focus-visible { transform: translateY(-3px); outline-color: var(--c-jaune-fonce) }
.m-grille-cartes--cartes-icones .m-grille-cartes__icon { display: grid; place-items: center }
.m-grille-cartes--cartes-icones .m-grille-cartes__icon .c-icon { width: 26px; height: 26px }
.m-grille-cartes--cartes-icones .m-grille-cartes__title { margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: normal; color: var(--c-bleu-nuit) }
.m-grille-cartes--cartes-icones .m-grille-cartes__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ardoise) }
.m-grille-cartes--cartes-icones .m-grille-cartes__go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--c-bleu-nuit) }
.m-grille-cartes--cartes-icones .m-grille-cartes__arrow { flex: none; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--c-bleu-nuit); border-right: 2px solid var(--c-bleu-nuit); transform: rotate(45deg); transition: transform 200ms var(--m-courbe) }
.m-grille-cartes--cartes-icones a.m-grille-cartes__card:hover .m-grille-cartes__arrow, .m-grille-cartes--cartes-icones .m-grille-cartes__button:hover .m-grille-cartes__arrow { transform: translateX(6px) rotate(45deg) }
.m-grille-cartes--cartes-icones .m-grille-cartes__foot { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: clamp(24px, 2.6vw, 32px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14) }
.m-grille-cartes--cartes-icones .m-grille-cartes__note { margin: 0; font-size: 17px; line-height: 1.5; color: #B9CBEA }
.m-grille-cartes--cartes-icones .m-grille-cartes__button { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: var(--r-pill); background: var(--c-jaune-fonce); border-bottom: none; color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 17px; font-weight: 600; white-space: nowrap; transition: filter 140ms ease-out }
.m-grille-cartes--cartes-icones .m-grille-cartes__button:hover { filter: brightness(.95) }
/* cadre bande */
.m-grille-cartes--cartes-icones[data-frame="bande"] { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(72px, 8vw, 108px) var(--l-marge) }
.m-grille-cartes--cartes-icones[data-frame="bande"] .c-header__kicker { margin: 0 0 16px; color: var(--c-jaune) }
.m-grille-cartes--cartes-icones[data-frame="bande"] .c-header__title { max-width: 30ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; color: #FFFFFF; text-wrap: balance }
.m-grille-cartes--cartes-icones[data-frame="bande"] .c-header__intro { max-width: 62ch; margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: #B9CBEA }
.m-grille-cartes--cartes-icones[data-frame="bande"] .m-grille-cartes__grid { gap: 16px; margin-top: clamp(32px, 3.6vw, 44px) }
.m-grille-cartes--cartes-icones[data-frame="bande"] .m-grille-cartes__card { gap: 12px; padding: 24px }
.m-grille-cartes--cartes-icones[data-frame="bande"] .m-grille-cartes__icon { width: 40px; height: 40px; border-radius: 11px; background: var(--c-blanc-casse) }
/* cadre encart */
.m-grille-cartes--cartes-icones[data-frame="encart"] { padding: 0 var(--l-marge) clamp(64px, 7vw, 96px) }
.m-grille-cartes--cartes-icones[data-frame="encart"] .m-grille-cartes__panel { position: relative; overflow: hidden; background: var(--g-sombre); border-radius: 24px; padding: clamp(24px, 3.4vw, 44px) }
.m-grille-cartes--cartes-icones[data-frame="encart"] .c-watermark { top: -40px; right: -60px; height: 280px; opacity: .08 }
.m-grille-cartes--cartes-icones[data-frame="encart"] .c-header__kicker { margin: 0 0 8px; color: var(--c-jaune) }
.m-grille-cartes--cartes-icones[data-frame="encart"] .c-header__title { margin: 0 0 clamp(24px, 2.6vw, 32px); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; letter-spacing: normal; color: #FFFFFF }
.m-grille-cartes--cartes-icones[data-frame="encart"] .c-header__title:has(+ .c-header__intro) { margin-bottom: 8px }
.m-grille-cartes--cartes-icones[data-frame="encart"] .c-header__intro { margin: 0 0 clamp(24px, 2.6vw, 32px); font-size: 17px; line-height: 1.5; color: #B9CBEA }
.m-grille-cartes--cartes-icones[data-frame="encart"] .m-grille-cartes__grid { position: relative; gap: 14px }
.m-grille-cartes--cartes-icones[data-frame="encart"] .m-grille-cartes__card { gap: 10px; padding: 22px }
.m-grille-cartes--cartes-icones[data-frame="encart"] .m-grille-cartes__icon { width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--c-teinte-jaune) }
/* colonnes */
.m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }

@media (prefers-reduced-motion: no-preference) {
  .m-grille-cartes--bento-teinte .m-grille-cartes__diamond { animation: m-grille-cartes-spin 6s ease-in-out infinite }
  .m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+2) .m-grille-cartes__diamond { animation-delay: .6s }
  .m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+3) .m-grille-cartes__diamond { animation-delay: 1.2s }
  .m-grille-cartes--bento-teinte .m-grille-cartes__card:nth-child(4n+4) .m-grille-cartes__diamond { animation-delay: 1.8s }
}

@media (max-width: 1099px) {
  .m-grille-cartes--bento-organisme .m-grille-cartes__card { grid-column: span 12 }
}

@media (max-width: 1023px) {
  .m-grille-cartes--piliers-4 .m-grille-cartes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 1023px) and (min-width: 600px) {
  .m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-5 > :last-child:nth-child(odd) { grid-column: 1 / -1 }
}

@media (max-width: 959px) {
  .m-grille-cartes--bento-12 .m-grille-cartes__card { grid-column: span 12 }
  .m-grille-cartes--bento-12 .m-grille-cartes__card--split { grid-template-columns: minmax(0, 1fr) }
  .m-grille-cartes--offres-3 .m-grille-cartes__grid { grid-template-columns: minmax(0, 1fr) }
  .m-grille-cartes--bento-teinte .m-grille-cartes__card { grid-column: span 12 }
  .m-grille-cartes--bento-teinte .m-grille-cartes__badge { position: static; align-self: flex-start }
  .m-grille-cartes--bento-teinte .m-grille-cartes__badge + .m-grille-cartes__head { padding-right: 0 }
  .m-grille-cartes--partenaires-2 .m-grille-cartes__grid { grid-template-columns: minmax(0, 1fr) }
  .m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-3 { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 639px) {
  .m-grille-cartes--piliers-4 .m-grille-cartes__grid { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 599px) {
  .m-grille-cartes--cartes-icones .m-grille-cartes__grid--cols-5 { grid-template-columns: minmax(0, 1fr) }
}

/* M02 Repères — docs/specs/cms-socle/05_modules-m01-m12.md § M02. Styles calculés des blocs de maquette
   relevés dans docs/design-reference/cms-socle/maquettes-reperes.html. */

/* carte-chevauchante — Accueil Pyl.Tech.dc.html, div[data-repere] sous section#accueil */
.m-reperes--carte-chevauchante { position: relative; z-index: 5; margin-top: clamp(-120px, -9vw, -80px); padding: 0 var(--l-marge) }
.m-reperes--carte-chevauchante .m-reperes__card { max-width: var(--l-contenu); margin: 0 auto; background: #FFFFFF; border-radius: var(--r-carte); box-shadow: var(--o-ombre); padding: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; animation: pylUp 720ms var(--m-courbe) 340ms both }
.m-reperes--carte-chevauchante .m-reperes__badge { display: flex; flex-direction: column; align-items: flex-start; gap: 14px }
.m-reperes--carte-chevauchante .m-reperes__badge img { height: 82px; width: auto; display: block; border-radius: 10px }
.m-reperes--carte-chevauchante .m-reperes__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) }
.m-reperes--carte-chevauchante .m-reperes__label { margin: 0 0 10px; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-jaune-texte) }
.m-reperes--carte-chevauchante .m-reperes__text { margin: 0; font-family: var(--f-display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; line-height: 1.4; text-wrap: pretty }

/* tuiles — Cas client - Foodles.dc.html, section sous le hero */
.m-reperes--tuiles { background: #FFFFFF; padding: clamp(40px, 4.5vw, 60px) var(--l-marge) 0 }
.m-reperes--tuiles .m-reperes__tiles { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.m-reperes--tuiles .m-reperes__tile { display: flex; flex-direction: column; gap: 6px; background: var(--c-blanc-casse); border: 1px solid var(--c-bordure); border-radius: 18px; padding: 22px }
.m-reperes--tuiles .m-reperes__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-jaune-texte) }
.m-reperes--tuiles .m-reperes__value { font-family: var(--f-display); font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em }
.m-reperes--tuiles .m-reperes__unit { font-size: 14px; color: var(--c-ardoise) }
.m-reperes--tuiles .m-reperes__tile--dark { background: var(--g-sombre); border: none }
.m-reperes--tuiles .m-reperes__tile--dark .m-reperes__label { color: var(--c-jaune) }
.m-reperes--tuiles .m-reperes__tile--dark .m-reperes__value { color: #FFFFFF }
.m-reperes--tuiles .m-reperes__tile--dark .m-reperes__unit { color: var(--c-lien-pied) }

/* cartes — Pyl.Academy.dc.html, section#modalites */
.m-reperes--cartes { padding: clamp(72px, 8vw, 104px) var(--l-marge) }
.m-reperes--cartes .m-reperes__inner { max-width: var(--l-contenu); margin: 0 auto }
.m-reperes--cartes .c-header__title { margin: 0 0 14px; max-width: 26ch; font-size: clamp(28px, 3.2vw, 42px) }
.m-reperes--cartes .c-header__intro { margin: 0 0 clamp(36px, 4vw, 52px); max-width: 66ch }
.m-reperes--cartes .m-reperes__cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch }
.m-reperes--cartes .m-reperes__card { display: flex; flex-direction: column; gap: 10px; height: 100%; border-radius: var(--r-carte) }
.m-reperes--cartes .m-reperes__card--span-3 { grid-column: span 3 }
.m-reperes--cartes .m-reperes__card--span-4 { grid-column: span 4 }
.m-reperes--cartes .m-reperes__card--span-5 { grid-column: span 5 }
.m-reperes--cartes .m-reperes__card--clair { background: #FFFFFF; padding: clamp(24px, 2.4vw, 30px); border: 1px solid var(--c-bordure); box-shadow: var(--o-ombre); transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out }
.m-reperes--cartes .m-reperes__card--clair:hover { transform: translateY(-6px); border-color: var(--c-jaune); box-shadow: 0 18px 40px rgba(11, 19, 43, .12), 0 0 0 3px rgba(255, 201, 77, .22) }
.m-reperes--cartes .m-reperes__card--sombre { background: var(--g-sombre); padding: clamp(24px, 2.4vw, 32px) }
.m-reperes--cartes .m-reperes__card--jaune { flex-direction: row; align-items: center; background: var(--c-jaune); padding: clamp(22px, 2.2vw, 28px) }
.m-reperes--cartes .m-reperes__pill { align-self: flex-start; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 201, 77, .16); border: 1px solid rgba(255, 201, 77, .42); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-jaune) }
.m-reperes--cartes .m-reperes__label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-jaune-texte) }
.m-reperes--cartes .m-reperes__value { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--c-bleu-nuit) }
.m-reperes--cartes .m-reperes__unit { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--c-gris-texte) }
.m-reperes--cartes .m-reperes__title { margin: 0; font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; line-height: 1.2 }
.m-reperes--cartes .m-reperes__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--c-ardoise); text-wrap: pretty }
.m-reperes--cartes .m-reperes__card--sombre .m-reperes__label { color: var(--c-jaune) }
.m-reperes--cartes .m-reperes__card--sombre .m-reperes__value { margin-top: 4px; font-size: clamp(34px, 3.8vw, 48px); color: var(--c-jaune) }
.m-reperes--cartes .m-reperes__card--sombre .m-reperes__unit { color: var(--c-lien-pied) }
.m-reperes--cartes .m-reperes__card--sombre .m-reperes__title { color: #FFFFFF }
.m-reperes--cartes .m-reperes__card--sombre .m-reperes__text { color: var(--c-lien-pied) }
.m-reperes--cartes .m-reperes__card--jaune .m-reperes__text { font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; line-height: 1.35; color: var(--c-bleu-nuit) }

@media (max-width: 1099px) {
  .m-reperes--cartes .m-reperes__card { grid-column: span 12 }
}

@media (max-width: 1023px) {
  .m-reperes--tuiles .m-reperes__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 959px) {
  .m-reperes--carte-chevauchante .m-reperes__card { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .m-reperes--carte-chevauchante .m-reperes__items { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 639px) {
  .m-reperes--tuiles .m-reperes__tiles { grid-template-columns: minmax(0, 1fr) }
}

/* Schéma plateforme — docs/specs/cms-socle/06_modules-m13-m23.md § M20.
   Relevé : docs/design-reference/cms-socle/maquettes-bande-schema.html (#plateforme de Gemini Enterprise DA2). */

/* trois-colonnes-reliees — Gemini Enterprise DA2.dc.html, section#plateforme */
.m-schema-plateforme--trois-colonnes-reliees { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(72px, 8vw, 108px) var(--l-marge) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__content { max-width: var(--l-contenu); margin: 0 auto }
.m-schema-plateforme--trois-colonnes-reliees .c-header__kicker { color: var(--c-jaune) }
/* Le correctif du build 26 restaurait ici `--c-bleu-google` — la seule des sept variantes sombres à ne pas avaler le
   ton —, mais il le restaurait à 4,22 sur `--c-bleu-profond`, le bout clair de `--g-sombre`, sous AA lui-même. Jeton
   SOMBRE depuis le build 116 : 5,23 sur ce bout clair, 6,40 sur `--c-bleu-nuit` (07 § Jaune et gris de TEXTE). */
.m-schema-plateforme--trois-colonnes-reliees .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-schema-plateforme--trois-colonnes-reliees .c-header__title { max-width: 26ch; margin: 0 0 clamp(40px, 5vw, 64px); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: #FFFFFF }
.m-schema-plateforme--trois-colonnes-reliees .c-header__title:has(+ .c-header__intro) { margin-bottom: 14px }
.m-schema-plateforme--trois-colonnes-reliees .c-highlight { color: var(--c-jaune) }
.m-schema-plateforme--trois-colonnes-reliees .c-header__intro { max-width: 56ch; margin: 0 0 clamp(40px, 5vw, 64px); line-height: 1.55; color: var(--c-bleu-gris) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__flow { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.05fr) 90px minmax(0, 1fr); align-items: center; gap: 0 }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__side { display: flex; flex-direction: column; gap: 10px }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__side-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__title { margin: 0; font-family: var(--f-display); font-size: 21px; font-weight: 600; color: #FFFFFF }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__chip { padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__side--left .m-schema-plateforme__chip { background: rgba(255, 201, 77, .16); color: var(--c-jaune) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__side--right .m-schema-plateforme__chip { background: rgba(66, 133, 244, .22); color: var(--c-bleu-gris) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__subtitle { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--c-bleu-gris) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none }
/* La maquette dessine lignes et briques en <div> : la puce de ul > li::before de base.css n'y est pas
   (04 § Rendu d'un module). */
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__line::before, .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__brick::before { content: none }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__line { padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: 15px; line-height: 1.4; color: #FFFFFF }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; height: 100%; padding: 0 6px }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__track { position: relative; display: block; height: 2px; border-radius: var(--r-pill); background: rgba(130, 167, 226, .32) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__dot { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-jaune) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__center { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-carte); background: #FFFFFF }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__logo { display: flex }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__logo picture { display: block }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__logo img { display: block; width: auto; height: clamp(22px, 2.2vw, 28px) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ardoise) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__governance { display: flex; flex-direction: column; gap: 12px }
/* Le titre de gouvernance prend le gris de TEXTE malgré le nom sombre de la variante : il vit dans
   __center, qui déclare background: #FFFFFF, et non sur le var(--g-sombre) de la section. Il était à 2,80 ;
   le jeton le porte à 5,13 (07 § Jaune et gris de TEXTE). Tout le reste de la feuille est sur le fond sombre. */
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__governance-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--c-gris-texte) }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__bricks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__brick { padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-blanc-casse); font-size: 13px; font-weight: 600; color: var(--c-bleu-nuit); white-space: nowrap }

@keyframes m-schema-plateforme-dot-right { 0% { left: -8px; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@keyframes m-schema-plateforme-dot-left { 0% { right: -8px; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { right: 100%; opacity: 0 } }

@media (prefers-reduced-motion: no-preference) {
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--left .m-schema-plateforme__dot { animation: m-schema-plateforme-dot-right 3s linear infinite }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--left .m-schema-plateforme__track:nth-child(2) .m-schema-plateforme__dot { animation-delay: 1s }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--left .m-schema-plateforme__track:nth-child(3) .m-schema-plateforme__dot { animation-delay: 2s }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--right .m-schema-plateforme__dot { animation: m-schema-plateforme-dot-left 3s linear .5s infinite }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--right .m-schema-plateforme__track:nth-child(2) .m-schema-plateforme__dot { animation-delay: 1.5s }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail--right .m-schema-plateforme__track:nth-child(3) .m-schema-plateforme__dot { animation-delay: 2.5s }
}

@media (max-width: 1023px) {
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__flow { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .m-schema-plateforme--trois-colonnes-reliees .m-schema-plateforme__rail { display: none }
}

/* M14 Témoignages — docs/specs/cms-socle/06_modules-m13-m23.md § M14. Styles calculés relevés dans
   docs/design-reference/cms-socle/maquettes-equipe-temoignages.html. */

/* carrousel-sombre — Qui sommes-nous.dc.html, section#equipe */
.m-temoignages--carrousel-sombre { position: relative; overflow: hidden; background: var(--g-sombre); padding: clamp(72px, 8vw, 104px) 0 }
.m-temoignages--carrousel-sombre .m-temoignages__head { max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto clamp(32px, 4vw, 48px); padding: 0 var(--l-marge); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: end }
.m-temoignages--carrousel-sombre .c-header__kicker { grid-column: 1 / -1; grid-row: 1; margin: 0 0 18px; color: var(--c-jaune) }
/* Ton google redéclaré après la règle jaune, à égalité de spécificité : sans cela la règle de variante, qui porte deux
   classes, avale la règle commune du ton. Jeton SOMBRE — mesuré le 2026-09-20, 5,23 sur `--c-bleu-profond`, le bout
   clair de `--g-sombre`, quand `--c-bleu-google` y vaut 4,22 et `--c-bleu-google-texte` 2,63 (07 § Jaune et gris de TEXTE). */
.m-temoignages--carrousel-sombre .c-header__kicker--google { color: var(--c-bleu-google-sombre) }
.m-temoignages--carrousel-sombre .c-header__title { grid-column: 1; grid-row: 2; max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.015em; color: #FFFFFF }
.m-temoignages--carrousel-sombre .c-header__intro { grid-column: 1 / -1; grid-row: 3; margin: 14px 0 0; color: #B9CBEA }
.m-temoignages--carrousel-sombre .m-temoignages__arrows { grid-column: 2; grid-row: 2; display: flex; gap: 12px }
.m-temoignages--carrousel-sombre .m-temoignages__arrow-button { appearance: none; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: var(--r-pill); background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); transition: background 140ms ease-out, border-color 140ms ease-out }
.m-temoignages--carrousel-sombre .m-temoignages__arrow-button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7) }
.m-temoignages--carrousel-sombre .m-temoignages__chevron { display: block; width: 9px; height: 9px; margin-right: 3px; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; transform: rotate(45deg) }
.m-temoignages--carrousel-sombre .m-temoignages__chevron--previous { margin: 0 0 0 3px; transform: rotate(-135deg) }
.m-temoignages--carrousel-sombre .m-temoignages__track { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--l-contenu) + 2 * var(--l-marge)); margin: 0 auto; padding: 4px var(--l-marge) 8px }
.m-temoignages--carrousel-sombre .m-temoignages__track::-webkit-scrollbar { display: none }
.m-temoignages--carrousel-sombre .m-temoignages__card { flex: 0 0 auto; width: min(88vw, 420px); margin: 0; display: flex; flex-direction: column; gap: 22px; background: #FFFFFF; border-radius: var(--r-carte); padding: clamp(24px, 2.6vw, 32px) }
.m-temoignages--carrousel-sombre .m-temoignages__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-temoignages--carrousel-sombre .m-temoignages__caption { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-bordure); display: flex; align-items: center; gap: 14px }
.m-temoignages--carrousel-sombre .m-temoignages__portrait { flex: 0 0 auto; width: 80px; height: 80px; overflow: hidden; border-radius: var(--r-pill) }
.m-temoignages--carrousel-sombre .m-temoignages__portrait picture { display: block; height: 100% }
.m-temoignages--carrousel-sombre .m-temoignages__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block }
.m-temoignages--carrousel-sombre .m-temoignages__who { display: flex; flex-direction: column; gap: 4px }
.m-temoignages--carrousel-sombre .m-temoignages__author { font-family: var(--f-display); font-size: 18px; font-weight: 600 }
.m-temoignages--carrousel-sombre .m-temoignages__role { font-size: 15px; color: var(--c-ardoise) }

/* citation — Cas client - Foodles.dc.html et Article - Expedition Ivarus.dc.html, citations du corps */
.m-temoignages--citation .m-temoignages__quote { margin: 0; display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); border-radius: var(--r-carte); padding: clamp(24px, 3vw, 34px) }
.m-temoignages--citation .m-temoignages__quote--clair { background: var(--c-fond-citation); border: 1px solid rgba(255, 177, 0, .3) }
.m-temoignages--citation .m-temoignages__quote--sombre { background: var(--g-sombre) }
.m-temoignages--citation .m-temoignages__bar { display: block; height: 100%; border-radius: 3px; background: var(--c-jaune-fonce) }
.m-temoignages--citation .m-temoignages__quote--sombre .m-temoignages__bar { background: var(--c-jaune) }
.m-temoignages--citation .m-temoignages__body { display: flex; flex-direction: column; gap: 16px }
.m-temoignages--citation .m-temoignages__body:has(.m-temoignages__portrait) { gap: 18px }
.m-temoignages--citation .m-temoignages__text { margin: 0; font-family: var(--f-display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; line-height: 1.45; color: var(--c-bleu-nuit); text-wrap: pretty }
.m-temoignages--citation .m-temoignages__quote--sombre .m-temoignages__text { color: #FFFFFF }
.m-temoignages--citation .m-temoignages__caption { display: flex; align-items: center; gap: 14px }
.m-temoignages--citation .m-temoignages__portrait { flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border-radius: var(--r-pill) }
.m-temoignages--citation .m-temoignages__portrait picture { display: block; height: 100% }
.m-temoignages--citation .m-temoignages__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block }
.m-temoignages--citation .m-temoignages__who { display: flex; flex-direction: column; gap: 2px }
.m-temoignages--citation .m-temoignages__author { font-size: 15px; font-weight: 600 }
.m-temoignages--citation .m-temoignages__quote--sombre .m-temoignages__author { color: #FFFFFF }
.m-temoignages--citation .m-temoignages__role { font-size: 14px; color: var(--c-ardoise) }
.m-temoignages--citation .m-temoignages__quote--sombre .m-temoignages__role { color: #B9CBEA }

@media (max-width: 959px) {
  .m-temoignages--carrousel-sombre .m-temoignages__arrows { display: none }
}

/* Consentement — docs/specs/cms-socle/07_public-render.md § Consentement et suivi : barre basse de
   tarteaucitron aux jetons du site, sans maquette (décision du 2026-09-17), et bloc d'activation de la
   carte (06 FR-10.1). Servie à la fin de site.css seulement ; html body et les identifiants passent
   devant tarteaucitron.min.css, !important là où cette feuille l'emploie. */
html body #tarteaucitronRoot #tarteaucitronAlertBig { box-sizing: border-box; padding: 16px var(--l-marge); border: none; background: var(--c-bleu-nuit); box-shadow: 0 -8px 30px rgba(11,19,43,.18); font-size: 15px !important }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert, html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong { margin: 6px 0; padding: 0 12px; vertical-align: middle; color: #FFFFFF; font-family: var(--f-corps); font-size: 15px; line-height: 1.5 }
html body #tarteaucitronRoot #tarteaucitronAlertBig button { margin: 6px 4px; vertical-align: middle; font-family: var(--f-display); font-size: 15px !important; font-weight: 600; line-height: 1.2; transition: var(--m-transition) }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 { padding: 12px 24px; border: none; border-radius: var(--r-pill); background: var(--c-jaune-fonce); color: var(--c-bleu-nuit) }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover { filter: brightness(.95) }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 { padding: 12px 24px; border: none; border-radius: var(--r-pill); background: transparent; box-shadow: inset 0 0 0 1.5px #FFFFFF; color: #FFFFFF }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover { background: rgba(255,255,255,.08) }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert, html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl { margin: 6px 12px; padding: 4px 0; border: none; border-bottom: 1px solid var(--c-jaune-fonce); border-radius: 0; background: transparent; color: #FFFFFF }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover, html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl:hover { color: var(--c-jaune-fonce) }
html body #tarteaucitronRoot #tarteaucitronAlertBig button:focus-visible { outline: 2px solid var(--c-jaune); outline-offset: 2px }
html body .tac_activate { border-radius: var(--r-photo); background: var(--c-bleu-nuit); color: #FFFFFF; font-family: var(--f-corps); font-size: 14px; line-height: 1.5 }
html body .tac_activate .tac_float { padding: 24px }
html body .tac_activate .tac_float strong { color: #FFFFFF; font-weight: 600 }
html body .tac_activate .tac_float .tarteaucitronAllow { margin-top: 12px; padding: 12px 24px; border: none; border-radius: var(--r-pill); background: var(--c-jaune-fonce); color: var(--c-bleu-nuit); font-family: var(--f-display); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer }