/*
Theme Name: Voyancelle
Theme URI: https://voyancelle.com
Author: Voyancelle
Description: Voyance sérieuse, tarot et astrologie — thème code-pur, écrit pour voyancelle.com. Thème clair uniquement.
Version: 1.0.0
Text Domain: voyancelle
*/

/* ============================================================
   TOKENS — --vc-* — exposés pour le thème ET pour theme/outils/
   (quiz, newsletter, tirages) écrit par un autre designer.
   ============================================================ */
:root{
  color-scheme: light;

  /* Couleurs — DIRECTION-ARTISTIQUE.md §2 */
  --vc-papier: #FCF9F5;
  --vc-chair: #F4E1D6;
  --vc-encre: #2A1F1D;
  --vc-garance: #A3324A;
  --vc-garance-profonde: #842638;
  --vc-rose-veille: #F0A9B4;
  --vc-vert-gris: #3E6A5E;
  --vc-mine: #6B5E58;
  --vc-filet: #E7D9CF;
  --vc-blanc: #FFFFFF;
  --vc-chair-numero: #EBCDBE; /* chair plus soutenue pour les numéros romains géants (VERDICT n°12) */

  /* Typo */
  --vc-font-display: 'Gilda Display', Georgia, 'Times New Roman', serif;
  --vc-font-text: 'Gelasio', Georgia, 'Times New Roman', serif;

  /* Échelle (base 18px, ratio 1.333) */
  --vc-14: 0.875rem;
  --vc-16: 1rem;
  --vc-18: 1.125rem;
  --vc-24: 1.5rem;
  --vc-32: 2rem;
  --vc-42: 2.625rem;
  --vc-56: 3.5rem;
  --vc-h1: clamp(2.75rem, 2.15rem + 2.6vw, 4.75rem);      /* 44px -> 76px */
  --vc-numeral: clamp(4.5rem, 3vw + 4rem, 10rem);         /* 72px -> 160px (VERDICT n°12) */

  /* Grille */
  --vc-container: 1200px;
  --vc-gouttiere: 24px;
  --vc-marge: 16px;

  /* Rayon : 0 partout sauf l'arche */
  --vc-rayon: 0;

  /* Ombre légère au survol des cartes (relèvement, jamais d'ombre molle généralisée) */
  --vc-ombre-carte: 0 10px 18px -12px rgba(42,31,29,.35);

  /* Header */
  --vc-header-h: 72px;
  --vc-header-h-reduit: 56px;
}

/* ============================================================
   POLICES AUTO-HÉBERGÉES — fichiers posés par Mathias dans theme/fonts/
   ============================================================ */
