/* =========================================================================
   PEAU « SANG » — posée par build.py sur toutes les pages
   =========================================================================
   Direction artistique validée par Jérôme le 17/09/2026 : voir
   peau/reference-sang/design-system.md (source de vérité des tokens).

   Trois familles de pages portent cette feuille :
   - l'accueil (index.html), repris de reference-sang/accueil.html ;
   - les pages de partie (4), générées de toutes pièces (build.py, structure/site.json) ;
   - les planches : la COMPOSITION DES BLOCS d'origine est conservée (cartes,
     grilles, tableaux, schémas, vidéos) mais tout le cadre est à nous
     (barre, en-tête, onglets, pied). Les sections 3 à 5 ciblent donc les
     classes Tailwind présentes dans les captures (échappées) ; `!important`
     y est assumé : on habille un DOM et un CSS qu'on ne contrôle pas.
     ORDRE DES SURCHARGES DE TEXTE = ordre du CSS Tailwind d'origine
     ([#fff] < cta < gray < ui-coal < ui-pepper < ui-rust < white, puis
     les `!`) : un élément cumule souvent plusieurs classes.
   ========================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --bg: #F6E4DC;            /* papier pêche */
  --surface: #FFFAF7;       /* feuille : cartes, barre, tiroir — #FDF4F0 jusqu'au 06/10 : ΔL* 5,0 sur le papier, les cartes s'y fondaient (6,8 maintenant) */
  --surface-2: #F9EBE5;     /* zones internes aux cartes, boutons neutres */
  --fg: #2A1012;            /* encre */
  --muted: #7A3A40;         /* texte secondaire */
  --vin: #8F2430;           /* la marque, l'accent par défaut */
  --vin-2: #761C28;
  --sanguine: #B0303C;      /* reliefs, italiques, numéros */
  --rose: #E8A090;
  --line: #E8C8C0;
  --line-strong: #C49090;
  --voile: rgba(42, 16, 18, .4);
  --ombre: 0 16px 36px rgba(42, 16, 18, .08);
  --ombre-2: 0 4px 14px rgba(42, 16, 18, .06);
  --video: #2A1012;
  --video-fg: #F6E4DC;

  /* une couleur par partie (structure/site.json ; mêmes valeurs dans peau.ACCENTS).
     Contrastes WCAG du texte d'accent ≥ 4,5:1 sur --bg, --surface et --surface-2, clair et sombre
     (mesurés le 05/10/2026). Le clitoris : rose framboise #B02A68 (5,1:1 sur son fond), choisi le 05/10 à la place de l'or. */
  --c-bases: #8F2430;         /* vin */
  --c-clitoris: #B02A68;      /* rose framboise */
  --c-interieur: #6E2A52;     /* prune */
  --c-objets: #A8462A;        /* brique chaude */

  --r-sm: 10px; --r-md: 18px; --r-lg: 22px; --r-btn: 999px;
  --title-w: 600; --soft: 80; --soft-em: 100;
  --font-d: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-b: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space: clamp(1.15rem, 4.5vw, 2.6rem);
  --h-barre: 64px;
  --h-onglets: 52px;
  --duree: 180ms;
  --easing: cubic-bezier(.2, .6, .2, 1);
  color-scheme: light;
  --text-global-text-primary: var(--fg); /* variable d'origine utilisée inline (légende en pointillés) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1012; --surface: #2A181C; --surface-2: #35201F;
    --fg: #F6E4E0; --muted: #D0A0A4;
    --vin: #E08088; --vin-2: #F0A0A6; --sanguine: #E09090; --rose: #8A4048;
    --line: #3A2428; --line-strong: #6A4048;
    --voile: rgba(0, 0, 0, .55); --ombre: 0 16px 36px rgba(0, 0, 0, .35); --ombre-2: 0 4px 14px rgba(0, 0, 0, .3);
    --video: #1C1012; --video-fg: #F6E4E0;
    --c-bases: #E08088; --c-clitoris: #EE8DB0; --c-interieur: #D690BE; --c-objets: #E8956F;
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-collection="clitoris"] { --bg: #20121A; --surface: #2E1A24; --surface-2: #38212C; }
  :root:not([data-theme="light"])[data-collection="interieur"] { --bg: #1E1421; --surface: #2C1E2E; --surface-2: #362539; }
  :root:not([data-theme="light"])[data-collection="objets"] { --bg: #211A10; --surface: #2F2419; --surface-2: #3A2C1D; }
}
:root[data-theme="dark"] {
  --bg: #1C1012; --surface: #2A181C; --surface-2: #35201F;
  --fg: #F6E4E0; --muted: #D0A0A4;
  --vin: #E08088; --vin-2: #F0A0A6; --sanguine: #E09090; --rose: #8A4048;
  --line: #3A2428; --line-strong: #6A4048;
  --voile: rgba(0, 0, 0, .55); --ombre: 0 16px 36px rgba(0, 0, 0, .35); --ombre-2: 0 4px 14px rgba(0, 0, 0, .3);
  --video: #1C1012; --video-fg: #F6E4E0;
  --c-bases: #E08088; --c-clitoris: #EE8DB0; --c-interieur: #D690BE; --c-objets: #E8956F;
  color-scheme: dark;
}
:root[data-theme="dark"][data-collection="clitoris"] { --bg: #20121A; --surface: #2E1A24; --surface-2: #38212C; }
:root[data-theme="dark"][data-collection="interieur"] { --bg: #1E1421; --surface: #2C1E2E; --surface-2: #362539; }
:root[data-theme="dark"][data-collection="objets"] { --bg: #211A10; --surface: #2F2419; --surface-2: #3A2C1D; }
/* accent de la page = couleur de sa partie (vin sur l'accueil) — html[data-collection="<clé de la partie>"] */
:root { --accent: var(--vin); }
:root[data-collection="bases"] { --accent: var(--c-bases); }
:root[data-collection="clitoris"] { --accent: var(--c-clitoris); }
:root[data-collection="interieur"] { --accent: var(--c-interieur); }
:root[data-collection="objets"] { --accent: var(--c-objets); }
/* fond de page teinté par partie (Jérôme, 18/09 : « Doux » partout — qu'on
   sente qu'on change de partie sans que ce soit criant). Les bases gardent le
   pêche de référence ; les trois autres tirent doucement vers leur accent.
   Dérivent aussi --accent-soft/-line/-2, qui se calculent depuis --surface plus bas. */
:root[data-collection="clitoris"] { --bg: #F3D6E0; --surface: #FFF9FB; --surface-2: #F9E6ED; }
:root[data-collection="interieur"] { --bg: #ECDCE8; --surface: #FDF8FB; --surface-2: #F4E6F1; }
:root[data-collection="objets"] { --bg: #F5E2C8; --surface: #FFFAF1; --surface-2: #FAEEDA; }
:root {
  --accent-fg: var(--surface);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --accent-soft-2: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--surface));
  --accent-2: color-mix(in srgb, var(--accent) 82%, var(--fg));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-fg: #1C1012; --accent-2: color-mix(in srgb, var(--accent) 80%, #fff); } }
:root[data-theme="dark"] { --accent-fg: #1C1012; --accent-2: color-mix(in srgb, var(--accent) 80%, #fff); }

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; }
html, body { background: var(--bg) !important; color: var(--fg); }
body { font-family: var(--font-b); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0; }
html.gel { overflow: hidden; }
html[data-taille="petite"] { font-size: 16px; }
html[data-taille="grande"] { font-size: 20px; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.lien-evitement { position: absolute; left: 12px; top: -4rem; z-index: 400; background: var(--accent); color: var(--accent-fg); padding: .6rem 1rem; border-radius: var(--r-sm); text-decoration: none; }
.lien-evitement:focus { top: 12px; }
.etiq { font-family: var(--font-b); font-size: .85rem; font-weight: 600; color: var(--sanguine); letter-spacing: .01em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: var(--r-btn); border: 0;
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-fg);
  transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}
.btn:hover { background: var(--accent-2); color: var(--accent-fg); }
.btn-ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line-strong); font-weight: 500; }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border: 1.5px solid var(--accent); }

/* ---- 3. Polices sur les blocs d'origine ---------------------------------- */
[class*="font-pl-police"], .text-body-4, button, input, select, textarea { font-family: var(--font-b) !important; }
.font-pl-police-regular, .\!font-pl-police-regular { font-weight: 400; }
.font-pl-police-medium, .\!font-pl-police-medium { font-weight: 600; }
.font-pl-police-bold, .\!font-pl-police-bold { font-weight: 700; }
.\[\&_b\]\:\!font-pl-police-bold b { font-family: var(--font-b) !important; font-weight: 700; }
.\[\&\>ul\>li\]\:\!font-pl-police-bold > ul > li { font-family: var(--font-b) !important; font-weight: 700; }
.\[\&\>\.bold\]\:\!font-pl-police-bold > .bold { font-family: var(--font-b) !important; font-weight: 700; }
.\[\&\>\.bold\]\:\!font-pl-police-regular > .bold { font-family: var(--font-b) !important; font-weight: 400; }
.\[\&\>\:not\(\.bold\)\]\:\!font-pl-police-regular > :not(.bold) { font-family: var(--font-b) !important; font-weight: 400; }
b, strong { font-weight: 700; }

