/*
Theme Name:  The Body Optimist — Newspaper Child
Theme URI:   https://www.ma-grande-taille.com
Description: Child theme Newspaper 12.x pour la refonte 2026 de The Body Optimist. Design tokens en variables CSS, typographie Cooper Hewitt, composants éditoriaux.
Author:      The Body Optimist / Sowitty
Template:    Newspaper
Version:     1.0.0
Requires PHP: 8.0
Text Domain: tbo
*/

/* ==========================================================================
   0. Design tokens
   Source : maquettes « Éditorial chaleureux » (2a) — The Body Optimist - Refonte
   ========================================================================== */
:root {
  /* Couleurs */
  --tbo-prune: #2A1230;        /* titres, header, footer */
  --tbo-prune-2: #4A2F4C;      /* hover sur prune, séparateurs footer */
  --tbo-prune-3: #6B4F6D;      /* bordures sur fond prune */
  --tbo-aubergine: #BF5FDB;    /* rubriques, liens, CTA */
  --tbo-aubergine-dark: #A94BC6;
  --tbo-aubergine-light: #EBC9F5; /* surlignage liens dans le corps */
  --tbo-aubergine-text: #A32DC6;  /* aubergine en petit texte (rubriques, labels) : contraste AA sur blanc, crème, crème 2 */
  --tbo-terracotta: #D2693A;   /* newsletter, mise en avant */
  --tbo-olive: #6E7F4A;        /* badges secondaires */
  --tbo-creme: #F6F1EA;        /* fond clair, texte sur prune */
  --tbo-creme-2: #EFE6DC;      /* blocs (Instagram, auteur, partage) */
  --tbo-sable: #E9DFD3;        /* placeholders images, pub */
  --tbo-line: #E3D7CB;         /* bordures */
  --tbo-line-2: #D9CCC0;       /* bordures boutons ronds */
  --tbo-ink: #3A2C38;          /* corps de texte */
  --tbo-ink-2: #72636C;        /* méta, texte secondaire (contraste AA jusque sur crème 2) */
  --tbo-ink-3: #9C8C94;        /* labels discrets (Publicité) */
  --tbo-on-prune: #D9C8D2;     /* texte courant sur fond prune */
  --tbo-white: #FFFFFF;

  /* Typographie */
  --tbo-font-sans: 'Cooper Hewitt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tbo-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --tbo-font-display: 'Bricolage Grotesque', var(--tbo-font-sans);

  --tbo-h1: 52px;      --tbo-h1-lh: 1.08;
  --tbo-h1-hero: 46px; --tbo-h1-hero-lh: 1.1;
  --tbo-h2: 32px;      --tbo-h2-lh: 1.24;
  --tbo-h3: 24px;      --tbo-h3-lh: 1.15;
  --tbo-body: 18px;    --tbo-body-lh: 1.65;
  --tbo-quote: 23px;   --tbo-quote-lh: 1.4;
  --tbo-meta: 14px;
  --tbo-label: 10px;   --tbo-label-tracking: 0.12em;
  --tbo-cat-hero: 72px;
  --tbo-tracking: 0.012em;

  /* Espacements et rayons */
  --tbo-gutter: 40px;
  --tbo-gap: 28px;
  --tbo-radius: 4px;
  --tbo-radius-md: 8px;
  --tbo-pill: 999px;

  /* Grille */
  --tbo-content-max: 1280px;
  --tbo-article-max: 680px;
  --tbo-sidebar: 300px;
  --tbo-article-head: 740px;   /* en-tête d'article (rubrique, titre, méta) */
  --tbo-article-wrap: 1020px;  /* image à la une + corps + sidebar */

  /* Mouvement */
  --tbo-ease: 160ms ease;
}

@media (max-width: 1018px) {
  :root { --tbo-gutter: 24px; --tbo-h1: 40px; --tbo-cat-hero: 56px; --tbo-h1-hero: 36px; }
}
@media (max-width: 767px) {
  :root { --tbo-gutter: 18px; --tbo-h1: 32px; --tbo-h1-lh: 1.1; --tbo-h2: 26px; --tbo-h3: 21px; --tbo-body: 17px; --tbo-quote: 20px; --tbo-cat-hero: 44px; --tbo-h1-hero: 28px; }
}

/* ==========================================================================
   1. Polices (fichiers dans assets/fonts, préchargées par functions.php)
   ========================================================================== */
@font-face { font-family: 'Cooper Hewitt'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/cooper-hewitt-400.woff2') format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 400; font-style: italic; font-display: swap; src: url('assets/fonts/cooper-hewitt-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/cooper-hewitt-500.woff2') format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/cooper-hewitt-600.woff2') format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 600; font-style: italic; font-display: swap; src: url('assets/fonts/cooper-hewitt-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/cooper-hewitt-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('assets/fonts/bricolage-grotesque-800.woff2') format('woff2'); }

/* ==========================================================================
   2. Base
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
.tbo-btn, .btn-buy, .btn-shop, .btn-guide, .tbo-share-grid a, .tbo-google-links a, .tbo-ad > div, .tbo-cat-pills a, .tbo-google-chip, .tbo-nl-badge, .page-nav a, .page-nav span { box-sizing: border-box; }
body {
  font-family: var(--tbo-font-sans);
  letter-spacing: var(--tbo-tracking);
  color: var(--tbo-ink);
  background: var(--tbo-white);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tbo-prune); transition: color var(--tbo-ease), background-color var(--tbo-ease), border-color var(--tbo-ease); }
a:hover { color: var(--tbo-aubergine); }
::selection { background: var(--tbo-aubergine-light); color: var(--tbo-prune); }
:focus-visible { outline: 2px solid var(--tbo-aubergine); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6, .td-page-title, .tdb-title-text, .entry-title {
  font-family: var(--tbo-font-sans);
  color: var(--tbo-prune);
  text-wrap: pretty;
}
h1, .tdb-single-title .tdb-title-text { font-weight: 500; font-size: var(--tbo-h1); line-height: var(--tbo-h1-lh); letter-spacing: -0.005em; }
h2 { font-weight: 500; font-size: var(--tbo-h2); line-height: var(--tbo-h2-lh); letter-spacing: 0; }
h3 { font-weight: 600; font-size: var(--tbo-h3); line-height: var(--tbo-h3-lh); }

/* Label mono (rubrique, « Publicité », titres de colonnes footer) */
.tbo-label,
.td-post-category,
.tdb-category .tdb-entry-category,
.td-module-meta-info .td-post-category,
.tdb-post-meta .tdb-entry-category {
  font-family: var(--tbo-font-mono);
  font-size: var(--tbo-label);
  font-weight: 500;
  letter-spacing: var(--tbo-label-tracking);
  text-transform: uppercase;
  color: var(--tbo-aubergine-text);
  background: none;
  padding: 0;
  margin: 0 0 8px;
  line-height: 1.4;
}
.td-post-category:hover, .tdb-entry-category:hover { background: none !important; color: var(--tbo-prune) !important; }

/* Boutons */
.tbo-btn, .tdm-btn, .td-read-more a, button.tbo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--tbo-font-sans); font-weight: 700; font-size: 14px; line-height: 1;
  padding: 13px 18px; border-radius: var(--tbo-pill); border: 1px solid transparent;
  background: var(--tbo-aubergine); color: var(--tbo-prune); text-decoration: none; cursor: pointer;
  transition: background-color var(--tbo-ease), border-color var(--tbo-ease), color var(--tbo-ease);
}
.tbo-btn:hover, .tdm-btn:hover { background: var(--tbo-aubergine-dark); color: var(--tbo-prune); }
.tdm-btn:before, .tdm-btn:after { display: none; } /* calque de survol tagDiv (#222, rectangulaire) */
.tbo-btn--prune { background: var(--tbo-prune); color: var(--tbo-creme); }
.tbo-btn--prune:hover { background: var(--tbo-prune-2); color: var(--tbo-creme); }
.tbo-btn.tbo-btn--ghost { background: var(--tbo-white); color: var(--tbo-prune); border-color: var(--tbo-line); }
.tbo-btn.tbo-btn--ghost:hover { border-color: var(--tbo-aubergine); background: var(--tbo-white); }
/* .tbo-btn.tbo-btn--icon : passe devant button.tbo-btn (padding, bordure) pour les <button> */
.tbo-btn.tbo-btn--icon { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent; border-color: var(--tbo-line-2); color: var(--tbo-prune); }
.tbo-btn.tbo-btn--icon:hover { border-color: var(--tbo-aubergine); color: var(--tbo-aubergine); background: transparent; }

/* Soulignement « feutre » (clé visuelle de la refonte) */
.tbo-hl { background: linear-gradient(transparent 55%, var(--tbo-aubergine) 55%, var(--tbo-aubergine) 92%, transparent 92%); padding: 0 .04em; }
.tbo-hl--creme { background: linear-gradient(transparent 58%, var(--tbo-creme) 58%, var(--tbo-creme) 92%, transparent 92%); padding: 0 .06em; }
.tbo-hl--white { background: linear-gradient(transparent 58%, var(--tbo-white) 58%, var(--tbo-white) 92%, transparent 92%); padding: 0 .06em; }

/* ==========================================================================
   3. Header (Cloud Template « TBO Header v2 »)
   Structure : barre 1 (Google source · logo centré · réseaux + recherche + CTA newsletter)
               barre 2 (menu de rubriques) · bordure basse 1px
   ========================================================================== */
.tdb_header_logo img, .td-header-sp-logo img { height: 34px; width: auto; }
@media (max-width: 767px) { .tdb_header_logo img, .td-header-sp-logo img { height: 22px; } }

.tbo-header { border-bottom: 1px solid var(--tbo-line); }

/* Navigation desktop et méga-menu ([tbo_nav], inc/nav.php ; maquette 2j).
   Le panneau s'ouvre au survol ou au focus, sur toute la largeur du header ; display:none fermé, pour que ses images
   (loading="lazy") ne se chargent qu'à l'ouverture. Échap le referme (classe is-closed, tbo.js). */
.tbo-nav-list { display: flex; justify-content: center; margin: 0; padding: 0; }
.tbo-nav-item { list-style: none; margin: 0; }
/* Trait sous la rubrique en dégradé de fond : tagDiv annule text-decoration au survol (.td_block_wrap a:hover, !important) */
/* --tbo-nav-pad : marge de chaque côté d'une rubrique (resserrée dans le header sticky, ci-dessous). Jamais sur deux lignes. */
.tbo-nav { --tbo-nav-pad: 14px; }
.tbo-nav-link { position: relative; display: block; padding: 12px var(--tbo-nav-pad) 14px; white-space: nowrap; font-family: var(--tbo-font-sans); font-size: 14px; font-weight: 600; letter-spacing: var(--tbo-tracking); color: var(--tbo-prune);
  background: linear-gradient(currentColor, currentColor) no-repeat 50% calc(100% - 8px) / 0 2px; }
