/* =============================================================================
   BLOOMINGYOU — DESIGN SYSTEM v1
   02 · CONVERGENCE
   -----------------------------------------------------------------------------
   WPCode : type CSS · Emplacement « Pied de page du site »
            · PRIORITÉ 99  → se charge après 49806 / 49808 / 49809 (priorité 10)
   Ce fichier est du CSS pur, sans balise style. WPCode ajoute la balise.

   Les !important présents ici sont EXCLUSIVEMENT ceux nécessaires pour battre
   deux sources non modifiables ou non encore nettoyées :
     · wp-content/themes/bloomingyou3/style.css  (éditeur de fichiers désactivé)
     · extrait WPCode 49875 « Convergence maquettes v3.7 » (164 !important)
   Chaque bloc concerné est marqué SRC:49875 ou SRC:THEME.
   Ils disparaîtront quand ces deux sources seront nettoyées.

   Sélecteurs vérifiés sur le DOM réel le 19/08/2026, pas supposés.
   Structure de carte réelle :
     a.a-post-v2 > div.wrap-grid-post-v2 > picture|img
                                        > div.wrap-content-grid-post-v2
                                          > div.content-grid-post-v2
                                            > p.p-category-post
                                            > h2                (titre de carte)
                                            > div.info-featured (métadonnée)
   ============================================================================= */


/* ============================================================ 00 · TOKENS ===
   Quatre extraits actifs redéfinissent --by-jaune avec trois valeurs.
   Cette couche, chargée en dernier, impose la valeur canonique.
   =========================================================================== */
:root{
  --by-jaune:#FFD201; --by-jaune-fonce:#E6BD01;
  --by-encre:#111111; --by-noir:#111111;
  --by-creme:#FAF7EC; --by-filet:#E0DCCB;
  --by-gris:#6D6A62;  --by-gris-clair:#9B968A;
  --by-rayon-sm:0; --by-rayon-md:0; --by-rayon-lg:0; --by-r:0; --by-radius:0;
}


/* ================================================ 01 · P0 CONTRASTE ========
   Deux boutons mesurés à 1,45:1 et 1,47:1. Seuil normatif 4,5:1.
   Avec l'encre : 13,0:1.
   =========================================================================== */

/* SRC:THEME — .submit-nl-footer{background:#fed035!important} dans style.css */
html body .submit-nl-footer,
html body input[type="submit"].submit-nl-footer{
  background:var(--by-jaune)!important; color:var(--by-encre)!important;
  height:var(--by-btn-h-md)!important; border:0!important; border-radius:var(--by-rayon-0)!important;
  font-family:var(--by-font-titre); font-size:var(--by-fs-cta); font-weight:700;
  letter-spacing:var(--by-ls-cta); text-transform:uppercase;
  padding:0 var(--by-btn-px-md)!important; transition:background var(--by-t);
}
html body .submit-nl-footer:hover{
  background:var(--by-jaune-fonce)!important; color:var(--by-encre)!important; opacity:1!important;
}
html body .input-nl-footer,
html body .input-nl-footer.s2{
  height:var(--by-btn-h-md); border:var(--by-filet-1) solid var(--by-filet); border-radius:var(--by-rayon-0);
  padding:0 var(--by-esp-4); font-family:var(--by-font-corps);
  font-size:var(--by-fs-small); color:var(--by-encre);
}


/* ==================================================== 02 · BOUTONS =========
   14 hauteurs → 3. 4 rayons → 1. Texte sur jaune toujours en encre.

   ATTENTION, vérifié sur le DOM : .view-more-button est un CONTENEUR de
   mise en page, pas un bouton. Le bouton réel est le a.eltd-btn qu'il
   enveloppe. Le styler comme un bouton peint un aplat derrière le vrai
   bouton (régression constatée puis corrigée en LOOP 01).
   =========================================================================== */

html body .view-more-button,
html body .center-button,
html body .big-button{
  background:transparent!important; color:inherit!important;
  height:auto!important; min-height:0!important; padding:0!important;
  border:0!important; border-radius:var(--by-rayon-0)!important; display:inline-block!important;
}