@font-face{
  font-family:'Gilda Display';
  src:url('fonts/gilda-display-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('fonts/gelasio-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('fonts/gelasio-400-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('fonts/gelasio-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gelasio';
  src:url('fonts/gelasio-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ============================================================
   RESET — sobre
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
ul,ol{ margin:0; padding:0; }
button{ font:inherit; }
a{ color:inherit; }
input,textarea,select,button{ font-family:inherit; }

html,body{ overflow-x:clip; max-width:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   BASE
   ============================================================ */
body{
  background:var(--vc-papier);
  color:var(--vc-encre);
  font-family:var(--vc-font-text);
  font-size:var(--vc-18);
  line-height:1.65;
}
h1,h2,h3,h4{
  font-family:var(--vc-font-display);
  font-weight:400;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--vc-encre);
  letter-spacing:-.01em;
}
h1{ font-size:var(--vc-h1); }
h2{ font-size:var(--vc-42); }
h3{ font-size:var(--vc-32); }
h4{ font-size:var(--vc-24); }
p{ margin:0 0 1.1em; }
a{ text-decoration-thickness:1px; text-underline-offset:.18em; }

.vc-kicker{
  font-family:var(--vc-font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:var(--vc-14);
  color:var(--vc-garance-profonde);
  display:block;
  margin-bottom:.6em;
}

::selection{ background:var(--vc-rose-veille); color:var(--vc-encre); }

:focus-visible{
  outline:3px solid var(--vc-garance);
  outline-offset:2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.vc-container{
  width:100%;
  max-width:calc(var(--vc-container) + var(--vc-gouttiere)*2);
  margin-inline:auto;
  padding-inline:var(--vc-marge);
}
@media (min-width:700px){
  .vc-container{ padding-inline:var(--vc-gouttiere); }
}
.vc-bande{ padding-block:56px; }
@media (min-width:900px){ .vc-bande{ padding-block:88px; } }
.vc-bande--papier{ background:var(--vc-papier); }
.vc-bande--chair{ background:var(--vc-chair); }
.vc-bande--noix{ background:var(--vc-encre); color:var(--vc-papier); }
.vc-bande--noix h1,.vc-bande--noix h2,.vc-bande--noix h3,.vc-bande--noix h4{ color:var(--vc-papier); }
.vc-bande--noix a{ color:var(--vc-rose-veille); }
.vc-bande--noix .vc-kicker{ color:var(--vc-rose-veille); }

.vc-grille{ display:grid; gap:var(--vc-gouttiere); grid-template-columns:1fr; }
.vc-grille > *{ min-width:0; } /* grid items ont min-width:auto par défaut : cause n°1 des débordements 390px */
@media (min-width:700px){ .vc-grille--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){
  .vc-grille--3{ grid-template-columns:repeat(3,1fr); }
  .vc-grille--4{ grid-template-columns:repeat(4,1fr); }
}
.vc-grille-scroll{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.vc-grille-scroll > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ============================================================
   BOUTONS / CTA
   ============================================================ */
.vc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  font-family:var(--vc-font-text);
  font-weight:600;
  font-variant-caps:all-small-caps;
  letter-spacing:.06em;
  font-size:var(--vc-16);
  padding:.9em 1.6em;
  min-height:44px;
  border:1.5px solid var(--vc-garance);
  border-radius:var(--vc-rayon);
  background:var(--vc-garance);
  color:var(--vc-papier);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.vc-btn:hover,.vc-btn:focus-visible{ background:var(--vc-garance-profonde); border-color:var(--vc-garance-profonde); }
.vc-btn:active{ transform:translateY(1px); }
.vc-btn--fantome{
  background:transparent; color:var(--vc-encre); border-color:var(--vc-encre);
}
.vc-btn--fantome:hover{ background:var(--vc-encre); color:var(--vc-papier); border-color:var(--vc-encre); }
.vc-bande--noix .vc-btn--fantome{ color:var(--vc-papier); border-color:var(--vc-rose-veille); }
.vc-bande--noix .vc-btn--fantome:hover{ background:var(--vc-rose-veille); color:var(--vc-encre); }
.vc-btn--petit{ font-size:var(--vc-14); padding:.65em 1.2em; min-height:38px; }

.vc-lien--inactif{
  /* VERDICT n°8 : un outil pas encore publié ne doit jamais s'AFFICHER barré
     ("ça se lit comme un site en panne") — il ne s'affiche plus du tout. */
  display:none !important;
}

/* ============================================================
   HEADER — sticky
   ============================================================ */
.vc-header{
  position:sticky; top:0; z-index:50;
  background:var(--vc-papier);
  border-bottom:1px solid var(--vc-garance);
  height:var(--vc-header-h);
  display:flex; align-items:center;
  transition:height .2s ease;
}
.vc-header.is-reduit{ height:var(--vc-header-h-reduit); }
.vc-header-in{
  width:100%; max-width:calc(var(--vc-container) + var(--vc-gouttiere)*2);
  margin-inline:auto; padding-inline:var(--vc-marge);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:700px){ .vc-header-in{ padding-inline:var(--vc-gouttiere); } }

.vc-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; flex-shrink:0; }
.vc-logo-symbole{ width:28px; height:48px; flex:0 0 auto; }
.vc-logo-mot{
  font-family:var(--vc-font-display);
  font-size:1.4rem;
  color:var(--vc-encre);
  letter-spacing:.01em;
  white-space:nowrap;
  position:relative;
}
.vc-logo-mot .vc-logo-v{ position:relative; }
.vc-logo-mot .vc-logo-v::before{
  content:"";
  position:absolute; top:-.32em; left:.02em;
  width:.34em; height:.17em;
  background:var(--vc-garance);
  border-radius:999px 999px 0 0;
}
.vc-logo-baseline{
  /* VERDICT n°4 : la baseline, cumulée au logo+nav+CTA, empêchait le header de tenir
     dans 1200px (bouton "TROUVER MA CONS…" coupé à 1440px). Retirée du header. */
  display:none;
}

.vc-nav{ display:none; }
@media (min-width:960px){
  .vc-nav{ display:flex; align-items:center; gap:16px; list-style:none; }
  .vc-nav a{
    font-family:var(--vc-font-text); font-weight:600; font-size:var(--vc-16);
    text-decoration:none; color:var(--vc-encre); white-space:nowrap;
    padding:.3em 0; border-bottom:2px solid transparent; position:relative;
  }
  .vc-nav a:hover,.vc-nav a:focus-visible{ border-bottom-color:var(--vc-garance); }
  /* Entrée active soulignée d'un demi-disque garance (motif du logo) — VERDICT n°4 */
  .vc-nav .current-menu-item > a,.vc-nav .current-menu-parent > a{ border-bottom-color:var(--vc-garance); }
  .vc-nav .current-menu-item > a::after,.vc-nav .current-menu-parent > a::after{
    content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
    width:9px; height:5px; background:var(--vc-garance); border-radius:9px 9px 0 0;
  }
}

/* PASSE 2-b : le fil d'aube sous le header (5 tirets roses flottant SUR le contenu, à
   7px sous le filet) se lisait comme un artefact plutôt qu'un procédé — supprimé
   plutôt que rafistolé, comme le permettait le verdict ("soit le supprimer..."). */

.vc-header-droite{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vc-header-cta{ display:none; }
@media (min-width:700px){ .vc-header-cta{ display:inline-flex; } }
.vc-header-cta-mobile{ display:inline-flex; }
@media (min-width:700px){ .vc-header-cta-mobile{ display:none; } }
/* GRILLE 22/09 n°1 (GD-009) : CTA header mesuré à rgb(42,31,29) sur rgb(163,50,74)
   = 2.37:1 (sous AA 4.5:1) sur les 4 pages testées — cause non reproduite dans ce
   fichier local (.vc-btn pose déjà color:var(--vc-papier)), donc verrou défensif
   à forte spécificité pour garantir 6.43:1 (papier/garance, DA §2) quel que soit
   ce qui, côté serveur déployé, écrasait la couleur. */
.vc-header-cta.vc-btn,.vc-header-cta-mobile.vc-btn{ color:var(--vc-papier) !important; }
.vc-header-cta.vc-btn:hover,.vc-header-cta.vc-btn:focus-visible,
.vc-header-cta-mobile.vc-btn:hover,.vc-header-cta-mobile.vc-btn:focus-visible{ color:var(--vc-papier) !important; }

.vc-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1.5px solid var(--vc-encre); background:transparent;
  border-radius:var(--vc-rayon); cursor:pointer;
}
@media (min-width:960px){ .vc-burger{ display:none; } }
.vc-burger svg{ width:22px; height:22px; }

.vc-menu-mobile{
  /* VERDICT n°3 : ce panneau restait dans le flux (position:fixed; inset:0) même hors
     champ (translateX(100%)), et gonflait à lui seul le scrollWidth de la page à
     1537px sur 1440 et à 468/521/528px sur 390. visibility:hidden l'exclut vraiment,
     et display:none au-dessus du burger l'enlève du rendu. */
  position:fixed; inset:0; z-index:60;
  background:var(--vc-papier);
  display:flex; flex-direction:column;
  padding:20px var(--vc-marge) 40px;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .25s ease, visibility 0s linear .25s;
  overflow-y:auto;
}
.vc-menu-mobile.is-ouvert{ transform:translateX(0); visibility:visible; transition:transform .25s ease; }
@media (min-width:960px){ .vc-menu-mobile{ display:none; } }
.vc-menu-mobile-tete{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.vc-menu-mobile-fermer{
  width:44px; height:44px; border:1.5px solid var(--vc-encre); background:transparent;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.vc-menu-mobile ul{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.vc-menu-mobile a{
  display:block; padding:16px 4px; font-family:var(--vc-font-display); font-size:1.5rem;
  color:var(--vc-encre); text-decoration:none; border-bottom:1px solid var(--vc-filet);
}
.vc-menu-mobile .vc-btn{ margin-top:24px; width:100%; }
body.vc-menu-ouvert{ overflow:hidden; }

/* ============================================================
   PROCÉDÉ 1 — LE CADRE-ARCANE (arche, double filet, cartouches)
   ============================================================ */
.vc-arche{
  position:relative;
  border:2px solid var(--vc-garance);
  border-radius:50% 50% 0 0 / 24% 24% 0 0;
  padding:5px;
  background:var(--vc-papier);
  overflow:hidden;
}
.vc-arche::after{
  content:"";
  position:absolute; inset:5px;
  border:1px solid var(--vc-filet);
  border-radius:inherit;
  pointer-events:none; z-index:2;
}
.vc-arche-media{
  position:relative;
  border-radius:inherit;
  overflow:hidden;
  aspect-ratio:4/5;
}
.vc-arche-media img{ width:100%; height:100%; object-fit:cover; }
.vc-arche--paysage .vc-arche-media{ aspect-ratio:16/9; }
.vc-arche--tarot .vc-arche-media{ aspect-ratio:7/12; }
.vc-arche-num{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--vc-font-display); font-size:var(--vc-14); letter-spacing:.14em;
  color:var(--vc-papier); background:var(--vc-garance); padding:.2em .7em;
}
.vc-arche-cartouche{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:rgba(42,31,29,.82); color:var(--vc-papier);
  font-family:var(--vc-font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--vc-14); text-align:center; padding:.7em .5em;
}

/* ============================================================
   PROCÉDÉ 2 — SECTIONS NUMÉROTÉES EN ARCANES
   ============================================================ */
.vc-section-tete{ position:relative; margin-bottom:28px; }
.vc-section-numero{
  font-family:var(--vc-font-display);
  font-size:var(--vc-numeral);
  line-height:1;
  position:absolute; top:-.25em; left:-.02em;
  color:var(--vc-chair-numero); /* VERDICT n°12 : chair renforcée, était presque invisible */
  z-index:0;
  user-select:none; pointer-events:none;
}
.vc-bande--noix .vc-section-numero,.vc-bande--noix .vc-section-tete .vc-section-numero{
  color:rgba(240,169,180,.3);
}
.vc-section-tete h2{ position:relative; z-index:1; padding-top:.5em; }
/* PASSE 2-e : en rubrique, le numéro précède un kicker + un H1 (pas un H2) — la règle
   ci-dessus ne les couvrait pas, le numéro passait devant "Rubrique" et le H1. */
.vc-section-tete > *:not(.vc-section-numero){ position:relative; z-index:1; }
/* Variante statique pour une bande centrée sans H2 collé (ex. newsletter, VIII) */
.vc-section-numero--statique{ position:static; display:block; text-align:center; margin:0 0 -.15em; }
.vc-section-chapo{ max-width:640px; color:var(--vc-mine); font-size:var(--vc-18); }
.vc-bande--noix .vc-section-chapo{ color:var(--vc-rose-veille); }

/* ============================================================
   PROCÉDÉ 3 — NATURE DU SERVICE
   ============================================================ */
.vc-nature{
  background:var(--vc-chair);
  border-left:4px solid var(--vc-garance);
  padding:28px var(--vc-marge);
}
@media (min-width:700px){ .vc-nature{ padding:36px 44px; } }
.vc-nature-in{ display:grid; gap:24px; }
.vc-nature-in > *{ min-width:0; }
@media (min-width:700px){ .vc-nature-in{ grid-template-columns:1fr 1fr; } }
.vc-nature h3{ font-size:var(--vc-24); margin-bottom:.4em; }
.vc-nature ul{ list-style:none; display:flex; flex-direction:column; gap:.5em; }
.vc-nature li{ padding-left:1.4em; position:relative; }
.vc-nature-oui li::before{ content:"✓"; position:absolute; left:0; color:var(--vc-vert-gris); font-weight:700; }
.vc-nature-non li::before{ content:"–"; position:absolute; left:0; color:var(--vc-mine); font-weight:700; }
.vc-tampon{
  display:inline-flex; align-items:center; gap:.5em;
  border:1.5px solid var(--vc-vert-gris); color:var(--vc-vert-gris);
  border-radius:999px; padding:.35em 1em; font-size:var(--vc-14); font-weight:600;
  margin-top:16px;
}
.vc-nature--compact{ padding:18px var(--vc-marge); }
.vc-nature--compact .vc-nature-in{ grid-template-columns:1fr; }

/* ============================================================
   PROCÉDÉ 5 — LE FIL D'AUBE
   ============================================================ */
.vc-fil{ display:flex; align-items:center; gap:6px; list-style:none; flex-wrap:wrap; }
.vc-fil li{ display:flex; align-items:center; gap:6px; font-size:var(--vc-14); color:var(--vc-mine); }
.vc-fil .vc-fil-pastille{
  width:10px; height:10px; border-radius:50%; border:1.5px solid var(--vc-garance); background:transparent; flex:0 0 auto;
}
.vc-fil li.is-fait .vc-fil-pastille{ background:var(--vc-garance); }
.vc-fil li:not(:last-child)::after{ content:""; width:20px; height:2px; background:var(--vc-garance); opacity:.4; }

.vc-fil--vertical{ flex-direction:column; align-items:flex-start; gap:0; border-left:2px solid var(--vc-filet); padding-left:16px; flex-wrap:nowrap; } /* PASSE 2-a : flex-wrap hérité de .vc-fil repliait le sommaire en 2ᵉ colonne tronquée */
.vc-fil--vertical li{ position:relative; padding:6px 0; }
.vc-fil--vertical li::after{ display:none; }
.vc-fil--vertical .vc-fil-pastille{ position:absolute; left:-21px; background:var(--vc-papier); }
.vc-fil--vertical li.is-fait .vc-fil-pastille{ background:var(--vc-garance); }
.vc-fil--vertical a{ color:var(--vc-encre); text-decoration:none; font-size:var(--vc-16); }
.vc-fil--vertical a:hover{ color:var(--vc-garance); }

/* ============================================================
   PROCÉDÉ 6 — FICHE D'OFFRE TAMPONNÉE
   ============================================================ */
.vc-offre{
  border:1px solid var(--vc-filet);
  background:var(--vc-papier);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.vc-offre:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--vc-ombre-carte); }
.vc-offre-corps{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.vc-offre-prix{ font-family:var(--vc-font-display); font-size:var(--vc-56); font-variant-numeric:lining-nums tabular-nums; color:var(--vc-garance); line-height:1; }
.vc-offre-prix small{ font-family:var(--vc-font-text); font-size:var(--vc-14); color:var(--vc-mine); }
.vc-offre-canaux{ display:flex; gap:10px; }
.vc-offre-canaux span{ font-size:var(--vc-14); color:var(--vc-mine); border:1px solid var(--vc-filet); padding:.25em .6em; }
.vc-offre-partenaire{ font-size:var(--vc-14); color:var(--vc-mine); font-style:italic; }

/* ============================================================
   PROCÉDÉ 7 — TUILES CARTES POSÉES
   ============================================================ */
.vc-tuile{
  background:var(--vc-chair); border:2px solid var(--vc-filet);
  padding:24px 18px; text-align:center;
}
.vc-tuile b{ display:block; font-family:var(--vc-font-display); font-size:var(--vc-numeral); line-height:1; color:var(--vc-garance); }
.vc-tuile span{ font-size:var(--vc-16); color:var(--vc-encre); }

/* ============================================================
   CARTES ARTICLE / RUBRIQUE
   ============================================================ */
.vc-carte{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
}
.vc-carte:hover .vc-arche{ transform:translateY(-4px) rotate(-1deg); box-shadow:var(--vc-ombre-carte); }
.vc-arche{ transition:transform .18s ease, box-shadow .18s ease; }
.vc-carte h3{ font-family:var(--vc-font-display); font-size:var(--vc-24); margin:0; }
.vc-carte h3 a{ color:var(--vc-encre); text-decoration:none; }
.vc-carte h3 a:hover{ color:var(--vc-garance); }
.vc-carte-chapo{ color:var(--vc-mine); font-size:var(--vc-16); margin:0; }
.vc-carte-meta{ font-size:var(--vc-14); color:var(--vc-mine); display:flex; gap:10px; }

/* Cartes de canal (I. Choisir) : ratio 4:5 borné, prix typique géant (VERDICT n°9) */
.vc-arche--canal .vc-arche-media{ aspect-ratio:4/5; max-height:360px; width:100%; }
.vc-arche--canal .vc-arche-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* PASSE 2-d */
@media (max-width:480px){ .vc-arche--canal .vc-arche-media{ max-height:300px; } }
.vc-carte-prix{
  font-family:var(--vc-font-display); font-size:var(--vc-56); line-height:1;
  color:var(--vc-garance); margin:.3em 0 0; font-variant-numeric:lining-nums tabular-nums;
}
.vc-carte-prix small{ font-family:var(--vc-font-text); font-size:var(--vc-14); color:var(--vc-mine); font-variant-numeric:normal; }

/* ============================================================
   HERO ACCUEIL
   ============================================================ */
.vc-hero{ padding-block:40px 56px; }
@media (min-width:900px){ .vc-hero{ padding-block:56px 72px; } }
.vc-hero-in{ display:grid; gap:32px; }
.vc-hero-in > *{ min-width:0; }
@media (min-width:900px){ .vc-hero-in{ grid-template-columns:7fr 5fr; align-items:start; gap:48px; } }
.vc-hero h1{ margin-bottom:.35em; }
.vc-hero-chapo{ font-size:var(--vc-24); color:var(--vc-mine); max-width:46ch; margin-bottom:1.2em; }
.vc-hero-visuel{ position:relative; }
.vc-hero-visuel .vc-arche{ max-width:420px; margin-inline:auto; }
.vc-hero-mascotte{ position:absolute; bottom:-18px; right:-6px; width:110px; z-index:4; }
@media (min-width:900px){ .vc-hero-mascotte{ width:150px; } }

.vc-preuves{ list-style:none; display:grid; gap:14px; margin:1.6em 0; grid-template-columns:1fr; }
@media (min-width:560px){ .vc-preuves{ grid-template-columns:1fr 1fr; } }
.vc-preuves li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--vc-16); }
.vc-preuves svg{ width:22px; height:22px; flex:0 0 auto; color:var(--vc-vert-gris); margin-top:2px; }

.vc-quiz-entree{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:1.4em; }
@media (min-width:560px){ .vc-quiz-entree{ grid-template-columns:repeat(3,1fr); } }
.vc-quiz-tuile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:96px; background:var(--vc-chair); border:2px solid var(--vc-filet);
  text-align:center; padding:16px 10px; text-decoration:none; color:var(--vc-encre);
  font-family:var(--vc-font-display); font-size:1.15rem;
  transition:border-color .15s ease, transform .15s ease;
}
.vc-quiz-tuile:hover{ border-color:var(--vc-garance); transform:translateY(-2px); }
.vc-quiz-slot{ margin-top:1.2em; }

/* ============================================================
   SIDEBAR ARTICLE — sticky, fil d'aube + quiz + nature du service
   ============================================================ */
.vc-article-layout{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:960px){ .vc-article-layout{ grid-template-columns:1fr 320px; align-items:start; } }
.vc-sidebar{ display:flex; flex-direction:column; gap:24px; min-width:0; }
@media (min-width:960px){
  /* VERDICT n°2 : max-height:calc(100vh…)+overflow:visible neutralisait le sticky
     (une fois collée, la sidebar pouvait dépasser l'écran). On laisse la sidebar
     tenir naturellement dans 100vh en repliant le sommaire (règle suivante) plutôt
     qu'en bridant la hauteur du conteneur sticky lui-même. */
  .vc-sidebar{ position:sticky; top:calc(var(--vc-header-h) + 20px); }
  /* Sommaire replié à ~6 entrées visibles, défilement interne propre à lui —
     jamais toute la sidebar. */
  .vc-sidebar-bloc:first-child .vc-fil--vertical{ max-height:38vh; overflow-y:auto; padding-right:8px; }
}
.vc-sidebar-bloc{ border:1px solid var(--vc-filet); padding:20px; background:var(--vc-papier); }
.vc-sidebar-bloc h2{ font-size:var(--vc-18); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8em; }

/* ============================================================
   ARTICLE
   ============================================================ */
.vc-article-hero{ padding-block:32px 0; }
.vc-article-une{
  max-height:55vh; overflow:hidden; margin-bottom:28px;
  border-radius:0 0 0 0;
}
.vc-article-une img{ width:100%; height:100%; object-fit:cover; max-height:55vh; }
.vc-article-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--vc-mine); font-size:var(--vc-14); margin-bottom:1em; }
.vc-article-meta a{ color:var(--vc-mine); text-decoration:none; border-bottom:1px solid transparent; }
.vc-article-meta a:hover,.vc-article-meta a:focus-visible{ color:var(--vc-garance); border-bottom-color:var(--vc-garance); }
.vc-article-chapo{ font-size:var(--vc-24); color:var(--vc-mine); max-width:70ch; }

.vc-corps{ max-width:680px; min-width:0; overflow-wrap:anywhere; }
.vc-corps h2{ margin-top:1.6em; }
.vc-corps h3{ font-size:var(--vc-24); margin-top:1.4em; }
.vc-corps p{ font-size:var(--vc-18); }
.vc-corps img{ margin-block:1.4em; aspect-ratio:16/9; object-fit:cover; width:100%; }
/* VERDICT n°3 (390px) : puces collées au bord + tableaux qui débordent. */
.vc-corps ul,.vc-corps ol{ padding-left:1.4em; }
.vc-corps li > ul{ margin:.4em 0 .6em 1.4em; }
.vc-corps ul + p,.vc-corps ol + p{ margin-top:1em; }
.vc-corps table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vc-corps blockquote{
  font-family:var(--vc-font-text); font-style:italic; font-size:var(--vc-24);
  border:none; margin:1.6em 0; padding-left:.9em; position:relative;
  color:var(--vc-encre);
}
.vc-corps blockquote::before{
  content:"“"; font-family:var(--vc-font-display); font-size:2.4em; color:var(--vc-garance);
  position:absolute; left:-.1em; top:-.2em; line-height:1;
}
.vc-encadre{
  background:var(--vc-chair); border-left:4px solid var(--vc-garance);
  padding:18px 22px; margin:1.8em 0;
}
.vc-encadre p:last-child{ margin-bottom:0; }

.vc-sommaire{ list-style:none; display:flex; flex-direction:column; gap:0; }

/* VERDICT n°14 : sommaire brut dans le corps rédigé (H2 "Sommaire" + liste à puces
   soulignées) en DOUBLON du fil d'aube de la sidebar — masqué au-dessus de 1100px,
   replié en carte chair en dessous. Le balisage réel varie selon la rédaction :
   on couvre les cas les plus probables (id="sommaire", texte "Sommaire"). */
/* PASSE 2-c : l'id réel posé en ligne par vc_ids_titres() est "vc-h-1-sommaire" (motif
   vc-h-<n>-<slug>), donc ni #sommaire ni [id^="sommaire"] ne matchaient. */
.vc-corps h2[id$="-sommaire"]{
  font-family:var(--vc-font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--vc-18); background:var(--vc-chair); padding:.9em 1em; margin:1.6em 0 0;
}
.vc-corps h2[id$="-sommaire"] + ul{
  background:var(--vc-chair); margin:0 0 1.6em; padding:1em 1.4em 1.4em 2em;
  list-style:decimal;
}
.vc-corps h2[id$="-sommaire"] + ul li{ margin-bottom:.4em; }
@media (min-width:1100px){
  .vc-corps h2[id$="-sommaire"],
  .vc-corps h2[id$="-sommaire"] + ul{ display:none; }
}

/* VERDICT n°15 : bloc Sources — liste numérotée soignée, sans URL visible, filet
   de séparation, paragraphe "Durée de lecture" jamais collé à la dernière puce. */
.vc-sources{ border-top:1px solid var(--vc-filet); margin-top:40px; padding-top:24px; }
.vc-sources h2{ font-size:var(--vc-18); text-transform:uppercase; letter-spacing:.08em; }
.vc-sources ol,.vc-sources ul{ list-style:decimal; display:flex; flex-direction:column; gap:14px; padding-left:1.4em; margin:0; }
.vc-sources li{ padding-bottom:12px; border-bottom:1px solid var(--vc-filet); font-size:var(--vc-16); color:var(--vc-encre); }
.vc-sources li:last-child{ border-bottom:none; padding-bottom:0; }
.vc-sources a{ color:var(--vc-encre); text-decoration:none; font-weight:600; }
.vc-sources a:hover{ color:var(--vc-garance); }
.vc-corps h2 + .vc-sources,.vc-sources + p{ margin-top:24px; }
aside.vc-sources{ display:block; }
aside.vc-sources h2{ margin-top:0; }

/* ============================================================
   GRILLE 22/09 n°3 — rythme visuel du corps d'article (murs de texte) :
   paragraphes plus aérés, 1er paragraphe après chaque H2 un peu plus grand,
   filet garance court sous chaque H2 (motif "double filet" de la DA). Aucun
   texte touché — uniquement du CSS.
   ============================================================ */
.vc-corps p{ margin-bottom:1.35em; }
.vc-corps h2{ position:relative; border-bottom:1px solid var(--vc-filet); padding-bottom:.35em; }
.vc-corps h2::after{ content:""; position:absolute; left:0; bottom:-1px; width:64px; height:2px; background:var(--vc-garance); }
.vc-corps h2 + p{ font-size:1.18em; }

.vc-detresse{
  background:var(--vc-encre); color:var(--vc-papier);
  padding:26px var(--vc-marge); margin:24px 0; text-align:center;
}
.vc-detresse strong{ font-family:var(--vc-font-display); font-size:var(--vc-24); display:block; margin-bottom:.4em; }
.vc-detresse a{ color:var(--vc-rose-veille); }

/* ============================================================
   BLOC AUTEUR
   ============================================================ */
.vc-auteur{
  display:flex; gap:18px; align-items:flex-start;
  border-top:1px solid var(--vc-filet); border-bottom:1px solid var(--vc-filet);
  padding:24px 0; margin:40px 0;
}
/* VERDICT n°5 : `.vc-corps img{width:100%;aspect-ratio:16/9}` s'appliquait aussi à la
   photo auteur (elle est rendue DANS .vc-corps par single.php) — ellipse 680×70px.
   Spécificité .vc-corps .vc-auteur-photo (0,2,0) > .vc-corps img (0,1,1) : l'emporte
   sans !important, quel que soit l'ordre des règles dans la feuille. */
.vc-corps .vc-auteur-photo,
.vc-auteur-photo{
  width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--vc-garance); max-width:none; aspect-ratio:1/1; margin:0;
}
.vc-auteur > div{ flex:1 1 auto; min-width:0; }
.vc-auteur-nom{ font-family:var(--vc-font-display); font-size:var(--vc-24); margin:0; }
.vc-auteur-nom a{ color:var(--vc-encre); text-decoration:underline; text-decoration-color:transparent; transition:color .15s ease,text-decoration-color .15s ease; }
.vc-auteur-nom a:hover,.vc-auteur-nom a:focus-visible{ color:var(--vc-garance); text-decoration-color:var(--vc-garance); }
.vc-auteur-role{ color:var(--vc-garance-profonde); font-size:var(--vc-14); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin:.2em 0 .5em; }
.vc-auteur-bio{ color:var(--vc-mine); font-size:var(--vc-16); margin-bottom:.4em; }
.vc-auteur-date{ font-size:var(--vc-14); color:var(--vc-mine); }

/* ============================================================
   ARTICLES LIÉS
   ============================================================ */
.vc-lies{ margin-top:40px; }
.vc-lies h2{ font-size:var(--vc-24); }

/* ============================================================
   TABLEAUX — enveloppe posée par le socle (.sbs_tableau)
   ============================================================ */
.sbs_tableau{ overflow-x:auto; margin:1.6em 0; border:1px solid var(--vc-filet); -webkit-overflow-scrolling:touch; }
.sbs_tableau table{ width:100%; border-collapse:collapse; min-width:520px; font-size:var(--vc-16); }
.sbs_tableau th,.sbs_tableau td{ padding:.7em .9em; border-bottom:1px solid var(--vc-filet); text-align:left; white-space:normal; }
.sbs_tableau thead th{ background:var(--vc-chair); font-family:var(--vc-font-display); font-weight:400; white-space:nowrap; }
.sbs_tableau tr:last-child td{ border-bottom:none; }

/* ============================================================
   FAQ ACCORDÉON
   ============================================================ */
.vc-faq details{ border-bottom:1px solid var(--vc-filet); padding:14px 0; }
.vc-faq summary{
  cursor:pointer; font-family:var(--vc-font-display); font-size:var(--vc-24);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.vc-faq summary::-webkit-details-marker{ display:none; }
.vc-faq summary::after{ content:"+"; font-size:1.4em; color:var(--vc-garance); flex:0 0 auto; }
.vc-faq details[open] summary::after{ content:"–"; }
.vc-faq details p{ margin-top:.8em; color:var(--vc-mine); }
.vc-faq-dispo{ list-style:none; display:flex; flex-direction:column; gap:0; }
/* VERDICT n°6 : accordéon FAQ sur 60% de la largeur, 40% vide à droite — passé en
   2 colonnes plutôt que d'ajouter une photo dupliquée (GD-007, images uniques). */
.vc-faq--2col{ max-width:1000px; }
@media (min-width:900px){
  .vc-faq--2col{ column-count:2; column-gap:40px; }
  .vc-faq--2col details{ break-inside:avoid; }
}

/* ============================================================
   IV. LES 7 SIGNES — grille 2 colonnes, numéros romains Gilda (VERDICT n°6/n°12)
   ============================================================ */
.vc-signes{ list-style:none; display:grid; gap:22px 44px; grid-template-columns:1fr; max-width:none; }
@media (min-width:700px){ .vc-signes{ grid-template-columns:1fr 1fr; } }
.vc-signes li{ display:flex; gap:16px; align-items:flex-start; }
.vc-signes-num{ font-family:var(--vc-font-display); font-size:var(--vc-42); line-height:1; color:var(--vc-garance); flex:0 0 auto; }
.vc-signes p{ margin:0; font-size:var(--vc-18); }
.vc-signes a{ color:inherit; text-decoration:none; }
.vc-signes a:hover p{ color:var(--vc-garance); }

/* ============================================================
   Listes de boutons en colonne (bande II, etc.) — corrige le débordement 390px
   causé par min-width:auto des enfants flex (VERDICT n°3/n°9)
   ============================================================ */
.vc-liste-boutons{ list-style:none; display:flex; flex-direction:column; gap:10px; min-width:0; }
.vc-liste-boutons li{ min-width:0; }
.vc-liste-boutons .vc-btn{ width:100%; white-space:normal; min-width:0; }

/* Éventail de 3 cartes (bande II) : grille responsive au lieu d'un ruban à
   défilement forcé qui coupait la 3ᵉ carte à 390px (VERDICT n°3). */
.vc-eventail{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:100%; }
@media (min-width:480px){ .vc-eventail{ grid-template-columns:repeat(3,minmax(0,140px)); gap:16px; } }

/* Encart "Nature du service" compact réutilisé DANS la bande II noix : fond
   transparent, filet rose de veille — plus de carte blanche isolée (VERDICT n°12). */
.vc-nature-noix{
  border-left:4px solid var(--vc-rose-veille); padding-left:16px; margin-top:20px;
  color:var(--vc-papier); font-size:var(--vc-16);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.vc-form{ display:flex; flex-direction:column; gap:16px; }
.vc-champ{ display:flex; flex-direction:column; gap:6px; }
.vc-champ label{ font-size:var(--vc-14); font-weight:600; color:var(--vc-encre); }
.vc-champ input,.vc-champ textarea,.vc-champ select{
  border:1.5px solid var(--vc-filet); background:var(--vc-papier); padding:.85em 1em;
  font-family:var(--vc-font-text); font-size:var(--vc-16); min-height:44px;
  color:var(--vc-encre);
}
.vc-champ textarea{ min-height:120px; resize:vertical; }
.vc-champ input:focus,.vc-champ textarea:focus{ border-color:var(--vc-garance); outline:none; }
.vc-champ-case{ display:flex; align-items:flex-start; gap:10px; font-size:var(--vc-14); color:var(--vc-mine); }
.vc-champ-case input{ min-height:auto; width:20px; height:20px; margin-top:2px; flex:0 0 auto; }
.vc-champ-case a{ color:var(--vc-garance-profonde); }
.vc-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.vc-form-notice{
  background:var(--vc-vert-gris); color:var(--vc-papier); padding:14px 18px; font-size:var(--vc-16);
}

.vc-contact-carte{
  background:var(--vc-papier); border:2px solid var(--vc-filet);
  padding:28px var(--vc-marge); border-radius:50% 50% 0 0 / 6% 6% 0 0;
  max-width:640px; margin-inline:auto;
}
@media (min-width:700px){ .vc-contact-carte{ padding:40px 48px; } }

/* ============================================================
   PAGE ACCUEIL — CTA outils, actualité, newsletter
   ============================================================ */
.vc-outils-grille{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (min-width:700px){ .vc-outils-grille{ grid-template-columns:repeat(4,1fr); } }
.vc-outil{
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  background:var(--vc-papier); border:2px solid var(--vc-filet); padding:20px;
  text-decoration:none; color:var(--vc-encre);
}
.vc-outil:hover{ border-color:var(--vc-garance); }

.vc-actu-grille{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:900px){ .vc-actu-grille{ grid-template-columns:1.4fr 1fr; } }
.vc-actu-brefs{ list-style:none; display:flex; flex-direction:column; gap:16px; }
.vc-actu-bref{ display:flex; gap:12px; text-decoration:none; color:inherit; }
.vc-actu-bref img{ width:88px; height:66px; object-fit:cover; flex:0 0 auto; }
.vc-actu-bref h3{ font-size:var(--vc-16); font-family:var(--vc-font-text); font-weight:700; margin:0 0 .2em; }
.vc-actu-bref time{ font-size:var(--vc-14); color:var(--vc-mine); }

.vc-newsletter{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; max-width:520px; margin-inline:auto; }
.vc-newsletter-mascotte{ width:160px; } /* VERDICT n°13 : pose Repos illisible sous 160px */
/* PASSE 2-h : ~120px de vide entre Prénom/E-mail/bouton à 390px + accroche en double
   (le H2+p du bloc VIII ET la 1ʳᵉ ligne du composant .vco-newsletter répètent la même
   promesse). Le composant appartient à theme/outils/ (autre chantier) : on corrige ICI,
   en style.css, sans y toucher. */
.vc-newsletter form{ display:grid; gap:12px; align-content:start; grid-auto-rows:auto; width:100%; }
.vc-newsletter .vco-newsletter__accroche{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.vc-footer{ background:var(--vc-encre); color:var(--vc-papier); padding-block:56px 28px; }
.vc-footer a{ color:var(--vc-papier); text-decoration:none; }
.vc-footer a:hover{ color:var(--vc-rose-veille); }
.vc-footer-grille{ display:grid; gap:36px; grid-template-columns:1fr; margin-bottom:36px; }
@media (min-width:700px){ .vc-footer-grille{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.vc-footer h2{ font-size:var(--vc-16); text-transform:uppercase; letter-spacing:.08em; color:var(--vc-rose-veille); margin-bottom:1em; font-family:var(--vc-font-text); font-weight:700; }
.vc-footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.vc-footer-marque{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.vc-footer-marque .vc-logo-mot{ color:var(--vc-papier); }
.vc-footer-marque .vc-logo-mot .vc-logo-v::before{ background:var(--vc-rose-veille); }
.vc-footer-desc{ color:var(--vc-chair); font-size:var(--vc-16); max-width:38ch; }
.vc-footer-mascotte{ width:96px; margin-top:12px; }
.vc-footer-ecoute{
  border:1px solid var(--vc-rose-veille); padding:18px; font-size:var(--vc-14);
  margin-top:16px; max-width:38ch;
}
.vc-footer-ecoute strong{ display:block; color:var(--vc-rose-veille); margin-bottom:.3em; }
.vc-footer-bas{
  border-top:1px solid rgba(240,169,180,.3); padding-top:20px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:var(--vc-14); color:var(--vc-chair);
}

/* ============================================================
   404
   ============================================================ */
.vc-404{ text-align:center; padding-block:64px; }
.vc-404-mascotte{ width:180px; margin-inline:auto 24px; }
.vc-404-cartes{ display:grid; gap:16px; grid-template-columns:1fr; max-width:760px; margin:32px auto 0; }
@media (min-width:700px){ .vc-404-cartes{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   RUBRIQUE / ARCHIVE
   ============================================================ */
.vc-rubrique-tete{ padding-block:40px 32px; }
.vc-rubrique-liste{ display:grid; gap:28px; grid-template-columns:1fr; padding-block:0 48px; }
@media (min-width:640px){ .vc-rubrique-liste{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .vc-rubrique-liste{ grid-template-columns:repeat(3,1fr); } }
.vc-rubrique-couvre{ background:var(--vc-chair); padding:0; }
.vc-rubrique-couvre details{ padding:20px var(--vc-marge); }
.vc-rubrique-couvre summary{ cursor:pointer; font-family:var(--vc-font-display); font-size:var(--vc-24); list-style:none; display:flex; justify-content:space-between; }
.vc-rubrique-couvre summary::-webkit-details-marker{ display:none; }
.vc-rubrique-couvre summary::after{ content:"+"; color:var(--vc-garance); }
.vc-rubrique-couvre details[open] summary::after{ content:"–"; }
.vc-rubrique-bientot{ text-align:center; padding:64px var(--vc-marge); color:var(--vc-mine); }

/* ============================================================
   PAGE AUTEUR
   ============================================================ */
.vc-auteur-entete{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; padding-block:40px 32px; }
.vc-auteur-entete img{ width:110px; height:110px; border-radius:50%; object-fit:cover; border:3px solid var(--vc-garance); }
.vc-auteur-entete .vc-auteur-role{ margin-top:.4em; }

/* ============================================================
   POP-UP DE SORTIE
   ============================================================ */
#sb-popup-fond{
  position:fixed; inset:0; top:0; bottom:0; z-index:100;
  background:rgba(42,31,29,.72);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
#sb-popup-fond.is-visible{ display:flex; }
#sb-popup-carte{
  position:relative; background:var(--vc-papier); max-width:760px; width:100%;
  display:grid; grid-template-columns:1fr; max-height:92vh; overflow:auto;
  border:2px solid var(--vc-garance);
}
@media (min-width:700px){ #sb-popup-carte{ grid-template-columns:1fr 1fr; max-height:80vh; } }
.vc-popup-visuel{ background:var(--vc-chair); display:flex; align-items:center; justify-content:center; padding:24px; }
.vc-popup-visuel img{ width:140px; }
@media (min-width:700px){ .vc-popup-visuel img{ width:180px; } }
.vc-popup-corps{ padding:28px 24px; }
.vc-popup-fermer{
  position:absolute; top:10px; right:10px; z-index:5;
  width:40px; height:40px; border-radius:50%; border:2px solid var(--vc-encre);
  background:var(--vc-papier); font-size:1.3rem; line-height:1; cursor:pointer;
}

/* ============================================================
   BANDEAU COOKIES
   ============================================================ */
#vc-cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  background:var(--vc-encre); color:var(--vc-papier);
  padding:16px; display:none; gap:12px; align-items:center; flex-wrap:wrap;
  max-width:720px; margin-inline:auto; border:1px solid var(--vc-rose-veille);
  max-height:150px; overflow:auto;
}
#vc-cookies.is-visible{ display:flex; }
#vc-cookies p{ margin:0; flex:1 1 240px; font-size:var(--vc-14); line-height:1.4; }
#vc-cookies a{ color:var(--vc-rose-veille); }
.vc-cookies-actions{ display:flex; gap:10px; flex-wrap:nowrap; }
.vc-cookies-actions .vc-btn{ flex:1 1 auto; white-space:nowrap; }
/* GRILLE 22/09 n°1 (GD-009) : #vc-cookies a un fond --vc-encre ; .vc-btn--fantome par
   défaut écrit en --vc-encre sur transparent → texte encre sur fond encre = 1:1,
   totalement invisible. Ici, papier sur transparent (fond réel = encre) = 15,25:1. */
#vc-cookies .vc-btn--fantome{ color:var(--vc-papier); border-color:var(--vc-rose-veille); }
#vc-cookies .vc-btn--fantome:hover,#vc-cookies .vc-btn--fantome:focus-visible{ background:var(--vc-rose-veille); color:var(--vc-encre); border-color:var(--vc-rose-veille); }
@media (max-width:480px){
  /* VERDICT n°7 : bandeau qui masquait les tuiles du quiz du hero à 390px. */
  #vc-cookies{ left:10px; right:10px; bottom:10px; padding:14px; font-size:13px; }
  #vc-cookies p{ font-size:13px; flex-basis:100%; }
  .vc-cookies-actions{ width:100%; }
}

/* ============================================================
   NEUTRALISATION DÉFENSIVE — mu-plugin sb-auteur-bloc (doublon possible du
   bloc auteur unique .vc-auteur). Code source du mu-plugin non accessible
   depuis ce chantier (pas d'accès serveur pour le designer, P-407) : on
   masque son conteneur probable par défaut, sans risque pour .vc-auteur qui
   porte un nom distinct. Voir functions.php pour la tentative remove_filter.
   ============================================================ */
/* VERDICT n°5 : la vraie classe posée en ligne par le mu-plugin est .sb-auteur-fin
   (relevée dans le HTML publié), pas #sb-auteur-bloc/.sb-auteur-bloc. On garde les
   deux anciens sélecteurs par sécurité et on ajoute le bon. */
#sb-auteur-bloc,.sb-auteur-bloc,.sb-auteur-fin{ display:none !important; }

/* ============================================================
   UTILITAIRES
   ============================================================ */
.vc-visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.vc-skip{
  position:absolute; left:-9999px; top:0; background:var(--vc-garance); color:var(--vc-papier);
  padding:12px 18px; z-index:200;
}
.vc-skip:focus{ left:16px; top:16px; }

/* ── Images de corps d'article (ajout orchestrateur 22/09) : cadre « carte » discret, légende photographe ── */
.vc-corps figure, .vc-corps .vc-figure{ margin:var(--vc-32) 0; }
.vc-corps figure img{ width:100%; height:auto; border:1px solid var(--vc-filet); outline:1px solid var(--vc-filet); outline-offset:5px; } /* VERDICT n°19 : box-shadow (ombre molle) retiré, DA §11.6 */
.vc-corps figcaption{ margin-top:var(--vc-14); font-size:var(--vc-14); color:var(--vc-mine); font-style:italic; }

/* 22/09 : numéro de section décoratif rendu en ornement (pas un texte) */
.vc-section-numero::before{ content:attr(data-n); }

/* PASSE 3-R2 : sous 600px les champs empilés en colonne, la base flex devenait une hauteur */
@media (max-width:600px){ .vc-newsletter .vco-newsletter__ligne > *{ flex:0 0 auto; } }
/* PASSE 3-R3 : « Les guides » — grande carte en 21:9 face à 5 brèves, colonnes à même hauteur,
   et plus la même silhouette que la bande Actualité juste en dessous */
.vc-guides-grille .vc-arche--paysage,.vc-guides-grille .vc-arche-media{ aspect-ratio:21/9; }
.vc-guides-grille .vc-arche-media img{ width:100%; height:100%; object-fit:cover; }
.vc-guides-grille{ align-items:start; }