.tbo-nav-item:hover > .tbo-nav-link, .tbo-nav-item:focus-within > .tbo-nav-link, .tbo-nav-item.is-current > .tbo-nav-link { color: var(--tbo-aubergine); background-size: calc(100% - 2 * var(--tbo-nav-pad)) 2px; }
/* Header sticky : le menu n'a que 52 % de la largeur (logo, réseaux, recherche, newsletter autour). Les 8 rubriques
   demandent ~365 px de texte + 16 marges : 14 px dès ~1340 px de large, 5 px à 1019 px. */
.tbo-head-sticky .tbo-nav { --tbo-nav-pad: clamp(5px, 3.25vw - 29px, 14px); }
/* ▾ des rubriques à méga-menu, hors du flux (pas de décalage des voisines), visible à l'ouverture */
.tbo-nav-item[data-mega] > .tbo-nav-link:after { content: '▾'; position: absolute; right: calc(var(--tbo-nav-pad) - 11px); top: 13px; font-size: 11px; opacity: 0; }
.tbo-nav-item[data-mega]:is(:hover, :focus-within) > .tbo-nav-link:after { opacity: 1; }
/* Marges de moins de 11 px : la flèche toucherait la rubrique voisine (soulignement et panneau suffisent) */
@media (max-width: 1239px) { .tbo-head-sticky .tbo-nav-item[data-mega] > .tbo-nav-link:after { display: none; } }
.tbo-mega { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--tbo-white); border-top: 1px solid var(--tbo-line); border-bottom: 1px solid var(--tbo-line); box-shadow: 0 18px 40px color-mix(in srgb, var(--tbo-prune) 10%, transparent); }
.tbo-mega:before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 20px; } /* pont de survol entre le lien et le panneau */
.tbo-nav-item:hover > .tbo-mega, .tbo-nav-item:focus-within > .tbo-mega { display: block; }
.tbo-nav-item.is-closed > .tbo-mega { display: none; }
/* Le panneau se cale sur la zone du header (pleine largeur, sous sa bordure) : les conteneurs tagDiv qui portent le menu
   (rangée, colonne, bloc) ne doivent pas être positionnés. */
.td-header-template-wrap :is(.vc_row, .vc_column, .td_block_wrap):has(.tbo-nav) { position: static; }
.td-header-template-wrap .td-fix-index:has(.tbo-nav) { transform: none; } /* translateZ(0) tagDiv : crée aussi un conteneur de référence */
.tbo-mega-inner { max-width: var(--tbo-content-max); margin: 0 auto; padding: 28px var(--tbo-gutter) 32px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.tbo-mega-cats { display: flex; flex-direction: column; gap: 4px; padding-right: 24px; border-right: 1px solid var(--tbo-line); }
.tbo-mega-cats .tbo-mega-label { font-family: var(--tbo-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-2); padding: 0 0 8px; } /* lien vers la rubrique */
.tbo-mega-cats a { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tbo-prune); padding: 8px 12px; border-radius: var(--tbo-radius); }
.tbo-mega-cats a:hover { color: var(--tbo-aubergine); }
.tbo-mega-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tbo-mega-post { color: var(--tbo-prune); }
.tbo-mega-post img, .tbo-mega-ph { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: var(--tbo-radius); background: var(--tbo-sable); }
.tbo-mega-title { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.28; text-wrap: pretty; }
.tbo-mega-post:hover .tbo-mega-title { color: var(--tbo-aubergine); }
@media (max-width: 1018px) { .tbo-mega-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbo-mega-post:nth-child(n+3) { display: none; } }

/* Icônes ronds du header : réseaux ([tbo_socials], menu WP) et recherche (tdb_header_search) */
.tdb_header_search .tdb-head-search-btn, .td-header-template-wrap .tbo-socials .tbo-btn--icon {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tbo-line-2); color: var(--tbo-prune);
  display: inline-flex; align-items: center; justify-content: center; background: transparent;
}
.tdb_header_search .tdb-head-search-btn:hover, .td-header-template-wrap .tbo-socials .tbo-btn--icon:hover { border-color: var(--tbo-aubergine); color: var(--tbo-aubergine); }

/* CTA Newsletter du header (bloc Button tdm_block_button ou lien de menu avec classe .tbo-nl-cta) */
.tbo-nl-cta a, .td-header-template-wrap .tdm_block_button .tdm-btn { background: var(--tbo-aubergine); color: var(--tbo-prune); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: var(--tbo-pill); }
.tbo-nl-cta a:hover, .td-header-template-wrap .tdm_block_button .tdm-btn:hover { background: var(--tbo-aubergine-dark); }

/* Sticky : fond blanc */
.td-header-desktop-sticky-wrap, .td-header-mobile-sticky-wrap { background: var(--tbo-white); }

/* Menu mobile : panneau plein écran, voir §13 */

/* Filtres de rubriques (pills) sous le header mobile — bloc HTML custom, voir doc */
.tbo-cat-pills { display: flex; gap: 8px; overflow-x: auto; padding: 16px var(--tbo-gutter); scrollbar-width: none; }
.tbo-cat-pills::-webkit-scrollbar { display: none; }
.tbo-cat-pills a { flex: 0 0 auto; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: var(--tbo-pill); border: 1px solid var(--tbo-line-2); color: var(--tbo-prune); text-decoration: none; }
.tbo-cat-pills a.is-active, .tbo-cat-pills a:hover { background: var(--tbo-prune); color: var(--tbo-creme); border-color: var(--tbo-prune); }

/* ==========================================================================
   4. Modules / cartes d'articles (home, rubrique, auteur, recherche)
   ========================================================================== */
.td-module-container, .tdb_module_loop { border: 0; }
/* Pas sur .td-image-container : étiré à la hauteur du texte (fond visible sous l'image) ou à 0 px (image masquée). */
.td-module-thumb, .tdb_module_loop .td-module-thumb { border-radius: var(--tbo-radius); overflow: hidden; background: var(--tbo-sable); }
.td-module-thumb .entry-thumb { transition: transform 400ms ease; }
.td-module-container:hover .entry-thumb { transform: scale(1.03); }

.td-module-title, .tdb_module_loop .td-module-title, .entry-title a {
  font-family: var(--tbo-font-sans); font-weight: 600; color: var(--tbo-prune);
  line-height: 1.18; letter-spacing: var(--tbo-tracking); text-wrap: pretty;
}
.td-module-title a:hover, .entry-title a:hover { color: var(--tbo-aubergine); }
/* Titres en <p> (blocs de sidebar sans intertitres) : le thème parent les force en #111 via p.td-module-title > a */
p.td-module-title, p.td-module-title > a { font-family: var(--tbo-font-sans); color: var(--tbo-prune); }

/* Tailles par rôle : la classe est posée sur le bloc dans Composer (Advanced → CSS class) */
.tbo-card--hero .td-module-title { font-weight: 500; font-size: var(--tbo-h1-hero); line-height: var(--tbo-h1-hero-lh); letter-spacing: -0.015em; }
.tbo-card--lead .td-module-title { font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.015em; }
.tbo-card--grid .td-module-title { font-size: 23px; line-height: 1.15; }
.tbo-card--grid-sm .td-module-title { font-size: 20px; line-height: 1.18; }
.tbo-card--list .td-module-title { font-size: var(--tbo-h3); line-height: var(--tbo-h3-lh); }
.tbo-card--side .td-module-title { font-size: 19px; line-height: 1.2; }
.tbo-card--related .td-module-title { font-size: 16px; line-height: 1.35; }

.td-excerpt { font-family: var(--tbo-font-sans); font-size: 14px; line-height: 1.5; color: var(--tbo-ink-2); margin-top: 8px; }
.tbo-card--hero .td-excerpt { font-size: 20px; line-height: 1.4; font-weight: 600; font-style: italic; color: var(--tbo-ink); }

.td-module-meta-info, .tdb-post-meta, .td-post-date, .td-post-author-name, .td-module-comments { font-family: var(--tbo-font-sans); font-size: 12.5px; color: var(--tbo-ink-2); }
.td-post-author-name a, .td-post-author-name span { color: var(--tbo-ink-2); font-weight: 400; }

/* Listes séparées par un filet */
.tbo-card--list .td-module-container, .tbo-card--side .td-module-container { padding: 18px 0; border-top: 1px solid var(--tbo-line); }
.tbo-card--side .td-module-container { padding: 0 0 18px; border-top: 0; border-bottom: 1px solid var(--tbo-line); }
.tbo-card--side .td_module_wrap:last-child .td-module-container { border-bottom: 0; }

/* Titre de bloc (« À la une », « Tous les articles ») */
.td-block-title, .td-block-title-wrap .block-title, .tbo-block-title { font-family: var(--tbo-font-sans); font-weight: 600; font-size: 22px; color: var(--tbo-prune); margin: 0 0 18px; }
.td-block-title > *, .td-block-title-wrap .block-title > * { padding: 0 0 8px; border-bottom: 2px solid var(--tbo-prune); background: none !important; color: var(--tbo-prune) !important; }
.td-block-title:after, .td-block-title:before { display: none; }

/* Séparateur-étiquette (« Derniers articles ») */
.tbo-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.tbo-eyebrow span { font-family: var(--tbo-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-2); }
.tbo-eyebrow:after { content: ''; flex: 1; height: 1px; background: var(--tbo-line); }

/* Pagination (tdb_loop « numbered » : span.current, a.page, span.extend, a.last, span.pages) */
.page-nav { font-size: 13px; font-weight: 600; }
.page-nav a, .page-nav span { min-width: 34px; height: 34px; line-height: 32px; padding: 0 6px; text-align: center; border: 1px solid var(--tbo-line-2); border-radius: var(--tbo-pill); color: var(--tbo-prune); background: var(--tbo-white); }
.page-nav .current { background: var(--tbo-prune); border-color: var(--tbo-prune); color: var(--tbo-creme); }
.page-nav a:hover { border-color: var(--tbo-prune); }
.page-nav .extend { border: 0; background: none; min-width: 0; }
.page-nav .pages { display: none; }

/* ==========================================================================
   5. Page rubrique (hero prune + texte SEO replié)
   ========================================================================== */