/* SRC:49875 + SRC:THEME — le système eltd- impose tout en !important */
html body .eltd-btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  height:var(--by-btn-h-md)!important; min-height:var(--by-btn-h-md)!important;
  padding:0 var(--by-btn-px-md)!important; border-radius:var(--by-rayon-0)!important;
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-cta)!important;
  line-height:var(--by-lh-cta)!important; font-weight:700!important;
  letter-spacing:var(--by-ls-cta)!important; text-transform:uppercase!important;
  transition:background-color var(--by-t),color var(--by-t);
}
/* PRIMARY */
html body .eltd-btn.eltd-btn-solid{ background-color:var(--by-jaune)!important; border:0!important; }
html body .eltd-btn.eltd-btn-solid,
html body .eltd-btn.eltd-btn-solid .eltd-btn-text{ color:var(--by-encre)!important; }
html body .eltd-btn.eltd-btn-solid:hover{ background-color:var(--by-jaune-fonce)!important; }
/* TERTIARY */
html body .eltd-btn:not(.eltd-btn-solid){ background:transparent!important; border:var(--by-filet-2) solid var(--by-encre)!important; }
html body .eltd-btn:not(.eltd-btn-solid),
html body .eltd-btn:not(.eltd-btn-solid) .eltd-btn-text{ color:var(--by-encre)!important; }
/* l'effet « détaché » du thème acheté n'a pas sa place dans la grammaire */
html body .eltd-detached-effect{ display:none!important; }

/* boutons natifs BloomingYou */
html body .btn, html body .btn-primary, html body .cta,
html body .byt-btn, html body .byt-btn2, html body .mobile-menu-cta,
html body .a-btn-view-wishlist,
html body .woocommerce a.button, html body .woocommerce button.button,
html body .woocommerce input.button{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--by-btn-h-md); min-height:var(--by-btn-h-md);
  padding:0 var(--by-btn-px-md); border-radius:var(--by-rayon-0);
  font-family:var(--by-font-titre); font-size:var(--by-fs-cta); line-height:var(--by-lh-cta);
  font-weight:700; letter-spacing:var(--by-ls-cta); text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background var(--by-t),color var(--by-t),border-color var(--by-t),transform var(--by-t);
}
html body .btn-primary, html body .byt-btn, html body .mobile-menu-cta,
html body .woocommerce a.button.alt, html body .woocommerce button.button.alt{
  background:var(--by-jaune); color:var(--by-encre); border:0;
}
html body .btn-primary:hover, html body .byt-btn:hover, html body .mobile-menu-cta:hover{
  background:var(--by-jaune-fonce); color:var(--by-encre);
}
html body .cta,
html body .woocommerce a.button, html body .woocommerce button.button{
  background:var(--by-encre); color:var(--by-blanc); border:0;
}
html body .cta:hover{ background:var(--by-encre-clair); color:var(--by-blanc); }
html body .byt-btn2, html body .a-btn-view-wishlist{
  background:transparent; color:var(--by-encre); border:var(--by-filet-2) solid var(--by-encre);
}
html body .byt-btn2:hover, html body .a-btn-view-wishlist:hover{ background:var(--by-creme); }

/* TEXT LINK */
html body .byt-clamp-toggle, html body .by-textlink{
  display:inline; height:auto; min-height:0; padding:0; background:none; border:0;
  color:var(--by-encre); font-family:var(--by-font-titre); font-size:var(--by-fs-corps);
  text-transform:none; letter-spacing:normal; box-shadow:inset 0 -2px 0 var(--by-jaune);
}

/* ICON BUTTON */
html body .share-button, html body .favorite-button, html body .simplefavorite-button,
html body .search-submit-btn, html body .eltd-search-submit, html body .by-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--by-btn-h-sm); height:var(--by-btn-h-sm); min-height:0; padding:0;
  border-radius:var(--by-rayon-0); background:transparent; border:0; color:var(--by-encre);
}

/* ÉTATS — obligatoires */
html body a:focus-visible, html body button:focus-visible,
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible{
  outline:2px solid var(--by-focus); outline-offset:2px;
}
html body .btn:active, html body .btn-primary:active, html body .cta:active,
html body .byt-btn:active, html body .byt-btn2:active, html body .eltd-btn:active,
html body .mobile-menu-cta:active{ transform:translateY(1px); }
html body button[disabled], html body .btn[disabled], html body .is-disabled{
  background:var(--by-filet); color:var(--by-gris-clair); border-color:var(--by-filet);
  cursor:not-allowed; transform:none; pointer-events:none;
}


/* ====================================================== 03 · CARTES =======
   14 modèles → 1 composant canonique.
   SRC:49875 impose la typographie de carte en !important.
   =========================================================================== */

html body .a-post-v2, html body .wrap-grid-post-v2,
html body .sc, html body .byi-carte{
  background:var(--by-blanc); border-radius:var(--by-rayon-0); box-shadow:none;
}

/* image : ratio éditorial unique */
html body .wrap-grid-post-v2 img,
html body .wrap-grid-post-v2 picture img,
html body .by-card-img img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--by-rayon-0);
}
html body .by-expert-portrait img, html body .byt-avatar img{ aspect-ratio:1/1; object-fit:cover; }

