/* ═══════════════════════════════════════════════════════════════
   BASE - règles globales du thème validé, toutes pages
   Chargée après fonts.css et tokens.css, avant header/footer/pages et
   les feuilles de section. Ne contient que ce qui vaut PARTOUT.
   ═══════════════════════════════════════════════════════════════ */

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Le parent posait Roboto sur un beige (#faf8f4). La maquette est en
   Schibsted Grotesk sur #f5f4f1. */
body.vf{
  margin:0;
  background:var(--page);
  color:var(--texte);
  font-family:var(--font-ui);
  font-size:var(--fs-corps);
  line-height:1.75;
}

/* Instrument Sans possède un axe de chasse (wdth) : la maquette l'utilise
   toujours à 100. On le fixe une fois pour toutes sur les titres. */
body.vf h1,
body.vf h2,
body.vf h3,
body.vf h4{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  font-stretch:100%;
  margin-top:0;
}

/* Aucun arrondi nulle part dans la maquette : on neutralise ceux que le
   parent posait sur ses boutons, champs et cartes. */
body.vf .btn,
body.vf button,
body.vf input,
body.vf textarea,
body.vf select{border-radius:var(--radius)}

/* Liens : encre, pas de teal (le parent en avait). */
body.vf a{color:inherit}

/* Le conteneur de contenu de la maquette : 1296px centrés, gouttière du
   parent (72 → 40 → 24 selon le palier). Chaque section l'utilise. */
.vf-shell{
  width:100%;
  max-width:calc(var(--contenu) + 2 * var(--gut));
  margin-inline:auto;
  padding-inline:var(--gut);
  box-sizing:border-box;
}

/* Titres de section (Instrument Sans) : la graisse et la chasse viennent
   des tokens, la taille est posée par chaque section. */
.vf-titre{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100;
  color:var(--ink-fort);
  margin:0;
  line-height:1.15;
}

/* Le bouton WhatsApp flottant et le retour en haut viennent du parent
   (bleu --wa). La maquette n'a pas de bleu : on les passe à l'encre. */
/* Les deux boutons flottants forment une paire : même diamètre (48px,
   celui du retour en haut du parent), même disque encre, même anneau
   clair, même ombre, même ligne de base. Le parent faisait la pastille
   WhatsApp plus petite (42px) parce qu'un disque plein « pèse » plus
   qu'un anneau ; le retour en haut étant devenu un disque plein lui
   aussi, l'argument tombe (retour d'Emmanuel du 09/09). Le survol
   du parent posait une ombre teintée de bleu : remplacée. La pilule
   continue de s'étirer vers la gauche pour révéler « Prendre
   rendez-vous » au survol. */
body.vf .wa-flottant{bottom:28px}
body.vf .wa-flottant__lien{
  height:48px;
  border-radius:24px;
  background:var(--ink-fort);
  color:var(--page);
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(245,244,241,.12);
}
body.vf .wa-flottant__lien:hover,
body.vf .wa-flottant__lien:focus-visible{
  background:#000;
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(245,244,241,.16);
}
body.vf .wa-flottant__icone{flex:0 0 48px;width:48px;height:48px}
body.vf .wa-flottant__icone svg{color:var(--page)}

/* Retour en haut : disque sombre, flèche et jauge claires, comme le
   bouton WhatsApp voisin. Il est fixé et survole aussi bien le marbre
   que les blocs sombres : avec une flèche encre sans fond (première
   version), il disparaissait sur le noir (retour d'Emmanuel du 09/09).
   La jauge de défilement, bleue chez le parent, passe en crème. */
body.vf .haut{
  color:var(--page);
  background:var(--ink-fort);
  border:0;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(245,244,241,.12);
}
body.vf .haut:hover,
body.vf .haut:focus-visible{background:#000}
body.vf .haut__piste{stroke:rgba(245,244,241,.22)}
body.vf .haut__jauge{stroke:var(--page)}
body.vf .haut__fleche{stroke:var(--page);fill:none}

/* Accessibilité : anneau de focus visible, cohérent avec l'encre. */
body.vf :focus-visible{outline:2px solid var(--ink-fort);outline-offset:3px}

/* Réduction des animations pour qui le demande. */
@media (prefers-reduced-motion:reduce){
  body.vf *,
  body.vf *::before,
  body.vf *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ── Lien d'évitement (WCAG 2.4.1, contournement de blocs) ─────────────
   Le gabarit posait 12 arrêts de tabulation avant le contenu (5 liens de
   nav, 5 entrées du sous-menu Thérapies, la langue, le bouton
   Rendez-vous), sur CHAQUE page. Ce lien est injecté par functions.php
   sur wp_body_open, il est donc le premier enfant de <body> et le
   premier arrêt de tabulation du document.

   Masquage par clip et non par display:none / visibility:hidden : ces
   deux propriétés sortent l'élément de l'ordre de tabulation, il ne
   pourrait jamais recevoir le focus. La technique du rectangle de 1px
   avec clip-path le garde focusable tout en le retirant visuellement.
   width/height à 1px (et non 0) : un élément de dimension nulle est
   ignoré par certains lecteurs d'écran. */
body.vf .vf-evitement{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Au focus clavier, le lien reprend sa place : position fixe en haut à
   gauche pour qu'il soit visible quel que soit le défilement, au-dessus
   de la nav rappelée (.header.is-scrolled du parent, z-index 100).
   :focus-visible seul ne suffit pas : un clic souris sur le lien pose un
   focus « non visible » et l'utilisateur perdrait le lien qu'il vient
   d'actionner. On cible donc aussi :focus. */
body.vf .vf-evitement:focus,
body.vf .vf-evitement:focus-visible{
  position:fixed;
  top:12px;left:12px;
  z-index:1000;
  width:auto;height:auto;
  margin:0;
  padding:12px 20px;
  overflow:visible;
  clip-path:none;
  background:var(--page);
  color:var(--ink-fort);
  border:1px solid var(--ink-fort);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:500;
  letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;
  text-decoration:none;
}

/* Cible du lien. tabindex="-1" (posé par functions.php) rend <main>
   focusable au programme, sans quoi le focus resterait sur la nav après
   le saut. L'anneau de focus de base.css s'appliquerait alors à toute la
   hauteur du contenu : on le neutralise ici, le déplacement du focus
   étant déjà signalé par le défilement. */
body.vf #vf-contenu:focus,
body.vf #vf-contenu:focus-visible{outline:none}

/* scroll-margin : la nav rappelée (position fixe, 109px) recouvrirait le
   haut du contenu après le saut. On réserve sa hauteur. */
body.vf #vf-contenu{scroll-margin-top:var(--nav-h,110px)}