.tbo-cat-hero { background: var(--tbo-prune); color: var(--tbo-creme); padding: 48px var(--tbo-gutter); }
.tbo-cat-hero .tdb-title-text, .tbo-cat-hero h1, .tdb-category-title .tdb-title-text { font-family: var(--tbo-font-sans); font-weight: 500; font-size: var(--tbo-cat-hero); line-height: .95; letter-spacing: -0.025em; color: var(--tbo-creme); }
/* Sous-rubriques ([tbo_subcats]) : pastilles crème au trait sous le titre */
.tbo-cat-hero .tbo-subcats-wrap { margin: 0; }
.tbo-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tbo-subcats a { font-size: 13px; font-weight: 600; line-height: 1.2; padding: 9px 14px; border-radius: var(--tbo-pill); border: 1px solid color-mix(in srgb, var(--tbo-creme) 45%, transparent); background: color-mix(in srgb, var(--tbo-prune) 60%, transparent); color: var(--tbo-creme); text-decoration: none; } /* fond : lisible sur la photo (mobile) */
.tbo-subcats a:hover { background: var(--tbo-creme); border-color: var(--tbo-creme); color: var(--tbo-prune); }

.tbo-seo-fold { border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius); padding: 0; margin-top: 28px; }
.tbo-seo-fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 600; font-size: 18px; color: var(--tbo-prune); }
.tbo-seo-fold summary::-webkit-details-marker { display: none; }
.tbo-seo-fold summary:after { content: 'Déplier'; font-size: 12.5px; font-weight: 600; color: var(--tbo-aubergine-text); }
.tbo-seo-fold[open] summary:after { content: 'Replier'; }
.tbo-seo-fold .tbo-seo-body { padding: 0 20px 20px; font-size: 15px; font-style: normal; line-height: 1.6; color: var(--tbo-ink); }
.tbo-seo-fold .tbo-seo-body h2, .tbo-seo-fold .tbo-seo-body h3 { font-size: 20px; line-height: 1.3; margin: 1.2em 0 .5em; }

/* ==========================================================================
   6. Article (Cloud Template « TBO Single v2 »)
   ========================================================================== */
.tdb-single-title .tdb-title-text { font-size: var(--tbo-h1); line-height: var(--tbo-h1-lh); }

/* Barre méta : avatar · auteur · dates · temps de lecture (classe .tbo-meta-bar sur le bloc [tbo_byline]) */
.tbo-meta-bar { border-top: 1px solid var(--tbo-line); border-bottom: 1px solid var(--tbo-line); font-size: 14px; color: var(--tbo-ink-2); }
.tdb_single_author .tdb-author-name, .tbo-meta-bar .tdb-author-name { font-size: 15px; font-weight: 600; color: var(--tbo-prune); background: linear-gradient(var(--tbo-aubergine), var(--tbo-aubergine)) left bottom / 0 2px no-repeat; transition: background-size var(--tbo-ease); }
.tdb_single_author .tdb-author-name:hover { background-size: 100% 2px; }
.tdb_single_author .tdb-author-photo img { width: 44px; height: 44px; border-radius: 50%; }
.tdb_single_date, .tdb_single_modified_date, .tdb_single_reading_time { font-size: 14px; color: var(--tbo-ink-2); }

/* Image à la une */
.tdb-featured-image-bg, .tdb_single_featured_image img, .td-post-featured-image img { border-radius: var(--tbo-radius); }
.tdb-caption-text, .wp-caption-text, figcaption { font-family: var(--tbo-font-sans); font-size: 14.5px; color: var(--tbo-ink-2); text-align: left; margin-top: 10px; }
/* Crédit photo posé sur l'image, en bas à droite (la légende de l'image à la une est un crédit dans 9 cas sur 10) */
.tdb_single_featured_image figure { position: relative; overflow: hidden; border-radius: var(--tbo-radius); } /* coins du crédit arrondis avec l'image */
.tdb_single_featured_image img { display: block; }
.tdb_single_featured_image figure .tdb-caption-text { position: absolute; right: 0; bottom: 0; max-width: 100%; margin: 0; padding: 4px 10px; border-radius: var(--tbo-radius) 0 0; background: color-mix(in srgb, var(--tbo-prune) 60%, transparent); color: var(--tbo-white); font-size: 12px; line-height: 1.4; text-align: right; }

/* Corps */
.tdb_single_content, .td-post-content { font-size: var(--tbo-body); line-height: var(--tbo-body-lh); color: var(--tbo-ink); max-width: var(--tbo-article-max); }
.tdb_single_content p, .td-post-content p { margin-bottom: 1.4em; }
.tdb_single_content h2, .td-post-content h2 { margin: 1.6em 0 .7em; }
.tdb_single_content h3, .td-post-content h3 { margin: 1.4em 0 .6em; }
/* Liens surlignés : corps d'article, pages, texte SEO des rubriques, sections de la Charte et du Guide des tailles */
.tdb_single_content a:not(.tbo-btn):not(.btn-buy):not(.btn-shop):not(.btn-guide):not(.tbo-related-inline-item), .td-post-content a:not(.tbo-btn):not(.tbo-related-inline-item), .td-page-content a, .tbo-seo-body a, .tbo-charte-section a {
  color: var(--tbo-prune); font-weight: 600; box-shadow: none;
  background: linear-gradient(transparent 58%, var(--tbo-aubergine-light) 58%); padding: 0 2px;
}
/* Survol : mêmes sélecteurs que ci-dessus + :hover (sinon la règle de repos, plus spécifique, garde le fond) */
.tdb_single_content a:not(.tbo-btn):not(.btn-buy):not(.btn-shop):not(.btn-guide):not(.tbo-related-inline-item):hover, .td-post-content a:not(.tbo-btn):not(.tbo-related-inline-item):hover, .td-page-content a:hover, .tbo-seo-body a:hover, .tbo-charte-section a:hover { background: var(--tbo-aubergine-light); color: var(--tbo-prune); }
.tdb_single_content img, .td-post-content img { border-radius: var(--tbo-radius); }
.tdb_single_content ul, .td-post-content ul { margin-left: 1.2em; }
.tdb_single_content ul li, .td-post-content ul li { list-style: none; position: relative; margin-bottom: .5em; }
.tdb_single_content ul li:before, .td-post-content ul li:before { content: ''; position: absolute; left: -1.1em; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tbo-aubergine); }

/* Citation (maquette) : le style.css parent la centre et la passe en capitales via .tagdiv-type blockquote (p) */
.tdb_single_content blockquote, .td-post-content blockquote, .tagdiv-type blockquote, blockquote {
  margin: 36px 0; padding: 0 0 0 24px; border: 0; border-left: 3px solid var(--tbo-aubergine); background: none; box-shadow: none; text-align: left;
}
.tagdiv-type blockquote p, blockquote p { font-family: var(--tbo-font-sans); font-weight: 600; font-style: italic; font-size: var(--tbo-quote); line-height: var(--tbo-quote-lh); letter-spacing: 0; text-transform: none; text-align: left; color: var(--tbo-prune); margin: 0; }
.tagdiv-type blockquote p + p, blockquote p + p { margin-top: .6em; }
.td_pull_quote p { color: var(--tbo-prune); }

/* Sources */
.tbo-sources { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--tbo-line); }
.tbo-sources .tbo-label { color: var(--tbo-ink-2); font-size: 12px; }
.tbo-sources p { font-size: 14px; line-height: 1.6; margin: 0; }

/* À lire aussi : plugin Inline Related Posts (wp-content/plugins/tbo-inline-related-posts.php), inséré dans le corps */
.tbo-related-inline {
  margin: 36px 0; padding: 20px 22px 6px; background: var(--tbo-creme); border: 1px solid var(--tbo-line); border-top: 4px solid var(--tbo-aubergine); border-radius: var(--tbo-radius);
}
.tbo-related-inline-title { display: flex; align-items: center; gap: 10px; font-family: var(--tbo-font-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-aubergine-text); }
.tbo-related-inline-title:after { content: ''; flex: 1; height: 1px; background: var(--tbo-line); }
.tbo-related-inline-item, .tbo-rel--side .tbo-rel-item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tbo-line); }
.tbo-related-inline-item:last-child, .tbo-rel--side .tbo-rel-item:last-child { border-bottom: 0; }
.tbo-related-inline .tbo-related-inline-img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: var(--tbo-radius); background: var(--tbo-sable); margin: 0; }
.tbo-related-inline-text { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tbo-prune); }
.tbo-related-inline-text > span { background: linear-gradient(transparent 62%, var(--tbo-aubergine-light) 62%); }
.tbo-related-inline-item:hover .tbo-related-inline-text > span { background: var(--tbo-aubergine-light); }

/* Boîte auteur */
.tdb_single_author_box, .tbo-author-box { margin-top: 36px; padding: 24px; background: var(--tbo-creme-2); border-radius: var(--tbo-radius); border: 0; }
.tdb_single_author_box .tdb-block-inner, .tbo-author-box { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.tdb_single_author_box .tdb-author-info { width: auto; padding: 0; }
.tdb_single_author_box .tdb-author-photo img { width: 64px; height: 64px; border-radius: 50%; background: var(--tbo-sable); }
.td_block_wrap.tdb_single_author_box .tdb-author-name { font-family: var(--tbo-font-sans); font-size: 22px; font-weight: 600; color: var(--tbo-prune); }
/* Survol : tagDiv écrit le bleu en dur (#4db2ec) dans le CSS de bloc, placé après cette feuille : sélecteurs plus forts */
.td_block_wrap.tdb_single_author_box .tdb-author-name:hover { color: var(--tbo-aubergine); }
.td_block_wrap.tdb_single_author_box .tdb-author-url:hover { color: var(--tbo-prune); background: var(--tbo-aubergine-light); }
.tdb_single_author_box .tdb-author-descr { font-size: 14px; line-height: 1.6; color: var(--tbo-ink); }
.tdb_single_author_box .tdb-author-url, .tbo-author-box .tbo-author-all { font-size: 14.5px; font-weight: 600; color: var(--tbo-prune); background: linear-gradient(transparent 58%, var(--tbo-aubergine-light) 58%); padding: 0 2px; }
/* Mobile, et tablette (colonne d'article à côté de la sidebar, boîte de 350 à 440 px jusqu'à 1018) : une colonne
   centrée, photo au-dessus. Media query et non @container : le tri du CSS utilisé de Perfmatters casse les @container. */
@media (max-width: 1018px) {
  .tdb_single_author_box .tdb-block-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; }
  .tdb_single_author_box .tdb-author-info { width: 100%; text-align: center; }
  .tdb_single_author_box .tdb-author-social { justify-content: center; }
}

/* Tags : préfixe .td_block_wrap pour passer devant le CSS en ligne du bloc tagDiv (.tdi_NN a { padding: 1px 7px 2px },
   police 11 px, libellé sur fond noir), qui écrasait les pastilles. Liens en inline-block : le padding vertical compte. */