/* titres : Fraunces 600 SOFT 80. `[class]` pour passer devant les classes `!` de Tailwind. */
h1, h2, h3, h4, h5, h6, :is(h1, h2, h3, h4, h5, h6)[class] {
  font-family: var(--font-d) !important;
  font-weight: var(--title-w) !important;
  letter-spacing: -.012em !important;
  font-variation-settings: "opsz" 72, "SOFT" var(--soft), "WONK" 0;
  text-wrap: balance;
}
/* les gros pourcentages (h4 64px uppercase) restent en Nunito, chiffres tabulaires */
h4.uppercase[class*="text-[48px]"], h4.uppercase[class*="text-[64px]"], h4.uppercase[class*="text-[40px]"] {
  font-family: var(--font-d) !important; text-transform: none !important; font-weight: 500 !important;
  font-variation-settings: "opsz" 144, "SOFT" var(--soft), "WONK" 0; letter-spacing: -.02em !important;
}
/* titres de section d'origine : plus de filet, plus de capitales, un vrai titre */
.peau-main h2.uppercase { text-transform: none !important; font-size: clamp(1.6rem, 2.6vw, 2rem) !important; line-height: 1.15 !important; }
.peau-main div.border-b.border-\[\#545251\] { border-bottom: 0 !important; padding-bottom: 0 !important; }
.peau-main h3[class*="text-"] { font-size: 1.35rem !important; line-height: 1.25 !important; }
/* corps 18 px sur les paragraphes principaux (les captures sont en 16 px) */
.peau-main p[class*="md:text-[16px]"], .peau-main p[class*="md:text-16px"], .peau-main li[class*="md:text-[16px]"] { font-size: 1rem !important; line-height: 1.6 !important; }
.peau-main h5[class*="md:text-[18px]"] { font-size: 1.2rem !important; line-height: 1.3 !important; }

/* ---- 4. Couleurs : fonds ------------------------------------------------ */
.bg-\[\#F7F4F1\], .collections-content { background-color: var(--bg) !important; }
.bg-white, .header .bg-white { background-color: var(--surface) !important; }
.bg-tech-container, .bg-card.technique-card, .technique-card { background-color: var(--surface) !important; }
.bg-\[\#F6F3F0\], .bg-v1-salt,
.data-\[state\=open\]\:bg-v1-salt[data-state="open"],
.data-\[state\=open\]\:bg-ui-msg[data-state="open"] { background-color: var(--surface-2) !important; }
.data-\[state\=closed\]\:hover\:bg-v1-salt\/50:hover[data-state="closed"] { background-color: var(--accent-soft) !important; }
.bg-ui-sea-salt, .bg-ui-tbd2, .bg-ui-onion, .bg-ui-garlic, .collection-arrow-wrapper,
.article-orbiting-selector-text:hover, .bg-\[\#2926250A\], .bg-\[\#29262514\] { background-color: var(--bg) !important; }
.bg-\[\#E1DCD3\] { background-color: var(--surface-2) !important; }
.bg-dark-aubergine, .\!bg-dark-aubergine, .bg-datenight-dark { background-color: var(--surface) !important; }
.bg-ui-coal { background-color: var(--muted) !important; }
.bg-season1-technique-card, .bg-season2-technique-card, .bg-season3-technique-card {
  background-image: linear-gradient(45deg, var(--accent-soft) 30%, var(--accent-soft-2)) !important;
}
.hover\:bg-\[\#FFD87C\]:hover { background-color: var(--accent-soft) !important; }

/* ---- 5. Couleurs : textes, bordures, badges, icônes ---------------------- */
.text-\[\#fff\] { color: #fff !important; }
.text-cta, .hover\:text-cta-hover:hover, .article-section-read-more:hover,
.article-hero-navigation-links-list-item:hover { color: var(--accent) !important; }
.text-gray-600, .hover\:text-gray-700:hover { color: var(--muted) !important; }
.text-gray-800 { color: var(--fg) !important; }
.text-ui-coal, .\[\&\>\:not\(\.bold\)\]\:text-ui-coal > :not(.bold), .disabled\:text-ui-coal:disabled { color: var(--muted) !important; }
.text-ui-pepper, .hover\:text-ui-pepper:hover { color: var(--fg) !important; }
.text-ui-rust, .\[\&\>span\]\:text-cta-active > span { color: var(--accent) !important; }
.text-white { color: #fff !important; }
.text-white\/90 { color: rgba(255, 255, 255, .9) !important; }
.\!text-ui-coal { color: var(--muted) !important; }
.\!text-\[\#292625\] { color: var(--fg) !important; }
.\!text-cta, .\!text-light-rust { color: var(--accent) !important; }
.text-\[\#AAA9A9\] { color: var(--line-strong) !important; }
.placeholder\:text-ui-coal\/50::placeholder, .placeholder\:text-ui-coal\/60::placeholder { color: var(--muted) !important; opacity: .7; }
/* styles inline des captures : citations (filet rust), listes (pepper) ; le blanc inline
   est celui des témoignages posés sur photo, on le garde */
[style*="border-color:rgb(216,89,28)"], [style*="border-color: rgb(216, 89, 28)"] { border-color: var(--accent) !important; }
[style^="color:rgb(41,38,37)"], [style*=";color:rgb(41,38,37)"] { color: var(--fg) !important; }
[style^="color:rgb(255,255,255)"], [style*=";color:rgb(255,255,255)"] { color: #fff !important; }
.bold { font-family: var(--font-b) !important; color: var(--fg) !important; }
.technique-page-container a:not([class]) { color: var(--accent) !important; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.hover\:bg-cta:hover { background-color: var(--accent) !important; }
.focus\:border-\[\#2973DB\]:focus, .focus\:border-\[\#2973db\]:focus { border-color: var(--accent) !important; }
/* citations : filet sanguine plus doux */
p.italic.border-l-2 { border-left-color: var(--sanguine) !important; border-left-width: 3px !important; font-family: var(--font-d) !important; font-size: 1.15rem !important; line-height: 1.45 !important; font-variation-settings: "opsz" 40, "SOFT" var(--soft); }

.border-ui-garlic, .border-ui-onion, .border-ui-union, .border-\[\#29262529\], .border-\[\#F5E9D3\],
.data-\[state\=open\]\:border-ui-onion[data-state="open"],
.data-\[state\=closed\]\:border-tech-container[data-state="closed"],
.data-\[state\=closed\]\:hover\:border-ui-onion\/40:hover[data-state="closed"] { border-color: var(--line) !important; }
.border-\[\#545251\] { border-color: var(--line-strong) !important; }
.border-ui-rust, .border-cta, .hover\:border-cta-hover:hover,
.data-\[state\=closed\]\:focus\:border-light-rust:focus[data-state="closed"],
.checked\:border-\[\#D8591C\]:checked { border-color: var(--accent) !important; }
.border-\[\#B4CBFF\], .border-\[\#FFC394\], .border-\[\#FFD87C\] { border-color: var(--accent-line) !important; }
.bg-ui-rust, .bg-cta-active, .bg-light-rust, .bg-orange-500,
.checked\:bg-\[\#D8591C\]:checked { background-color: var(--accent) !important; }
.\[box-shadow\:0_0_0_3px_\#CE5317\] { box-shadow: 0 0 0 2px var(--accent) !important; border-color: var(--surface) !important; }
.bg-\[\#F7BC5E\], .bg-\[\#F7BC5E\].text-gray-800 { background-color: var(--accent) !important; color: var(--accent-fg) !important; }
.disabled\:bg-ui-garlic:disabled { background-color: var(--bg) !important; }
.shadow-\[0px_4px_12px_0px_rgba\(0\,0\,0\,0\.04\)\] { --tw-shadow: var(--ombre-2); }
/* boutons d'origine (sélecteurs, « Afficher les détails », « Explorer ») : pilules */
.peau-main button.rounded-lg, .peau-main button.rounded-full { border-radius: var(--r-btn) !important; min-height: 44px; }
.peau-main button.bg-cta-active { background-color: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; }
.peau-main button.bg-cta-active * { color: var(--accent-fg) !important; }
.peau-main button.bg-\[\#F6F3F0\] { background-color: var(--surface-2) !important; border-color: var(--line) !important; }
.peau-main button.bg-\[\#F6F3F0\]:hover { border-color: var(--accent) !important; }
.peau-main button.bg-\[\#F6F3F0\] * { color: var(--fg) !important; }
.peau-main button[aria-disabled="true"] { opacity: .45; cursor: not-allowed !important; }
.peau-main button.border-cta { border-width: 1.5px !important; }
/* cartes d'origine : rayons généreux, sans filet */
.peau-main .technique-card, .peau-main .bg-tech-container, .peau-main .rounded-xl { border-radius: var(--r-md) !important; }
.peau-main .rounded-\[8px\], .peau-main .rounded-lg { border-radius: 12px !important; }
@media (max-width: 639px) { .peau-main .technique-card.max-sm\:rounded-none { border-radius: 0 !important; } }
/* icônes : les couleurs d'interface codées en dur dans les SVG suivent le thème.
   Les couleurs des schémas (froid/chaud) ne sont PAS touchées. */
svg [fill="#D8591C"], svg [fill="#2973DB"] { fill: var(--accent); }
svg [stroke="#D8591C"] { stroke: var(--accent); }
svg [fill="#545251"], svg [fill="#6B6866"] { fill: var(--muted); }
svg [stroke="#545251"], svg [stroke="#6B6866"] { stroke: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src^="data:image/svg+xml"] { filter: brightness(1.7) saturate(.8); } }
:root[data-theme="dark"] img[src^="data:image/svg+xml"] { filter: brightness(1.7) saturate(.8); }
.collection-arrow-wrapper svg, .text-\[\#AAA9A9\] svg { color: inherit; }
/* bascules (role=switch) : pilule accent, curseur qui glisse */
.peau-main button[role="switch"] {
  position: relative; width: 56px !important; height: 32px !important; border-radius: 999px !important;
  background: var(--line-strong) !important; border: 0 !important; padding: 0 !important; cursor: pointer;
  transition: background-color var(--duree) var(--easing);
}
.peau-main button[role="switch"][aria-checked="true"] { background: var(--accent) !important; }
.peau-main button[role="switch"] > span {
  position: absolute; top: 4px; left: 4px; width: 24px !important; height: 24px !important; border-radius: 50%;
  background: var(--surface) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transform: none !important;
  transition: left var(--duree) var(--easing);
}
.peau-main button[role="switch"][aria-checked="true"] > span { left: 28px; }
/* accordéons Radix : l'item ouvert est teinté, les autres sont sobres */
.peau-main [data-orientation="vertical"][data-state="open"] > div,
.peau-main div[data-state="open"].rounded-lg { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
.peau-main button[aria-controls^="radix-"] { cursor: pointer; }
.peau-main button[aria-controls^="radix-"] h5 { transition: color var(--duree) var(--easing); }
.peau-main div[data-state="open"] > div > button[aria-controls^="radix-"] h5 { color: var(--accent) !important; }
.peau-main div[data-state="closed"]:hover > div > button[aria-controls^="radix-"] h5 { color: var(--accent) !important; }
.peau-main .peau-accordeon-vide { color: var(--muted); font-size: .9rem; font-style: italic; margin: 0; }

/* ---- 6. Chrome commun : barre, tiroir, popover, dialogue, pied ----------- */
.barre {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  padding: .3rem var(--space); min-height: var(--h-barre); width: 100%;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: var(--font-b); font-size: 1rem;
}
header.peau-tete { position: sticky; top: 0; z-index: 60; width: 100%; }
.espace { flex: 1; min-width: 0; }
.marque {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .4rem;
  font-family: 'Lora', Georgia, serif; font-size: 1.5rem; font-weight: 500; font-style: normal; letter-spacing: -.01em; white-space: nowrap; flex-shrink: 0;
  font-variation-settings: normal; color: var(--fg) !important; text-decoration: none !important;   /* PlizME : Lora 500, choix de Jérôme (12/10/2026, n° 10 de tasks/plizme-logo-5.html) */
}
.marque .me { color: var(--sanguine); }
.marque .signe { width: 22px; height: 22px; flex-shrink: 0; color: var(--sanguine); }
.marque:hover { color: var(--accent) !important; }
/* .barre-colls : les quatre parties toujours visibles (planches et pages de
   partie), pour qu'on sente qu'on change de partie sans lire le fond de
   page. Celle où l'on est : pilule pleine à son accent. Les autres :
   discrètes, leur pastille (couleur propre, pas celle de la page courante)
   sert d'aperçu. Demande de Jérôme, 18/09. */
.barre-colls {
  display: flex; align-items: center; gap: .3rem; min-width: 0;
  padding-left: .6rem; margin-left: .3rem; border-left: 1px solid var(--line);
}
.barre-coll-item {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px;
  padding: .3rem .7rem; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap; text-decoration: none;
  transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}
.barre-coll-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.barre-coll-item[data-coll="bases"]::before { background: var(--c-bases); }
.barre-coll-item[data-coll="clitoris"]::before { background: var(--c-clitoris); }
.barre-coll-item[data-coll="interieur"]::before { background: var(--c-interieur); }
.barre-coll-item[data-coll="objets"]::before { background: var(--c-objets); }
.barre-coll-item.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.barre-coll-item:not(.is-active):hover { background: var(--surface-2); color: var(--fg); }
@media (max-width: 980px) { .barre-coll-item span { display: none; } .barre-coll-item { padding: .3rem .5rem; } }   /* 4 parties : libellés à partir de 981 px (mesuré : 39 px de marge en allemand, la langue la plus longue) */
.icone {
  width: 44px; height: 44px; flex-shrink: 0; display: inline-grid; place-items: center; padding: 0;
  border: 0; background: none; border-radius: var(--r-sm); color: var(--fg); cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing);
}
.icone svg { width: 22px; height: 22px; }
.icone:hover, .icone[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.icone .icone-soleil, .icone .icone-lune { display: block; }
:root:not([data-theme="dark"]) .icone .icone-lune { display: none; }
:root[data-theme="dark"] .icone .icone-soleil { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icone .icone-lune { display: block; }
  :root:not([data-theme="light"]) .icone .icone-soleil { display: none; }
}

.voile { position: fixed; inset: 0; background: var(--voile); z-index: 80; }
.voile[hidden] { display: none; }
.tiroir {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 90; width: min(100%, 360px);
  padding: 18px 18px 40px; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--fg); box-shadow: var(--ombre); font-family: var(--font-b); font-size: 1rem;
}
.tiroir[hidden] { display: none; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.tiroir-tete .etiq { margin: 0; }
.champ { width: 100%; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); font: inherit; margin: 8px 0 4px; }
.champ:focus { border-color: var(--accent); }
.recherche-etat { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.idx { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.idx-groupe { display: flex; align-items: center; gap: .5rem; margin: 18px 0 6px; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.idx-groupe::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--g-coll, var(--accent)); flex: none; }
.idx-groupe[data-coll="bases"] { --g-coll: var(--c-bases); }
.idx-groupe[data-coll="clitoris"] { --g-coll: var(--c-clitoris); }
.idx-groupe[data-coll="interieur"] { --g-coll: var(--c-interieur); }
.idx-groupe[data-coll="objets"] { --g-coll: var(--c-objets); }
.idx-lien { display: flex; gap: 10px; align-items: center; padding: 8px 10px; min-height: 44px; border-radius: var(--r-sm); color: var(--fg); text-decoration: none; }
.idx-lien .ic-planche { --ic-t: 30px; color: var(--g-coll, var(--accent)); }
.idx-lien:hover { background: var(--accent-soft); }
.idx-lien .num { color: var(--sanguine); min-width: 2.6em; font-variant-numeric: tabular-nums; font-size: .9em; font-weight: 600; }
.idx-lien .t { flex: 1; }
.idx-lien[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.idx-lien .lu { display: none; width: 18px; height: 18px; color: var(--accent); flex: none; align-self: center; }
.idx-lien[data-lu="true"] .lu { display: block; }
.idx-lien[data-filtre="masque"], .idx-groupe[data-filtre="masque"] { display: none; }
.idx-sections { margin-bottom: 8px; }
.idx-sections .idx-lien { min-height: 40px; padding: 6px 10px; }
.idx-sections .idx-lien .num { color: var(--muted); font-weight: 500; }

.barre-menu { position: relative; }
.popover-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 210;
  width: max(240px, 100%); max-width: min(340px, 92vw); max-height: min(72vh, 560px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombre); padding: 12px; color: var(--fg); text-align: left; font-family: var(--font-b); font-size: 1rem;
}
.popover-menu[hidden] { display: none; }
.popover-titre { padding: 6px 12px; margin: 0 0 4px; }
.popover-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.popover-lien, .popover-lien-inactif {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: .95rem; line-height: 1.3; text-decoration: none;
}
.popover-lien { color: var(--fg); cursor: pointer; }
.popover-lien:hover { background: var(--accent-soft); }
.popover-lien[aria-current] { color: var(--accent); font-weight: 600; }
.popover-lien-inactif { color: var(--muted); cursor: default; }
.popover-bientot { font-size: .75rem; color: var(--muted); flex: none; font-weight: 500; opacity: .8; }
.popover-actuelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Paramètres : <dialog> natif */
.dialogue-parametres {
  width: min(440px, 92vw); max-height: min(85vh, 680px); overflow-y: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--fg);
  font-family: var(--font-b); font-size: 1rem; line-height: 1.5; box-shadow: var(--ombre);
}
.dialogue-parametres::backdrop { background: var(--voile); }
.dialogue-parametres-entete { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dialogue-parametres-entete h2 { font-size: 1.25rem !important; margin: 0; }
.dialogue-parametres-corps { padding: 22px; display: flex; flex-direction: column; gap: 26px; }
.parametres-section { display: flex; flex-direction: column; gap: 10px; }
.parametres-section-titre { font-size: .85rem; font-weight: 700; margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.parametres-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.parametres-choix label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); cursor: pointer; font-size: .95rem; font-weight: 500;
}
.parametres-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.parametres-choix label:has(input:checked) { border-color: var(--accent); color: var(--accent-fg); background: var(--accent); }
.parametres-choix label:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.parametres-texte { color: var(--muted); font-size: .95rem; margin: 0; }
.parametres-progression-etat { font-size: 1rem; margin: 0; font-weight: 600; }
.parametres-bouton {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); background: transparent;
  color: var(--fg); cursor: pointer; align-self: flex-start; font: inherit; font-size: .95rem; font-weight: 500;
}
.parametres-bouton:hover { border-color: var(--accent); color: var(--accent); }
.parametres-bouton:disabled { opacity: .55; cursor: not-allowed; }
.parametres-langues-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.parametres-langues-liste .popover-lien, .parametres-langues-liste .popover-lien-inactif { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: .85rem; }

/* taille du texte : les captures sont en px, on agrandit le contenu (pas la barre) */
:root[data-taille="petite"] .peau-zoom { zoom: .92; }
:root[data-taille="grande"] .peau-zoom { zoom: 1.1; }

/* pied de page */
.pied { border-top: 1px solid var(--line); padding: 2.4rem var(--space) 3.5rem; margin-top: 2rem; background: var(--bg); color: var(--fg); font-family: var(--font-b); font-size: 1rem; }
.pied-int { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 2rem; }
@media (min-width: 800px) { .pied-int { grid-template-columns: 1fr 1.15fr; } }
.pied-liens, .pied-langues { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); }
.pied-liens a, .pied-langues a, .pied-langues span[aria-disabled] { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.pied-liens a:hover, .pied-langues a:hover { color: var(--accent); }
.pied-langues .popover-lien, .pied-langues .popover-lien-inactif { padding: 0; border-radius: 0; font-size: 1rem; gap: 6px; }
.pied-langues .popover-lien:hover { background: transparent; }
.pied-langues .popover-lien[aria-current] { color: var(--fg); font-weight: 600; }
.pied-langues-note { margin: 6px 0 0; font-size: .85rem; color: var(--muted); max-width: 32ch; }
.pied-copie { margin-top: 1.2rem; font-size: .85rem; color: var(--muted); }

/* ---- 7. Planches --------------------------------------------------------- */
/* la colonne de gauche et les paddings qu'elle imposait ont disparu du DOM */
.peau-main { width: 100%; background: var(--bg) !important; padding: 0 !important; overflow: visible !important; }
.technique-page-container { max-width: 1040px; margin: 0 auto; overflow: visible !important; } /* overflow-x-hidden cassait les onglets collants */
.peau-main [id] { scroll-margin-top: calc(var(--h-barre) + var(--h-onglets) + var(--h-titre, 0px) + 16px); }
.pl-tete { width: 100%; padding: clamp(1.4rem, 4vw, 2.6rem) var(--space) .8rem; max-width: 1040px; margin: 0 auto; font-family: var(--font-b); }
.pl-fil { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.pl-fil a, .pl-fil a[class] { color: var(--muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pl-fil a[class]:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.pl-fil .sep { opacity: .5; }
.pl-fil [aria-current] { color: var(--fg); font-weight: 600; }
.pl-titre-ligne { display: flex; gap: 1.1rem; align-items: flex-start; }
/* icône d'une planche (structure/site.json) : anneau fin de 64 px à la couleur de la partie, fond doux, tracé
   (masque de peau/icones.css, généré) posé à 64 % de l'anneau. Tailles : --ic-t. */
.ic-planche {
  --ic-t: 64px; flex: none; position: relative; display: inline-grid; place-items: center;
  width: var(--ic-t); height: var(--ic-t); border-radius: 50%;
  border: 1.4px solid currentColor; background: var(--accent-soft); color: var(--accent);
}
.ic-planche::before {
  content: ""; width: 64%; height: 64%; background: currentColor;
  -webkit-mask: var(--ic-m) center / contain no-repeat; mask: var(--ic-m) center / contain no-repeat;
}
.ic-planche.ic-moyenne { --ic-t: 48px; }
.pl-numero { margin: .35rem 0 .1rem; font-size: .9rem; font-weight: 700; color: var(--sanguine); letter-spacing: .04em; }
.pl-tete h1 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; line-height: 1.08 !important; margin: 0; font-variation-settings: "opsz" 144, "SOFT" var(--soft), "WONK" 0; }
.pl-sous { margin: .5rem 0 0; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); line-height: 1.45; max-width: 36em; }
.pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.2rem; font-size: .95rem; color: var(--muted); }
.pl-meta .pl-duree { display: inline-flex; align-items: center; gap: .4rem; }
.pl-meta .pl-duree svg { width: 18px; height: 18px; }
.pl-lue { min-height: 44px; padding: 0 1.1rem; font-size: .95rem; }
.pl-lue .coche { display: none; }
.pl-lue[aria-pressed="true"] .coche { display: block; }
@media (max-width: 639px) { .pl-titre-ligne { gap: .8rem; } .ic-planche.ic-tete { --ic-t: 54px; } }

/* les liens de notre cadre échappent à la règle d'origine « .technique-page-container a » (bleu souligné) */
.peau-main .pl-tete a, .peau-main .pl-onglets a, .peau-main .pl-pied a { text-decoration: none !important; }
.peau-main .pl-fil a { color: var(--muted) !important; }
.peau-main .pl-fil a:hover { color: var(--accent) !important; text-decoration: underline !important; }
.peau-main .pl-onglets a { color: var(--muted) !important; }
.peau-main .pl-onglets a:hover { color: var(--accent) !important; }
.peau-main .pl-onglets a[aria-current="true"] { color: var(--accent-fg) !important; }
.peau-main a.pl-ps, .peau-main a.pl-ps h3 { color: var(--fg) !important; }
.peau-main a.pl-ps p { color: var(--muted) !important; }
.peau-main a.pl-ps .pl-ps-sens { color: var(--sanguine) !important; }
.peau-main .pl-retour a { color: var(--fg) !important; }
.peau-main .pl-retour a:hover { color: var(--accent) !important; }

/* onglets collants sous la barre, avec la progression de lecture */
.pl-onglets {
  width: 100%; position: sticky; top: var(--h-barre); z-index: 50; margin: 0 0 .5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); font-family: var(--font-b);
}
.pl-onglets-int { max-width: 1040px; margin: 0 auto; padding: 0 var(--space); display: flex; align-items: center; gap: 1rem; min-height: var(--h-onglets); }
.pl-onglets-liste { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex: 1; min-width: 0; padding: 4px 0; }
.pl-onglets-liste::-webkit-scrollbar { display: none; }
.pl-onglets-liste a {
  white-space: nowrap; padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); border-radius: var(--r-btn); text-decoration: none; font-size: .95rem; font-weight: 600;
  transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing);
}
.pl-onglets-liste a .n { font-size: .78rem; font-weight: 700; color: var(--sanguine); }
.pl-onglets-liste a:hover { color: var(--accent); background: var(--accent-soft); }
.pl-onglets-liste a[aria-current="true"] { color: var(--accent-fg); background: var(--accent); }
.pl-onglets-liste a[aria-current="true"] .n { color: var(--accent-fg); }
.pl-progression { flex: none; width: clamp(64px, 12vw, 140px); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-progression > span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 120ms linear; }
.pl-progression-txt { flex: none; font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .pl-progression-txt { display: none; } }
@media (min-width: 768px) { .pl-onglets-liste { flex-wrap: wrap; } .pl-onglets-longs .pl-onglets-liste { flex-wrap: nowrap; } }
.pl-onglets-longs .pl-onglets-liste a { flex: none; white-space: nowrap; }
/* titre compact : sa ligne à lui, alignée à gauche, au-dessus des onglets.
   Le partager avec les onglets rognait le dernier dès que le titre est long. */
.pl-onglets-titre[hidden] { display: none !important; }
.pl-onglets-titre {
  display: none; align-items: baseline; gap: .35rem; margin: 0; min-width: 0;
  max-width: 100%; overflow: hidden; color: var(--fg); line-height: 1.2;
}
.pl-onglets.pl-titre-visible .pl-onglets-int {
  flex-wrap: wrap; row-gap: 0; padding-top: .35rem; padding-bottom: .2rem;
}
.pl-onglets.pl-titre-visible .pl-onglets-titre {
  display: flex; flex: 1 0 100%; max-width: 100%; min-height: 1.45rem;
}
.pl-onglets-num {
  flex: none; font-family: var(--font-b); font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; color: var(--sanguine);
}
.pl-onglets-sep { flex: none; color: var(--muted); font-weight: 600; }
.pl-onglets-nom {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-d); font-weight: 600; font-size: 1.02rem; color: var(--fg);
  font-variation-settings: "opsz" 48, "SOFT" var(--soft), "WONK" 0;
}

/* pied de planche : précédent / suivant en grandes cartes, puis retour */
.pl-pied { width: 100%; max-width: 1040px; margin: 2.5rem auto 0; padding: 0 var(--space) 1rem; font-family: var(--font-b); }
.pl-pied .etiq { display: block; margin-bottom: .6rem; }
.pl-prevsuiv { display: grid; gap: 12px; }
@media (min-width: 700px) { .pl-prevsuiv { grid-template-columns: 1fr 1fr; } }
.pl-ps {
  display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem 1.3rem; min-height: 112px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); text-decoration: none;
  transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}
.pl-ps:hover { border-color: var(--accent); box-shadow: var(--ombre-2); }
.pl-ps .pl-ps-sens { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--sanguine); }
.pl-ps .pl-ps-sens svg { width: 18px; height: 18px; }
.pl-ps--suiv { text-align: right; align-items: flex-end; }
.pl-ps-corps { display: flex; align-items: center; gap: .9rem; }
.pl-ps--suiv .pl-ps-corps { flex-direction: row-reverse; }
.pl-ps h3 { font-size: 1.35rem !important; margin: .2rem 0 0; }
.pl-ps p { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.4; }
.pl-ps--vide { visibility: hidden; }
.pl-retour { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 699px) { .pl-ps--suiv { text-align: left; align-items: flex-start; } .pl-ps--suiv .pl-ps-corps { flex-direction: row; } .pl-ps--vide { display: none; } }

/* mobile : deux débordements hérités de la capture — une grille à deux colonnes de cartes
   (Points G) et un titre de section « w-full » avec des marges latérales (Levier) */
@media (max-width: 639px) {
  .peau-main .grid.grid-cols-2:has(> .technique-card) { grid-template-columns: 1fr !important; }
  .peau-main div.w-full.border-b.border-\[\#545251\][class*="mx-"] { width: auto !important; }
}
/* mobile : la colonne de texte du concept touchait les bords (héritage de la capture) */
@media (max-width: 767px) { .peau-main section.full-width-mobile-only > section.flex.flex-col { padding-left: 1rem; padding-right: 1rem; } }

/* témoignages : cadre vidéo sombre, badge « Pratique » en pilule accent (déjà), légendes lisibles */
.peau-main figcaption span { font-size: .85rem !important; line-height: 1.35 !important; }
.peau-main figcaption span + span { font-size: .95rem !important; }

/* cartes vidéo appariées avec confiance (build.brancher_temoignages) : affordance
   de clic sur la vignette, sans toucher au reste de la carte d'origine */
.peau-main [data-video] { cursor: pointer; }
.peau-main [data-video]:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
/* ---- Mode « sans vidéo » : la planche doit se lire comme un texte --------
   La vidéo joue quatre rôles (build.marquer_roles_video pose data-video-role)
   et chacun appelle une réponse différente. Principe : jamais un cadre vide —
   soit un texte de synthèse prend la place, soit le bloc disparaît et la page
   se recompose sans lui.

   ⚠️ GARDE-FOU, appris à la dure : une première version masquait les ancêtres
   de la vignette sans condition et emportait avec eux de vrais paragraphes
   (152 textes perdus sur 38 planches, vus au balayage). Les structures d'origine
   varient trop d'une planche à l'autre pour qu'on puisse supposer qu'un
   ancêtre ne contient que la vidéo. D'où `:not(:has(…))` sur CHAQUE règle qui
   masque autre chose que la vignette : on ne masque jamais un conteneur qui
   porte un titre, un paragraphe, une liste ou un tableau.

   ⚠️ Un <p> ne peut pas contenir un <div> : le navigateur ferme le paragraphe,
   donc l'intertitre « Points de vue » et sa grille sont FRÈRES dans le DOM,
   pas imbriqués comme le laisse croire le HTML d'origine. D'où le `:has(+ …)`. */

/* ce qui compte comme « vrai texte » et protège un conteneur du masquage */
/* (facteur commun des :not() ci-dessous : h1-h5, p, li, table) */

/* 1. la vignette elle-même : toujours */
:root[data-videos="sans"] .peau-main [data-video-role] { display: none; }

/* 2. ses enveloppes, à n'importe quelle profondeur (cadre arrondi, cellule de
      grille, carte, colonne) — mais UNIQUEMENT celles qui ne portent aucun
      texte réel. Une règle par niveau de profondeur laissait passer les
      emboîtements les plus profonds (colonne entière de communication.html,
      carte de superposition.html) ; le garde-fou `:not(:has(…))` rend la
      version « descendant » sûre : un conteneur qui porte du texte reste. */
:root[data-videos="sans"] .peau-main div:has([data-video-role]):not(:has(:is(h1, h2, h3, h4, h5, p, li, table))) { display: none; }

/* 2 bis. les lecteurs hérités de la capture. La capture a gardé les <video
      controls> d'origine mais pas leur source (une adresse temporaire, qui
      ne chargera jamais). En mode avec vidéo ils sont invisibles, couverts par
      l'affiche de la carte ; dès que la carte est masquée ils réapparaissent —
      rectangle noir avec des commandes à 0:00, ou affiche surmontée d'une
      barre de lecture pour les vidéos d'ouverture de section. La lecture
      réelle passe par la <dialog> commune (hors de .peau-main) : ces lecteurs
      ne servent à rien ici.

      `controls` est le bon critère : seuls ces lecteurs en portent, les 112
      animations n'en ont jamais — c'est ce qui les distingue sans dépendre
      d'une classe Tailwind. On masque plutôt que de retirer du DOM : leur
      boîte `absolute` porte la hauteur du cadre en mode avec vidéo, et leurs
      pistes <track> sont la matière des transcriptions. */
:root[data-videos="sans"] .peau-main video[controls] { display: none; }

/* 3. « Points de vue » : l'intertitre (un <p> en capitales) resterait seul
      au-dessus du vide. Un prénom suivi du titre d'une vidéo n'est pas du
      contenu : c'est le texte de synthèse (.sv-bloc) qui informe ici. */
:root[data-videos="sans"] .peau-main p[class*="uppercase"]:has(+ [class*="grid"] [data-video-role="temoignage"]) { display: none; }

/* 4. une grille qui accueillait une vidéo à côté d'un texte repasse sur une
      colonne : sinon le texte resté seul occupe une demi-largeur, vide en face.
      ⚠️ `grid-template-columns: 1fr` ne suffit pas : une carte plus loin dans
      LA MÊME grille peut porter `col-span-2` (Tailwind) — avec une seule
      colonne explicite, le navigateur en fabrique alors une seconde, implicite
      et dimensionnée au contenu, ce qui redonne exactement la même asymétrie
      (mesuré : 182 / 726 px sur « Le Contexte », la vidéo n'étant même plus en
      cause). `display: flex` retire la grille — et son calcul de pistes
      implicites — entièrement : chaque carte reprend la largeur pleine du
      conteneur, comme déjà le cas en dessous de 768 px (ces mêmes classes
      sont `flex flex-col` avant que `md:grid` ne prenne le relais). */
:root[data-videos="sans"] .peau-main [class*="grid-cols"]:has([data-video-role]) {
  display: flex !important;
  flex-direction: column !important;
}

/* une grille à deux colonnes tient sa largeur du contenu quand les classes
   Tailwind ont été élaguées à la capture. La vidéo masquée, la cellule
   s'effondre — mesuré à 115 px de large pour 1 900 px de haut. Toute grille
   qui accueille un texte de synthèse repasse donc sur une colonne (même
   raison qu'au-dessus : `display: flex`, pas `grid-template-columns`).
   Sauf les grilles de techniques (`global-technique-grid`) : le texte de
   synthèse y est sur la carte vidéo, qui occupe déjà les deux colonnes.
   Écraser toute la grille mettait aussi les dessins l'un sous l'autre, chacun
   sur toute la largeur, l'illustration flottant au milieu (La Superposition,
   « Glisser sur la peau »). */
:root[data-videos="sans"] .peau-main [class*="grid"]:not([class*="technique-grid"]):has(.sv-bloc) {
  display: flex !important;
  flex-direction: column !important;
}
/* et la cellule elle-même ne doit pas pouvoir rétrécir sous sa largeur utile */
:root[data-videos="sans"] .peau-main *:has(> .sv-bloc) { min-width: 0; }
:root[data-videos="sans"] .peau-main .sv-bloc { min-width: 16rem; }

/* un bloc posé à la place d'une démo atterrit dans le cadre qui portait la
   vidéo : ce cadre a overflow:hidden et un rapport d'image fixe, qui
   rogneraient un texte un peu long */
:root[data-videos="sans"] .peau-main *:has(> .sv-bloc) { overflow: visible !important; aspect-ratio: auto !important; }
/* La couche média du cadre (`absolute inset-0`, avec sa vignette ou son affiche) reste dans le flux de clic quand la vidéo est masquée : sur
   « Les Angles » sa boîte garde la hauteur 16/9 de la vidéo, déborde sur le bouton « Explorer » qui suit et l'intercepte (le bouton paraît libre
   mais ne reçoit plus le clic — trouvé par tester_etats le 04/10, quand ce mode est devenu celui de tout le public). Le texte est frère de cette
   couche : on la retire. */
:root[data-videos="sans"] .peau-main *:has(> .sv-bloc) > [class~="absolute"][class*="inset-0"] { display: none !important; }
/* Même défaut sans cadre voisin : sur « Le Contexte » la couche `absolute inset-0` d'un lecteur masqué perdait son parent `relative` (masqué par la
   règle 2) et se calait sur la page entière — une boîte de 1024 × 768 invisible au-dessus du haut de la planche, qui interceptait le fil
   d'Ariane et « Marquer comme lue ». Toute couche qui n'enveloppe qu'un lecteur hérité est retirée. */
:root[data-videos="sans"] .peau-main [class~="absolute"]:has(video[controls]):not(:has(:is(h1, h2, h3, h4, h5, p, li, table))) { display: none !important; }

/* la figcaption d'origine (prénom + citation) répète le témoignage qu'un
   bloc « En pratique » synthétise déjà juste au-dessus : build.py la marque
   `data-sv-couverte` uniquement quand une synthèse existe pour CETTE carte —
   les autres gardent leur citation posée (design du 19/09). */
:root[data-videos="sans"] .peau-main figcaption[data-sv-couverte],
:root[data-videos="sans"] .peau-main .pl-corps-carte-legende[data-sv-couverte] { display: none; }

/* texte de synthèse (posé par build.py depuis contenu/<coll>/<slug>.json) :
   invisible tant qu'on regarde les vidéos, corps de la fiche en mode texte.
   Encadré en carte (mêmes tokens que .technique-card) : sans ça le bloc se
   lit comme du texte ajouté après coup, pas comme un élément du site — retour
   direct de Jérôme le 23/09 après la passe 3 (233 blocs). */
.sv-bloc { display: none; }
:root[data-videos="sans"] .peau-main .sv-bloc {
  display: block; margin: 1.8rem 0; padding: 1.5rem 1.7rem;
  background: var(--surface); border-radius: var(--r-md);
  border-left: 3px solid var(--sanguine);
}
.sv-bloc p.sv-bloc-titre {
  font-family: var(--font-b); font-size: .85rem; font-weight: 700; margin: 0 0 .9rem;
  color: var(--sanguine) !important; text-transform: uppercase; letter-spacing: .05em;
}
.sv-bloc p { font-family: var(--font-b) !important; font-size: 1rem !important; line-height: 1.65 !important; color: var(--fg) !important; margin: 0 0 .9rem; }
.sv-bloc p:last-of-type { margin-bottom: 0; }
.sv-bloc p.sv-bloc-soustitre {
  font-family: var(--font-d) !important; font-size: 1.05rem !important; font-weight: 600;
  color: var(--fg) !important; margin: 1.4rem 0 .5rem;
}
.sv-bloc p.sv-bloc-soustitre:first-of-type { margin-top: 0; }
.sv-bloc .sv-bloc-liste, .sv-bloc .sv-bloc-reperes {
  list-style: none; margin: 0 0 .9rem; padding: 0;
}
.sv-bloc .sv-bloc-liste li, .sv-bloc .sv-bloc-reperes li {
  font-family: var(--font-b); font-size: 1rem; line-height: 1.6; color: var(--fg);
  position: relative; padding-left: 1.15rem; margin: 0 0 .55rem;
}
/* le filet sanguine remplace la puce : même repère visuel que les citations */
.sv-bloc .sv-bloc-liste li::before, .sv-bloc .sv-bloc-reperes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .42rem; height: .42rem; border-radius: 999px; background: var(--sanguine);
}
/* les repères sont courts : deux colonnes dès qu'il y a la place */
@media (min-width: 720px) {
  .sv-bloc .sv-bloc-reperes { columns: 2; column-gap: 2rem; }
  .sv-bloc .sv-bloc-reperes li { break-inside: avoid; }
}

/* plus spécifique que `.sv-bloc p` ci-dessus, sinon la ligne de source hérite
   de la taille du corps de texte */
.sv-bloc p.sv-bloc-source { font-size: .85rem !important; color: var(--muted) !important; margin: .9rem 0 0; }

/* au-delà de 180 mots, seul le premier paragraphe reste visible : le reste
   se replie derrière ce bouton (build.py, SEUIL_REVELE_SV). Même mécanisme
   que le bloc « Explorer » d'Angles — `button[data-revele]`, câblé par
   peau.js — donc aucun script à ajouter ici. */
.sv-bloc .sv-bloc-revele-bouton {
  display: inline-flex; align-items: center; gap: .3rem; margin: .2rem 0 0;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-b); font-size: .95rem; font-weight: 600;
  color: var(--sanguine); text-decoration: underline; text-underline-offset: .2em;
}
.sv-bloc .sv-bloc-detail { margin-top: .9rem; }
.sv-bloc .sv-bloc-detail[hidden] { display: none; }

/* onglet « Témoignages » (essai 23/09) : la synthèse n'est même pas posée en
   clair — un bouton, et le choix de la lire ou non revient à la personne. Le
   bouton est plein (pas juste souligné) : c'est ici le seul contenu de
   l'onglet avant le clic, il doit avoir la même présence qu'un vrai CTA. */
.pl-section-avis { margin: 2rem 0; }
.pl-section-avis .sv-avis-intro {
  font-family: var(--font-b); font-size: 1.05rem; color: var(--muted); margin: 0 0 1.1rem;
}
.pl-section-avis .sv-avis-bouton {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  min-height: 48px; padding: 0 1.4rem; border-radius: var(--r-btn);
  border: 1.5px solid var(--sanguine); background: transparent;
  font-family: var(--font-b); font-size: 1rem; font-weight: 600; color: var(--sanguine);
}
.pl-section-avis .sv-avis-bouton:hover { background: var(--surface-2); }
.pl-section-avis .sv-avis-detail { margin-top: 1.4rem; }
.pl-section-avis .sv-avis-detail[hidden] { display: none; }

/* lecteur plein écran des témoignages/démos (dialog native) */
.dialogue-video { width: min(960px, 94vw); border: none; padding: 0; background: #000; border-radius: var(--r-lg); overflow: hidden; }
.dialogue-video::backdrop { background: rgba(0, 0, 0, .82); }
.dialogue-video video { display: block; width: 100%; max-height: 86vh; background: #000; }
.dialogue-video-fermer { position: absolute; top: 10px; right: 10px; z-index: 1; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 999px; }
.dialogue-video-fermer:hover, .dialogue-video-fermer:focus-visible { background: rgba(0, 0, 0, .75); }
.dialogue-video-message { margin: 0; padding: 3rem 2rem; color: #fff; text-align: center; font-size: 1.05rem; }

/* texte de reecriture (build.injecter_corps, contenu/<coll>/<slug>.json clé
   `corps`) : remplace le texte d'origine au build (CLAUDE.md, « CONTRAINTE
   CONTENU »). Prose normale, PAS encadrée comme .sv-bloc : c'est le contenu
   principal de la section, pas une synthèse annexe (28/09). */
.pl-corps { margin: 1.2rem 0 1.8rem; }
.pl-corps p { font-family: var(--font-b); font-size: 1.05rem; line-height: 1.7; color: var(--fg); margin: 0 0 1.1rem; }
.pl-corps h4 { font-family: var(--font-d); font-size: 1.15rem; font-weight: 600; color: var(--fg); margin: 1.6rem 0 .6rem; }
.pl-corps h4:first-child { margin-top: 0; }
.pl-corps ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.pl-corps li {
  font-family: var(--font-b); font-size: 1.05rem; line-height: 1.6; color: var(--fg);
  position: relative; padding-left: 1.15rem; margin: 0 0 .55rem;
}
.pl-corps li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .42rem; height: .42rem; border-radius: 999px; background: var(--sanguine);
}
.pl-corps strong { color: var(--sanguine); font-weight: 700; }
.pl-corps a.pd-lien { color: var(--sanguine); text-decoration: underline; text-underline-offset: .15em; }
.pl-corps a.pd-lien:hover { opacity: .8; }
/* liens écrits dans le texte greffé (greffe_texte.py) : ils vivent dans les
   blocs d'origine, hors .pl-corps, et y prenaient le bleu d'origine */
.peau-main a.pd-lien { color: var(--sanguine) !important; text-decoration: underline; text-underline-offset: .15em; }
.peau-main a.pd-lien:hover { opacity: .8; }

/* comparaison chaud/froid (Edging) : mêmes couleurs que les panneaux détails
   d'origine, jamais touchées par la peau (schémas, voir CLAUDE.md). Flex, pas
   grid : même précaution que .pl-corps-cartes, contenu figé au build ici mais
   principe tenu partout dans .pl-corps. */
.pl-corps-colonnes { display: flex; flex-direction: column; gap: 1.2rem; margin: 0 0 1.1rem; }
.pl-corps-col { display: flex; flex-direction: column; gap: .5rem; }
.pl-corps-col h4 { margin: 0; }
.pl-corps-col p { margin: 0; }
.pl-corps-barre { height: 5px; border-radius: 3px; width: 100%; max-width: 330px; }
.pl-corps-barre-chaud { background: linear-gradient(90deg, #F0B429, #E0402B); }
.pl-corps-barre-froid { background: #4FC3E8; }
.pl-corps-schema { margin: 0 0 1.1rem; }
.pl-corps-schema svg { width: 100%; height: auto; display: block; }
@media (min-width: 640px) { .pl-corps-colonnes { flex-direction: row; } .pl-corps-col { flex: 1 1 0; } }

/* panneau depliable ecrit avec notre texte (bloc `revele` de render_corps_blocs,
   lot 5 groupe 2 — Angles « Explorer comment font les autres », Points G
   « zones ») : meme mecanique que peau-revele (peau.js, button[data-revele]),
   juste habille dans la charte du texte reecrit plutot que dans les classes
   Tailwind d'origine. */
.pl-corps-revele-bouton {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem;
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--sanguine); font-family: var(--font-b);
  font-size: .95rem; font-weight: 600; cursor: pointer;
}
.pl-corps-revele-bouton:hover, .pl-corps-revele-bouton:focus-visible { background: var(--bg); }
.pl-corps-revele-panneau { margin: 0 0 1.1rem; }
.pl-corps-revele-panneau > *:last-child { margin-bottom: 0; }

/* cartes « Points de vue » reconstruites (build.rendre_cartes_html) : mêmes
   attributs que les cartes d'origine (data-video, data-video-role,
   figcaption) donc les mêmes règles de masquage/citation en mode sans vidéo
   et le même clic-pour-ouvrir s'appliquent sans rien ajouter ici. */
/* flex, pas grid : injecter_sans_video insere parfois un .sv-bloc DANS une
   .pl-corps-carte (avant son <div class="aspect-video...">, son seul repère
   de position) — sur une piste `1fr` sans largeur intrinsèque, ce contenu
   imprévu fait s'effondrer la carte à 0×0 (même bug de fond que celui déjà
   documenté plus haut pour les grilles d'origine ; même remède : un flex-basis
   explicite retire le calcul de piste implicite, `1fr` n'y est pas exposé). */
.pl-corps-cartes { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.pl-corps-carte { flex: 1 1 calc(50% - .5rem); min-width: 140px; margin: 0; }
@media (min-width: 640px) { .pl-corps-carte { flex-basis: calc(33.333% - .667rem); } }
.pl-corps-carte-cadre {
  aspect-ratio: 16 / 9; border-radius: var(--r-md); background-color: var(--surface-2);
  background-size: cover; background-position: center;
}
/* pas de data-video (carte jamais appariee a une video, cf CLAUDE.md) :
   affiche fixe, pas de curseur cliquable — .peau-main [data-video] pose déjà
   cursor:pointer pour les autres */
.pl-corps-carte-legende { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.pl-corps-carte-legende span { font-family: var(--font-b); font-size: .85rem; line-height: 1.35; color: var(--muted); }
.pl-corps-carte-legende span + span { font-size: .95rem; color: var(--fg); }

/* ---- 8. Contenu réinjecté (panneaux « Afficher les détails », fiches maison) */
.plaisir-details p, .plaisir-details ul, .plaisir-details .pd-tableau, .plaisir-details .pd-media-vide span { font-family: var(--font-b) !important; color: var(--muted) !important; }
.plaisir-details h5 { font-family: var(--font-d) !important; color: var(--fg) !important; }
.plaisir-details .pd-citation { border-left-color: var(--sanguine) !important; font-family: var(--font-d) !important; font-size: 1.1rem !important; }
.plaisir-details .pd-lien { color: var(--accent) !important; }
.plaisir-details .pd-separateur { border-top-color: var(--line) !important; }
.plaisir-details .pd-media-vide { border-color: var(--line-strong) !important; background: var(--surface-2) !important; }
.plaisir-details .pd-encadre { border-color: var(--accent-line) !important; background: var(--accent-soft); }
.plaisir-details .pd-encadre-titre { font-family: var(--font-b) !important; color: var(--accent) !important; }
.plaisir-details .pd-tableau th { background: var(--accent-soft-2) !important; color: var(--fg) !important; font-family: var(--font-b) !important; }
.plaisir-details .pd-tableau td { background: var(--surface-2) !important; }

/* ---- 9. Page de partie --------------------------------------------------- */
.co-main { width: min(1120px, 100%); margin: 0 auto; padding: 0 var(--space) 3rem; font-family: var(--font-b); }
.co-hero { display: grid; gap: clamp(1.2rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 5vw, 3rem) 0 1rem; }
@media (min-width: 800px) { .co-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.co-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem) !important; line-height: 1.05 !important; margin: .3rem 0 .9rem; font-variation-settings: "opsz" 144, "SOFT" var(--soft), "WONK" 0; }
.co-lead { margin: 0; max-width: 34em; color: var(--muted); font-size: 1.15rem; line-height: 1.55; }
.co-stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: var(--muted); }
.co-stats b { display: block; font-family: var(--font-d); font-size: 1.7rem; color: var(--sanguine); font-weight: var(--title-w); line-height: 1.1; font-variation-settings: "opsz" 72, "SOFT" var(--soft); }
.co-motif { margin: 0; color: var(--accent); display: grid; place-items: center; }
.co-motif circle[fill^="url"] { opacity: .35; }
.co-motif svg { width: min(100%, 440px); height: auto; }   /* poses 1000×640 (peau/poses.py), plus larges que les anciens reliefs carrés */
@media (max-width: 799px) { .co-motif { order: -1; } .co-motif svg { width: min(78%, 300px); } }
.co-commencer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem;
  margin: 1.4rem 0 .5rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.co-commencer p { margin: 0; }
.co-commencer .etiq { display: block; margin-bottom: .15rem; }
.co-commencer .co-commencer-titre { font-family: var(--font-d); font-size: 1.3rem; font-weight: var(--title-w); color: var(--fg); }
.co-commencer .btn { flex: none; }
.co-groupe { margin: 2.4rem 0 0; }
.co-groupe h2 { font-size: clamp(1.5rem, 3vw, 1.95rem) !important; margin: 0 0 .25rem; }
.co-groupe .co-groupe-meta { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; }
.co-grille { display: grid; gap: 12px; }
@media (min-width: 768px) { .co-grille { grid-template-columns: 1fr 1fr; } }
.co-carte {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: .4rem 1rem; align-items: start;
  padding: 1.15rem 1.2rem 1.1rem; min-height: 128px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--fg); text-decoration: none;
  transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing), transform var(--duree) var(--easing);
}
.co-carte:hover { border-color: var(--accent); box-shadow: var(--ombre-2); }
.co-carte:focus-visible { outline-offset: 2px; }
.co-carte-icone { grid-row: 1 / span 3; }
.co-carte-num { font-size: .82rem; font-weight: 700; color: var(--sanguine); letter-spacing: .04em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.co-carte-num .co-carte-duree { color: var(--muted); font-weight: 600; letter-spacing: 0; }
.co-carte h3 { font-size: 1.35rem !important; margin: 0; line-height: 1.2 !important; }
.co-carte p { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.4; }
/* étiquette « lue » : pleine dans l'accent de la partie, c'est elle qui
   porte l'état — pas l'icône, qui reste identique lue ou non. (Avant le 18/09,
   la pastille de l'icône passait pleine dans l'accent à la lecture : comme le
   dessin de l'icône est LUI AUSSI tracé dans cet accent, il disparaissait,
   avalé par son propre fond — un rond plein sans dessin.) */
.co-carte .co-lu { position: absolute; top: 14px; right: 14px; display: none; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--accent-fg); background: var(--accent); border-radius: var(--r-btn); padding: 4px 10px 4px 8px; }
.co-carte .co-lu svg { width: 14px; height: 14px; }
.co-carte[data-lu="true"] .co-lu { display: inline-flex; }
.co-autres { margin: 3rem 0 0; }
.co-autres h2 { font-size: 1.5rem !important; margin: 0 0 .9rem; }
.co-autres-grille { display: grid; gap: 12px; }
@media (min-width: 700px) { .co-autres-grille { grid-template-columns: 1fr 1fr 1fr; } }
.co-autre {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.3rem; min-height: 140px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--fg); text-decoration: none;
  transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}
.co-autre:hover { border-color: var(--c-lien); box-shadow: var(--ombre-2); }
.co-autre .etiq { color: var(--c-lien); display: flex; align-items: center; gap: .5rem; }
.co-autre .etiq::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-lien); }
.co-autre h3 { font-size: 1.4rem !important; margin: .15rem 0 0; }
.co-autre p { color: var(--muted); font-size: .95rem; margin: 0; }
.co-autre[data-coll="bases"] { --c-lien: var(--c-bases); }
.co-autre[data-coll="clitoris"] { --c-lien: var(--c-clitoris); }
.co-autre[data-coll="interieur"] { --c-lien: var(--c-interieur); }
.co-autre[data-coll="objets"] { --c-lien: var(--c-objets); }

/* ---- 10. (libre : l'accueil a sa propre feuille, peau/accueil.css — 18/09) ---- */

/* ---- 11. Mouvement réduit, impression ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- 7b. Refonte de la lecture (05/10/2026) : En bref · mythe · à essayer ----
   Blocs AJOUTÉS (build.poser_refonte) autour du texte existant : une couche rapide
   (l'essentiel en trois lignes, le mythe, trois gestes pour ce soir) au-dessus du texte. */
.pl-resume, .pl-mythe, .pl-essayer { width: 100%; max-width: 1040px; margin: 2rem auto; font-family: var(--font-b); }
.pl-resume { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem 1.8rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.7rem; }
.pl-resume-titre { font-family: var(--font-d); font-variation-settings: "SOFT" var(--soft); font-weight: var(--title-w);
  font-size: 1.35rem; line-height: 1.2; color: var(--accent, var(--vin)); margin: 0; }
.pl-resume ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.pl-resume li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .65rem; align-items: start; font-size: 1rem; line-height: 1.55; color: var(--fg); }
.pl-resume li b { font-weight: 700; }
.pl-coche { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent, var(--vin)); color: var(--bg);
  display: grid; place-items: center; font-size: .78rem; margin-top: .12rem; }
.pl-etiq { font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sanguine); margin: 0 0 .35rem; }

.pl-mythe { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.pl-mythe > div { padding: 1.5rem 1.7rem; }
.pl-mythe-m { background: var(--surface-2); }
.pl-mythe-r { background: var(--surface); }
.pl-mythe-m p:last-child { font-family: var(--font-d); font-variation-settings: "SOFT" var(--soft); font-size: 1.3rem; line-height: 1.3; color: var(--fg); margin: 0; }
.pl-mythe-r p:last-child { font-size: 1.02rem; line-height: 1.6; color: var(--muted); margin: 0; }

.pl-essayer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 1.6rem 2rem;
  background: var(--accent, var(--vin)); color: var(--bg); border-radius: 24px; padding: 1.9rem 2rem; }
.pl-essayer .pl-etiq { color: var(--bg); opacity: .8; }
.pl-essayer h2 { font-family: var(--font-d); font-variation-settings: "SOFT" var(--soft); font-weight: var(--title-w);
  font-size: 1.7rem; line-height: 1.15; margin: 0; color: var(--bg); }
.pl-essayer-sous { margin: .6rem 0 0; opacity: .9; font-size: 1rem; line-height: 1.5; }
.pl-essayer ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; counter-reset: pl-e; }
.pl-essayer li { counter-increment: pl-e; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem; align-items: start; font-size: 1.02rem; line-height: 1.5; }
.pl-essayer li::before { content: counter(pl-e); width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--bg) 22%, transparent);
  display: grid; place-items: center; font-weight: 700; }
@media (max-width: 700px) {
  .pl-resume, .pl-essayer { grid-template-columns: 1fr; }
  .pl-mythe { grid-template-columns: 1fr; }
  .pl-resume, .pl-mythe, .pl-essayer { margin-inline: auto; width: calc(100% - 2 * var(--space)); }
}
@media (min-width: 701px) { .pl-resume, .pl-mythe, .pl-essayer { width: calc(100% - 2 * var(--space)); } }


/* ---- Parcours guidé (page des offres) ---- */
.cpt-parcours { margin-bottom: 1.4rem; }
.cpt-parcours fieldset { border: 0; padding: 0; margin: 1.1rem 0 0; min-width: 0; }
.cpt-parcours legend { font-family: var(--font-d); font-weight: var(--title-w); font-size: 1.1rem; padding: 0; margin-bottom: .45rem; color: var(--fg); }
.cpt-parcours .cpt-case { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem 0; }
.cpt-parcours form .btn { margin-top: 1.2rem; }
.cpt-parcours #parcours-resultat { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.cpt-parcours-liste { padding-left: 1.3rem; display: grid; gap: .75rem; }
.cpt-parcours-liste li { line-height: 1.5; }
.cpt-parcours-liste a { font-weight: 700; }
.cpt-parcours-coll { color: var(--muted); font-size: .92rem; }
.cpt-parcours-pourquoi { display: block; color: var(--muted); font-size: .92rem; }


/* ---- 7c. Refonte des cartes de technique : citation isolée, idée en gras (05/10/2026) ----
   Couche de lecture ajoutée par peau.js (initCartes) : le texte n'est jamais modifié, seulement habillé. La citation vit dans un conteneur
   `.pl-citation` (fond, espacement, pastille) ; le repli ne touche que le paragraphe nu, donc il coupe toujours sur une ligne entière. */
.peau-main .technique-card .pl-idee { font-weight: 700; color: var(--fg); }
.peau-main .technique-card .pl-citation {
  position: relative; background: var(--surface-2); border-radius: var(--r-md);
  padding: 1.05rem 1.2rem 1.05rem 3.4rem; margin-top: .9rem;
}
.peau-main .technique-card .pl-citation::before {
  content: "\201C"; position: absolute; left: .85rem; top: .8rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent, var(--vin)); color: var(--bg); display: grid; place-items: center;
  font-family: var(--font-d); font-style: normal; font-size: 1.5rem; line-height: 1; padding-top: .35rem;
}
.peau-main .technique-card .pl-citation p.italic {
  border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important;
  font-size: 1rem; line-height: 1.6; color: var(--fg) !important;
}
.peau-main .technique-card p.pl-replie { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.peau-main .technique-card.border p.pl-replie { -webkit-line-clamp: 6; }
.peau-main .technique-card p.pl-replie.pl-replie-inutile { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pl-lire:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.peau-main .technique-card .pl-lire {
  align-self: flex-start; background: none; border: 0; padding: .35rem 0 0; margin: 0 0 0 .1rem; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--accent, var(--vin)); text-decoration: underline; text-underline-offset: 3px;
  min-height: 40px; display: inline-flex; align-items: center; padding-top: 0;
}
.peau-main .technique-card .pl-citation + .pl-lire { margin-left: 3.4rem; }
.peau-main [hidden] { display: none !important; }   /* « Lire la suite » masqué (hidden) restait visible : display:inline-flex l'emportait sur l'attribut */

/* ---- Téléphone étroit : la barre du haut tient dans l'écran (six boutons de 44 px débordaient de 5 px à 375) ---- */
@media (max-width: 400px) {
  .barre .icone { width: 40px; min-width: 40px; height: 40px; }
}
/* Les pastilles des parties se superposaient au bouton « FR » sur téléphone étroit : elles disparaissent sous 520 px (les parties restent
   dans le menu ☰). Quatre pastilles (05/10/2026) demandent ~96 px : mesuré, elles chevauchaient le menu Langue de 441 à 500 px avec
   l'ancien seuil (440 px) ; resserrées jusqu'à 640 px, elles tiennent dès 521 px. */
@media (max-width: 640px) { .barre .barre-colls { gap: .1rem; padding-left: .35rem; margin-left: .15rem; } .barre .barre-coll-item { padding: .3rem .4rem; } }
@media (max-width: 520px) { .barre .barre-colls { display: none; } }

/* ---- 7d. PROPOSITION « Lecture confort » (05/10/2026) — activée par ?lecture=2 (mémorisée), désactivée par ?lecture=0 ----
   Mesuré : nos tailles (16 px) et nos contrastes (≈ 7) valent ceux du site d'origine ; ce qui fatigue, ce sont les LIGNES TROP LONGUES (≈ 120 caractères,
   contre ≈ 45 chez eux) et un texte courant en bordeaux atténué. Ici : colonne de lecture ≤ 66 caractères, texte 18 px / interligne 1,7 en encre
   quasi pleine (contraste ≈ 12), titres plus grands et plus nets, paragraphes mieux séparés. */
html.lecture-v2 .peau-main { --lecture-texte: color-mix(in srgb, var(--fg) 94%, var(--bg)); }
html.lecture-v2 .peau-main p,
html.lecture-v2 .peau-main li,
html.lecture-v2 .peau-main .pl-corps,
html.lecture-v2 .peau-main .sv-bloc,
html.lecture-v2 .peau-main .pd-corps { font-size: 1.125rem !important; line-height: 1.72 !important; color: var(--lecture-texte) !important; font-weight: 400 !important; }
/* la colonne de lecture : ≤ 66 caractères, collée à gauche dans la carte (les cartes gardent leur largeur : fond, filet, citation) */
html.lecture-v2 .peau-main .technique-card p:not(.italic),
html.lecture-v2 .peau-main .pl-corps > p,
html.lecture-v2 .peau-main .pl-corps li,
html.lecture-v2 .peau-main #the-big-idea p,
html.lecture-v2 .peau-main #techniques .pl-corps > p,
html.lecture-v2 .peau-main .sv-bloc p,
html.lecture-v2 .peau-main .sv-bloc li,
html.lecture-v2 .peau-main .cps-section .pd-corps p,
html.lecture-v2 .peau-main .cps-section .pd-corps li { max-width: 38rem; }
html.lecture-v2 .peau-main p + p { margin-top: 1.1em; }
/* le premier paragraphe d'une section : un cran au-dessus, il donne le ton */
html.lecture-v2 .peau-main #the-big-idea .pl-corps > p:first-of-type,
html.lecture-v2 .peau-main #techniques .pl-corps > p:first-of-type { font-size: 1.28rem !important; line-height: 1.6 !important; color: var(--fg) !important; }
/* titres : hiérarchie nette */
html.lecture-v2 .peau-main h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem) !important; line-height: 1.12 !important; color: var(--fg) !important; }
html.lecture-v2 .peau-main h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; line-height: 1.2 !important; color: var(--fg) !important; margin-top: 2.2rem !important; }
html.lecture-v2 .peau-main h4, html.lecture-v2 .peau-main h5 { font-size: 1.32rem !important; line-height: 1.25 !important; color: var(--fg) !important; margin-bottom: .55rem !important; }
html.lecture-v2 .peau-main .technique-card { padding: 1.6rem 1.7rem 1.7rem !important; }
html.lecture-v2 .peau-main .technique-card .pl-idee { color: var(--fg); }
/* citations : même corps de texte, un peu en retrait ; pas plus grosses que le texte */
html.lecture-2 .peau-main .technique-card .pl-citation p.italic { font-size: 1.05rem !important; line-height: 1.65 !important; max-width: 40rem; }
/* tableaux et listes de données : lisibles aussi */
html.lecture-v2 .peau-main td, html.lecture-v2 .peau-main th { font-size: 1rem !important; line-height: 1.55 !important; color: var(--lecture-texte) !important; }
@media (max-width: 640px) {
  html.lecture-v2 .peau-main p, html.lecture-v2 .peau-main li { font-size: 1.0625rem !important; line-height: 1.7 !important; }
  html.lecture-v2 .peau-main .technique-card { padding: 1.3rem 1.2rem 1.4rem !important; }
}

@media print {
  .barre, .peau-tete, .pl-onglets, .voile, .tiroir, .popover-menu, .lien-evitement, .cta, .pl-lue, .pl-pied, .pied, .co-commencer { display: none !important; }
  body { background: #fff !important; color: #111; }
  a { color: inherit; }
}

/* ---- Mobile : les médias gardent leur cadre (jamais bord à bord, jamais carrés) ----
   Decision du 17/09 : texte, animations et vidéos ont toujours la même forme.
   Le site d'origine mettait la vidéo du concept et les cartes bord à bord sous 640 px
   (`max-sm:rounded-none`, `full-width-mobile-only`) : on garde les marges et
   les arrondis, comme sur grand écran. */
@media (max-width: 639px) {
  .peau-main .full-width-mobile-only { padding-left: 1rem !important; padding-right: 1rem !important; }
  .peau-main .max-sm\:rounded-none { border-radius: 18px !important; overflow: hidden; }
  .peau-main .max-sm\:rounded-none video, .peau-main .max-sm\:rounded-none img { border-radius: 18px; }
  .peau-main figure video, .peau-main video { border-radius: 18px; }
  .peau-main figcaption { padding-top: .6rem; }
}

/* ---- 11. Pages du pied (À propos, Contact, Aide, Mentions, Confidentialité, CGV) ---- */
.pg-main { width: min(760px, 100%); margin: 0 auto; padding: 0 var(--space) 3rem; font-family: var(--font-b); }
.pg-tete { padding: clamp(1.6rem, 5vw, 3rem) 0 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.pg-tete h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; margin: .3rem 0 .6rem; font-variation-settings: "opsz" 144, "SOFT" var(--soft), "WONK" 0; }
.pg-sous { margin: 0; color: var(--muted); font-size: 1.15rem; line-height: 1.5; }
.pg-corps { font-size: 1.05rem; line-height: 1.65; color: var(--fg); }
.pg-corps h2 { font-size: 1.45rem; line-height: 1.25; margin: 2rem 0 .6rem; }
.pg-corps p { margin: 0 0 1rem; }
.pg-corps a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.pg-corps ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.pg-corps blockquote { margin: 1rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--sanguine); color: var(--muted); font-style: italic; }
.pg-encadre { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.pg-encadre h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.pg-encadre p:last-child { margin-bottom: 0; }

/* source des pourcentages, une fois en bas de planche (build.poser_note_chiffres) */
.pl-note-chiffres {
  max-width: 46rem; margin: 2.5rem auto 0; padding: 0 1rem;
  font-family: var(--font-b); font-size: .85rem; line-height: 1.5; color: var(--muted); text-align: center;
}

/* ---------------------------------------------------------------- compte, connexion, offres (peau/pages_compte.py, compte.js) */
.cpt { display: flex; flex-direction: column; gap: 1.25rem; max-width: 720px; }
.cpt-carte, .cpt-offre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--ombre-2); }
.cpt-carte h2, .cpt-offre h2 { margin: 0 0 .5rem; font-family: var(--font-d); font-size: 1.3rem; }
.cpt-carte h3.cpt-coll { margin: 1rem 0 .3rem; font-family: var(--font-b); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cpt-carte p, .cpt-offre p { margin: .4rem 0; }
.cpt form { display: flex; flex-direction: column; gap: .5rem; }
.cpt label { font-family: var(--font-b); font-size: .9rem; font-weight: 600; color: var(--muted); }
.cpt input[type="email"], .cpt input[type="password"], .cpt input[type="text"], .cpt select {
  min-height: 48px; padding: 0 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; width: 100%; }
.cpt input:focus-visible, .cpt select:focus-visible, .cpt button:focus-visible, .cpt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cpt-mdp { display: flex; gap: .5rem; }
.cpt-mdp input { flex: 1; }
.cpt-voir { min-height: 48px; padding: 0 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.cpt-onglets { display: flex; gap: .4rem; margin-bottom: 1.25rem; padding: .3rem; background: var(--surface-2); border-radius: 999px; }
.cpt-onglets [role="tab"] { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.cpt-onglets [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cpt-lien { align-self: flex-start; padding: .4rem 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.cpt-google { width: 100%; justify-content: center; text-align: center; }
.cpt-ou { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--muted); font-size: .9rem; }
.cpt-ou::before, .cpt-ou::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.cpt-aide { font-size: .9rem; color: var(--muted); }
.cpt-alerte { padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--fg); }
.cpt-erreur { padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cpt-ok { padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--surface-2); color: var(--fg); }
#connexion-message { margin-top: 1rem; max-width: none; }
.cpt-liste { margin: .4rem 0; padding-left: 1.2rem; }
.cpt-case { display: flex; align-items: center; gap: .5rem; min-height: 40px; font-weight: 500; color: var(--fg); font-size: 1rem; }
.cpt-case input { width: 20px; height: 20px; accent-color: var(--accent); }
.cpt-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cpt-ligne select { width: auto; flex: 1; min-width: 180px; }
.cpt-offres { display: grid; gap: 1rem; }
.cpt-offre .cpt-prix { font-family: var(--font-d); font-size: 1.5rem; font-weight: 600; }
.cpt pre, .cpt code { background: var(--surface-2); border-radius: var(--r-sm); padding: .6rem .8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.cpt code { font-size: 1.05rem; letter-spacing: .08em; }
.cpt .btn[disabled], .cpt button[disabled] { opacity: .55; cursor: not-allowed; }
a.icone[data-compte] { color: var(--fg); }

/* ---------------------------------------------------------------- aperçu d'une planche fermée (outils/generer_apercus.py) */
.pl-apercu { position: relative; max-width: 780px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.pl-apercu-extrait { font-size: 1.05rem; line-height: 1.65; }          /* les deux paragraphes en entier : jamais une phrase coupée */
.pl-apercu-extrait p { margin: 0 0 1rem; }
.pl-apercu-carte { margin-top: 1.75rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.pl-apercu-carte h2 { margin: .2rem 0 .6rem; font-family: var(--font-d); }
.pl-apercu-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; }
.pl-apercu-gratuite { margin-top: 1rem; font-size: .95rem; }
.pl-apercu-gratuite a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.parametres-section[hidden] { display: none !important; }
.cpt [hidden], .pl-apercu [hidden] { display: none !important; }
#cpt-offres-liste { display: grid; gap: 1rem; }
/* place réservée pendant l'appel à /api/offres (compte.js esquisseOffres, 06/10/2026) : cartes invisibles, « Chargement… » à sa place */
#cpt-offres-liste.cpt-offres-liste--attente { position: relative; }
#cpt-offres-liste > .cpt-esquisse { visibility: hidden; }
#cpt-offres-liste > .cpt-offres-attente { position: absolute; top: 0; left: 0; right: 0; }

/* ---------------------------------------------------------------- déclaration de majorité (18+) */
.dialogue-majeur { border: 0; padding: 0; width: min(92vw, 460px); border-radius: var(--r-lg, 22px); background: var(--surface, var(--paper-2, #fdf4f0)); color: var(--fg, var(--ink, #2a1012)); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.dialogue-majeur::backdrop { background: rgba(28, 16, 18, .82); backdrop-filter: blur(8px); }
.majeur-carte { padding: 1.75rem 1.5rem; text-align: center; }
.majeur-carte h2 { margin: .3rem 0 .6rem; font-family: var(--font-d, "Cormorant Garamond", Georgia, serif); font-size: 1.7rem; font-weight: 600; }
.majeur-carte p { margin: .4rem 0; }
.majeur-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; }
.majeur-actions .btn { min-height: 46px; padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid var(--vin, var(--sanguine, #8f2430)); background: var(--vin, var(--sanguine, #8f2430)); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.majeur-actions .btn-ghost { background: transparent; color: var(--vin, var(--sanguine, #8f2430)); }
.cpt-consent { align-items: flex-start; margin: 1rem 0 .4rem; font-weight: 500; }
.cpt-consent input { margin-top: .25rem; flex-shrink: 0; }

/* ---------------------------------------------------------------- planches fermées : cadenas + message */
.is-verrouille { position: relative; }
.verrou-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-family: var(--font-b); font-size: .75rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.verrou-badge svg { width: 13px; height: 13px; }
.co-carte.is-verrouille .verrou-badge { position: absolute; top: .9rem; right: .9rem; }
.idx-lien.is-verrouille .verrou-badge { margin-left: auto; }
.pl-ps.is-verrouille .verrou-badge { margin-top: .4rem; }
.dialogue-verrou { border: 0; padding: 0; width: min(92vw, 440px); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.dialogue-verrou::backdrop { background: rgba(28, 16, 18, .6); }
.verrou-carte { position: relative; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.verrou-carte h2 { margin: .2rem 0 .5rem; font-family: var(--font-d); font-size: 1.5rem; }
.verrou-fermer { position: absolute; top: .4rem; right: .4rem; }
.verrou-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.verrou-actions .btn { justify-content: center; }
.verrou-actions [hidden] { display: none !important; }

.pl-apercu-plan { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.pl-apercu-plan ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.pl-apercu-plan li { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-weight: 600; }
.pl-apercu-plan li svg { width: 15px; height: 15px; flex-shrink: 0; }
.pl-apercu-anim { margin: .7rem 0 0; font-size: .9rem; color: var(--muted); }

/* =========================================================================
   LECTURE « FICHE MODULAIRE » — mise de page des planches (choisie par Jérôme le 05/10/2026)
   =========================================================================
   Une fiche d'étude dense et rangée en MODULES nets, comme un beau manuel :
   - en tête, un panneau « concept » à deux zones : le texte (titre numéroté,
     chapô, développement) à gauche ; « En bref » et le mythe dans une
     colonne latérale à droite ;
   - les techniques en RANGÉES numérotées : un onglet de couleur à gauche
     (le numéro), l'animation et le texte côte à côte à droite ;
   - « De la théorie au lit » en deux panneaux côte à côte, chacun coiffé
     d'un en-tête de couleur ;
   - étiquettes en petites capitales, filets fins, zones d'accent.
   Une seule taille de texte courant (18 px, 17 px sur téléphone) ; un seul
   chapô par page (Fraunces) ; titres > sous-titres > étiquettes.
   Rien n'est masqué ni déplacé dans le DOM : grilles, display:contents
   jamais, :has() pour reconnaître les blocs. Toutes les règles vivent sous
   html.lecture-modules (peau.js retire les autres mises de page quand ?lecture=<autre> est demandé).
   ========================================================================= */

html.lecture-modules {
  --m-max: 76rem;                 /* largeur du cadre */
  --m-gut: clamp(1rem, 4vw, 3rem);/* gouttière extérieure */
  --m-fs: 1.125rem;               /* LE texte courant */
  --m-lh: 1.66;
  --m-col: 42rem;                 /* colonne de lecture dans les colonnes étroites */
  --m-txt: 68rem;                 /* plus longue ligne permise dans un bloc large : le texte remplit le bloc (retour de Jérôme : plus de retour à la ligne en milieu de phrase) */
  --m-tab: 4.5rem;                /* onglet numéroté des rangées */
  --m-r: 20px;
  --m-pad: clamp(1.25rem, 2.6vw, 2.5rem);
  --m-acc: var(--accent, var(--vin));
  --m-line: color-mix(in srgb, var(--fg) 30%, var(--surface));
  --m-edge: color-mix(in srgb, var(--m-acc) 55%, var(--surface));  /* filet des encarts teintés */
  --m-band-fg: #FDF4F0;
  --m-ombre: 0 1px 2px rgba(42, 16, 18, .04), 0 10px 30px -12px rgba(42, 16, 18, .14);
  /* teintes de la partie, posées en clair (pas de color-mix : une couleur calculée
     sort en color(srgb …), que les outils de mesure de contraste lisent mal) */
  --m-soft: #F6DFD9; --m-soft-2: #EBC3BA; --m-band: #711D27; --m-label: #7D202B;
}
html.lecture-modules[data-collection="clitoris"] { --m-soft: #F8D9E6; --m-soft-2: #E9B8CE; --m-band: #7A1B47; --m-label: #8A1F54; }
html.lecture-modules[data-collection="interieur"] { --m-soft: #F1DDEB; --m-soft-2: #E1C2D7; --m-band: #582141; --m-label: #622546; }
html.lecture-modules[data-collection="objets"] { --m-soft: #F9E3C8; --m-soft-2: #EDCCA2; --m-band: #843722; --m-label: #913C26; }
@media (prefers-color-scheme: dark) {
  html.lecture-modules:not([data-theme="light"]) {
    --m-soft: #3A2126; --m-soft-2: #492A2E; --m-band: #563136; --m-label: var(--m-acc); --m-band-fg: var(--fg);
    --m-line: color-mix(in srgb, var(--fg) 26%, var(--surface));
    --m-edge: color-mix(in srgb, var(--m-acc) 45%, var(--surface));
    --m-ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .6);
  }
  html.lecture-modules:not([data-theme="light"])[data-collection="clitoris"] { --m-soft: #3A2230; --m-soft-2: #4A2B3C; --m-band: #5C2F47; }
  html.lecture-modules:not([data-theme="light"])[data-collection="interieur"] { --m-soft: #3B283B; --m-soft-2: #493146; --m-band: #553951; }
  html.lecture-modules:not([data-theme="light"])[data-collection="objets"] { --m-soft: #402E21; --m-soft-2: #4E3728; --m-band: #5B3F2E; }
}
html.lecture-modules[data-theme="dark"] {
  --m-soft: #3A2126; --m-soft-2: #492A2E; --m-band: #563136; --m-label: var(--m-acc); --m-band-fg: var(--fg);
  --m-line: color-mix(in srgb, var(--fg) 26%, var(--surface));
  --m-edge: color-mix(in srgb, var(--m-acc) 45%, var(--surface));
  --m-ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .6);
}
html.lecture-modules[data-theme="dark"][data-collection="clitoris"] { --m-soft: #3A2230; --m-soft-2: #4A2B3C; --m-band: #5C2F47; }
html.lecture-modules[data-theme="dark"][data-collection="interieur"] { --m-soft: #3B283B; --m-soft-2: #493146; --m-band: #553951; }
html.lecture-modules[data-theme="dark"][data-collection="objets"] { --m-soft: #402E21; --m-soft-2: #4E3728; --m-band: #5B3F2E; }

/* ---- 1. Le cadre ---------------------------------------------------------- */
html.lecture-modules .peau-main { counter-reset: m-sec m-tech; }
html.lecture-modules .peau-main > .pl-pied { max-width: var(--m-max) !important; width: calc(100% - 2 * var(--m-gut)) !important; margin-inline: auto !important; padding-inline: 0 !important; }
html.lecture-modules .peau-main > :is(.technique-page-container, .cps-main, .pl-tete) {
  max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; width: 100% !important;
  margin-inline: auto !important; padding-inline: var(--m-gut) !important; overflow: visible !important;
}
html.lecture-modules .peau-main .technique-page-container > :is(.pl-tete, .pl-pied) { max-width: none !important; padding-inline: 0 !important; }
/* les enveloppes Tailwind ne rajoutent plus de marge intérieure : le cadre est la seule règle */
html.lecture-modules .technique-page-container :is([class*="global-section-padding-x"], .mobile-override, #the-big-idea section[class*="px-"], .full-width-mobile-only):not(.testimonial-section *, .technique-card, .technique-card *, [id="the-big-idea"]) {
  padding-inline: 0 !important; margin-inline: 0 !important;
}
html.lecture-modules .technique-page-container :is([class*="max-w-[1040px]"], .global-page-max-w):not(.testimonial-section *) { max-width: none !important; }
html.lecture-modules .technique-page-container { display: block !important; }
html.lecture-modules .technique-page-container > :not(.pl-onglets) { max-width: none !important; width: 100% !important; margin-inline: 0 !important; }
html.lecture-modules .technique-page-container > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
html.lecture-modules .technique-page-container > .pl-onglets { margin-top: 0; }
html.lecture-modules .technique-page-container > nav.pl-onglets + * { margin-top: 2rem; }

/* ---- 2. Le texte courant : une seule taille ------------------------------ */
html.lecture-modules .peau-main :is(p, li):not(.testimonial-section *, .pl-pied *, .pl-tete *, .pl-onglets *, figcaption *, .pl-essayer *, [class~="uppercase"], [class*="pl-police-medium"], [class*="pl-police-bold"], .pl-etiq, .sv-bloc-titre, .sv-bloc-soustitre, .sv-bloc-source, .pd-encadre-titre, .cps-carte-invite, .cps-chapo, .sv-avis-intro, .pl-mythe-m p, .pd-citation, .etiq) {
  font-family: var(--font-b) !important; font-size: var(--m-fs) !important; line-height: var(--m-lh) !important;
  color: var(--fg) !important; font-weight: 400; max-width: var(--m-txt); letter-spacing: 0 !important;
}
html.lecture-modules .peau-main :is(p, li) span:not([class]) { font: inherit !important; color: inherit !important; }
html.lecture-modules .peau-main :is(b, strong, .pl-idee) { font-weight: 700; color: var(--fg) !important; }
html.lecture-modules .peau-main :is(p, li) { overflow-wrap: break-word; }
html.lecture-modules .peau-main :is(p, li) a:not(.btn) { overflow-wrap: anywhere; color: var(--m-label) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.lecture-modules .peau-main :is(h2, h3, h4, h5) span { font: inherit !important; color: inherit !important; }
html.lecture-modules .peau-main p + p { margin-top: .9em; }
html.lecture-modules .peau-main :is([class*="gap-"], .pd-corps) > p + p { margin-top: .2em !important; }

/* ---- 3. En-tête de planche : une page de titre, alignée sur le cadre ----- */
html.lecture-modules .peau-main .pl-tete {
  padding-top: clamp(1.4rem, 3vw, 2.4rem) !important; padding-bottom: 1.6rem !important;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end;
  border-bottom: 1px solid var(--m-line);
}
html.lecture-modules .peau-main .pl-tete > .pl-fil { grid-column: 1 / -1; }
html.lecture-modules .peau-main .pl-tete h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem) !important; line-height: 1.02 !important; letter-spacing: -.02em !important; }
html.lecture-modules .peau-main .pl-tete .pl-numero { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem !important; color: var(--m-label) !important; }
html.lecture-modules .peau-main .pl-tete .pl-sous { color: color-mix(in srgb, var(--fg) 78%, var(--bg)) !important; font-size: clamp(1.15rem, 1.8vw, 1.35rem) !important; }
html.lecture-modules .peau-main .pl-tete .ic-planche { background: var(--m-soft-2); }
html.lecture-modules .peau-main .pl-tete .pl-meta { margin: 0 0 .2rem; justify-content: flex-end; }
html.lecture-modules .peau-main .pl-tete .pl-duree { padding: 0 .9rem; min-height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--m-line); color: var(--fg); }

/* onglets : la barre traverse la page, ses onglets suivent le cadre */
html.lecture-modules .peau-main .pl-onglets { margin-inline: calc((100% - var(--m-vw, 100vw)) / 2) !important; width: auto !important; max-width: none !important; }
html.lecture-modules .peau-main .pl-onglets-int { max-width: calc(var(--m-max) + 2 * var(--m-gut)) !important; padding-inline: var(--m-gut) !important; }
html.lecture-modules .peau-main .pl-onglets-liste a { flex: none; white-space: nowrap; }
@media (max-width: 999px) {
  html.lecture-modules .peau-main .pl-onglets-liste {
    flex-wrap: nowrap !important; padding-right: 2rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
  }
}
@media (max-width: 700px) {
  html.lecture-modules .peau-main .pl-onglets-liste {
    padding-inline: .25rem 2rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
  }
}

/* ---- 4. Titres de section : un numéro, un titre, un filet ---------------- */
html.lecture-modules .peau-main :is(#the-big-idea, #techniques, #bringing-it-to-the-bedroom, .cps-section) { counter-increment: m-sec; }
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b:has(> h2) { border: 0 !important; padding: 0 !important; margin: 0 0 1.75rem !important; }
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > h2,
html.lecture-modules .peau-main .cps-h2,
html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child {
  display: flex !important; align-items: center; gap: 1rem; margin: 0 0 1.4rem !important;
  font-family: var(--font-d) !important; font-weight: 600 !important; font-variation-settings: "SOFT" var(--soft), "opsz" 96;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important; line-height: 1.08 !important; color: var(--fg) !important; text-transform: none !important;
}
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > h2::before,
html.lecture-modules .peau-main .cps-h2::before,
html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child::before {
  content: counter(m-sec, decimal-leading-zero); flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 14px; background: var(--m-band); color: var(--m-band-fg);
  font-family: var(--font-b); font-size: .95rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > h2::after,
html.lecture-modules .peau-main .cps-h2::after {
  content: ""; flex: 1 1 2rem; height: 1px; background: var(--m-line); align-self: center; margin-left: .5rem;
}
/* le chapeau de la section des techniques : sous le titre, une phrase */
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > .pl-corps { margin: 0 !important; padding-left: calc(2.9rem + 1rem); }
html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > .pl-corps > p { margin: 0; }

/* groupes de techniques (« Lâcher prise ») : une étiquette de groupe */
html.lecture-modules .technique-page-container h3:not(.testimonial-section *, .pl-pied *, figcaption *, .technique-card *) {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem) !important; line-height: 1.12 !important; color: var(--fg) !important; margin: 3.4rem 0 1.1rem !important;
}
html.lecture-modules .technique-page-container h3:not(.testimonial-section *, .pl-pied *, figcaption *, .technique-card *)::before {
  content: ""; flex: none; width: .5rem; height: 1.5em; border-radius: 3px; background: var(--m-acc); align-self: center;
}

/* sous-titres internes, étiquettes */
html.lecture-modules .peau-main .technique-card :is(h3, h4, h5):not(figcaption *, .uppercase),
html.lecture-modules .peau-main .technique-page-container h4:not(.testimonial-section *, figcaption *, .uppercase),
html.lecture-modules .peau-main #the-big-idea h5:not(:first-child) {
  font-family: var(--font-d) !important; font-weight: 600 !important; font-variation-settings: "SOFT" var(--soft), "opsz" 48;
  font-size: clamp(1.35rem, 2vw, 1.6rem) !important; line-height: 1.2 !important; color: var(--fg) !important; margin: 0 0 .6rem !important;
}
html.lecture-modules .peau-main p[class*="pl-police-medium"]:not(.testimonial-section *, figcaption *),
html.lecture-modules .peau-main .cps-section h5,
html.lecture-modules .peau-main .sv-bloc .sv-bloc-soustitre {
  font-family: var(--font-d) !important; font-weight: 600 !important; font-variation-settings: "SOFT" var(--soft), "opsz" 36;
  font-size: 1.22rem !important; line-height: 1.25 !important; color: var(--fg) !important; margin: 0 0 .35rem !important; letter-spacing: 0 !important;
}
html.lecture-modules .peau-main :is(p[class~="uppercase"], p[class*="pl-police-bold"][class*="tracking"], .pl-etiq, .sv-bloc .sv-bloc-titre, .pd-encadre-titre):not(.testimonial-section *, .pl-essayer *, #bringing-it-to-the-bedroom .bg-card > p:first-child) {
  font-family: var(--font-b) !important; font-size: .78rem !important; line-height: 1.4 !important; font-weight: 800 !important;
  letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--m-label) !important; margin: 0 0 .7rem !important;
}
html.lecture-modules .peau-main :is(p[class~="uppercase"], p[class*="pl-police-bold"]) span { font: inherit !important; color: inherit !important; }

/* ---- 5. Le chapô : un seul, voulu ---------------------------------------- */
html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child + div > p:first-child,
html.lecture-modules .peau-main .cps-chapo {
  font-family: var(--font-d) !important; font-weight: 400 !important; font-variation-settings: "SOFT" 100, "opsz" 30;
  font-size: clamp(1.28rem, 1.7vw, 1.4rem) !important; line-height: 1.48 !important; color: var(--fg) !important;
  letter-spacing: -.005em !important; max-width: var(--m-txt); margin: 0 0 1.1rem !important;
}
html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child + div > p:first-child span { font: inherit !important; }

/* ---- 6. Panneau « concept » : texte à gauche, colonne latérale à droite --- */
html.lecture-modules .technique-page-container > div:has(> #the-big-idea) { gap: 1.5rem !important; }
html.lecture-modules .peau-main #the-big-idea {
  margin: 0 !important; background: var(--surface); border: 1.5px solid var(--m-line); border-radius: 24px;
  padding: var(--m-pad) !important; box-shadow: var(--m-ombre);
}
html.lecture-modules .peau-main #the-big-idea > section > section + section { margin-top: 1.4rem; }
html.lecture-modules .peau-main #the-big-idea [class*="grid-cols"] { gap: 1.1rem !important; }
html.lecture-modules .technique-page-container > div:has(> #the-big-idea) > :is(section:not(#the-big-idea, .pl-mythe, .pl-resume, .testimonial-section), div[class*="global-section-padding-x"]:not(:has(> section.testimonial-section))) {
  background: var(--surface); border: 1.5px solid var(--m-line); border-radius: 24px; padding: var(--m-pad) !important; box-shadow: var(--m-ombre);
  column-gap: 2.5rem !important;
}
html.lecture-modules .technique-page-container > div:has(> #the-big-idea) > :is(section:not(#the-big-idea, .pl-mythe, .pl-resume, .testimonial-section), div[class*="global-section-padding-x"]:not(:has(> section.testimonial-section))) :is(h5, h2):not(figcaption *) {
  font-family: var(--font-d) !important; font-size: clamp(1.45rem, 2.2vw, 1.75rem) !important; line-height: 1.15 !important; color: var(--fg) !important; margin: 0 0 .7rem !important;
}
html.lecture-modules .peau-main :is(.pl-resume, .pl-mythe) { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* En bref : l'encadré latéral, teinté de la couleur de la collection */
html.lecture-modules .peau-main .pl-resume {
  grid-template-columns: 1fr !important; gap: 1rem !important; padding: 1.6rem 1.4rem 1.7rem !important;
  background: var(--surface) !important; border: 1.5px solid var(--m-edge) !important; border-radius: 24px !important;
  border-top: 6px solid var(--m-acc) !important; box-shadow: var(--m-ombre);
}
html.lecture-modules .peau-main .pl-resume-titre { font-size: 1.55rem !important; color: var(--fg) !important; }
html.lecture-modules .peau-main .pl-resume ul { gap: 1rem !important; }
html.lecture-modules .peau-main .pl-resume li { max-width: none !important; grid-template-columns: 1.6rem minmax(0, 1fr) !important; }
html.lecture-modules .peau-main .pl-resume li + li { border-top: 1px solid var(--m-edge); padding-top: 1rem; }
html.lecture-modules .peau-main .pl-resume li b { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-label) !important; margin-bottom: .15rem; }
html.lecture-modules .peau-main .pl-coche { background: var(--m-band) !important; color: var(--m-band-fg) !important; }
/* le mythe : une fiche à deux étages, le faux puis le vrai */
html.lecture-modules .peau-main .pl-mythe { border-radius: 24px !important; border: 1.5px solid var(--m-edge) !important; box-shadow: var(--m-ombre); }
html.lecture-modules .peau-main .pl-mythe > div { padding: 1.5rem 1.6rem !important; }
html.lecture-modules .peau-main .pl-mythe-m { background: var(--m-soft-2) !important; }
html.lecture-modules .peau-main .pl-mythe-m p:last-child {
  font-family: var(--font-d) !important; font-size: 1.42rem !important; line-height: 1.3 !important; color: var(--fg) !important;
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--m-acc) 55%, transparent); text-decoration-thickness: 2px;
}
html.lecture-modules .peau-main .pl-mythe-r { background: var(--surface) !important; }
html.lecture-modules .peau-main .pl-mythe-r p:last-child { max-width: none !important; }

@media (min-width: 1100px) {
  /* En bref (bandeau de trois points) → concept → mythe : chacun pleine largeur et à sa hauteur,
     plus de grande carte à moitié vide à côté d'une colonne latérale plus haute qu'elle */
  html.lecture-modules .peau-main .pl-resume { display: grid !important; grid-template-columns: 8.5rem minmax(0, 1fr) !important; column-gap: 2rem; align-items: start; padding: 1.5rem var(--m-pad) 1.6rem !important; }
  html.lecture-modules .peau-main .pl-resume ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2rem !important; }
  html.lecture-modules .peau-main .pl-resume li + li { border-top: 0; padding-top: 0; border-left: 1px solid var(--m-edge); padding-left: 2rem; }
}

/* ---- 7. Les techniques : des rangées numérotées ---------------------------- */
html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card) {
  position: relative; background: var(--surface) !important; border: 1.5px solid var(--m-line) !important;
  border-radius: var(--m-r) !important; box-shadow: var(--m-ombre) !important;
  padding: var(--m-pad) var(--m-pad) var(--m-pad) calc(var(--m-tab) + var(--m-pad)) !important;
  width: 100% !important; max-width: none !important; margin: 0 !important;
}
html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card, .border) { counter-increment: m-tech; }
html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card)::before {
  content: counter(m-tech, decimal-leading-zero); position: absolute; left: 0; top: 0; bottom: 0; width: var(--m-tab);
  border-radius: var(--m-r) 0 0 var(--m-r); background: var(--m-band); color: var(--m-band-fg);
  display: flex; justify-content: center; padding-top: 1.55rem;
  font-family: var(--font-d); font-weight: 600; font-size: 1.7rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
}
/* encadrés « Partenaires » : onglet clair, filet de couleur */
html.lecture-modules .technique-page-container .technique-card.border {
  background: var(--m-soft) !important; border: 1.5px solid var(--m-edge) !important; box-shadow: none !important;
}
html.lecture-modules .technique-page-container .technique-card.border:not(.technique-card .technique-card)::before {
  content: ""; background: repeating-linear-gradient(135deg, var(--m-soft-2) 0 10px, transparent 10px 20px), var(--m-soft);
  border-right: 3px solid var(--m-acc);
}
html.lecture-modules .peau-main .technique-card.border > .flex-row:first-child :is(h3, h4, h5) {
  font-family: var(--font-b) !important; font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .13em !important;
  text-transform: uppercase; color: var(--m-label) !important; margin: 0 !important; line-height: 1.4 !important;
}
html.lecture-modules .peau-main .technique-card.border > .flex-row:first-child img { width: 20px !important; height: 20px !important; }
html.lecture-modules .peau-main .technique-card.border > .flex-row:first-child { margin-bottom: .3rem; }
/* les techniques ne s'alignent plus en damier : une rangée chacune */
html.lecture-modules .technique-page-container [class*="grid-cols"]:has(> .technique-card),
html.lecture-modules .technique-page-container [class*="grid-cols"]:has(> * > .technique-card),
html.lecture-modules .technique-page-container .flex-col:has(> .technique-card) {
  display: flex !important; flex-direction: column !important; gap: 1.25rem !important;
}
html.lecture-modules .technique-page-container [class*="grid-cols"]:has(> .technique-card) > *,
html.lecture-modules .technique-page-container [class*="grid-cols"]:has(> * > .technique-card) > * { width: 100% !important; max-width: none !important; }
html.lecture-modules .technique-page-container :is(.global-section-gap-y, .column-gap-md):has(.technique-card):not(.technique-card) { gap: 1.25rem !important; }
html.lecture-modules .technique-page-container [class*="max-sm:global-section-padding-x"]:has(> .technique-card) { padding: 0 !important; }
/* un encadré « En pratique » qui court sur toute une rangée : son texte passe sur deux colonnes, comme une page de manuel
   (requête sur le parent direct du bloc : un bloc posé dans une demi-colonne reste sur une colonne) */
html.lecture-modules .technique-page-container .technique-card *:has(> .sv-bloc) { container: m-sv / inline-size; }
@container m-sv (min-width: 56rem) {
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])):not(:has(.sv-bloc-revele-bouton, .sv-bloc-detail)) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 2.5rem; row-gap: 0; align-items: start;
  }
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])) > * { grid-column: 2; }
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])) > .sv-bloc-titre + p:last-child { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])) > .sv-bloc-titre { grid-column: 1 / -1; grid-row: 1; }
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])) > .sv-bloc-titre + p {
    grid-column: 1; grid-row: 2 / span 30; margin: 0 !important; padding-right: 2.5rem; align-self: stretch;
    border-right: 1px solid var(--m-line);
  }
  html.lecture-modules .peau-main .sv-bloc:not(:has(> ul)):has(> .sv-bloc-titre + p:not([class])) > .sv-bloc-titre + p + * { margin-top: 0 !important; }
  /* avec une liste : l'introduction en tête, la liste sur deux colonnes */
  html.lecture-modules .peau-main .sv-bloc .sv-bloc-liste:has(> li:nth-child(3)) { columns: 2; column-gap: 2.5rem; }
  html.lecture-modules .peau-main .sv-bloc .sv-bloc-liste:has(> li:nth-child(3)) > li { break-inside: avoid; }
}
/* les statistiques d'origine (« 79 % ») : un grand chiffre de la couleur de la collection */
html.lecture-modules .peau-main h4.uppercase[class*="text-[48px]"],
html.lecture-modules .peau-main h4.uppercase[class*="text-[64px]"] {
  font-size: clamp(2.6rem, 4vw, 3.4rem) !important; line-height: 1 !important; color: var(--m-label) !important; margin: 0 0 .5rem !important;
}
html.lecture-modules .peau-main div.border-l-2:has(> h4.uppercase) { border-left: 4px solid var(--m-acc) !important; border-radius: 2px; }
/* les médias gardent leur forme ; deux animations côte à côte passent à la ligne plutôt que de déborder */
html.lecture-modules .peau-main .technique-card div[class*="flex-row"]:has(video[loop]) { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 1rem; }
html.lecture-modules .peau-main .technique-card video[loop] { border-radius: 14px; }
/* la citation d'une technique : une note dans la marge, filet de couleur */
html.lecture-modules .peau-main .technique-card .pl-citation {
  background: var(--m-soft) !important; border-radius: 16px !important; padding: 1.1rem 1.25rem 1.1rem 1.4rem !important;
  border-left: 4px solid var(--m-acc); margin-top: .4rem !important;
}
html.lecture-modules .peau-main .technique-card .pl-citation::before { display: none !important; }
html.lecture-modules .peau-main .technique-card .pl-citation p.italic {
  font-family: var(--font-b) !important; font-style: italic !important; font-size: var(--m-fs) !important; line-height: var(--m-lh) !important;
  color: var(--fg) !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
html.lecture-modules .peau-main .technique-card .pl-citation + .pl-lire { margin-left: 1.4rem !important; }
html.lecture-modules .peau-main .technique-card .pl-lire { color: var(--m-label) !important; font-size: .95rem !important; min-height: 44px; }
/* le texte de synthèse « En pratique » : un encadré clair, une étiquette */
html.lecture-modules .peau-main .sv-bloc {
  margin: 0 !important; padding: 1.35rem 1.5rem 1.4rem !important; border-radius: 16px !important;
  background: var(--m-soft) !important; border: 1.5px solid var(--m-edge) !important; border-left: 1.5px solid var(--m-edge) !important;
  box-shadow: none !important;
}
html.lecture-modules .peau-main .sv-bloc .sv-bloc-titre { display: flex !important; align-items: center; gap: .55rem; }
html.lecture-modules .peau-main .sv-bloc .sv-bloc-titre::before { content: ""; width: .55rem; height: .55rem; border-radius: 2px; background: var(--m-acc); }
html.lecture-modules .peau-main .sv-bloc :is(.sv-bloc-liste, .sv-bloc-reperes) li::before { background: var(--m-acc) !important; border-radius: 2px !important; }
html.lecture-modules .peau-main .sv-bloc .sv-bloc-revele-bouton { color: var(--m-label) !important; min-height: 44px; }
html.lecture-modules .peau-main #the-big-idea .sv-bloc { margin: .2rem 0 !important; }

@media (min-width: 1100px) {
  /* une animation et son texte : côte à côte (l'animation dans un cadre clair) */
  html.lecture-modules .technique-card div[class*="flex-col"]:has(> div[class*="w-[250px]"] video[loop]) {
    display: grid !important; grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--m-col)); column-gap: 2.75rem; row-gap: 0; align-items: start;
  }
  html.lecture-modules .technique-card div[class*="flex-col"]:has(> div[class*="w-[250px]"] video[loop]) > div[class*="w-[250px]"] {
    grid-column: 1; grid-row: 1 / span 4; justify-self: stretch; margin: 0 !important; width: auto !important; height: auto !important;
    padding: 1.25rem; border-radius: 18px; background: var(--m-soft); display: grid; place-items: center;
  }
  html.lecture-modules .technique-card div[class*="flex-col"]:has(> div[class*="w-[250px]"] video[loop]) > div[class*="w-[250px]"] > div { width: 250px; height: 257px; }
  html.lecture-modules .technique-card div[class*="flex-col"]:has(> div[class*="w-[250px]"] video[loop]) > :not([class*="w-[250px]"]) { grid-column: 2; }
  /* une carte faite d'un texte et d'une animation : les deux en regard */
  html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card):has(> [class*="overflow-hidden"] video[loop]):has(> :nth-child(2)):not(:has(> :nth-child(3):not(:empty))) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.75rem; row-gap: 0; align-items: center;
  }
  /* une technique et son encadré « En pratique » : en regard */
  html.lecture-modules .peau-main .technique-card.technique-card.technique-card[class*="md:grid-cols-2"]:has(> * :is(h4, h5)):has(.sv-bloc) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 2.5rem; row-gap: 0; align-items: start;
  }
  /* une technique et sa citation : le texte à gauche, la citation en regard */
  html.lecture-modules .technique-card:not(:has(> * + * :is(h4, h5, p))) > div[class*="flex-col"]:has(> div > .pl-citation):has(> :nth-child(3)):not(:has(video[loop])) {
    display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 2.5rem; row-gap: .5rem; align-items: start;
  }
  html.lecture-modules .technique-card:not(:has(> * + * :is(h4, h5, p))) > div[class*="flex-col"]:has(> div > .pl-citation):has(> :nth-child(3)):not(:has(video[loop])) > * { grid-column: 1; }
  html.lecture-modules .technique-card:not(:has(> * + * :is(h4, h5, p))) > div[class*="flex-col"]:has(> div > .pl-citation):has(> :nth-child(3)):not(:has(video[loop])) > :has(> .pl-citation) { grid-column: 2; grid-row: 1 / span 4; }
  /* « Partenaires » : le titre à gauche, le texte en regard */
  html.lecture-modules .technique-page-container .technique-card.border {
    display: grid !important; grid-template-columns: minmax(12rem, 1fr) minmax(0, var(--m-col)); column-gap: 2.5rem; align-items: start;
  }
  html.lecture-modules .technique-page-container .technique-card.border > :is(.flex-row, h3, h4, h5) { grid-column: 1; }
  html.lecture-modules .technique-page-container .technique-card.border > :not(.flex-row, h3, h4, h5) { grid-column: 2; grid-row: 1 / span 3; }
  html.lecture-modules .technique-page-container .technique-card.border > .pl-lire { grid-row: 4; }
}
/* tablette : les grilles internes à deux colonnes trop étroites passent l'une sous l'autre */
@media (max-width: 1099px) {
  html.lecture-modules .technique-page-container .technique-card [class*="grid-cols-2"],
  html.lecture-modules .technique-page-container .technique-card[class*="grid-cols-2"] { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; }
  html.lecture-modules .technique-page-container .technique-card [class*="grid-cols-2"] > *,
  html.lecture-modules .technique-page-container .technique-card[class*="grid-cols-2"] > * { width: 100% !important; padding-right: 0 !important; }
}