/* sur-titre catégorie : Space Mono, jaune canonique, 2px */
html body p.p-category-post,
html body .content-grid-post-v2 p.p-category-post{
  font-family:var(--by-font-label)!important; font-weight:400!important;
  font-size:var(--by-fs-label)!important; line-height:var(--by-lh-label)!important;
  letter-spacing:var(--by-ls-label)!important; text-transform:uppercase!important;
  color:var(--by-encre)!important; box-shadow:inset 0 -2px 0 var(--by-jaune)!important;
  margin:0 0 var(--by-esp-2)!important; display:inline-block;
}

/* titre de carte : une seule définition pour tous les gabarits */
html body .content-grid-post-v2 h2,
html body .wrap-content-grid-post-v2 h2{
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-h4)!important;
  line-height:var(--by-lh-h4)!important; font-weight:700!important;
  letter-spacing:normal!important; text-transform:none!important;
  color:var(--by-encre)!important; margin:0 0 var(--by-esp-2)!important;
}

/* métadonnée */
html body .content-grid-post-v2 .info-featured,
html body .info-featured{
  font-family:var(--by-font-label); font-size:12px; line-height:18px; color:var(--by-gris);
}

/* CHIP */
html body .byv3-chip, html body .by-chip, html body .byt-chip{
  display:inline-flex; align-items:center; gap:var(--by-esp-2);
  padding:var(--by-esp-2) var(--by-esp-3);
  border:var(--by-filet-1) solid var(--by-filet); border-radius:var(--by-rayon-pilule); background:var(--by-blanc);
  font-family:var(--by-font-label); font-size:var(--by-fs-label);
  letter-spacing:var(--by-ls-label); text-transform:uppercase;
  color:var(--by-encre); text-decoration:none;
}
html body .byv3-chip:hover, html body .by-chip:hover{ background:var(--by-jaune); border-color:var(--by-jaune); }

/* LIST ROW */
html body .by-list-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--by-esp-4);
  padding:var(--by-esp-4) 0; border-bottom:var(--by-filet-1) solid var(--by-filet);
  font-family:var(--by-font-titre); font-size:var(--by-fs-corps);
  color:var(--by-encre); text-decoration:none;
}

/* aucune ombre nulle part */
html body .sc, html body .byi-carte, html body .wrap-grid-post-v2,
html body .a-post-v2, html body .wrap-block-promo-abonnement,
html body .wrap-left-main{ box-shadow:none; }


/* ================================================ 04 · TYPOGRAPHIE ========
   11 configurations de H1 → 1.
   SRC:49875 impose h1.h3-page{font-size:clamp(1.8rem,3.5vw,2.8rem)!important}
   =========================================================================== */
html body h1.h3-page, html body .h3-page,
html body h1.title-page, html body h2.title-page, html body h3.title-page,
html body .h1-title-post, html body .byp-h1, html body h1.entry-title{
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-h1)!important;
  line-height:var(--by-lh-h1)!important; font-weight:700!important;
  letter-spacing:-.005em!important; text-transform:none!important;
  margin:0 0 var(--by-esp-5)!important;
}
/* La couleur du titre n'est PAS forcée ici : .h1-title-post vit dans un
   slick-slider par-dessus une photo, il y est blanc. Forcer l'encre cassait
   le contraste sur chaque article (constaté puis corrigé à l'activation).
   L'encre n'est imposée que sur les titres de page, qui sont sur fond clair. */
html body h1.h3-page, html body .h3-page{ color:var(--by-encre)!important; }
/* le « H1 » de l'accueil est un sur-titre : il redevient un libellé */
html body .h1-home{
  font-family:var(--by-font-label)!important; font-size:var(--by-fs-label)!important;
  line-height:var(--by-lh-label)!important; letter-spacing:var(--by-ls-label)!important;
  text-transform:uppercase!important; color:var(--by-gris)!important;
  font-weight:400!important; margin:0 0 var(--by-esp-3)!important;
}
/* en-tête de section : un seul style */
html body .byv3-sec-title, html body .mobile-menu-section-title, html body .byt-sec-title{
  font-family:var(--by-font-label); font-size:var(--by-fs-label); line-height:var(--by-lh-label);
  font-weight:400; letter-spacing:var(--by-ls-label); text-transform:uppercase;
  color:var(--by-gris); margin:var(--by-esp-7) 0 var(--by-esp-4);
}
/* corps éditorial */
html body .entry-content p, html body .entry-content li{
  font-family:var(--by-font-corps); font-size:var(--by-fs-corps); line-height:var(--by-lh-corps);
}
html body .entry-content h2{ font-size:var(--by-fs-h2); line-height:var(--by-lh-h2); font-weight:700; text-transform:none; margin:var(--by-esp-7) 0 var(--by-esp-4); }
html body .entry-content h3{ font-size:var(--by-fs-h3); line-height:var(--by-lh-h3); font-weight:700; text-transform:none; letter-spacing:normal; margin:var(--by-esp-6) 0 var(--by-esp-3); }
html body .entry-content h4{ font-size:var(--by-fs-h4); line-height:var(--by-lh-h4); font-weight:500; text-transform:none; letter-spacing:normal; margin:var(--by-esp-5) 0 var(--by-esp-2); }