.td_block_wrap.tdb_single_tags ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: inherit; }
.td_block_wrap.tdb_single_tags li { margin: 0; }
.td_block_wrap.tdb_single_tags span { font-family: var(--tbo-font-mono); font-size: var(--tbo-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-2); background: none; padding: 0; margin: 0 4px 0 0; }
.td_block_wrap.tdb_single_tags a, .td-tags a { display: inline-block; margin: 0; font-family: var(--tbo-font-sans); font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--tbo-prune); background: var(--tbo-white); border: 1px solid var(--tbo-line-2); border-radius: var(--tbo-pill); padding: 7px 12px; }
.td_block_wrap.tdb_single_tags a:hover, .td-tags a:hover { border-color: var(--tbo-aubergine); color: var(--tbo-prune); background: var(--tbo-white); }

/* Sidebar article : carte partage + newsletter */
.tbo-side-card { padding: 22px; background: var(--tbo-creme-2); border-radius: var(--tbo-radius-md); display: flex; flex-direction: column; gap: 20px; }
.tbo-side-card .tbo-label { color: var(--tbo-ink-2); font-size: 12px; letter-spacing: .14em; margin: 0 0 12px; }
.tbo-share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tbo-share-grid a, .tbo-google-links a { min-height: 44px; border-radius: var(--tbo-radius-md); background: var(--tbo-white); border: 1px solid var(--tbo-line); display: flex; align-items: center; justify-content: center; color: var(--tbo-prune); }
.tbo-share-grid a:hover, .tbo-google-links a:hover { border-color: var(--tbo-aubergine); }
/* Suivre sur Google : icône + libellé à gauche */
.tbo-google-links { display: grid; gap: 8px; margin-top: 8px; }
.tbo-google-links a { justify-content: flex-start; gap: 9px; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.tbo-google-links svg { flex: none; width: 18px; height: 18px; }
/* Boutons de la carte au même arrondi que les carreaux de partage et liens Google */
.tbo-side-card .tbo-btn { width: 100%; min-height: 46px; padding-top: 0; padding-bottom: 0; font-size: 14.5px; border-radius: var(--tbo-radius-md); }
/* Newsletter : icône et libellé à gauche, alignés sur les liens Google en dessous */
.tbo-side-card .tbo-side-nl { justify-content: flex-start; gap: 9px; padding-left: 10px; padding-right: 10px; }
/* Libellés en capitales : taille liée à la largeur de la carte pour tenir sur une ligne (12 px au plus) */
.tbo-side-card { container-type: inline-size; }
.tbo-side-card .tbo-side-nl, .tbo-side-card .tbo-google-links a { text-transform: uppercase; font-size: min(12px, 4.55cqi); letter-spacing: .03em; }
.tbo-side-card hr { border: 0; border-top: 1px solid var(--tbo-line-2); margin: 0; }
.tdb_single_post_share .td-social-sharing-button, .td-post-sharing-visible a { border-radius: var(--tbo-radius-md) !important; }

/* Sticky sidebar */
.tbo-sticky { position: sticky; top: 90px; }

/* ==========================================================================
   7. Blocs promo : newsletter, Instagram
   ========================================================================== */
/* Carte de sidebar en lilas clair, sobre à côté de la lecture : le violet plein reste à la page /newsletter */
.tbo-nl-card { background: var(--tbo-aubergine-light); color: var(--tbo-ink); padding: 30px 26px 26px; border-radius: var(--tbo-radius); display: flex; flex-direction: column; gap: 16px; }
.tbo-nl-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: var(--tbo-prune); color: var(--tbo-creme); font-family: var(--tbo-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--tbo-pill); }
.tbo-nl-badge:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tbo-aubergine); }
.tbo-nl-card .tbo-nl-title { font-family: var(--tbo-font-sans); font-weight: 600; font-size: 26px; line-height: 1.12; letter-spacing: var(--tbo-tracking); color: var(--tbo-prune); margin: 0; }
.tbo-nl-card p { font-size: 16px; line-height: 1.45; margin: 0; }
.tbo-nl-card .tbo-btn { background: var(--tbo-prune); color: var(--tbo-creme); }
.tbo-nl-card .tbo-btn:hover { background: var(--tbo-prune-2); }

/* Page newsletter : hero plein (fond aubergine) */
/* Page newsletter : voir §14 */

/* Instagram (bande crème) */
.tbo-ig { background: var(--tbo-creme-2); border-radius: var(--tbo-radius); padding: 28px; }
.tbo-ig-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 18px; }
.tbo-ig-head h2 { font-size: 28px; font-weight: 600; line-height: 1; margin: 0; }
.tbo-ig-head small { display: block; font-size: 13.5px; color: var(--tbo-ink-2); margin-top: 6px; }
.tbo-ig .td-instagram-header { display: none; }
.tbo-ig .td-instagram-element { border-radius: var(--tbo-radius); overflow: hidden; }

/* ==========================================================================
   8. Publicité (régie ay.delivery : inc/ads-aydelivery.php ; Google Ad Manager : inc/ads.php)
   ========================================================================== */
/* Emplacements ay.delivery entre les intertitres : hauteur réservée (pas de décalage du texte au chargement) */
.ad-container { width: 100%; min-height: 300px; }
@media (max-width: 767px) { .ad-container { min-height: 600px; } }
/* Emplacements ay.delivery des templates ([tbo_ay]) : mobile sous 768 px, ordinateur dès 1024 px (billboard 970 px),
   aucun entre les deux (tablette), comme les blocs tagDiv de la prod */
.tbo-ay .ad-container { margin: 24px auto; }
.wpb_wrapper .td_block_wrap.tbo-ay-wrap { margin-bottom: 0; } /* bloc tagDiv vide quand l'emplacement est masqué : pas d'espace */
/* Colonne de droite : 275 à 294 px utiles selon l'écran, un grand angle fait 300 px. Emplacement de 300 px centré,
   pris sur la marge intérieure de la colonne (au moins 315 px de large). */
@media (min-width: 768px) { .tbo-col-side .tbo-ay .ad-container { width: 300px; margin-left: calc((100% - 300px) / 2); margin-right: calc((100% - 300px) / 2); } }
/* Rubrique : emplacements entre les articles de la liste (flex ou grille selon l'écran) : toute la largeur */
.tdb_loop .tbo-ay { flex: 0 0 100%; width: 100%; grid-column: 1 / -1; box-sizing: border-box; padding: 0 24px; } /* 24 px : marge des articles (conteneur en -24 px) */
/* Rubrique : colonne plus étroite (1/4), moins de 300 px de large sous 1100 px d'écran : pas de grand angle entre 768 et 1099 px */
@media (min-width: 768px) and (max-width: 1099px) { .category .tbo-col-side .tbo-ay { display: none; } }
.tbo-ay--desktop { display: none; }
@media (min-width: 768px) { .tbo-ay--mobile { display: none; } }
@media (min-width: 1024px) { .tbo-ay--desktop { display: block; } }
.tbo-ad { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto; }
.tbo-ad:before { content: 'Publicité'; font-family: var(--tbo-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-3); align-self: flex-start; }
.tbo-ad > div { background: var(--tbo-sable); display: flex; align-items: center; justify-content: center; }
.tbo-ad--billboard { padding: 14px var(--tbo-gutter) 0; max-width: var(--tbo-content-max); }
.tbo-ad--billboard > div { min-height: 90px; width: 100%; max-width: 970px; }
.tbo-ad--inarticle { margin: 32px auto; }
.tbo-ad--inarticle > div { min-height: 250px; width: 300px; }
.tbo-ad--sidebar > div { min-height: 600px; width: 300px; }
.tbo-ad--footer { margin: 40px auto 0; }
.tbo-ad--footer > div { min-height: 250px; width: 100%; max-width: 970px; }
.tbo-ad--sticky-sidebar { position: sticky; top: 90px; }
.tbo-ad.is-empty { display: none; }
@media (max-width: 767px) { .tbo-ad--billboard > div, .tbo-ad--footer > div { min-height: 100px; max-width: 320px; } }
/* Sidebar : rien n'est demandé sous 1019 px (size mapping de tbo-ads.js), donc pas d'encart vide */
@media (max-width: 1018px) { .tbo-ad--sidebar { display: none; } }

/* ==========================================================================
   9. Footer (Cloud Template « TBO Footer v2 »)
   ========================================================================== */