/* ---- 8. Les bandeaux « Perspectives » : des modules sombres, dans le cadre ---- */
html.lecture-modules .peau-main div:has(> section.testimonial-section) { margin-inline: 0 !important; width: 100% !important; padding: 0 !important; }
html.lecture-modules .peau-main section.testimonial-section { width: 100% !important; margin-inline: 0 !important; border-radius: 24px; overflow: hidden; box-shadow: var(--m-ombre); }
html.lecture-modules .peau-main .testimonial-section :is(p, h2, h3, h4, h5, span) { color: #F6E4DC !important; }

/* ---- 9. De la théorie au lit : deux panneaux, deux en-têtes ---------------- */
html.lecture-modules .peau-main #bringing-it-to-the-bedroom > section[class*="grid"] { gap: 1.5rem !important; align-items: stretch; }
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card {
  background: var(--surface) !important; border: 1.5px solid var(--m-line) !important; border-radius: 24px !important;
  box-shadow: var(--m-ombre) !important; padding: 0 var(--m-pad) var(--m-pad) !important; gap: 0 !important; overflow: hidden;
}
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card > p:first-child {
  margin: 0 calc(-1 * var(--m-pad)) 1.6rem !important; padding: 1.1rem var(--m-pad) !important; height: auto !important;
  background: var(--m-band); color: var(--m-band-fg) !important;
  font-family: var(--font-b) !important; font-size: .82rem !important; font-weight: 800 !important; line-height: 1.4 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; display: flex; align-items: center; gap: .7rem;
}
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card > p:first-child span { color: inherit !important; font: inherit !important; }
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card > p:first-child::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid currentColor;
}
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card + .bg-card > p:first-child { background: var(--fg); color: var(--bg) !important; }
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card + .bg-card > p:first-child::before { border-radius: 2px; transform: rotate(45deg); }
html.lecture-modules .peau-main #bringing-it-to-the-bedroom .bg-card > div + div { border-top: 1px solid var(--m-line); padding-top: 1.4rem; margin-top: 1.4rem; }
@media (max-width: 999px) {
  html.lecture-modules .peau-main #bringing-it-to-the-bedroom > section[class*="grid"] { display: flex !important; flex-direction: column !important; }
}