/* ================================================== 05 · FORMULAIRES ======
   3 champs de recherche de 3 hauteurs → 1.
   =========================================================================== */
html body input[type="text"], html body input[type="email"],
html body input[type="search"], html body input[type="tel"],
html body input[type="password"], html body select,
html body .eltd-search-field{
  height:var(--by-btn-h-md); border:var(--by-filet-1) solid var(--by-filet); border-radius:var(--by-rayon-0);
  background:var(--by-blanc); padding:0 var(--by-esp-4);
  font-family:var(--by-font-corps); font-size:var(--by-fs-corps); color:var(--by-encre);
}
html body textarea{
  border:var(--by-filet-1) solid var(--by-filet); border-radius:var(--by-rayon-0); padding:var(--by-esp-4);
  font-family:var(--by-font-corps); font-size:var(--by-fs-corps); line-height:var(--by-lh-corps);
}
html body input[aria-invalid="true"], html body .woocommerce-invalid input{
  border:var(--by-filet-2) solid var(--by-erreur);
}


/* ====================================================== 06 · BURGER =======
   Panneau 340px sans voile ni bordure, deux styles de titre de section.
   =========================================================================== */
html body .wrap-left-main{
  background:var(--by-blanc); border-right:var(--by-filet-2) solid var(--by-encre); box-shadow:none;
}
@media (min-width:768px){
  html body .wrap-left-main{ width:420px; max-width:420px; }
}
html body .wrap-left-main .mobile-menu-section-title,
html body .wrap-left-main .byv3-sec-title{
  font-family:var(--by-font-label); font-size:var(--by-fs-label); line-height:var(--by-lh-label);
  font-weight:400; letter-spacing:var(--by-ls-label); text-transform:uppercase;
  color:var(--by-gris); margin:var(--by-esp-7) 0 var(--by-esp-4);
}
html body .wrap-left-main .mobile-menu-section:first-child .mobile-menu-section-title,
html body .wrap-left-main .mobile-menu-section:first-child .byv3-sec-title{ margin-top:0; }
html body .wrap-left-main .mobile-menu-nav a:not(.byv3-chip):not(.by-chip):not(.mobile-menu-cta){
  display:flex; align-items:center; min-height:48px;
  font-family:var(--by-font-titre); font-size:var(--by-fs-corps); line-height:24px;
  font-weight:700; text-transform:none; letter-spacing:normal;
  color:var(--by-encre); text-decoration:none; border-bottom:var(--by-filet-1) solid var(--by-filet);
}
html body .wrap-left-main .mobile-menu-nav a:hover{ background:var(--by-creme); }
html body .wrap-left-main .mobile-menu-cta{ width:100%; height:var(--by-btn-h-lg); margin-top:var(--by-esp-6); }


/* ======================================== 07 · BANDE NEWSLETTER HÉRITÉE ===
   Présente sur toutes les pages sauf l'accueil, avant le pied de page v3.
   =========================================================================== */
html body .wrap-newsletter{
  background:var(--by-creme); padding:var(--by-esp-7) 0; border-top:var(--by-filet-1) solid var(--by-filet);
}
html body .wrap-form-nl-footer{
  display:flex; align-items:center; gap:var(--by-esp-4);
  max-width:var(--by-conteneur); margin-inline:auto; padding-inline:var(--by-marge);
}
html body .wrap-form-nl-footer .wrap-form-nl{ display:flex; gap:var(--by-esp-3); flex:1; }
@media (max-width:767px){
  html body .wrap-form-nl-footer{ flex-direction:column; align-items:stretch; }
  html body .submit-nl-footer{ width:100%; float:none!important; }
}


/* ===================== 08 · MOBILE — vérifié à 390 px =====================
   Banc de test : iframe de 390 px de large sur la production, les media
   queries s'évaluent réellement au palier mobile.

   Gains mesurés (cibles tactiles sous 44 px) :
     /conferences/  63 → 5
     /mon-compte/   58 → 1

   Ne contient QUE des règles dont le gain est mesuré.
   Les marges mobiles (20 / 37 / 38 / 39 / 54 px relevées sur une même page)
   sont volontairement NON traitées ici : deux tentatives de correction ont
   déplacé des blocs dans le mauvais sens (double padding). À traiter avec
   revue visuelle, pas au jugé.
   ========================================================================= */