.tbo-footer, .td-footer-template-wrap, .td-footer-wrapper { background: var(--tbo-prune); color: var(--tbo-on-prune); font-size: 13.5px; }
.tbo-footer a, .td-footer-wrapper a, .td-footer-template-wrap a { color: var(--tbo-on-prune); }
.tbo-footer a:hover, .td-footer-wrapper a:hover, .td-footer-template-wrap a:hover { color: var(--tbo-creme); }
.tbo-footer .tbo-label, .td-footer-wrapper .td-block-title span, .td-footer-template-wrap .td-block-title-wrap .block-title { font-family: var(--tbo-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-3); border: 0 !important; margin-bottom: 10px; }
.tbo-footer .tbo-footer-desc { line-height: 1.55; max-width: 360px; }
.tbo-footer .tbo-btn--icon { border-color: var(--tbo-prune-3); color: var(--tbo-creme); }
.tbo-footer .tbo-btn--icon:hover { background: var(--tbo-aubergine); border-color: var(--tbo-aubergine); }
.tbo-footer-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; line-height: 1.9; } /* 3 colonnes, 2 sans la colonne Annonceurs (site français seulement) */
.tbo-footer-cols .is-strong a { color: var(--tbo-creme); font-weight: 600; }
.tbo-footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--tbo-prune-2); }
.tbo-footer-themes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; padding-top: 24px; }
.tbo-footer-themes > div { display: flex; flex-direction: column; }
.tbo-footer-themes .tbo-footer-theme { font-size: 14px; font-weight: 700; color: var(--tbo-creme); padding-bottom: 6px; border-bottom: 2px solid var(--tbo-aubergine); margin-bottom: 4px; }
.tbo-footer-themes a { display: flex; align-items: center; min-height: 24px; font-size: 13px; line-height: 1.35; } /* cible tactile de 24 px */
.tbo-footer-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--tbo-prune-2); font-size: 12px; color: var(--tbo-ink-3); }
@media (max-width: 1018px) { .tbo-footer-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tbo-footer-top { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .tbo-footer-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbo-footer-cols { grid-auto-flow: row; grid-template-columns: 1fr; } }

/* ==========================================================================
   10. Composants éditoriaux (repris de l'ancien site, restylés)
   ========================================================================== */
/* Boutons achat / shop / guide (insérés dans les articles) */
.btn-buy, .btn-shop, .btn-guide {
  display: inline-flex !important; align-items: center; gap: 8px; width: fit-content;
  font-weight: 700 !important; font-size: 14px; line-height: 1; padding: 13px 18px; margin: 0 0 1em;
  border-radius: var(--tbo-pill); text-decoration: none; background-image: none !important; box-shadow: none !important;
}
.btn-buy { background: var(--tbo-prune) !important; color: var(--tbo-creme) !important; }
.btn-buy:hover { background: var(--tbo-prune-2) !important; }
.btn-shop { background: var(--tbo-aubergine) !important; color: var(--tbo-prune) !important; }
.btn-shop:hover { background: var(--tbo-aubergine-dark) !important; }
.btn-guide { background: var(--tbo-white) !important; color: var(--tbo-prune) !important; border: 1px solid var(--tbo-line); }
.btn-guide:hover { border-color: var(--tbo-aubergine); }
.btn-buy::first-letter, .btn-shop::first-letter, .btn-guide::first-letter { text-transform: uppercase; }

/* Encadré mis en avant */
.g-featured { background: var(--tbo-creme); border: 1px solid var(--tbo-line); border-left: 4px solid var(--tbo-terracotta); border-radius: var(--tbo-radius); padding: 20px 22px; margin: 28px 0; }
.g-featured p { margin-bottom: 6px; }
.g-featured ul, .g-featured ol { margin: 6px 0 10px; }
.g-featured ul li { list-style: none; }
.g-featured ol { margin-left: 1em; }

/* Sommaire des articles (inc/toc.php) : replié par défaut, toute la ligne du titre ouvre la liste */
.table-of-contents { font-size: 15px; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius); margin: 0 0 36px; background: var(--tbo-white); }
.table-of-contents-title { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; font-family: var(--tbo-font-mono); font-size: 12px !important; font-weight: 500; line-height: 1.4 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-aubergine-text); margin: 0 !important; }
.table-of-contents-title::-webkit-details-marker { display: none; }
.table-of-contents-title:after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 2px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.table-of-contents details[open] > .table-of-contents-title:after { margin-top: 4px; transform: rotate(-135deg); }
.table-of-contents-title:hover { color: var(--tbo-prune); }
.table-of-contents-title:focus-visible { outline-offset: -2px; border-radius: var(--tbo-radius); }
.table-of-contents ol { margin: 0 !important; padding: 0 22px 14px; }
.table-of-contents li { list-style: none; padding: 5px 0; margin: 0 !important; }
.table-of-contents li:before { display: none !important; }
.table-of-contents a { background: none !important; box-shadow: none !important; font-weight: 500 !important; color: var(--tbo-prune); padding: 0 !important; }
.table-of-contents a:hover { color: var(--tbo-aubergine); }

/* FAQ humoristique */
#faq-humoristique { background: var(--tbo-creme-2); border-radius: var(--tbo-radius); padding: 20px 22px; margin-top: 2em; }
.question-container { margin-bottom: 1.2em; }
.question-container .question { font-weight: 600; color: var(--tbo-prune); background: none; padding: 0 0 .3em; }

/* Quiz WP */
.highlight-underpost { border: 1px solid var(--tbo-line); background: var(--tbo-creme); border-radius: var(--tbo-radius); padding: 1em; }
.wq-quiz.wq-skin-flat .wq_questionTextCtr { text-align: center; padding: 4em 1.5em; background: var(--tbo-prune); color: var(--tbo-creme); border-radius: var(--tbo-radius); }
.wq_questionsCtr { margin-bottom: 50px !important; }
.wq_questionsCtr h4 { font-size: 30px !important; font-weight: 500; color: var(--tbo-creme); }
.wq-retake-quiz, .wq-share { display: none !important; }
.wq-results { text-align: center; }
.wq-result-title { font-family: var(--tbo-font-sans); font-size: 28px; font-weight: 600; color: var(--tbo-prune); margin-bottom: .5em; }
.wq-quiz .wq_answerCtr, .wq-quiz .wq-answer { border-radius: var(--tbo-radius-md); border: 1px solid var(--tbo-line); }
.wq-quiz .wq-button, .wq-quiz button { background: var(--tbo-aubergine); color: var(--tbo-prune); border-radius: var(--tbo-pill); font-weight: 700; border: 0; }

/* Page contenu simple (mentions, charte, rédaction) */
.page-template-default .td-page-title, .tdb-page-title .tdb-title-text { font-size: var(--tbo-h1); text-align: left; border: 0; padding: 0; }
.td-page-content { font-size: var(--tbo-body); line-height: var(--tbo-body-lh); color: var(--tbo-ink); max-width: var(--tbo-article-max); }

/* 404 */
.tbo-404 { text-align: center; padding: 96px var(--tbo-gutter); }
.tbo-404 .tbo-404-code { font-family: var(--tbo-font-display); font-weight: 800; font-size: clamp(96px, 18vw, 200px); line-height: .9; letter-spacing: -0.045em; color: var(--tbo-prune); }
.tbo-404 h1 { font-size: var(--tbo-h2); font-weight: 500; margin: 20px 0 10px; }
.tbo-404 p { color: var(--tbo-ink-2); font-size: 16px; }

/* Google « source favorite » (chip header) */
.tbo-google-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--tbo-white); border: 1px solid var(--tbo-line-2); border-radius: var(--tbo-pill); padding: 7px 14px 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--tbo-prune); text-decoration: none; }
.tbo-google-chip svg { width: 18px; height: 18px; }
@media (max-width: 1018px) { .tbo-google-chip { display: none; } }

/* ==========================================================================
   11. Utilitaires et nettoyage Newspaper
   ========================================================================== */
.tdb-block-inner { font-family: var(--tbo-font-sans); }
.td-main-content-wrap { background: var(--tbo-white); }
.td-post-small-box, .td_block_wrap .td-next-prev-wrap a { font-family: var(--tbo-font-sans); }
.td-trending-now-title, .td_block_wrap .td-pb-row .td-pb-span12 .td-block-title { font-family: var(--tbo-font-sans); }
.wpb_wrapper .td_block_wrap { margin-bottom: var(--tbo-gap); }
#td-outer-wrap { background: var(--tbo-white); }
.td-scroll-up { background: var(--tbo-prune); border-radius: 50%; }
.td-scroll-up:hover { background: var(--tbo-aubergine); }
.tbo-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   12. Cloud Templates v2 (générés par tools/tbo-v2-templates.php)
   Les blocs tagDiv injectent leur CSS inline après la feuille du child :
   on préfixe par le wrapper du template pour passer devant à spécificité égale.
   ========================================================================== */
/* Header */
.td-header-template-wrap { border-bottom: 1px solid var(--tbo-line); }
.td-header-template-wrap .tbo-header { border-bottom: 0; }
.td-header-template-wrap .tbo-head-top .vc_column .wpb_wrapper, .td-header-template-wrap .tbo-head-sticky .vc_column .wpb_wrapper { gap: 8px; align-items: center; }
/* Header (toutes zones : desktop, sticky, mobile) : pas de marge basse tagDiv sous les blocs, sinon ils se décalent */
.td-header-template-wrap .td_block_wrap { margin-bottom: 0; }
.td-header-template-wrap .tdb_header_search .tdb-head-search-btn i { color: var(--tbo-prune); font-size: 14px; }
.td-header-template-wrap .tbo-head-nl .tdm-btn { margin-left: 8px; }
.tbo-head-logo--sm .tdb-logo-img { height: 24px; }
.tbo-head-pills .tbo-cat-pills { padding-top: 4px; padding-bottom: 12px; }
.td-header-mobile-wrap .tbo-head-mob { padding-top: 10px; padding-bottom: 10px; }
.tbo-head-mob .tbo-head-socials { margin-right: 8px; } /* Facebook, Instagram puis burger (header mobile et sticky) */
@media (max-width: 359px) { /* de l'air entre le logo et les icônes */
  .tbo-head-mob .tbo-socials { gap: 6px; }
  .tbo-head-mob .tbo-socials .tbo-btn--icon { width: 30px; height: 30px; }
  .tbo-head-mob .tbo-head-socials { margin-right: 6px; }
}

/* Titres de bloc et cartes */
.tbo-block-title { border-bottom: 2px solid var(--tbo-prune); padding-bottom: 10px; }
.tbo-block-title > span { border: 0; padding: 0; }
/* Espacement texte / image : réglé par le paramètre meta_padding des blocs (tbo-v2-templates.php). */
/* Articles de la même rubrique ([tbo_related]) : sidebar (vignette 96×72, grille partagée avec .tbo-related-inline-item)
   et « À lire aussi » (3 colonnes, image 3:2). */
.tbo-rel-img { display: block; overflow: hidden; border-radius: var(--tbo-radius); background: var(--tbo-sable); }
.tbo-rel-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.tbo-rel-item:hover .tbo-rel-img img { transform: scale(1.03); }
.tbo-rel-title { margin: 0; font-family: var(--tbo-font-sans); font-weight: 600; color: var(--tbo-prune); letter-spacing: var(--tbo-tracking); text-wrap: pretty; }
.tbo-rel-title a { color: inherit; }
.tbo-rel-title a:hover { color: var(--tbo-aubergine); }
.tbo-rel--side .tbo-rel-item:first-child { padding-top: 0; }
.tbo-rel--side .tbo-rel-item:last-child { padding-bottom: 0; }
.tbo-rel--side .tbo-rel-img { height: 72px; }
.tbo-rel--side .tbo-rel-title { font-size: 16px; line-height: 1.3; }
.tbo-rel--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tbo-rel--grid .tbo-rel-img { aspect-ratio: 3 / 2; margin-bottom: 14px; }
.tbo-rel--grid .td-post-category { display: inline-block; }
.tbo-rel--grid .tbo-rel-title { font-size: 20px; line-height: 1.18; }
@media (max-width: 767px) { .tbo-rel--grid { grid-template-columns: 1fr; gap: 28px; } }
/* Rubrique : même boucle, articles 5 à 8 image à droite (la pagination reste celle d'une seule boucle). */
@media (min-width: 768px) {
  /* par groupes de 4 : image à gauche, puis à droite (24 articles par page) */
  .tbo-list--split .tdb_module_loop:is(:nth-child(8n+5), :nth-child(8n+6), :nth-child(8n+7), :nth-child(8n)) .td-module-container { flex-direction: row-reverse; }
  .tbo-list--split .tdb_module_loop:is(:nth-child(8n+5), :nth-child(8n+6), :nth-child(8n+7), :nth-child(8n)) .td-module-meta-info { padding: 0 24px 0 0; }
}
.tbo-card--grid .td_module_wrap, .tbo-card--grid-sm .td_module_wrap { padding-bottom: 8px; }

/* Instagram */
.tbo-ig-id { display: flex; align-items: center; gap: 14px; color: var(--tbo-prune); }