/* ---- 10. À essayer ce soir : le module d'action, plein ------------------- */
html.lecture-modules .peau-main .pl-essayer {
  width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  background: var(--m-band) !important; color: var(--m-band-fg) !important; border-radius: 24px !important;
  padding: var(--m-pad) !important; box-shadow: var(--m-ombre);
}
html.lecture-modules .peau-main .pl-essayer :is(p, li, h2, span) { color: var(--m-band-fg) !important; }
html.lecture-modules .peau-main .pl-essayer h2 { font-size: clamp(1.8rem, 3vw, 2.3rem) !important; }
html.lecture-modules .peau-main .pl-essayer .pl-etiq { opacity: 1; font-size: .78rem !important; letter-spacing: .13em; font-weight: 800; }
html.lecture-modules .peau-main .pl-essayer .pl-essayer-sous { font-size: var(--m-fs) !important; opacity: 1; }
html.lecture-modules .peau-main .pl-essayer li { font-size: var(--m-fs) !important; line-height: 1.55 !important; }
html.lecture-modules .peau-main .pl-essayer li::before { background: var(--m-band-fg) !important; color: var(--m-band) !important; }
html.lecture-modules .peau-main .pl-essayer li + li { border-top: 1px solid color-mix(in srgb, var(--m-band-fg) 22%, transparent); padding-top: .85rem; }
@media (prefers-color-scheme: dark) { html.lecture-modules:not([data-theme="light"]) .peau-main .pl-essayer { border: 1px solid var(--m-acc); } }
html.lecture-modules[data-theme="dark"] .peau-main .pl-essayer { border: 1px solid var(--m-acc); }