@media (max-width:767px){

  /* cibles tactiles : 44 px minimum */
  html body .footer-nav a,
  html body .footer-column a,
  html body .footer-container a,
  html body .mobile-menu-nav a,
  html body .link-cookies,
  html body .mobile-menu-login{
    min-height:44px!important; display:flex!important; align-items:center!important;
  }
  html body .byv3-chip, html body .by-chip, html body .byt-chip{
    min-height:44px!important; padding-block:0!important;
  }
  html body .a-main-btn{
    min-height:44px!important; display:inline-flex!important; align-items:center!important;
  }
  html body .footer-social-link, html body .mobile-menu-social a{
    width:44px!important; height:44px!important;
  }
  html body .byt-clamp-toggle{
    min-height:44px!important; display:inline-flex!important; align-items:center!important;
  }

  /* barre de recherche du héros : pilule 60 px → angle vif */
  html body .by-hero-search,
  html body .by-hero-search input,
  html body .by-hero-search button{ border-radius:var(--by-rayon-0)!important; }

  /* le burger occupe tout l'écran sous 768 */
  html body .wrap-left-main{ width:100%!important; max-width:100%!important; }
}


/* ============================================ 09 · DÉFAUTS D'ÉLÉMENT ======
   Certains gabarits sont composés en balises nues, sans classes : 324
   éléments sans classe relevés sur /abonnement/. Les tailles décimales
   (12,48 / 13,6 / 14,4 / 15,04 / 15,68 / 16,5 px) viennent d'un empilement
   d'em sur ces balises. On donne donc des défauts d'élément au système,
   ce n'est pas un correctif de page.
   Mesuré sur /abonnement/ : 37 → 34 tailles de texte pour ce seul bloc.
   ========================================================================= */
html body h1:not(.h1-home){
  font-family:var(--by-font-titre); font-size:var(--by-fs-h1); line-height:var(--by-lh-h1);
  font-weight:700; letter-spacing:-.005em; text-transform:none; color:var(--by-encre); }
html body h2:not(.mobile-menu-section-title):not(.byv3-sec-title):not(.byt-sec-title):not(.footer-toggle){
  font-family:var(--by-font-titre); font-size:var(--by-fs-h2); line-height:var(--by-lh-h2);
  font-weight:700; text-transform:none; letter-spacing:normal; }
html body h3:not(.h3-page){
  font-family:var(--by-font-titre); font-size:var(--by-fs-h3); line-height:var(--by-lh-h3);
  font-weight:700; text-transform:none; letter-spacing:normal; }
html body h4{
  font-family:var(--by-font-titre); font-size:var(--by-fs-h4); line-height:var(--by-lh-h4);
  font-weight:500; text-transform:none; letter-spacing:normal; }
html body h5, html body h6{
  font-family:var(--by-font-label); font-size:var(--by-fs-label); line-height:var(--by-lh-label);
  letter-spacing:var(--by-ls-label); text-transform:uppercase; font-weight:400; color:var(--by-gris); }
html body summary{
  font-family:var(--by-font-titre); font-size:var(--by-fs-corps); line-height:var(--by-lh-corps);
  min-height:44px; display:flex; align-items:center; cursor:pointer; }


/* ================================== 10 · ABSORPTION DE LA GÉNÉRATION by-v5 ==
   .by-v5 est un système parallèle découvert en LOOP 04 : 16 467 caractères,
   105 sélecteurs, 35 tailles de texte, 43 !important, ses propres couleurs
   (#101010, #ffd203, #6b6b6b, #2e7d32) et ses propres rayons (999px, 20px).
   Bien encapsulé, mais parallèle. On l'aligne par ses composants.
   Mesuré sur /abonnement/ mobile : tailles 37 → 23, H1 30,4/800/caps → 36/700.
   ========================================================================== */
html body .by-v5 .hero h1,
html body .by-v5 h1{
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-h1)!important;
  line-height:var(--by-lh-h1)!important; font-weight:700!important;
  text-transform:none!important; letter-spacing:-.005em!important; color:var(--by-encre)!important; }
html body .by-v5 h2{ font-size:var(--by-fs-h2)!important; line-height:var(--by-lh-h2)!important;
  font-weight:700!important; text-transform:none!important; color:var(--by-encre)!important; }
html body .by-v5 h3{ font-size:var(--by-fs-h3)!important; line-height:var(--by-lh-h3)!important;
  font-weight:700!important; text-transform:none!important; color:var(--by-encre)!important; }