/* Footer */
.tbo-logo svg { height: 100%; width: auto; display: block; }
.tbo-footer-top > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.tbo-socials { display: flex; gap: 8px; }
.tbo-footer-cols ul { list-style: none; margin: 10px 0 0; padding: 0; }
.tbo-footer-cols li { list-style: none; margin: 0; padding: 0; }
.tbo-footer-themes-wrap { margin-top: 28px; }

/* Rubrique / auteur / recherche : fond pleine largeur, contenu sur la grille (row standard + fond étendu) */
.vc_row.tbo-cat-hero, .vc_row.tbo-search-hero { padding: 48px 0; box-shadow: 0 0 0 100vmax var(--tbo-prune); clip-path: inset(0 -100vmax); background: var(--tbo-prune); }
.vc_row.tbo-search-hero { padding: 40px 0; background: var(--tbo-creme); box-shadow: 0 0 0 100vmax var(--tbo-creme); }
.tbo-cat-hero .tdb_title .tdb-title-text { text-transform: none; font-size: var(--tbo-cat-hero); font-weight: 500; line-height: .95; letter-spacing: -0.025em; color: var(--tbo-creme); }
.tbo-search-hero .tdb_title .tdb-title-text { text-transform: none; font-size: 40px; font-weight: 500; color: var(--tbo-prune); }
.tdb_title .tdb-title-line { display: none; }
/* Couverture de la rubrique (bloc Category Background Image) : image entière à son ratio (1200×658),
   calée sur le bord droit de l'écran, fondue dans le prune côté titre ; voile = réglage « Overlay » du bloc ; #000 du masque = opacité, pas une couleur */
.vc_row.tbo-cat-hero { position: relative; isolation: isolate; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.vc_row.tbo-cat-hero .tdc-columns, .vc_row.tbo-cat-hero .vc_column, .vc_row.tbo-cat-hero .vc_column > .wpb_wrapper { position: static; }
.tbo-cat-hero .tbo-cat-hero-bg { position: absolute; top: 0; bottom: 0; right: calc(50% - 50vw); aspect-ratio: 1200 / 658; margin: 0; z-index: -1; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.tbo-cat-hero .tbo-cat-hero-bg .tdb-featured-image-bg { height: 100%; padding-bottom: 0; background-color: transparent; background-size: cover; background-position: center; }
@media (max-width: 767px) { .vc_row.tbo-cat-hero { min-height: 220px; } }
.tbo-author-hero .tdb_title .tdb-title-text { font-size: 56px; }
.tbo-author-hero .tdb_author_description .tdb-author-descr, .tbo-author-hero .tdb_author_description .tdb-block-inner { font-style: italic; font-size: 20px; line-height: 1.45; color: var(--tbo-on-prune); max-width: var(--tbo-article-max); }
/* Réseaux de l'auteur : boutons ronds crème sur prune, comme le footer (tagDiv met l'icône en #000) */
.tbo-author-hero .tdb_author_socials .tdb-social-item { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 8px 0 0; border: 1px solid var(--tbo-prune-3); border-radius: 50%; transition: background var(--tbo-ease), border-color var(--tbo-ease); }
.tbo-author-hero .tdb_author_socials .tdb-social-item i { color: var(--tbo-creme); }
.tbo-author-hero .tdb_author_socials .tdb-social-item:hover { background: var(--tbo-aubergine); border-color: var(--tbo-aubergine); }
@media (max-width: 767px) {
  .tbo-author-hero .tdb_title .tdb-title-text { font-size: 40px; }
  .tbo-author-hero .tdb_author_description .tdb-author-descr { font-size: 17px; }
  .tbo-author-hero .tdb_author_image .tdb-author-img { width: 112px; padding-bottom: 112px; } /* 160 px sur desktop (bloc tagDiv : hauteur en padding-bottom) */
  .tbo-author-photo-col { margin-bottom: 20px; }
}

/* Recherche : « Résultats pour “terme” », champ pill */
.tbo-search-hero .tdb-add-text:after { content: '\00a0“'; }
.tbo-search-hero .tdb-title-text:after { content: '”'; }
.td_block_wrap.tbo-search-form .tdb-search-form-inner { display: flex; gap: 8px; }
.td_block_wrap.tbo-search-form .tdb-search-form-input { height: 48px; padding: 0 20px; border: 1px solid var(--tbo-line-2); border-radius: var(--tbo-pill); background: var(--tbo-white); font-family: var(--tbo-font-sans); font-size: 15px; color: var(--tbo-prune); }
.td_block_wrap.tbo-search-form .tdb-search-form-input:focus { border-color: var(--tbo-aubergine); outline: 0; }
.td_block_wrap.tbo-search-form .tdb-search-form-border { display: none; }
.td_block_wrap.tbo-search-form .tdb-search-form-btn { position: static; height: 48px; padding: 0 22px; border-radius: var(--tbo-pill); background: var(--tbo-prune); color: var(--tbo-creme); font-family: var(--tbo-font-sans); font-weight: 700; font-size: 14px; line-height: 48px; }
.td_block_wrap.tbo-search-form .tdb-search-form-btn:hover { background: var(--tbo-prune-2); }
.td_block_wrap.tbo-search-form .tdb-search-msg { font-size: 13.5px; color: var(--tbo-ink-2); margin-top: 10px; }
.tbo-404-search { max-width: var(--tbo-article-max); margin: 0 auto 40px; }
.tbo-author-hero .tdb_author_image .tdb-author-photo, .tbo-author-hero .tdb_author_image img, .tbo-author-hero .tdb_author_image .tdb-author-img { border-radius: 50%; }
.tbo-author-hero .tdb_author_image .tdb-author-img { background-position: center 25%; } /* photo en pied : le visage reste dans le rond */

/* « Les plus lus » : encadré crème numéroté */
.tbo-card--ranked { background: var(--tbo-creme-2); border-radius: var(--tbo-radius); padding: 22px; counter-reset: tbo-rank; }
.tbo-card--ranked .td_module_wrap { counter-increment: tbo-rank; padding-bottom: 0; }
.tbo-card--ranked .td-module-meta-info { padding: 0 0 0 22px; position: relative; }
.tbo-card--ranked .td-module-meta-info:before { content: counter(tbo-rank); position: absolute; left: 0; top: 0; font-weight: 600; font-size: 17px; color: var(--tbo-aubergine-text); }
.tbo-card--ranked .td-module-title { font-size: 15px; line-height: 1.33; }
.tbo-card--ranked .td-block-title-wrap .block-title { font-size: 20px; border: 0; padding: 0; margin-bottom: 12px; }
.tbo-card--ranked .td-block-title-wrap .block-title > * { border: 0; }

/* Article : en-tête 740 px, corps + sidebar 1020 px */
.vc_row.tbo-wrap-head { max-width: calc(var(--tbo-article-head) + 48px); margin-left: auto; margin-right: auto; }
.vc_row.tbo-wrap-article { max-width: calc(var(--tbo-article-wrap) + 48px); margin-left: auto; margin-right: auto; }
/* En-tête et image à la une : marges des blocs (28 px par défaut, .wpb_wrapper .td_block_wrap) */
.td_block_wrap.tbo-crumbs { margin-bottom: 14px; }
.td_block_wrap.tbo-meta-bar { margin: 24px 0 0; padding: 14px 0; }
.td_block_wrap.tdb_single_featured_image { margin-bottom: 16px; }
.td_block_wrap.tbo-share-bar-wrap { margin-bottom: 0; }
/* Fil d'Ariane ([tbo_breadcrumb]) : label mono de la maquette, rubrique en aubergine */
.tbo-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--tbo-font-mono); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: var(--tbo-label-tracking); text-transform: uppercase; }
.tbo-breadcrumb li { margin: 0; color: var(--tbo-ink-3); }
.tbo-breadcrumb li + li:before { content: '›'; margin: 0 .55em; }
.tbo-breadcrumb a { color: var(--tbo-ink-2); }
.tbo-breadcrumb li:last-child a { color: var(--tbo-aubergine-text); }
.tbo-breadcrumb a:hover { color: var(--tbo-prune); }
.tdb_title.tbo-single-h1 .tdb-title-text { font-weight: 500; font-size: var(--tbo-h1); line-height: var(--tbo-h1-lh); letter-spacing: -0.005em; color: var(--tbo-prune); text-transform: none; }
.tbo-byline { display: flex; align-items: center; gap: 12px; }
.tbo-byline-photo { flex: none; } /* sinon la photo rétrécit en ovale quand la ligne de dates est longue */
.tbo-byline-photo img { width: 44px; height: 44px; border-radius: 50%; background: var(--tbo-sable); display: block; }
.tbo-byline-name { font-size: 15px; font-weight: 600; color: var(--tbo-prune); background: linear-gradient(var(--tbo-aubergine), var(--tbo-aubergine)) left bottom / 0 2px no-repeat; transition: background-size var(--tbo-ease); }
.tbo-byline-name:hover { background-size: 100% 2px; color: var(--tbo-prune); }
.tbo-byline-meta { font-size: 14px; line-height: 1.4; color: var(--tbo-ink-2); margin-top: 2px; }
/* Barre sous l'image à la une ([tbo_share_bar]) : Partager | Suivre (liens Google à plat dans le groupe) */
.tbo-share-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 11px 16px; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius-md); }
.tbo-share-bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tbo-share-bar .tbo-google-links { display: contents; }
.tbo-share-bar .tbo-label { margin: 0 6px 0 0; color: var(--tbo-ink-2); font-size: 12px; letter-spacing: .14em; }
.tbo-share-bar .tbo-btn--icon { width: 38px; height: 38px; }
/* Téléphone et tablette avec partage natif (.tbo-native-share, functions.php) : « Partager » à la place des réseaux */
.tbo-share-bar .tbo-share-native, .tbo-native-share .tbo-share-bar a.tbo-btn--icon { display: none; }
.tbo-native-share .tbo-share-bar .tbo-share-native { display: inline-flex; }
.tbo-share-bar .tbo-google-links a { min-height: 38px; gap: 8px; padding: 0 14px; border-color: var(--tbo-line-2); border-radius: var(--tbo-pill); background: transparent; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
/* Source favorite Google : bouton plein, comme sur public.fr */
.tbo-share-bar .tbo-google-links a:last-child { background: var(--tbo-prune); border-color: var(--tbo-prune); color: var(--tbo-creme); }
.tbo-share-bar .tbo-google-links a:last-child:hover { background: var(--tbo-prune-2); border-color: var(--tbo-prune-2); }
@media (max-width: 767px) {
  .tbo-share-bar { padding: 12px 14px; }
  .tbo-share-bar-group { width: 100%; }
  .tbo-share-bar .tbo-label { margin-right: auto; } /* libellé à gauche, boutons à droite */
  .tbo-share-bar .tbo-btn--icon { width: 36px; height: 36px; } /* 4 boutons + libellé dès 320 px */
  .tbo-share-bar .tbo-google-links a:last-child { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 374px) { /* 320 px : « Suivre » au-dessus de ses boutons, source favorite sur une ligne */
  .tbo-share-bar { padding-left: 10px; padding-right: 10px; }
  .tbo-share-bar-group:last-child .tbo-label { flex-basis: 100%; }
  .tbo-share-bar .tbo-google-links a { flex: 1; justify-content: center; padding: 0 10px; font-size: 11px; }
}
.tbo-btn.tbo-copy.is-copied { border-color: var(--tbo-aubergine); color: var(--tbo-aubergine-text); } /* lien copié (tbo.js) */

/* Titres hero / lead : la graisse 500 s'applique aussi au lien (sinon 600 via .entry-title a) */
.tbo-card--hero .td-module-title a, .tbo-card--lead .td-module-title a { font-weight: inherit; }
.tbo-sticky-col > .wpb_wrapper { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 28px; }
/* Sticky : le style.css parent met overflow: hidden sur #td-outer-wrap, ce qui annule position: sticky ; clip rogne pareil
   sans l'annuler (y en visible : avec hidden sur l'autre axe, clip redevient hidden).
   La ligne passe en flex pour que la colonne collante prenne la hauteur de la ligne (les colonnes tagDiv sont flottantes). */
#td-outer-wrap { overflow-x: clip; overflow-y: visible; }
@media (min-width: 768px) { .vc_row:has(> .tbo-sticky-col) { display: flex; } }

/* ==========================================================================
   13. Menu mobile plein écran ([tbo_burger] + #tbo-menu, inc/menu-mobile.php)
   Verre dépoli prune sur la page, ouverture en pastille depuis le burger,
   rubriques en Bricolage Grotesque, trait feutre sous la rubrique en cours.
   ========================================================================== */
.tbo-burger { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--tbo-line-2); background: transparent; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.tbo-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--tbo-prune); transition: transform var(--tbo-ease); }
.tbo-burger span:nth-child(2) { width: 11px; transform: translateX(2.5px); }
.tbo-burger:active span:nth-child(2) { transform: translateX(-2.5px); }