/* témoignages : un appel centré dans un module discret */
html.lecture-modules .peau-main .pl-section-avis {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  background: var(--surface); border: 1px dashed var(--m-line); border-radius: 24px; padding: 1.4rem var(--m-pad);
}
html.lecture-modules .peau-main .pl-section-avis .sv-avis-intro { margin: 0; color: var(--fg); }
html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail { flex: 1 1 100%; }
html.lecture-modules .peau-main .pl-section-avis .sv-avis-bouton { border-color: var(--m-label); color: var(--m-label); }

/* ---- 11. Fiches maison : des sections en modules ------------------------- */
html.lecture-modules .peau-main .cps-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem !important; }
/* sans « En bref » à côté, le chapô n'est pas une carte : une ouverture, filet de couleur */
html.lecture-modules .peau-main .cps-main:not(:has(> .pl-resume)) > .cps-chapo {
  background: none; border: 0; box-shadow: none; border-left: 5px solid var(--m-acc); border-radius: 0; padding: .2rem 0 .2rem 1.6rem !important; max-width: calc(var(--m-col) + 2rem) !important; margin: .5rem 0 1rem !important;
}
html.lecture-modules .peau-main .cps-main > * { grid-column: 1 / -1; margin: 0 !important; }
html.lecture-modules .peau-main .cps-chapo {
  background: var(--surface); border: 1px solid var(--m-line); border-radius: 24px; padding: var(--m-pad) !important;
  box-shadow: var(--m-ombre); max-width: none !important;
}
html.lecture-modules .peau-main .cps-section {
  background: var(--surface); border: 1.5px solid var(--m-line); border-radius: 24px; padding: var(--m-pad) !important; box-shadow: var(--m-ombre);
}
html.lecture-modules .peau-main .cps-section .plaisir-details { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; }
html.lecture-modules .peau-main .cps-section .pd-corps { padding: 0 !important; gap: 1rem; }
html.lecture-modules .peau-main .cps-section .pd-grille { gap: 1rem !important; }
html.lecture-modules .peau-main .cps-section .pd-grille > div { background: var(--m-soft); border-radius: 16px; padding: 1.2rem 1.3rem; border-top: 3px solid var(--m-acc); }
html.lecture-modules .peau-main .plaisir-details .pd-encadre {
  background: var(--m-soft) !important; border: 0 !important; border-left: 4px solid var(--m-acc) !important; border-radius: 16px !important; padding: 1.3rem 1.5rem !important;
}
html.lecture-modules .peau-main .plaisir-details .pd-citation {
  font-family: var(--font-d) !important; font-size: 1.3rem !important; line-height: 1.4 !important; color: var(--fg) !important;
  border-left: 4px solid var(--m-acc) !important; padding: .2rem 0 .2rem 1.2rem !important; margin: .4rem 0 !important; max-width: var(--m-col);
}
html.lecture-modules .peau-main .cps-section figure.pd-schema { background: var(--surface-2); border: 1.5px solid var(--m-line); border-radius: 18px; padding: 1rem; margin: .4rem 0 !important; }
@media (min-width: 1100px) {
  /* fiches maison : même empilement que les planches (En bref en bandeau, chapô, mythe), pleine largeur */
  html.lecture-modules .peau-main .cps-main > .pl-resume { order: -1; }
  /* une section de fiche : le titre dans sa marge (collant), le texte et les schémas à droite */
  html.lecture-modules .peau-main .cps-section { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: 2.75rem; align-items: start; }
  html.lecture-modules .peau-main .cps-section > .cps-h2 {
    grid-column: 1; position: sticky; top: calc(var(--h-barre) + var(--h-onglets) + 4rem);
    flex-direction: column; align-items: flex-start; gap: .9rem; margin: 0 !important; font-size: clamp(1.7rem, 2.3vw, 2.1rem) !important; line-height: 1.1 !important;
  }
  html.lecture-modules .peau-main .cps-section > .cps-h2::after { content: ""; flex: none; width: 3rem; height: 3px; border-radius: 2px; background: var(--m-acc); margin: .2rem 0 0; }
  html.lecture-modules .peau-main .cps-section > :not(.cps-h2) { grid-column: 2; }
}

