/* Projet Ariane - surcharge de démo sur le miroir du site (travail interne Infographiks).
   Point de départ (passe 0, 01/10/2026) : la proposition v1 du 24/09, sans le wordmark géant du footer.
   Une passe = une section numérotée ajoutée EN BAS du fichier (« 2. Passe 1 - ... »), jamais de réécriture
   au-dessus : on peut toujours retrouver ce qui a changé et quand.
   Les tokens --ds-* sont la source du design system Illustrator (2026-10-02_design-system-illustrator/).

   1. Passe 0 - base v1 du 24/09 */

html:root{
  --ds-title: "Newsreader";
  --ds-title-w: 500;
  --ds-title-it: italic;
  --ds-title-it-w: 400;
  --ds-title-ls: -0.02em;
  --ds-text: "DM Sans";

  --ds-ink: #17171b;
  --ds-ink-soft: #3f3f46;
  --ds-ink-mute: #5b5b63;
  --ds-paper: #fafaf8;
  --ds-paper-2: #f0f0ec;
  --ds-line: #e2e2dd;
  --ds-white: #ffffff;

  --ds-accent: #c2410c;
  --ds-accent-text: #b13a0b;
  --ds-accent-soft: #fbeee7;

  --ds-radius: 8px;
  --ds-radius-sm: 6px;
  --ds-ease: cubic-bezier(0.23, 1, 0.32, 1);

  --font-serif: var(--ds-title), Georgia, serif;
  --font-sans: var(--ds-text), "Helvetica Neue", Arial, sans-serif;

  --color-ink: var(--ds-ink);
  --color-ink-soft: var(--ds-ink-soft);
  --color-ink-mute: var(--ds-ink-mute);
  --color-cream: var(--ds-paper);
  --color-cream-deep: var(--ds-paper-2);
  --color-da-line: var(--ds-line);
  --color-da-indigo: var(--ds-accent-text);
  --color-ocre: var(--ds-ink);

  --background: var(--ds-paper);
  --foreground: var(--ds-ink);
  --card: var(--ds-white);
  --border: var(--ds-line);
  --muted: var(--ds-paper-2);
  --muted-foreground: var(--ds-ink-mute);
  --primary: var(--ds-ink);
  --primary-foreground: var(--ds-paper);
  --ring: var(--ds-accent);
  --radius: var(--ds-radius);
}

body{ background: var(--ds-paper); color: var(--ds-ink); font-feature-settings: "ss01" on; }
::selection{ background: var(--ds-accent); color: var(--ds-white); }