.tbo-menu { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; gap: 22px; padding: 14px 20px 32px; overflow-y: auto; overscroll-behavior: contain; color: var(--tbo-creme);
  background: color-mix(in srgb, var(--tbo-prune) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  clip-path: circle(0 at var(--x, calc(100% - 40px)) var(--y, 36px)); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
.tbo-menu > * { flex-shrink: 0; } /* menu plus haut que l'écran : il défile au lieu d'écraser la recherche */
.tbo-menu[hidden] { display: none; }
html.tbo-menu-open, html.tbo-menu-open body { overflow: hidden; }
html.tbo-menu-open .tbo-menu { clip-path: circle(150vmax at var(--x, calc(100% - 40px)) var(--y, 36px)); transition-duration: .7s; }

.tbo-menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.tbo-menu-close { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--tbo-prune-3); background: transparent; cursor: pointer; }
.tbo-menu-close span { position: absolute; left: 11px; right: 11px; top: 18px; height: 2px; border-radius: 2px; background: var(--tbo-creme); transform: rotate(45deg); }
.tbo-menu-close span + span { transform: rotate(-45deg); }

.tbo-menu-search { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-radius: var(--tbo-pill); background: var(--tbo-creme); color: var(--tbo-prune); }
.tbo-menu-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font-family: var(--tbo-font-sans); font-size: 17px; color: var(--tbo-prune); outline: 0; }

.tbo-menu-list { list-style: none; margin: 0; padding: 0; }
.tbo-menu-list li { list-style: none; margin: 0; border-bottom: 1px solid var(--tbo-prune-2); }
.tbo-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--tbo-creme); }
.tbo-menu-list a:hover, .tbo-menu-list a:active { color: var(--tbo-aubergine-light); }
.tbo-menu-name { font-family: var(--tbo-font-display); font-weight: 800; font-size: clamp(36px, 10.5vw, 52px); line-height: 1.04; letter-spacing: -0.045em; padding: 0 .04em;
  background: linear-gradient(transparent 60%, var(--tbo-aubergine) 60%, var(--tbo-aubergine) 90%, transparent 90%) no-repeat left / 0 100%; }
.tbo-menu-cover { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--tbo-prune-2) var(--cover) center / cover; box-shadow: 0 0 0 2px var(--tbo-prune-3); }

/* Entrée orchestrée : recherche puis rubriques qui montent une à une, puis le trait feutre se dessine sous la rubrique en cours */
.tbo-menu-search, .tbo-menu-list li, .tbo-menu-foot { opacity: 0; transform: translateY(28px); transition: opacity .3s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.tbo-menu-open .tbo-menu-search, html.tbo-menu-open .tbo-menu-list li, html.tbo-menu-open .tbo-menu-foot { opacity: 1; transform: none; transition-delay: calc(.22s + var(--i, 0) * 45ms); }
html.tbo-menu-open .tbo-menu-list a.is-current .tbo-menu-name { background-size: 100% 100%; transition: background-size .5s cubic-bezier(.6, 0, .2, 1) .8s; }

.tbo-menu-foot { display: flex; flex-direction: column; gap: 18px; margin-top: auto; }
.tbo-menu-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 0; padding: 0; }
.tbo-menu-links li { list-style: none; margin: 0; }
.tbo-menu-links a { font-size: 15px; color: var(--tbo-on-prune); }
.tbo-menu-cta { display: flex; align-items: center; gap: 8px; }
.tbo-menu-cta .tbo-btn:not(.tbo-btn--icon) { flex: 1; padding-left: 12px; padding-right: 12px; } /* tient à côté des 3 réseaux dès 320 px */
.tbo-menu .tbo-btn--icon { flex: none; width: 44px; height: 44px; border-color: var(--tbo-prune-3); color: var(--tbo-creme); }
/* Liens Google sur fond prune : en contour et en pilule comme les autres boutons du menu */
.tbo-menu .tbo-google-links { margin: 0; }
.tbo-menu .tbo-google-links a { padding: 8px 18px; border-radius: var(--tbo-pill); background: transparent; border-color: var(--tbo-prune-3); color: var(--tbo-creme); font-size: min(13px, 3.7vw); }
.tbo-menu .tbo-google-links a:hover { border-color: var(--tbo-aubergine); }
/* Libellés en capitales, comme dans la carte de partage de la sidebar */
.tbo-menu .tbo-google-links a, .tbo-menu-cta .tbo-btn:not(.tbo-btn--icon) { text-transform: uppercase; letter-spacing: .03em; }

/* ==========================================================================
   14. Pages éditoriales : Newsletter (2l), La rédaction (2m), Contact (2k), Charte (2n)
   ========================================================================== */
.tbo-kicker { font-family: var(--tbo-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-aubergine-text); margin: 0 0 12px; }
.tbo-page-h1 { font-weight: 500; font-size: clamp(44px, 6.2vw, 80px); line-height: 1; letter-spacing: -0.02em; color: var(--tbo-prune); margin: 0; }
.tbo-page-intro, .tbo-page-intro p { font-size: 19px; line-height: 1.55; color: var(--tbo-ink); margin: 0 0 14px; }
.tbo-page-head .vc_column:last-child { align-self: center; }

/* Fonds pleine largeur (même technique que le hero rubrique) */
.vc_row.tbo-nl-hero, .vc_row.tbo-page-hero--creme { box-shadow: 0 0 0 100vmax var(--row-bg); clip-path: inset(0 -100vmax); background: var(--row-bg); }
.vc_row.tbo-nl-hero { --row-bg: var(--tbo-aubergine); color: var(--tbo-prune); }
.vc_row.tbo-page-hero--creme { --row-bg: var(--tbo-creme); }

/* Newsletter */
.tbo-nl-hero h1 { font-weight: 500; font-size: clamp(40px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.02em; color: var(--tbo-prune); margin: 20px 0 22px; } /* graisse et taille des titres de pages (.tbo-page-h1) */
.tbo-nl-lead { font-size: 21px; line-height: 1.45; max-width: 440px; margin: 0 0 28px; }
.tbo-nl-form { max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.tbo-nl-field { display: flex; gap: 6px; padding: 6px; border-radius: var(--tbo-pill); background: var(--tbo-creme); }
.tbo-nl-field input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 16px; font-family: var(--tbo-font-sans); font-size: 16px; color: var(--tbo-prune); outline: 0; }
.tbo-nl-field .tbo-btn { flex: none; }
.tbo-nl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--tbo-prune); cursor: pointer; }
.tbo-nl-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tbo-prune); }
.tbo-nl-consent a { color: var(--tbo-prune); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tbo-nl-hero-visual { display: flex; justify-content: center; align-items: center; }
.tbo-nl-preview { width: min(400px, 100%); background: var(--tbo-white); border-radius: var(--tbo-radius-md); overflow: hidden; transform: rotate(2.5deg); box-shadow: 0 30px 60px color-mix(in srgb, var(--tbo-prune) 28%, transparent); }
.tbo-nl-preview-bar { display: flex; justify-content: space-between; padding: 12px 18px; background: var(--tbo-creme); border-bottom: 1px solid var(--tbo-line); font-size: 12.5px; color: var(--tbo-ink-2); }
.tbo-nl-preview-bar b { color: var(--tbo-prune); }
.tbo-nl-preview-body { padding: 18px; }
.tbo-nl-preview-logo { display: block; height: 24px; margin-bottom: 12px; }
.tbo-nl-preview-logo svg { height: 100%; width: auto; }
.tbo-nl-preview-hello { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--tbo-prune); margin: 0 0 14px; }
.tbo-nl-preview-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tbo-radius); }
.tbo-nl-preview-lead { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--tbo-prune); margin: 12px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--tbo-line); }
.tbo-nl-preview-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tbo-line); }
.tbo-nl-preview-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tbo-nl-preview-item img { width: 72px; height: 56px; object-fit: cover; border-radius: var(--tbo-radius); flex: none; }
.tbo-nl-preview-item .tbo-label { margin: 0 0 4px; }
.tbo-nl-preview-item p { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--tbo-prune); margin: 0; }
.tbo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.tbo-steps > div { border-top: 2px solid var(--tbo-prune); padding-top: 22px; }
.tbo-step-num { font-family: var(--tbo-font-mono); font-size: 12px; letter-spacing: .1em; color: var(--tbo-aubergine-text); }
.tbo-steps h3 { font-size: 24px; font-weight: 600; margin: 10px 0 8px; }
.tbo-steps p { font-size: 16px; line-height: 1.5; color: var(--tbo-ink); margin: 0; }