/* le corps de texte seulement : .chiffre, .legende, .micro, .kicker, .lede et
   .source sont des composants du système v5, pas du corps éditorial. Leur
   appliquer la taille de corps élargit le min-content des colonnes de grille
   et fait déborder la page. Constaté (docW 390 → 407) puis corrigé en LOOP 04. */
html body .by-v5 p:not(.chiffre):not(.legende):not(.micro):not(.kicker):not(.lede):not(.source){
  font-family:var(--by-font-corps)!important; font-size:var(--by-fs-corps)!important;
  line-height:var(--by-lh-corps)!important; }
/* garde-fou grille : sans min-width:0 un enfant impose sa largeur min-content */
html body .by-v5 .grille > *, html body .by-v5 [class*="grid"] > *{ min-width:0; }

html body .by-v5 .btn,
html body .by-v5 .cta-inline{
  height:var(--by-btn-h-md)!important; min-height:var(--by-btn-h-md)!important;
  padding:0 var(--by-btn-px-md)!important; border-radius:var(--by-rayon-0)!important;
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-cta)!important;
  font-weight:700!important; letter-spacing:var(--by-ls-cta)!important;
  text-transform:uppercase!important; display:inline-flex!important;
  align-items:center!important; justify-content:center!important; }
html body .by-v5 .btn::after{ display:none!important; }
html body .by-v5 .badge{ border-radius:var(--by-rayon-pilule)!important;
  font-family:var(--by-font-label)!important; font-size:var(--by-fs-label)!important;
  letter-spacing:var(--by-ls-label)!important; text-transform:uppercase!important; }
html body .by-v5 .kicker,
html body .by-v5 .micro,
html body .by-v5 .titre-section{
  font-family:var(--by-font-label)!important; font-size:var(--by-fs-label)!important;
  line-height:var(--by-lh-label)!important; letter-spacing:var(--by-ls-label)!important;
  text-transform:uppercase!important; font-weight:400!important; color:var(--by-gris)!important; }
html body .by-v5 .wrap{ max-width:min(var(--by-conteneur),100%)!important; }
html body .by-v5, html body .by-v5 *{ max-width:100%; }
html body .by-v5 img, html body .by-v5 picture{ max-width:100%; height:auto; }


/* ================================= 11 · ABSORPTION DE LA GÉNÉRATION byi- ===
   Système des pages objectif. Porteurs du rayon 12 px relevés sur
   /objectif/mieux-dormir/ : a.byi-carte ×23, img.byi-img ×23,
   header.byi-hero, section.by-graphe-bloc. Le H1 y est une balise nue.
   Mesuré : 48 rayons de 12 px éliminés, H1 27/caps → 36/700, cibles 64 → 7.
   ========================================================================= */
html body .byi-carte,
html body .byi-img,
html body .byi-hero,
html body .by-graphe-bloc,
html body .byi-carte img{ border-radius:var(--by-rayon-0)!important; }
html body .byi-hero h1,
html body .byi-hero .byi-titre{
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-h1)!important;
  line-height:var(--by-lh-h1)!important; font-weight:700!important;
  text-transform:none!important; letter-spacing:-.005em!important; color:var(--by-encre)!important; }
html body .byi-carte h2, html body .byi-carte h3, html body .byi-carte .byi-titre-carte{
  font-family:var(--by-font-titre)!important; font-size:var(--by-fs-h4)!important;
  line-height:var(--by-lh-h4)!important; font-weight:700!important;
  text-transform:none!important; color:var(--by-encre)!important; }
html body .byi-img{ aspect-ratio:16/9; object-fit:cover; }
html body .byi-carte{ border:var(--by-filet-1) solid var(--by-filet)!important; box-shadow:none!important; }


/* ============================== 12 · CHIPS SANS CLASSE (div.chips > a) =====
   Relevé sur /sante-physique/ : liens sans classe dans div.chips, rayon 60px.
   Même intention que .byv3-chip (999px). On aligne la notation.
   ========================================================================= */
html body .chips > a,
html body .byt-portes .chips > a{
  border-radius:var(--by-rayon-pilule)!important;
  min-height:44px; display:inline-flex; align-items:center; gap:var(--by-esp-2);
  padding:0 var(--by-esp-4); border:var(--by-filet-1) solid var(--by-filet);
  font-family:var(--by-font-label); font-size:var(--by-fs-label);
  letter-spacing:var(--by-ls-label); text-transform:uppercase;
  color:var(--by-encre); text-decoration:none;
}
html body .chips > a:hover{ background:var(--by-jaune); border-color:var(--by-jaune); }