/* ---- 12. Pied de planche --------------------------------------------------- */
html.lecture-modules .peau-main .pl-pied { margin-top: clamp(2.5rem, 5vw, 4rem) !important; border-top: 1px solid var(--m-line); padding-top: 2rem !important; }
html.lecture-modules .peau-main .pl-ps { border-radius: 20px; }

/* ---- 13. Langues CJK : pas d'italique -------------------------------------- */
html.lecture-modules:is([lang^="ja"], [lang^="zh"], [lang^="ko"]) .peau-main :is(.italic, em, i, .pl-citation p, .pl-sous, .cps-chapo) { font-style: normal !important; font-synthesis: none; }
html.lecture-modules:is([lang^="ja"], [lang^="zh"], [lang^="ko"]) .peau-main .pl-resume li b { letter-spacing: .04em; }

/* ---- 14. Téléphone ---------------------------------------------------------- */
@media (max-width: 700px) {
  html.lecture-modules { --m-fs: 1.0625rem; --m-lh: 1.64; --m-pad: 1.15rem; --m-gut: 1rem; }
  html.lecture-modules .peau-main .pl-tete { display: block; }
  html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child + div > p:first-child,
  html.lecture-modules .peau-main .cps-chapo { font-size: 1.2rem !important; line-height: 1.5 !important; }
  html.lecture-modules .peau-main .pl-tete .pl-meta { justify-content: flex-start; margin-top: 1rem; }
  /* l'onglet numéroté devient une bande en tête de carte */
  html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card) {
    padding: calc(2.6rem + var(--m-pad)) var(--m-pad) var(--m-pad) !important; border-radius: 18px !important;
  }
  html.lecture-modules .technique-page-container .technique-card:not(.technique-card .technique-card)::before {
    right: 0; bottom: auto; width: auto; height: 2.6rem; border-radius: 18px 18px 0 0; justify-content: flex-start;
    align-items: center; padding: 0 var(--m-pad); font-size: 1.25rem;
  }
  html.lecture-modules .technique-page-container .technique-card.border:not(.technique-card .technique-card)::before { border-right: 0; border-bottom: 3px solid var(--m-acc); }
  html.lecture-modules .peau-main .technique-card [class*="w-["] { max-width: 100% !important; }
  html.lecture-modules .peau-main .technique-card div { min-width: 0 !important; }
  html.lecture-modules .peau-main .technique-card button { min-height: 44px; white-space: normal !important; max-width: 100%; height: auto !important; }
  html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > .pl-corps { padding-left: 0; }
  html.lecture-modules .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > h2::before,
  html.lecture-modules .peau-main .cps-h2::before,
  html.lecture-modules .peau-main #the-big-idea section.flex-col > div > h5:first-child::before { width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: .85rem; }
  html.lecture-modules .peau-main .pl-mythe { grid-template-columns: 1fr !important; }
  html.lecture-modules .peau-main .pl-section-avis { padding: 1.2rem var(--m-pad); }
  html.lecture-modules .peau-main .cps-zone-btn { min-height: 44px; }
  /* tableau : chaque ligne devient une petite fiche */
  html.lecture-modules .peau-main .pd-tableau-enveloppe { overflow: visible !important; }
  html.lecture-modules .peau-main .pd-tableau, html.lecture-modules .peau-main .pd-tableau :is(thead, tbody, tr) { display: block !important; width: 100% !important; min-width: 0 !important; }
  html.lecture-modules .peau-main .pd-tableau thead { display: none !important; }
  html.lecture-modules .peau-main .pd-tableau tbody tr { background: var(--m-soft); border-radius: 14px; padding: .9rem 1rem; margin: 0 0 .6rem; }
  html.lecture-modules .peau-main .pd-tableau td { display: block !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }
  html.lecture-modules .peau-main .pd-tableau td:first-child { font-weight: 700; margin-bottom: .35rem; }
  html.lecture-modules .peau-main .pd-tableau td + td { margin-top: .35rem; }
}

