/* ============================================================
   theme-v21.css — socle typographique et visuel de mybaby.ma
   Chargé APRÈS style.css sur toutes les pages.

   Rôle : porter les décisions arrêtées en v13→v21 pour que les
   40 pages en héritent sans duplication.
     · Newsreader (titres) + Figtree (texte) ; plus aucune mono
     · une seule règle d'accent : le saumon ne dit que « prix » ou « action »
     · surfaces de panneau unifiées (fond, bord 1px, rayon 14)
     · couleurs de liens définies, y compris au survol
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Figtree:wght@400;500;600;700;800&display=swap');

:root{
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* La mono disparaît du vocabulaire : les micro-libellés passent en
     Figtree 600 espacé. La variable reste définie pour ne casser aucune
     règle héritée qui la référencerait encore. */
  --font-mono:var(--font-body);
}

body{font-family:var(--font-body);text-wrap:pretty}

h1,h2,h3,h4,.h-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.14}
h1{letter-spacing:-.028em}

/* Newsreader porte moins haut que Fraunces : l'interligne se resserre. */
h1,h2{line-height:1.1}

/* Micro-libellés : l'ancien motif « eyebrow en mono » devient un
   Figtree 600 espacé. Sans chasse fixe, moins d'espacement suffit. */
.v7-mono,.mono,.eyebrow,.v11-eye,.v14-proof .hd b{
  font-family:var(--font-body);font-weight:600;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;
}

/* Les prix sont des nombres à comparer : chiffres tabulaires partout,
   pour qu'ils s'alignent colonne par colonne dans une grille. */
.price,.v7-cprice,.v14-row .p,.v19-bar u,[data-price]{font-variant-numeric:tabular-nums}

/* Liens : définis explicitement pour que les liens ajoutés plus tard
   dans l'éditeur ne tombent jamais sur le bleu par défaut du navigateur. */
a{color:var(--coral-d,#C4614A);text-decoration-color:color-mix(in oklch,currentColor 35%,transparent);text-underline-offset:2px}
a:hover{color:var(--coral,#E07B65)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--coral,#E07B65);outline-offset:2px;border-radius:4px;
}

/* Surface unique : tout panneau du site est la même matière. */
.panel,.v7-panel{background:#fff;border:1px solid var(--b,#E8E1DD);border-radius:14px}

/* En-tête partagé (chrome.js) : le logo est l'image elle-même, pas un
   conteneur — la règle historique `.tb-logo-img img` ne l'atteignait pas,
   d'où une image affichée à sa taille intrinsèque. */
img.tb-logo-img{height:46px;width:auto;max-width:190px;object-fit:contain;display:block;margin-right:26px}
@media(max-width:900px){img.tb-logo-img{height:38px;max-width:150px;margin-right:14px}}

/* ---- Accessibilité ----
   Lien d'évitement : la première tabulation propose d'aller au contenu,
   au lieu de traverser l'en-tête à chaque page. */
.mb-skip{position:absolute;left:12px;top:-60px;z-index:10060;padding:11px 18px;background:var(--ink,#1C1C1C);color:#fff;border-radius:999px;font-family:var(--font-body);font-size:14px;font-weight:600;text-decoration:none;transition:top .18s}
.mb-skip:focus{top:12px;color:#fff}

/* Les gris les plus clairs ne passaient pas le contraste sur fond sable :
   on les remonte, sans changer la hiérarchie visuelle. */
:root{--soft:#7D726D}

/* ------------------------------------------------------------------
   Alias des anciens noms de jetons.
   Les feuilles héritées appellent --font-d, --sh et --sh3 : ces noms
   venaient des thèmes inline d'avant l'unification et n'ont jamais
   été définis ici. Un var() sans repli ne « retombe » pas sur une
   valeur par défaut, il annule la propriété — la typographie et les
   ombres disparaissaient donc sans erreur. On les fait pointer sur
   les jetons réels plutôt que de les traquer règle par règle.
   ------------------------------------------------------------------ */
:root{
  --font-d:var(--font-display);
  --font-b:var(--font-body);
  --sh:0 4px 16px rgba(28,28,28,.08);
  --sh3:0 1px 3px rgba(28,28,28,.05);
}

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

/* La barre de comparaison passe devant les pastilles flottantes (z 9998/9999),
   sinon son bouton « Comparer » est incliquable ; et les pastilles s'effacent
   tant qu'elle est ouverte. Valable sur toutes les pages du catalogue. */
#compare-bar.compare-bar-sticky{z-index:10040!important}
body:has(#compare-bar.visible) .sig-wa-fab,
body:has(#compare-bar.visible) .sig-ai-fab{display:none!important}