/* ================= 13 · NOTATIONS DE PILULE DE LA GÉNÉRATION « HÉROS » =====
   Relevé sur l'accueil après activation : boutons et filtres à 60px, une
   notation de pilule appliquée à des boutons. La grammaire ne connaît que
   0 (surface, bouton) et 999px (chip, tag, filtre).
     .by-cherch  : barre de recherche du héros
     .bja / .bli : les deux CTA du bloc de cartographie
     nav .fmt    : filtres de format, ce sont bien des chips
   ========================================================================= */
/* Regle SUPPRIMEE le 20/08/2026 (LOOP 07). .by-cherch, .bja et .bli portent
   desormais var(--by-rayon-0) DANS LEUR SOURCE, l extrait 49875. La surcouche
   n a plus d objet : c est exactement la condition de suppression prevue le
   jour ou elle a ete ecrite. 4 selecteurs et 1 !important en moins. */
html body nav a.fmt{ border-radius:var(--by-rayon-pilule)!important; }


/* ============ 14 · HÉROS D'ARTICLE — LE TITRE PASSE SOUS L'IMAGE ==========
   Décision de direction artistique, 20/08/2026.

   Le variant ARTICLE de ce composant posait le titre en encre par-dessus la
   photo : le contraste dépendait de la photo, il n'était donc jamais garanti.
   Le bloc de texte passe sous l'image, sur fond crème. Le voile sombre
   devient inutile et disparaît.

   Le variant CATÉGORIE (h2-featured-category) n'est PAS touché : il est en
   blanc sur un voile sombre à 58 %, son contraste est garanti par construction.
   La sélection par :has(.h1-title-post) cible le variant, pas la page.

   Mesuré avant : titre #111111 sur photo, « Territoire » en #B9B9B9 sur voile,
   métadonnée en #6D6A62 sur voile. Trois régimes de couleur dans un même bloc.
   ========================================================================= */
html body .wrap-category-featured:has(.h1-title-post),
html body .slick-slider:has(.h1-title-post),
html body .wrap-el-slider:has(.h1-title-post),
html body .content-slider-featured:has(.h1-title-post){ height:auto!important; }

html body .content-slider-featured:has(.h1-title-post){
  display:flex!important; flex-direction:column!important;
  background:var(--by-creme)!important;
}
html body .content-slider-featured:has(.h1-title-post) .wrap-img-slider-category{ order:1; }
html body .content-slider-featured:has(.h1-title-post) .wrap-img-slider-category img{
  display:block; width:100%; height:auto; border-radius:var(--by-rayon-0);
}
html body .content-slider-featured:has(.h1-title-post) .description-slider-featured{
  order:2; position:static!important; inset:auto!important;
  width:auto!important; max-width:none!important; height:auto!important;
  padding:var(--by-esp-5)!important;
}
html body .content-slider-featured:has(.h1-title-post) .wrap-bgfilter-post{ display:none!important; }

/* les trois régimes de couleur redeviennent un seul, celui du fond clair */
html body .h1-title-post{ color:var(--by-encre)!important; }
html body .content-slider-featured:has(.h1-title-post) .description-slider-featured > div:not(.info-featured){
  color:var(--by-gris)!important;
}
html body .content-slider-featured:has(.h1-title-post) .info-featured{ color:var(--by-gris)!important; }


/* ========== 15 · LES DEUX PRIMITIVES QUI MANQUAIENT AU SYSTEME ============
   Constat du test du UI kit, 20/08/2026 : en assemblant Section header +
   Card x6 + Button primary avec les seules classes du systeme, 5 composants
   sur 6 sont conformes sans une ligne de CSS local. Ce qui manque n est pas
   un style, c est une PRIMITIVE : le systeme ne fournit aucune grille, et la
   carte ne porte pas son propre display.

   Les 34 cartes de production calculent deja display:block. Le declarer ici
   ne change donc rien au rendu, cela rend seulement le composant autonome.
   ========================================================================= */
html body a.a-post-v2{ display:block; }

html body .by-grille-2,
html body .by-grille-3,
html body .by-grille-4{ display:grid; gap:var(--by-gouttiere); }
html body .by-grille-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
html body .by-grille-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
html body .by-grille-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:767px){
  html body .by-grille-2,
  html body .by-grille-3,
  html body .by-grille-4{ grid-template-columns:1fr; }
}