/* ---- 15. Finitions ----------------------------------------------------------- */
/* le bas d'une rangée n'accumule pas les marges du texte d'origine */
html.lecture-modules .peau-main .technique-card :is(.pl-corps, .pl-corps > :last-child, .flex-col > p:last-child) { margin-bottom: 0 !important; }
html.lecture-modules .peau-main .technique-card .pl-corps { margin-top: 0 !important; }
/* une liste d'onglets plus longue que le cadre défile : un fondu le dit, au lieu d'un mot tranché net */
html.lecture-modules .peau-main .pl-onglets-longs .pl-onglets-liste {
  padding-right: 2rem;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
/* fiches maison : puces, encadrés, tableaux à l'encre */
html.lecture-modules .peau-main .pd-corps ul li::marker { color: var(--m-acc); }
html.lecture-modules .peau-main .plaisir-details .pd-encadre { gap: .45rem !important; }
html.lecture-modules .peau-main .plaisir-details .pd-encadre > p + p { margin-top: .25rem !important; }
html.lecture-modules .peau-main .plaisir-details .pd-tableau td { color: var(--fg) !important; font-size: 1rem !important; line-height: 1.5 !important; }
html.lecture-modules .peau-main .plaisir-details .pd-tableau td:first-child { font-weight: 700; }
html.lecture-modules .peau-main .plaisir-details .pd-tableau th { background: var(--m-soft-2) !important; color: var(--fg) !important; }
@media (min-width: 701px) { html.lecture-modules .peau-main .plaisir-details .pd-tableau td { background: var(--m-soft) !important; } }

/* =========================================================================
   AJUSTEMENTS (retour de Jérôme, 05/10/2026)
   1. vue « dézoomée » : sur ordinateur, tout est à ~80 % (comme un zoom navigateur à 80 %) — plus d'informations par écran ;
   2. les blocs sans animation qui suivent des techniques animées (« Aucun rythme idéal », « En pratique ») ne sont plus numérotés :
      ils prennent un autre dessin, une note de synthèse sur fond teinté, pour bien détacher la partie « mouvement » ;
   3. « Ce que décrivent les femmes » occupe toute la largeur (deux colonnes) au lieu de rester à gauche.
   ========================================================================= */

/* ---- 1. Dézoom sur ordinateur ---------------------------------------------- */
@media (min-width: 1000px) {
  html.lecture-modules { --m-zoom: .78; --m-vw: calc(100vw / var(--m-zoom)); }
  html.lecture-modules .peau-main { zoom: var(--m-zoom); }
  html.lecture-modules[data-taille="petite"] .peau-main { zoom: .75; }
  html.lecture-modules[data-taille="grande"] .peau-main { zoom: .92; }
  /* les onglets collants se calent sous la barre du haut, dont la hauteur ne suit pas le zoom du contenu */
  html.lecture-modules .peau-main .pl-onglets { top: calc(var(--h-barre, 64px) / var(--m-zoom)) !important; }
  html.lecture-modules[data-taille="petite"] .peau-main .pl-onglets { top: calc(var(--h-barre, 64px) / .75) !important; }
  html.lecture-modules[data-taille="grande"] .peau-main .pl-onglets { top: calc(var(--h-barre, 64px) / .92) !important; }
}

/* ---- 2. Les blocs de synthèse sans animation : un autre dessin ----------- */
/* (seulement quand la page a des techniques animées ET que le bloc est dans un groupe sans animation, à plusieurs ; une carte seule reste une technique) */
html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"]))) {
  counter-increment: none;
  background: var(--surface) !important; border: 1.5px solid var(--m-edge) !important; border-left: 6px solid var(--m-acc) !important;
  border-radius: 6px var(--m-r) var(--m-r) 6px !important; box-shadow: none !important;
  padding: var(--m-pad) !important;
}
html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"])))::before {
  content: none !important; display: none !important;
}
/* leur « En pratique » : l'encadré teinté habituel (.sv-bloc), posé sur la feuille claire de la note (06/10 : la note était teinte sur teinte) */
/* leur disposition : le titre et son texte d'abord, la synthèse « En pratique » à côté, plus large */
html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"]))) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: start; }
html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"]))) > [class*="md:order-2"] { order: -1; }
/* un enfant « col-span-2 » de la capture dans cette grille à UNE colonne fabriquait une 2e colonne implicite de 0 px, où tombait l'encadré
   suivant — il débordait de la note de 169 px (La plénitude, vu le 06/10 par outils/verifier_bulles.py) : il couvre la largeur, sans plus */
html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"]))) > [class*="col-span-2"] { grid-column: 1 / -1 !important; }
@media (min-width: 900px) {
  html.lecture-modules .technique-page-container:has(.technique-card video[loop]) div:not(:has(video[loop])) > .technique-card:not(.border, :only-child):not(:has(video[loop], img:not(.hidden, .pl-masque, .self-start, [class*="absolute"], [class*="24px"], [class*="64px"]))):has(> [class*="md:order-2"]) { grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.2fr) !important; }
}

/* ---- 3. « Ce que décrivent les femmes » : toute la largeur ------------------ */
@media (min-width: 900px) {
  html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail .sv-bloc { column-count: 2; column-gap: 3rem; column-rule: 1px solid var(--m-line); }
  html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail .sv-bloc > * { max-width: none !important; break-inside: avoid-column; }
  html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail .sv-bloc :is(.sv-bloc-titre) { column-span: all; }
  html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail .sv-bloc .sv-bloc-soustitre { break-after: avoid-column; }
  html.lecture-modules .peau-main .pl-section-avis .sv-avis-detail .sv-bloc :is(p, li) { max-width: none !important; }
}

/* ---- Ajustements du 05/10 (soir) : barre d'onglets plus aérée ---------------------------------------- */
html.lecture-modules { --h-onglets: 62px; }
html.lecture-modules .peau-main .pl-onglets { box-shadow: 0 12px 18px -16px rgba(42, 16, 18, .35); }
html.lecture-modules .peau-main .pl-onglets-int { padding-block: .3rem; }
html.lecture-modules .peau-main .technique-page-container > nav.pl-onglets + * { margin-top: 2.6rem; }

/* badge « Réservée » d'une carte précédente : à gauche, sans s'étirer sur toute la carte (flex en colonne) */
.pl-ps--prec .verrou-badge { align-self: flex-start; }

/* une technique faite d'un titre et d'une citation seulement : la citation sous le titre, à une largeur de lecture */
html.lecture-modules .technique-card div[class*="flex-col"]:has(> div > .pl-citation):not(:has(> :nth-child(3))) > div { max-width: 52rem; }

/* mode sombre retiré le 05/10 (tout est travaillé en clair) : plus de bascule ni de réglage de thème */
[data-bascule-theme], .parametres-section:has([data-parametres-theme]) { display: none !important; }
:root { color-scheme: light; }

/* bandeau d'onglets collant : plus d'air sous lui, et un léger fondu pour que le texte qui défile ne le touche pas */
.pl-onglets { padding-bottom: .65rem; }
.pl-onglets::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 85%, transparent), transparent); }

/* =========================================================================
   COMPTE, BIBLIOTHÈQUE, ACHAT (05/10/2026) — peau/pages_compte.py, peau/compte.js, peau.js (initCompte, initVerrous)
   Même cadre que les planches : cartes à filet net de 1,5 px (--m-line), bulles teintées à la couleur de la partie, distinctes de leur carte
   (--b-fond / --b-filet, calculées depuis la couleur de la partie — aucun token existant n'est modifié).
   ========================================================================= */
:root { --b-line: var(--m-line, color-mix(in srgb, var(--fg) 30%, var(--surface))); --b-ombre: var(--m-ombre, var(--ombre-2)); }
[data-partie="bases"] { --pa: var(--c-bases); }
[data-partie="clitoris"] { --pa: var(--c-clitoris); }
[data-partie="interieur"] { --pa: var(--c-interieur); }
[data-partie="objets"] { --pa: var(--c-objets); }
.bi, .achat-carte, .verrou-carte, .cpt-offres { --pa-def: var(--accent); }
.bi-partie, .bi-offre, .bi-groupe, .bi-ligne-partie, .bi-pack-etat, .bi-resume, .bi-confirmer, .achat-carte, .verrou-carte, .cpt-offre {
  --b-c: var(--pa, var(--accent));
  --b-fond: color-mix(in srgb, var(--b-c) 9%, var(--surface));
  --b-filet: color-mix(in srgb, var(--b-c) 45%, var(--surface));
}

/* ---- l'engrenage et son menu ---- */
.barre-menu-compte [data-ouvrir-compte] { position: relative; }
.menu-compte-pastille { position: absolute; top: 9px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.menu-compte-pastille[hidden] { display: none; }
.menu-compte { width: 280px; padding: 8px; }
.menu-compte [hidden] { display: none !important; }
.menu-compte .popover-titre { padding: 8px 12px 4px; }
.menu-compte-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) !important; font-weight: 600; }
.menu-compte-lien { justify-content: flex-start !important; gap: 12px !important; width: 100%; border: 0; background: none; font: inherit; font-size: .98rem; text-align: left; font-weight: 600; }
.menu-compte-lien svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.menu-compte-lien:hover { color: var(--accent); }
.menu-compte-bas { border-top: 1px solid var(--line); margin-top: 6px !important; padding-top: 6px !important; }

/* ---- dialogue du cadenas : les deux offres qui ouvrent la planche (sa partie, l'accès total mis en avant) ---- */
.verrou-offres[hidden] { display: none !important; }
.verrou-offres { margin-top: 1.1rem; text-align: left; }
.verrou-offres-titre { margin: 0 0 .45rem; font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.verrou-offres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.verrou-offre { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: baseline; padding: .75rem 1rem; border-radius: 16px; border: 1.5px solid var(--b-line); background: var(--surface); color: var(--fg); text-decoration: none; }
.verrou-offre:hover { border-color: var(--accent); background: var(--b-fond); }
.verrou-offre-nom { font-weight: 700; }
.verrou-offre-prix { font-family: var(--font-d); font-weight: 600; font-size: 1.15rem; white-space: nowrap; color: var(--accent); }
.verrou-offre-detail { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.verrou-offre--tout { border-color: var(--accent); background: var(--accent-soft); }
.verrou-offre-badge { grid-column: 1 / -1; justify-self: start; padding: .1rem .55rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .75rem; font-weight: 800; letter-spacing: .02em; }

/* ---- récapitulatif d'achat ---- */
.dialogue-achat { border: 0; padding: 0; width: min(92vw, 480px); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.dialogue-achat::backdrop { background: rgba(28, 16, 18, .6); }
.achat-carte { position: relative; padding: 1.75rem 1.5rem 1.5rem; display: grid; gap: .55rem; }
.achat-carte [hidden] { display: none !important; }
.achat-carte .etiq { margin: 0; }
.achat-carte h2 { margin: 0; font-family: var(--font-d); font-size: 1.5rem; line-height: 1.2; padding-right: 2.5rem; }
.achat-contenu { margin: 0; color: var(--muted); }
.achat-prix { margin: .3rem 0 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.achat-montant { font-family: var(--font-d); font-size: 2rem; font-weight: 600; color: var(--accent); line-height: 1; }
.achat-note { margin: .2rem 0 0; padding: .65rem .85rem; border-radius: 14px; background: var(--b-fond); border: 1.5px solid var(--b-filet); font-size: .95rem; }
.achat-fermer { position: absolute; top: .4rem; right: .4rem; }
.achat-carte .cpt-consent { margin: .5rem 0 0; font-size: .95rem; }
.achat-carte .cpt-aide { margin: 0; }
.achat-message { margin: 0; padding: .7rem .9rem; border-radius: 14px; background: var(--surface-2); font-size: .95rem; }
.achat-message--erreur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.achat-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.achat-actions .btn { flex: 1 1 11rem; }
.achat-actions .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---- Ma bibliothèque ---- */
body[data-page="bibliotheque"] .pg-main { width: min(1120px, 100%); }
body[data-page="bibliotheque"] .cpt { max-width: none; }
.bi { display: grid; gap: 1.25rem; }
.bi [hidden] { display: none !important; }
.bi-carte, .bi-resume, .bi-partie, .bi-confirmer {
  background: var(--surface); border: 1.5px solid var(--b-line); border-radius: 24px; padding: clamp(1.1rem, 2.4vw, 1.75rem); box-shadow: var(--b-ombre);
}
.bi-resume { display: grid; gap: .7rem; }
.bi-resume-haut { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem; }
.bi-grand { margin: 0; font-family: var(--font-d); line-height: 1; color: var(--accent); }
.bi-grand b { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 600; }
.bi-grand span { font-size: 1.4rem; color: var(--muted); font-weight: 500; }
.bi-resume-texte { margin: 0; font-size: 1.1rem; font-weight: 600; }
.bi-resume-lues { margin: 0; color: var(--muted); font-size: .95rem; }
.bi-jauge { height: 10px; border-radius: 999px; background: var(--b-fond, var(--accent-soft)); border: 1px solid var(--b-filet, var(--accent-line)); overflow: hidden; }
.bi-jauge span { display: block; height: 100%; background: var(--b-c, var(--accent)); border-radius: 999px; min-width: 6px; transition: width .4s var(--easing); }
.bi-jauge--petite { height: 7px; }
.bi-retour { margin: 0; padding: .9rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--accent-line); font-weight: 600; }
.bi-retour--ok { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); }
.bi-retour--attente::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .6rem; vertical-align: -.15em; border-radius: 50%; border: 2.5px solid var(--accent-line); border-top-color: var(--accent); animation: bi-tourne .9s linear infinite; }
@keyframes bi-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bi-retour--attente::before { animation: none; } }

.bi-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .3rem; background: var(--surface); border: 1.5px solid var(--b-line); border-radius: 999px; }
.bi-onglets [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; text-align: center; line-height: 1.2; }
.bi-onglets [role="tab"]:hover { color: var(--accent); background: var(--accent-soft); }
.bi-onglets [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--accent-fg); }
.bi-tab-compte { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 999px; background: var(--accent-soft-2); color: var(--accent); font-size: .8rem; }
[aria-selected="true"] > .bi-tab-compte { background: var(--surface); }
@media (max-width: 640px) {
  .bi-onglets { border-radius: 22px; }
  .bi-onglets [role="tab"] { border-radius: 16px; padding: .3rem .35rem; font-size: .9rem; }
}
.bi-panneau { outline: none; }
.bi-panneau:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.bi-intro { margin: 0 0 1rem; color: var(--muted); }

/* « Ce que j'ai » : une carte par partie, filet haut à sa couleur */
.bi-parties { display: grid; gap: 1.1rem; }
.bi-partie-tete { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; padding: .9rem 1.1rem 1rem; border-radius: 18px; background: var(--b-fond); border: 1.5px solid var(--b-filet); }
.bi-partie-tete h3::before, .bi-offre h3::before, .bi-groupe legend::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: .55rem; border-radius: 50%; background: var(--b-c); vertical-align: .08em; }
.bi-partie-tete h3 { margin: 0; font-family: var(--font-d); font-size: 1.45rem; color: var(--fg); }
.bi-partie-n { margin: 0; font-weight: 700; color: var(--b-c); white-space: nowrap; }
.bi-partie-tete .bi-jauge { grid-column: 1 / -1; }
.bi-planches { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
@media (min-width: 760px) { .bi-planches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bi-planche-lien { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .45rem .8rem .45rem .5rem; border-radius: 14px; border: 1.5px solid var(--b-line); background: var(--surface); color: var(--fg); text-decoration: none; }
.bi-planche-lien:hover { border-color: var(--b-c); background: var(--b-fond); }
.bi-planche-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--b-fond); border: 1.5px solid var(--b-filet); color: var(--b-c); font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; }
.bi-planche-ic svg { width: 17px; height: 17px; }
.bi-planche-ic--lue { background: var(--b-c); border-color: var(--b-c); color: var(--surface); }
.bi-planche-titre { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.bi-planche--fermee .bi-planche-lien { background: var(--surface-2); }
.bi-planche--fermee .bi-planche-titre { color: var(--muted); }
.bi-planche--fermee .bi-planche-ic { background: var(--surface); color: var(--muted); border-color: var(--b-line); }
.bi-chip { flex: none; display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--b-fond, var(--accent-soft)); color: var(--b-c, var(--accent)); border: 1px solid var(--b-filet, var(--accent-line)); white-space: nowrap; }
.bi-chip--fermee { background: var(--surface); color: var(--muted); border-color: var(--b-line); }
.bi-partie-pied { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--b-fond); border: 1.5px solid var(--b-filet); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.bi-partie-offre { margin: 0; font-weight: 700; flex: 1 1 100%; }
.bi-partie-pied .bi-achat { flex: 1 1 18rem; }

/* bloc prix + bouton (Compléter, Offres, pied de partie) */
.bi-achat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.bi-achat .bi-prix { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-family: var(--font-d); font-size: 1.6rem; font-weight: 600; color: var(--accent); }
.bi-montant { display: grid; gap: .15rem; }
.bi-achat .btn { margin-left: auto; }
.bi-tout-conseil { margin: 0; font-weight: 600; }
.bi-offre--conseil, .cpt-offre.bi-offre--conseil { border-color: var(--accent); }
.bi-achat .btn[disabled] { opacity: .6; cursor: not-allowed; }
.bi-deja { margin: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: var(--b-fond, var(--accent-soft)); border: 1.5px solid var(--b-filet, var(--accent-line)); color: var(--b-c, var(--accent)); font-weight: 800; }
.bi-deja::before { content: "✓"; }
/* « rien à compléter » : tout l'onglet tient dans cette phrase — une feuille claire posée sur le papier, pas une pastille teintée (06/10) */
.bi-panneau:has(.bi-rien) .bi-intro { display: none; }
.bi-deja.bi-rien { grid-column: 1 / -1; display: flex; border-radius: 18px; padding: 1rem 1.2rem; background: var(--surface); border: 1.5px solid var(--b-filet, var(--accent-line)); box-shadow: var(--b-ombre); }

/* « Compléter » */
.bi-offres { display: grid; gap: 1rem; }
@media (min-width: 760px) { .bi-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bi-offre--tout { grid-column: 1 / -1; } }
.bi-offre { display: grid; gap: .45rem; align-content: start; }
.bi-offre h3 { margin: 0; font-family: var(--font-d); font-size: 1.3rem; }
.bi-offre-detail { margin: 0; color: var(--muted); }
.bi-offre .bi-achat { margin-top: .5rem; }
.bi-offre--tout { --b-c: var(--vin); }
.bi-offre--a-toi { box-shadow: none; }