/* La rédaction : cartes équipe (blocs Team member) en grille */
.vc_column.tbo-team > .wpb_wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.tbo-team > .wpb_wrapper > .td_block_wrap:first-child { grid-column: 1 / -1; margin: 0; }
.tbo-team .tbo-team-card { margin: 0; }
.tbo-team .tdm-team-member-wrap { display: flex; flex-direction: column; text-align: left; }
.tbo-team .tdm-member-image-wrap { order: 0; } .tbo-team .tdm-member-title { order: 1; } .tbo-team .tdm-title { order: 2; } .tbo-team .tdm-member-info { order: 3; }
.tbo-team .tdm-member-image-wrap { width: 100%; aspect-ratio: 3 / 4; height: auto; margin: 0 0 16px; border-radius: var(--tbo-radius); overflow: hidden; background: var(--tbo-sable); }
.tbo-team .td_block_wrap .tdm-member-image { width: 100%; height: 100%; padding: 0; border-radius: 0; background-size: cover; background-position: center top; }
.tbo-team .td_block_wrap .tdm-member-title { display: block; font-family: var(--tbo-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tbo-aubergine-text); margin: 0 0 6px; }
.tbo-team .td_block_wrap .tdm-title { font-family: var(--tbo-font-sans); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--tbo-prune); margin: 0 0 10px; }
.tbo-team .tdm-title a { color: inherit; }
.tbo-team .td_block_wrap .tdm-descr { font-family: var(--tbo-font-sans); font-size: 15px; line-height: 1.55; color: var(--tbo-ink); margin: 0 0 14px; }
.tbo-team .tdm-member-info-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tbo-team .tdm-descr { flex: 0 0 100%; }
.tbo-team-articles { font-size: 14.5px; font-weight: 600; color: var(--tbo-prune); background: linear-gradient(transparent 58%, var(--tbo-aubergine-light) 58%); padding: 0 2px; margin-right: 6px; }
.tbo-team .tdm-social-wrapper { display: flex; gap: 6px; }
.tbo-team .tdm-social-item-wrap { margin: 0; }
.tbo-team .tdm-social-item { width: 32px; height: 32px; margin: 0; border: 1px solid var(--tbo-line-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--tbo-prune); }
.tbo-team .tdm-social-item i { font-size: 12px; color: inherit; }
@media (max-width: 1018px) { .vc_column.tbo-team > .wpb_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tbo-cta-card { height: 100%; padding: 32px; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius-md); background: var(--tbo-creme); }
.tbo-cta-card h2 { font-size: 28px; font-weight: 600; margin: 0 0 10px; }
.tbo-cta-card p { font-size: 16px; line-height: 1.5; color: var(--tbo-ink); margin: 0 0 18px; }
.tbo-cta-card--prune { background: var(--tbo-prune); border-color: var(--tbo-prune); }
.tbo-cta-card--prune h2 { color: var(--tbo-creme); }
.tbo-cta-card--prune p { color: var(--tbo-on-prune); }
.tbo-cta-link { font-weight: 700; font-size: 15px; color: var(--tbo-prune); background: linear-gradient(transparent 58%, var(--tbo-aubergine-light) 58%); padding: 0 2px; }
.tbo-cta-card--prune .tbo-cta-link { color: var(--tbo-creme); background: none; }

/* Contact */
.tbo-contact-cards .tbo-contact-card > .wpb_wrapper { height: 100%; padding: 36px; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius-md); background: var(--tbo-creme); }
.tbo-contact-cards .tbo-contact-card--prune > .wpb_wrapper { background: var(--tbo-prune); border-color: var(--tbo-prune); color: var(--tbo-on-prune); }
.tbo-contact-card h2 { font-size: 38px; font-weight: 500; margin: 0 0 14px; }
.tbo-contact-card--prune h2 { color: var(--tbo-creme); }
.tbo-contact-card p { font-size: 16.5px; line-height: 1.6; margin: 0 0 28px; max-width: 460px; }
.tbo-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tbo-contact-card--prune .tbo-btn--ghost { background: transparent; color: var(--tbo-creme); border-color: var(--tbo-prune-3); }
.tbo-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 28px; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius-md); }
.tbo-follow .tbo-kicker { flex: 0 0 100%; margin: 0; color: var(--tbo-ink-2); }
.tbo-follow h3 { font-size: 22px; font-weight: 600; margin: 0; }
.tbo-social-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.tbo-social-pill { display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border: 1px solid var(--tbo-line-2); border-radius: var(--tbo-pill); color: var(--tbo-prune); }
.tbo-social-pill:hover { border-color: var(--tbo-aubergine); color: var(--tbo-prune); }
.tbo-social-pill-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--tbo-prune); color: var(--tbo-creme); display: inline-flex; align-items: center; justify-content: center; }
.tbo-social-pill b { display: block; font-size: 15px; line-height: 1.2; }
.tbo-social-pill small { display: block; font-size: 13px; color: var(--tbo-ink-2); }

/* Charte éditoriale : sections numérotées automatiquement (ajout / retrait de section sans renumérotation) */
.tbo-updated { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tbo-ink-2); margin: 22px 0 0; }
.tbo-updated:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tbo-olive); }
.tbo-charte > .wpb_wrapper { counter-reset: tbo-charte; max-width: 720px; }
.tbo-charte-section { counter-increment: tbo-charte; padding: 0 0 36px; margin: 0 0 36px; border-bottom: 1px solid var(--tbo-line); font-size: 18px; line-height: 1.65; color: var(--tbo-ink); }
.tbo-charte-section:last-child { border-bottom: 0; margin-bottom: 0; }
.tbo-charte-section h2 { display: flex; align-items: baseline; gap: 14px; font-size: 32px; font-weight: 600; line-height: 1.2; margin: 0 0 18px; scroll-margin-top: 100px; }
.tbo-charte-section h2:before { content: counter(tbo-charte, decimal-leading-zero); font-family: var(--tbo-font-mono); font-size: 14px; font-weight: 500; color: var(--tbo-aubergine-text); }
.tbo-charte-section p { margin: 0 0 1em; }
.tbo-charte-section ul { margin: 0 0 1em; padding: 0 0 0 1.4em; }
.tbo-charte-section li { list-style: none; position: relative; margin: 0 0 .5em; }
.tbo-charte-section li:before { content: ''; position: absolute; left: -1.3em; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tbo-aubergine); }
.tbo-charte-section h3 { font-size: 20px; margin: 28px 0 12px; }

/* Guide des tailles (mise en page de la Charte) : tableaux lus en colonne, une ligne = une taille, la première colonne
   (taille de référence) reste visible quand un tableau large défile sur mobile. */
.tbo-size-scroll { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--tbo-line); border-radius: var(--tbo-radius-md); }
.tbo-size-scroll:focus-visible { outline: 2px solid var(--tbo-aubergine); outline-offset: 2px; }
.tbo-size-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tbo-size-table th, .tbo-size-table td { padding: 9px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--tbo-line); background: var(--tbo-white); }
.tbo-size-table td { white-space: nowrap; } /* « 43–44,5 » jamais coupé au tiret : le tableau défile plutôt */
.tbo-size-table thead th { font-family: var(--tbo-font-mono); font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--tbo-ink-2); background: var(--tbo-creme); vertical-align: bottom; }
.tbo-size-table thead small { display: block; text-transform: none; letter-spacing: 0; }
.tbo-size-table tbody th { font-weight: 700; color: var(--tbo-prune); }
.tbo-size-table th:first-child { position: sticky; left: 0; z-index: 1; }
.tbo-size-table tbody tr:last-child > * { border-bottom: 0; }
.tbo-size-table tbody tr:hover > * { background: var(--tbo-creme); }
.tbo-size-table .tbo-in { display: block; font-size: 12.5px; color: var(--tbo-ink-2); }
.tbo-size-note { font-size: 14px; color: var(--tbo-ink-2); }

/* Annuaire de boutiques (mise en page de la Charte) : une fiche par enseigne, tailles et livraison en liste de définitions */
.tbo-shop { padding: 24px 0; border-top: 1px solid var(--tbo-line); }
.tbo-shop:first-of-type { padding-top: 6px; border-top: 0; }
.tbo-charte-section .tbo-shop h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.tbo-shop p { margin: 0 0 14px; }
.tbo-shop-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.tbo-shop-facts dt { padding-top: 3px; font-family: var(--tbo-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tbo-ink-2); }
.tbo-shop-facts dd { margin: 0; color: var(--tbo-ink); }
.tbo-callout { margin: 0 0 1em; padding: 18px 20px; background: var(--tbo-creme); border-left: 3px solid var(--tbo-aubergine); border-radius: var(--tbo-radius); }
.tbo-callout p:last-child { margin-bottom: 0; }
/* Sommaire ([tbo_toc]) : numéros par compteur comme les sections, entrée en cours = aria-current (tbo.js) */
.tbo-toc { max-width: 280px; }
.tbo-toc-title { font-family: var(--tbo-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tbo-ink-2); margin: 0; padding: 0 0 10px; border-bottom: 2px solid var(--tbo-prune); }
.tbo-toc ol { counter-reset: tbo-toc; list-style: none; margin: 0; padding: 0; }
.tbo-toc li { counter-increment: tbo-toc; margin: 0; border-bottom: 1px solid var(--tbo-creme-2); }
.tbo-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 0; font-size: var(--tbo-meta); line-height: 1.35; font-weight: 500; color: var(--tbo-ink-2); }
.tbo-toc a:before { content: counter(tbo-toc, decimal-leading-zero); font-family: var(--tbo-font-mono); font-size: 11.5px; color: var(--tbo-aubergine-text); padding-top: 2px; }
.tbo-toc a:hover { color: var(--tbo-aubergine); }
.tbo-toc a[aria-current] { color: var(--tbo-prune); font-weight: 700; }

@media (max-width: 767px) {
  .tbo-steps { grid-template-columns: 1fr; }
  .vc_column.tbo-team > .wpb_wrapper { grid-template-columns: 1fr; }
  .vc_column.tbo-charte-aside { display: none; }
  .tbo-charte-section h2 { font-size: 24px; }
  .tbo-size-table { font-size: 14px; }
  .tbo-size-table th, .tbo-size-table td { padding: 8px; }
  .tbo-size-table thead th { font-size: 10px; letter-spacing: .04em; } /* 5 colonnes sans défilement dès 360 px */
  .tbo-shop-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tbo-shop-facts dd { margin-bottom: 10px; }
  .tbo-nl-preview { transform: none; }
}

/* Réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; } }