/* ---------- Les utilitaires du site ont leurs couleurs en dur : on les remappe sur les tokens ---------- */
.text-da-indigo, .hover\:text-da-indigo:hover{ color: var(--ds-accent-text) !important; }
.bg-da-indigo\/10{ background-color: var(--ds-accent-soft) !important; }
.hover\:bg-da-indigo:hover{ background-color: #2b2b31 !important; }
.border-da-indigo, .hover\:border-da-indigo:hover{ border-color: var(--ds-accent) !important; }
.before\:bg-da-indigo::before{ background-color: var(--ds-accent) !important; }
.before\:bg-da-line::before{ background-color: var(--ds-line) !important; }
.bg-cream, .hover\:bg-cream:hover{ background-color: var(--ds-paper) !important; }
.bg-cream-deep{ background-color: var(--ds-paper-2) !important; }
.border-da-line{ border-color: var(--ds-line) !important; }
.md\:divide-da-line > :not(:last-child){ border-color: var(--ds-line) !important; }
.bg-ink, .focus\:bg-ink:focus{ background-color: var(--ds-ink) !important; }
.text-cream, .focus\:text-cream:focus{ color: var(--ds-paper) !important; }
.text-ink{ color: var(--ds-ink) !important; }
.text-ink\/85{ color: color-mix(in oklab, var(--ds-ink) 85%, transparent) !important; }
.text-ink-soft{ color: var(--ds-ink-soft) !important; }
.text-ink-mute{ color: var(--ds-ink-mute) !important; }
.text-ocre{ color: var(--ds-ink) !important; }
.bg-emerald-600{ background-color: #1f7a55 !important; }
main section.bg-cream, main section.bg-cream-deep{ border-radius: 14px; }
main span.font-serif.italic{ font-variant-numeric: normal !important; letter-spacing: -0.03em !important; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4{ font-family: var(--font-serif); text-wrap: balance; }
main h1{ font-weight: var(--ds-title-w) !important; letter-spacing: var(--ds-title-ls) !important; line-height: 1.02 !important; }
main h2{ font-weight: var(--ds-title-w) !important; letter-spacing: var(--ds-title-ls) !important; line-height: 1.06 !important; }
main h3{ font-weight: var(--ds-title-w) !important; letter-spacing: -0.01em !important; }
main p{ text-wrap: pretty; }

/* Titres : une partie droite, une partie en italique, dans la même famille. Plus de couleur, plus de soulignage. */
main h1 em, main h2 em, main h1 em.text-da-indigo, main h2 em.text-da-indigo{
  color: inherit !important; font-weight: var(--ds-title-it-w) !important;
  font-style: var(--ds-title-it) !important; letter-spacing: -0.01em !important;
}

/* Surtitres : plus de capitales espacées. Un fil qui part d'un point. */
main span.uppercase[class*="tracking-[0.14em]"]{
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 15px !important; font-weight: 500 !important; color: var(--ds-ink-soft) !important;
  gap: 10px !important;
}
main span.uppercase[class*="tracking-[0.14em]"]::before{ display: none !important; }
.ds-fil{ display: block; color: var(--ds-accent); overflow: visible; flex: none; }
.ds-fil path{ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-fil .d{ fill: var(--ds-paper); stroke: currentColor; stroke-width: 1.5; }
.ds-fil .a{ fill: currentColor; }
main .bg-cream-deep .ds-fil .d{ fill: var(--ds-paper-2); }
html.ds-dark .ds-divider .ds-fil .d{ fill: var(--ds-ink); }
.ds-divider{ display: flex; justify-content: center; padding: 26px 0; }
div[aria-hidden="true"]:has(> .ds-divider) > :not(.ds-divider){ display: none !important; }

/* Chiffres : plus d'italique orange, des chiffres droits et tabulaires. */
main span.text-ocre, main span.italic.text-da-indigo, main span.font-light.italic{
  font-style: normal !important; font-weight: var(--ds-title-w) !important;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em !important;
}
main span.text-ocre{ color: var(--ds-ink) !important; }
main span.italic.text-da-indigo{ color: var(--ds-accent-text) !important; }
main p.uppercase{ text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
main em.text-ink-mute{ font-style: normal; }

/* ---------- Boutons : une seule famille, un seul rayon ---------- */
a.rounded-full.bg-ink, header a[href*="login"], header button[class*="bg-primary"], main a[class*="bg-primary"]{
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-ink) !important; color: var(--ds-paper) !important;
  font-weight: 600 !important; letter-spacing: -0.005em;
  transition: background-color .2s var(--ds-ease), transform .16s var(--ds-ease) !important;
}
a.rounded-full.bg-ink:hover, header a[href*="login"]:hover{ background: #2b2b31 !important; }
a.rounded-full.bg-ink:active, header a[href*="login"]:active{ transform: scale(0.97); }
a.rounded-full:not(.bg-ink){
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: inset 0 0 0 1px var(--ds-line); font-weight: 600 !important;
}
a.rounded-full:not(.bg-ink):hover{ box-shadow: inset 0 0 0 1px var(--ds-ink); color: var(--ds-ink) !important; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--ds-accent) !important; outline-offset: 3px; }

/* ---------- Cartes ---------- */
main article.rounded-2xl{ border-radius: var(--ds-radius) !important; }
main article{ transition: background-color .2s var(--ds-ease); }

/* ---------- Navbar ---------- */
header.sticky{
  background: color-mix(in oklab, var(--ds-paper) 92%, transparent) !important;
  border-bottom: 1px solid var(--ds-line) !important;
}
header.sticky > div{ height: 72px !important; }
header a[href$="/"] > span{ font-family: var(--font-serif) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; font-size: 19px !important; }
header a[href$="/"] > svg{ color: var(--ds-ink) !important; }
header nav.md\:flex{
  background: var(--ds-paper-2); border: 1px solid var(--ds-line);
  border-radius: 999px; padding: 4px !important; gap: 2px !important;
}
header nav > div > a, header nav > a{
  border-radius: 999px !important; color: var(--ds-ink-soft) !important;
  font-weight: 500 !important; font-size: 14.5px !important; padding: 7px 14px !important;
}
header nav > div > a:hover, header nav > a:hover{ background: var(--ds-white) !important; color: var(--ds-ink) !important; }
header nav .rounded-md.border{ border-radius: var(--ds-radius) !important; border-color: var(--ds-line) !important; box-shadow: 0 8px 24px -12px rgb(0 0 0 / .18) !important; }
header a[href*="login"]{ padding: 9px 16px !important; font-size: 14px !important; }

header .ds-right{ display: flex; align-items: center; gap: 6px; }
header .ds-login-ghost{ font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: var(--ds-radius-sm); color: var(--ds-ink); }
header .ds-login-ghost:hover{ background: var(--ds-paper-2); }
header .ds-login{ font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--ds-radius-sm); background: var(--ds-ink); color: var(--ds-paper); transition: background-color .2s var(--ds-ease), transform .16s var(--ds-ease); }
header .ds-login:hover{ background: #2b2b31; }
header .ds-login:active{ transform: scale(.97); }
html.ds-dark header .ds-login{ background: var(--ds-paper); color: var(--ds-ink); }
html.ds-dark header .ds-login-ghost{ color: var(--ds-paper); }
html.ds-dark header .ds-login-ghost:hover{ background: #2a2a30; }

/* ---------- Footer ---------- */
footer.border-t{ background: var(--ds-paper-2) !important; border-top: 1px solid var(--ds-line) !important; }
footer h3{ font-family: var(--font-sans); font-weight: 600 !important; font-size: 13px !important; color: var(--ds-ink-mute); letter-spacing: 0; }
footer h3::after{ content: " /"; color: var(--ds-accent); }
footer ul a{ color: var(--ds-ink-soft); font-size: 14.5px; }
footer ul a:hover{ color: var(--ds-ink) !important; }

.ds-trust{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.ds-trust span{
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--ds-ink-soft); background: var(--ds-white); border: 1px solid var(--ds-line);
  border-radius: 999px; padding: 7px 14px;
}
.ds-trust span::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent); }

/* ---------- Variante : fond sombre, sections claires ---------- */
html.ds-dark body{ background: var(--ds-ink); }
html.ds-dark header.sticky{ background: color-mix(in oklab, var(--ds-ink) 92%, transparent) !important; border-bottom-color: #2a2a30 !important; }
html.ds-dark header a[href$="/"] > span, html.ds-dark header a[href$="/"] > svg{ color: var(--ds-paper) !important; }
html.ds-dark header nav.md\:flex{ background: #232329; border-color: #2e2e35; }
html.ds-dark header nav > div > a, html.ds-dark header nav > a{ color: #c9c9cf !important; }
html.ds-dark header nav > div > a:hover{ background: #33333a !important; color: var(--ds-paper) !important; }
html.ds-dark header a[href*="login"]{ background: var(--ds-paper) !important; color: var(--ds-ink) !important; }
html.ds-dark main > section{ border-radius: 14px; }
html.ds-dark footer.border-t{ background: var(--ds-ink) !important; border-top-color: #2a2a30 !important; color: #c9c9cf; }
html.ds-dark footer ul a{ color: #c9c9cf; }
html.ds-dark footer h3{ color: #9d9da6; }
html.ds-dark .ds-trust span{ background: #232329; border-color: #2e2e35; color: #d6d6db; }
html.ds-dark footer .border-t{ border-color: #2a2a30 !important; }

@media (max-width: 767px){
  header .ds-login-ghost{ display: none; }
  header a[href$="/"] > span{ white-space: nowrap; font-size: 17px !important; }
  header .ds-login{ padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
}


/* ---------- Logo (L dans la démo : refonte/logo.svg, en currentColor) ---------- */
.ds-logo{ display: block; height: 28px; width: auto; color: var(--ds-ink); }
.ds-logo svg{ height: 100%; width: auto; display: block; }
html.ds-dark .ds-logo{ color: var(--ds-paper); }


/* ====================================================================================
   PASSES D'ITÉRATION (ajouter en dessous, une section par passe)
   ==================================================================================== */

/* ---------- Passe 1 (02/10) : logo agrandi ---------- */
.ds-logo{ height: 36px; }
@media (max-width: 767px){ .ds-logo{ height: 26px; } }

/* ---------- Passe 1 (02/10) : navbar en cellules (réf. bibliothèque plasticity--00-navbar, sans pastilles de couleur) ----------
   La barre devient une rangée de cases séparées par des filets, comme la grille de l'insigne. */
header.sticky > div{ align-items: stretch !important; }
header.sticky > div > div:first-child{ align-items: stretch !important; gap: 0 !important; }
header.sticky > div > div:first-child > button{ align-self: center; }
header a[href="accueil.html"]{ display: flex; align-items: center; padding-right: 28px; border-right: 1px solid var(--ds-line); }
header nav.md\:flex{
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; gap: 0 !important; align-items: stretch !important;
}
header nav > div{ display: flex; border-right: 1px solid var(--ds-line); }
header nav > div > a, header nav > a{
  display: flex !important; align-items: center; height: 100%; white-space: nowrap;
  border-radius: 0 !important; padding: 0 22px !important; font-size: 15px !important;
  transition: background-color .2s var(--ds-ease), color .2s var(--ds-ease);
}
header nav > div > a:hover, header nav > div:hover > a{ background: var(--ds-paper-2) !important; color: var(--ds-ink) !important; }
header nav .rounded-md.border{
  left: -1px !important; border-radius: 0 !important; box-shadow: none !important;
  border-color: var(--ds-line) !important; background: var(--ds-paper) !important; padding: 6px !important;
}
header nav .rounded-md.border a{ border-radius: 0 !important; font-size: 14.5px !important; }
header .ds-right{ align-items: stretch; gap: 0; margin-left: auto; }
header .ds-login-ghost, header .ds-login{ display: flex; align-items: center; white-space: nowrap; border-radius: 0; padding: 0 24px; font-size: 15px; }
header .ds-login-ghost{ border-left: 1px solid var(--ds-line); }
header .ds-login{ padding: 0 28px; }
header .ds-login:active{ transform: none; }
html.ds-dark header a[href="accueil.html"], html.ds-dark header nav > div, html.ds-dark header .ds-login-ghost{ border-color: #2e2e35; }
html.ds-dark header nav > div > a:hover, html.ds-dark header nav > div:hover > a{ background: #232329 !important; color: var(--ds-paper) !important; }
html.ds-dark header nav .rounded-md.border{ background: #17171b !important; border-color: #2e2e35 !important; }
@media (max-width: 767px){
  header a[href="accueil.html"]{ border-right: 0; padding-right: 0; }
  header .ds-login-ghost{ display: none; }
  header .ds-login{ padding: 0 16px; font-size: 14px; }
  .ds-logo{ height: 22px; }
}

/* ---------- Passe 1 (02/10) : footer (réf. bibliothèque thrive-learning--13-platform) ----------
   Fond encre, logo + réseaux en tête, colonnes, une phrase de réassurance, barre légale. */
footer.border-t, html.ds-dark footer.border-t{ background: var(--ds-ink) !important; color: var(--ds-paper); border-top: 0 !important; }
footer.border-t > div{ padding-top: 72px !important; padding-bottom: 36px !important; }
.ds-foot-head{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid rgb(255 255 255 / .12);
}
.ds-foot-logo{ display: block; color: var(--ds-paper); font-family: var(--font-serif); font-size: 22px; }
.ds-foot-logo svg{ display: block; height: 40px; width: auto; }
.ds-foot-social{ display: flex; gap: 20px; }
.ds-foot-social a{ color: #a1a1aa; transition: color .2s var(--ds-ease); }
.ds-foot-social a:hover{ color: var(--ds-paper); }
.ds-foot-social svg{ width: 22px; height: 22px; }
footer nav.grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 40px 32px !important; }
footer nav.grid > div:first-child{ grid-column: span 2; }
footer nav.grid > div:first-child ul{ column-count: 2; column-gap: 32px; }
footer nav.grid > div:first-child li{ break-inside: avoid; }
footer h3, html.ds-dark footer h3{
  font-family: var(--font-serif) !important; font-weight: var(--ds-title-w) !important; font-size: 21px !important;
  letter-spacing: var(--ds-title-ls); color: var(--ds-paper) !important;
}
footer h3::after{ content: none; }
footer ul.mt-4{ margin-top: 20px !important; }
footer ul a, html.ds-dark footer ul a{ color: #b4b4bb; font-size: 15px; }
footer ul a:hover{ color: var(--ds-paper) !important; }
footer .ds-trust{ display: block; margin-top: 72px; }
footer .ds-trust p{ font-size: 17px; line-height: 1.6; color: #b4b4bb; max-width: 980px; }
footer .ds-trust strong{ color: var(--ds-paper); font-weight: 500; }
footer .mt-8.border-t, html.ds-dark footer .mt-8.border-t{
  display: flex; justify-content: space-between; gap: 16px; text-align: left !important;
  margin-top: 48px !important; padding-top: 24px !important; border-color: rgb(255 255 255 / .12) !important; color: #8b8b93 !important;
}
footer .mt-8.border-t > .mb-6.flex, footer .mt-8.border-t > p.mt-2{ display: none !important; }
@media (max-width: 767px){
  footer nav.grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ds-foot-head{ padding-bottom: 32px; margin-bottom: 32px; }
  .ds-foot-logo svg{ height: 30px; }
  footer .ds-trust{ margin-top: 48px; }
  footer .ds-trust p{ font-size: 15.5px; }
}

/* ---------- Passe 1 bis (02/10) : logo horizontal (Fichier 3) moins haut, barre qui tient sous 1280 px, rendu net ---------- */
.ds-logo{ height: 30px; flex-shrink: 0; }
.ds-logo svg{ overflow: visible; }
header a[href="accueil.html"]{ flex-shrink: 0; }
header.sticky{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--ds-paper) !important; }
html.ds-dark header.sticky{ background: var(--ds-ink) !important; }
@media (min-width: 768px) and (max-width: 1279px){
  header a[href="accueil.html"]{ padding-right: 20px; }
  header nav > div > a, header nav > a{ padding: 0 14px !important; font-size: 14px !important; }
  header .ds-login-ghost{ padding: 0 16px; font-size: 14px; }
  header .ds-login{ padding: 0 20px; font-size: 14px; }
  .ds-logo{ height: 26px; }
}
@media (max-width: 767px){ .ds-logo{ height: 22px; } }

/* ====================================================================================
   Passe 2 (02/10) - retours d'Adrien : plus d'italique, plus de fil, icônes pleines, rayons un peu plus ronds,
   palette sobre hors couleurs « IA » (indigo, violet, orange corail), sections avec fond.
   ==================================================================================== */
html:root{
  --ds-radius: 14px;
  --ds-radius-sm: 10px;
  --ds-title-it: normal;
  --ds-accent: #f2c12e;
  --ds-accent-text: #7a5c00;
  --ds-accent-soft: #fbf3d9;
  --ds-on-accent: #17171b;
  --ds-deep: #17171b;
}

/* Plus d'italique nulle part : titres d'une seule voix, emphase par la graisse */
main h1 em, main h2 em, main h1 em.text-da-indigo, main h2 em.text-da-indigo{ font-weight: var(--ds-title-w) !important; letter-spacing: var(--ds-title-ls) !important; }
main em, main i, main .italic{ font-style: normal !important; }
main p em, main li em{ font-weight: 500; color: var(--ds-ink); }
main span.italic.text-da-indigo{ color: inherit !important; }

/* Séparateurs : un filet simple dans la largeur du contenu, à la place du fil */
main > div:has([data-divider-line]){
  padding: 0 !important; height: 1px; max-width: calc(80rem - 4rem); margin: 0 auto; background: var(--ds-line);
}
main > div:has([data-divider-line]) > *{ display: none !important; }
html.ds-dark main > div:has([data-divider-line]){ background: #2a2a30; }

/* Icônes pleines (Phosphor fill) */
svg.ds-ico-orig{ display: none !important; }
svg.ds-ico{ flex: none; }

/* Rayons un peu plus ronds, pas à fond */
header nav .rounded-md.border{ border-radius: var(--ds-radius-sm) !important; padding: 6px !important; }
header nav .rounded-md.border a{ border-radius: 6px !important; }
main .rounded-xl, main .rounded-lg{ border-radius: var(--ds-radius) !important; }
main .rounded-md{ border-radius: var(--ds-radius-sm) !important; }

/* Hero : le papier se teinte doucement vers le bas, sous les chiffres */
main > section:first-of-type{ background: linear-gradient(180deg, var(--ds-paper) 0%, var(--ds-paper) 50%, var(--ds-accent-soft) 100%) !important; }

/* Bandes de fond (classes posées par demo.js selon le titre de la section) */
main > section[class*="ds-bande-"]{ position: relative; overflow: hidden; }
main > section[class*="ds-bande-"] > :not(.ds-filigrane){ position: relative; z-index: 1; }
.ds-filigrane{
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(44vw, 640px); opacity: .07; pointer-events: none; z-index: 0;
}
.ds-filigrane svg{ display: block; width: 100%; height: auto; }

main > section.ds-bande-teinte{ background: var(--ds-accent-soft) !important; }

main > section.ds-bande-sombre{
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, var(--ds-accent) 16%, var(--ds-deep)) 0%, var(--ds-deep) 62%) !important;
  color: var(--ds-paper);
}
.ds-bande-sombre .ds-filigrane{ color: var(--ds-paper); }
main > section.ds-bande-sombre h2, main > section.ds-bande-sombre h3{ color: var(--ds-paper) !important; }
main > section.ds-bande-sombre > div > div > div:first-child p,
main > section.ds-bande-sombre > div > div > div:first-child li,
main > section.ds-bande-sombre > div > div > div:first-child span{ color: #d6d6db !important; }
main > section.ds-bande-sombre a.rounded-full.bg-ink, main > section.ds-bande-sombre a[class*="bg-primary"]{ background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; }

main > section.ds-bande-marque{ background: var(--ds-accent) !important; color: var(--ds-on-accent); }
.ds-bande-marque .ds-filigrane{ color: var(--ds-on-accent); opacity: .09; }
main > section.ds-bande-marque h2, main > section.ds-bande-marque p, main > section.ds-bande-marque span{ color: var(--ds-on-accent) !important; }
main > section.ds-bande-marque a.rounded-full.bg-ink, main > section.ds-bande-marque a[class*="bg-primary"]{ background: var(--ds-on-accent) !important; color: var(--ds-accent) !important; }
main > section.ds-bande-marque a.rounded-full:not(.bg-ink){ box-shadow: inset 0 0 0 1px currentColor; color: var(--ds-on-accent) !important; }

/* Le footer prend le fond profond de la palette */
footer.border-t, html.ds-dark footer.border-t{ background: var(--ds-deep) !important; }

/* Passe 2 - correctifs après relecture */
main h1 em, main h2 em, main h1 em.text-da-indigo, main h2 em.text-da-indigo, main h1 .italic, main h2 .italic,
main em.italic, main strong.italic{ font-style: normal !important; }
main em.text-da-indigo, main strong.text-da-indigo{ color: inherit !important; }
main strong.text-da-indigo{ font-weight: 600 !important; }
main > section.ds-bande-sombre > div > div:first-child :is(p, li, span:not(.rounded-full)){ color: #d6d6db !important; }
main > section.ds-bande-sombre > div > div:first-child span.rounded-full{ background: color-mix(in oklab, var(--ds-accent) 18%, transparent) !important; color: var(--ds-paper) !important; }

/* ====================================================================================
   Passe 3 (02/10) - retours d'Adrien : couleurs encore « IA » (crème, dégradés, lueur), plateforme 360 et FAQ
   mal assorties, CTA en couleur gardé mais bouton noir, mot du titre en couleur (sans italique), menu plus moderne.
   ==================================================================================== */
html:root{
  --ds-ink: #0e0e0f;
  --ds-ink-soft: #3a3a3c;
  --ds-ink-mute: #5c5c60;
  --ds-paper: #ffffff;
  --ds-paper-2: #f2f2f2;
  --ds-line: #e4e4e4;
}

/* Plus de dégradé ni de lueur : le papier est blanc, le sombre est plat */
main > section:first-of-type{ background: var(--ds-paper) !important; }
main > section.ds-bande-sombre{ background: var(--ds-ink) !important; }
main > section.ds-bande-teinte{ background: var(--ds-paper) !important; }

/* Sections grises : gris neutre, cartes blanches à filet, rien de teinté */
main section.bg-cream-deep{ background: var(--ds-paper-2) !important; }
main section.bg-cream-deep article, main section.bg-cream-deep .bg-white, main section.bg-cream-deep details,
main section.bg-cream-deep .rounded-2xl, main section.bg-cream-deep .rounded-xl{
  background: var(--ds-paper) !important; border-color: var(--ds-line) !important; box-shadow: none !important;
}
main [class*="bg-da-indigo"]{ background: var(--ds-paper-2) !important; color: var(--ds-ink-soft) !important; }

/* CTA final : aplat de couleur, bouton NOIR */
main > section.ds-bande-marque a.rounded-full.bg-ink, main > section.ds-bande-marque a[class*="bg-primary"]{
  background: var(--ds-ink) !important; color: #ffffff !important;
}
main > section.ds-bande-marque a.rounded-full.bg-ink:hover{ background: #2a2a2c !important; }
main > section.ds-bande-sombre a.rounded-full.bg-ink, main > section.ds-bande-sombre a[class*="bg-primary"]{ background: #ffffff !important; color: var(--ds-ink) !important; }

/* Mot du titre : en couleur, jamais en italique (bouton « Mot du titre en couleur » du panneau) */
html.ds-em-couleur main h1 em, html.ds-em-couleur main h2 em{ color: var(--ds-accent-text) !important; }
html.ds-em-couleur main > section.ds-bande-sombre h2 em{ color: var(--ds-accent) !important; }
html.ds-em-couleur main > section.ds-bande-marque h2 em{ color: var(--ds-on-accent) !important; }

/* ---------- Menu, variante « Îlots » (réf. bibliothèque passionfroot--00-navbar, retenu fort) ----------
   Deux îlots qui flottent : logo + liens à gauche, connexion + action à droite. */
html.ds-menu-ilots header.sticky, html.ds-menu-centre header.sticky{ background: transparent !important; border-bottom: 0 !important; pointer-events: none; }
html.ds-menu-ilots header.sticky > div, html.ds-menu-centre header.sticky > div{ align-items: center !important; height: 80px !important; }
html.ds-menu-ilots header.sticky > div > *, html.ds-menu-centre header.sticky > div > *{ pointer-events: auto; }
html.ds-menu-ilots header.sticky > div > div:first-child, html.ds-menu-ilots header .ds-right{
  align-items: center !important; height: 56px; padding: 6px; gap: 2px !important;
  background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  box-shadow: 0 8px 28px -16px rgb(0 0 0 / .22);
}
html.ds-menu-ilots header a[href="accueil.html"]{ padding: 0 18px 0 12px; height: 100%; margin-right: 6px; border-right: 1px solid var(--ds-line); }
html.ds-menu-ilots header nav > div, html.ds-menu-centre header nav > div{ border-right: 0; }
html.ds-menu-ilots header nav > div > a, html.ds-menu-centre header nav > div > a{ height: 42px; padding: 0 14px !important; border-radius: var(--ds-radius-sm) !important; }
html.ds-menu-ilots header .ds-login-ghost, html.ds-menu-ilots header .ds-login,
html.ds-menu-centre header .ds-login-ghost, html.ds-menu-centre header .ds-login{ height: 42px; padding: 0 18px; border-radius: var(--ds-radius-sm); border-left: 0; }
html.ds-menu-ilots header .ds-login-ghost:hover{ background: var(--ds-paper-2); }
html.ds-menu-ilots header nav .rounded-md.border, html.ds-menu-centre header nav .rounded-md.border{ top: calc(100% + 10px) !important; left: 0 !important; box-shadow: 0 12px 32px -16px rgb(0 0 0 / .25) !important; }
html.ds-menu-ilots header nav .rounded-md.border::before, html.ds-menu-centre header nav .rounded-md.border::before{ content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
html.ds-dark.ds-menu-ilots header.sticky > div > div:first-child, html.ds-dark.ds-menu-ilots header .ds-right{ background: #1a1a1c; border-color: #2e2e32; }

/* ---------- Menu, variante « Logo centré » (réf. bibliothèque markopolo--00-navbar, retenu) ---------- */
@media (min-width: 768px){
  html.ds-menu-centre header.sticky{ background: var(--ds-paper) !important; border-bottom: 1px solid var(--ds-line) !important; pointer-events: auto; }
  html.ds-menu-centre header.sticky > div{ display: grid !important; grid-template-columns: 1fr auto 1fr; height: 76px !important; }
  html.ds-menu-centre header.sticky > div > div:first-child{ display: contents !important; }
  html.ds-menu-centre header a[href="accueil.html"]{ grid-column: 2; grid-row: 1; justify-self: center; border-right: 0; padding: 0; }
  html.ds-menu-centre header nav.md\:flex{ grid-column: 1; grid-row: 1; justify-self: start; margin-left: -14px; }
  html.ds-menu-centre header .ds-right{ grid-column: 3; grid-row: 1; justify-self: end; align-items: center; gap: 6px; }
  html.ds-menu-centre header .ds-login-ghost:hover{ background: var(--ds-paper-2); }
}
@media (min-width: 768px) and (max-width: 1279px){
  html.ds-menu-centre header nav > div > a{ padding: 0 10px !important; }
  html.ds-menu-centre header .ds-login-ghost{ display: none; }
}
@media (max-width: 1100px){
  html.ds-menu-ilots header .ds-login-ghost{ display: none; }
}
header.sticky > div > div:has(> .h-8.w-24:only-child){ display: none !important; }
@media (min-width: 768px){
  html.ds-menu-centre header.sticky > div{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  html.ds-menu-centre header nav > div > a{ padding: 0 12px !important; }
}

/* ====================================================================================
   Passe 4 (02/10) - surtitres en capitales espacées, plus d'aplat gris derrière les sections, couleur lisible sur noir
   ==================================================================================== */
main span.uppercase[class*="tracking-[0.14em]"]{
  text-transform: uppercase !important; letter-spacing: 0.12em !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--ds-ink-mute) !important;
}
main span.uppercase[class*="tracking-[0.14em]"]::before{ display: none !important; }
main > section.ds-bande-sombre span.uppercase[class*="tracking-[0.14em]"]{ color: #a8a8ad !important; }

/* Le gris de section disparaît : sections blanches, séparées par un filet */
main section.bg-cream-deep{ background: var(--ds-paper) !important; border-top: 1px solid var(--ds-line); }
main span[class*="bg-da-indigo/10"]{ background: var(--ds-accent-soft) !important; color: var(--ds-ink) !important; }
main > section.ds-bande-sombre span.rounded-full[class*="bg-da-indigo/10"]{ background: rgb(255 255 255 / .1) !important; color: #fff !important; }

html.ds-em-couleur main > section.ds-bande-sombre h2 em{ color: var(--ds-accent-on-ink) !important; }
main span[class*="bg-da-indigo"]:not([class*="bg-da-indigo/10"]){ background: transparent !important; }
main a.bg-ink:not(.ds-x), main a[class*="bg-primary"]:not(.ds-x){ background: var(--ds-ink) !important; }

/* ====================================================================================
   Passe 5 (02/10) - trois voix : titres (Instrument Sans), texte (Be Vietnam Pro), surtitres (--ds-eyebrow)
   ==================================================================================== */
main span.uppercase[class*="tracking-[0.14em]"], main p.uppercase, main p[class*="tracking-[0.1em]"]{ font-family: var(--ds-eyebrow), var(--font-sans) !important; }

/* Passe 5 - bugs relevés sur les 17 gabarits */
/* Plus aucun aplat gris : les blocs « cream-deep » deviennent blancs à filet */
main .bg-cream-deep:not(section){ background: var(--ds-paper) !important; }
main .bg-cream-deep:not(section):not([class*="border"]){ box-shadow: inset 0 0 0 1px var(--ds-line) !important; }
main div.w-\[90px\].rounded-lg{ background: var(--ds-paper) !important; box-shadow: inset 0 0 0 1px var(--ds-line); }
main p[class*="bg-da-indigo"]:not([class*="bg-da-indigo/10"]){ background: transparent !important; }
/* Lettrine des fiches : couleur indigo en dur et italique -> encre, droite, police des titres */
main .prose p:first-of-type::first-letter{ color: var(--ds-ink) !important; font-style: normal !important; font-family: var(--font-serif) !important; font-weight: var(--ds-title-w) !important; }
/* Listes de contenu sans puces */
main .prose ul:not([class]), main section ul:not([class]){ list-style: disc; padding-left: 1.25em; }
main .prose ul:not([class]) li, main section ul:not([class]) li{ margin: .25em 0; }
main .prose ul:not([class]) li::marker, main section ul:not([class]) li::marker{ color: var(--ds-ink-mute); }
/* Restes de bleu et d'indigo en dur */
main .bg-blue-50, main .bg-indigo-100{ background: var(--ds-accent-soft) !important; }
main .text-blue-600, main .text-indigo-700{ color: var(--ds-accent-text) !important; }
main .bg-blue-950{ background: var(--ds-ink) !important; }
/* Tous les petits libellés en capitales : une seule voix (police des surtitres, gris), plus de trait devant */
main [class*="uppercase"][class*="tracking"]{ font-family: var(--ds-eyebrow), var(--font-sans) !important; color: var(--ds-ink-mute) !important; }
main [class*="uppercase"][class*="tracking"]::before, main [class*="before:w-"]::before{ display: none !important; }
main > section.ds-bande-sombre [class*="uppercase"][class*="tracking"]{ color: #a8a8ad !important; }
main > section.ds-bande-marque [class*="uppercase"][class*="tracking"]{ color: var(--ds-on-accent) !important; }
/* Rayons : les grandes cartes suivent le même rayon que les autres */
main .rounded-3xl, main .rounded-2xl{ border-radius: var(--ds-radius) !important; }
/* Démo : les boutons désactivés faute de session (Sauvegarder) s'affichent normalement */
main button[disabled][data-slot="button"], aside button[disabled][data-slot="button"]{ opacity: 1 !important; }
/* Badges étroits (date des offres) : la police des surtitres déborde, on garde le texte */
main div.w-\[90px\] [class*="uppercase"], main div[class*="w-[90px]"] [class*="uppercase"]{ font-family: var(--font-sans) !important; letter-spacing: 0.02em !important; font-size: 10px !important; }
/* Contrôles natifs (lecteur vidéo, cases, curseurs) : plus de violet par défaut */
html{ accent-color: var(--ds-ink); }