/* « Mes achats » */
.bi-achats { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bi-achat-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: 1rem 1.15rem; border-radius: 18px; border: 1.5px solid var(--b-line); background: var(--surface); }
.bi-achat-vide { padding: 1rem 1.15rem; border-radius: 18px; border: 1.5px dashed var(--b-line); background: var(--surface); color: var(--muted); }
.bi-achat-gauche p, .bi-achat-droite p { margin: 0; }
.bi-achat-nom { font-weight: 700; }
.bi-achat-date, .bi-achat-calcul { color: var(--muted); font-size: .92rem; }
.bi-achat-droite { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.bi-achat-montant { font-family: var(--font-d); font-weight: 600; font-size: 1.2rem; }
.bi-chip--paid { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.bi-chip--pending { background: var(--surface-2); color: var(--fg); border-color: var(--line-strong); }
.bi-chip--refunded, .bi-chip--canceled, .bi-chip--disputed { background: var(--surface); color: var(--muted); border-color: var(--b-line); }

/* Offres : prix personnalisé dans les cartes */
.cpt-offre { border: 1.5px solid var(--b-line); border-radius: 24px; }
.cpt-offre .bi-achat { margin-top: .6rem; }
.bi-ligne-partie { display: grid; gap: .45rem; margin-top: .7rem; padding: .9rem 1rem; border-radius: 18px; background: var(--b-fond); border: 1.5px solid var(--b-filet); }
.bi-ligne-nom { color: var(--fg); }
.bi-ligne-partie .bi-achat .bi-prix { font-size: 1.35rem; }
.cpt-offre.est-demande, .bi-ligne-partie.est-demande { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Offres (05/10) : quatre parties, puis l'accès total mis en avant — « Le meilleur choix », « au lieu de 60 € », discret, jamais barré */
.cpt-offres-parties { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cpt-offres-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpt-offre-partie { display: grid; align-content: start; gap: .3rem; border-top: 5px solid var(--b-c); }
.cpt-offre-partie h2 { margin: 0; }
.cpt-offre-tout { border: 2.5px solid var(--accent); background: var(--accent-soft); padding: clamp(1.4rem, 3vw, 2rem); }
.cpt-offre-tout h2 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); }
.cpt-offre-tout .bi-prix { font-size: 2.2rem; }
.bi-badge-meilleur { display: inline-block; justify-self: start; width: fit-content; margin: 0 0 .5rem !important; padding: .2rem .75rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.bi-tout-offre { font-weight: 700; }
.bi-tout-absent { margin: 0; grid-column: 1 / -1; }
.bi-offre--tout.bi-offre--conseil { border-width: 2.5px; background: var(--accent-soft); }

/* les marges de texte des pages simples (.pg-corps p : 1rem, liens soulignés) ne valent pas dans ces composants */
.pg-corps .bi p, .pg-corps .achat-carte p, .pg-corps .cpt-offre .bi-achat p, .pg-corps .bi-ligne-partie p { margin: 0; }
.pg-corps .bi-pack-etat > p + p, .pg-corps .bi-pack-etat > h3 + p { margin-top: .2rem; }
.pg-corps :is(.bi-planches, .bi-achats) { padding: 0; margin: 0; }     /* `.pg-corps ul` les décalait de 1,2 rem (06/10) */
.pg-corps a.bi-planche-lien { color: var(--fg); text-decoration: none; }
.pg-corps .bi-planche--fermee a.bi-planche-lien { color: var(--muted); }
#bi-pack #connexion-message { margin-top: 1rem; }

/* un bouton dans le texte d'une page de compte / d'une page simple : `.pg-corps a { color: accent }` (plus spécifique que `.btn`) rendait son libellé invisible (rouge sur rouge) */
.pg-corps a.btn, .pg-corps a.btn:hover { color: var(--accent-fg); text-decoration: none; }
.pg-corps a.btn-ghost { color: var(--fg); }
.pg-corps a.btn-ghost:hover { color: var(--accent); }

/* plus de réglage « animations en pause » dans les paramètres (retour de Jérôme, 05/10) : le réglage système « réduire les animations » reste respecté */
.parametres-section:has([data-parametres-animations]) { display: none !important; }
@media (prefers-reduced-motion: reduce) { .parametres-section:has([data-parametres-animations]) { display: block !important; } }

/* mention sous chaque planche : contenu éducatif, pas un avis médical */
.pl-avertissement { margin: 1.4rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); text-align: center; }
.pl-avertissement a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   MOBILE (06/10/2026) — audits tasks/mobile/responsive-et-fonctionnel.md et lecture-et-accessibilite.md
   Règle : rien ne change sur ordinateur, sauf les défauts qui y existaient aussi (contraste du bouton de pression
   des Cercles, anneau de focus des boutons repris). Tout le reste est borné par une media query de téléphone.
   ========================================================================= */

/* focus visible sur les boutons repris de la capture : leurs classes `focus-visible:outline-none` passaient devant l'anneau global */
.peau-main :is(button, [role="button"], [role="switch"], a, summary):focus-visible { outline: 2.5px solid var(--accent) !important; outline-offset: 3px !important; }
.peau-main .testimonial-section :is(button, a):focus-visible { outline-color: #fff !important; }
main#contenu:focus { outline: none; }                      /* cible du lien d'évitement (tabindex=-1) : pas d'anneau sur tout le contenu */

/* Les Cercles : le libellé du bouton choisi suit le bouton (le h4 gardait l'encre sur le fond framboise : 2,86:1) */
html.lecture-modules .peau-main [data-selecteur-cercles] button[aria-pressed="true"] * { color: var(--accent-fg) !important; }
html.lecture-modules .peau-main [data-selecteur-cercles] button[aria-pressed="false"] * { color: var(--fg) !important; }
/* … et sous 1100 px (grille aplatie en colonne), chaque intitulé revient au-dessus de SES boutons */
@media (max-width: 1099px) {
  html.lecture-modules .peau-main [data-selecteur-cercles] [class*="grid-cols-2"] > :nth-child(1) { order: 1; }
  html.lecture-modules .peau-main [data-selecteur-cercles] [class*="grid-cols-2"] > :nth-child(3) { order: 2; }
  html.lecture-modules .peau-main [data-selecteur-cercles] [class*="grid-cols-2"] > :nth-child(2) { order: 3; margin-top: .75rem !important; }
  html.lecture-modules .peau-main [data-selecteur-cercles] [class*="grid-cols-2"] > :nth-child(4) { order: 4; }
  /* les trois boutons de pression avaient un titre (Fraunces 21 px) dans le bouton : même dessin que ceux du point */
  html.lecture-modules .peau-main [data-selecteur-cercles] button[data-pression] :is(h4, h5) { font: inherit !important; font-weight: 500 !important; margin: 0 !important; }
}

/* une phrase coupée en blocs : un lien dans un conteneur flex de la capture (peau.js pose .pl-flux, le texte reste en ligne) */
.peau-main .pl-flux { display: block !important; }
.peau-main .pl-flux > svg { display: inline-block; vertical-align: top; }

/* zones sûres (iPhone à encoche, en paysage surtout) : sans effet là où il n'y a pas d'encoche */
.barre { padding-left: max(var(--space), env(safe-area-inset-left)); padding-right: max(var(--space), env(safe-area-inset-right)); }
.pied { padding-left: max(var(--space), env(safe-area-inset-left)); padding-right: max(var(--space), env(safe-area-inset-right)); }
html.lecture-modules .peau-main { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px) !important; }
.tiroir { padding-left: max(18px, env(safe-area-inset-left)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }

/* tiroir (Index) : l'en-tête et son bouton fermer restent en haut, la page ne défile plus derrière le voile */
.tiroir-tete { position: sticky; top: -18px; z-index: 1; background: var(--surface); padding-top: 18px; margin-top: -18px; }
.voile { touch-action: none; }
html.gel, html.gel body { overscroll-behavior: none; }

/* Le schéma d'une fiche maison (La carte du corps) : sur téléphone, il garde une largeur lisible et défile de côté */
.pd-schema-glisser { display: none; }
@media (max-width: 600px) {
  .pd-schema-defile { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: -.6rem; padding: 0 .6rem .35rem; }
  .pd-schema-defile > svg { min-width: var(--schema-min, 620px); }
  .pd-schema-glisser { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
  .pd-schema-glisser::before { content: "↔"; color: var(--m-acc, var(--accent)); font-weight: 700; }
}

/* l'en-tête recopié dans chaque cellule (peau.js initTableaux) ne sert que quand le tableau devient une suite de fiches */
.pd-tableau .pd-libelle { display: none; }

/* Téléphone et tablette (≤ 700 px) */
@media (max-width: 700px) {
  /* tableau en fiches : chaque valeur dit à quelle colonne elle répond (peau.js copie l'en-tête dans data-libelle) */
  html.lecture-modules .peau-main .pd-tableau td > .pd-libelle {
    display: block; margin: 0 0 .1rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35; color: var(--muted);
  }
  html.lecture-modules .peau-main .pd-tableau td + td { margin-top: .6rem !important; }
  /* « Points de vue » : la citation claire est posée sur une photo ; la photo est assombrie (voile) pour que le texte se lise
     partout, y compris sur ses zones claires */
  html.lecture-modules .peau-main .testimonial-section img.absolute { filter: brightness(.58) saturate(.9); }
  /* boutons « révéler » de la capture (Point G : « Fermer les informations sur les zones… ») : le libellé passe à la ligne
     au lieu de déborder de 60 px (la page entière se dézoomait sur un téléphone de 320 px) */
  html.lecture-modules .peau-main button[data-revele] { white-space: normal !important; height: auto !important; max-width: 100%; text-align: left; }
  /* titres : des lignes équilibrées plutôt qu'un mot seul en bas */
  .peau-main :is(h1, h2, h3, h4, h5), .co-hero h1, .pg-corps h1 { text-wrap: balance; }
}

/* Petit téléphone (≤ 480 px) */
@media (max-width: 480px) {
  /* une note « En pratique » dans une carte : un filet au lieu d'un cadre dans le cadre (5 caractères de plus par ligne) */
  html.lecture-modules .peau-main :is(.technique-card, section.mobile-override) .sv-bloc {
    border: 0 !important; border-top: 1px solid var(--m-line) !important; border-radius: 0 !important;
    background: none !important; padding: 1rem 0 0 !important; box-shadow: none !important;
  }
  /* « Grande » taille de texte : la base passe déjà à 20 px, le zoom en plus faisait des lignes de 11 caractères */
  :root[data-taille="grande"] .peau-zoom { zoom: 1; }
  html.lecture-modules[data-taille="grande"] .peau-main #the-big-idea section.flex-col > div > h5:first-child + div > p:first-child { font-size: 1rem !important; }
  html.lecture-modules[data-taille="grande"] .peau-main :is(#techniques, #bringing-it-to-the-bedroom) div.border-b > h2,
  html.lecture-modules[data-taille="grande"] .peau-main .cps-h2,
  html.lecture-modules[data-taille="grande"] .peau-main #the-big-idea section.flex-col > div > h5:first-child { font-size: 1.5rem !important; }
  /* accordéons de la capture (La douchette, Le plaisir anal, Sous les vêtements) : le texte ouvert repart sous la pastille,
     pas sous le titre (il commençait 49 px plus loin : colonnes de 205 à 237 px) */
  html.lecture-modules .peau-main div[data-orientation="vertical"][data-state] > div > div[role="region"] { margin-inline-start: -49px; }
  /* mots longs (allemand, russe) dans un titre ou une carte de partie : coupure plutôt que débordement */
  .peau-main :is(h1, h2, h3, h4, h5), .co-carte :is(h3, p), .pg-main :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .peau-main :is(h2, h3, h4, h5) > span { min-width: 0; }
  .co-carte { grid-template-columns: 64px minmax(0, 1fr); }
  :root[data-videos="sans"] .peau-main .sv-bloc { min-width: 0; }
  /* Index : sur la ligne d'une planche fermée, le cadenas seul (le mot « Réservée » écrasait le titre) */
  .idx-lien .verrou-badge { font-size: 0; padding: .3rem; gap: 0; }
  .idx-lien .verrou-badge svg { width: 14px; height: 14px; }
}

/* Ma bibliothèque, téléphone étroit : le compteur « 0 sur 10 ouvertes » passe sous le nom de la partie (« Les / bases » cassé en deux) */
@media (max-width: 480px) {
  .bi-partie-tete { grid-template-columns: 1fr; }
}

/* Paysage bas (téléphone couché) : la barre du haut ne colle plus, les onglets prennent sa place ; plus de ligne de titre compact */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  :root { --h-barre: 0px; }
  header.peau-tete, .barre { position: relative; }
  .pl-onglets { top: 0 !important; }
  .pl-onglets.pl-titre-visible .pl-onglets-titre { display: none !important; }
  .pl-onglets.pl-titre-visible .pl-onglets-int { padding-top: 0; padding-bottom: 0; }
}

/* animations en boucle : sur écran tactile, le toucher arrive jusqu'à la vidéo (les cadres de la capture sont en pointer-events:none) — peau.js initPauseAnimations */
html.anim-tactile .peau-main video[autoplay][loop]:not([data-video-role] video) { pointer-events: auto !important; cursor: pointer; }

/* =========================================================================
   MA BIBLIOTHÈQUE SUR ORDINATEUR (06/10/2026, retour du fondateur : « un peu gros ») — chaque onglet tient dans UN écran de portable
   (1440×900 et 1280×800 mesurés par outils/tester_bibliotheque.py). Seulement ≥ 1000 px : le téléphone ne change pas.
   En-tête et résumé sur une ligne (la page devient une grille ; .pg-corps et .bi, deux <div> sans rôle, s'effacent en display:contents),
   « Ce que j'ai » en 4 colonnes (une par partie, planches en liste serrée), « Compléter » : l'accès total en bandeau, les parties en 4 cartes.
   ========================================================================= */
@media (min-width: 1000px) {
  body[data-page="bibliotheque"] .pg-main {
    width: min(1240px, 100%); padding-bottom: 2rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: 2rem; row-gap: .75rem; align-items: end;
  }
  body[data-page="bibliotheque"] .pg-corps, body[data-page="bibliotheque"] .bi { display: contents; }
  body[data-page="bibliotheque"] :is(.pg-main, .pg-corps, .bi) > * { grid-column: 1 / -1; }
  body[data-page="bibliotheque"] .pg-tete { grid-column: 1; grid-row: 1; padding: .7rem 0 .1rem; margin: 0; border: 0; }
  body[data-page="bibliotheque"] .pg-tete .etiq { margin: 0; }
  body[data-page="bibliotheque"] .pg-tete h1 { font-size: 2.3rem; margin: .1rem 0 .2rem; }
  body[data-page="bibliotheque"] .pg-sous { font-size: 1rem; }
  body[data-page="bibliotheque"] .bi > .bi-resume { grid-column: 2; grid-row: 1; }
  body[data-page="bibliotheque"] .bi > .bi-onglets { margin-top: .35rem; }

  /* le résumé : un bandeau (chiffre, phrase, jauge, planches lues) */
  .bi-resume { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem 1rem; padding: .75rem 1.15rem; border-radius: 20px; }
  .bi-resume-haut { display: contents; }
  .bi-grand { grid-row: 1 / span 3; }
  .bi-grand b { font-size: 2.5rem; }
  .bi-grand span { font-size: 1.1rem; }
  .bi-resume-texte { font-size: .98rem; line-height: 1.3; }
  .bi-resume-lues { font-size: .85rem; line-height: 1.3; }
  .bi-jauge { height: 8px; }

  .bi-onglets { padding: .25rem; }
  .bi-onglets [role="tab"] { min-height: 38px; font-size: .95rem; }
  .bi-intro { margin: 0 0 .7rem; font-size: .98rem; }

  /* « Ce que j'ai » : une colonne par partie */
  .bi-parties { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: stretch; }
  .bi-partie { padding: .7rem; border-radius: 20px; display: flex; flex-direction: column; }
  .bi-partie-tete { grid-template-columns: minmax(0, 1fr); gap: .15rem; margin-bottom: .4rem; padding: .5rem .7rem .6rem; border-radius: 14px; }
  .bi-partie-tete h3 { font-size: 1.15rem; line-height: 1.2; }
  .bi-partie-tete h3::before { width: 9px; height: 9px; margin-right: .45rem; }
  .bi-partie-n { font-size: .82rem; }
  .bi-planches { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .bi-planche-lien { min-height: 26px; gap: .5rem; padding: .15rem .45rem .15rem .2rem; border-radius: 9px; border-color: transparent; background: none; font-size: .86rem; }
  .bi-planche-lien:hover { border-color: var(--b-filet); }
  .bi-planche--fermee .bi-planche-lien { background: none; }
  .bi-planche-ic { width: 21px; height: 21px; border-width: 1px; font-size: .7rem; }
  .bi-planche-ic svg { width: 12px; height: 12px; }
  .bi-planche-titre { font-weight: 600; line-height: 1.22; }
  /* l'icône dit déjà « fermée » / « lue » : l'étiquette reste pour les lecteurs d'écran */
  .bi-planche-lien .bi-chip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .bi-partie-pied { margin-top: auto; padding: .4rem .45rem .4rem .75rem; border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; align-items: center; }
  .bi-partie > .bi-planches:has(+ .bi-partie-pied) { margin-bottom: .55rem; }
  .bi-partie-pied .bi-achat { display: contents; }
  .bi-partie-offre { grid-column: 1; grid-row: 1; font-size: .8rem; line-height: 1.2; }
  .bi-partie-pied .bi-montant { grid-column: 1; grid-row: 2; }
  .bi-partie-pied .bi-achat .bi-prix { font-size: 1.2rem; line-height: 1.15; }
  .bi-partie-pied .bi-achat .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  :is(.bi-partie-pied, .bi-offre) .btn { min-height: 38px; padding: 0 1rem; font-size: .93rem; }

  /* « Compléter » : l'accès total en bandeau, puis les parties côte à côte */
  .bi-offres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
  .bi-offre { padding: .95rem 1.05rem; border-radius: 20px; gap: .3rem; }
  .bi-offre h3 { font-size: 1.15rem; }
  .bi-offre-detail { font-size: .9rem; line-height: 1.35; }
  .bi-offre .bi-achat { margin-top: auto; padding-top: .4rem; }
  .bi-offre .bi-achat .bi-prix { font-size: 1.35rem; }
  .bi-offre--tout { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: .2rem; align-items: center; padding: 1rem 1.4rem; }
  .bi-offre--tout > * { grid-column: 1; }
  .bi-offre--tout > .bi-achat { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0; gap: .5rem 1.2rem; }
  .bi-offre--tout .bi-badge-meilleur { margin: 0 0 .15rem !important; }
  .bi-offre--tout h3 { font-size: 1.35rem; }
  .bi-offre--tout .bi-achat .bi-prix { font-size: 1.9rem; }
  .bi-offre--tout .bi-achat .btn { min-height: 44px; padding: 0 1.5rem; }
  .bi-tout-absent { font-size: .95rem; }

  /* « Mes achats » */
  .bi-achats { gap: .45rem; }
  .bi-achat-ligne, .bi-achat-vide { padding: .65rem 1rem; border-radius: 14px; }
}

/* =========================================================================
   BULLES DÉTACHÉES DU FOND (06/10/2026, retour du fondateur : « la bulle est rose et le fond est rose ») — contrôle :
   outils/verifier_bulles.py (ΔL* ≥ 6 entre une bulle et ce qui est derrière elle, ou un contour ≥ 1,8:1). Règle de dessin, dans les
   4 parties : une bulle posée sur le papier teinté est une FEUILLE CLAIRE (--surface) ; une bulle posée dans une feuille claire prend
   la TEINTE de la partie (--m-soft) ; jamais teinte sur teinte, jamais feuille sur feuille sans contour.
   ========================================================================= */
/* « En pratique » posé à même la page (sa carte vidéo est masquée en mode sans vidéo) : une feuille claire */
html.lecture-modules .peau-main .sv-bloc:not(:is(.technique-card, #the-big-idea, .cps-section, .pl-section-avis, .bg-card, .pl-resume, [data-state]) .sv-bloc) {
  background: var(--surface) !important; box-shadow: var(--m-ombre) !important;
}
/* accordéons ouverts (La douchette, Le plaisir anal, Les programmes…) : la teinte de la partie et un contour, dans leur carte claire ;
   leur citation redevient une feuille claire */
html.lecture-modules .peau-main div[data-orientation="vertical"][data-state="open"]:not([role="region"]) {
  background-color: var(--m-soft) !important; box-shadow: inset 0 0 0 1.5px var(--m-edge); border-radius: 16px;
}
html.lecture-modules .peau-main div[data-orientation="vertical"][data-state="open"]:not([role="region"]) > div { background: transparent !important; }
/* … et le panneau de détail qui leur répond sur ordinateur (Les programmes : la colonne de droite, .bg-v1-salt) */
html.lecture-modules .peau-main .technique-card .bg-v1-salt { background-color: var(--m-soft) !important; border-color: var(--m-edge) !important; }
html.lecture-modules .peau-main :is([data-state="open"], .bg-v1-salt) .pl-citation { background: var(--surface) !important; }
/* boutons des sélecteurs (Les Cercles : le point, la pression) : teintés, filet de la partie */
html.lecture-modules .peau-main button.bg-\[\#F6F3F0\]:not([aria-pressed="true"]) { background-color: var(--m-soft) !important; border-color: var(--m-edge) !important; }
/* « Par où commencer » (page de partie) : une feuille claire, contour et barre à la couleur de la partie */
.co-commencer {
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--surface)); border-left: 6px solid var(--accent);
  box-shadow: var(--ombre-2);
}
/* … son filet de 6 px prend la place d'un mot allemand à 320 px en texte grand (3 px de trop, tester_mobile) : le titre se coupe */
.co-commencer > div { min-width: 0; }
.co-commencer .co-commencer-titre { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* « La suite » (10/10/2026) : fin des planches offertes. Feuille claire détachée du papier (comme .pl-resume), titre à la couleur de la partie. */
.pl-suite { background: var(--surface); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-lg); padding: 1.5rem 1.7rem; margin: 0 0 2rem; }
.pl-suite[hidden] { display: none; }
.pl-suite-titre { font-family: var(--font-d); font-variation-settings: "SOFT" var(--soft); font-weight: var(--title-w); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .5rem; color: var(--accent, var(--vin)); }
.pl-suite p { margin: 0 0 1.1rem; max-width: 56ch; font-size: 1.02rem; line-height: 1.55; color: var(--fg); }