/* ============ 16 - CIBLE TACTILE DU DECLENCHEUR DE MENU ==================
   Mesure du 20/08/2026, a 390 px comme a 1252 px : a.a-main-btn peint
   26 x 44 px. La hauteur respecte la convention de 44 px, la largeur non.

   Le Customizer traite deja .a-close-left-main de cette maniere, avec un
   pseudo-element centre : width:max(40px,100%); height:max(44px,100%).
   On reprend EXACTEMENT la meme notation, pour le seul controle du menu qui
   n en avait aucune. Le rendu ne bouge pas : la boite peinte reste 26 x 44,
   seule la zone atteignable passe a 44 x 44. Aucun !important ajoute.

   Verifie apres pose : elementFromPoint a 20 px du centre renvoie bien
   a.a-main-btn, et un clic a cet endroit ouvre le menu.
   ======================================================================== */
html body a.a-main-btn{ position:relative; }
html body a.a-main-btn::after{
  content:""; position:absolute; top:50%; left:50%;
  width:max(44px,100%); height:max(44px,100%);
  transform:translate(-50%,-50%);
}


/* ====== 17 - LE CHEVRON DU PIED DE PAGE QUITTE LA POLICE D ICONES =======
   Mesure du 21/08/2026, recensement des glyphes rendus sur 7 gabarits x
   2 paliers : sur SIX gabarits sur sept, la seule utilisation de FontAwesome
   est CE chevron, quatre fois, dans les bascules du pied de page.
   Cout mesure de ces quatre chevrons : fontawesome-webfont.woff2, 75 Ko
   telecharges a chaque visite non mise en cache.

   On ne depose pas la police : elle sert encore sur les articles (fa-home du
   fil d Ariane). On lui retire seulement son unique raison d etre sur les six
   autres gabarits. Une police n est telechargee que si un glyphe la reclame :
   vider le glyphe suffit, sans toucher a la file d attente des styles ni au
   theme, et sans un seul !important.

   Le chevron est redessine en CSS pur, en currentColor, donc il suit la
   couleur du texte de la bascule.
   ====================================================================== */
html body .footer-toggle .fa-chevron-down{ font-family:inherit; }
html body .footer-toggle .fa-chevron-down::before{ content:""; }
html body .footer-toggle .fa-chevron-down::after{
  content:""; display:block; width:8px; height:8px; margin:-2px 3px 0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

/* =============================================================================
   SECTION 18, 24 septembre 2026 : panier persistant dans la barre de navigation.

   Pourquoi ici. La barre .by3n-act portait la recherche, Consultations,
   S abonner et le compte, mais aucun panier : le panier du theme est reste
   dans #header, que la couche de navigation met en display:none. Mesure du
   24/09/2026 sur la page d accueil : #header 0x0, liens .a-cart 0x0,
   .by3n-act 299x44 sans controle de panier. Le visiteur perdait donc son
   panier de vue des qu il quittait la page panier.

   Le controle n existe que lorsque le panier n est pas vide. data-n porte le
   nombre d articles, ou le marqueur "?" quand la page vient du cache et que
   le navigateur sait seulement que le panier existe. data-n="0" ne s affiche
   pas : une page mise en cache ne montre donc jamais le panier de quelqu un
   d autre.

   A 420 px et moins, et seulement quand le panier n est pas vide, le bouton
   de recherche autonome cede sa place. Mesure du 24/09/2026 : a 360 px la
   barre ne disposait que de 19,7 px de jeu, et le controle en demande 52.
   La recherche reste atteignable dans le panneau mobile, formulaire
   .by3n-mob-rech, verifie le meme jour. Decision reversible : supprimer la
   seule regle @media ci-dessous et la recherche revient, au prix d un
   debordement horizontal sous 390 px.

   Non regression mesuree le 24/09/2026, panier a 3 articles, debordement
   horizontal en pixels a 320 / 360 / 375 / 390 / 412 / 480 / 768 / 900 /
   1252 / 1440 : 0 partout. Panier vide aux memes largeurs : 0 partout, et le
   bouton de recherche intact.
   ============================================================================= */

html body .by-panier{
  position:relative;
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  order:1;
  color:inherit;
  text-decoration:none;
  border-radius:6px;
}

html body .by-panier[data-n]:not([data-n="0"]){
  display:inline-flex;
}

html body .by-panier svg{
  width:22px;
  height:22px;
  display:block;
}

/* Le compte garde sa place a droite du panier, comme avant la section 18. */
html body .by3n-act .by3n-compte{
  order:2;
}

html body .by-panier-n{
  position:absolute;
  top:2px;
  right:0;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-family:var(--by-font-label,inherit);
  font-size:11px;
  font-weight:700;
  line-height:1;
  background:var(--by-encre,#111);
  color:var(--by-blanc,#fff);
  border-radius:999px;
}

html body .by-panier:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

@media (max-width:420px){
  html body .by3n-act{
    gap:6px;
  }
  html body .by3n-act .by-panier[data-n]:not([data-n="0"]) ~ .by3n-rech-b{
    display:none;
  }
}