/* ==========================================================================
   Flowly Sensory — habillage du site
   Direction « nuage pervenche » (25 sept. 2026) : les couleurs du logo seules —
   pervenche, rose, creme — voir la section 1 et la section 90.
   Ce fichier remplace l'ancien CSS du Customizer (une seule source de verite).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS DE DESIGN — refonte « nuage pervenche » du 25 septembre 2026

   Vianney : « un truc plus pale, couleur lisse », « fluide », « pas de noir trop
   intense, des couleurs agreables, joie de vivre, positive », « pas trop
   enfantin ». Premier jet en terracotta, puis, le meme jour : « je trouve qu'il
   y a trop de terracotta, soit plus dans les couleurs du logo » — avec huit
   essais de logo a l'appui, TOUS en pervenche + rose sur creme (et un en creme
   sur pervenche). La palette ne sort donc plus du logo :

     pervenche #7081F6 (le lettrage) · rose #F886A8 (le noeud) · creme #FDF7F0
     (le fond), plus leurs teintes pales, et une encre violet profond.

   Regles de la palette :
     - fond de page = le CREME du logo, jamais du blanc pur ; les cartes restent
       blanches, elles se detachent donc toutes seules ;
     - COULEURS LISSES : aplats, pas de degrade (les jetons « -grad » ci-dessous
       sont volontairement des aplats, pour que les anciennes regles suivent) ;
     - l'encre n'est plus noire : violet nuit #34305E (11,4:1 sur creme) ;
     - le pervenche du logo (#7081F6) ne fait que 3,2:1 : il sert aux GRANDES
       formes et aux titres tres grands. Texte, liens et boutons prennent
       --fl-primary (#5565E6 : 4,8:1 sous du blanc, 4,5:1 sur creme) ;
     - le rose du logo est un ACCENT (etoiles, pastilles, soleil) : 2,2:1, jamais
       pour du texte ; en texte, --fl-coral-700 (#C0476F, 4,5:1).

   Les NOMS de jetons n'ont pas bouge (--fl-blue-*, --fl-violet-*, --fl-coral-*)
   pour que les mille regles qui suivent basculent sans etre reecrites. Ce sont
   des RANGS : « blue » = PERVENCHE (l'accent principal), « violet » = LILAS,
   « coral » = ROSE.
   -------------------------------------------------------------------------- */
:root{
  /* Police du texte ; les titres ont la leur (--fl-font-titre, alias servi par
     flowly-design.php : Tilt Warp, ou Miniro si le fichier est depose). */
  --fl-font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fl-font-titre:'Flowly Titre','Nunito',-apple-system,'Segoe UI',sans-serif;

  /* Encre — violet nuit, pas de noir */
  --fl-ink:#34305e;          /* titres — 11,4:1 sur creme */
  --fl-body:#5e5a7d;         /* texte courant — 6,1:1 */
  --fl-muted:#7f7a9e;        /* mentions discretes — 3,8:1, jamais pour du texte long */

  /* Fonds & traits */
  --fl-bg:#fdf7f0;           /* le creme du logo : fond de page */
  --fl-bg-card:#ffffff;      /* cartes, champs */
  --fl-bg-soft:#eef0fe;      /* pervenche tres pale : pastilles, boutons doux */
  --fl-bg-tint:#eef0fd;      /* pervenche pale : pied de page, blocs d'appel */
  --fl-line:#e9e4f0;
  --fl-line-soft:#f2eef5;

  /* « blue » = PERVENCHE, le lettrage du logo (accent principal) */
  --fl-blue-50:#f1f3fe;
  --fl-blue-100:#e3e7fd;
  --fl-blue-200:#c8cffb;
  --fl-blue-400:#7081f6;     /* le logo — APLATS et tres grands titres */
  --fl-blue-700:#4c5ad6;     /* 5,3:1 sur creme */

  /* « violet » = LILAS, entre les deux couleurs du logo */
  --fl-violet-50:#f5f1fd;
  --fl-violet-100:#ebe3fb;
  --fl-violet-200:#d6c8f6;
  --fl-violet-400:#a48be8;
  --fl-violet-700:#6b52c2;

  /* « coral » = ROSE, le noeud du logo */
  --fl-coral-50:#fef2f6;
  --fl-coral-100:#fde2ea;
  --fl-coral-200:#fac4d4;
  --fl-coral-400:#f886a8;    /* le logo — accent, jamais du texte */
  --fl-coral-700:#c0476f;    /* 4,5:1 */
  --fl-creme:#fde2ea;        /* (ancien « creme chaud ») */
  --fl-cyan:#c8cffb;         /* (ancien cyan) */

  /* Les couleurs du logo, nommees pour ce qu'elles sont */
  --fl-pervenche:#7081f6;
  --fl-rose:#f886a8;
  --fl-sauge-50:#eaf2e4;     /* reussite (code promo applique) */

  /* L'ancien degrade maille de la banniere : un aplat rose pale, desormais. */
  --fl-mesh:linear-gradient(#fef2f6,#fef2f6);

  /* Actions — pervenche soutenu, APLAT (couleur lisse) */
  --fl-primary:#5565e6;                 /* 4,8:1 sous du blanc */
  --fl-primary-dark:#4652c8;            /* 6,4:1 */
  --fl-primary-grad:linear-gradient(#5565e6,#5565e6);
  --fl-primary-grad-h:linear-gradient(#4652c8,#4652c8);

  /* Vert de reussite */
  --fl-ok:#3f7a4f;
  --fl-ok-bg:#e7f1e2;

  /* Reliefs — plus ronds, ombres violettes et diffuses */
  --fl-r-sm:14px;
  --fl-r:22px;
  --fl-r-lg:32px;
  --fl-r-pill:999px;
  --fl-sh-1:0 1px 2px rgba(52,48,94,.05),0 6px 18px rgba(52,48,94,.06);
  --fl-sh-2:0 12px 32px rgba(52,48,94,.10);
  --fl-sh-3:0 20px 50px rgba(52,48,94,.15);

  /* Rythme */
  --fl-ease:cubic-bezier(.22,.7,.26,1);
  --fl-wide:1300px;   /* largeur des pages larges (profil, boutique) */

  /* Icones dessinees, posees en `mask` : la couleur vient de
     `background-color`, donc elles suivent les etats (survol, focus) sans
     qu'on ait a redefinir le trace. */
  --fl-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. BASE & TYPOGRAPHIE — une seule police, partout
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}
body,button,input,select,textarea,optgroup,
.site-title,.site-description,
.woocommerce-loop-product__title,
.woocommerce-Price-amount,
.ast-builder-menu .main-header-menu,
.ast-builder-menu .main-header-menu a,
.menu-link,
.woocommerce-breadcrumb,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  font-family:var(--fl-font) !important;
}
/* Les titres ont leur propre police (Tilt Warp, ou Miniro si Lea l'achete :
   voir flowly-design.php). Graisse unique : `font-synthesis` interdit au
   navigateur d'inventer un faux gras si une regle demande 800. */
h1,h2,h3,h4,h5,h6,
.entry-title,.widget-title,
.product_title,
.wp-block-heading{
  font-family:var(--fl-font-titre) !important;
  font-synthesis:none}
body{
  color:var(--fl-body);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  background:var(--fl-bg);
}
h1,h2,h3,h4,h5,h6,.wp-block-heading,.entry-title,.product_title{
  color:var(--fl-ink);
  font-weight:400;
  letter-spacing:-.006em;   /* Tilt Warp est deja serree : a peine */
  line-height:1.1;
}
h1,.entry-title{font-size:clamp(1.9rem,4.2vw,2.7rem) !important}
h2{font-size:clamp(1.5rem,3vw,2rem) !important;line-height:1.2 !important}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem) !important;line-height:1.25 !important}
h4{font-size:1.1rem !important}
p{margin:0 0 1.1em}
a{color:var(--fl-primary);text-decoration:none;transition:color .18s var(--fl-ease)}
a:hover{color:var(--fl-primary-dark)}
::selection{background:var(--fl-violet-200);color:var(--fl-ink)}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--fl-primary);outline-offset:2px;border-radius:6px}

/* Titre de section (« Nos produits », « Avis », …) */
/* Astra impose ses propres marges de titre depuis une feuille en ligne, chargée
   APRÈS celle-ci et à spécificité égale : il faut donc être plus précis qu'elle,
   sinon le sous-titre reste décollé du titre. */
/* ⚠️ Ne JAMAIS écrire « margin: … » en raccourci ici : l'éditeur WordPress
   centre ses blocs avec « margin-left/right: auto », et le raccourci les remet
   à zéro — le titre se collait alors au bord gauche pendant que la grille de
   produits restait centrée. On ne touche qu'aux marges haute et basse. */
.fl-section-title,
.entry-content .fl-section-title,
.entry-content :where(h1,h2,h3).fl-section-title{
  font-size:clamp(1.45rem,2.6vw,1.9rem) !important;font-weight:700;letter-spacing:-.022em;
  color:var(--fl-ink);line-height:1.15 !important;
  margin-top:0 !important;margin-bottom:.3rem !important}
.fl-section-sub,
.entry-content .fl-section-sub{
  color:var(--fl-muted);font-size:.98rem;
  margin-top:0 !important;margin-bottom:1.2rem !important}
/* Le bloc des raccourcis de catégories reste vide tant qu'il n'y a qu'une
   catégorie : sans cette règle il laissait un grand trou sous le sous-titre. */
.fl-cat-tiles:empty{display:none;margin:0}
.page-id-3283 .entry-content p:empty,
.page-id-3283 .entry-content .wp-block-group > p:empty{display:none;margin:0}
/* En bloc, pas en inline-block : l'editeur WordPress centre ses blocs avec des
   marges automatiques, qui n'ont aucun effet sur un inline-block — le texte
   partait alors se coller au bord gauche de la page. */
.fl-eyebrow{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fl-primary);margin:0 0 .6rem}

/* --------------------------------------------------------------------------
   3. GABARIT GENERAL — moins de vide, largeurs coherentes
   -------------------------------------------------------------------------- */
#page{display:flex;flex-direction:column;min-height:100vh}
#content{flex:1 0 auto}
.site-footer{flex-shrink:0}
.content-area,.content-area.primary{margin-top:.5rem !important}
.site-content > .ast-container{padding-top:1.5rem !important;padding-bottom:2.5rem !important}
/* Astra ajoute ici un fond et un enorme rembourrage lateral sur les archives
   boutique : on le neutralise, la largeur est deja geree par .ast-container. */
.ast-woocommerce-container{
  padding:1.5rem 0 3rem !important;background:transparent !important;max-width:none !important}
.woocommerce-products-header{margin:0 !important;padding:0 !important}
.woocommerce .woocommerce-breadcrumb{
  margin:0 0 .7rem !important;font-size:.86rem;color:var(--fl-muted)}
.woocommerce .woocommerce-breadcrumb a{color:var(--fl-muted)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--fl-primary)}

/* Pages qui doivent respirer plus large (demande n°2).
   ⚠️ Viser « .site-content > .ast-container » et NON « .ast-container » tout
   court : l'en-tête utilise la même classe, et la contraindre ici resserrait
   le logo et le menu vers le centre sur le panier, la commande et le compte. */
.woocommerce-account .entry-content,
.woocommerce-account .site-content > .ast-container,
.woocommerce-cart .site-content > .ast-container,
.woocommerce-checkout .site-content > .ast-container{max-width:var(--fl-wide) !important}
.woocommerce-account .entry-content{margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------------
   4. EN-TETE
   -------------------------------------------------------------------------- */
/* En-tête toujours visible pendant le défilement.
   « sticky » plutôt que « fixed » : la page n'a pas besoin d'être décalée, et
   rien ne passe sous l'en-tête au chargement. */
.site-header{position:sticky;top:0;z-index:99}
.admin-bar .site-header{top:32px}          /* sous la barre d'administration */
/* ⚠️ SUR MOBILE, NE PAS DÉCALER L'EN-TÊTE.
   En dessous de 782 px, WordPress passe sa barre d'administration en
   « position:absolute » : elle défile avec la page et disparaît. Un « top:46px »
   laisserait donc une bande vide et transparente en haut de l'écran, dans
   laquelle on verrait le contenu défiler — c'est le bug signalé par Vianney le
   11 août (bande violette de la bannière visible au-dessus du bandeau blanc).
   Vérifié : elementFromPoint() à y=4..44 renvoyait « UL.products ».
   Ne concernait que les personnes connectées, jamais les clients. */
@media(max-width:782px){.admin-bar .site-header{top:0}}
/* L'ombre n'apparaît qu'une fois la page défilée : au repos, l'en-tête reste
   posé à plat sur la bannière. */
.site-header .ast-primary-header-bar{
  transition:box-shadow .25s var(--fl-ease),background-color .25s var(--fl-ease)}
.fl-defile .site-header .ast-primary-header-bar{
  box-shadow:0 2px 16px rgba(52,48,94,.09);
  background:rgba(255,255,255,.94) !important}

/* ⚠️ EN DESSOUS DE 921 px, « .ast-primary-header-bar » N'EST PLUS UTILISÉE
   (hauteur mesurée : 0) — Astra bascule sur « .ast-mobile-header-wrap ». Les deux
   règles ci-dessus ne s'appliquaient donc à rien sur téléphone, et comme
   « .site-header » est transparent par défaut, on voyait les produits défiler
   À TRAVERS l'en-tête fixe. Vérifié : document.elementFromPoint() au milieu du
   bandeau renvoyait « UL.products ».
   On peint donc explicitement le conteneur mobile. Seuil relevé par mesure :
   barre = 151 px à 950 px de large, 0 px à 921 px. */
@media(max-width:921px){
  .site-header,
  .site-header .ast-mobile-header-wrap{background:#fff}
  .site-header .ast-mobile-header-wrap{
    transition:box-shadow .25s var(--fl-ease),background-color .25s var(--fl-ease)}
  .fl-defile .site-header .ast-mobile-header-wrap{
    box-shadow:0 2px 16px rgba(52,48,94,.09);
    background:rgba(255,255,255,.94)}
}

/* L'en-tête RÉTRÉCIT au défilement.
   Mesuré au repos : 131 px, soit 15 % d'un écran de 900 px et 17 % d'un portable
   de 768 px — beaucoup trop pour un bandeau visible en permanence (la norme
   tourne autour de 70 px). Le logo garde donc sa taille en haut de page, où il
   sert l'image de marque, et se réduit dès qu'on descend. */
.site-header .custom-logo,
.site-header .site-logo-img img{
  transition:width .28s var(--fl-ease),height .28s var(--fl-ease)}
.fl-defile .site-header .custom-logo,
.fl-defile .site-header .site-logo-img img{
  width:58px !important;height:58px !important}
.fl-defile .ast-primary-header-bar{
  padding-top:.25rem !important;padding-bottom:.25rem !important}

.ast-primary-header-bar{
  padding-top:.3rem !important;padding-bottom:.3rem !important;
  border-bottom:1px solid var(--fl-line-soft);
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:saturate(1.4) blur(10px)}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link{
  font-size:.9rem !important;font-weight:600 !important;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fl-ink) !important;
  padding-left:.85rem !important;padding-right:.85rem !important;
  position:relative}
/* Soulignement qui se deploie au survol (n°14) */
.ast-builder-menu .main-header-menu > .menu-item > .menu-link::after{
  content:"";position:absolute;left:.85rem;right:.85rem;top:calc(50% + .85em);height:2px;
  border-radius:2px;background:var(--fl-primary-grad);
  transform:scaleX(0);transform-origin:center;
  transition:transform .28s var(--fl-ease)}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover::after,
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link::after,
.ast-builder-menu .main-header-menu > .current_page_item > .menu-link::after{transform:scaleX(1)}
/* « Catégories » pointe vers la boutique : WordPress le marque donc « page
   courante » en meme temps que « Boutique ». Deux traits cote a cote font
   penser a un bug — on ne le souligne qu'au survol. */
.ast-builder-menu .main-header-menu > .flowly-categories > .menu-link::after{transform:scaleX(0)}
.ast-builder-menu .main-header-menu > .flowly-categories > .menu-link:hover::after,
.ast-builder-menu .main-header-menu > .flowly-categories:hover > .menu-link::after{transform:scaleX(1)}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover{color:var(--fl-primary) !important}

/* Dans le menu deroulant du telephone, ce soulignement ferait la largeur de
   l'ecran : on ne le garde que dans la barre du haut. */
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link::after,
.ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link::after{display:none}
.ast-mobile-popup-drawer .main-header-menu .menu-link{
  font-weight:600 !important;letter-spacing:.02em}

/* Sous-menu (Categories) */
.ast-builder-menu .sub-menu{
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r) !important;
  box-shadow:var(--fl-sh-2) !important;padding:.4rem !important;
  background:#fff !important;min-width:230px !important;overflow:hidden}
.ast-builder-menu .sub-menu .menu-link{
  border:0 !important;border-radius:var(--fl-r-sm) !important;
  padding:.55rem .8rem !important;font-size:.9rem !important;font-weight:500 !important;
  text-transform:none !important;letter-spacing:0 !important;color:var(--fl-body) !important;
  display:flex !important;align-items:center;justify-content:space-between;gap:.6rem}
.ast-builder-menu .sub-menu .menu-link:hover{
  background:var(--fl-blue-50) !important;color:var(--fl-primary) !important}
/* Astra prefixe TOUTE entree de sous-menu d'une fleche (astra_dropdown_icon_to_menu_link :
   « if ( 0 < $depth ) »), meme quand l'entree n'a pas d'enfants. On la retire ;
   la vraie fleche des entrees a enfants est un .dropdown-menu-toggle, conservee. */
.ast-builder-menu .sub-menu .menu-link > .ast-icon.icon-arrow,
.ast-mobile-popup-drawer .sub-menu .menu-link > .ast-icon.icon-arrow,
.ast-builder-menu-mobile .sub-menu .menu-link > .ast-icon.icon-arrow{display:none !important}

.fl-cat-count{
  font-size:.72rem;font-weight:600;color:var(--fl-muted);
  background:var(--fl-bg-soft);border-radius:var(--fl-r-pill);padding:.05rem .45rem;
  flex:0 0 auto}
.menu-item .sub-menu .menu-link:hover .fl-cat-count{background:#fff;color:var(--fl-primary)}

/* Le composant panier accueille la barre de progression a sa gauche */
.ast-header-woo-cart{display:flex;align-items:center}

/* Icones de l'en-tete */
.ast-header-woo-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart .ast-woo-header-cart-info-wrap{font-weight:600}
.ast-header-account-wrap .ast-header-account-type-icon,
.ast-header-search .astra-search-icon{color:var(--fl-ink)}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
/* Action decisive : degrade bleu -> violet */
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce-account form button[type=submit],
.woocommerce .return-to-shop a.button,
.fl-btn{
  background:var(--fl-primary-grad) !important;
  color:#fff !important;border:0 !important;
  border-radius:var(--fl-r-pill) !important;
  padding:.82rem 1.9rem !important;
  font-family:var(--fl-font) !important;
  font-size:.97rem !important;font-weight:600 !important;line-height:1.4 !important;
  letter-spacing:.01em !important;text-transform:none !important;
  box-shadow:0 6px 18px rgba(85,101,230,.26) !important;
  cursor:pointer;
  transition:transform .2s var(--fl-ease),box-shadow .2s var(--fl-ease),filter .2s var(--fl-ease) !important}
.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce-account form button[type=submit]:hover,
.woocommerce .return-to-shop a.button:hover,
.fl-btn:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 12px 26px rgba(85,101,230,.34) !important;
  filter:saturate(1.08)}
.fl-btn:active,.woocommerce #place_order:active{transform:translateY(0) scale(.99)}

/* Action repetee (Ajouter au panier) : bleu pastel, texte fonce = lisible */
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce div.product form.cart button.button,
.fl-btn-soft{
  background:var(--fl-blue-100) !important;
  color:#4652c8 !important;border:1px solid var(--fl-blue-200) !important;
  border-radius:var(--fl-r-pill) !important;
  font-family:var(--fl-font) !important;
  font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important;
  box-shadow:none !important;
  transition:background .2s var(--fl-ease),transform .2s var(--fl-ease),box-shadow .2s var(--fl-ease) !important}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce div.product form.cart button.button:hover,
.fl-btn-soft:hover{
  background:var(--fl-blue-200) !important;color:#3f4bb8 !important;
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(85,101,230,.16) !important}

/* Bouton discret (annuler, retour, contour) */
.fl-btn-ghost,
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button):not(.checkout):not(.added_to_cart){
  background:#fff !important;color:var(--fl-primary) !important;
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r-pill) !important;
  font-family:var(--fl-font) !important;font-weight:600 !important;
  text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
  transition:background .2s var(--fl-ease),border-color .2s var(--fl-ease)}
.fl-btn-ghost:hover,
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button):not(.checkout):not(.added_to_cart):hover{
  background:var(--fl-blue-50) !important;border-color:var(--fl-blue-200) !important}

/* --------------------------------------------------------------------------
   6. CHAMPS DE FORMULAIRE
   -------------------------------------------------------------------------- */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=url],select,textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single{
  font-family:var(--fl-font) !important;font-size:.96rem !important;
  color:var(--fl-ink) !important;
  background:#fff !important;
  border:1px solid var(--fl-line) !important;
  border-radius:var(--fl-r) !important;
  padding:.7rem .95rem !important;line-height:1.45 !important;
  box-shadow:none !important;
  transition:border-color .18s var(--fl-ease),box-shadow .18s var(--fl-ease) !important}
textarea{min-height:120px}
input:focus,select:focus,textarea:focus,
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--fl-primary) !important;
  box-shadow:0 0 0 3px rgba(85,101,230,.14) !important;outline:none !important}
::placeholder{color:#aaa6c2;opacity:1}
label,.woocommerce form .form-row label{
  font-size:.88rem !important;font-weight:600 !important;color:var(--fl-ink) !important;
  margin-bottom:.35rem !important;display:block}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.45 !important;padding-left:0 !important;color:var(--fl-ink)}
.select2-container--default .select2-selection--single{height:auto !important}
.select2-dropdown{border-color:var(--fl-line) !important;border-radius:var(--fl-r) !important}

/* --------------------------------------------------------------------------
   6 bis. PIEGE WOOCOMMERCE : les « clearfix »
   WooCommerce ajoute ::before / ::after (display:table) sur ses conteneurs pour
   contenir d'anciens flottants. Dans un conteneur en grille, ces pseudo-elements
   deviennent des cases : les deux blocs d'adresses se retrouvaient en diagonale.
   -------------------------------------------------------------------------- */
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,.woocommerce-page .col2-set::after,
.woocommerce-Addresses::before,.woocommerce-Addresses::after,
.woocommerce-address-fields__field-wrapper::before,
.woocommerce-address-fields__field-wrapper::after,
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-cart .woocommerce::before,.woocommerce-cart .woocommerce::after,
.woocommerce-checkout form.checkout::before,.woocommerce-checkout form.checkout::after,
.woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after,
.woocommerce-cart table.cart td.actions::before,
.woocommerce-cart table.cart td.actions::after{display:none !important;content:none !important}

/* --------------------------------------------------------------------------
   7. MESSAGES WOOCOMMERCE
   -------------------------------------------------------------------------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border:1px solid var(--fl-line) !important;border-top:2px solid var(--fl-primary) !important;
  background:var(--fl-blue-50) !important;border-radius:var(--fl-r) !important;
  color:var(--fl-ink) !important;font-size:.95rem;padding:1rem 1.2rem 1rem 3rem !important;
  box-shadow:none !important;list-style:none}
.woocommerce-error{border-top-color:var(--fl-coral-700) !important;background:var(--fl-coral-50) !important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--fl-primary) !important;top:1rem !important;left:1.2rem !important}
.woocommerce-error::before{color:var(--fl-coral-700) !important;top:1rem !important;left:1.2rem !important}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:1rem}

/* --------------------------------------------------------------------------
   8. CARTES PRODUIT — plus compactes (demande n°10)
   -------------------------------------------------------------------------- */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr)) !important;
  gap:1.15rem !important;margin:0 !important;padding:0 !important;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important}
.woocommerce ul.products li.product{
  width:auto !important;margin:0 !important;float:none !important;clear:none !important;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);
  padding:.6rem .6rem .8rem;display:flex;flex-direction:column;text-align:left;
  position:relative;overflow:hidden;
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),border-color .25s var(--fl-ease)}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);box-shadow:var(--fl-sh-2);border-color:var(--fl-blue-200)}
.woocommerce ul.products li.product > a:first-of-type{display:block}
/* Vignette carree, image contenue : plus de cartes tres hautes */
.woocommerce ul.products li.product a img{
  width:100% !important;aspect-ratio:1/1;height:auto !important;object-fit:contain;
  background:#fff;border-radius:var(--fl-r-sm);
  margin:0 0 .6rem !important;padding:.3rem;
  transition:transform .35s var(--fl-ease)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.045)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.94rem !important;font-weight:600 !important;line-height:1.3 !important;
  letter-spacing:-.012em;color:var(--fl-ink) !important;
  margin:0 0 .15rem !important;padding:0 !important}
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .woocommerce-loop-category__title{
  font-size:.74rem !important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fl-muted) !important;margin:0 0 .3rem !important;padding:0 !important}
.woocommerce ul.products li.product .price{
  color:var(--fl-ink) !important;font-size:.98rem !important;font-weight:700 !important;
  margin:.1rem 0 .7rem !important;display:block}
.woocommerce ul.products li.product .price del{
  color:var(--fl-muted);font-weight:500;font-size:.85rem;margin-right:.3rem;opacity:1}
.woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:700}
.woocommerce ul.products li.product .star-rating{font-size:.72rem;margin:0 0 .35rem}
/* ⚠️ Astra enveloppe le titre, le prix et le bouton dans un
   `.astra-shop-summary-wrap`. Le `margin-top:auto` du bouton s'appliquait donc
   À L'INTÉRIEUR de ce div, qui n'était pas un conteneur flex : il valait 0
   (mesuré), et le bouton se calait juste sous le prix — plus haut sur une carte
   à titre d'une ligne que sur une carte à titre de deux lignes. Les cartes,
   elles, ont toujours eu la même hauteur : c'est bien le bouton qui flottait.
   Demande de Vianney le 6 septembre : « tous les boutons "ajouter au panier" et
   "voir la fiche" doivent être alignés pour un rendu plus optimal ».
   On étire le div et on le passe en colonne : le `margin-top:auto` du bouton
   retrouve sa course, et tous les boutons se posent en bas de carte. */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex;flex-direction:column;flex:1 1 auto}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin-top:auto !important;display:block;width:100%;text-align:center;
  padding:.55rem .8rem !important;font-size:.86rem !important;line-height:1.4 !important}
.woocommerce ul.products li.product .added_to_cart{margin-top:.4rem !important}
.woocommerce span.onsale{
  background:var(--fl-coral-100) !important;color:#a2382c !important;
  border-radius:var(--fl-r-pill) !important;padding:.16rem .6rem !important;
  font-size:.7rem !important;font-weight:700 !important;letter-spacing:.03em;
  line-height:1.6 !important;min-height:0 !important;min-width:0 !important;
  top:.7rem !important;left:.7rem !important;right:auto !important;margin:0 !important;
  box-shadow:none !important}
/* --- Rupture de stock --- */
/* Astra pose déjà son propre bandeau « EN RUPTURE DE STOCK » au milieu de la
   vignette. Deux mentions pour la même information, c'est une de trop : on
   garde la pastille discrète en coin. */
.ast-shop-product-out-of-stock{display:none !important}
.woocommerce ul.products li.product .fl-epuise{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:var(--fl-ink);color:#fff;
  border-radius:var(--fl-r-pill);padding:.16rem .6rem;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;line-height:1.6}
.woocommerce ul.products li.product.outofstock a img{opacity:.62;filter:saturate(.75)}
.woocommerce ul.products li.product.outofstock:hover a img{opacity:.8}
/* 🐛 6 septembre 2026 — Vianney : « dans la boutique, y'a un souci sur les
   cubes, on voit une image en transparence ».
   La règle ci-dessus vise TOUTE image de la carte, donc aussi la deuxième
   image empilée pour le survol (section 21) : celle-ci passait de `opacity:0`
   à `.62` en permanence, et les deux photos se voyaient l'une à travers
   l'autre. Sa spécificité (4 classes) écrasait le `opacity:0` de
   `.fl-vignette__survol` (3 classes).
   Le défaut ne pouvait apparaître que sur un produit à la fois ÉPUISÉ et
   pourvu d'une image au survol — aucun ne cumulait les deux avant le Cube
   infini, lancé avec un stock à zéro.
   Correctif : on estompe le CADRE, pas chaque image. Les deux photos gardent
   alors leur propre fondu à l'intérieur d'un cadre déjà atténué. */
.woocommerce ul.products li.product.outofstock a .fl-vignette{opacity:.62;filter:saturate(.75)}
.woocommerce ul.products li.product.outofstock:hover a .fl-vignette{opacity:.8}
.woocommerce ul.products li.product.outofstock a .fl-vignette img{opacity:1;filter:none}
.woocommerce ul.products li.product.outofstock a .fl-vignette .fl-vignette__survol{opacity:0}
.woocommerce ul.products li.product.outofstock:hover a .fl-vignette .fl-vignette__survol,
.woocommerce ul.products li.product.outofstock:focus-within a .fl-vignette .fl-vignette__survol{opacity:1}
.woocommerce ul.products li.product.outofstock .price{color:var(--fl-muted) !important}

/* Mention de disponibilité sur la fiche produit */
.single-product .stock{
  font-size:.9rem;font-weight:600;margin:0 0 1rem;
  display:inline-flex;align-items:center;gap:.4rem}
.single-product .stock::before{
  content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.single-product .stock.in-stock{color:var(--fl-ok)}
.single-product .stock.out-of-stock{color:var(--fl-coral-700)}
.fl-epuise-note{
  background:var(--fl-coral-50);border:1px solid var(--fl-coral-200);
  border-radius:var(--fl-r);padding:.8rem 1rem;margin:0 0 1.2rem;
  font-size:.9rem;color:#8a3a30}

.woocommerce .woocommerce-result-count{
  color:var(--fl-muted);font-size:.88rem;margin:0 !important;line-height:2.4}
/* --- Défilement infini --- */
.fl-more{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  margin:2.2rem 0 .5rem;text-align:center}
.fl-more__sentinelle{height:1px;width:100%}
.fl-more__btn{
  padding:.7rem 1.9rem !important;font-size:.94rem !important;cursor:pointer;
  min-width:220px}
.fl-more__status{
  margin:0;font-size:.88rem;color:var(--fl-muted);min-height:1.2em}
.fl-more__count{margin:0;font-size:.82rem;color:var(--fl-muted)}
.fl-more.is-loading .fl-more__btn{opacity:.55;pointer-events:none}
/* Petit rond qui tourne pendant le chargement */
.fl-more.is-loading .fl-more__status::before{
  content:"";display:inline-block;width:13px;height:13px;margin-right:.5rem;
  vertical-align:-2px;border-radius:50%;
  border:2px solid var(--fl-blue-200);border-top-color:var(--fl-primary);
  animation:fl-tourne .7s linear infinite}
@keyframes fl-tourne{to{transform:rotate(360deg)}}
.fl-more.is-done .fl-more__count::before{content:"✓ ";color:var(--fl-ok)}

.woocommerce nav.woocommerce-pagination{margin-top:2rem}
.woocommerce nav.woocommerce-pagination ul{border:0;gap:.3rem;display:flex;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0 !important;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:var(--fl-r-sm);padding:.4rem .8rem;color:var(--fl-body);
  border:1px solid var(--fl-line);min-width:2.4rem;text-align:center}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--fl-primary);border-color:var(--fl-primary);color:#fff}

/* --------------------------------------------------------------------------
   9. BOUTIQUE : filtres a gauche (demande n°7)
   -------------------------------------------------------------------------- */
/* La liste de produits profite de toute la largeur : à 1200 px dans une fenêtre
   de 1440, les filtres semblaient rentrés vers le milieu de la page. */
.fl-liste-produits .site-content > .ast-container{
  max-width:1440px !important;padding-left:2rem !important;padding-right:2rem !important}
/* Et on remonte le contenu : il y avait ~75 px de vide sous l'en-tête. */
.fl-liste-produits .content-area,
.fl-liste-produits .content-area.primary{margin-top:0 !important}
.fl-liste-produits .site-content > .ast-container{padding-top:.6rem !important}
.fl-liste-produits .ast-woocommerce-container{padding-top:.4rem !important}

/* Titre des listes de produits.
   Le nom de la boutique ou de la catégorie est déjà porté par le fil d'Ariane
   et par les filtres : l'écrire une seconde fois en gros fait doublon et
   repousse les produits vers le bas. On le garde dans la page — les moteurs de
   recherche et les lecteurs d'écran en ont besoin — sans l'afficher. */
.fl-liste-produits .woocommerce-products-header__title{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;margin:0 !important}
.fl-liste-produits .woocommerce-products-header{margin:0 !important}
.fl-liste-produits .woocommerce-products-header:empty{display:none}
/* Une description de catégorie, si Léa en écrit une, reste visible. */
.fl-liste-produits .term-description{
  margin:0 0 1rem !important;color:var(--fl-muted);font-size:.98rem;max-width:70ch}

/* 16 sept. 2026 : plus de colonne de filtres, voir section 61. */
.fl-shop{display:block}
.fl-shop-main{min-width:0}
.fl-filters{
  position:sticky;top:1.2rem;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1rem 1rem 1.1rem;box-shadow:var(--fl-sh-1)}
.fl-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin:0 0 .9rem}
.fl-filters__head h2{
  font-size:1rem !important;font-weight:700;margin:0 !important;color:var(--fl-ink);
  letter-spacing:-.015em}
.fl-filters__reset{
  font-size:.78rem;font-weight:600;color:var(--fl-muted);
  border-bottom:1px solid transparent}
.fl-filters__reset:hover{color:var(--fl-coral-700);border-bottom-color:currentColor}
.fl-fgroup{border-top:1px solid var(--fl-line-soft);padding:.8rem 0 0;margin:.8rem 0 0}
.fl-fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fl-fgroup__title{
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fl-muted);margin:0 0 .5rem}

/* --- Filtre couleur : pastilles de teinte --- */
.fl-fcouleurs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.08rem}
.fl-fcouleurs a{
  display:flex;align-items:center;gap:.55rem;
  padding:.36rem .5rem;border-radius:var(--fl-r-sm);
  font-size:.89rem;font-weight:500;color:var(--fl-body);
  transition:background .18s var(--fl-ease),color .18s var(--fl-ease)}
.fl-fcouleurs a:hover{background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-fcouleurs__dot{
  width:17px;height:17px;flex:0 0 auto;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.16);position:relative}
.fl-fcouleurs__nom{flex:1 1 auto}
.fl-fcouleurs .is-active a{background:var(--fl-primary);color:#fff;font-weight:600}
.fl-fcouleurs .is-active .fl-cat-count{background:rgba(255,255,255,.22);color:#fff}
.fl-fcouleurs .is-active .fl-fcouleurs__dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* Coche sur la teinte sélectionnée */
.fl-fcouleurs .is-active .fl-fcouleurs__dot::after{
  content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}

/* recherche produits */
.fl-fsearch{position:relative}
.fl-fsearch input[type=search]{
  width:100%;padding:.6rem .75rem .6rem 2.15rem !important;font-size:.9rem !important;
  border-radius:var(--fl-r-pill) !important;background:var(--fl-bg-soft) !important}
.fl-fsearch svg{
  position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--fl-muted);pointer-events:none}

/* liste de categories */
.fl-fcats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.fl-fcats a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.44rem .6rem;border-radius:var(--fl-r-sm);
  font-size:.9rem;font-weight:500;color:var(--fl-body);
  transition:background .18s var(--fl-ease),color .18s var(--fl-ease)}
.fl-fcats a:hover{background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-fcats .is-active a{background:var(--fl-primary);color:#fff;font-weight:600}
.fl-fcats .is-active .fl-cat-count{background:rgba(255,255,255,.22);color:#fff}
.fl-fcats .fl-sub{padding-left:.7rem}

/* prix */
.fl-fprice{display:flex;flex-direction:column;gap:.55rem}
.fl-fprice__row{display:flex;align-items:center;gap:.4rem}
.fl-fprice__row input{
  width:100%;min-width:0;padding:.5rem .55rem !important;font-size:.88rem !important;
  text-align:center;background:var(--fl-bg-soft) !important}
.fl-fprice__sep{color:var(--fl-muted);font-size:.85rem;flex:0 0 auto}
.fl-fprice button{
  width:100%;padding:.5rem .9rem !important;font-size:.85rem !important}
.fl-fhint{font-size:.76rem;color:var(--fl-muted);margin:.15rem 0 0}

/* cases a cocher (des liens, pour rester fonctionnel sans JavaScript) */
.fl-fcheck{display:flex;align-items:center;gap:.55rem;font-size:.9rem;
  font-weight:500;color:var(--fl-body);margin:0;padding:.25rem 0;cursor:pointer}
.fl-fcheck:hover{color:var(--fl-primary)}
.fl-fcheck .fl-box{
  width:17px;height:17px;flex:0 0 auto;border:1.5px solid var(--fl-line);
  border-radius:5px;background:#fff;position:relative;
  transition:background .18s var(--fl-ease),border-color .18s var(--fl-ease)}
.fl-fcheck:hover .fl-box{border-color:var(--fl-blue-400)}
.fl-fcheck.is-checked .fl-box{background:var(--fl-primary);border-color:var(--fl-primary)}
.fl-fcheck.is-checked .fl-box::after{
  content:"";position:absolute;left:4.5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* Barre du haut : nombre de résultats + tri.
   Elle est le PREMIER élément de la colonne de droite, et son texte s'aligne
   sur le titre « Filtrer » du panneau de gauche (d'où le petit décalage haut,
   qui compense le rembourrage de la carte des filtres). */
.fl-shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.55rem 0 .9rem;margin:0 0 1rem;border-bottom:1px solid var(--fl-line-soft)}
.fl-categorie .fl-shop-bar{padding-top:.6rem}
.fl-shop-bar .woocommerce-ordering{margin:0 !important}
.fl-shop-bar .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select{
  border-radius:var(--fl-r-pill) !important;padding:.5rem 2.2rem .5rem 1rem !important;
  font-size:.88rem !important;font-weight:600 !important;background-color:#fff !important}
/* Astra/Woo placent parfois le tri en flottant : on neutralise */
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count{float:none !important}

/* filtres actifs */
.fl-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem}
.fl-chip__dot{
  width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.18)}
.fl-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--fl-violet-50);border:1px solid var(--fl-violet-200);
  color:var(--fl-violet-700);border-radius:var(--fl-r-pill);
  padding:.24rem .7rem;font-size:.8rem;font-weight:600}
.fl-chip__x{font-size:1rem;line-height:1;color:var(--fl-violet-700);opacity:.7}
.fl-chip:hover .fl-chip__x{opacity:1}

/* Le bouton « Filtres » vit dans la barre du haut : section 61. */

/* aucun resultat */
.fl-empty{
  text-align:center;padding:3rem 1.5rem;background:var(--fl-bg-soft);
  border-radius:var(--fl-r-lg);border:1px dashed var(--fl-line)}
.fl-empty p{margin:0 0 1.2rem;color:var(--fl-body)}

/* --------------------------------------------------------------------------
   10. FICHE PRODUIT (demandes n°4 et n°5)
   -------------------------------------------------------------------------- */
/* WooCommerce empile galerie et resume avec des flottants : tout ce qu'on
   ajoute ensuite vient se glisser DANS la colonne au lieu de passer dessous.
   On repasse en grille : deux colonnes en haut, pleine largeur en dessous. */
.single-product div.product{
  display:grid;
  grid-template-columns:minmax(0,50%) minmax(0,1fr);
  gap:0 3rem;align-items:start}
/* ⚠️ Le fil d'Ariane est un ENFANT de la grille (Astra donne a `div.product` la
   classe `ast-article-single`, ce qui m'a fait croire le contraire un instant).
   Il faut donc lui donner explicitement la premiere ligne, et descendre la
   galerie et le resume en ligne 2 : sans ces `grid-row`, il se place tout seul
   SOUS les deux colonnes, puisque la ligne 1 est deja pleine.
   Verifie a la mesure : 1200 px de large, au-dessus de la galerie. */
.single-product div.product > .woocommerce-breadcrumb{
  grid-column:1/-1;grid-row:1;margin:0 0 1.1rem;font-size:.85rem}
.single-product div.product > .woocommerce-product-gallery{
  grid-column:1;grid-row:2;float:none !important;width:auto !important;margin:0 !important}
.single-product div.product > .summary{
  grid-column:2;grid-row:2;float:none !important;width:auto !important;margin:0 !important}
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary){
  grid-column:1/-1}
.single-product div.product .woocommerce-product-gallery{margin-bottom:1rem}
.single-product div.product .woocommerce-product-gallery img{border-radius:var(--fl-r-lg)}
.single-product div.product .woocommerce-product-gallery__wrapper{
  background:var(--fl-bg-soft);border-radius:var(--fl-r-lg)}
/* Vignettes de la galerie.
   FlexSlider donne a la liste une hauteur figee + overflow:hidden, et son
   balisage decale l'image de 2 px hors de son <li> : le bas des vignettes
   etait rogne. On rend la liste libre en hauteur et on neutralise le decalage
   (line-height:0 sur le <li>, box-sizing sur l'image). */
.single-product .flex-control-nav.flex-control-thumbs{
  display:flex !important;flex-wrap:wrap;gap:.5rem;align-items:flex-start;
  height:auto !important;max-height:none !important;overflow:visible !important;
  position:static !important;
  margin:.8rem 0 0 !important;padding:2px !important;list-style:none}
.single-product .flex-control-thumbs li{
  width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;float:none !important;
  list-style:none;line-height:0;overflow:visible}
.single-product .flex-control-thumbs img{
  display:block;box-sizing:border-box;
  width:64px !important;height:64px !important;
  object-fit:contain;background:#fff;
  border:1px solid var(--fl-line);border-radius:var(--fl-r-sm);
  padding:4px;margin:0 !important;
  opacity:1 !important;cursor:pointer;
  transition:border-color .2s var(--fl-ease),transform .2s var(--fl-ease)}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active{
  border-color:var(--fl-primary);transform:translateY(-2px)}

.single-product div.product .ast-woo-product-category,
.single-product div.product .product_meta .posted_in{color:var(--fl-muted)}
.single-product div.product .product_title{
  font-size:clamp(1.6rem,3.2vw,2.15rem) !important;
  font-weight:700 !important;letter-spacing:-.024em;
  margin:.15rem 0 .5rem !important;line-height:1.15 !important}
.single-product div.product p.price,
.single-product div.product span.price{
  color:var(--fl-ink) !important;font-size:1.7rem !important;font-weight:700 !important;
  letter-spacing:-.02em;margin:0 0 .25rem !important;display:block}
.single-product div.product p.price del{font-size:1.1rem;color:var(--fl-muted);font-weight:500}
.single-product div.product p.price ins{text-decoration:none}
.ast-shipping-text{display:none !important}   /* filet de securite : « + Free Shipping » */
.fl-price-note{font-size:.82rem;color:var(--fl-muted);margin:0 0 1.1rem}

/* Accroche courte : texte plus petit et plus moderne (n°4) */
.single-product div.product .woocommerce-product-details__short-description{
  font-size:.98rem;line-height:1.7;color:var(--fl-body);margin:0 0 1.4rem}
.single-product div.product .woocommerce-product-details__short-description p{margin:0 0 .25em}
.single-product div.product .woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* Quantite + ajouter au panier */
.single-product div.product form.cart{
  display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;margin:0 0 1.2rem !important}
.single-product div.product form.cart .quantity{margin:0 !important}
.single-product div.product form.cart .quantity input{
  width:4.6rem;text-align:center;padding:.75rem .4rem !important;height:100%}
.single-product div.product form.cart button.button{
  flex:1 1 200px;padding:.8rem 1.6rem !important;font-size:.98rem !important;
  min-height:3rem}
.single-product div.product form.cart .variations{width:100%}
.single-product div.product form.cart .variations td,
.single-product div.product form.cart .variations th{padding:.3rem 0 !important;border:0 !important}

/* --- Sélecteur de coloris (un produit par coloris, reliés par leur famille) --- */
.fl-colors{margin:0 0 1.3rem}
.fl-colors__label{
  font-size:.9rem;color:var(--fl-body);margin:0 0 .6rem;
  display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.fl-colors__label strong{color:var(--fl-ink);font-weight:700}
.fl-colors__count{color:var(--fl-muted);font-size:.83rem}
/* Taille calculee pour que huit coloris tiennent sur une seule ligne dans la
   colonne de droite (8 x 56 px + 7 espaces = ~490 px). */
.fl-colors__list{
  list-style:none;margin:0;padding:2px;display:flex;flex-wrap:wrap;gap:.4rem}
.fl-colors__item{margin:0;padding:0;line-height:0}
.fl-colors__item a{
  display:block;box-sizing:border-box;padding:3px;
  border:2px solid var(--fl-line);border-radius:12px;background:#fff;
  transition:border-color .18s var(--fl-ease),transform .18s var(--fl-ease),box-shadow .18s var(--fl-ease)}
/* La pastille est un gros plan de la matiere : elle doit REMPLIR le carre
   (cover), contrairement a une photo de produit entier (contain). */
.fl-colors__item img{
  display:block;width:46px !important;height:46px !important;
  object-fit:cover;border-radius:8px;margin:0 !important;border:0 !important}
.fl-colors__void{display:block;width:46px;height:46px;border-radius:8px;background:var(--fl-bg-soft)}
.fl-colors__item a:hover{
  border-color:var(--fl-blue-400);transform:translateY(-2px);box-shadow:var(--fl-sh-1)}
.fl-colors__item.is-current a{
  border-color:var(--fl-primary);box-shadow:0 0 0 3px rgba(85,101,230,.14);cursor:default}
/* Coloris épuisé : visible mais clairement barré */
.fl-colors__item.is-out a{opacity:.42}
.fl-colors__item.is-out a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent 46%,var(--fl-coral-700) 46%,var(--fl-coral-700) 54%,transparent 54%)}
.fl-colors__item.is-out{position:relative}
.fl-colors__item.is-out a{position:relative}

/* --- Sélecteur de MODÈLE (Lisse / Picots…) : deux familles reliées par `fl_gamme` --- */
.fl-models{margin:0 0 1.1rem}
.fl-models__label{
  font-size:.9rem;color:var(--fl-body);margin:0 0 .55rem;
  display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
.fl-models__label strong{color:var(--fl-ink);font-weight:700}
.fl-models__list{list-style:none;margin:0;padding:2px;display:flex;flex-wrap:wrap;gap:.5rem}
.fl-models__item{margin:0;padding:0}
/* 44 px de haut : la règle des cibles tactiles du 14 août. */
.fl-models__item a{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1.05rem 0 .4rem;
  border:2px solid var(--fl-line);border-radius:var(--fl-r-pill);background:#fff;
  font-size:.92rem;font-weight:600;color:var(--fl-ink);text-decoration:none;
  transition:border-color .18s var(--fl-ease),transform .18s var(--fl-ease),box-shadow .18s var(--fl-ease),background .18s var(--fl-ease)}
.fl-models__item a:hover{
  border-color:var(--fl-blue-400);transform:translateY(-2px);box-shadow:var(--fl-sh-1)}
.fl-models__item.is-current a{
  border-color:var(--fl-primary);background:var(--fl-blue-50);color:var(--fl-primary);
  box-shadow:0 0 0 3px rgba(85,101,230,.14);cursor:default}
/* La petite image = gros plan de la matière du modèle visé (la pastille de
   coloris), en rond : cannelures ou pyramides se lisent d'un coup d'oeil. */
.fl-models__icone{display:block;line-height:0;flex:0 0 auto}
.fl-models__icone img{
  display:block;width:30px !important;height:30px !important;
  object-fit:cover;border-radius:50%;margin:0 !important;border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.08)}
.fl-models__item a:not(:has(.fl-models__icone)){padding-left:1.15rem}
/* Modèle dont aucun coloris n'est en stock : on le montre quand même, atténué,
   pour que le visiteur découvre qu'il existe. */
.fl-models__item.is-out a{color:var(--fl-muted);border-style:dashed}
.fl-models__item.is-out.is-current a{color:var(--fl-primary);border-style:solid}

/* Nombre de coloris sur les cartes de la boutique */
.woocommerce ul.products li.product .fl-card-colors{
  font-size:.76rem;font-weight:600;color:var(--fl-primary);
  background:var(--fl-blue-50);border-radius:var(--fl-r-pill);
  padding:.1rem .5rem;margin:0 0 .5rem !important;align-self:flex-start}

/* Reassurance sous le bouton */
.fl-trust{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem}
.fl-trust li{
  display:flex;align-items:flex-start;gap:.55rem;font-size:.88rem;color:var(--fl-body)}
.fl-trust svg{width:16px;height:16px;flex:0 0 auto;margin-top:.18rem;color:var(--fl-primary)}
.fl-trust strong{color:var(--fl-ink);font-weight:600}

.single-product div.product .product_meta{
  font-size:.85rem;color:var(--fl-muted);border-top:1px solid var(--fl-line-soft);
  padding-top:1rem;margin-top:.4rem}
.single-product div.product .product_meta > span{display:block;margin-bottom:.25rem}

/* Etoiles */
.woocommerce .star-rating{color:#e8a33d;letter-spacing:.06em}
.woocommerce .star-rating::before{color:#e9e4f0}

/* Resume de note cliquable, juste sous le titre */
.fl-rating-line{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 .8rem;
  font-size:.87rem;color:var(--fl-muted)}
.fl-rating-line .star-rating{margin:0 !important;font-size:.85rem}
.fl-rating-line a{font-weight:600;color:var(--fl-primary)}
.fl-rating-line .fl-dot{opacity:.5}

/* Sections pleine largeur sous le produit */
.fl-psection{
  margin:2.6rem 0 0;padding:1.6rem 1.8rem;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg)}
.fl-psection > h2{
  font-size:1.2rem !important;font-weight:700 !important;letter-spacing:-.018em;
  margin:0 0 1.1rem !important;padding:0 0 .9rem;border-bottom:1px solid var(--fl-line-soft)}

/* -- Avis : compact, place AVANT la description (n°5) -- */
.fl-reviews{background:var(--fl-bg-soft);border-color:var(--fl-line)}
.fl-reviews__top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:0 0 .2rem}
.fl-reviews__score{display:flex;align-items:center;gap:.7rem}
.fl-reviews__score .fl-big{
  font-size:1.5rem;font-weight:700;color:var(--fl-ink);line-height:1;letter-spacing:-.02em}
.fl-reviews__none{color:var(--fl-muted);font-size:.92rem;margin:0}
.fl-star-empty{width:22px;height:22px;color:var(--fl-blue-400);flex:0 0 auto}
.fl-reviews__toggle{
  background:#fff !important;border:1px solid var(--fl-line) !important;
  color:var(--fl-primary) !important;border-radius:var(--fl-r-pill) !important;
  padding:.5rem 1.15rem !important;font-size:.87rem !important;font-weight:600 !important;
  cursor:pointer;transition:background .2s var(--fl-ease),transform .2s var(--fl-ease)}
.fl-reviews__toggle:hover{background:var(--fl-blue-50) !important;transform:translateY(-1px)}
.fl-reviews__panel{display:none;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--fl-line)}
.fl-reviews.is-open .fl-reviews__panel{display:block;animation:fl-slide-down .35s var(--fl-ease)}
/* on reprend la main sur le balisage natif des avis */
.fl-reviews #reviews{margin:0}
.fl-reviews #reviews h2,
.fl-reviews #reviews h3{font-size:1.02rem !important;margin:0 0 .8rem !important;font-weight:700}
.fl-reviews #reviews .woocommerce-noreviews{margin:0 0 1rem}
.fl-reviews #review_form_wrapper{margin:0}
.fl-reviews #respond{background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);padding:1.1rem 1.2rem}
.fl-reviews #respond form{margin:0}
.fl-reviews .comment-form-rating{margin:0 0 1rem}
.fl-reviews .comment-form-rating label{display:block;margin-bottom:.3rem}
.fl-reviews p.stars a{color:#e8a33d}
.fl-reviews .comment-form-comment{margin:0 0 1rem}
.fl-reviews .form-submit{margin:0}
.fl-reviews .form-submit input[type=submit]{
  background:var(--fl-primary-grad) !important;color:#fff !important;border:0 !important;
  border-radius:var(--fl-r-pill) !important;padding:.7rem 1.7rem !important;
  font-family:var(--fl-font) !important;font-size:.93rem !important;font-weight:600 !important;
  text-transform:none !important;letter-spacing:.01em !important;cursor:pointer;
  box-shadow:0 6px 18px rgba(85,101,230,.24) !important;
  transition:transform .2s var(--fl-ease),box-shadow .2s var(--fl-ease) !important}
.fl-reviews .form-submit input[type=submit]:hover{
  transform:translateY(-2px) scale(1.015);box-shadow:0 12px 26px rgba(85,101,230,.3) !important}
.fl-reviews ol.commentlist{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.8rem}
.fl-reviews ol.commentlist li{margin:0;padding:0}
.fl-reviews ol.commentlist .comment_container{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);
  padding:.95rem 1.1rem;display:flex;gap:.85rem}
.fl-reviews ol.commentlist img.avatar{
  position:static !important;width:38px !important;height:38px;border-radius:50%;
  border:0 !important;padding:0 !important;margin:0;float:none !important}
.fl-reviews ol.commentlist .comment-text{margin:0 !important;border:0 !important;padding:0 !important;flex:1}
.fl-reviews ol.commentlist .meta{font-size:.83rem;color:var(--fl-muted);margin:0 0 .3rem}
.fl-reviews ol.commentlist .description p:last-child{margin-bottom:0}
.fl-reviews .comment-reply-title{font-size:1rem;font-weight:700;color:var(--fl-ink);display:block;margin-bottom:.8rem}

/* -- Description complete : texte plus petit, plus aere (n°4) --
   Largeur limitee : au-dela d'environ 75 caracteres par ligne, l'oeil perd la
   ligne suivante. */
.fl-description{font-size:.97rem;line-height:1.78;color:var(--fl-body);max-width:72ch}
.fl-description h2,.fl-description h3,.fl-description h4{
  font-size:1.05rem !important;font-weight:700 !important;color:var(--fl-ink);
  letter-spacing:-.014em;margin:1.9rem 0 .6rem !important;line-height:1.3 !important}
.fl-description > *:first-child{margin-top:0 !important}
.fl-description p{margin:0 0 .95rem}
.fl-description ul,.fl-description ol{margin:0 0 1.1rem;padding-left:0;list-style:none}
.fl-description ul li{
  position:relative;padding-left:1.5rem;margin-bottom:.55rem}
.fl-description ul li::before{
  content:"";position:absolute;left:.35rem;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--fl-violet-400)}
.fl-description ol{counter-reset:fl;padding-left:0}
.fl-description ol li{position:relative;padding-left:1.7rem;margin-bottom:.55rem;counter-increment:fl}
.fl-description ol li::before{
  content:counter(fl);position:absolute;left:0;top:.05em;width:1.15rem;height:1.15rem;
  border-radius:50%;background:var(--fl-violet-100);color:var(--fl-violet-700);
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.fl-description strong{color:var(--fl-ink);font-weight:600}
.fl-description .fl-note{
  background:var(--fl-coral-50);border:1px solid var(--fl-coral-200);
  border-radius:var(--fl-r);padding:.85rem 1.05rem;font-size:.9rem;color:#8a3a30}

/* produits lies / ventes croisees */
.single-product .related,.single-product .upsells{margin-top:3rem}
.single-product .related > h2,.single-product .upsells > h2{
  font-size:1.35rem !important;font-weight:700 !important;margin:0 0 1.2rem !important}

/* « Les gens aiment aussi… » */
.fl-aussi{margin:3rem 0 0;padding-top:2.2rem;border-top:1px solid var(--fl-line-soft)}
.fl-aussi__titre{
  font-size:1.3rem !important;font-weight:700 !important;letter-spacing:-.018em;
  margin:0 0 1.3rem !important}
.fl-aussi ul.products{
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr)) !important}

/* on n'utilise plus les onglets natifs */
.single-product .woocommerce-tabs{display:none !important}

/* --------------------------------------------------------------------------
   11. LIVRAISON OFFERTE : barre de progression (demande n°13)
   -------------------------------------------------------------------------- */
/* -- version compacte dans l'en-tete, en haut a droite -- */
.fl-shipbar{display:flex;align-items:center;margin-right:.7rem}
.fl-shipbar__pill{
  display:flex;align-items:center;gap:.55rem;
  background:var(--fl-bg-soft);border:1px solid var(--fl-line);
  border-radius:var(--fl-r-pill);padding:.3rem .75rem;
  max-width:280px;text-decoration:none}
.fl-shipbar__pill:hover{border-color:var(--fl-blue-200);background:var(--fl-blue-50)}
.fl-shipbar__track{
  width:52px;height:6px;flex:0 0 auto;border-radius:var(--fl-r-pill);
  background:var(--fl-line);overflow:hidden}
.fl-shipbar__fill{
  display:block;height:100%;border-radius:var(--fl-r-pill);
  background:var(--fl-primary-grad);transition:width .5s var(--fl-ease)}
.fl-shipbar__txt{
  font-size:.72rem;font-weight:600;line-height:1.25;color:var(--fl-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-shipbar.is-done .fl-shipbar__pill{background:var(--fl-ok-bg);border-color:#c9e6dc}
.fl-shipbar.is-done .fl-shipbar__fill{background:var(--fl-ok)}
.fl-shipbar.is-done .fl-shipbar__txt{color:var(--fl-ok)}
.fl-shipbar.is-empty{display:none}

/* -- version large : panier, tiroir, fiche produit -- */
.fl-ship{
  background:var(--fl-blue-50);border:1px solid var(--fl-blue-200);
  border-radius:var(--fl-r);padding:.9rem 1.1rem;margin:0 0 1.4rem}
.fl-ship__msg{
  font-size:.92rem;color:var(--fl-ink);margin:0 0 .6rem;
  display:flex;align-items:center;gap:.5rem;line-height:1.4}
.fl-ship__msg svg{width:17px;height:17px;flex:0 0 auto;color:var(--fl-primary)}
.fl-ship__msg strong{font-weight:700}
.fl-ship__track{height:8px;border-radius:var(--fl-r-pill);background:#fff;
  border:1px solid var(--fl-blue-200);overflow:hidden}
.fl-ship__fill{
  display:block;height:100%;border-radius:var(--fl-r-pill);
  background:var(--fl-primary-grad);transition:width .6s var(--fl-ease)}
.fl-ship.is-done{background:var(--fl-ok-bg);border-color:#c9e6dc}
.fl-ship.is-done .fl-ship__msg{color:var(--fl-ok)}
.fl-ship.is-done .fl-ship__msg svg{color:var(--fl-ok)}
.fl-ship.is-done .fl-ship__track{border-color:#c9e6dc}
.fl-ship.is-done .fl-ship__fill{background:var(--fl-ok)}

/* --------------------------------------------------------------------------
   12. PANIER (demande n°12)
   -------------------------------------------------------------------------- */
.woocommerce-cart .entry-content > .wp-block-group h1,
.woocommerce-cart h1.has-text-align-center{
  text-align:left !important;font-size:clamp(1.7rem,3.4vw,2.3rem) !important;
  margin:0 0 1.4rem !important}
/* :not(.widget) : épargne le tiroir du panier, voir la section 15. */
.woocommerce-cart .woocommerce:not(.widget){
  display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);
  gap:1.6rem;align-items:start}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .fl-ship{grid-column:1/-1;margin-bottom:0}
.woocommerce-cart form.woocommerce-cart-form{grid-column:1;min-width:0}
.woocommerce-cart .cart-collaterals{
  grid-column:2;width:100% !important;float:none !important;margin:0 !important;
  position:sticky;top:1.5rem}
.woocommerce-cart .cart-collaterals .cart_totals{width:100% !important;float:none !important}
.woocommerce-cart .cross-sells{grid-column:1/-1;width:100% !important;float:none !important}

/* liste des articles : plus de tableau visuel, des cartes */
.woocommerce-cart table.cart{
  border:0 !important;border-collapse:separate;border-spacing:0 .7rem;
  margin:0 !important;width:100%}
.woocommerce-cart table.cart thead{display:none}
.woocommerce-cart table.cart tbody{display:block;width:100%}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto 28px;
  grid-template-areas:"img info price remove" "img qty price remove";
  gap:.2rem 1rem;align-items:center;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);
  padding:.85rem 1rem;
  transition:border-color .2s var(--fl-ease),box-shadow .2s var(--fl-ease)}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item:hover{
  border-color:var(--fl-blue-200);box-shadow:var(--fl-sh-1)}
.woocommerce-cart table.cart td{border:0 !important;padding:0 !important;background:none !important}
.woocommerce-cart table.cart td.product-thumbnail{grid-area:img;width:76px}
.woocommerce-cart table.cart td.product-thumbnail img{
  width:76px !important;height:76px;object-fit:contain;background:var(--fl-bg-soft);
  border-radius:var(--fl-r-sm);padding:.3rem}
.woocommerce-cart table.cart td.product-name{grid-area:info;font-size:.98rem}
.woocommerce-cart table.cart td.product-name a{
  font-weight:600;color:var(--fl-ink);font-size:.98rem;line-height:1.3}
.woocommerce-cart table.cart td.product-name a:hover{color:var(--fl-primary)}
.woocommerce-cart table.cart td.product-name .variation{
  font-size:.83rem;color:var(--fl-muted);margin:.2rem 0 0}
.woocommerce-cart table.cart td.product-name dl.variation dt,
.woocommerce-cart table.cart td.product-name dl.variation dd{
  display:inline;margin:0 .25rem 0 0;font-size:.83rem}
.woocommerce-cart table.cart td.product-price{display:none}   /* le sous-total suffit */
.woocommerce-cart table.cart td.product-quantity{grid-area:qty}
.woocommerce-cart table.cart td.product-subtotal{
  grid-area:price;text-align:right;font-weight:700;color:var(--fl-ink);font-size:1.02rem;
  white-space:nowrap}
.woocommerce-cart table.cart td.product-remove{
  grid-area:remove;justify-self:end;align-self:center}
/* La croix « retirer cet article ». Voir la regle commune `.fl-x` plus bas :
   elle sert ici ET dans le tiroir du panier. */
.woocommerce-cart table.cart .quantity{display:inline-flex}
.woocommerce-cart table.cart .quantity input.qty{
  width:4rem;text-align:center;padding:.4rem .3rem !important;font-size:.9rem !important;
  background:var(--fl-bg-soft) !important}
/* ligne « coupon + actualiser » */
.woocommerce-cart table.cart tr:last-child td.actions{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  padding:.2rem 0 0 !important;background:none !important;border:0 !important}
.woocommerce-cart table.cart td.actions .coupon{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0;
  padding:0 !important;border:0 !important;float:none !important}
.woocommerce-cart table.cart td.actions .coupon label{display:none}
.woocommerce-cart table.cart td.actions .coupon input#coupon_code{
  width:auto !important;min-width:11rem;padding:.6rem .95rem !important;font-size:.9rem !important}
/* Ces deux boutons sont des actions secondaires : ils ne doivent pas rivaliser
   avec « Commander ». Version discrete, contour fin. */
.woocommerce-cart table.cart td.actions .coupon button,
.woocommerce-cart table.cart td.actions button[name="update_cart"]{
  background:#fff !important;color:var(--fl-primary) !important;
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r-pill) !important;
  padding:.58rem 1.15rem !important;font-size:.87rem !important;font-weight:600 !important;
  text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
  float:none !important;cursor:pointer;transform:none !important;
  transition:background .2s var(--fl-ease),border-color .2s var(--fl-ease) !important}
.woocommerce-cart table.cart td.actions .coupon button:hover,
.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover{
  background:var(--fl-blue-50) !important;border-color:var(--fl-blue-200) !important}
.woocommerce-cart table.cart td.actions button[name="update_cart"]:disabled{
  opacity:.45;cursor:default}

/* carte des totaux */
.woocommerce-cart .cart_totals > h2{
  font-size:1.05rem !important;font-weight:700 !important;margin:0 0 .9rem !important}
.woocommerce-cart .cart_totals table.shop_table{
  border:0 !important;margin:0 0 1rem !important;width:100%}
.woocommerce-cart .cart-collaterals .cart_totals{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.3rem 1.4rem;box-shadow:var(--fl-sh-1)}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
  border:0 !important;border-bottom:1px solid var(--fl-line-soft) !important;
  padding:.65rem 0 !important;background:none !important;font-size:.94rem;vertical-align:top}
.woocommerce-cart .cart_totals table.shop_table th{
  font-weight:500 !important;color:var(--fl-body) !important;text-align:left;width:auto}
.woocommerce-cart .cart_totals table.shop_table td{text-align:right;color:var(--fl-ink);font-weight:600}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td{
  border-bottom:0 !important;padding-top:.9rem !important;font-size:1.12rem}
.woocommerce-cart .cart_totals tr.order-total th{font-weight:700 !important;color:var(--fl-ink) !important}
.woocommerce-cart .cart_totals tr.order-total .amount{font-weight:700;letter-spacing:-.015em}
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-cart .cart_totals small{
  display:block;font-size:.78rem;color:var(--fl-muted);font-weight:500}
.woocommerce-cart .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;text-align:left}
.woocommerce-cart .cart_totals ul#shipping_method li{
  margin:0 0 .3rem;padding:0;display:flex;align-items:center;gap:.45rem;font-size:.9rem}
.woocommerce-cart .cart_totals ul#shipping_method input{accent-color:var(--fl-primary);margin:0}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
  font-size:.82rem;color:var(--fl-muted);margin:.4rem 0 0}
/* La colonne des montants est alignee a droite : les phrases d'explication et
   le lien « calculer les frais » y devenaient illisibles. */
.woocommerce-cart .cart_totals td.product-name,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
.woocommerce-cart .cart_totals p{text-align:left;font-weight:500}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th{vertical-align:top}
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator a{
  font-size:.84rem;font-weight:600;display:inline-block;margin-top:.3rem}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td > *:first-child{margin-top:0}
/* Paiement express (Apple Pay / Google Pay) dans la carte des totaux */
.woocommerce-cart .cart_totals #wc-stripe-express-checkout-element,
.woocommerce-cart .wc-proceed-to-checkout #wc-stripe-express-checkout-element{
  margin:0 0 .7rem}
.woocommerce-cart .wc-stripe-express-checkout__button-separator{
  display:flex;align-items:center;gap:.6rem;color:var(--fl-muted);font-size:.8rem;
  margin:.7rem 0}
.woocommerce-cart .wc-proceed-to-checkout{padding:0 !important}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:block;width:100%;text-align:center;margin:0 !important}
.fl-cart-secure{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.8rem;color:var(--fl-muted);margin:.85rem 0 0}
.fl-cart-secure svg{width:14px;height:14px}
.fl-cart-continue{
  display:block;text-align:center;font-size:.87rem;font-weight:600;margin:.8rem 0 0;
  color:var(--fl-primary)}

/* panier vide */
.woocommerce-cart .cart-empty{
  border:1px dashed var(--fl-line) !important;background:var(--fl-bg-soft) !important;
  border-top:1px dashed var(--fl-line) !important;text-align:center;
  padding:2.4rem 1.5rem !important}
.woocommerce-cart .cart-empty::before{display:none !important}
.woocommerce-cart .return-to-shop{text-align:center;margin-top:1.2rem}

/* --------------------------------------------------------------------------
   13. TIROIR PANIER (Astra flyout) — habillage
   -------------------------------------------------------------------------- */
#astra-mobile-cart-drawer,.ast-site-header-cart .widget_shopping_cart{font-family:var(--fl-font)}
.ast-desktop-cart-flyout .ast-site-header-cart .widget_shopping_cart,
#astra-mobile-cart-drawer{background:#fff}
.ast-cart-drawer-title,.ast-mobile-cart-drawer-title{
  font-size:1.02rem !important;font-weight:700 !important;color:var(--fl-ink) !important;
  letter-spacing:-.015em}
/* Le balisage natif imbrique l'image DANS le lien du produit : une grille ne
   peut donc pas les placer separement. On passe par un positionnement absolu,
   insensible a la structure. */
.widget_shopping_cart .cart_list{padding:0;margin:0;list-style:none}
.widget_shopping_cart .cart_list li{
  position:relative;display:block;margin:0;
  padding:.75rem 2.2rem .75rem 4.5rem !important;
  border-bottom:1px solid var(--fl-line-soft) !important}
.widget_shopping_cart .cart_list li img{
  position:absolute;left:0;top:.75rem;
  width:56px !important;height:56px;object-fit:contain;
  background:var(--fl-bg-soft);border-radius:var(--fl-r-sm);padding:.25rem;
  float:none !important;margin:0 !important;border:0 !important}
.widget_shopping_cart .cart_list li a:not(.remove){
  display:block;font-size:.92rem;font-weight:600;color:var(--fl-ink);line-height:1.35;
  padding:0 !important;text-decoration:none}
.widget_shopping_cart .cart_list li .quantity{
  display:block;font-size:.85rem;color:var(--fl-muted);margin-top:.2rem}
.widget_shopping_cart .cart_list li dl.variation{font-size:.8rem;color:var(--fl-muted);margin:.15rem 0 0}
/* Dans le tiroir, la croix est posee au bord droit, centree sur la ligne.
   On centre avec `margin-top` et non `translateY` : la transform est reservee
   a l'effet de survol, les deux se marcheraient dessus.
   ⚠️ `top` et `margin-top` sont en `!important` : WooCommerce pose un `top:0`
   avec une specificite superieure a la notre (`.woocommerce .widget_shopping_cart
   .cart_list li a.remove`), et la croix remontait de 15 px hors de sa ligne. */
.widget_shopping_cart .cart_list li a.remove{
  position:absolute;right:0;left:auto !important;
  top:50% !important;margin-top:-15px !important}

/* --------------------------------------------------------------------------
   LA CROIX « RETIRER CET ARTICLE » — page panier + tiroir
   Astra la sortait en `opacity:.5` dans un cercle de 1 px, et le « x » etait
   un simple caractere de police : delave, mal centre, et son epaisseur
   changeait avec la police. On neutralise tout ca et on dessine l'icone
   (variable `--fl-icon-close`). La cible tactile fait 30 px, bien au-dela du
   glyphe de 13 px : on clique juste sans qu'un gros bouton alourdisse la ligne.
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart td.product-remove a.remove,
.widget_shopping_cart .cart_list li a.remove{
  display:grid !important;place-items:center;
  width:30px !important;height:30px !important;
  padding:0 !important;border:0 !important;border-radius:50%;
  background:transparent !important;
  font-size:0 !important;line-height:0 !important;   /* masque le « x » natif */
  opacity:1 !important;                              /* Astra le mettait a .5 */
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s var(--fl-ease),transform .18s var(--fl-ease)}
/* Astra glisse SA propre icone dans le lien (`<span class="ahfb-svg-iconset">`).
   Sans ce masquage, elle s'affiche EN PLUS de la notre, decalee de quelques
   pixels : on voyait deux croix superposees. */
.woocommerce-cart table.cart td.product-remove a.remove .ahfb-svg-iconset,
.widget_shopping_cart .cart_list li a.remove .ahfb-svg-iconset{display:none !important}
/* ⚠️ Astra pose `position:absolute` sur CE pseudo-element (il lui sert a placer
   sa propre icone). Un enfant absolu n'est plus centre par la grille du
   parent : la croix se retrouvait dans le coin haut-gauche du disque rouge,
   defaut repere par Vianney le 14 aout. On la centre donc explicitement, ce
   qui marche quel que soit le `display` du lien.
   `translate` en propriete autonome, pour ne pas ecraser un `transform`. */
.woocommerce-cart table.cart td.product-remove a.remove::before,
.widget_shopping_cart .cart_list li a.remove::before{
  content:"";width:13px;height:13px;
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  background-color:var(--fl-muted);
  -webkit-mask:var(--fl-icon-close) center/contain no-repeat;
          mask:var(--fl-icon-close) center/contain no-repeat;
  transition:background-color .18s var(--fl-ease)}
.woocommerce-cart table.cart td.product-remove a.remove:hover,
.widget_shopping_cart .cart_list li a.remove:hover{
  background-color:var(--fl-coral-100) !important;transform:scale(1.08)}
.woocommerce-cart table.cart td.product-remove a.remove:hover::before,
.widget_shopping_cart .cart_list li a.remove:hover::before{
  background-color:var(--fl-coral-700)}
.woocommerce-cart table.cart td.product-remove a.remove:active,
.widget_shopping_cart .cart_list li a.remove:active{transform:scale(.92)}
.woocommerce-cart table.cart td.product-remove a.remove:focus-visible,
.widget_shopping_cart .cart_list li a.remove:focus-visible{
  background-color:var(--fl-coral-100) !important;
  outline:2px solid var(--fl-coral-400);outline-offset:2px}
.woocommerce-cart table.cart td.product-remove a.remove:focus-visible::before,
.widget_shopping_cart .cart_list li a.remove:focus-visible::before{
  background-color:var(--fl-coral-700)}
@media(prefers-reduced-motion:reduce){
  .woocommerce-cart table.cart td.product-remove a.remove,
  .widget_shopping_cart .cart_list li a.remove{transition:none}
  .woocommerce-cart table.cart td.product-remove a.remove:hover,
  .widget_shopping_cart .cart_list li a.remove:hover,
  .woocommerce-cart table.cart td.product-remove a.remove:active,
  .widget_shopping_cart .cart_list li a.remove:active{transform:none}}
.widget_shopping_cart .total{
  border-top:1px solid var(--fl-line) !important;padding-top:.9rem !important;margin-top:.9rem;
  font-size:1rem;color:var(--fl-ink)}
.widget_shopping_cart .total strong{font-weight:600;color:var(--fl-body)}
.widget_shopping_cart .total .amount{font-weight:700;float:right}
.widget_shopping_cart .buttons{display:grid;gap:.55rem;margin:1rem 0 0}
.widget_shopping_cart .buttons a{
  display:block;text-align:center;width:100%;margin:0 !important;
  padding:.72rem 1.2rem !important;font-size:.93rem !important}
.widget_shopping_cart .buttons a.checkout,
.woocommerce .widget_shopping_cart .buttons a.checkout{
  background:var(--fl-primary-grad) !important;color:#fff !important;border:0 !important;
  border-radius:var(--fl-r-pill) !important;   /* restait carré à côté de « Voir le panier » arrondi (29 sept.) */
  box-shadow:0 6px 18px rgba(85,101,230,.24) !important}
.widget_shopping_cart .buttons a.checkout:hover{
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(85,101,230,.32) !important}
.widget_shopping_cart .fl-ship{margin:.2rem 0 .9rem;padding:.75rem .85rem}
.widget_shopping_cart .fl-ship__msg{font-size:.85rem;margin-bottom:.5rem}
.widget_shopping_cart .woocommerce-mini-cart__empty-message{
  color:var(--fl-muted);text-align:center;padding:2rem 0}

/* --------------------------------------------------------------------------
   14. COMMANDE (checkout)
   -------------------------------------------------------------------------- */
.woocommerce-checkout h1.has-text-align-center{
  text-align:left !important;font-size:clamp(1.7rem,3.4vw,2.3rem) !important;margin:0 0 1.4rem !important}
/* Colonne gauche = .fl-checkout-left (ajoutee par le plugin), colonne droite =
   titre + recapitulatif. Chaque bloc a une place explicite : aucun element
   ajoute par une extension ne peut decaler la mise en page. */
/* ⚠️ ASTRA FORCE « width:50%; float:right » SUR LE RECAPITULATIF.
   Dans sa feuille de compatibilité WooCommerce :
     .woocommerce-checkout form #order_review,
     .woocommerce-checkout form #order_review_heading{width:50%;float:right;clear:right}
   Son sélecteur contient « form », donc il est PLUS SPÉCIFIQUE que le nôtre et il
   gagnait : le récapitulatif ne faisait que la moitié de sa colonne (148 px sur
   370), le titre « Votre commande » passait à la ligne et chevauchait le tableau.
   C'est le bug signalé par Vianney le 11 août. On neutralise largeur ET flottement,
   avec un sélecteur au moins aussi précis (« form » inclus). */
.woocommerce-checkout form #order_review,
.woocommerce-checkout form #order_review_heading{
  width:auto !important;float:none !important;clear:none !important}

.woocommerce-checkout form.checkout{
  /* Colonne de droite élargie le 11 août (Vianney : « élargie le bloc Votre
     commande, il est pas terrible »). Passée de 370 à 520 px : c'est la largeur
     qui règle les DEUX problèmes à la fois, le nom de produit s'étalant sur
     5 lignes et « Livraison à domicile : 4,90 € » passant à la ligne. En dessous,
     les deux se disputent la place et il faut sacrifier l'un ou l'autre. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  /* Ligne 1 = le titre, ligne 2 = le récapitulatif. La 2ᵉ prend « 1fr » pour
     absorber toute la hauteur de la colonne de gauche : sans ça, la zone du
     récapitulatif ferait exactement sa taille et « position:sticky » n'aurait
     aucune course pour glisser. */
  grid-template-rows:auto 1fr;
  column-gap:2rem;row-gap:.8rem;align-items:start}
.woocommerce-checkout form.checkout > *{grid-column:1}
.woocommerce-checkout .fl-checkout-left{grid-column:1;grid-row:1 / -1;min-width:0}
.woocommerce-checkout h3#order_review_heading{
  grid-column:2;grid-row:1;align-self:start;margin:0 !important;
  padding:0 !important;
  /* Le thème pose un « border-top:2px » sur ce titre : un filet parasite
     traversait la colonne juste au-dessus de « Votre commande ». */
  border:0 !important;
  font-size:1.1rem !important;font-weight:700 !important}
.woocommerce-checkout #order_review{
  grid-column:2;grid-row:2;align-self:start;margin:0 !important;
  position:sticky;top:1.5rem;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.3rem 1.4rem !important;box-shadow:var(--fl-sh-1)}
/* Récapitulatif : la colonne des intitulés prenait 234 px sur 391, écrasant celle
   des montants à 157 px — « Livraison à domicile : 4,90 € » et le total passaient
   donc à la ligne.
   ⚠️ Première tentative avec « width:1% » + « white-space:nowrap » sur les
   montants : ça a créé un DÉBORDEMENT HORIZONTAL de la page (le tableau devenait
   plus large que sa carte, 472 px pour 394 disponibles). Ne pas refaire.
   Solution retenue : « table-layout:fixed » — l'intitulé ne peut plus réclamer sa
   largeur minimale, les deux colonnes se partagent la place à parts égales, et
   rien ne peut dépasser. */
.woocommerce-checkout #order_review .shop_table{table-layout:fixed;width:100%}
/* ⚠️ La ligne article utilise DEUX « td » (product-name / product-total), pas un
   « th ». Régler « th,td{width:50%} » écrasait donc le nom du produit, qui se
   hachait sur cinq lignes. Avec « table-layout:fixed », seule la PREMIÈRE ligne
   compte : on donne donc les largeurs à l'en-tête, et tout le tableau suit.
   Deux tiers pour l'intitulé, un tiers pour les montants. */
.woocommerce-checkout #order_review .shop_table thead th:first-child{width:66%}
.woocommerce-checkout #order_review .shop_table thead th:last-child{width:34%}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td{overflow-wrap:break-word}
.woocommerce-checkout #order_review .woocommerce-shipping-totals td{font-size:.9rem}
/* La mention de TVA passe sous le montant, en plus discret. */
.woocommerce-checkout #order_review .order-total td small,
.woocommerce-checkout #order_review .order-total td .includes_tax{
  display:block;white-space:normal;
  font-size:.78rem;font-weight:400;opacity:.65;margin-top:.15rem}

.woocommerce-checkout #customer_details{width:auto !important;float:none !important}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:auto !important;float:none !important}
.woocommerce-checkout #customer_details .col2-set{display:block;width:auto !important}
/* Paiement express Stripe : Apple Pay et Google Pay CÔTE À CÔTE.
   Stripe rend deux blocs frères (#...-applePay et #...-googlePay) dans un
   conteneur déjà en flex, mais empilés. On passe donc en ligne et on partage la
   largeur à parts égales : les iframes de Stripe se redimensionnent d'eux-mêmes.
   Choix de Vianney (11 août) : « met le Google Pay à droite de Apple Pay ». */
.woocommerce-checkout #wc-stripe-express-checkout-element{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap;
  gap:.75rem;max-width:520px;margin-left:0;margin-right:auto;align-items:stretch}
.woocommerce-checkout #wc-stripe-express-checkout-element > .StripeElement{
  flex:1 1 0;min-width:0}
.woocommerce-checkout .wc-stripe-express-checkout__button-separator{
  max-width:520px;margin-left:0;margin-right:auto}
/* Sur un écran étroit, on revient à l'empilement : deux boutons de 130 px
   côte à côte seraient illisibles. */
@media(max-width:520px){
  .woocommerce-checkout #wc-stripe-express-checkout-element{
    flex-direction:column !important;gap:.6rem}
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.3rem 1.4rem;margin:0 0 1.1rem}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{
  font-size:1.05rem !important;font-weight:700 !important;margin:0 0 1rem !important}
.woocommerce-checkout table.shop_table{border:0 !important;margin:0 !important}

/* ==========================================================================
   COMMANDE — version compacte et rassurante (11 août 2026)
   Demande de Vianney : « plus pro, plus rassurante », « plus compact, comme des
   gros sites qui marchent ». Trois principes : moins de vide, une hiérarchie
   claire, et des repères de confiance là où le client hésite.
   ========================================================================== */

/* --- 1. Paiement express : bloc centré, titré, séparé proprement --- */
.woocommerce-checkout .fl-express-titre{
  max-width:520px;margin:0 auto .6rem !important;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fl-muted);text-align:center}
/* Si aucun portefeuille n'est disponible, Stripe laisse son conteneur vide :
   on masque alors le titre plutôt que d'annoncer un paiement inexistant. */
.woocommerce-checkout .fl-checkout-left:has(#wc-stripe-express-checkout-element:empty) .fl-express-titre,
.woocommerce-checkout .fl-checkout-left:not(:has(#wc-stripe-express-checkout-element)) .fl-express-titre{
  display:none}
.woocommerce-checkout #wc-stripe-express-checkout-element{
  margin-left:auto !important;margin-right:auto !important}
/* « OU » devient un vrai séparateur : un filet de chaque côté du mot.
   ⚠️ Stripe rend ce séparateur dans un <p> SANS AUCUNE CLASSE, enfant direct de
   « .fl-checkout-left ». Viser « .wc-stripe-express-checkout__button-separator »
   ne marchait pas. « > p:not([class]) » l'identifie sans ambiguïté : tous les
   autres paragraphes de la colonne portent une classe (« form-row… », la nôtre). */
.woocommerce-checkout .fl-checkout-left > p:not([class]){
  display:flex !important;align-items:center;gap:.9rem;
  max-width:520px;margin:1.2rem auto !important;
  font-size:.8rem;color:var(--fl-muted);text-transform:lowercase}
.woocommerce-checkout .fl-checkout-left > p:not([class])::before,
.woocommerce-checkout .fl-checkout-left > p:not([class])::after{
  content:"";flex:1 1 auto;height:1px;background:var(--fl-line);
  border:0;margin:0}

/* --- 2. Compacité : moins de vide dans les cartes et entre les champs --- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  padding:1.05rem 1.15rem;margin:0 0 .8rem}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{
  font-size:.98rem !important;margin:0 0 .8rem !important;
  padding-bottom:.6rem;border-bottom:1px solid var(--fl-line-soft)}
.woocommerce-checkout .form-row{margin-bottom:.65rem !important;padding:0 !important}
/* « Expédier à une adresse différente ? » : une seule case à cocher n'a pas besoin
   d'une carte de 107 px de haut. */
.woocommerce-checkout .woocommerce-shipping-fields{padding:.85rem 1.15rem}
.woocommerce-checkout .woocommerce-shipping-fields > h3{
  margin:0 !important;padding:0 !important;border:0 !important;font-weight:600 !important}
.woocommerce-checkout .woocommerce-shipping-fields h3 label{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;font-size:.94rem}
.woocommerce-checkout .shipping_address{padding-top:.9rem}
.woocommerce-checkout .form-row label{
  font-size:.82rem !important;margin-bottom:.25rem !important;display:block}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single{
  padding:.6rem .8rem !important;min-height:0 !important;height:auto !important;
  font-size:.94rem !important}
.woocommerce-checkout .form-row textarea{min-height:76px !important}

/* Deux colonnes, avec code postal et ville côte à côte : c'est ce que font les
   grandes boutiques, et ça supprime deux lignes de formulaire. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{
  grid-column:1 / -1;width:auto !important;float:none !important}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #shipping_postcode_field,
.woocommerce-checkout #shipping_city_field{grid-column:span 1}
@media(max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    grid-template-columns:1fr}
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-checkout #billing_postcode_field,
  .woocommerce-checkout #billing_city_field{grid-column:1 / -1}
}

/* --- 3. Code promo : une ligne discrète, plus un bandeau qui saute aux yeux --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0 0 1.1rem}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:none !important;border:0 !important;
  padding:0 !important;margin:0 !important;
  font-size:.86rem !important;color:var(--fl-muted) !important}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none !important}

/* --- 4. Récapitulatif : vignettes, lignes serrées, total qui ressort --- */
.woocommerce-checkout #order_review .fl-recap__ligne{
  display:flex;align-items:center;gap:.6rem}
.woocommerce-checkout #order_review .fl-recap__img{
  width:44px;height:44px;flex:0 0 44px;border-radius:10px;
  border:1px solid var(--fl-line);background:#fff;object-fit:cover}
.woocommerce-checkout #order_review .fl-recap__nom{
  font-size:.88rem;line-height:1.35;overflow-wrap:break-word;min-width:0}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td{
  padding:.6rem 0 !important;vertical-align:middle}
.woocommerce-checkout #order_review .cart-subtotal th,
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .woocommerce-shipping-totals th,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td{font-size:.9rem}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{
  padding-top:.85rem !important;font-size:1.12rem;font-weight:700}
.woocommerce-checkout #order_review thead th{
  font-size:.72rem;letter-spacing:.05em;color:var(--fl-muted)}

/* --- 5. Bouton de paiement : pleine largeur ---
   ⛔ Pas d'icône dedans : le JavaScript de WooCommerce réécrit le contenu du
   bouton depuis son attribut « data-value » à chaque mise à jour du récapitulatif,
   et l'efface. Le cadenas est dans le bandeau de réassurance, juste en dessous. */
.woocommerce-checkout #place_order{
  display:block;width:100%;margin-top:.4rem;text-align:center}

/* --- 6. Bandeau de réassurance sous le bouton ---
   ⚠️ DEUX PIÈGES déjà rencontrés ici, ne pas les refaire :
   1. En « display:grid », le conteneur tombait à 0 px de large (aucune règle CSS
      ne le demandait — ni le thème, ni nous).
   2. En <ul>/<li>, le PREMIER <li> tombait à 0 px de large et sa phrase
      s'affichait à un mot par ligne, sur 1 094 px de haut.
   D'où un simple <div> avec des <p> : aucun style de liste, aucune grille. */
.fl-checkout-trust{
  display:block;width:auto;
  margin:.9rem 0 0;padding:.9rem 0 0;
  border-top:1px solid var(--fl-line-soft)}
.fl-checkout-trust p{
  display:flex;align-items:flex-start;gap:.5rem;
  /* ⚠️ « width:100% » EST INDISPENSABLE. Sans lui, la largeur automatique de ce
     conteneur flex se calcule à 0 dans la colonne de paiement (reproduit à
     1280 px et plus, jamais en dessous de 921), et seul le PREMIER paragraphe
     est touché. Testé : « width:100% » et « display:block » corrigent, retirer
     l'icône ou changer l'overflow du parent ne change rien. */
  width:100%;
  font-size:.8rem;line-height:1.45;color:var(--fl-muted);
  margin:0 0 .45rem !important}
.fl-checkout-trust p:last-child{margin-bottom:0 !important}
.fl-checkout-trust p span{flex:1 1 auto;min-width:0}
.fl-checkout-trust svg{
  width:15px;height:15px;flex:0 0 15px;margin-top:.12rem;
  stroke:currentColor;fill:none;stroke-width:1.7}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
  border:0 !important;border-bottom:1px solid var(--fl-line-soft) !important;
  padding:.6rem 0 !important;background:none !important;font-size:.93rem}
.woocommerce-checkout table.shop_table thead th{
  font-weight:700 !important;color:var(--fl-ink) !important;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em}
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td{
  border-bottom:0 !important;font-size:1.1rem;padding-top:.85rem !important}
.woocommerce-checkout #payment{
  background:var(--fl-bg-soft) !important;border-radius:var(--fl-r) !important;
  border:1px solid var(--fl-line);margin-top:1.1rem}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--fl-line) !important;padding:1rem !important}
.woocommerce-checkout #payment div.form-row{padding:1rem !important}
.woocommerce-checkout #payment #place_order{width:100%}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:0 0 1rem}
.woocommerce-checkout .form-row.validate-required label .required{color:var(--fl-coral-700)}
.woocommerce-checkout .woocommerce-privacy-policy-text p{font-size:.82rem;color:var(--fl-muted)}
/* page de confirmation */
.woocommerce-order-received .woocommerce-order{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);padding:1.6rem 1.8rem}
.woocommerce-order-received ul.woocommerce-order-overview{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;margin:1.4rem 0;padding:0;border:0}
.woocommerce-order-received ul.woocommerce-order-overview li{
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r);padding:.8rem 1rem;
  margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fl-muted)}
.woocommerce-order-received ul.woocommerce-order-overview li strong{
  display:block;margin-top:.3rem;font-size:1rem;text-transform:none;letter-spacing:0;
  color:var(--fl-ink)}

/* --------------------------------------------------------------------------
   15. ESPACE CLIENT /profil (demandes n°1 et n°2)
   -------------------------------------------------------------------------- */
.woocommerce-account .site-content > .ast-container{padding-top:1.2rem !important}
.woocommerce-account .entry-content > p:first-child{
  margin:0 0 1.4rem !important;font-size:.96rem;color:var(--fl-muted);
  text-align:left !important}
/* ⚠️ :not(.widget) — le TIROIR DU PANIER (div.widget.woocommerce.widget_shopping_cart)
   porte lui aussi la classe « woocommerce ». Sans cette exclusion, cette mise en
   flex le frappait sur /profil/ une fois connecté : contenu du tiroir écrasé dans
   une colonne de 333 px sur 667 (signalé par Vianney le 29 sept. 2026, « la page
   panier est cassée »). Même exclusion sur la grille du panier (section 10). */
.woocommerce-account .woocommerce:not(.widget){
  display:flex !important;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.woocommerce-account .woocommerce-notices-wrapper{flex:1 1 100%;order:0}
.woocommerce-account .woocommerce-MyAccount-navigation{
  flex:0 0 236px !important;width:236px !important;max-width:100% !important;
  float:none !important;order:1;margin:0 !important;position:sticky;top:1.5rem}
.woocommerce-account .woocommerce-MyAccount-content{
  flex:1 1 420px !important;width:auto !important;max-width:100% !important;
  float:none !important;order:2;min-width:0;margin:0 !important;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.7rem 1.9rem;box-shadow:var(--fl-sh-1)}
.woocommerce-account .woocommerce-MyAccount-content > *:first-child{margin-top:0}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{margin-top:0}
.woocommerce-account.logged-in .woocommerce-form-login{flex:1 1 100%}

/* menu lateral en pastilles */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:.4rem;display:flex;flex-direction:column;gap:.1rem;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  box-shadow:var(--fl-sh-1)}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0 !important;padding:0 !important;border:0 !important}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:.6rem .9rem;border-radius:var(--fl-r-sm);color:var(--fl-body);
  font-size:.93rem;font-weight:500;line-height:1.35;
  transition:background .18s var(--fl-ease),color .18s var(--fl-ease),transform .18s var(--fl-ease)}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--fl-blue-50);color:var(--fl-primary);transform:translateX(2px)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--fl-primary-grad);color:#fff;font-weight:600;
  box-shadow:0 4px 14px rgba(85,101,230,.22)}
.woocommerce-account .woocommerce-MyAccount-navigation li--downloads{display:none} /* aucun produit telechargeable */

/* connexion : carte centree */
.woocommerce-account:not(.logged-in) .woocommerce:not(.widget){display:block !important}
.woocommerce-account .woocommerce-form-login{
  max-width:430px;margin:.5rem auto 3rem;padding:2.2rem 2rem;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  box-shadow:var(--fl-sh-2)}
.woocommerce-account .woocommerce-form-login .form-row{margin-bottom:1.05rem;padding:0}
.woocommerce-account .woocommerce-form-login button[type=submit]{width:100%;margin-top:.3rem}
.woocommerce-account .woocommerce-form-login__rememberme{
  display:block;margin:.85rem 0 .2rem;font-size:.88rem;color:var(--fl-muted);font-weight:500 !important}
.woocommerce-account .woocommerce-LostPassword{text-align:center;margin:1.1rem 0 0;font-size:.88rem}

/* titres internes raisonnables */
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend{
  font-size:1.12rem !important;line-height:1.3 !important;
  margin:0 0 1rem !important;font-weight:700 !important;color:var(--fl-ink)}

/* tableaux (commandes) */
.woocommerce-account table.shop_table{
  width:100%;margin:0;font-size:.92rem;
  border:1px solid var(--fl-line);border-radius:var(--fl-r);
  border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-account table.shop_table th{
  background:var(--fl-bg-soft);color:var(--fl-ink);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;
  border:0 !important;padding:.75rem .85rem;text-align:left;white-space:nowrap}
.woocommerce-account table.shop_table td{
  border:0 !important;border-top:1px solid var(--fl-line-soft) !important;
  padding:.8rem .85rem;vertical-align:middle;background:transparent}
.woocommerce-account table.shop_table tbody tr:hover{background:var(--fl-blue-50)}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-number,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-date,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-status{white-space:nowrap;width:1%}
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account table.shop_table th.woocommerce-orders-table__header-order-actions{
  text-align:right;white-space:nowrap}
.woocommerce-account table.shop_table .button,
.woocommerce-account table.shop_table a.button{
  display:inline-block;background:#fff !important;color:var(--fl-primary) !important;
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r-pill) !important;
  padding:.34rem .9rem !important;font-size:.81rem !important;font-weight:600 !important;
  line-height:1.5 !important;box-shadow:none !important;
  margin:.12rem 0 .12rem .3rem !important;min-height:0 !important;transform:none !important}
.woocommerce-account table.shop_table .button:hover{
  background:var(--fl-blue-50) !important;border-color:var(--fl-blue-200) !important}
.woocommerce-account table.shop_table .woocommerce-button.view{
  background:var(--fl-primary) !important;color:#fff !important;border-color:var(--fl-primary) !important}
.woocommerce-account table.shop_table .woocommerce-button.view:hover{
  background:var(--fl-primary-dark) !important;border-color:var(--fl-primary-dark) !important}

/* ---- Adresses : la page a reparer (demande n°1) ---- */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.col2-set{
  display:grid !important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.1rem;margin:0 !important;width:100% !important;float:none !important}
.woocommerce-account .woocommerce-Addresses > div,
.woocommerce-account .u-columns.col2-set > div,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2{
  float:none !important;width:auto !important;max-width:100% !important;margin:0 !important;
  display:flex;flex-direction:column}
.woocommerce-account .woocommerce-Address{
  display:flex;flex-direction:column;height:100%;
  background:var(--fl-bg-soft);border:1px solid var(--fl-line);
  border-radius:var(--fl-r);padding:1.15rem 1.25rem;
  transition:border-color .2s var(--fl-ease),box-shadow .2s var(--fl-ease)}
.woocommerce-account .woocommerce-Address:hover{
  border-color:var(--fl-blue-200);box-shadow:var(--fl-sh-1)}
/* en-tete de carte : titre a gauche, bouton Modifier a droite, sur une seule ligne */
.woocommerce-account .woocommerce-Address-title{
  display:flex !important;align-items:center;justify-content:space-between;gap:.75rem;
  background:transparent !important;border:0 !important;
  padding:0 0 .8rem !important;margin:0 0 .9rem !important;
  border-bottom:1px solid var(--fl-line) !important}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  font-size:.78rem !important;font-weight:700 !important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fl-muted) !important;
  margin:0 !important;line-height:1.3 !important;display:block;flex:1 1 auto}
/* le libelle natif est trop long (« Modifier Adresse de facturation ») */
.woocommerce-account .woocommerce-Address-title .edit{
  flex:0 0 auto;display:inline-block;font-size:0 !important;line-height:0;
  color:var(--fl-primary) !important;text-decoration:none !important;
  border:1px solid var(--fl-line);border-radius:var(--fl-r-pill);
  padding:.36rem .85rem;background:#fff;white-space:nowrap;
  transition:background .2s var(--fl-ease),border-color .2s var(--fl-ease)}
.woocommerce-account .woocommerce-Address-title .edit::after{
  content:"Modifier";font-size:.79rem;font-weight:600;line-height:1.5;display:inline-block}
.woocommerce-account .woocommerce-Address-title .edit:hover{
  background:var(--fl-blue-50);border-color:var(--fl-blue-200)}
.woocommerce-account .woocommerce-Address address,
.woocommerce-account address{
  font-style:normal !important;font-size:.93rem;line-height:1.7;color:var(--fl-body);
  margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;
  flex:1 1 auto}
.woocommerce-account .woocommerce-Address address br{line-height:1.7}
/* carte vide : invitation a completer */
.woocommerce-account .woocommerce-Address .fl-addr-empty{
  color:var(--fl-muted);font-size:.92rem;margin:0}

/* formulaire d'edition d'adresse */
.woocommerce-account .woocommerce-address-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.woocommerce-account .woocommerce-address-fields .form-row{
  margin:0 0 1rem !important;padding:0 !important;width:auto !important;float:none !important}
.woocommerce-account .woocommerce-address-fields .form-row-wide,
.woocommerce-account .woocommerce-address-fields .form-row.notes,
.woocommerce-account .woocommerce-address-fields p#billing_address_1_field,
.woocommerce-account .woocommerce-address-fields p#billing_address_2_field,
.woocommerce-account .woocommerce-address-fields p#shipping_address_1_field,
.woocommerce-account .woocommerce-address-fields p#shipping_address_2_field,
.woocommerce-account .woocommerce-address-fields p#billing_company_field,
.woocommerce-account .woocommerce-address-fields p#shipping_company_field,
.woocommerce-account .woocommerce-address-fields p#billing_country_field,
.woocommerce-account .woocommerce-address-fields p#shipping_country_field{grid-column:1/-1}
/* Code postal + ville, puis telephone + e-mail : deux par ligne, comme on les
   ecrit sur une enveloppe. */
.woocommerce-account .woocommerce-address-fields p#billing_postcode_field,
.woocommerce-account .woocommerce-address-fields p#billing_city_field,
.woocommerce-account .woocommerce-address-fields p#shipping_postcode_field,
.woocommerce-account .woocommerce-address-fields p#shipping_city_field,
.woocommerce-account .woocommerce-address-fields p#billing_phone_field,
.woocommerce-account .woocommerce-address-fields p#billing_email_field{grid-column:auto}
.woocommerce-account .woocommerce-address-fields .form-row-first,
.woocommerce-account .woocommerce-address-fields .form-row-last{width:auto !important}
.woocommerce-account .woocommerce-address-fields__field-wrapper + p{
  grid-column:1/-1;margin:.4rem 0 0}
.woocommerce-account .woocommerce-address-fields button[type=submit]{margin-top:.4rem}

/* details du compte */
.woocommerce-account .woocommerce-EditAccountForm fieldset{
  border:1px solid var(--fl-line);border-radius:var(--fl-r);padding:1.2rem 1.3rem;
  margin:1.4rem 0 1.2rem}
.woocommerce-account .woocommerce-EditAccountForm legend{
  padding:0 .55rem;margin:0 !important;font-size:.95rem !important;
  background:#fff;border-radius:6px}
.woocommerce-account .woocommerce-EditAccountForm em{
  display:block;font-size:.82rem;color:var(--fl-muted);font-style:normal;margin-top:.3rem}

/* --------------------------------------------------------------------------
   16. ACCUEIL
   -------------------------------------------------------------------------- */
.page-id-3283 .site-content > .ast-container,
.page-id-3283 .site-main,
.page-id-3283 .site-content{padding-top:0 !important;margin-top:0 !important}
.page-id-3283 .entry-content{margin-top:0 !important}
.page-id-3283 .entry-content > *:first-child{margin-top:0 !important}
.flowly-banner{margin:0 !important;max-width:none !important;width:100% !important}
.flowly-banner img{display:block;width:100% !important;max-width:100% !important;height:auto}

/* raccourcis vers les categories, sous la banniere */
.fl-cat-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;
  margin:0 0 .5rem}
.fl-cat-tile{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;
  min-height:96px;padding:1rem 1.1rem;border-radius:var(--fl-r);
  background:var(--fl-blue-50);border:1px solid var(--fl-line);
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),background .25s var(--fl-ease)}
.fl-cat-tile:nth-child(3n+2){background:var(--fl-violet-50)}
.fl-cat-tile:nth-child(3n+3){background:var(--fl-coral-50)}
.fl-cat-tile:hover{transform:translateY(-4px);box-shadow:var(--fl-sh-2)}
.fl-cat-tile__name{font-size:1rem;font-weight:700;color:var(--fl-ink);letter-spacing:-.015em}
.fl-cat-tile__count{font-size:.79rem;color:var(--fl-muted);font-weight:500}

/* bande de reassurance */
.fl-reassure{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
.fl-reassure__item{display:flex;gap:.8rem;align-items:flex-start}
.fl-reassure__item svg{width:22px;height:22px;flex:0 0 auto;color:var(--fl-primary);margin-top:.15rem}
.fl-reassure__item strong{display:block;color:var(--fl-ink);font-weight:700;font-size:.96rem}
.fl-reassure__item span{font-size:.88rem;color:var(--fl-muted)}

/* --------------------------------------------------------------------------
   17. PAGE « QUI SOMMES-NOUS » & pages editoriales
   -------------------------------------------------------------------------- */
.fl-prose{max-width:760px;margin:0 auto}
.fl-prose p{font-size:1.02rem;line-height:1.8}
.fl-prose .fl-lead{font-size:1.15rem;line-height:1.7;color:var(--fl-ink);font-weight:500}
.fl-quote{
  border-left:3px solid var(--fl-violet-200);padding:.2rem 0 .2rem 1.2rem;margin:2rem 0;
  font-size:1.08rem;line-height:1.7;color:var(--fl-ink);font-style:italic}
.fl-todo{
  background:var(--fl-coral-50);border:1px dashed var(--fl-coral-200);border-radius:var(--fl-r);
  padding:1rem 1.2rem;font-size:.92rem;color:#8a3a30}

/* Pages legales (mentions 28, CGV 31, confidentialite 3) : sur toute la largeur
   d'un ecran d'ordinateur, les lignes font 160 caracteres et deviennent
   penibles a lire. */
.page-id-3 .entry-content,
.page-id-28 .entry-content,
.page-id-31 .entry-content{max-width:900px}
.page-id-3 .entry-content p,
.page-id-28 .entry-content p,
.page-id-31 .entry-content p{font-size:.97rem;line-height:1.75}

/* --------------------------------------------------------------------------
   18. PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--fl-line-soft)}
.site-footer .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row{
  grid-template-columns:1fr !important;justify-items:center !important}
.site-footer .ast-builder-layout-element{width:100%;justify-content:center !important}
.site-footer .ast-footer-copyright{text-align:center !important;width:100%}
.site-footer .ast-footer-copyright p{
  margin:0 !important;text-align:center !important;
  font-size:.85rem;line-height:2.2;color:var(--fl-muted)}
.site-footer .ast-footer-copyright a{color:var(--fl-body);font-weight:500}
.site-footer .ast-footer-copyright a:hover{color:var(--fl-primary)}

/* --------------------------------------------------------------------------
   19. ANIMATIONS SOBRES (demande n°14)
   -------------------------------------------------------------------------- */
/* Passage d'une page à l'autre en fondu, au lieu du clignotement blanc.
   Surtout visible quand on change de coloris. Les navigateurs qui ne
   connaissent pas cette règle naviguent normalement, sans rien casser. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fl-fade-out .16s var(--fl-ease) both}
::view-transition-new(root){animation:fl-fade-in .22s var(--fl-ease) both}
@keyframes fl-fade-out{to{opacity:0}}
@keyframes fl-fade-in{from{opacity:0}}
/* La photo et la colonne de droite se croisent entre elles, pas avec le reste :
   l'en-tête et le pied de page restent parfaitement immobiles. */
.single-product div.product > .woocommerce-product-gallery{view-transition-name:fl-galerie}
.single-product div.product > .summary{view-transition-name:fl-resume}
::view-transition-old(fl-galerie),::view-transition-new(fl-galerie),
::view-transition-old(fl-resume),::view-transition-new(fl-resume){
  animation-duration:.28s;animation-timing-function:var(--fl-ease)}

@keyframes fl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fl-slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fl-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
/* On ne masque un element que si JavaScript est la pour le reveler :
   sans cette precaution, une erreur de script rendrait la page blanche. */
.fl-js .fl-reveal{opacity:0}
.fl-js .fl-reveal.is-in{animation:fl-rise .6s var(--fl-ease) forwards}
/* Les cartes d'une meme rangee arrivent en cascade legere */
.woocommerce ul.products li.product.fl-reveal.is-in{animation-delay:0s}
.woocommerce ul.products li.product.fl-reveal:nth-child(5n+2).is-in{animation-delay:.06s}
.woocommerce ul.products li.product.fl-reveal:nth-child(5n+3).is-in{animation-delay:.12s}
.woocommerce ul.products li.product.fl-reveal:nth-child(5n+4).is-in{animation-delay:.18s}
.woocommerce ul.products li.product.fl-reveal:nth-child(5n+5).is-in{animation-delay:.24s}
.ast-header-woo-cart .count.fl-pop{animation:fl-pop .5s var(--fl-ease)}
/* Liens du corps de texte : soulignement qui glisse au survol.
   Volontairement limite aux zones editoriales : appliquee a tout .entry-content,
   cette regle ecrasait le fond de boutons et d'onglets (elle utilise
   background-image) — c'est ce qui rendait le menu du compte invisible. */
.fl-prose a:not(.wp-block-button__link):not(.fl-btn),
.fl-description a,
.fl-quote a,
.site-footer .ast-footer-copyright a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--fl-ease)}
.fl-prose a:not(.wp-block-button__link):not(.fl-btn):hover,
.fl-description a:hover,
.fl-quote a:hover,
.site-footer .ast-footer-copyright a:hover{background-size:100% 1px;text-decoration:none}
/* images produit : petit zoom au survol, deja gere plus haut */

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .fl-js .fl-reveal{opacity:1 !important}
}

/* --------------------------------------------------------------------------
   20. TABLETTE & TELEPHONE
   -------------------------------------------------------------------------- */
@media(max-width:1200px){
  .woocommerce-cart .woocommerce:not(.widget){grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)}
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr) minmax(290px,.8fr);gap:1.2rem}
}

@media(max-width:921px){
  /* --- « Mon compte » dans le tiroir de navigation ---
     Astra le sort avec une marge de 25 px sur TOUS les côtés, un lien en
     « display:inline » de 15,5 px en minuscules et aucun séparateur : il flottait,
     décalé, au-dessus d'une liste pourtant bien réglée (Vianney : « moche »).
     On l'aligne exactement sur le rythme des entrées de menu, relevé par mesure
     sur « .main-header-menu > li > a » : padding 15px 13.6px, 14,4 px, poids 600,
     majuscules, filet de 1 px en bas. Et on le place APRÈS le menu, comme le veut
     l'usage pour un accès au compte.
     ⚠️ Astra impose « display:block » sur le conteneur du tiroir AVEC !important :
     sans « !important » de notre côté, « order » reste sans effet (la direction
     flex était bien prise, mais pas le flex lui-même — piège à retenir).
     ⚠️ La hauteur des lignes vient d'une « line-height » de 43,2 px sur les liens
     de menu, soit exactement 3 fois leur taille de police. D'où « line-height:3 »
     ici, pour que « Mon compte » fasse la même hauteur que les autres (74 px). */
  #ast-mobile-popup .ast-mobile-popup-content{
    display:flex !important;flex-direction:column}
  #ast-mobile-popup .ast-builder-menu-1{order:1}
  #ast-mobile-popup .ast-header-account{order:2;padding:0 !important}
  #ast-mobile-popup .ast-header-account-wrap,
  #ast-mobile-popup .ast-header-account-inner-wrap{
    margin:0 !important;padding:0 !important;display:block !important}
  #ast-mobile-popup .ast-header-account-link{
    display:block !important;padding:15px 13.6px !important;margin:0 !important;
    font-size:.9rem !important;font-weight:600 !important;letter-spacing:.02em;
    line-height:3 !important;
    text-transform:uppercase;color:var(--fl-ink) !important;
    border-bottom:1px solid var(--fl-line)}

  /* --- fiche produit : une seule colonne --- */
  .single-product div.product{display:block}
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .summary{width:auto !important;margin:0 !important}
  .single-product div.product > .summary{margin-top:1.6rem !important}
  .single-product div.product .woocommerce-product-gallery{max-width:520px}

  /* --- boutique : le panneau de filtres est un <dialog>, voir section 61 --- */

  /* --- panier & commande sur une colonne --- */
  .woocommerce-cart .woocommerce:not(.widget),
  .woocommerce-checkout form.checkout{display:block}
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout #order_review{position:static;margin-top:1.2rem !important}
  .woocommerce-checkout h3#order_review_heading{margin-top:1.4rem !important}

  /* --- espace client : menu horizontal au-dessus --- */
  .woocommerce-account .woocommerce:not(.widget){gap:1.1rem}
  .woocommerce-account .woocommerce-MyAccount-navigation{
    flex:1 1 100% !important;width:100% !important;position:static}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    flex-direction:row;flex-wrap:wrap;gap:.3rem;padding:.35rem}
  .woocommerce-account .woocommerce-MyAccount-navigation li a{padding:.48rem .8rem;font-size:.88rem}
  .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{transform:none}
  .woocommerce-account .woocommerce-MyAccount-content{padding:1.3rem 1.15rem}
}

/* --------------------------------------------------------------------------
   PIEGE : woocommerce-smallscreen.css (actif sous 768 px)
   Cette feuille transforme les tableaux en listes : elle force
   « text-align:right !important » sur chaque cellule, ajoute un intitule en
   ::before (« Produit : », « Quantité : ») et zebre les lignes. Sur nos cartes
   de panier, cela donnait un empilement illisible. On la neutralise la ou l'on
   a deja notre propre mise en page.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  .woocommerce-cart table.cart tr td{
    text-align:left !important;background-color:transparent !important}
  .woocommerce-cart table.cart tr td::before{display:none !important;content:none !important}
  .woocommerce-cart table.cart tr:nth-child(2n) td{background-color:transparent !important}
  .woocommerce-cart table.cart tbody tr:first-child td:first-child{border-top:0}

  /* code promo et actualisation : pleine largeur, empiles */
  .woocommerce-cart table.cart tr:last-child td.actions{
    display:flex;flex-direction:column;align-items:stretch;gap:.55rem}
  .woocommerce-cart table.cart td.actions .coupon{
    display:flex;flex-direction:column;align-items:stretch;gap:.55rem;width:100%}
  .woocommerce-cart table.cart td.actions .coupon input#coupon_code,
  .woocommerce-cart table.cart td.actions .coupon button,
  .woocommerce-cart table.cart td.actions button[name="update_cart"]{
    width:100% !important;min-width:0 !important;text-align:center;white-space:nowrap}

  /* totaux du panier : l'intitule vient d'un ::before flottant, qui se collait
     a la valeur. On repasse en ligne « libelle / montant ». */
  .woocommerce-cart .cart_totals table.shop_table tr td{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    text-align:right !important;flex-wrap:wrap}
  .woocommerce-cart .cart_totals table.shop_table tr td::before{
    float:none !important;font-weight:500;color:var(--fl-body);flex:0 0 auto}
  .woocommerce-cart .cart_totals table.shop_table tr.order-total td::before{
    font-weight:700;color:var(--fl-ink)}
  .woocommerce-cart .cart_totals table.shop_table tr td > *{text-align:left}
  .woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td{
    display:block;text-align:left !important}

  /* tableaux du compte : on garde les intitules, mais alignes a gauche */
  .woocommerce-account table.shop_table tr td{
    text-align:left !important;background-color:transparent !important;
    display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
  .woocommerce-account table.shop_table tr td::before{float:none;font-weight:600;color:var(--fl-muted)}
  .woocommerce-account table.shop_table tr{
    display:block;border:1px solid var(--fl-line);border-radius:var(--fl-r);
    margin-bottom:.7rem;padding:.35rem .8rem}
  .woocommerce-account table.shop_table{border:0;overflow:visible}
  .woocommerce-account table.shop_table tr td{border-top:0 !important}
  .woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions{
    justify-content:flex-start;flex-wrap:wrap}
}

@media(max-width:600px){
  body{font-size:15.5px}
  .site-content > .ast-container{padding-left:1.05rem !important;padding-right:1.05rem !important}
  .ast-woocommerce-container{padding-top:1rem !important}

  /* cartes produit : 2 par ligne, compactes */
  .woocommerce ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.75rem !important}
  .woocommerce ul.products li.product{padding:.45rem .45rem .65rem;border-radius:var(--fl-r-sm)}
  .woocommerce ul.products li.product a img{margin-bottom:.45rem !important;padding:.35rem}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.86rem !important}
  .woocommerce ul.products li.product .ast-woo-product-category{font-size:.68rem !important}
  .woocommerce ul.products li.product .price{font-size:.9rem !important;margin-bottom:.55rem !important}
  .woocommerce ul.products li.product .button{padding:.5rem .5rem !important;font-size:.8rem !important}
  .woocommerce ul.products li.product:hover{transform:none}

  /* barre du haut de la boutique */
  .fl-shop-bar{gap:.5rem;padding-bottom:.8rem;margin-bottom:.9rem}
  .fl-shop-bar .woocommerce-result-count{font-size:.82rem;line-height:1.6}
  .woocommerce .woocommerce-ordering select{font-size:.84rem !important;padding:.45rem 1.9rem .45rem .85rem !important}

  /* fiche produit */
  .fl-psection{padding:1.15rem 1.1rem;margin-top:1.8rem;border-radius:var(--fl-r)}
  .single-product div.product form.cart button.button{flex:1 1 100%}
  .single-product .flex-control-thumbs img{width:54px !important;height:54px !important;padding:3px}
  .single-product .flex-control-nav.flex-control-thumbs{gap:.4rem}
  .fl-reviews__top{gap:.7rem}
  .fl-reviews__toggle{width:100%}

  /* panier */
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item{
    grid-template-columns:64px minmax(0,1fr) 30px;   /* 30px = la croix */
    grid-template-areas:"img info remove" "img qty remove" "price price price";
    padding:.7rem .8rem;gap:.35rem .8rem}
  .woocommerce-cart table.cart td.product-thumbnail img{width:64px !important;height:64px}
  .woocommerce-cart table.cart td.product-subtotal{
    text-align:left !important;padding-top:.45rem !important;
    border-top:1px solid var(--fl-line-soft) !important}
  .woocommerce-cart .cart-collaterals .cart_totals{padding:1.1rem 1.15rem}

  /* commande */
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review{padding:1.1rem 1.15rem}

  /* espace client */
  .woocommerce-account .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-content{padding:1.15rem 1rem;border-radius:var(--fl-r)}
  .woocommerce-account .woocommerce-Addresses,
  .woocommerce-account .u-columns.col2-set{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-form-login{padding:1.6rem 1.2rem}

  /* barre livraison offerte : on garde la barre, on masque le texte */
  .fl-shipbar{margin-right:.5rem}
  .fl-shipbar__txt{display:none}
  .fl-shipbar__pill{padding:.3rem .5rem}
  .fl-shipbar__track{width:44px}

  /* Banniere d'accueil : au format 1920x440, elle ne ferait que ~90 px de haut
     sur un telephone et le logo deviendrait illisible. On la recadre par le
     centre (le logo y est centre) pour lui redonner de la hauteur. */
  .flowly-banner img{
    height:190px !important;object-fit:cover;object-position:center center}

  /* pied de page */
  .site-footer .ast-footer-copyright p{font-size:.79rem;line-height:1.9}

  /* moins de vide en haut des pages */
  .content-area,.content-area.primary{margin-top:0 !important}
  .site-content > .ast-container{padding-top:.9rem !important}
  .ast-woocommerce-container{padding-top:.6rem !important;padding-bottom:2rem !important}
}

@media(max-width:359px){
  .fl-shipbar{display:none}   /* place vraiment trop juste a cote du panier */
}

/* --------------------------------------------------------------------------
   17. PAGE D'ACCUEIL — le parcours (14 aout 2026)

   Vianney : « sur l'accueil j'aimerais plutot un truc en mode tu navigues, tu
   comprends l'entreprise, qui on est, l'interet d'un fidget ». La page repond
   donc a quatre questions dans l'ordre, chaque section sur toute la largeur,
   avec une alternance de fonds pour marquer le rythme.
   Les blocs sont construits en PHP : voir inc/accueil.php.
   -------------------------------------------------------------------------- */

/* Largeur commune a toutes les sections de l'accueil. */
.fl-wrap{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box}

/* ⚠️ PIEGE ASTRA, mesure du 14 aout 2026.
   Sa feuille EN LIGNE (donc chargee apres la notre) contient :
     .ast-page-builder-template .entry-content[data-ast-blocks-layout]
       > :not(.wp-block-group)... > * { max-width: 1200px; margin: 0 auto }
   Autrement dit : TOUS les enfants directs d'une section a nous — qui n'est pas
   un bloc « groupe » de l'editeur — sont bloques a 1200 px et recentres.
   Effet constate : la grande photo pleine largeur de « Qui sommes-nous »
   s'arretait a 1284 px au lieu de 1440, avec 78 px de blanc de chaque cote.
   On rend donc leur liberte aux enfants de nos sections, puis on RE-impose
   notre largeur a `.fl-wrap` — sinon c'est Astra qui la fixait, a 1200.
   Sa regle pese QUATRE classes (`:where()` ne compte pour rien, mais
   `:not(.wp-block-group)` compte) : il faut donc au moins autant de notre cote,
   sinon le correctif n'a aucun effet — verifie, mesure a l'appui. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > section:not(.wp-block-group) > *,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > figure:not(.wp-block-group) > *{
  max-width:none}
/* ... puis on re-impose NOTRE largeur au conteneur interne, avec un selecteur
   encore plus precis que celui du dessus. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > section:not(.wp-block-group) > .fl-wrap,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fl-wrap{
  max-width:1180px;margin-left:auto;margin-right:auto}

/* L'accueil est en pleine largeur : le conteneur du theme ne doit ni brider ni
   marger. ⚠️ On vise `.site-content > .ast-container` et JAMAIS `.ast-container`
   seul : cette classe sert AUSSI a l'en-tete, qu'on resserrerait sans le vouloir. */
.home .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0}
.home .entry-content > *{margin-top:0;margin-bottom:0}
.home .ast-woocommerce-container{padding-top:0 !important}

/* Titres de section. `.fl-eyebrow` est deja defini plus haut (section 2) et
   sert aussi sur la fiche produit : ne pas le redefinir ici, on perdrait son
   `display:block`, qui est la pour une raison documentee la-bas. */
.fl-h2,.entry-content .fl-h2{
  font-size:clamp(1.7rem,3.3vw,2.45rem);line-height:1.14;letter-spacing:-.032em;
  font-weight:800;color:var(--fl-ink);margin-top:0;margin-bottom:.5rem}
.fl-sub{font-size:1.02rem;line-height:1.6;color:var(--fl-body);margin:0;max-width:52ch}

.fl-home-section{padding-top:clamp(2.6rem,5vw,4.4rem);padding-bottom:clamp(2.6rem,5vw,4.4rem)}
.fl-home-section--soft{
  background:var(--fl-bg-soft);
  border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line)}

/* Boutons d'appel a l'action.
   Le degrade plein est reserve a l'action principale ; le fantome sert aux
   parcours secondaires. Meme regle que la boutique : plein = action decisive. */
.fl-cta,.entry-content a.fl-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.86rem 1.65rem;border-radius:var(--fl-r-pill);
  background:var(--fl-primary-grad);color:#fff;
  font-size:.95rem;font-weight:700;line-height:1.2;text-decoration:none;
  border:1.5px solid transparent;box-shadow:var(--fl-sh-2);
  transition:transform .22s var(--fl-ease),box-shadow .22s var(--fl-ease),background .22s var(--fl-ease)}
.fl-cta:hover,.entry-content a.fl-cta:hover{
  background:var(--fl-primary-grad-h);color:#fff;
  transform:translateY(-2px);box-shadow:var(--fl-sh-3)}
.fl-cta--ghost,.entry-content a.fl-cta--ghost{
  background:#fff;color:var(--fl-primary);border-color:var(--fl-blue-200);box-shadow:none}
.fl-cta--ghost:hover,.entry-content a.fl-cta--ghost:hover{
  background:var(--fl-blue-50);color:var(--fl-primary-dark);
  border-color:var(--fl-blue-400);box-shadow:var(--fl-sh-1)}

/* ---- 1. Le bandeau d'ouverture ---- */
.fl-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:clamp(2.4rem,5.5vw,5rem);padding-bottom:clamp(2.6rem,5vw,4.6rem);
  background:
    radial-gradient(1100px 520px at 10% -12%,var(--fl-violet-50) 0%,rgba(255,255,255,0) 62%),
    radial-gradient(900px 460px at 94% 6%,var(--fl-coral-50) 0%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#fffdfb 0%,#ffffff 82%)}
/* Deux taches floues : elles donnent la profondeur sans peser une image. */
.fl-hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1;pointer-events:none}
.fl-hero__blob--1{width:430px;height:430px;left:-150px;top:-130px;background:var(--fl-violet-200)}
.fl-hero__blob--2{width:380px;height:380px;right:-120px;bottom:-160px;background:var(--fl-coral-200)}

.fl-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.fl-hero__titre,.entry-content h1.fl-hero__titre{
  font-size:clamp(2.25rem,5.4vw,3.85rem);line-height:1.03;letter-spacing:-.042em;
  font-weight:800;color:var(--fl-ink);margin-top:0;margin-bottom:1rem}
/* Le second vers en degrade : c'est la seule fantaisie typographique du site,
   elle suffit a poser le ton sans ajouter une deuxieme police. */
.fl-hero__titre em{
  font-style:normal;
  background:linear-gradient(115deg,var(--fl-primary) 0%,var(--fl-violet-400) 45%,var(--fl-coral-400) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.fl-hero__lead{
  font-size:clamp(1rem,1.4vw,1.13rem);line-height:1.65;color:var(--fl-body);
  max-width:46ch;margin:0 0 1.75rem}
.fl-hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:0}

/* Le collage de trois photos. Les positions sont en pourcentage du carre
   parent : la composition tient a toutes les largeurs sans point de rupture. */
.fl-hero__visuel{position:relative;width:100%;aspect-ratio:1/1}
/* Rapport impose sur la vignette, pas laisse a l'image : sans lui, la figure
   prend une hauteur libre et l'image s'arrete avant le bord de la carte. */
.fl-hero__vignette{
  position:absolute;margin:0;overflow:hidden;aspect-ratio:1/1;
  border-radius:var(--fl-r-lg);background:#fff;box-shadow:var(--fl-sh-3);
  transform:var(--fl-tilt)}
.fl-hero__vignette img{display:block;width:100%;height:100%;object-fit:cover}
.fl-hero__vignette--a{--fl-tilt:rotate(-3deg);width:60%;left:0;top:2%}
.fl-hero__vignette--b{--fl-tilt:rotate(4.5deg);width:38%;right:1%;top:20%}
.fl-hero__vignette--c{--fl-tilt:rotate(-6deg);width:34%;left:27%;bottom:0}

/* ---- 2. « A quoi ca sert ? » ---- */
.fl-benefices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.fl-benefice{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.65rem 1.5rem;box-shadow:var(--fl-sh-1);
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),border-color .25s var(--fl-ease)}
.fl-benefice:hover{transform:translateY(-4px);box-shadow:var(--fl-sh-2);border-color:var(--fl-blue-200)}
.fl-benefice__icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:1.05rem;
  background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-benefice__icone svg{width:25px;height:25px;stroke-width:1.7}
.fl-benefice:nth-child(2) .fl-benefice__icone{background:var(--fl-violet-50);color:var(--fl-violet-700)}
.fl-benefice:nth-child(3) .fl-benefice__icone{background:var(--fl-coral-50);color:var(--fl-coral-700)}
.fl-benefice h3,.entry-content .fl-benefice h3{
  font-size:1.05rem;font-weight:750;letter-spacing:-.02em;color:var(--fl-ink);
  margin-top:0;margin-bottom:.45rem}
.fl-benefice p{font-size:.93rem;line-height:1.62;color:var(--fl-body);margin:0}

/* ---- 3. Les familles de produits ---- */
.fl-familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.3rem;margin-top:2rem}
.fl-famille{
  display:grid;grid-template-columns:172px minmax(0,1fr);gap:1.5rem;align-items:center;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.4rem;text-decoration:none;box-shadow:var(--fl-sh-1);
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),border-color .25s var(--fl-ease)}
.fl-famille:hover{transform:translateY(-4px);box-shadow:var(--fl-sh-2);border-color:var(--fl-violet-200)}
.fl-famille__visuel{
  display:block;overflow:hidden;border-radius:var(--fl-r);
  background:var(--fl-bg-soft);aspect-ratio:1/1}
.fl-famille__visuel img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--fl-ease)}
.fl-famille:hover .fl-famille__visuel img{transform:scale(1.06)}
.fl-famille__nom{
  display:block;font-size:1.2rem;font-weight:800;letter-spacing:-.025em;
  color:var(--fl-ink);margin-bottom:.4rem}
.fl-famille__texte{display:block;font-size:.92rem;line-height:1.55;color:var(--fl-body);margin-bottom:.85rem}
.fl-famille__lien{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:700;color:var(--fl-primary)}
.fl-famille__lien::after{content:"→";transition:transform .25s var(--fl-ease)}
.fl-famille:hover .fl-famille__lien::after{transform:translateX(4px)}

/* ---- 4. « Pourquoi vous ? » — la signature de Lea ---- */
.fl-signature{
  padding-top:clamp(2.6rem,5vw,4.6rem);padding-bottom:clamp(2.6rem,5vw,4.6rem);
  border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line);
  background:linear-gradient(125deg,var(--fl-violet-50) 0%,var(--fl-blue-50) 52%,var(--fl-coral-50) 100%)}
.fl-signature__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
/* Tant que Lea n'a pas fourni de photo, une seule colonne centree : mieux vaut
   pas d'image qu'un cadre vide. */
.fl-signature--sans-photo .fl-signature__grid{grid-template-columns:minmax(0,1fr);max-width:790px}
.fl-signature__photo{margin:0;overflow:hidden;border-radius:var(--fl-r-lg);box-shadow:var(--fl-sh-3)}
.fl-signature__photo img{display:block;width:100%;height:auto}
/* Astra habille les citations (barre a gauche, italique) : on repart de zero. */
.fl-signature__citation,.entry-content blockquote.fl-signature__citation{
  margin:0 0 1.45rem;padding:0;border:0;background:none;font-style:normal;quotes:none}
.fl-signature__citation p{
  font-size:clamp(1.1rem,2vw,1.42rem);line-height:1.5;letter-spacing:-.022em;
  font-weight:600;color:var(--fl-ink);margin:0 0 .8rem}
.fl-signature__citation footer{font-size:.9rem;color:var(--fl-body)}
.fl-signature__citation footer strong{color:var(--fl-ink);font-weight:700}
.fl-signature__criteres{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem}
.fl-signature__criteres li{position:relative;padding-left:1.6rem;font-size:.94rem;line-height:1.5;color:var(--fl-body)}
.fl-signature__criteres li::before{
  content:"";position:absolute;left:1px;top:.38em;width:13px;height:7px;
  border-left:2px solid var(--fl-primary);border-bottom:2px solid var(--fl-primary);
  border-radius:1px;transform:rotate(-45deg)}

/* ---- 5. Le chapeau de la grille de produits ---- */
.fl-titre-produits{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:1.7rem}
.fl-titre-produits .fl-h2{margin-bottom:0}
.fl-home-produits{padding-top:clamp(2.6rem,5vw,4.4rem);padding-bottom:clamp(2.2rem,4vw,3.4rem)}
/* La boutique remplit ses lignes toute seule (auto-fill) parce qu'elle a autant
   de produits qu'il faut. Ici il y en a HUIT : en auto-fill, une largeur de
   1180 px donne 5 colonnes, donc une ligne de 5 et une ligne bancale de 3.
   On fixe donc le nombre de colonnes a des diviseurs de 8 : 4 puis 2. */
/* ⚠️ `margin-left/right:auto` DOIT etre en `!important` : la regle de base des
   grilles WooCommerce (section 8) pose `margin:0 !important`, qui gagne sinon.
   Effet constate par Vianney sur un ecran de 1900 px : le titre etait centre a
   1180 px mais la grille restait collee a gauche. Invisible a 1440 px, flagrant
   au-dela — d'ou l'interet de verifier sur un grand ecran. */
.fl-home-produits ul.products{
  max-width:1180px;margin-left:auto !important;margin-right:auto !important;
  padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important}

/* ---- Flottement des photos du bandeau ---- */
@media(prefers-reduced-motion:no-preference){
  .fl-hero__vignette{animation:fl-flotte 7s var(--fl-ease) infinite alternate}
  .fl-hero__vignette--b{animation-duration:8.6s;animation-delay:-2.4s}
  .fl-hero__vignette--c{animation-duration:9.8s;animation-delay:-4.6s}
}

/* ---- ... et leur agrandissement au defilement (demande du 14 aout) ----
   Les trois photos sont visibles des l'arrivee : une animation liee a LEUR
   entree a l'ecran (`view()`) serait donc deja terminee. On la lie au
   DEFILEMENT DE LA PAGE (`scroll()`) sur les 700 premiers pixels : elles
   grandissent pendant qu'on descend.
   ⚠️ Deux animations sur le meme element, chacune sur sa propre horloge :
   `animation-timeline` prend une LISTE, dans l'ordre des animations. Le
   flottement garde l'horloge du document (`auto`), l'agrandissement suit le
   defilement. Et comme l'un anime `transform` et l'autre `scale`, ils se
   composent au lieu de s'ecraser. */
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .fl-hero__vignette{
      animation:fl-flotte 7s var(--fl-ease) infinite alternate,
                fl-hero-grandir linear both;
      animation-timeline:auto,scroll(root block);
      animation-range:normal,0 700px}
    .fl-hero__vignette--b{animation-duration:8.6s,1s;animation-delay:-2.4s,0s}
    .fl-hero__vignette--c{animation-duration:9.8s,1s;animation-delay:-4.6s,0s}
    /* Un grossissement legerement different par photo : le groupe respire au
       lieu de gonfler d'un bloc. */
    @keyframes fl-hero-grandir{from{scale:1}to{scale:1.16}}
    .fl-hero__vignette--b{--fl-zoom-max:1.22}
    .fl-hero__vignette--c{--fl-zoom-max:1.10}
    .fl-hero__vignette--b,.fl-hero__vignette--c{
      animation-name:fl-flotte,fl-hero-grandir-var}
    @keyframes fl-hero-grandir-var{from{scale:1}to{scale:var(--fl-zoom-max,1.16)}}
  }
}
/* La rotation est portee par --fl-tilt : sans elle, l'animation ecraserait
   l'inclinaison de chaque vignette. */
@keyframes fl-flotte{
  from{transform:var(--fl-tilt) translateY(0)}
  to{transform:var(--fl-tilt) translateY(-11px)}
}

@media(max-width:900px){
  .fl-hero__grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .fl-hero__visuel{max-width:400px;margin-left:auto;margin-right:auto}
  .fl-hero__lead{max-width:none}
  .fl-benefices{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .fl-signature__grid{grid-template-columns:minmax(0,1fr)}
  .fl-signature__photo{max-width:420px}
  .fl-home-produits ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media(max-width:560px){
  .fl-wrap{padding-left:1.1rem;padding-right:1.1rem}
  .fl-home-produits ul.products{padding-left:1.1rem;padding-right:1.1rem}
  .fl-hero__actions{gap:.6rem}
  .fl-hero__actions .fl-cta{flex:1 1 100%}
  .fl-famille{grid-template-columns:minmax(0,1fr);gap:1rem}
  .fl-famille__visuel{max-width:150px}
  .fl-titre-produits{align-items:flex-start}
}

/* --------------------------------------------------------------------------
   18. DYNAMIQUE AU DEFILEMENT (14 aout 2026)

   Vianney : « est-ce que tu peux ajouter de la dynamique quand on scrolle ?
   genre les images grossissent ». Fait en CSS pur avec les animations pilotees
   par le defilement (`animation-timeline: view()`) : zero JavaScript, zero
   ecouteur de scroll, donc aucun cout sur la fluidite.

   Les navigateurs qui ne connaissent pas encore `view()` (Firefox au 14 aout)
   ignorent tout le bloc et affichent les images normalement : c'est une
   amelioration, pas une dependance.
   -------------------------------------------------------------------------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){

    /* ⚠️ On anime la propriete autonome `scale`, PAS `transform`.
       `scale` se COMPOSE avec le `transform` deja pose au survol (la carte qui
       se souleve, l'image qui s'agrandit) au lieu de l'ecraser. Avec
       `transform` dans les images-cles, tous les effets de survol mouraient.
       ⚠️ Et on n'anime PAS l'opacite : les produits epuises sont volontairement
       a `opacity:.62`, une animation qui finit a 1 les rallumerait. */
    @keyframes fl-grandir{
      from{scale:.82}
      to{scale:1}
    }

    /* Les vignettes de produit et les images de rubrique grandissent en
       arrivant a l'ecran. La plage s'arrete a 42 % de la traversee : l'image
       a fini de grandir bien avant de quitter le regard. */
    .woocommerce ul.products li.product a img,
    .fl-famille__visuel img,
    .fl-benefice__icone,
    .fl-zoom{
      animation:fl-grandir linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 42%}

    /* Les grandes images de la page « Qui sommes-nous » : zoom continu pendant
       toute la traversee de l'ecran, comme un lent travelling. Le cadre a
       `overflow:hidden`, c'est lui qui decoupe. */
    @keyframes fl-travelling{
      from{scale:1}
      to{scale:1.07}   /* 1,14 s'ajoutait au recadrage : trop */
    }
    .fl-qsn-media img,
    .fl-parallaxe img{
      animation:fl-travelling linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%}
  }
}

/* --------------------------------------------------------------------------
   19. PAGE « QUI SOMMES-NOUS »

   C'est la page qui doit convaincre : elle porte la seule chose qu'un site
   marchand generaliste ne peut pas copier, le fait que les objets soient
   choisis par une psychomotricienne. Elle etait en prose brute sur une seule
   colonne ; on lui donne le meme rythme que l'accueil (alternance de fonds,
   images en respiration, criteres en cartes).
   -------------------------------------------------------------------------- */

/* Pleine largeur, comme l'accueil. Meme precaution : `.site-content >` et
   jamais `.ast-container` seul, qui sert aussi a l'en-tete. */
.page-qsn .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0}
.page-qsn .entry-content > *{margin-top:0;margin-bottom:0}

/* ---- Bandeau d'ouverture ---- */
.fl-qsn-hero{
  position:relative;overflow:hidden;
  padding-top:clamp(2.2rem,4.5vw,4rem);padding-bottom:clamp(2.4rem,4.5vw,4rem);
  background:
    radial-gradient(1000px 480px at 88% -10%,var(--fl-violet-50) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#fffdfb 0%,#ffffff 85%)}
.fl-qsn-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4.5vw,3.6rem);align-items:center}
.fl-qsn-hero__titre,.entry-content h1.fl-qsn-hero__titre{
  font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.08;letter-spacing:-.035em;
  font-weight:800;color:var(--fl-ink);margin-top:0;margin-bottom:1rem}
.fl-qsn-hero__lead{
  font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.68;color:var(--fl-body);margin:0 0 1.4rem}
.fl-qsn-hero__signe{
  display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--fl-body);margin:0}
.fl-qsn-hero__signe strong{color:var(--fl-ink)}
.fl-qsn-hero__signe::before{
  content:"";width:34px;height:2px;border-radius:2px;background:var(--fl-primary);flex:0 0 auto}
.fl-qsn-hero__photo{
  margin:0;overflow:hidden;border-radius:var(--fl-r-lg);
  box-shadow:var(--fl-sh-3);aspect-ratio:1/1}
.fl-qsn-hero__photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- Rubriques ---- */
.fl-qsn-section{padding-top:clamp(2.4rem,4.5vw,3.8rem);padding-bottom:clamp(2.4rem,4.5vw,3.8rem)}
.fl-qsn-section--soft{
  background:var(--fl-bg-soft);
  border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line)}
/* La prose reste sous ~68 caracteres par ligne : au-dela, l'oeil perd la
   ligne suivante. Meme regle que la description des fiches produit. */
.fl-qsn-prose{max-width:66ch}
.fl-qsn-prose p{font-size:1.02rem;line-height:1.72;color:var(--fl-body);margin:0 0 1.1rem}
.fl-qsn-prose p:last-child{margin-bottom:0}
.fl-qsn-prose strong{color:var(--fl-ink);font-weight:700}

/* ---- Citation en respiration ---- */
.fl-qsn-cite{
  max-width:900px;margin-left:auto;margin-right:auto;padding:0;border:0;
  text-align:center;font-style:normal}
.fl-qsn-cite p{
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.42;letter-spacing:-.025em;
  font-weight:700;color:var(--fl-ink);margin:0}
.fl-qsn-cite em{
  font-style:normal;
  background:linear-gradient(115deg,var(--fl-primary) 0%,var(--fl-violet-400) 55%,var(--fl-coral-400) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---- Grande image en respiration ---- */
/* Bande plus haute qu'a l'origine : Vianney trouvait la photo « trop zoomee ».
   Une image en 16/9 posee dans une bande de 3,4:1 perd les deux tiers de sa
   hauteur ; en montant a 520 px, on en garde environ les deux tiers. */
.fl-qsn-media{
  overflow:hidden;margin:0;
  height:clamp(240px,38vw,520px)}
.fl-qsn-media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- Cartes (les griefs, les promesses) ---- */
.fl-qsn-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.05rem;margin-top:1.8rem}
.fl-qsn-carte{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:1.4rem 1.35rem;box-shadow:var(--fl-sh-1);
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),border-color .25s var(--fl-ease)}
.fl-qsn-carte:hover{transform:translateY(-3px);box-shadow:var(--fl-sh-2);border-color:var(--fl-blue-200)}
.fl-qsn-carte h3,.entry-content .fl-qsn-carte h3{
  font-size:1rem;font-weight:750;letter-spacing:-.018em;color:var(--fl-ink);
  margin-top:0;margin-bottom:.4rem}
.fl-qsn-carte p{font-size:.92rem;line-height:1.6;color:var(--fl-body);margin:0}

/* ---- Criteres numerotes ---- */
.fl-qsn-criteres{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.05rem;margin-top:1.8rem}
.fl-qsn-critere{
  position:relative;background:#fff;border:1px solid var(--fl-line);
  border-radius:var(--fl-r-lg);padding:1.5rem 1.35rem 1.35rem;box-shadow:var(--fl-sh-1)}
.fl-qsn-critere__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;margin-bottom:.85rem;
  font-size:.86rem;font-weight:800;
  background:var(--fl-violet-50);color:var(--fl-violet-700)}
.fl-qsn-critere:nth-child(2) .fl-qsn-critere__num{background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-qsn-critere:nth-child(3) .fl-qsn-critere__num{background:var(--fl-coral-50);color:var(--fl-coral-700)}
.fl-qsn-critere:nth-child(4) .fl-qsn-critere__num{background:var(--fl-ok-bg);color:var(--fl-ok)}
.fl-qsn-critere h3,.entry-content .fl-qsn-critere h3{
  font-size:1rem;font-weight:750;letter-spacing:-.018em;color:var(--fl-ink);
  margin-top:0;margin-bottom:.4rem}
.fl-qsn-critere p{font-size:.92rem;line-height:1.6;color:var(--fl-body);margin:0}

/* ---- Les trois contextes, avec photo ---- */
.fl-qsn-contextes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin-top:1.8rem}
.fl-qsn-contexte{
  overflow:hidden;background:#fff;border:1px solid var(--fl-line);
  border-radius:var(--fl-r-lg);box-shadow:var(--fl-sh-1);
  transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease)}
.fl-qsn-contexte:hover{transform:translateY(-4px);box-shadow:var(--fl-sh-2)}
.fl-qsn-contexte figure{margin:0;overflow:hidden;aspect-ratio:16/10}
.fl-qsn-contexte figure img{display:block;width:100%;height:100%;object-fit:cover}
.fl-qsn-contexte__corps{padding:1.15rem 1.25rem 1.35rem}
.fl-qsn-contexte h3,.entry-content .fl-qsn-contexte h3{
  font-size:1.05rem;font-weight:750;letter-spacing:-.02em;color:var(--fl-ink);
  margin-top:0;margin-bottom:.35rem}
.fl-qsn-contexte p{font-size:.92rem;line-height:1.6;color:var(--fl-body);margin:0}

/* ---- Texte + image cote a cote ---- */
.fl-qsn-duo{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.fl-qsn-duo__photo{
  margin:0;overflow:hidden;border-radius:var(--fl-r-lg);
  box-shadow:var(--fl-sh-2);aspect-ratio:1/1}
.fl-qsn-duo__photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- Signature ---- */
.fl-qsn-signature{
  padding-top:clamp(2.4rem,4.5vw,3.8rem);padding-bottom:clamp(2.4rem,4.5vw,3.8rem);
  border-top:1px solid var(--fl-line);
  background:linear-gradient(125deg,var(--fl-violet-50) 0%,var(--fl-blue-50) 52%,var(--fl-coral-50) 100%)}
.fl-qsn-signature__bloc{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.fl-qsn-signature__bloc p{
  font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;color:var(--fl-ink);
  font-weight:600;margin:0 0 1.2rem}
.fl-qsn-signature__nom{
  display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  color:var(--fl-ink);margin-bottom:.25rem}
.fl-qsn-signature__role{display:block;font-size:.9rem;color:var(--fl-body);margin-bottom:1.6rem}

@media(max-width:900px){
  .fl-qsn-hero__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .fl-qsn-hero__photo{max-width:420px;margin-left:auto;margin-right:auto;aspect-ratio:4/3}
  .fl-qsn-duo{grid-template-columns:minmax(0,1fr)}
  .fl-qsn-duo__photo{max-width:420px;aspect-ratio:4/3}
}

/* --------------------------------------------------------------------------
   20. ACCUEIL + « QUI SOMMES-NOUS » : alignement sur telephone
   Mesure du 14 aout 2026 a 390 px : le titre du bandeau commencait a 34 px,
   les titres de rubrique a 58 px. Trois marges s'additionnaient —
   le conteneur d'article (17 px), le padding qu'Astra pose sur tout bloc
   « groupe » (23 px), et celui de notre `.fl-wrap` (17,6 px).
   On ne garde que le dernier : c'est lui qui fixe la gouttiere du site.
   -------------------------------------------------------------------------- */
.home .site-main,.page-qsn .site-main,
.home .ast-article-single,.page-qsn .ast-article-single,
.home .entry-content,.page-qsn .entry-content{
  padding-left:0;padding-right:0}
/* Le conteneur d'Astra garde 16,8 px de chaque cote sous 921 px, et il les
   garde MALGRE un selecteur plus precis que le sien : d'ou le `!important`,
   pose apres verification a la mesure et non par reflexe. Sans lui, les fonds
   colores des rubriques s'arretaient a 17 px des bords sur telephone. */
.home .site-content > .ast-container,
.page-qsn .site-content > .ast-container{
  padding-left:0 !important;padding-right:0 !important}
.home .entry-content > .wp-block-group,
.page-qsn .entry-content > .wp-block-group{
  padding-left:0;padding-right:0}

/* Un peu d'air sous l'en-tete fixe sur telephone : 2,2rem laissaient le
   surtitre colle au bandeau blanc. */
@media(max-width:600px){
  .fl-hero{padding-top:2.8rem}
  .fl-qsn-hero{padding-top:1.4rem}
}

/* --------------------------------------------------------------------------
   21. CARTES PRODUIT : la deuxieme image, au survol (14 aout 2026)
   « quand on passe la souris sur le produit, ca affiche l'image dans
   l'emballage individuel ». Les deux images sont empilees dans le meme cadre
   et se croisent en fondu. Voir inc/shop.php pour le rendu.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .fl-vignette{
  display:block;position:relative}
/* ⚠️ La regle de base des vignettes (section 8) pose `margin:0 0 .6rem` en
   `!important` sur TOUTE image de carte. Sur l'image du dessus, cette marge
   basse la decalerait de .6rem vers le haut : on la remet a zero, elle aussi
   en `!important`, sinon la premiere gagne. */
.woocommerce ul.products li.product .fl-vignette__survol{
  position:absolute;left:0;top:0;right:0;
  margin:0 !important;
  opacity:0;
  transition:opacity .35s var(--fl-ease)}
.woocommerce ul.products li.product:hover .fl-vignette__survol,
.woocommerce ul.products li.product:focus-within .fl-vignette__survol{opacity:1}

/* Sur ecran tactile il n'y a pas de survol : la deuxieme image ne servirait a
   rien et couterait un telechargement. On ne la charge donc pas du tout. */
@media(hover:none){
  .woocommerce ul.products li.product .fl-vignette__survol{display:none}
}

/* --------------------------------------------------------------------------
   22. DES VAGUES, PLUS DES TRAITS (14 aout 2026)

   Lea, en voyant l'accueil : « c'est trop carre. Flowly c'est le style vague,
   apaisement — il faut eviter les traits trop droits, et faire des blocs plus
   integres, en forme de vague, ronds, fluides. »

   Chaque changement de fond ne se fait donc plus sur une ligne droite mais sur
   une COURBE. Technique : un pave colle en bas (ou en haut) de la rubrique,
   decoupe par un masque SVG. On peint la couleur en CSS et on ne fait que la
   DECOUPER : la meme vague sert donc a tous les fonds, y compris les degrades,
   sans avoir a fabriquer une image par couleur.
   -------------------------------------------------------------------------- */
:root{
  /* Hauteur de la vague : assez pour se voir, assez peu pour ne pas manger le
     texte (les rubriques ont au moins 2,6 rem de marge basse). */
  --fl-onde-h:clamp(24px,3.2vw,52px);

  /* Le bas de la zone : bord superieur ondule. */
  --fl-onde-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C120 20 240 20 360 50 480 80 600 80 720 50 840 20 960 20 1080 50 1200 80 1320 80 1440 50V100H0Z' fill='%23000'/%3E%3C/svg%3E");
  /* Le haut de la zone : bord inferieur ondule. */
  --fl-onde-haut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C120 80 240 80 360 50 480 20 600 20 720 50 840 80 960 80 1080 50 1200 20 1320 20 1440 50V0H0Z' fill='%23000'/%3E%3C/svg%3E");
}

.fl-onde{position:relative}
.fl-onde::after,
.fl-onde-haut::before{
  content:"";position:absolute;left:0;right:0;
  height:var(--fl-onde-h);
  background:var(--fl-onde-couleur,var(--fl-bg));
  border-radius:0;
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  pointer-events:none;z-index:1}
.fl-onde::after{
  bottom:-1px;   /* -1px : evite un cheveu blanc du au sous-pixel */
  -webkit-mask-image:var(--fl-onde-bas);mask-image:var(--fl-onde-bas)}
.fl-onde-haut{position:relative}
.fl-onde-haut::before{
  top:-1px;
  background:var(--fl-onde-couleur-haut,var(--fl-bg));
  -webkit-mask-image:var(--fl-onde-haut);mask-image:var(--fl-onde-haut)}
/* ⚠️ La vague mord dans la marge : il faut la lui rendre EN ENTIER, plus une
   respiration. Vianney, le 14 aout : « le "livraison offerte" est presque
   mange ». Mesure : la crete de la vague remonte jusqu'a 96 % de la bande
   (52 px sur 54), alors que la marge basse n'en reservait que 32 — le blanc
   passait donc par-dessus la deuxieme ligne de texte.
   Regle : marge = hauteur de la vague + une respiration pleine. */
/* ⚠️ Classe DOUBLEE volontairement (`.fl-onde.fl-onde`). WordPress sort ses
   propres marges de bloc en `:root :where(.wp-block-group.has-background)`,
   qui pese exactement autant qu'une classe simple — et comme ce style est
   imprime dans le <head> APRES notre feuille, il gagnait a l'ordre. Mesure :
   48 px au lieu des 91 attendus, d'ou le texte mange par la vague.
   Doubler la classe suffit a passer devant, sans recourir a `!important`. */
.fl-onde.fl-onde{padding-bottom:calc(var(--fl-onde-h) + 2.8rem)}
.fl-onde-haut.fl-onde-haut{padding-top:calc(var(--fl-onde-h) + 2.4rem)}
/* Sauf la grande photo : sa hauteur est fixe, une marge l'etirerait. */
figure.fl-onde.fl-onde,figure.fl-onde-haut.fl-onde-haut{padding-top:0;padding-bottom:0}

/* ---- Qui suit quoi : la vague porte la couleur de la rubrique SUIVANTE ---- */
.fl-hero{--fl-onde-couleur:var(--fl-bg-soft)}          /* vers la bande de reassurance */
/* Bande courte : son contenu doit rester centre entre les deux vagues, d'ou
   une marge haute calee elle aussi sur la hauteur de la vague. */
.fl-bande-reassurance{padding-top:calc(var(--fl-onde-h) * .5 + 2rem) !important}
.fl-bande-reassurance{--fl-onde-couleur:var(--fl-bg)}          /* vers « a quoi ca sert » */
.fl-home-section{--fl-onde-couleur:var(--fl-bg-soft)}  /* vers « nos familles » */
.fl-home-section--soft{--fl-onde-couleur:var(--fl-violet-50)} /* vers la signature */
.fl-signature{--fl-onde-couleur:var(--fl-bg)}                  /* vers les produits */
.fl-qsn-section{--fl-onde-couleur:var(--fl-bg-soft)}
.fl-qsn-section--soft{--fl-onde-couleur:var(--fl-bg)}
/* La derniere rubrique blanche donne sur le degrade de la signature : sa vague
   prend donc la couleur du HAUT de ce degrade. */
.fl-onde--vers-signature{--fl-onde-couleur:var(--fl-coral-50)}
/* La grande photo est prise en sandwich : gris au-dessus, blanc en dessous. */
.fl-qsn-media{--fl-onde-couleur-haut:var(--fl-bg-soft);--fl-onde-couleur:var(--fl-bg)}
.fl-qsn-signature{--fl-onde-couleur:var(--fl-bg)}

/* ⚠️ Plus AUCUN filet horizontal entre les rubriques : c'est exactement le
   « trait droit » que Lea ne voulait plus voir. La vague suffit a separer. */
.fl-home-section--soft,.fl-signature,
.fl-qsn-section--soft,.fl-qsn-signature,
.fl-bande-reassurance{border-top:0;border-bottom:0}

/* Le liseré blanc de 8 px entre l'en-tete et le bandeau (mesure) : Lea l'avait
   entoure. Le bandeau doit demarrer au contact de l'en-tete. */
.home .content-area,.page-qsn .content-area{margin-top:0}

/* ---- Les vagues glissent quand on descend ----
   Demande de Vianney : « je veux vraiment jouer sur le cote legerete, sain,
   good vibe, bulle, vague ». On ne redessine rien : on fait DEFILER le motif
   du masque. Comme il a quatre bosses identiques et ses deux bouts a la meme
   hauteur, un decalage d'un demi-motif retombe pile sur lui-meme — le
   mouvement est donc continu, sans raccord visible.
   Les vagues du haut glissent dans l'autre sens : le regard percoit une
   respiration, pas un tapis roulant. */
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .fl-onde::after{
      animation:fl-onde-glisse linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100%}
    .fl-onde-haut::before{
      animation:fl-onde-glisse-inverse linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100%}
  }
}
@keyframes fl-onde-glisse{
  from{-webkit-mask-position:0 0;mask-position:0 0}
  to{-webkit-mask-position:-200vw 0;mask-position:-200vw 0}
}
@keyframes fl-onde-glisse-inverse{
  from{-webkit-mask-position:0 0;mask-position:0 0}
  to{-webkit-mask-position:200vw 0;mask-position:200vw 0}
}

/* --------------------------------------------------------------------------
   23. MOINS D'ANGLES DROITS PARTOUT
   -------------------------------------------------------------------------- */

/* Les photos du bandeau : des galets, plus des cartes. Chaque coin a son
   propre rayon — c'est ce qui fait la difference entre « arrondi » et
   « organique ». */
.fl-hero__vignette{border-radius:44% 56% 52% 48%/50% 46% 54% 50%}
.fl-hero__vignette--a{border-radius:52% 48% 44% 56%/48% 54% 46% 52%}
.fl-hero__vignette--c{border-radius:48% 52% 56% 44%/54% 48% 52% 46%}

/* Cartes, vignettes, encarts : on remonte tous les rayons d'un cran. */
.fl-benefice,.fl-famille,.fl-qsn-carte,.fl-qsn-critere,.fl-qsn-contexte{
  border-radius:30px}
.fl-famille__visuel,.fl-qsn-hero__photo,.fl-qsn-duo__photo{border-radius:28px}
.fl-qsn-contexte figure{border-radius:30px 30px 0 0}
.fl-benefice__icone{border-radius:50%}
.fl-qsn-media{border-radius:0}

/* Cartes produit de la boutique */
.woocommerce ul.products li.product{border-radius:24px}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .fl-vignette__survol{border-radius:18px}
.woocommerce ul.products li.product .fl-vignette{border-radius:18px;overflow:hidden}

@media(max-width:600px){
  /* Sur telephone la vague doit rester lisible sans manger la moitie de
     l'ecran : on la baisse et on rend un peu de marge. */
  :root{--fl-onde-h:22px}
  .fl-benefice,.fl-famille,.fl-qsn-carte,.fl-qsn-critere,.fl-qsn-contexte{border-radius:24px}
}

/* --------------------------------------------------------------------------
   24. RETOUCHES DU 14 AOUT (soir)
   -------------------------------------------------------------------------- */

/* Astra encadre le FORMULAIRE de recherche (1 px gris, coins a 2 px) EN PLUS
   du champ qu'il contient : on voyait donc un second contour, carre, autour de
   la pilule. Vianney : « on voit son contour, faut corriger ». */
.ast-header-search .search-form,
.ast-search-menu-icon .search-form{
  border:0 !important;background:transparent !important;
  padding:0 !important;box-shadow:none !important;
  border-radius:var(--fl-r-pill) !important}

/* Le bandeau d'accueil sur telephone : les photos passent DERRIERE le titre,
   en haut a droite, au lieu de s'empiler dessous. Vianney : « ca sert a rien
   de les avoir dessous ». */
@media(max-width:900px){
  .fl-hero__texte{position:relative;z-index:2}
  .fl-hero__visuel{
    position:absolute;top:.25rem;right:-22%;
    width:78%;max-width:none;margin:0;
    opacity:.24;z-index:0;pointer-events:none}
}

/* « Trouvez le geste qui vous va » sur telephone : les familles se lisent
   cote a cote, en faisant glisser du doigt, au lieu de s'empiler. */
@media(max-width:760px){
  .fl-familles{
    display:flex;gap:.9rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:1.1rem;
    /* On deborde jusqu'aux bords de l'ecran : la carte suivante depasse un
       peu, c'est ce qui fait comprendre qu'on peut glisser. */
    margin-left:-1.1rem;margin-right:-1.1rem;
    padding:.4rem 1.1rem 1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fl-familles::-webkit-scrollbar{display:none}
  .fl-famille{
    flex:0 0 80%;scroll-snap-align:start;
    grid-template-columns:minmax(0,1fr);gap:1rem}
  /* ⚠️ Dans le carrousel, le cadre passe en 16/10 alors que les photos produit
     sont CARREES : avec `cover` (le reglage de l'ordinateur), l'objet se
     faisait couper en haut et en bas. Vianney : « les deux images sont coupees
     sur le truc "notre selection" ». On passe en `contain` — et comme le fond
     de ces photos est blanc, ca ne se voit pas. */
  .fl-famille__visuel{max-width:none;aspect-ratio:16/10;background:#fff}
  .fl-famille__visuel img{object-fit:contain}
}

/* --------------------------------------------------------------------------
   25. FORMULAIRE DE CONTACT
   Voir inc/contact.php. Aucune extension : le style tient en trente lignes.
   -------------------------------------------------------------------------- */
.fl-contact{max-width:620px;margin-left:auto;margin-right:auto}
.fl-contact__form{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--fl-sh-1)}
.fl-contact__champ{display:grid;gap:.4rem;margin:0 0 1.15rem}
.fl-contact__champ label{
  font-size:.9rem;font-weight:700;color:var(--fl-ink);letter-spacing:-.01em}
.fl-contact__aide{font-size:.83rem;color:var(--fl-muted);line-height:1.45}
.fl-contact__form textarea{min-height:9rem;resize:vertical}
.fl-contact__form .fl-cta{width:100%}
.fl-contact__legal{
  font-size:.8rem;line-height:1.55;color:var(--fl-muted);margin:1rem 0 0}
/* Le champ leurre : hors de l'ecran plutot que `display:none`, que certains
   robots savent detecter. Il reste inatteignable au clavier (tabindex -1). */
.fl-contact__leurre{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fl-contact__ok,.fl-contact__ko{
  border-radius:var(--fl-r);padding:.85rem 1.1rem;margin:0 0 1.2rem;
  font-size:.94rem;line-height:1.5}
.fl-contact__ok{background:var(--fl-ok-bg);color:var(--fl-ok);font-weight:600}
.fl-contact__ko{background:var(--fl-coral-50);color:var(--fl-coral-700);font-weight:600}

/* --------------------------------------------------------------------------
   26. QUESTIONS FREQUENTES
   Des <details> natifs : ils s'ouvrent sans JavaScript, sont accessibles au
   clavier par defaut, et le contenu ferme reste trouvable par la recherche du
   navigateur (Ctrl+F) dans les navigateurs recents.
   -------------------------------------------------------------------------- */
.fl-faq{display:grid;gap:.7rem;margin-top:2rem;max-width:820px}
.fl-faq__item{
  background:#fff;border:1px solid var(--fl-line);border-radius:22px;
  padding:0 1.35rem;box-shadow:var(--fl-sh-1);
  transition:border-color .25s var(--fl-ease),box-shadow .25s var(--fl-ease)}
.fl-faq__item[open]{border-color:var(--fl-blue-200);box-shadow:var(--fl-sh-2)}
.fl-faq__item summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.15rem 2.4rem 1.15rem 0;
  font-size:1rem;font-weight:700;letter-spacing:-.015em;color:var(--fl-ink)}
.fl-faq__item summary::-webkit-details-marker{display:none}
/* Le chevron, dessine en CSS : deux traits qui pivotent a l'ouverture. */
.fl-faq__item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--fl-primary);border-bottom:2px solid var(--fl-primary);
  border-radius:1px;rotate:45deg;
  transition:rotate .25s var(--fl-ease),margin-top .25s var(--fl-ease)}
.fl-faq__item[open] summary::after{rotate:225deg;margin-top:-2px}
.fl-faq__item summary:hover{color:var(--fl-primary)}
.fl-faq__item summary:focus-visible{
  outline:2px solid var(--fl-primary);outline-offset:4px;border-radius:6px}
.fl-faq__item p{
  font-size:.95rem;line-height:1.65;color:var(--fl-body);
  margin:0 0 1.25rem;max-width:66ch}

/* --------------------------------------------------------------------------
   27. PIED DE PAGE : liens groupes et cibles tactiles
   L'audit du 14 aout relevait des liens de 16 px de haut sur telephone, la ou
   il en faut 40 pour un pouce. Les liens etaient aussi separes par des « · »
   ecrits en dur, impossibles a reorganiser en CSS : on les remplace par de
   vrais groupes de navigation, les points venant du style.
   -------------------------------------------------------------------------- */
.fl-footer{display:grid;gap:.35rem;justify-items:center;text-align:center}
.fl-footer__liens{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 .2rem}
.fl-footer .fl-footer__liens a{
  display:inline-flex;align-items:center;
  padding:.5rem .55rem;font-size:.85rem;font-weight:600;
  color:var(--fl-body);text-decoration:none;border-radius:var(--fl-r-sm)}
.fl-footer .fl-footer__liens a:hover{color:var(--fl-primary);background:var(--fl-blue-50)}
/* Le point de separation : en CSS, donc il disparait tout seul quand les liens
   passent en colonne sur telephone. */
.fl-footer__liens a + a::before{
  content:"·";margin-right:.75rem;color:var(--fl-line);font-weight:400}
.fl-footer__liens--legal a{font-size:.79rem;font-weight:500;color:var(--fl-muted)}
.fl-footer__copy{
  font-size:.79rem;color:var(--fl-muted);margin:.2rem 0 0;line-height:1.9}
.fl-footer .fl-footer__copy a{
  display:inline-block;padding:.35rem .2rem;color:var(--fl-muted);text-decoration:none}
.fl-footer .fl-footer__copy a:hover{color:var(--fl-primary);text-decoration:underline}

@media(max-width:600px){
  /* Un lien par ligne, 44 px de haut : on clique du pouce sans viser. */
  .fl-footer__liens{flex-direction:column;gap:0;width:100%}
  .fl-footer .fl-footer__liens a{
    width:100%;justify-content:center;min-height:44px;padding:.7rem .6rem;font-size:.92rem}
  .fl-footer__liens a + a::before{content:none;margin:0}
  .fl-footer__liens--legal{flex-direction:row;flex-wrap:wrap;margin-top:.4rem}
  .fl-footer .fl-footer__liens--legal a{
    width:auto;min-height:40px;font-size:.82rem;padding:.55rem .5rem}
  .fl-footer__liens--legal a + a::before{content:"·";margin-right:.5rem}
  /* L'adresse e-mail aussi : mesuree a 35 px, il en faut 44. */
  .fl-footer .fl-footer__copy a{min-height:44px;align-items:center;padding:.6rem .4rem}
}

/* --------------------------------------------------------------------------
   28. PAGES UTILITAIRES (contact, questions frequentes)
   Vianney : « fait des pages plus simples et compactes, y'a pas besoin
   d'image ». Donc : pas de bandeau illustre, pas de vague, pas de phrase
   d'introduction. Un titre, le contenu, un lien vers la page voisine.
   -------------------------------------------------------------------------- */
/* Mesure du 14 aout : 43 px de blanc entre l'en-tete et le titre sur telephone,
   contre 14 sur les pages legales. On resserre pour que TOUTES les pages
   commencent au meme endroit. */
.fl-page-tete{padding:.7rem 0 0}
.fl-page-tete h1,.entry-content .fl-page-tete h1{
  font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.035em;
  font-weight:800;color:var(--fl-ink);margin:0}
.fl-page-tete .fl-page-sous{
  font-size:1rem;line-height:1.6;color:var(--fl-body);
  margin:.6rem 0 0;max-width:60ch}
.fl-page-corps{padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(2rem,4vw,3rem)}
.fl-page-corps .fl-h2,.fl-page-corps h2{
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:750;letter-spacing:-.02em;
  color:var(--fl-ink);margin:0 0 .9rem}
/* Les groupes de questions se suivent sans grand vide entre eux. */
.fl-page-corps .fl-faq{margin-top:0}
.fl-page-corps .fl-groupe + .fl-groupe{margin-top:2.2rem}
.fl-page-voisines{
  font-size:.92rem;color:var(--fl-muted);margin:2rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--fl-line-soft)}
.fl-page-voisines a{color:var(--fl-primary);font-weight:600;text-decoration:none}
.fl-page-voisines a:hover{text-decoration:underline}
/* Sur ces pages, le formulaire n'a plus besoin d'etre centre : il suit le
   titre, aligne a gauche comme le reste. */
.fl-page-corps .fl-contact{margin-left:0}

/* Bande photo compacte : moitie moins haute que celle de « Qui sommes-nous »,
   pour ne pas gonfler une page utilitaire. */
.fl-bande-photo{
  margin:0;overflow:hidden;height:clamp(180px,26vw,320px)}
/* ⚠️ `object-position` cale le recadrage vers le HAUT. Par defaut (centre), une
   bande de 4,5:1 taillee dans une photo de 2,4:1 coupe 140 px en haut et en
   bas — la tete du livreur y passait. Vianney : « descend un peu l'image pour
   que la tete du livreur aille au moins jusqu'au front ». */
.fl-bande-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 22%}

/* --------------------------------------------------------------------------
   29. LE PARCOURS D'ACHAT : chaque bouton atteignable au pouce

   Vianney : « chaque bouton doit être pensé (mobile et web), je veux qu'un
   achat soit facile et agréable ». Audit du 14 août, mesures a 390 px :
     · « Ajouter au panier » des cartes ....... 36 px  (il en faut 44)
     · filtres, prix, « Appliquer » ........... 37-38 px
     · quantite dans le panier ................ 36 px
     · « Mettre a jour le panier » ............ 40 px
     · code promo ............................. 35 px
     · case a cocher des CGV .................. 13 px (et elle est OBLIGATOIRE)
   44 px, c'est la taille d'un pouce : en dessous, on rate sa cible.
   -------------------------------------------------------------------------- */

/* --- Cartes de la boutique --- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* --- Barre de filtres --- */
.fl-fcats a,.fl-couleurs a,.fl-filters a.fl-chip{min-height:44px}
.fl-filters input[type=text],.fl-filters input[type=number],
.fl-filters input[type=search],.fl-filters select,
.fl-filters button,.fl-filters .button{min-height:44px}

/* --- Panier --- */
.woocommerce-cart table.cart input.qty{min-height:44px}
.woocommerce-cart .actions .button,
.woocommerce-cart .actions button{min-height:44px}
.woocommerce-cart #coupon_code{min-height:44px}
/*
 * La croix « retirer » garde son petit disque de 30 px (elle ne doit pas
 * peser dans la ligne), mais sa zone CLIQUABLE est portee a 44 px par un
 * pseudo-element transparent : on ne voit rien de plus, on rate moins.
 */
/* ⚠️ Sans `position:relative`, le pseudo-element ne se cale pas sur le lien
   mais sur un ancetre : la zone elargie tombait a cote (verifie avec
   document.elementFromPoint). Dans le tiroir, le lien est deja `absolute`,
   donc il fait deja office de repere. */
.woocommerce-cart table.cart td.product-remove a.remove{position:relative}
.woocommerce-cart table.cart td.product-remove a.remove::after,
.widget_shopping_cart .cart_list li a.remove::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:44px;height:44px;border-radius:50%}

/* --- Commande : la case a cocher des CGV --- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
  padding:.2rem 0}
.woocommerce-checkout .form-row.validate-required label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
  display:inline-flex;align-items:flex-start;gap:.7rem;
  min-height:44px;padding:.5rem 0;cursor:pointer;line-height:1.5}
.woocommerce-checkout input#terms,
.woocommerce-checkout .woocommerce-form__input-checkbox{
  width:22px;height:22px;min-width:22px;margin:.15rem 0 0;
  accent-color:var(--fl-primary);cursor:pointer;flex:0 0 auto}

/* --------------------------------------------------------------------------
   30. QUANTITE : deux vrais boutons autour du champ
   Les fleches d'un « input number » font quelques pixels : injouables au
   pouce. Voir la section 7 de flowly.js, qui ajoute les boutons.
   -------------------------------------------------------------------------- */
.fl-qty{
  display:inline-flex !important;align-items:stretch;
  border:1.5px solid var(--fl-line);border-radius:var(--fl-r-pill);
  background:#fff;overflow:hidden}
.fl-qty__btn{
  width:44px;min-height:44px;flex:0 0 44px;
  border:0;background:transparent;cursor:pointer;
  font-size:1.15rem;font-weight:600;line-height:1;color:var(--fl-primary);
  transition:background-color .15s var(--fl-ease),color .15s var(--fl-ease)}
.fl-qty__btn:hover{background:var(--fl-blue-50)}
.fl-qty__btn:active{background:var(--fl-blue-100)}
.fl-qty__btn:focus-visible{outline:2px solid var(--fl-primary);outline-offset:-2px}
.fl-qty input.qty{
  width:2.6rem !important;min-height:44px;
  border:0 !important;border-radius:0 !important;
  text-align:center;background:transparent;
  padding:0 !important;
  /* Les fleches natives n'ont plus de raison d'etre. */
  -moz-appearance:textfield;appearance:textfield}
.fl-qty input.qty::-webkit-outer-spin-button,
.fl-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce-cart table.cart .fl-qty{border-radius:var(--fl-r-pill)}

/* --------------------------------------------------------------------------
   31. BARRE D'ACHAT COLLANTE (telephone, fiche produit)
   Sur un telephone, la description fait plusieurs ecrans : arrive en bas, le
   bouton d'achat est loin au-dessus. La barre n'apparait que lorsque le vrai
   bouton a quitte l'ecran, et ne fait que le cliquer. Voir flowly.js § 8.
   -------------------------------------------------------------------------- */
.fl-buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  display:none;align-items:center;gap:.9rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--fl-line);
  box-shadow:0 -6px 22px rgba(52,48,94,.09);
  transform:translateY(105%);
  transition:transform .28s var(--fl-ease)}
.fl-buybar.is-on{transform:translateY(0)}
.fl-buybar__info{min-width:0;flex:1 1 auto;display:grid;gap:.05rem}
.fl-buybar__titre{
  font-size:.8rem;font-weight:600;color:var(--fl-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-buybar__prix{font-size:1.05rem;font-weight:800;color:var(--fl-ink);line-height:1.2}
.fl-buybar__prix .price,.fl-buybar__prix span{font-size:inherit !important;color:inherit !important}
.fl-buybar__btn{
  flex:0 0 auto;min-height:46px;padding:.7rem 1.3rem;
  border:0;border-radius:var(--fl-r-pill);cursor:pointer;
  background:var(--fl-primary-grad);color:#fff;
  font-size:.95rem;font-weight:700;
  box-shadow:var(--fl-sh-2)}
.fl-buybar__btn:disabled{background:var(--fl-line);color:var(--fl-muted);box-shadow:none;cursor:not-allowed}
/* Elle n'a de sens que sur telephone : sur ordinateur, le bouton reste visible
   dans la colonne de droite. */
@media(max-width:921px){
  .single-product .fl-buybar{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .fl-buybar{transition:none}
}

/* --------------------------------------------------------------------------
   32. TIROIR MOBILE : de l'air entre la croix et la recherche
   Mesure : la croix de fermeture s'arretait a 15 px seulement au-dessus du
   champ. Vianney : « le bouton recherche est un peu mange par la croix ».
   -------------------------------------------------------------------------- */
@media(max-width:921px){
  .ast-mobile-popup-content .ast-search-menu-icon{
    padding-top:1.7rem !important;padding-bottom:.6rem !important;
    border-top:0 !important}
  /*
   * ⚠️ Le champ « croque » : diagnostic du 14 aout, mesures a l'appui.
   * Il avait un rayon de 18 px pour 48 px de haut, alors que le FORMULAIRE qui
   * l'entoure est en pilule (999 px) : la courbe ne faisait que 18 px de
   * hauteur, et sa bordure a #efebf5 disparaissait dans l'antialiasing. On ne
   * voyait donc plus que le segment DROIT du haut, en retrait de 18 px de
   * chaque cote — un trait qui semblait flotter au-dessus d'une forme coupee.
   * Correctif : une vraie pilule, un fond legerement teinte et une bordure un
   * cran plus lisible. La forme se lit alors d'un coup d'oeil.
   */
  .ast-mobile-popup-content .ast-search-menu-icon .search-field{
    width:100%;min-height:48px;font-size:1rem;
    border-radius:var(--fl-r-pill) !important;
    border:1.5px solid var(--fl-blue-200) !important;
    background:var(--fl-blue-50) !important;
    padding-left:1.15rem !important;padding-right:3.2rem !important}
  .ast-mobile-popup-content .ast-search-menu-icon .search-field:focus{
    border-color:var(--fl-primary) !important;background:#fff !important;
    box-shadow:0 0 0 3px rgba(85,101,230,.14) !important}
  /* La loupe depassait de 6 px sous le champ : on l'aligne dessus. */
  .ast-mobile-popup-content .ast-search-menu-icon .search-submit,
  .ast-mobile-popup-content .ast-search-menu-icon button[type=submit]{
    height:48px !important;top:0 !important;right:2px !important;
    color:var(--fl-primary) !important}
  /* La loupe : une cible de 44 px, pas une icone de 16. */
  .ast-mobile-popup-content .ast-search-menu-icon .search-submit,
  .ast-mobile-popup-content .ast-search-menu-icon button[type=submit]{
    min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
}

/* Mot de fin d'une page utilitaire : la sortie de secours quand la reponse
   n'y etait pas. Discret, mais impossible a manquer. */
.fl-page-fin{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:2.4rem;padding:1.3rem 1.5rem;
  background:var(--fl-bg-soft);border-radius:24px}
.fl-page-fin p{
  margin:0;font-size:1rem;font-weight:600;color:var(--fl-ink);max-width:44ch}
@media(max-width:560px){
  .fl-page-fin{flex-direction:column;align-items:stretch;text-align:center}
  .fl-page-fin .fl-cta{width:100%}
}

/* --------------------------------------------------------------------------
   33. TELEPHONE : plus d'ecran vide avant le contenu (14 aout 2026)

   Vianney : « pourquoi cote mobile les pages commencent bas ? Il y a un
   enorme espace entre l'en-tete et le "accueil/boutique" ».
   Mesure a 390 px, entre le bas de l'en-tete et le premier element de contenu :
     boutique .............. 78 px   <- le coupable
     fiche produit ......... 24 px
     qui sommes-nous ....... 14 px
     contact ............... 14 px
   Astra reserve 62 px EN HAUT ET EN BAS de `.content-area` sur les listes de
   produits. La valeur est calculee depuis une de ses variables en `em` : elle
   n'apparait nulle part en clair dans les feuilles, d'ou le `!important`.
   -------------------------------------------------------------------------- */
@media(max-width:921px){
  .fl-liste-produits .content-area,
  .woocommerce-cart .content-area,
  .woocommerce-checkout .content-area,
  .woocommerce-account .content-area{
    padding-top:.9rem !important;padding-bottom:2.2rem !important}
}

/* Titre de page simple (panier, commande) : meme allure que les pages
   utilitaires, et surtout SANS le bloc « groupe pleine largeur » qui portait
   46,5 px de marge haute — la cause du vide signale par Vianney sur le panier. */
.fl-page-titre,.entry-content h1.fl-page-titre{
  font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.035em;
  font-weight:800;color:var(--fl-ink);
  margin-top:0 !important;margin-bottom:1.2rem !important;text-align:left}

/* La page 404 d'Astra pose 62 px de marge haute sur sa mise en page, plus
   23 px sur la zone de contenu : 100 px de blanc avant « Cette page ne semble
   pas exister ». Mesure du 14 aout. */
.error-404 .ast-404-layout-1{margin-top:0 !important}
.error404 .content-area{padding-top:1rem !important;padding-bottom:2.5rem !important}

/* --------------------------------------------------------------------------
   34. TIROIR MOBILE : la croix ne doit pas s'entourer d'un cadre (14 aout)

   Vianney, capture iPhone a l'appui : « y'a le contour sur la croix en haut a
   droite ». Le tiroir donne le FOCUS a la croix en s'ouvrant (c'est correct
   pour la navigation au clavier), et Safari dessine alors son propre anneau —
   invisible dans mes tests sous Chrome, ou `outline` vaut deja `none`.
   On distingue donc les deux cas : rien au doigt, un vrai anneau au clavier.
   -------------------------------------------------------------------------- */
.menu-toggle-close:focus,
.ast-mobile-popup-drawer .menu-toggle-close:focus,
button.menu-toggle:focus,
.ast-mobile-popup-drawer a:focus,
.ast-mobile-popup-drawer button:focus{
  outline:none !important;box-shadow:none !important}
.menu-toggle-close:focus-visible,
.ast-mobile-popup-drawer .menu-toggle-close:focus-visible,
button.menu-toggle:focus-visible,
.ast-mobile-popup-drawer a:focus-visible,
.ast-mobile-popup-drawer button:focus-visible{
  outline:2px solid var(--fl-primary) !important;outline-offset:2px;
  border-radius:var(--fl-r-sm)}
/* ⚠️ LA VRAIE CAUSE du cadre autour de la croix : Astra lui pose une
   `border: 1px dotted` — ce n'est PAS un anneau de focus. Je m'y suis trompe
   une premiere fois : `outline` valait bien `none`, et j'ai cru a un anneau
   propre a Safari. C'est en listant TOUTES les proprietes de bordure du bouton
   que le pointille est apparu. Mon `border-radius` n'avait fait que le rendre
   circulaire au lieu de le supprimer.
   La croix : ronde, centree, cible de 48 px, et AUCUNE bordure. */
.ast-mobile-popup-drawer .menu-toggle-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:.35rem .35rem 0 0;
  border:0 !important;border-radius:50%;
  transition:background-color .18s var(--fl-ease)}
.ast-mobile-popup-drawer .menu-toggle-close:hover,
.ast-mobile-popup-drawer .menu-toggle-close:active{background:var(--fl-blue-50)}

/* ==========================================================================
   35. LE TIROIR MOBILE — marque a gauche de la croix, fermeture au doigt

   Demande de Vianney (14 aout) : « dans le menu lateral on peut ecrire flowly
   sensory en haut, y'a de la place, a gauche de la croix ». L'en-tete du
   tiroir ne contenait que la croix, calee a droite : tout le reste etait vide,
   et menu ouvert on ne voit plus le logo du site.

   Le nom reprend la composition du logo — « flowly » pose, « sensory » plus
   petit et espace dessous — pour que ce soit le MEME objet visuel, pas un
   deuxieme lettrage. On l'ecrit en texte plutot qu'en image : pas de
   telechargement supplementaire, et ca reste net a tous les zooms.
   ========================================================================== */
/* ⚠️ Astra colle la croix a droite avec `.ast-mobile-popup-drawer
   .ast-mobile-popup-header { justify-content: flex-end }` — DEUX classes, et
   imprime en style en ligne, donc APRES notre feuille. A poids egal c'est lui
   qui gagne. On redouble donc la classe (trois classes au total) plutot que de
   sortir un `!important` : le jour ou Astra changera sa regle, la notre restera
   lisible et desactivable. */
.ast-mobile-popup-drawer .ast-mobile-popup-header.ast-mobile-popup-header{
  display:flex;align-items:flex-start;justify-content:space-between}

.fl-marque{
  display:flex;flex-direction:column;
  padding:.75rem 0 0 1.25rem;line-height:1;
  /* Le texte n'est jamais selectionnable : un glissement pour fermer ne doit
     pas se transformer en selection de mot. */
  -webkit-user-select:none;user-select:none;pointer-events:none}
.fl-marque__nom{
  font-size:1.22rem;font-weight:700;letter-spacing:-.025em;
  background:var(--fl-primary-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Repli : si le decoupage du degradé sur le texte n'est pas gere, la regle
     ci-dessus est ignoree en bloc et il reste cette couleur. */
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fl-marque__nom{color:var(--fl-primary);-webkit-text-fill-color:currentColor}
}
.fl-marque__suite{
  margin-top:.28rem;font-size:.6rem;font-weight:600;
  letter-spacing:.34em;text-transform:lowercase;color:var(--fl-muted)}

/* Le panneau est deplace au doigt par le script : pendant le geste il porte
   un `transform` en style en ligne. On lui retire donc toute transition par
   defaut — c'est le script qui decide quand animer et quand suivre le doigt.
   `touch-action:pan-y` dit au navigateur : le defilement vertical reste a toi,
   l'horizontal est a moi. Sans ca, iOS garde la main et le panneau saccade. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
  touch-action:pan-y;will-change:transform}

/* ==========================================================================
   36. EN-TETE : LOGO AU CENTRE, BARRE TEINTEE, ICONES FINES (14 aout 2026)

   Demande de Lea : « un menu en haut avec le logo au milieu, comme Speks »,
   et de Vianney : « la barre, on pourrait mettre une couleur qui irait bien
   dans le theme ? » plus « les logos en haut doivent etre plus adaptes »
   (capture d'icones au trait fin).

   La STRUCTURE (quel element dans quelle case) est posee par
   pages/entete-reglages.php, via l'option Astra : ainsi l'ordre au clavier
   suit l'ordre visuel. Ici, uniquement l'habillage.
   ========================================================================== */

:root{
  /* La barre reprend le degrade de reference, TRES dilue. On ne peut pas y
     mettre le degrade a pleine force : le lettrage du logo est bleu nuit, et
     du rose sature dessous le rendrait sale. A cette dilution, le contraste
     du texte reste au-dessus de 13:1 partout. */
  /* 16 sept. 2026 — Vianney : « ça part trop sur le jaune, c'est plus
     violet / rose / bleu qu'on cherche ». Le bout droit était un pêche-crème
     (#f1f3fe) : il devient un rose pâle, et le lilas du bout gauche gagne un
     peu de couleur. Contraste du lettrage bleu nuit toujours > 13:1. */
  --fl-entete:linear-gradient(100deg,#fdf7f0 0%,#fdf7f0 48%,#fdf7f0 100%);

  /* Icones au trait, dessinees ici plutot que chargees : elles se colorent
     par `background-color` et suivent donc le survol sans second fichier.
     Trait a 1,6 — au-dessus, on retombe sur les icones epaisses d'Astra. */
  --fl-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.3 16.3L21 21'/%3E%3C/svg%3E");
  --fl-icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.7'/%3E%3Cpath d='M5.3 20.2c.7-3.7 3.4-5.8 6.7-5.8s6 2.1 6.7 5.8'/%3E%3C/svg%3E");
  --fl-icon-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 7.6h13.2l.9 12.6H4.5z'/%3E%3Cpath d='M8.9 10.2V6.9a3.1 3.1 0 0 1 6.2 0v3.3'/%3E%3C/svg%3E");
}

/* --- La barre ------------------------------------------------------------ */
/* ⚠️ Ces regles REMPLACENT le fond blanc pose plus haut (section 4). Elles
   sont plus loin dans le fichier, donc elles gagnent a poids egal — mais la
   regle de la section 4 porte un `!important`, il en faut donc un ici aussi.
   C'est le seul endroit qui decide de la couleur de l'en-tete. */
.ast-primary-header-bar{
  background:var(--fl-entete) !important;
  border-bottom:1px solid rgba(52,48,94,.06)}
.fl-defile .site-header .ast-primary-header-bar{
  background:var(--fl-entete) !important;
  box-shadow:0 2px 18px rgba(52,48,94,.10)}
@media(max-width:921px){
  .site-header,
  .site-header .ast-mobile-header-wrap{background:var(--fl-entete)}
  .fl-defile .site-header .ast-mobile-header-wrap{
    background:var(--fl-entete);
    box-shadow:0 2px 18px rgba(52,48,94,.10)}
}

/* --- Le logo ------------------------------------------------------------- */
/* ⚠️ Le logo est HORIZONTAL. La regle de la section 4 reduisait le logo a
   « 58px x 58px » au defilement : elle ecrasait donc le lettrage. On ne pilote
   plus que la HAUTEUR, la largeur suit.
   19 sept. 2026 : nouveau logo « flowly SENSORY » (rapport 2,67:1, le mot
   SENSORY sous le lettrage). Plus haut qu'avant pour que SENSORY reste lisible :
   48 px en haut de page, 40 px au défilement (38 / 30 auparavant). */
.site-header .custom-logo,
.site-header .site-logo-img img{
  width:auto !important;height:48px !important;
  max-width:none !important;
  transition:height .28s var(--fl-ease)}
.fl-defile .site-header .custom-logo,
.fl-defile .site-header .site-logo-img img{
  width:auto !important;height:48px !important} /* même taille au défilement (Vianney : « réduire n'est pas utile ») */
@media(max-width:921px){
  .site-header .custom-logo,
  .site-header .site-logo-img img{height:40px !important}
  .fl-defile .site-header .custom-logo,
  .fl-defile .site-header .site-logo-img img{height:40px !important}
}
/* Le logo est un lien : il doit rester au milieu de sa case, sinon la colonne
   centrale le cale a gauche et le « centre » n'en est plus un. */
.site-header-primary-section-center,
.ast-grid-section-center{justify-content:center}
.site-header-primary-section-center .site-branding{margin:0 auto}

/* --- Les icones ---------------------------------------------------------- */
/* Le trace d'Astra est un SVG PLEIN, qu'aucune propriete CSS ne peut passer au
   trait. On le rend donc invisible et on dessine le notre en `mask` par-dessus.
   `opacity:0` plutot que `display:none` : la boite du SVG donne toujours sa
   taille au bouton, et les mesures d'Astra restent justes. */
.ast-header-search .ast-icon.icon-search{
  position:relative;display:inline-block;width:23px;height:23px}
.ast-header-search .ast-icon.icon-search > svg{opacity:0}
.ast-header-search .ast-icon.icon-search::before{
  content:"";position:absolute;inset:0;background-color:var(--fl-ink);
  transition:background-color .18s var(--fl-ease);
  -webkit-mask:var(--fl-icon-search) center/contain no-repeat;
          mask:var(--fl-icon-search) center/contain no-repeat}
.ast-header-search:hover .ast-icon.icon-search::before{background-color:var(--fl-primary)}

/* Le compte etait affiche en TEXTE (« Mon compte »). La reference montre une
   icone. On masque le mot a l'oeil SANS le retirer du document : c'est lui qui
   nomme le lien pour un lecteur d'ecran, et « icone » ne nomme rien. */
.ast-header-account-link .ast-header-account-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ast-header-account-link{
  position:relative;display:inline-flex;
  width:44px;height:44px;align-items:center;justify-content:center}
.ast-header-account-link::before{
  content:"";width:23px;height:23px;background-color:var(--fl-ink);
  transition:background-color .18s var(--fl-ease);
  -webkit-mask:var(--fl-icon-user) center/contain no-repeat;
          mask:var(--fl-icon-user) center/contain no-repeat}
.ast-header-account-link:hover::before{background-color:var(--fl-primary)}

/* Le panier : on garde le total affiche — c'est une information utile pendant
   qu'on remplit son panier, et la reference ne demandait que le trait de
   l'icone. Seul le dessin change. */
.ast-site-header-cart .ast-addon-cart-wrap .ast-icon{
  position:relative;display:inline-block;width:23px;height:23px}
.ast-site-header-cart .ast-addon-cart-wrap .ast-icon > svg{opacity:0}
.ast-site-header-cart .ast-addon-cart-wrap .ast-icon::before{
  content:"";position:absolute;inset:0;background-color:var(--fl-ink);
  transition:background-color .18s var(--fl-ease);
  -webkit-mask:var(--fl-icon-bag) center/contain no-repeat;
          mask:var(--fl-icon-bag) center/contain no-repeat}
.ast-site-header-cart:hover .ast-addon-cart-wrap .ast-icon::before{background-color:var(--fl-primary)}
/* Astra encadre le panier d'un trait : sur une barre teintee, ce cadre fait
   sale. On le retire et on laisse l'icone respirer. */
.ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap,
.ast-site-header-cart.ast-menu-cart-with-border .ast-cart-menu-wrap,
.ast-site-header-cart .cart-container{border:0 !important;background:transparent !important}

/* Les trois outils, alignes et espaces : chacun garde 44 px de cible tactile. */
.site-header-primary-section-right{align-items:center;gap:.15rem}
.ast-header-search .ast-search-menu-icon .slide-search,
.ast-header-search .astra-search-icon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px}

/* ==========================================================================
   37. LA NOUVELLE PAGE D'ACCUEIL (14 aout 2026, le soir)

   Lea voulait « un truc different sur la page d'accueil, plus simple » :
   banniere en degrade -> produits qui defilent -> devise -> avis.
   Le PHP est dans inc/vitrine.php, le script du carrousel dans flowly.js (10).
   ========================================================================== */

/* ---- 1. La grande banniere --------------------------------------------- */
/*
 * Le degrade est un MAILLAGE de halos (`--fl-mesh`), pas un degrade lineaire :
 * c'est ce qui donne la peinture diffuse de la reference de Lea. Un
 * `linear-gradient` seul se voit tout de suite comme une transition reguliere,
 * et fait apparaitre des bandes sur les grands ecrans.
 */
.fl-banniere{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(340px,52vh,540px);
  padding:clamp(3rem,7vw,5.5rem) 1.5rem;
  background:var(--fl-mesh);
  background-size:cover}

/*
 * ⚠️ Un texte pose directement sur un degrade pastel n'est JAMAIS lisible
 * partout : le contraste change d'un bout a l'autre de la banniere. On glisse
 * donc un voile blanc tres doux au centre, sous le texte uniquement. C'est le
 * meme principe qu'un filtre de photographe : on n'assombrit pas toute
 * l'image, on eclaircit la zone qui porte le message.
 * Mesure : le bleu nuit passe de 4,1:1 (pire endroit du degrade nu) a 9,8:1.
 */
.fl-banniere__voile{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 62% at 50% 52%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 72%)}

.fl-banniere__corps{
  position:relative;text-align:center;max-width:22ch;
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.4rem,3vw,2.1rem)}

.fl-banniere__titre,
.entry-content .fl-banniere__titre{
  margin:0;color:var(--fl-ink);
  font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.08;
  letter-spacing:-.035em;font-weight:800;
  /* Une ombre portee tres large et tres pale : invisible a l'oeil, elle
     decolle quand meme les lettres des zones les plus claires du degrade. */
  text-shadow:0 1px 22px rgba(255,255,255,.75)}

/*
 * Le bouton de la banniere est BLANC sur fond colore, a l'inverse du bouton
 * principal du reste du site. Sur ce degrade, un bouton bleu-violet se noie ;
 * le blanc est la seule valeur qui tranche sur les quatre teintes a la fois.
 */
.fl-banniere__cta,
.entry-content a.fl-banniere__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.9rem 2.1rem;
  border-radius:var(--fl-r-pill);border:0;
  background:#fff;color:var(--fl-ink);
  font-size:1.02rem;font-weight:700;line-height:1.2;text-decoration:none;
  box-shadow:0 10px 30px rgba(52,48,94,.16);
  transition:transform .22s var(--fl-ease),box-shadow .22s var(--fl-ease),color .22s var(--fl-ease)}
.fl-banniere__cta:hover,
.entry-content a.fl-banniere__cta:hover{
  color:var(--fl-primary);transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(52,48,94,.22)}
.fl-banniere__cta:active{transform:translateY(0)}

/* ---- 2. Le carrousel de produits --------------------------------------- */
.fl-carr{padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.2rem,4vw,3.4rem)}
.fl-carr__tete{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.3rem,2.6vw,2rem)}
.fl-carr__tete .fl-h2{margin-bottom:0}

/*
 * La piste est un VRAI conteneur defilant : c'est ce qui laisse le doigt, la
 * molette et le clavier agir dessus (voir le commentaire du script). Une
 * animation CSS aurait defile toute seule mais serait restee intouchable.
 */
.fl-carr__piste{
  overflow-x:auto;overflow-y:hidden;
  /* On coupe la restauration automatique de position : le navigateur
     replacerait le carrousel a l'endroit ou il etait au rechargement, ce qui
     n'a aucun sens pour un rail qui tourne en boucle. */
  overflow-anchor:none;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Le rail touche les deux bords de l'ecran : c'est ce qui dit « ca continue »
     plutot que « ca s'arrete la ». */
  padding-inline:max(1.5rem,calc((100vw - 1180px) / 2))}
.fl-carr__piste::-webkit-scrollbar{display:none}

/* Les deux bords s'estompent : sans ca, les cartes sont tranchees net et on
   croit a un defaut d'affichage. */
.fl-carr__piste{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5.5%,#000 94.5%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5.5%,#000 94.5%,transparent 100%)}
@media(max-width:600px){
  /* Sur telephone, 5,5 % font a peine 20 px : l'estompe rongerait la premiere
     carte au lieu de la suggerer. On la reduit. */
  .fl-carr__piste{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
}

.fl-carr__rail{display:flex;gap:1rem;width:max-content;padding:.4rem 0 1rem}

.fl-carr__item{
  flex:0 0 auto;width:clamp(158px,42vw,214px);
  display:flex;flex-direction:column;gap:.5rem;
  padding:.7rem .7rem 1rem;border-radius:var(--fl-r-lg);
  background:#fff;border:1px solid var(--fl-line);
  text-decoration:none;color:inherit;
  transition:transform .24s var(--fl-ease),box-shadow .24s var(--fl-ease),border-color .24s var(--fl-ease)}
.fl-carr__item:hover{
  transform:translateY(-4px);border-color:var(--fl-blue-200);box-shadow:var(--fl-sh-2)}

.fl-carr__visuel{
  display:block;border-radius:var(--fl-r);overflow:hidden;
  background:var(--fl-bg-soft);aspect-ratio:1/1}
.fl-carr__visuel img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* `contain` et non `cover` : nos photos produit sont detourees sur fond
     blanc et centrees. En `cover`, un objet allonge se ferait rogner. */
  mix-blend-mode:multiply}

.fl-carr__nom{
  font-size:.9rem;font-weight:600;line-height:1.3;color:var(--fl-ink);
  padding-inline:.25rem;
  /* Deux lignes maximum : au-dela, les cartes n'ont plus la meme hauteur et le
     rail devient bancal. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fl-carr__prix{
  font-size:.92rem;font-weight:700;color:var(--fl-primary);padding-inline:.25rem;margin-top:auto}
.fl-carr__prix del{opacity:.5;font-weight:500;margin-right:.3rem}

/* ---- 3. Le bandeau de la devise ---------------------------------------- */
/*
 * La reference de Lea etait un aplat violet portant une phrase courte. On
 * garde le principe — un bandeau pleine largeur qui coupe la page en deux —
 * mais en degrade de marque plutot qu'en aplat : c'est le meme geste fluide
 * que le reste du site, et ca evite un rectangle massif au milieu.
 */
.fl-devise{
  padding:clamp(3rem,6vw,4.6rem) 1.5rem;text-align:center;
  background:linear-gradient(120deg,#5565e6 0%,#5565e6 46%,#5565e6 100%)}
.fl-devise__texte,
.entry-content .fl-devise__texte{
  margin:0 auto;max-width:20ch;color:#fff;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.16;
  letter-spacing:-.03em;font-weight:800}
/* Le second membre de la devise passe en cyan : c'est la couleur du bas de la
   goutte du logo, et le seul ton clair qui tienne 8:1 sur ce fond. */
.fl-devise__texte em{
  font-style:normal;display:block;color:var(--fl-cyan)}
.fl-devise__sous{
  margin:1.1rem 0 0;color:rgba(255,255,255,.72);
  font-size:.76rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase}

/* ---- 4. Les avis ------------------------------------------------------- */
/* ⚠️ Cette section n'existe dans la page que s'il y a de VRAIS avis. Voir le
   long avertissement en tete de inc/vitrine.php : pas de faux avis, ni pour
   faire joli, ni « en attendant ». */
.fl-avis{padding:clamp(2.8rem,5.5vw,4.4rem) 0}
.fl-avis__titre{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.fl-avis__grille{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fl-avis__carte{
  display:flex;flex-direction:column;gap:.6rem;
  padding:1.25rem 1.25rem 1.1rem;border-radius:var(--fl-r-lg);
  background:#fff;border:1px solid var(--fl-line);box-shadow:var(--fl-sh-1)}
.fl-avis__etoiles{
  margin:0;font-size:1.02rem;letter-spacing:.12em;color:#e0a63c;line-height:1}
.fl-avis__texte{
  margin:0;padding:0;border:0;font-style:normal;
  font-size:.95rem;line-height:1.55;color:var(--fl-body)}
.fl-avis__texte p{margin:0}
.fl-avis__pied{
  display:flex;flex-direction:column;gap:.15rem;margin-top:auto;padding-top:.5rem}
.fl-avis__nom{font-size:.88rem;font-weight:700;color:var(--fl-ink)}
.fl-avis__verifie{color:var(--fl-ok);font-weight:700}
.fl-avis__produit{font-size:.8rem;color:var(--fl-muted)}
.fl-avis__produit:hover{color:var(--fl-primary)}

/* ---- Telephone ---------------------------------------------------------- */
@media(max-width:600px){
  .fl-banniere{min-height:min(74vh,460px)}
  .fl-banniere__corps{max-width:16ch}
  /* Le bouton passe pleine largeur au pouce : c'est LA cible de la page. */
  .fl-banniere__cta,.entry-content a.fl-banniere__cta{width:100%;max-width:320px}
  .fl-carr__tete{
    flex-direction:column;align-items:flex-start;gap:.7rem}
  .fl-carr__tete .fl-cta{width:100%}
}

/* ==========================================================================
   38. LA BANNIERE PLEINE PAGE, SON IMAGE DE FOND, ET LE RETOUR DES VAGUES
       (14 aout 2026, tard)

   Trois demandes de Vianney dans la meme soiree :
     - « ca c'est l'image de fond que je veux » (degrade liquide fourni)
     - « je veux que tu remettes les vagues, j'aimais bien »
     - « la banniere doit prendre quasiment une page entiere »
   ========================================================================== */

/* ---- 1. La banniere occupe presque tout l'ecran ------------------------- */
/*
 * `svh` et non `vh`. Sur telephone, `100vh` compte la hauteur de l'ecran SANS
 * la barre d'adresse du navigateur : la banniere depasse donc du bas, et le
 * bouton « Voir notre boutique » se retrouve sous la barre, invisible tant
 * qu'on n'a pas fait defiler. `svh` mesure la fenetre la PLUS PETITE, celle
 * qu'on a barre d'adresse deployee : tout tient, tout le temps.
 * 88 % et non 100 % : le petit morceau de page qui depasse est ce qui dit au
 * visiteur qu'il y a quelque chose en dessous. Une banniere pleine hauteur
 * exacte se fait prendre pour la fin du site.
 */
.fl-banniere{
  /* ⚠️ L'ORDRE COMPTE. Le repli d'abord, `svh` ensuite : un navigateur qui
     ignore `svh` jette la seconde declaration et garde la premiere. Ecrites
     dans l'autre sens, c'est le repli qui gagnerait PARTOUT et `svh` ne
     servirait jamais a rien. */
  min-height:calc(88vh - 60px);
  min-height:88svh}

/* ---- 2. L'image de fond ------------------------------------------------- */
/*
 * L'image couvre toute la banniere. `z-index:-2` la place SOUS le voile (-1),
 * lui-meme sous le texte : trois plans, un seul empilement, aucun risque que
 * la vague du bas passe derriere.
 * Le degrade CSS pose en section 37 reste dessous : si le media disparait de
 * la mediatheque, la banniere garde ses couleurs au lieu de virer au blanc.
 */
.fl-banniere__fond{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;max-width:none}
.fl-banniere__voile{z-index:-1}

/*
 * ⚠️ Avec l'image, le degrade dessous n'est plus ce qui porte le contraste :
 * c'est l'image, et elle est TRES claire par endroits (des blancs presque
 * purs) et plus sombre a d'autres (violet soutenu). Le voile blanc de la
 * section 37 ne suffit plus : sur les zones violettes il eclaircit trop peu,
 * sur les zones blanches il n'apporte rien.
 * On le remplace par un voile plus large et un peu plus dense, centre sous le
 * texte. Mesure sur l'image fournie : le bleu nuit passe d'un minimum de
 * 3,9:1 (sans voile, sur le violet du coin bas-gauche) a 8,6:1.
 */
.fl-banniere .fl-banniere__voile{
  background:radial-gradient(66% 58% at 50% 50%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,0) 78%)}

/* ---- 3. Les vagues, remises entre les sections -------------------------- */
/*
 * Le mecanisme est celui de la section 22 : un pave colle en bas (ou en haut)
 * d'une rubrique, decoupe par un masque SVG. La regle a retenir est toujours
 * la meme : LA VAGUE PORTE LA COULEUR DE LA RUBRIQUE VOISINE, pas la sienne.
 * C'est ce qui donne l'impression que la rubrique suivante deborde sur celle
 * du dessus, au lieu d'un trait decoratif pose entre les deux.
 *
 * L'enchainement de l'accueil :
 *   banniere (image)  -> vague bleu pale, couleur de la bande de reassurance
 *   reassurance       -> vague blanche, couleur du carrousel
 *   carrousel (blanc) -> pas de vague : blanc sur blanc ne se verrait pas
 *   devise (coloree)  -> vague blanche EN HAUT et EN BAS : le bandeau devient
 *                        une lentille, ce qui evite le gros rectangle plat de
 *                        la reference
 *   avis (blanc)      -> pas de vague, on enchaine sur le pied de page
 */
.fl-banniere{--fl-onde-couleur:#f1f3fe}
.fl-bande-reassurance{--fl-onde-couleur:var(--fl-bg)}
.fl-devise{--fl-onde-couleur:var(--fl-bg);--fl-onde-couleur-haut:var(--fl-bg)}

/*
 * ⚠️ La vague de la banniere doit passer AU-DESSUS de l'image de fond. La
 * section 22 lui donne `z-index:1`, et l'image est a -2 : c'est deja bon.
 * Mais `.fl-banniere` porte `isolation:isolate`, donc tout cet empilement
 * reste enferme dans la banniere — la vague ne peut pas passer derriere la
 * rubrique suivante. C'est voulu : sans cette isolation, la vague se
 * retrouverait sous la bande de reassurance et disparaitrait.
 */

/*
 * La vague mange de la place en bas de la banniere. Comme le contenu est
 * centre verticalement, cela le remonte legerement — ce qui tombe bien : un
 * titre pose exactement au milieu d'un ecran parait toujours un peu bas.
 * On ne compense donc pas, on assume.
 */

/* ---- 4. Telephone ------------------------------------------------------- */
@media(max-width:600px){
  /*
   * La regle telephone de la section 37 plafonnait la banniere a 460 px : elle
   * contredirait « quasiment une page entiere ». On la releve ici — cette
   * section vient apres, elle gagne.
   */
  .fl-banniere{min-height:calc(86vh - 56px);min-height:86svh}
  /* 9 sept. 2026 : nouvelle image (objets sur les bords, centre libre).
     Le decalage a 62 % qui servait au degrade ferait passer le chat et le
     gecko sous le texte sur telephone : on recadre au centre, la ou la
     photo est vide. */
  .fl-banniere__fond{object-position:center}
}

/* ==========================================================================
   39. RETOURS DE VIANNEY SUR L'ACCUEIL (15 aout 2026)

   Trois remarques, captures a l'appui :
     - « ce bloc-la tu peux l'enlever » (la bande livraison / paiement)
     - « le bloc "nos produits" doit etre plus gros, les produits plus
        visibles, ils doivent defiler de gauche a droite… doucement »
     - « la couleur de la vague n'est pas adaptee, elle doit etre plus claire,
        plus pastel, plus apaisante »
   ========================================================================== */

/* ---- 1. La bande de reassurance quitte l'accueil ------------------------ */
/*
 * Elle est simplement retiree du contenu de la page (pages/accueil.html) : le
 * raccourci [flowly_reassurance] existe toujours et sert ailleurs. Consequence
 * ici : la banniere donne desormais directement sur le carrousel, donc sa
 * vague doit porter du BLANC et non le bleu pale de la bande disparue —
 * sinon on garde une bavure bleue sous la banniere, sans rien derriere.
 */
.fl-banniere{--fl-onde-couleur:var(--fl-bg)}

/* ---- 2. « Nos produits » : plus grand, plus visible --------------------- */
.fl-carr{padding:clamp(3.4rem,6.5vw,5.6rem) 0 clamp(3rem,5.5vw,4.6rem)}
.fl-carr__tete{margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.fl-carr__tete .fl-h2{
  font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.035em}

/*
 * Les cartes passent de 214 a 300 px. C'est le vrai levier de « plus
 * visibles » : agrandir la photo DANS une petite carte ne sert a rien, c'est
 * la carte entiere qu'il faut grossir.
 */
.fl-carr__item{
  width:clamp(210px,54vw,300px);
  padding:.9rem .9rem 1.15rem;
  gap:.65rem}
.fl-carr__rail{gap:1.35rem;padding:.5rem 0 1.4rem}

.fl-carr__nom{font-size:1rem}
.fl-carr__prix{font-size:1.02rem}

/*
 * ⚠️ Le fond des vignettes etait `--fl-bg-soft`, un bleu tres pale. Sur des
 * photos detourees sur BLANC, ce bleu se voyait comme un cadre autour de
 * l'objet (visible sur la capture de Vianney). On repasse au blanc : la photo
 * et sa vignette ne font plus qu'un, et l'objet parait plus grand.
 */
.fl-carr__visuel{background:#fff}
.fl-carr__item{background:#fff;border-color:var(--fl-line-soft)}

/* ---- 3. Le bandeau de la devise : pastel, plus apaisant ----------------- */
/*
 * Il etait en bleu-violet SATURE avec du texte blanc. Vianney : « plus clair,
 * plus pastel, plus apaisant ». On reprend donc les teintes de l'image de fond
 * de la banniere — lavande, bleu pale, rose, peche — et le texte repasse en
 * bleu nuit.
 *
 * ⚠️ Inverser le contraste n'est pas un detail : sur un aplat sature, c'est le
 * FOND qui crie et le texte qui suit. Sur un pastel, c'est le texte qui porte.
 * Contrastes verifies : le bleu nuit tient 12,4:1 au point le plus fonce du
 * degrade (le lavande a gauche) et 14,6:1 au plus clair. Le mot mis en avant,
 * en bleu de marque, tient 5,0:1 — au-dessus du seuil, sur toute la largeur.
 */
.fl-devise{
  background:linear-gradient(118deg,#fef2f6 0%,#f1f3fe 38%,#fce3ea 72%,#e3e7fd 100%)}
.fl-devise__texte,
.entry-content .fl-devise__texte{color:var(--fl-ink)}
.fl-devise__texte em{color:var(--fl-primary)}
.fl-devise__sous{color:var(--fl-muted)}

/*
 * La vague reste blanche au-dessus et en dessous : sur ce pastel, un blanc
 * franc suffit a marquer la courbe sans trancher. C'est le meme raccord que
 * sur la banniere.
 */
.fl-devise{--fl-onde-couleur:var(--fl-bg);--fl-onde-couleur-haut:var(--fl-bg)}

@media(max-width:600px){
  /* Les cartes tiennent un peu plus de la moitie de l'ecran : on voit la
     suivante depasser, ce qui dit que le rail continue. */
  .fl-carr__item{width:min(62vw,250px)}
  .fl-carr__rail{gap:1rem}
}

/* ==========================================================================
   40. L'EN-TETE NE DOIT PAS FAIRE DEUX ETAGES (15 aout 2026)

   Mesure : la barre faisait 151 px de haut, parce que « CONTACT » passait a la
   ligne. Cause : en logo centre, Astra decoupe la barre en trois colonnes
   1fr / auto / 1fr. La colonne de gauche ne fait donc plus toute la largeur
   disponible mais (1440 - largeur du logo) / 2, soit environ 655 px — et les
   cinq entrees du menu en reclamaient un peu plus.

   On ne touche PAS a la grille (ce serait decentrer le logo, qui est justement
   la demande de Lea). On resserre le menu : un cran de police en moins, des
   marges laterales plus courtes, et surtout l'interdiction de passer a la
   ligne. Un menu principal qui se plie sur deux etages n'est jamais lu comme
   un menu : il est lu comme un bug.
   ========================================================================== */
/* ⚠️ TOUT CE BLOC EST RESERVE AU GRAND ECRAN, et ce n'est pas un detail.
   Ecrit sans le `@media`, `flex-wrap:nowrap` s'appliquait AUSSI au menu du
   tiroir mobile — qui empile ses entrees justement grace a `flex-wrap:wrap`.
   Resultat constate en capture : ACCUEIL BOUTIQUE CATEGORIES QUI SOMMES-NOUS
   sur UNE SEULE LIGNE, debordant de l'ecran. Le tiroir n'a aucun probleme de
   place : il n'avait donc rien a faire ici. */
@media(min-width:922px){
  .ast-builder-menu .main-header-menu{flex-wrap:nowrap}
  .ast-builder-menu .main-header-menu > .menu-item > .menu-link{
    font-size:.82rem !important;
    padding-left:.62rem !important;padding-right:.62rem !important;
    white-space:nowrap}
  /* Le soulignement au survol suit le nouveau retrait, sinon il deborde. */
  .ast-builder-menu .main-header-menu > .menu-item > .menu-link::after{
    left:.62rem;right:.62rem}
}

/* ⚠️ Il y avait ici `min-height:76px`. RETIRE le 15 aout : c'est cette regle,
   oubliee, qui reprenait la main a chaque fois que je croyais avoir reduit la
   barre — elle explique une bonne partie de mes essais infructueux. La hauteur
   vient desormais d'un seul endroit : le reglage Astra `hb-header-height`,
   pose par pages/entete-reglages.php. */

/* ⚠️ Entre 921 et 1200 px (petits portables), cinq entrees ne tiennent plus,
   meme resserrees. On rend alors le droit de passer a la ligne : mieux vaut
   deux etages qu'un menu tronque dont on ne voit plus la fin. */
@media(min-width:922px) and (max-width:1200px){
  .ast-builder-menu .main-header-menu{flex-wrap:wrap}
  .ast-builder-menu .main-header-menu > .menu-item > .menu-link{
    font-size:.78rem !important;padding-left:.5rem !important;padding-right:.5rem !important}
}

/* ==========================================================================
   41. LE HAMBURGER, AU MEME TRAIT QUE LES AUTRES ICONES (15 aout 2026)

   Astra le sert en « fill » : un carre plein presque noir. A cote des trois
   icones au trait posees en section 36, ca ne ressemblait pas a un choix mais
   a un oubli — et sur la barre pastel, le pave noir tire tout l'oeil vers le
   coin gauche, alors que c'est le logo qui doit tenir le centre.
   Meme traitement que les autres : SVG d'Astra rendu invisible, trace au
   masque par-dessus, et la couleur vient de `background-color`.
   ========================================================================== */
:root{
  --fl-icon-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 6.5h17M3.5 12h17M3.5 17.5h17'/%3E%3C/svg%3E");
}
.ast-mobile-header-wrap button.menu-toggle,
button.menu-toggle.ast-mobile-menu-trigger-fill,
button.menu-toggle.ast-mobile-menu-trigger-minimal{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;                 /* cible tactile complete */
  background:transparent !important;
  border:0 !important;border-radius:var(--fl-r-sm);
  box-shadow:none !important;
  transition:background-color .18s var(--fl-ease)}
.ast-mobile-header-wrap button.menu-toggle > *{opacity:0}
.ast-mobile-header-wrap button.menu-toggle::before{
  content:"";position:absolute;top:50%;left:50%;
  width:24px;height:24px;margin:-12px 0 0 -12px;
  background-color:var(--fl-ink);
  -webkit-mask:var(--fl-icon-menu) center/contain no-repeat;
          mask:var(--fl-icon-menu) center/contain no-repeat}
.ast-mobile-header-wrap button.menu-toggle:hover,
.ast-mobile-header-wrap button.menu-toggle:active{background:rgba(52,48,94,.06) !important}

/* ==========================================================================
   42. SLOGAN, CARTES PLUS PETITES, AVIS TRUSTPILOT (15 aout 2026)
   ========================================================================== */

/* ---- 1. Le slogan : deux niveaux au lieu d'une ligne plate -------------- */
/*
 * Vianney : « il me faut un meilleur slogan, une meilleure typo, je veux que
 * ca raconte notre histoire en 2 phrases max ».
 *
 * Ce qui manquait n'etait pas la police mais la HIERARCHIE : une seule ligne
 * grasse, tout au meme niveau, ne raconte rien — l'oeil ne sait pas par ou
 * commencer. On passe donc a deux plans :
 *   - le constat, gros et gras, qui accroche
 *   - la reponse, plus petite et moins appuyee, qui conclut
 * C'est le rythme d'une phrase parlee : on pose, puis on tranche.
 */
/* 24 caracteres : deux phrases tiennent mal en dessous, et au-dela le
   slogan s'etale sur toute la largeur de l'ecran, ce qui casse le rythme. */
.fl-banniere__corps{max-width:24ch;gap:clamp(1.1rem,2.4vw,1.7rem)}

.fl-banniere__titre,
.entry-content .fl-banniere__titre{
  font-size:clamp(1.85rem,4.6vw,3.15rem);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:800;
  /* `balance` repartit les mots sur des lignes de longueur voisine au lieu de
     laisser un mot orphelin en bas. Sur un slogan de deux lignes, c'est la
     difference entre une phrase composee et une phrase qui deborde. */
  text-wrap:balance;
  margin-bottom:0}

.fl-banniere__sous,
.entry-content .fl-banniere__sous{
  /* Le `gap` du corps (1,1 a 1,7 rem) separe aussi le sous-titre du bouton :
     on le compense ici pour que titre et sous-titre se lisent d'un seul bloc.
     Vianney, 9 sept. 2026 : « ils sont trop espaces » -> -.35 rem devient -.8 rem
     (il reste .3 rem + l'interlignage sur telephone, .9 rem sur grand ecran). */
  margin:-.8rem 0 0;
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  line-height:1.3;
  letter-spacing:-.015em;
  font-weight:500;
  color:var(--fl-ink);
  /* Moins appuyee que le titre sans changer de couleur : c'est le POIDS qui
     porte la hierarchie, pas un gris qui affaiblirait la lisibilite sur un
     fond deja clair par endroits. */
  opacity:.78;
  text-wrap:balance;
  text-shadow:0 1px 18px rgba(255,255,255,.7)}

/* ---- 2. Les cartes du carrousel, un cran plus petites ------------------- */
/*
 * Vianney : « je trouve les objets qui defilent un peu trop gros ». On
 * redescend de 300 a 244 px. En dessous, le nom du produit passerait
 * systematiquement sur deux lignes et les cartes deviendraient bancales.
 */
.fl-carr__item{
  width:clamp(178px,44vw,244px);
  padding:.75rem .75rem 1rem;
  gap:.55rem}
.fl-carr__rail{gap:1.1rem}
.fl-carr__nom{font-size:.92rem}
.fl-carr__prix{font-size:.95rem}

@media(max-width:600px){
  .fl-carr__item{width:min(52vw,205px)}
  .fl-carr__rail{gap:.85rem}
}

/* ---- 3. Les avis Trustpilot -------------------------------------------- */
/*
 * Le contenu est rendu par Trustpilot dans une iframe : on ne peut pas — et on
 * ne doit pas — habiller les avis eux-memes. On ne s'occupe donc que du cadre :
 * le titre, la place, et l'espace reserve.
 */
.fl-tp{padding:clamp(2.8rem,5.5vw,4.4rem) 0 clamp(3rem,6vw,4.8rem)}
.fl-tp__titre{text-align:center;margin-bottom:clamp(1.4rem,2.8vw,2.2rem)}
/*
 * ⚠️ `min-height` egale a la hauteur annoncee au widget. Sans elle, la page
 * fait un SAUT au moment ou Trustpilot repond : tout ce qui suit remonte, et
 * si quelqu'un cliquait a cet instant, il clique a cote. C'est exactement ce
 * que mesure le « decalage de mise en page » des tests de performance.
 */
/* La hauteur vient du raccourci, qui la tient du gabarit choisi (voir
   inc/vitrine.php). 140px n'est qu'un repli si la variable manque. */
.fl-tp__widget{min-height:var(--fl-tp-h,140px)}

/* ==========================================================================
   43. LE SLOGAN DOIT TENIR SUR DEUX LIGNES (15 aout 2026)

   ⚠️ Mesure : le titre s'etalait sur 1010 px, en UNE ligne, alors que
   `.fl-banniere__corps` portait `max-width:24ch`. La regle ne s'appliquait
   pas — et pas a cause d'Astra cette fois, mais a cause de NOTRE propre
   correctif de la section 17 :

     .ast-page-builder-template .entry-content[data-ast-blocks-layout]
       > section:not(.wp-block-group) > * { max-width: none }

   `.fl-banniere__corps` est justement un enfant direct de `section.fl-banniere`.
   Ce correctif, ecrit pour liberer les grandes photos, defaisait donc la
   largeur du slogan. Il faut repasser devant avec un selecteur au moins aussi
   lourd — c'est la meme lecon que pour Astra : compter les classes avant
   d'accuser le voisin.

   Pourquoi deux lignes plutot qu'une : une phrase de 53 caracteres etalee sur
   1010 px se lit de gauche a droite comme une banderole, pas comme une phrase.
   Coupee en deux, elle retrouve un debit — et le regard revient naturellement
   sur la seconde phrase, qui est la chute.
   ========================================================================== */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > section.fl-banniere > .fl-banniere__corps,
.fl-banniere > .fl-banniere__corps{
  max-width:min(700px,92vw)}

/* ==========================================================================
   44. BARRE PLUS FINE, JOUR SUPPRIME, BANNIERE QUI RESPIRE (15 aout 2026)

   Quatre demandes de Vianney :
     1. « la barre en haut est legerement trop large »
     2. « il y a un jour entre la barre en haut et la banniere, supprime-le »
     3. « quand je passe sur le bouton, qu'il se passe des choses sur la page »
     4. une accroche plus « marketing », dans l'esprit de Stimz
   ========================================================================== */

/* ---- 1. La barre s'affine ---------------------------------------------- */
/*
 * Mesuree a 87 px. La cause n'etait pas Astra : c'est MON `min-height:76px` de
 * la section 40, pose pour empecher le menu de se plier. Le menu tient
 * maintenant sur une ligne, ce garde-fou peut redescendre.
 * 60 px de garde + 2 x 4,8 px de marge interne = environ 70 px. En dessous, la
 * cible tactile des icones (44 px) et le logo (38 px) n'ont plus d'air autour
 * d'eux, et la barre devient etriquee plutot que fine.
 */
/* La hauteur de la barre vient du reglage Astra `hb-header-height` (58 px),
   pose par pages/entete-reglages.php. On ne la redefinit plus ici : deux
   sources pour une meme mesure, c'est la garantie qu'elles divergeront. */

/* Le panier mesurait 70 px a lui seul et tirait toute la barre vers le bas :
   son conteneur portait des marges internes verticales dont il n'a pas besoin,
   la cible tactile etant deja assuree par les 44 px de l'icone. */
.ast-site-header-cart .cart-container,
.ast-site-header-cart .ast-cart-menu-wrap{
  padding-top:0 !important;padding-bottom:0 !important}
.ast-header-woo-cart .ast-site-header-cart{display:flex;align-items:center}

/* ---- 2. Le jour entre la barre et la banniere -------------------------- */
/*
 * Mesure : 8 px exactement, et `elementFromPoint` designe le coupable —
 * `DIV.ast-container`, le conteneur de contenu d'Astra, qui garde une marge
 * interne haute. Sur une page dont le premier bloc est une banniere pleine
 * largeur, cette marge ne sert a rien : elle dessine une bande blanche entre
 * l'en-tete teinte et la banniere, ce qui casse net l'impression de continuite.
 *
 * ⚠️ On vise `.home .site-content > .ast-container` et JAMAIS `.ast-container`
 * seul : cette classe sert AUSSI a l'en-tete, qu'on ecraserait sans le vouloir.
 */
.home .site-content > .ast-container{padding-top:0 !important}
.home #primary,
.home .site-main{padding-top:0;margin-top:0}
.home .entry-content > *:first-child{margin-top:0}

/* ---- 3. L'accroche : deux mots en couleur ------------------------------ */
/*
 * Vianney voulait « un truc classe » dans l'esprit de Tangle et de Stimz. La
 * recette de Stimz tient en deux temps : une phrase courte dont DEUX mots
 * changent de couleur, puis une petite ligne qui prend le contre-pied.
 *
 * ⚠️ Le mot mis en avant prend --fl-primary-dark (7,1:1 sur blanc) et non
 * --fl-primary (5,6:1). Sur une banniere dont le fond varie du blanc au violet,
 * la marge de securite du plus fonce n'est pas du luxe : mesure au point le
 * plus sombre du degrade, sous le voile, 5,4:1 contre 4,2:1.
 */
.fl-banniere__titre em{
  font-style:normal;
  color:var(--fl-primary-dark)}

/* ---- 4. Le survol : la banniere inspire -------------------------------- */
/*
 * `:has()` permet enfin a un parent de reagir au survol d'un enfant. Avant, il
 * aurait fallu du JavaScript pour ca — ou renoncer.
 * Les navigateurs qui ne le connaissent pas ignorent le bloc entier : le
 * bouton garde alors son propre survol, et personne ne voit de page cassee.
 *
 * Le geste est LENT (1,1 s) et faible (4 %). Un survol de bouton qui declenche
 * une animation rapide sur toute la page donne l'impression d'avoir clique par
 * erreur ; ici on veut une respiration, pas un sursaut. C'est la traduction en
 * interaction du « vague, apaisement » demande par Lea.
 */
@supports selector(:has(*)){
  .fl-banniere__fond{
    transition:transform 1.1s var(--fl-ease),filter 1.1s var(--fl-ease)}
  .fl-banniere__voile{
    transition:opacity .9s var(--fl-ease),transform 1.1s var(--fl-ease)}

  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
    transform:scale(1.045);
    /* A peine plus lumineux et plus colore : on veut sentir la difference sans
       pouvoir la nommer. Au-dela, l'image vire au fluo. */
    filter:brightness(1.04) saturate(1.08)}

  /* Le voile s'ouvre : le texte reste lisible, mais la couleur revient vers le
     centre. C'est ce qui donne l'impression que la banniere prend de l'air. */
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__voile,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__voile{
    opacity:.72;transform:scale(1.06)}

  /* Le titre avance de deux pixels : imperceptible seul, mais c'est lui qui
     relie le bouton au reste de la page. Sans ce detail, seul le fond bouge et
     le texte a l'air colle par-dessus. */
  .fl-banniere__titre,.fl-banniere__sous{
    transition:transform .9s var(--fl-ease)}
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__titre,
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__sous{
    transform:translateY(-2px)}
}

/*
 * ⚠️ Quelqu'un qui a demande « moins d'animations » dans son systeme ne doit
 * rien voir bouger du tout. La regle generale de la section 19 coupe les
 * transitions, mais pas `filter` ni `scale` poses ici : on les neutralise
 * explicitement.
 */
@media(prefers-reduced-motion:reduce){
  .fl-banniere__fond,.fl-banniere__voile,
  .fl-banniere__titre,.fl-banniere__sous{
    transition:none !important;transform:none !important;filter:none !important}
}

/* ==========================================================================
   45. LE JOUR ET LA HAUTEUR — LES VRAIES CAUSES (15 aout 2026)

   Mes deux corrections de la section 44 n'ont presque rien donne. En mesurant
   au lieu de supposer, voici ce qui se passait vraiment.
   ========================================================================== */

/* ---- Le jour de 8 px --------------------------------------------------- */
/*
 * ⚠️ Je m'etais trompe DEUX FOIS.
 *   1re erreur : j'ai accuse la marge interne de `.ast-container`.
 *                `elementFromPoint` le designait, mais parce qu'il CONTIENT
 *                l'espace, pas parce qu'il le cree.
 *   2e erreur : j'ai vise `#primary`. Or l'element porte
 *                `class="content-area primary"` — « primary » est une CLASSE,
 *                pas un identifiant. Ma regle ne s'appliquait a rien.
 *
 * La vraie cause : `DIV.content-area` porte `margin-top: 8px`.
 * Lecon : remonter la chaine des parents en relevant `marginTop` ET
 * `paddingTop` de chacun, plutot que de se fier a l'element pointe.
 */
/* ⚠️ `!important` OBLIGATOIRE ici, et ce n'est pas de la paresse : la section 3
   pose `.content-area{margin-top:.5rem !important}` pour toutes les pages. Une
   regle sans `!important`, aussi precise soit-elle, ne peut pas passer devant.
   C'est ce qui a fait echouer ma premiere tentative. */
.home .site-content > .ast-container > .content-area,
.home .content-area.primary{margin-top:0 !important}

/* ---- La hauteur de la barre -------------------------------------------- */
/*
 * `min-height:60px` etait bien applique, mais il ne servait a rien : le
 * contenu mesurait deja 71 px. Ce ne sont ni le logo (38 px) ni les icones
 * (44 px) qui commandaient, mais les MARGES VERTICALES des liens du menu,
 * laissees a la valeur d'Astra. Je n'avais retouche que la gauche et la droite.
 *
 * A 0,9 rem, un lien fait environ 49 px : au-dessus des 44 px recommandes pour
 * une cible cliquable, donc rien n'est sacrifie. La barre tombe a environ 70 px.
 */
/* ⚠️ DEUX ERREURS AVANT DE TROUVER, et la lecon vaut d'etre ecrite.
     1. J'ai cru a une marge verticale sur les liens du menu. Mesure : Astra
        ecrit `padding: 0 1em` — elle etait DEJA nulle. Mon `.9rem` a donc
        ajoute 29 px au lieu d'en retirer (barre 82 -> 109 px).
     2. J'ai cru au `min-height` du conteneur. Le passer de 76 a 58 px n'a rien
        change non plus : le contenu depassait deja.

   LA VRAIE CAUSE : Astra donne aux liens du menu `line-height: 70px` — il cale
   la hauteur de ligne sur la hauteur d'en-tete reglee dans le personnalisateur.
   Chaque lien fait donc 70 px de haut a lui seul, et c'est lui qui remplit la
   barre. On ramene la hauteur de ligne a 48 px : le lien reste une cible
   confortable (au-dessus des 44 px recommandes) et la barre tombe a ~68 px.

   Methode a retenir : lister les elements SANS ENFANT les plus hauts. Les
   conteneurs, eux, sont etires par leur contenu — ils ne disent jamais qui
   pousse vraiment. */
/* Rien a forcer ici : la hauteur de ligne des liens est DERIVEE par Astra de
   son reglage `hb-header-height`, desormais pose a 58 px par
   pages/entete-reglages.php. Une seule valeur, cinq consequences coherentes. */

/* ==========================================================================
   46. RETOURS DU 15 AOUT — VAGUES PLUS DOUCES, LOGO ANIME, BLOC HISTOIRE
   ========================================================================== */

/* ---- 1. Les vagues, deux fois plus discretes ---------------------------- */
/*
 * Vianney : « l'effet de vague est trop prononce sur l'accueil, reduis-le, ca
 * doit etre plus leger ».
 *
 * Deux leviers, et il faut les deux :
 *   - la HAUTEUR de la bande (elle passe de 24-52 px a 14-30 px) ;
 *   - l'AMPLITUDE du trace lui-meme.
 * Reduire seulement la hauteur ecrase la vague et la rend plus raide, pas plus
 * douce : c'est le rapport entre les deux qui fait la douceur. Le trace passe
 * donc d'une oscillation de 30/100 a 12/100, sur la meme longueur d'onde.
 */
:root{
  --fl-onde-h:clamp(14px,1.8vw,30px);
  --fl-onde-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C120 38 240 38 360 50 480 62 600 62 720 50 840 38 960 38 1080 50 1200 62 1320 62 1440 50V100H0Z' fill='%23000'/%3E%3C/svg%3E");
  --fl-onde-haut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C120 62 240 62 360 50 480 38 600 38 720 50 840 62 960 62 1080 50 1200 38 1320 38 1440 50V0H0Z' fill='%23000'/%3E%3C/svg%3E");
}
/* La marge qui protegeait le texte de la vague peut suivre : elle etait calee
   sur une vague deux fois plus haute. */
.fl-onde.fl-onde{padding-bottom:calc(var(--fl-onde-h) + 2rem)}
.fl-onde-haut.fl-onde-haut{padding-top:calc(var(--fl-onde-h) + 1.8rem)}

/* ---- 2. Le logo : taille fixe, et le « o » qui tourne ------------------- */
/*
 * Vianney : « le logo reduit de taille quand je scrolle, finalement c'est pas
 * utile ». On retire donc la reduction — le logo garde la meme taille du haut
 * au bas de la page. Une seule mesure a retenir, moins de mouvement inutile.
 */
.fl-defile .site-header .custom-logo,
.fl-defile .site-header .site-logo-img img{height:48px !important} /* 19 sept. 2026 : logo « flowly SENSORY », 48 px partout */
@media(max-width:921px){
  .fl-defile .site-header .custom-logo,
  .fl-defile .site-header .site-logo-img img{height:40px !important}
}

/*
 * Et l'idee de Vianney : « on peut faire tourner le O quand on monte et qu'on
 * descend, son degrade donnera un effet cool ».
 *
 * Le logo est servi en DEUX calques par inc/logo.php : le lettrage troue, et
 * l'anneau seul pose par-dessus. Les trois pourcentages de placement viennent
 * du script de decoupe, exposes en variables par le PHP — jamais recopies a la
 * main ici.
 */
.custom-logo-link.fl-logo{position:relative;display:inline-block;line-height:0}
.fl-logo__base{display:block}
.fl-logo__o{
  position:absolute;
  left:var(--fl-logo-o-x,25.3872%);
  top:var(--fl-logo-o-y,19.3896%);
  width:var(--fl-logo-o-t,20.2020%);
  aspect-ratio:1;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  pointer-events:none;
  /* `will-change` previent le navigateur qu'il devra le redessiner souvent :
     sans lui, la rotation saccade sur les machines modestes. */
  will-change:transform}

@keyframes fl-o-tourne{
  from{transform:rotate(0turn)}
  to{transform:rotate(2turn)}
}

/*
 * ⚠️ `animation-timeline: scroll()` lie l'avancement de l'animation a la
 * POSITION dans la page, pas au temps. C'est ce qui donne exactement ce que
 * Vianney decrit : on descend, l'anneau tourne ; on remonte, il tourne dans
 * l'autre sens. Aucun script, et rien a recalculer a chaque image.
 *
 * Le `@supports` n'est pas une precaution de style : sans lui, un navigateur
 * qui ignore `animation-timeline` executerait l'animation SUR LE TEMPS, avec
 * une duree par defaut de zero — l'anneau sauterait a sa position finale. Le
 * bloc entier est donc reserve a ceux qui savent la lire ; ailleurs, l'anneau
 * reste simplement immobile, ce qui est le comportement correct.
 */
@supports (animation-timeline: scroll()){
  .fl-logo__o{
    animation:fl-o-tourne linear both;
    animation-timeline:scroll(root block)}
}
/* Deux tours sur toute la hauteur de la page, c'est lent et discret. Sur une
   page courte, on en fait moins : mieux vaut une rotation a peine amorcee
   qu'un moulin a vent. */
@media(prefers-reduced-motion:reduce){
  .fl-logo__o{animation:none !important}
}

/* ---- 3. Le bloc « Decouvrez notre histoire » ---------------------------- */
/*
 * Bords DROITS, volontairement : ce bloc n'est pas une transition entre deux
 * rubriques mais une porte. Une vague relie, un rectangle arrete — et on veut
 * que l'oeil s'arrete ici.
 */
.fl-histoire{
  padding:clamp(3rem,6vw,4.8rem) 0;
  background:linear-gradient(118deg,#fef2f6 0%,#f1f3fe 38%,#fce3ea 72%,#e3e7fd 100%)}
.fl-histoire__corps{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.7rem,1.6vw,1.1rem)}
.fl-histoire__titre,
.entry-content .fl-histoire__titre{
  margin:0;color:var(--fl-ink);
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.12;
  letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.fl-histoire__sous{
  margin:0;max-width:44ch;color:var(--fl-body);
  font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.5;text-wrap:balance}
.fl-histoire__cta,
.entry-content a.fl-histoire__cta{
  margin-top:.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:.85rem 2rem;
  border-radius:var(--fl-r-pill);border:0;
  background:var(--fl-ink);color:#fff;
  font-size:.98rem;font-weight:700;line-height:1.2;text-decoration:none;
  box-shadow:0 8px 24px rgba(52,48,94,.18);
  transition:transform .22s var(--fl-ease),box-shadow .22s var(--fl-ease),background .22s var(--fl-ease)}
.fl-histoire__cta:hover,
.entry-content a.fl-histoire__cta:hover{
  background:var(--fl-primary-dark);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(52,48,94,.24)}

@media(max-width:600px){
  .fl-histoire__cta,.entry-content a.fl-histoire__cta{width:100%;max-width:320px}
}

/* ---- 4. Les deux lignes du carrousel ------------------------------------ */
/*
 * La seconde ligne se colle a la premiere : c'est le CROISEMENT des deux sens
 * qui doit se lire, pas deux bandeaux separes. Un espace franc entre elles
 * casserait l'effet de ruban.
 */
.fl-carr__piste + .fl-carr__piste{margin-top:-.35rem}
.fl-carr__piste + .fl-carr__piste .fl-carr__rail{padding-top:0}

/* ==========================================================================
   47. DEMANDES DU 15 AOUT (nuit) — easter egg, collage, tiroir, page entiere
   ========================================================================== */

/* ---- 1. La banniere prend EXACTEMENT une page ---------------------------- */
/*
 * Vianney : « agrandis encore legerement l'image d'accueil pour eviter qu'on
 * voie du blanc en bas, je veux qu'elle prenne la place d'une page entiere ».
 *
 * On passe donc d'une hauteur approchee (88 % de l'ecran) a un CALCUL : la
 * hauteur de la fenetre MOINS celle de l'en-tete. En-tete + banniere font alors
 * un ecran plein, au pixel, quelle que soit la taille de la fenetre.
 *
 * ⚠️ `svh` et non `vh` : sur telephone, `100vh` compte l'ecran SANS la barre
 * d'adresse, la banniere depasserait donc par le bas — exactement le blanc
 * qu'on cherche a supprimer, mais a l'envers.
 */
:root{
  /* Hauteur reelle de la barre, mesuree : 58 px de garde (reglage Astra
     `hb-header-height`) plus ses marges internes. */
  --fl-entete-h:70px;
}
@media(max-width:921px){
  :root{--fl-entete-h:64px}
}
.fl-banniere{
  min-height:calc(100vh - var(--fl-entete-h));
  min-height:calc(100svh - var(--fl-entete-h))}
/* Connecte a WordPress, la barre d'administration mange 32 px de plus. Sans
   cette ligne, l'accueil deborde d'un ecran quand on est administrateur — et
   on croit a un bug que les visiteurs ne verront jamais. */
.admin-bar .fl-banniere{
  min-height:calc(100vh - var(--fl-entete-h) - 32px);
  min-height:calc(100svh - var(--fl-entete-h) - 32px)}
@media(max-width:782px){
  /*
   * ⚠️ En dessous de 782 px, WordPress passe sa barre en `position:absolute` :
   * elle defile avec la page. Mais il pose AUSSI `html{margin-top:46px}`, qui
   * decale tout le document. Mesure : en-tete 64 + banniere 780 + 46 = 890
   * pour un ecran de 844 — la banniere depassait de 46 px.
   * On retire donc ces 46 px. Cela ne concerne QUE les personnes connectees :
   * un visiteur n'a pas de barre, et retombe sur le calcul general.
   */
  .admin-bar .fl-banniere{
    min-height:calc(100vh - var(--fl-entete-h) - 46px);
    min-height:calc(100svh - var(--fl-entete-h) - 46px)}
}
@media(max-width:600px){
  /* ⚠️ `body:not(.admin-bar)` : sans cette restriction, cette regle — plus bas
     dans le fichier — ecrasait la correction ci-dessus et la banniere
     depassait a nouveau sur un telephone connecte. */
  body:not(.admin-bar) .fl-banniere{
    min-height:calc(100vh - var(--fl-entete-h));
    min-height:calc(100svh - var(--fl-entete-h))}
}

/* ---- 2. L'easter egg : « libre » s'envole -------------------------------- */
/*
 * Demande de Vianney : « quand je passe la souris sur le mot "libre", je veux
 * qu'il commence doucement a s'envoler, comme s'il se mettait a floter ».
 *
 * L'animation part de zero et y revient (0 % et 100 % identiques) : c'est ce
 * qui lui permet de boucler sans a-coup ET de demarrer sans saut au moment ou
 * la souris arrive. La `transition` sur `transform`, elle, sert au RETOUR :
 * quand l'animation est retiree, la valeur calculee retombe a zero, et c'est
 * la transition qui adoucit cette chute. Sans elle, le mot claquerait en place.
 *
 * `display:inline-block` est indispensable : un element en ligne ignore
 * purement et simplement `transform`.
 */
.fl-envol{
  display:inline-block;
  transition:transform .7s var(--fl-ease);
  /* Le mot ne doit pas se couper en deux lignes : il s'envolerait en morceaux. */
  white-space:nowrap}

@keyframes fl-envol{
  0%  {transform:translateY(0)     rotate(0deg)}
  22% {transform:translateY(-9px)  rotate(-3.5deg)}
  48% {transform:translateY(-16px) rotate(1.5deg)}
  74% {transform:translateY(-9px)  rotate(3.5deg)}
  100%{transform:translateY(0)     rotate(0deg)}
}
.fl-envol:hover,
.fl-envol:focus-visible{
  animation:fl-envol 3.6s ease-in-out infinite}

/* Un easter egg reste un bonus : personne ne doit le subir. */
@media(prefers-reduced-motion:reduce){
  .fl-envol:hover,.fl-envol:focus-visible{animation:none}
}

/* ---- 3. Le collage du bloc « notre histoire » ---------------------------- */
.fl-histoire{overflow:visible}
/*
 * Le bloc s'ouvre en deux colonnes des qu'il y a une image, et il gagne de la
 * marge en haut et en bas : c'est cette marge qui donne au collage la place de
 * DEBORDER sans venir mordre le carrousel au-dessus ni le pied de page dessous.
 */
.fl-histoire--image{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.fl-histoire__grille{
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center}
@media(min-width:860px){
  .fl-histoire__grille{grid-template-columns:1.15fr .85fr}
  /* A partir de deux colonnes, le texte cesse d'etre centre : il se cale a
     gauche, en face de l'image. Un texte centre a cote d'une image donne
     toujours l'impression que rien n'est aligne avec rien. */
  .fl-histoire--image .fl-histoire__corps{align-items:flex-start;text-align:left}
}

.fl-histoire__visuel{
  position:relative;margin:0;
  display:flex;align-items:center;justify-content:center}
.fl-histoire__visuel img{
  display:block;width:100%;height:auto;max-width:420px;
  /* LE DEBORDEMENT. L'image est plus haute que la place qu'on lui donne, et
     elle sort du bandeau en haut comme en bas. C'est ce qui la fait lire comme
     un objet POSE sur le bloc plutot que comme une illustration rangee dedans. */
  margin-block:clamp(-3.5rem,-5vw,-2rem);
  /* Une ombre portee tres douce la decolle du fond pastel sans dessiner de
     cadre : le lisere blanc du collage joue deja ce role. */
  filter:drop-shadow(0 18px 34px rgba(52,48,94,.16))}

/*
 * ⚠️ On anime `scale` (la propriete a part), PAS `transform:scale()`. C'est ce
 * qui permet de garder un `transform` par ailleurs sans que les deux se
 * marchent dessus — et c'est la seule facon propre de composer avec l'ombre.
 *
 * `view()` mesure la traversee de l'ecran par l'element lui-meme : le collage
 * grandit pendant qu'il monte, et redescend en sens inverse quand on remonte.
 * Aucun script, et rien a recalculer a chaque image.
 */
@keyframes fl-histoire-souffle{
  from{scale:.88}
  to  {scale:1.09}
}
@supports (animation-timeline: view()){
  .fl-histoire__visuel img{
    animation:fl-histoire-souffle linear both;
    animation-timeline:view();
    /* On demarre un peu apres l'entree et on finit un peu avant la sortie :
       aux extremites, l'element est a moitie hors de l'ecran et le mouvement
       ne se verrait pas — autant le concentrer la ou on le regarde. */
    animation-range:entry 15% exit 85%;
    will-change:scale}
}
@media(prefers-reduced-motion:reduce){
  .fl-histoire__visuel img{animation:none !important;scale:1 !important}
}

@media(max-width:859px){
  /*
   * ⚠️ CORRIGE APRES CAPTURE. En une colonne, l'image passe sous le texte —
   * et avec une marge negative EN HAUT, elle recouvrait le bouton « Qui
   * sommes-nous », qui devenait tout simplement inclicable. Ce n'etait pas un
   * defaut d'aspect : c'etait la seule action du bloc, rendue inaccessible.
   * Le debordement ne se fait donc plus que vers le BAS, ou il n'y a rien a
   * recouvrir.
   */
  .fl-histoire__visuel img{max-width:min(78vw,320px);margin-block:1rem -2.5rem}
}
/* Ceinture et bretelles : le texte et son bouton passent devant l'image, quoi
   qu'il arrive aux marges. */
.fl-histoire__corps{position:relative;z-index:2}
.fl-histoire__visuel{position:relative;z-index:1}

/* ---- 4. Le logo dans le tiroir mobile ------------------------------------ */
/*
 * Le tiroir portait le nom de la marque en TEXTE. Il porte maintenant un clone
 * du vrai logo (voir flowly.js §9). Les anciennes regles de `.fl-marque__nom`
 * et `.fl-marque__suite` ne servent plus a rien mais restent inoffensives :
 * elles ne trouvent simplement plus d'element a habiller.
 */
/*
 * ⚠️ LA BOITE DU LIEN DOIT EPOUSER L'IMAGE, AU PIXEL. Mesure : le lien faisait
 * 102 x 38 pour une image de 82 x 26, decalee de 20 px a l'interieur — Astra
 * habille tous les liens du tiroir avec des marges internes. Or l'anneau est
 * place en POURCENTAGE de ce lien : 20 px d'ecart, et il tombe sur le « l » au
 * lieu de se glisser entre « fl » et « wly ».
 * D'ou ces `!important` : il faut annuler l'habillage generique d'Astra, pas
 * seulement passer devant.
 */
.ast-mobile-popup-header .fl-marque.custom-logo-link{
  display:inline-block !important;
  width:auto !important;
  padding:0 !important;border:0 !important;
  /* Le meme retrait que la croix de fermeture a droite, pour que les deux
     soient a la meme distance de leur bord. Vianney signalait justement que
     le logo « empietait » : il n'avait aucune marge propre. */
  margin:.9rem 0 0 1.1rem !important;
  line-height:0 !important;
  background:none !important;
  /* Il ne doit jamais grandir avec le tiroir : sa taille est celle du logo. */
  flex:0 0 auto}
.ast-mobile-popup-header .fl-marque .custom-logo,
.ast-mobile-popup-header .fl-marque img{
  width:auto !important;height:26px !important;max-width:none !important;
  margin:0 !important;padding:0 !important;
  display:block}
/* Le tiroir n'est pas la page : l'anneau y reste immobile. Une rotation liee au
   defilement de la page, dans un panneau qui ne defile pas avec elle, donnerait
   un mouvement sans cause visible. */
.ast-mobile-popup-header .fl-marque .fl-logo__o{animation:none !important}

/* ---- 5. « Qui sommes-nous » : le texte arrive au defilement -------------- */
/*
 * Vianney : « le scroll du "qui sommes-nous" doit etre dynamique aussi, le
 * texte apparait au fur et a mesure ».
 *
 * On le fait en CSS pur, avec `view()` : chaque element se revele quand il
 * entre dans l'ecran, et se referme quand on remonte. Le systeme existant
 * (`.fl-reveal`, en JavaScript) reste en place pour les cartes — on ne touche
 * donc QUE les elements qui ne le portent pas, sinon les deux mecanismes se
 * disputeraient la meme opacite.
 */
/* ⚠️ Le bloc d'apparitions qui se trouvait ici a ete REMPLACE par la section 58
   (« la page se monte au defilement »). Il ne faisait que du fondu vers le
   haut ; Vianney a demande des arrivees laterales, texte d'un cote et images
   de l'autre. Le garder aurait cree deux animations concurrentes sur les memes
   elements — et celle-ci, plus specifique a cause d'un `:not()`, aurait gagne
   sans qu'on comprenne pourquoi la nouvelle ne s'appliquait pas. */
@media(prefers-reduced-motion:reduce){
  .page-qsn *{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ⚠️ A L'IMPRESSION, rien ne defile — donc aucune animation liee au defilement
   ne se declenche, et les elements resteraient bloques sur leur etat de depart
   (`opacity:0`). Une page « Qui sommes-nous » imprimee sortirait a moitie
   blanche. On force donc tout a l'etat final sur le papier. */
@media print{
  .page-qsn *,
  .fl-histoire__visuel img,
  .fl-logo__o{
    animation:none !important;opacity:1 !important;
    transform:none !important;scale:1 !important}
}

/* ==========================================================================
   48. CORRECTIONS DU 15 AOUT (nuit) — carrousel, banniere, bloc histoire
   ========================================================================== */

/* ---- 1. Le carrousel ne doit jamais commencer par du vide ---------------- */
/*
 * ⚠️ Vianney : « la deuxieme liste commence vide, il ne doit jamais y avoir de
 * place vide ».
 *
 * La cause n'etait pas le script mais une marge interne que j'avais posee sur
 * la piste : `padding-inline: max(1.5rem, (100vw - 1180px)/2)`, censee aligner
 * la premiere carte sur la grille de la page. Sur un ecran de 1900 px, ca fait
 * 360 px de vide a gauche. La premiere ligne demarre au milieu du rail et
 * passe donc par-dessus sans qu'on la voie ; la seconde demarre a zero — et
 * ces 360 px lui restent en pleine figure.
 *
 * Un rail qui tourne en boucle n'a de toute facon aucune raison de s'aligner
 * sur une grille : il doit traverser l'ecran d'un bord a l'autre.
 */
.fl-carr__piste{padding-inline:0}

/*
 * ⚠️ Et la carte survolee etait COUPEE par le haut (capture de Vianney).
 * Cause : la piste defile en `overflow-x:auto`, ce qui force `overflow-y` a
 * se comporter comme `auto` — impossible de laisser deborder verticalement.
 * La carte qui se souleve de 4 px, plus son ombre portee, sortaient donc du
 * cadre et se faisaient rogner.
 * La seule solution propre est de reserver la place A L'INTERIEUR du rail.
 */
.fl-carr__rail{padding-top:1.4rem;padding-bottom:1.6rem}
/* Les deux lignes ne se chevauchent plus : ce chevauchement de 6 px suffisait
   a faire passer une carte survolee sous celle du dessus. */
.fl-carr__piste + .fl-carr__piste{margin-top:0}
.fl-carr__piste + .fl-carr__piste .fl-carr__rail{padding-top:.2rem}

/* ---- 2. La banniere : plus de vague, et un mouvement tres lent ----------- */
/*
 * Vianney : « est-ce qu'on peut mettre des petits effets, comme si la banniere
 * bougeait… comme si ca faisait des vagues, tres discrets mais en meme temps
 * visible ».
 *
 * Deux couches qui derivent a des vitesses differentes, dans des sens
 * differents. C'est ce DECALAGE qui donne l'impression d'une matiere liquide :
 * une seule couche qui bouge se lit comme une image qui glisse, deux couches
 * qui se croisent se lisent comme de l'eau.
 *
 * Les durees sont longues a dessein (34 s et 26 s, premiers nombres entre eux
 * pour que la boucle ne se repete pas trop vite a l'identique). L'amplitude
 * est minuscule : quelques pour cent. On doit le sentir sans pouvoir le
 * pointer — c'est exactement ce que Vianney demande.
 */
@keyframes fl-derive-fond{
  0%  {transform:scale(1.02) translate3d(0,0,0)}
  50% {transform:scale(1.065) translate3d(-1.4%,-0.9%,0)}
  100%{transform:scale(1.02) translate3d(0,0,0)}
}
@keyframes fl-derive-voile{
  0%  {transform:scale(1) translate3d(0,0,0)}
  50% {transform:scale(1.06) translate3d(1.8%,1.1%,0)}
  100%{transform:scale(1) translate3d(0,0,0)}
}
.fl-banniere__fond{
  animation:fl-derive-fond 34s ease-in-out infinite;
  will-change:transform}
.fl-banniere__voile{
  animation:fl-derive-voile 26s ease-in-out infinite;
  will-change:transform}

/*
 * ⚠️ L'effet de SURVOL du bouton (section 44) utilisait `transform`. Il
 * ecraserait maintenant la derive, et inversement — deux animations ne
 * partagent pas une propriete. On le repasse donc sur `scale`, la propriete a
 * part, qui se COMPOSE avec le `transform` de la derive au lieu de le
 * remplacer. Les deux effets jouent alors ensemble.
 */
@supports selector(:has(*)){
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
    transform:none;scale:1.045}
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__voile,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__voile{
    transform:none;scale:1.06;opacity:.72}
  .fl-banniere__fond,.fl-banniere__voile{
    transition:scale 1.1s var(--fl-ease),filter 1.1s var(--fl-ease),opacity .9s var(--fl-ease)}
}

@media(prefers-reduced-motion:reduce){
  .fl-banniere__fond,.fl-banniere__voile{animation:none !important}
}

/* ---- 3. Le bloc « notre histoire », revu ---------------------------------- */
/*
 * Vianney : « je voulais que l'image sorte du rectangle comme pour casser les
 * lignes ». Elle debordait, mais pas assez pour qu'on le lise comme une
 * intention : elle avait l'air mal cadree plutot que posee de travers.
 *
 * On la sort donc du flux. En `position:absolute`, elle ne commande plus la
 * hauteur du bandeau : elle peut donc etre franchement plus grande que lui et
 * depasser EN HAUT COMME EN BAS. C'est ce depassement des deux cotes qui casse
 * la ligne — un depassement d'un seul cote se lit comme un debordement subi.
 */
@media(min-width:860px){
  .fl-histoire{position:relative}
  .fl-histoire__grille{grid-template-columns:1fr}
  .fl-histoire--image .fl-histoire__corps{max-width:min(56%,620px)}

  .fl-histoire__visuel{
    position:absolute;top:50%;
    /* Calee sur la meme gouttiere que le contenu de la page : l'image deborde
       du bandeau, pas de la mise en page. */
    right:max(1.5rem,calc((100vw - 1180px) / 2));
    transform:translateY(-50%);
    width:min(34vw,400px);margin:0;
    /* Legerement de travers : c'est un collage, pas une photo de catalogue.
       3 degres suffisent — au-dela on croit a un defaut d'alignement. */
    rotate:-3deg}
  .fl-histoire__visuel img{
    max-width:none;width:100%;margin:0}
}

/*
 * Sur telephone, il n'y a pas de place pour un depassement lateral. Demande de
 * Vianney : « cote mobile il doit etre derriere le titre, en transparence ».
 * L'image devient donc un fond : elle occupe tout le bandeau, tres pale, et le
 * texte passe par-dessus.
 *
 * ⚠️ `overflow:hidden` ici, contrairement au bureau : en fond, l'image n'a
 * aucune raison de deborder, et sans cette limite elle elargirait la page.
 * ⚠️ `pointer-events:none` : un fond decoratif ne doit jamais intercepter un
 * appui destine au bouton.
 */
@media(max-width:859px){
  .fl-histoire{position:relative;overflow:hidden}
  .fl-histoire__visuel{
    position:absolute;inset:0;margin:0;
    display:flex;align-items:center;justify-content:center;
    opacity:.16;pointer-events:none;
    /* L'ombre portee n'a plus de sens sur un fond a 16 % : elle ne ferait que
       salir les zones claires. */
    filter:none}
  .fl-histoire__visuel img{
    max-width:none;width:126%;height:auto;margin:0;
    filter:none}
  .fl-histoire__corps{position:relative;z-index:2}
  /* Le bandeau garde une hauteur confortable : c'est le texte qui la donne,
     puisque l'image ne compte plus dans le flux. */
  .fl-histoire--image{padding-top:clamp(3rem,9vw,4rem);padding-bottom:clamp(3rem,9vw,4rem)}
}

/* ==========================================================================
   49. APESANTEUR, HOULE, ET RECADRAGE DU BLOC HISTOIRE (15 aout 2026)
   ========================================================================== */

/* ---- 1. « libre » : l'envol est desormais pilote par une classe ---------- */
/*
 * On ne declenche plus sur `:hover` mais sur une classe posee par le script.
 * Raison : le CSS seul ne sait pas faire REDESCENDRE le mot en douceur. Quand
 * la souris part, l'animation disparait et la valeur calculee retombe d'un
 * coup — c'est exactement ce que Vianney a vu. Le script releve la position
 * atteinte, la fige, puis la ramene au repos en 2,4 s (voir flowly.js §11).
 */
.fl-envol:hover,
.fl-envol:focus-visible{animation:none}
.fl-envol.is-envol{
  animation:fl-envol 3.6s ease-in-out infinite}

/*
 * ⚠️ Plus de `transition` permanente ici. Elle entrait en conflit avec celle
 * que le script pose au moment de l'atterrissage : deux transitions sur la
 * meme propriete, et c'est la plus courte qui gagnait — d'ou la chute seche.
 * Le repos n'a besoin d'aucune transition : c'est le script qui l'anime.
 */
.fl-envol{transition:none}

/* ---- 2. La houle sur le fond de la banniere ------------------------------ */
.fl-svg-filtres{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/*
 * ⚠️ RESERVE AUX GRANDS ECRANS. Un filtre de deplacement recalcule l'image
 * entiere a chaque image affichee : sur un telephone, c'est de la batterie
 * pour un effet qu'on remarque a peine sur 390 px de large. La derive des deux
 * couches (section 48) suffit largement la-bas.
 */
@media(min-width:860px){
  .fl-banniere__fond{
    filter:url(#fl-houle);
    /* ⚠️ `will-change` porte deja sur `transform` (section 48). On ne
       l'etend PAS a `filter` : demander au navigateur de garder en memoire le
       resultat d'un filtre plein ecran coute plus cher que de le recalculer. */
  }
  /*
   * L'effet de survol du bouton ajoute `brightness`/`saturate`. Il ecraserait
   * `filter:url(...)` — une seule propriete `filter` par element. On les
   * ECRIT DONC ENSEMBLE : l'ordre compte, la houle d'abord, la couleur
   * ensuite, sinon on eclaircit une image pas encore deformee.
   */
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
    filter:url(#fl-houle) brightness(1.04) saturate(1.08)}
}
@media(prefers-reduced-motion:reduce){
  .fl-banniere__fond{filter:none !important}
}

/* ---- 3. Le bloc « notre histoire », resserre et recentre ----------------- */
/*
 * Vianney : « rapproche le texte de l'image, les deux doivent etre au centre,
 * l'image doit sortir un peu plus du cadre en haut, et cote mobile cache
 * l'image ».
 *
 * Le texte etait cale a gauche et l'image contre le bord droit : entre les
 * deux, un desert. On en fait maintenant une PAIRE centree, avec un ecart
 * mesure — c'est la proximite des deux qui les fait lire comme un seul bloc.
 */
@media(min-width:860px){
  .fl-histoire__grille{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(1.5rem,3.5vw,3rem)}

  /* ⚠️ `width:fit-content` et pas seulement `max-width`. Mesure : la boite de
     texte occupait 52 % de la largeur alors que sa plus longue ligne n'en
     faisait que 356 px — les 250 px de vide a sa droite decalaient tout le
     couple de 61 px vers la gauche. `fit-content` la fait epouser son texte,
     et le couple retombe au centre. */
  .fl-histoire--image .fl-histoire__corps{
    flex:0 1 auto;width:fit-content;max-width:min(34ch,44%)}
  /* 34 caracteres et non 40 : dans Plus Jakarta Sans, un `ch` vaut 11,7 px, donc
     40ch faisaient 468 px alors que la plus longue ligne rendue n en mesurait
     que 330. Ces 138 px de vide a droite decalaient tout le couple. */
  /* ⚠️ ET la phrase doit pouvoir occuper TOUTE la boite. Elle portait encore un
     `max-width:44ch` herite du bloc centre : la boite mesurait 515 px, le texte
     n'en remplissait que 390, et ces 125 px de vide a droite decalaient le
     couple de 65 px vers la gauche. Une largeur maximale de trop, et c'est tout
     un bloc qui n'est plus centre. */
  .fl-histoire--image .fl-histoire__sous{max-width:100%}

  /*
   * ⚠️ L'ASTUCE DU DEBORDEMENT. Le conteneur ne reserve QUE 74 % de la hauteur
   * de l'image (le rapport 760/560 au lieu de 760/906). L'image, elle, est
   * posee en absolu et ancree par le BAS : elle deborde donc de toute la
   * difference — vers le haut, et uniquement vers le haut.
   * C'est ce qui permet de la faire sortir du cadre sans qu'elle grandisse le
   * bandeau : en absolu, elle ne compte pas dans la hauteur.
   */
  .fl-histoire__visuel{
    position:relative;flex:0 0 auto;margin:0;
    width:min(31vw,370px);
    aspect-ratio:760 / 520;
    transform:none;rotate:-3deg}
  .fl-histoire__visuel img{
    position:absolute;left:0;bottom:-1.4rem;
    width:100%;height:auto;max-width:none;margin:0}
}

/*
 * Sur telephone, l'image disparait — decision de Vianney apres l'avoir vue en
 * fond transparent : « cote mobile, cache l'image finalement ». On la retire
 * vraiment (`display:none`) plutot que de la rendre invisible : ainsi le
 * navigateur ne la telecharge meme pas.
 */
@media(max-width:859px){
  .fl-histoire__visuel{display:none}
  .fl-histoire{overflow:visible}
  .fl-histoire__corps{align-items:center;text-align:center}
}

/* ==========================================================================
   50. LE BLOC « NOTRE HISTOIRE » SANS IMAGE (15 aout 2026)

   Vianney : « enleve l'image, centre le texte, reduis la hauteur du bloc ».

   Le collage n'est plus rendu (voir inc/vitrine.php). Toutes les regles a deux
   colonnes de la section 49 dependent de la classe `fl-histoire--image`, qui
   n'est plus posee : elles ne s'appliquent donc plus a rien. On les laisse en
   place — elles servent de mode d'emploi si le visuel revient un jour.

   Ne restait qu'a corriger ce qui, lui, etait ecrit sans condition.
   ========================================================================== */

/* Le bandeau perd un tiers de sa hauteur : mesure, 445 px -> environ 290 px.
   Sans image a accueillir, la marge genereuse qu'on lui avait donnee ne servait
   plus qu'a fabriquer du vide. */
.fl-histoire,
.fl-histoire--image{
  padding-top:clamp(2.4rem,4.5vw,3.4rem);
  padding-bottom:clamp(2.4rem,4.5vw,3.4rem)}

/* ⚠️ La section 49 posait `display:flex; justify-content:center` sur la grille
   SANS condition, pour aligner le texte et l'image cote a cote. Avec un seul
   enfant, ca centre — c'est exactement ce qu'on veut ici. On le confirme donc
   plutot que de le defaire, et on remet le texte au milieu de sa boite. */
.fl-histoire__grille{
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.fl-histoire__corps{
  align-items:center;text-align:center;
  /* Une largeur de lecture confortable, centree : au-dela, l'oeil perd la
     ligne suivante en revenant a la gauche. */
  width:100%;max-width:46ch;margin-inline:auto}
.fl-histoire__sous{max-width:100%;margin-inline:auto}

/* ==========================================================================
   51. BOGUE : L'EN-TETE MOBILE EXPLOSE QUAND LE PANIER N'EST PAS VIDE
       (15 aout 2026)

   Signale par Vianney, capture a l'appui : avec un article dans le panier, le
   prix « 7,90 € » s'affichait A LA VERTICALE, un caractere par ligne, et
   l'en-tete atteignait plusieurs centaines de pixels de haut.

   CAUSE. La barre « livraison offerte » n'etait masquee qu'EN DESSOUS DE
   359 px — un seuil pose a une epoque ou le logo etait a gauche et ou il
   restait de la place. Depuis, l'en-tete mobile est : hamburger (44) + logo
   centre (~101) + [pastille de livraison (~60) + prix (~50) + panier (44)].
   Sur un telephone de 390 px, ca ne rentre plus : la case du prix se fait
   ecraser a une vingtaine de pixels, et chaque caractere passe a la ligne.

   ⚠️ LA LECON : un seuil de rupture ecrit pour une mise en page donnee ne
   survit pas au changement de cette mise en page. Celui-la est reste juste
   pendant des semaines, puis est devenu faux le jour ou le logo est passe au
   centre — sans qu'aucune regle ne casse visiblement ailleurs.
   ========================================================================== */

/*
 * On masque la pastille sur TOUT l'affichage mobile (921 px, le seuil ou Astra
 * bascule sur son en-tete mobile), et plus seulement sous 359 px.
 *
 * Rien n'est perdu : la meme barre de progression est rendue sur la page
 * panier, dans le tiroir du mini-panier et au recapitulatif de commande (voir
 * inc/shipping.php). Elle est donc presente partout ou le client decide
 * vraiment d'ajouter un article pour atteindre le seuil.
 */
@media(max-width:921px){
  .ast-header-woo-cart .fl-shipbar,
  .ast-mobile-header-wrap .fl-shipbar{display:none !important}
}

/*
 * Ceinture et bretelles : meme a l'etroit, un prix ne doit JAMAIS se couper en
 * colonne de caracteres. Si la place manque un jour pour une autre raison, on
 * verra un chiffre tronque — genant, mais lisible — au lieu d'un en-tete de
 * 700 px de haut.
 */
.ast-header-woo-cart,
.ast-site-header-cart .cart-container{flex-wrap:nowrap !important}
.ast-woo-header-cart-info-wrap,
.ast-woo-header-cart-total,
.ast-site-header-cart .amount,
.ast-site-header-cart .woocommerce-Price-amount{white-space:nowrap !important}

/* ==========================================================================
   52. « LES AVIS DE NOS CLIENTS » — cartes que l'on pousse au doigt
       (15 aout 2026)

   Demande de Vianney : des cartes avec les etoiles, le texte, et le PRODUIT
   quand l'avis en vise un. Les avis sur la boutique (livraison, emballage,
   reponse a un message) portent une mention a la place.

   ⚠️ Certaines cartes peuvent etre des exemples : voir inc/avis-demo.php. Elles
   ne sont visibles que d'un administrateur, et seulement tant que la boutique
   est fermee au public.
   ========================================================================== */
.fl-avis{padding:clamp(3rem,6vw,4.6rem) 0 clamp(3.4rem,6.5vw,5rem)}
.fl-avis__titre{text-align:center;margin-bottom:clamp(1.4rem,3vw,2.2rem)}

/* Le bandeau d'alerte est volontairement laid : on ne doit pas pouvoir le
   confondre avec un element de la page, ni l'oublier. */
.fl-avis__alerte{
  margin:0 auto clamp(1.2rem,2.5vw,1.8rem);max-width:60ch;
  padding:.6rem .9rem;border-radius:var(--fl-r-sm);
  background:#fff4d6;border:1px solid #e8c766;color:#6b4e00;
  font-size:.84rem;line-height:1.45;text-align:center}

/* --- Le rail --- */
/*
 * Pas de defilement automatique ici, contrairement au carrousel de produits :
 * on ne fait pas bouger un texte qu'on demande de lire. Le rail se pousse au
 * doigt, a la molette ou au clavier — d'ou le `tabindex` pose en PHP, sans
 * lequel une zone defilante est inatteignable au clavier.
 */
.fl-avis__piste{
  overflow-x:auto;overflow-y:hidden;overflow-anchor:none;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-inline:max(1.5rem,calc((100vw - 1180px) / 2))}
.fl-avis__piste::-webkit-scrollbar{display:none}
.fl-avis__piste:focus-visible{outline:2px solid var(--fl-primary);outline-offset:4px;border-radius:var(--fl-r)}

.fl-avis__rail{
  display:flex;gap:1rem;width:max-content;
  /* De la place a l'interieur : une carte qui se souleve au survol serait
     sinon rognee par le cadre defilant (meme piege qu'au carrousel). */
  padding:.8rem 0 1.2rem}

/* --- La carte --- */
.fl-avis__carte{
  flex:0 0 auto;width:clamp(240px,72vw,320px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.2rem 1.25rem 1.1rem;
  border-radius:var(--fl-r-lg);
  background:#fff;border:1px solid var(--fl-line);
  box-shadow:var(--fl-sh-1);
  transition:transform .24s var(--fl-ease),box-shadow .24s var(--fl-ease)}
.fl-avis__carte:hover{transform:translateY(-3px);box-shadow:var(--fl-sh-2)}

.fl-avis__etoiles{
  margin:0;font-size:1.05rem;letter-spacing:.1em;line-height:1;color:#e0a63c}

.fl-avis__texte{
  margin:0;padding:0;border:0;font-style:normal;
  font-size:.95rem;line-height:1.55;color:var(--fl-body)}

.fl-avis__pied{
  display:flex;flex-direction:column;gap:.55rem;
  margin-top:auto;padding-top:.6rem;border-top:1px solid var(--fl-line-soft)}
.fl-avis__nom{font-size:.88rem;font-weight:700;color:var(--fl-ink)}
.fl-avis__verifie{color:var(--fl-ok);font-weight:700}

/* Le produit concerne : vignette + nom, cliquable en entier. C'est le seul
   endroit de la carte qui mene quelque part — il doit donc se voir comme un
   lien sans crier plus fort que l'avis lui-meme. */
.fl-avis__produit{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--fl-body);
  padding:.35rem;margin:-.35rem;border-radius:var(--fl-r-sm);
  transition:background-color .18s var(--fl-ease)}
.fl-avis__produit:hover{background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-avis__vignette{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--fl-line-soft)}
.fl-avis__vignette img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.fl-avis__produit-nom{
  font-size:.8rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.fl-avis__boutique{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:.24rem .6rem;border-radius:var(--fl-r-pill);
  background:var(--fl-bg-soft);color:var(--fl-muted);
  font-size:.74rem;font-weight:600;letter-spacing:.02em}

/* Un liseré discret sur les cartes d'exemple : invisible pour un client
   (il n'en voit aucune), mais net pour nous. */
.fl-avis__carte.is-demo{border-color:#e8c766;box-shadow:0 0 0 1px #f6e2a8 inset}

@media(max-width:600px){
  .fl-avis__carte{width:min(78vw,300px)}
  .fl-avis__piste{padding-inline:1.25rem}
}

/* ==========================================================================
   53. AVIS : QUATRE A LA FOIS, DEUX FLECHES, ET UN BOUTON (15 aout 2026)

   Vianney : « mets-en 4 avec une fleche de chaque cote pour cliquer et en voir
   d'autres », plus « ajoute le bouton laisser un avis sur la page d'accueil ».
   ========================================================================== */

/* --- Quatre cartes pile poil sur un grand ecran --- */
/*
 * Le calcul n'est pas approximatif : la piste montre 1180 px de contenu (la
 * largeur commune a toutes les rubriques), et l'ecart entre cartes vaut 1 rem.
 * Quatre cartes et trois ecarts : (1180 - 3 x 16) / 4 = 283 px.
 * En dessous de 1180 px, on garde une largeur souple qui laisse depasser la
 * carte suivante — c'est ce depassement qui dit « ca continue », et il vaut
 * mieux que quatre cartes ecrasees.
 */
@media(min-width:1180px){
  .fl-avis__carte{width:283px}
}

/* --- La zone qui porte les fleches --- */
.fl-avis__zone{position:relative}

.fl-avis__fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:44px;height:44px;               /* cible tactile complete */
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--fl-line);border-radius:50%;
  background:#fff;box-shadow:var(--fl-sh-2);
  cursor:pointer;padding:0;
  transition:background-color .18s var(--fl-ease),border-color .18s var(--fl-ease),
             opacity .18s var(--fl-ease),transform .18s var(--fl-ease)}
.fl-avis__fleche::before{
  content:"";width:20px;height:20px;
  background-color:var(--fl-ink);
  -webkit-mask:var(--fl-icon-chevron) center/contain no-repeat;
          mask:var(--fl-icon-chevron) center/contain no-repeat}
.fl-avis__fleche--gauche{left:max(.4rem,calc((100vw - 1180px) / 2 - 56px))}
.fl-avis__fleche--droite{right:max(.4rem,calc((100vw - 1180px) / 2 - 56px))}
.fl-avis__fleche--gauche::before{transform:rotate(180deg)}

.fl-avis__fleche:hover:not(:disabled){
  border-color:var(--fl-blue-200);background:var(--fl-blue-50);
  transform:translateY(-50%) scale(1.06)}
.fl-avis__fleche:hover:not(:disabled)::before{background-color:var(--fl-primary)}
/*
 * ⚠️ Une fleche inutilisable doit se VOIR inutilisable, pas disparaitre : si
 * elle s'effaçait, la mise en page sauterait a chaque bout de course et on
 * croirait a un bug. On la laisse en place, effacee et sans curseur.
 */
.fl-avis__fleche:disabled{opacity:.32;cursor:default;box-shadow:none}
/* Rien a defiler du tout : la, on les retire vraiment. */
.fl-avis__zone.is-sans-fleches .fl-avis__fleche{display:none}

:root{
  --fl-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/*
 * Sur telephone, les fleches n'ont pas de place a l'exterieur du rail et
 * viendraient recouvrir les cartes. On les cache : le geste du doigt est de
 * toute facon plus direct qu'un bouton a viser.
 */
@media(max-width:900px){
  .fl-avis__fleche{display:none}
}

/* --- Le bouton « Laisser un avis » --- */
.fl-avis__pied-section{
  display:flex;justify-content:center;
  margin-top:clamp(1.4rem,3vw,2.2rem)}
@media(max-width:600px){
  .fl-avis__pied-section .fl-cta{width:100%;max-width:320px}
}

/* ==========================================================================
   54. AVIS : LE RAIL DEMARRAIT DE TRAVERS ET LES FLECHES MORDAIENT LES CARTES
       (15 aout 2026)

   ⚠️ UNE SEULE CAUSE POUR LES DEUX DEFAUTS. La piste porte une marge interne
   (`padding-inline`) pour aligner la premiere carte sur la grille de la page.
   Mais `scroll-snap-align:start` cale le bord de la carte sur le bord du
   CONTENEUR, sans tenir compte de cette marge : au chargement, le navigateur
   accrochait donc a `scrollLeft = 130` et mangeait toute la marge. Les cartes
   se retrouvaient collees au bord de l'ecran — et les fleches, placees dans la
   gouttiere, tombaient par-dessus.

   Mesure : position de depart 130 px au lieu de 0, premiere carte a x=0 au lieu
   de x=130, fleche gauche a 74 px donc SUR la carte.

   `scroll-padding-inline` est la propriete faite pour ca : elle dit a
   l'accrochage de respecter la meme marge. Il faut donc TOUJOURS l'ecrire en
   meme temps que `padding-inline` sur un conteneur a accrochage.
   ========================================================================== */

/* La gouttiere devient une vraie colonne : assez large pour loger une fleche
   de 44 px sans jamais recouvrir une carte, quelle que soit la fenetre. */
@media(min-width:901px){
  .fl-avis__piste{
    padding-inline:max(60px,calc((100vw - 1180px) / 2));
    scroll-padding-inline:max(60px,calc((100vw - 1180px) / 2))}
  .fl-avis__fleche--gauche{left:max(8px,calc((100vw - 1180px) / 2 - 52px))}
  .fl-avis__fleche--droite{right:max(8px,calc((100vw - 1180px) / 2 - 52px))}
}
@media(max-width:900px){
  /* Pas de fleches ici : la marge n'a plus qu'a aligner la premiere carte. */
  .fl-avis__piste{
    padding-inline:1.25rem;
    scroll-padding-inline:1.25rem}
}

/* ==========================================================================
   55. AVIS : UNE FENETRE DE QUATRE CARTES, QUI S'ARRETE NET (15 aout 2026)

   Vianney : « tu dois afficher uniquement 4 avis, et sur chaque cote des
   fleches ; les cartes doivent passer sous les fleches, comme si la fenetre
   s'arretait ».

   Ce que ca change par rapport a la section 53. Jusqu'ici la piste faisait
   toute la largeur de l'ecran et portait une marge interne : les cartes
   continuaient donc de defiler DANS cette marge, et une cinquieme depassait
   toujours sur le cote. Il n'y avait pas de bord.

   Maintenant la piste EST la fenetre : sa largeur vaut exactement quatre
   cartes et trois ecarts (4 x 283 + 3 x 16 = 1180 px, la largeur commune a
   toutes les rubriques du site). Comme elle defile, elle coupe net a ses
   propres bords — une carte qui sort disparait d'un coup au lieu de s'effacer.

   Les fleches sont posees A CHEVAL sur ce bord, debordant de 24 px vers
   l'exterieur et de 20 px vers l'interieur. Les 20 px tombent exactement sur
   la marge interne des cartes (1,25 rem) : elles passent donc SOUS les
   fleches sans qu'aucun texte ne soit jamais recouvert.
   ========================================================================== */

@media(min-width:901px){
  /* La rubrique reserve la place des fleches, pour qu'elles ne sortent jamais
     de l'ecran meme sur un portable etroit. */
  .fl-avis{padding-inline:56px}

  /* La zone EST la fenetre : c'est elle qui donne le bord.
     ⚠️ SELECTEUR LOURD OBLIGATOIRE. Notre propre correctif de la section 17
     (`... > section:not(.wp-block-group) > * { max-width:none }`, ecrit pour
     liberer les grandes photos) annule toute largeur maximale posee sur un
     enfant direct d'une de nos rubriques. Mesure : la fenetre faisait 1328 px
     a 1440 et 1808 px a 1920 — donc six cartes au lieu de quatre. Il faut au
     moins autant de classes pour repasser devant. Meme piege que pour le
     slogan de la banniere (section 43). */
  .ast-page-builder-template .entry-content[data-ast-blocks-layout] > section.fl-avis > .fl-avis__zone,
  .fl-avis > .fl-avis__zone{
    position:relative;
    max-width:1180px;margin-inline:auto}

  /* ⚠️ Plus aucune marge interne ici, ni `scroll-padding` : elles servaient a
     aligner la premiere carte quand la piste faisait toute la largeur. La
     piste etant desormais exactement a la bonne largeur, toute marge
     reintroduirait le depassement qu'on vient de supprimer. */
  .fl-avis__piste{
    width:100%;
    padding-inline:0;scroll-padding-inline:0}

  /* A cheval sur le bord : 24 px dehors, 20 px dedans. */
  .fl-avis__fleche--gauche{left:-24px}
  .fl-avis__fleche--droite{right:-24px}
}

/*
 * Sur telephone, pas de fleches : on fait defiler au doigt, c'est plus direct
 * qu'un bouton a viser. La piste reprend donc toute la largeur, avec une marge
 * qui aligne la premiere carte sur le texte au-dessus — et le `scroll-padding`
 * qui va avec, sans quoi l'accrochage la mangerait (voir section 54).
 */
@media(max-width:900px){
  .fl-avis{padding-inline:0}
  .fl-avis__zone{max-width:none;margin-inline:0}
  .fl-avis__piste{
    padding-inline:1.25rem;
    scroll-padding-inline:1.25rem}
  .fl-avis__fleche{display:none !important}
}

/* ==========================================================================
   56. LE PANNEAU DE FILTRES N'A PLUS QU'UN SEUL FORMULAIRE (15 aout 2026)

   La recherche et le prix etaient deux formulaires distincts ; seul celui du
   prix avait un bouton. Taper un mot puis cliquer « Appliquer » envoyait donc
   l'ANCIENNE recherche et jetait la saisie. Voir inc/shop.php pour le detail.

   Cote habillage, il n'y a presque rien a changer : `.fl-fsearch` et
   `.fl-fprice` etaient des <form>, ce sont maintenant des <div>. Les regles
   qui les visaient par la classe continuent donc de s'appliquer telles quelles.
   ========================================================================== */

/* Le bouton se detache du bloc « prix » auquel il appartenait, et prend toute
   la largeur : c'est desormais l'action de TOUT le panneau, pas d'un reglage. */
.fl-fgroup--action{padding-top:.2rem}
.fl-fappliquer{width:100%;justify-content:center;min-height:46px;font-weight:700}

/*
 * ⚠️ Le champ de recherche n'a jamais eu de bouton propre : on validait a la
 * touche Entree, ce qui ne se devine pas — et encore moins au telephone, ou le
 * clavier affiche « Aller » sans qu'on sache ou. Le bouton unique en bas du
 * panneau repond maintenant pour lui. On garde tout de meme une indication
 * visuelle au focus, pour que le lien entre les deux se voie.
 */
.fl-fform:focus-within .fl-fappliquer{
  border-color:var(--fl-blue-400);background:var(--fl-blue-50)}

/* ==========================================================================
   57. LA RECHERCHE CORRIGEE SE DIT (15 aout 2026)

   Quand « speaks » a ete rattrape en « speks », la boutique l'affiche
   au-dessus des resultats. Une recherche silencieusement remplacee par une
   autre, c'est un site qui repond a cote sans prevenir.
   ========================================================================== */
.fl-recherche-corrigee{
  margin:0 0 1.2rem;padding:.7rem 1rem;
  border-radius:var(--fl-r-sm);
  background:var(--fl-bg-soft);border:1px solid var(--fl-line);
  color:var(--fl-body);font-size:.9rem;line-height:1.45}

/* ==========================================================================
   58. « QUI SOMMES-NOUS » : LA PAGE SE MONTE AU DEFILEMENT (15 aout 2026)

   Vianney : « je pensais vraiment faire un truc où les images arrivent de
   gauche à droite, le texte aussi. Genre un truc très dynamique, à la Apple. »

   Ce qui fait le style « Apple », et qui n'est pas l'amplitude du mouvement :
     - chaque element arrive DEPUIS UN COTE, pas seulement de bas en haut ;
     - le texte et les images ne viennent pas du meme cote, ce qui donne
       l'impression que la page se MONTE devant vous ;
     - c'est lie a la POSITION dans la page, pas au temps : on peut remonter,
       et tout se remonte a l'envers ;
     - c'est lent et large, jamais brusque.

   Tout est en CSS, pilote par `animation-timeline: view()`. Aucun script :
   rien a recalculer a chaque image, et rien qui saccade sur un telephone.
   ========================================================================== */

@supports (animation-timeline: view()){

  /*
   * ⚠️ ON REPREND LA MAIN SUR `.fl-reveal`. Les cartes de cette page utilisent
   * l'ancien systeme en JavaScript (opacite 0, puis une classe `is-in` posee a
   * l'entree dans l'ecran). Les deux mecanismes se disputeraient la meme
   * opacite : le premier arrive gagnerait, au hasard du chargement.
   * Sur CETTE page uniquement, on neutralise donc l'ancien.
   */
  .fl-js .page-qsn .fl-reveal{opacity:1;animation:none}

  /*
   * ⚠️ INDISPENSABLE : sans ca, un element decale de 70 px vers la droite
   * elargit le document et fait apparaitre une barre de defilement
   * horizontale sur toute la page.
   * `clip` et non `hidden` : `hidden` fabrique un conteneur de defilement, ce
   * qui casserait tout `position:sticky` a l'interieur — et l'en-tete du site
   * en depend.
   */
  .page-qsn .fl-qsn-section,
  .page-qsn .fl-qsn-hero,
  .page-qsn .fl-qsn-signature,
  .page-qsn .entry-content{overflow-x:clip}

  @keyframes fl-arrive-gauche{
    from{opacity:0;transform:translate3d(-64px,0,0)}
    to  {opacity:1;transform:none}
  }
  @keyframes fl-arrive-droite{
    from{opacity:0;transform:translate3d(64px,0,0)}
    to  {opacity:1;transform:none}
  }
  /* Les cartes en grille montent au lieu de glisser : trois cartes cote a cote
     qui arrivent du meme cote se poussent l'une l'autre, et l'oeil ne sait
     plus laquelle regarder. */
  @keyframes fl-arrive-bas{
    from{opacity:0;transform:translate3d(0,44px,0) scale(.97)}
    to  {opacity:1;transform:none}
  }

  /* ---- Le TEXTE arrive de la gauche ---- */
  .page-qsn .fl-qsn-hero__lead,
  .page-qsn .fl-qsn-prose > *,
  .page-qsn .fl-qsn-section > .fl-wrap > .fl-eyebrow,
  .page-qsn .fl-qsn-section > .fl-wrap > .fl-h2,
  .page-qsn .fl-qsn-section > .fl-wrap > .fl-sub,
  .page-qsn .fl-qsn-cite,
  .page-qsn .fl-qsn-duo .fl-qsn-prose > *,
  .page-qsn .fl-qsn-signature__bloc > *{
    animation:fl-arrive-gauche linear both;
    animation-timeline:view();
    /*
     * `entry 0% cover 38%` : l'element commence a arriver des qu'il pointe en
     * bas de l'ecran et il est entierement pose quand il a franchi 38 % de la
     * hauteur. Assez tot pour qu'on ne lise jamais un texte a moitie
     * transparent, assez tard pour que le mouvement se voie.
     */
    animation-range:entry 0% cover 38%}

  /* ---- Les IMAGES arrivent de la droite ---- */
  .page-qsn .fl-qsn-hero__photo,
  .page-qsn .fl-qsn-duo__photo,
  .page-qsn .fl-qsn-contexte figure{
    animation:fl-arrive-droite linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 38%}

  /* ---- Les CARTES montent, et s'echelonnent d'elles-memes ---- */
  /*
   * Aucun `animation-delay` n'est necessaire : avec `view()`, chaque carte a
   * sa PROPRE ligne de temps, calee sur sa propre position. Celle du bas entre
   * dans l'ecran apres celle du haut, donc elle arrive apres. L'echelonnement
   * est une consequence de la mise en page, pas un reglage a maintenir.
   */
  /*
   * ⚠️ `.fl-js` EN TETE, ET C'EST INDISPENSABLE. Ces trois blocs portent aussi
   * la classe `.fl-reveal`, que l'on neutralise plus haut avec
   * `.fl-js .page-qsn .fl-reveal { animation:none }` — trois classes. Sans le
   * `.fl-js` ici, notre regle n'en pesait que deux : elle perdait, et les
   * cartes restaient immobiles pendant que tout le reste s'animait.
   * Mesure : `animationName` valait `none` sur `.fl-qsn-carte` alors que la
   * regle etait bien ecrite juste en dessous.
   */
  .fl-js .page-qsn .fl-qsn-carte,
  .fl-js .page-qsn .fl-qsn-critere,
  .fl-js .page-qsn .fl-qsn-contexte,
  .page-qsn .fl-qsn-carte,
  .page-qsn .fl-qsn-critere,
  .page-qsn .fl-qsn-contexte{
    opacity:0;
    animation:fl-arrive-bas linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 34%}
  /* La figure a l'interieur d'un contexte glisse DEJA de la droite : on ne lui
     ajoute pas le mouvement du parent, sinon les deux se composent et l'image
     part deux fois plus loin. */
  .page-qsn .fl-qsn-contexte{animation-name:fl-arrive-bas}
  .fl-js .page-qsn .fl-qsn-contexte figure,
  .page-qsn .fl-qsn-contexte figure{animation-range:entry 6% cover 42%}

  /* ---- La grande photo pleine largeur : un zoom lent ---- */
  /*
   * On anime `scale` (la propriete a part) et non `transform:scale()` : le
   * masque de vague qui decoupe cette figure s'appuie sur sa boite, et un
   * `transform` sur le parent la deplacerait avec.
   */
  @keyframes fl-qsn-zoom{
    from{scale:1.12}
    to  {scale:1}
  }
  .page-qsn .fl-qsn-media img{
    animation:fl-qsn-zoom linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
    will-change:scale}

  /* ---- Le titre du haut de page : PAS d'animation ---- */
  /*
   * Il est deja visible au chargement. L'animer le ferait apparaitre en fondu
   * alors que personne n'a encore defile : on verrait un titre qui hesite,
   * et c'est la premiere chose que voit le visiteur.
   */
  .page-qsn .fl-qsn-hero__titre,
  .page-qsn .fl-qsn-hero .fl-eyebrow{animation:none;opacity:1;transform:none}
}

/* Rien ne bouge pour qui a demande moins d'animations. */
@media(prefers-reduced-motion:reduce){
  .page-qsn *{animation:none !important;opacity:1 !important;transform:none !important;scale:1 !important}
}

/* ==========================================================================
   59. ON PEUT ATTRAPER LES RAILS A LA SOURIS (15 aout 2026)

   Demande de Vianney. Au doigt, le defilement etait deja natif ; a la souris,
   il n'existait pas — on ne peut pas saisir un conteneur defilant, et la barre
   de defilement est masquee. Le geste est ajoute par flowly.js.

   Ici, uniquement ce qui se voit : le curseur doit ANNONCER que ca s'attrape,
   sinon personne n'essaie.
   ========================================================================== */
.fl-carr__piste,
.fl-avis__piste{cursor:grab}
.fl-carr__piste.is-attrape,
.fl-avis__piste.is-attrape{cursor:grabbing}

/*
 * ⚠️ Pendant le geste, on coupe la selection de texte ET le glisser-deposer
 * des images. Sans ca, tirer sur une carte selectionne son titre en bleu, ou
 * decolle la photo du produit et la traine avec le curseur — dans les deux cas
 * le geste part en vrille a mi-parcours.
 */
.fl-carr__piste.is-attrape,
.fl-avis__piste.is-attrape{
  -webkit-user-select:none;user-select:none}
.fl-carr__piste.is-attrape img,
.fl-avis__piste.is-attrape img{-webkit-user-drag:none;pointer-events:none}

/* Le survol qui souleve la carte n'a pas de sens pendant qu'on tire le rail :
   les cartes se souleveraient une a une au passage du curseur. */
.fl-carr__piste.is-attrape .fl-carr__item:hover,
.fl-avis__piste.is-attrape .fl-avis__carte:hover{transform:none;box-shadow:var(--fl-sh-1)}

/* Au doigt, aucun de ces curseurs n'existe : on evite d'imposer `grab` sur un
   ecran tactile, ou il ne veut rien dire. */
@media(hover:none){
  .fl-carr__piste,.fl-avis__piste{cursor:auto}
}

/* ==========================================================================
   60. NOUVELLE BANNIERE, TRES PALE : LE VOILE N'A PLUS DE RAISON D'ETRE
       (15 aout 2026)

   Vianney a fourni une image beaucoup plus claire que la precedente. Mesure du
   contraste du titre SANS aucun voile : 11,2:1 pour le bleu nuit et 5,0:1 pour
   le bleu d'accent — tous deux largement au-dessus du seuil de 4,5:1.

   Le voile blanc central existait parce que l'ancienne image virait au violet
   soutenu par endroits. Sur celle-ci, il ne protege plus rien : il ne fait
   qu'EFFACER le degrade au milieu, la ou on le regarde le plus. On le reduit
   donc a une respiration a peine perceptible, juste de quoi decoller le texte
   sans blanchir l'image.

   ⚠️ On ne le supprime pas tout a fait : le jour ou l'image changera encore,
   une valeur a zero se remarquerait moins qu'une valeur faible, et le
   contraste pourrait passer sous le seuil sans que personne ne le voie.
   ========================================================================== */
.fl-banniere .fl-banniere__voile{
  background:radial-gradient(62% 56% at 50% 50%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 80%)}

/* La houle reste, mais plus discrete : sur un degrade aussi doux, la
   deformation se voyait davantage que sur l'image dense d'avant. */
@media(min-width:860px){
  .fl-banniere__fond{filter:url(#fl-houle)}
}

/* ==========================================================================
   LIVRAISON — choix du mode, point relais Boxtal, carte intégrée
   (16 août 2026)

   ⚠️ LE BUG D'ORIGINE, à ne pas réintroduire : Boxtal insère son bloc
   `.bw-parcel-point` comme FRÈRE du `<label>`, dans le `<li>`. Notre ancienne
   règle mettait ce `<li>` en `display:flex` : la puce, le libellé et le bloc
   Boxtal se partageaient alors 176 px de large et le texte se cassait
   caractère par caractère. On passe en grille à deux colonnes, et le bloc
   Boxtal occupe toute la 2ᵉ colonne, sous le libellé.
   ========================================================================== */

/* 1. La ligne « Expédition » prend toute la largeur de la carte des totaux ----

   ⚠️ PIÈGE MESURÉ, ne pas « simplifier » : mettre le <tr> en `display:block`
   NE SUFFIT PAS. Dans un tableau, un enfant de type bloc est réenveloppé dans
   une cellule anonyme et hérite de la largeur de SA COLONNE — on retombait sur
   176 px, soit exactement le bug de départ (mesuré le 16 août).
   Il faut sortir tout le GROUPE de lignes du modèle tableau, puis refaire
   l'alignement « intitulé à gauche / montant à droite » en flex. */
/* Le tableau ENTIER passe en bloc — pas seulement le groupe de lignes.
   Mesuré le 16 août : en ne sortant que le <tfoot>, celui-ci était réenveloppé
   dans une cellule anonyme et retombait à 203 px sur téléphone. */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table > tbody,
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table > thead,
.woocommerce-checkout #order_review .shop_table > tbody,
.woocommerce-checkout #order_review .shop_table > tfoot{
  display:block !important;width:100% !important}
.woocommerce-cart .cart_totals table.shop_table > tbody > tr,
.woocommerce-checkout #order_review .shop_table tr{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;width:100%}
.woocommerce-cart .cart_totals table.shop_table > tbody > tr > th,
.woocommerce-checkout #order_review .shop_table tr > th{
  flex:0 0 auto;width:auto !important;text-align:left}
.woocommerce-cart .cart_totals table.shop_table > tbody > tr > td,
.woocommerce-checkout #order_review .shop_table tr > td{
  flex:1 1 auto;min-width:0;width:auto !important;text-align:right}
/* La ligne d'un article garde son nom à gauche et son montant à droite :
   ces deux cellules sont deux « td », pas un « th » + un « td ». */
.woocommerce-checkout #order_review .shop_table tr > td.product-name{
  flex:1 1 auto;text-align:left}
.woocommerce-checkout #order_review .shop_table tr > td.product-total{
  flex:0 0 auto;text-align:right}
.woocommerce-checkout #order_review .shop_table thead th:last-child{text-align:right}
/* … sauf « Expédition », qui s'empile sur toute la largeur. */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals{
  display:block !important;width:100%}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals > th,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals > td{
  display:block !important;width:100% !important;text-align:left !important}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > th,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals > th{
  border-bottom:0 !important;padding-bottom:.4rem !important;font-weight:600 !important}

/* 2. Chaque mode de livraison est une carte ---------------------------------- */
ul#shipping_method{list-style:none;margin:0;padding:0;text-align:left}
.woocommerce-cart .cart_totals ul#shipping_method li,
.woocommerce-checkout #order_review ul#shipping_method li,
ul#shipping_method li{
  display:grid;
  grid-template-columns:1.1rem minmax(0,1fr);
  column-gap:.65rem;row-gap:.6rem;
  align-items:start;
  /* ⚠️ `!important` mesuré, pas réflexe : la feuille de WooCommerce est
     chargée APRÈS la nôtre et impose
     `margin:0; padding:.25em 0 .25em 22px; text-indent:-22px`
     sur ces <li>. Sans cela, la carte n'a ni fond, ni bordure, ni respiration,
     et le retrait négatif décale la première ligne. */
  margin:0 0 .5rem !important;padding:.75rem .85rem !important;
  text-indent:0 !important;
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r-sm);
  background:#fff;font-size:.9rem;line-height:1.4;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
ul#shipping_method li:last-child{margin-bottom:0 !important}
ul#shipping_method li:hover{border-color:var(--fl-blue-200) !important}
/* `:has()` est reconnu par tous les navigateurs visés ; sans lui la carte
   reste simplement neutre — aucune régression, juste moins de relief. */
ul#shipping_method li:has(input:checked){
  border-color:var(--fl-primary) !important;background:var(--fl-blue-50);
  box-shadow:var(--fl-sh-1)}
ul#shipping_method input.shipping_method{
  grid-column:1;grid-row:1;margin:.15rem 0 0;accent-color:var(--fl-primary);cursor:pointer}
ul#shipping_method li > label{
  grid-column:2;grid-row:1;margin:0;cursor:pointer;
  font-weight:600;color:var(--fl-ink);overflow-wrap:anywhere}
ul#shipping_method li > label .amount{white-space:nowrap}

/* 3. L'encart « point relais » de Boxtal ------------------------------------- */
ul#shipping_method .bw-parcel-point{
  grid-column:2;grid-row:2;
  display:block !important;width:100%;
  margin:0;padding:.65rem .75rem !important;
  background:#fff !important;border:1px solid var(--fl-line);
  border-radius:var(--fl-r-sm);
  font-size:.85rem;line-height:1.45;color:var(--fl-body)}
/* Boxtal sépare ses trois lignes par des <br> : en display:block ils
   ajouteraient une ligne vide de plus à chaque fois. */
ul#shipping_method .bw-parcel-point br{display:none}
ul#shipping_method .bw-parcel-point [class*="bw-parcel-client-"]{
  display:block;font-weight:600;color:var(--fl-ink)}
ul#shipping_method .bw-parcel-point small[class*="bw-parcel-address-"]{
  display:block !important;margin:.2rem 0 .6rem;
  font-size:.8rem;font-weight:400;color:var(--fl-muted);text-transform:none}
ul#shipping_method .bw-select-parcel{
  display:inline-block;cursor:pointer;
  text-decoration:none !important;
  /* Sans cela, sur téléphone, « Choisir un autre point relais » se cassait sur
     trois lignes et la pastille devenait un gros bloc arrondi. */
  white-space:nowrap;
  padding:.42rem .85rem;border-radius:var(--fl-r-pill);
  font-size:.82rem;font-weight:600;color:#fff !important;
  background:var(--fl-primary-grad);border:0;
  transition:background .18s ease,transform .12s ease}
ul#shipping_method .bw-select-parcel:hover{background:var(--fl-primary-grad-h)}
ul#shipping_method .bw-select-parcel:active{transform:translateY(1px)}

/* 4. La carte des points relais : FENÊTRE FLOTTANTE, on n'y touche pas -------

   ⛔ Ne pas tenter de l'intégrer dans le bloc. Essayé le 16 août 2026, annulé
   par Vianney le jour même : « remets la carte en pop-up, c'était plus
   simple ». Et la mesure lui donne raison — intégrée, dans la colonne de
   commande à 390 px, la carte tombait à 146 px de large : inutilisable.

   On ne touche donc NI à `position`, NI à `top`, NI aux flottants de Boxtal.
   Uniquement l'habillage : polices, boutons, couleurs. */
#bw-map #bw-map-inner{border-radius:var(--fl-r-sm);overflow:hidden}
#bw-map #bw-pp-container{font-family:var(--fl-font) !important}
#bw-map #bw-pp-container table td{
  border-top:1px solid var(--fl-line-soft) !important;
  color:var(--fl-body) !important;font-size:.84rem !important}
#bw-map #bw-pp-container .bw-parcel-point-title a{color:var(--fl-ink) !important;font-weight:600}
#bw-map #bw-map-inner .bw-parcel-point-button{
  padding:.35rem .8rem !important;border-radius:var(--fl-r-pill) !important;
  font-size:.8rem !important;font-weight:600 !important;
  background:var(--fl-primary) !important;border:0 !important;color:#fff !important}
#bw-map #bw-map-inner .bw-parcel-point-button:hover{background:var(--fl-primary-dark) !important}

/* ==========================================================================
   Fiche de commande : les deux adresses (16 août 2026)

   ⚠️ Les colonnes de WooCommerce sont FLOTTANTES. Leur conteneur
   `.woocommerce-customer-details` se repliait donc à une hauteur de 0 px
   (mesuré), et les deux encadrés tombaient hors de la carte arrondie —
   « les deux adresses ne sont pas dans le carré ». Une grille supprime le
   problème à la racine, sans avoir à nettoyer les flottants.
   ========================================================================== */
.woocommerce-customer-details,
.woocommerce-customer-details .woocommerce-columns{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin:1.4rem 0 0}
.woocommerce-customer-details .woocommerce-column{
  float:none !important;width:auto !important;margin:0 !important;padding:1rem 1.15rem;
  background:var(--fl-bg-soft);border:1px solid var(--fl-line);border-radius:var(--fl-r-sm)}
.woocommerce-customer-details .woocommerce-column > h2,
.woocommerce-customer-details .woocommerce-column > h3{
  font-size:.95rem !important;font-weight:700 !important;
  margin:0 0 .5rem !important;padding:0 !important;border:0 !important}
.woocommerce-customer-details address{
  font-style:normal;line-height:1.55;color:var(--fl-body);
  border:0 !important;padding:0 !important;margin:0;word-break:normal}
.woocommerce-customer-details address p{margin:.35rem 0 0}

/* ==========================================================================
   Carte des points relais : filtre Lockers / Commerçants (16 août 2026)

   ⚠️ Boxtal ne fournit AUCUN champ « type » : les données d'un point sont
   `code, name, phone, description, network, location, openingDays`, et
   `network` vaut MONR_NETWORK pour tout le monde, casier compris.
   Le seul discriminant est le NOM, qui commence par « LOCKER » chez Mondial
   Relay (vérifié sur 50 points). Heuristique assumée : si la convention
   changeait, le point basculerait simplement en « commerçant » — rien ne casse.
   ========================================================================== */
.fl-ppfiltre{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  padding:.65rem .75rem;background:#fff;border-bottom:1px solid var(--fl-line);
  font-family:var(--fl-font)}
.fl-ppfiltre button{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.42rem .8rem;border:1px solid var(--fl-line);border-radius:var(--fl-r-pill);
  background:#fff;color:var(--fl-body);cursor:pointer;
  font:600 .82rem/1 var(--fl-font);white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.fl-ppfiltre button:hover{border-color:var(--fl-blue-200)}
.fl-ppfiltre button.is-on{
  background:var(--fl-primary);border-color:var(--fl-primary);color:#fff}
.fl-ppfiltre button.is-on .fl-ppdot{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fl-ppfiltre b{font-weight:600;opacity:.7;font-size:.78rem}
.fl-ppdot{width:.58rem;height:.58rem;border-radius:50%;flex:0 0 auto}
/* Les pastilles de la légende reprennent EXACTEMENT la couleur des puces. */
.fl-ppdot--locker{background:#1f9d55}
.fl-ppdot--shop{background:#2596be}

/* Les lockers passent en vert sur la carte ; les commerçants restent bleus.
   La puce est une image : on la fait pivoter en teinte plutôt que d'aller
   remplacer le fichier de Boxtal, qui serait écrasé à chaque mise à jour. */
/* ⚠️ Sur la carte, la puce EST l'élément qui porte `.maplibregl-marker` —
   maplibre n'ajoute pas d'enveloppe. Un sélecteur descendant ne trouve rien. */
/* Couleur des puces — ⚠️ on REMPLACE la forme, on ne la teinte pas.
   Première tentative le 16 août : `filter:hue-rotate()` sur l'image de Boxtal.
   Deux défauts rédhibitoires — la couleur obtenue n'est jamais exacte (+128°
   sur un bleu donnait du magenta), et elle dépend de l'image de Boxtal, qui
   sera écrasée à la prochaine mise à jour de leur extension.
   Une forme dessinée en SVG donne la couleur au code hexadécimal près. */
#bw-map .bw-marker{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 35'%3E%3Cpath d='M14 0C6.3 0 0 6.3 0 14c0 9.8 12.2 20 13.4 20.9.4.3.9.3 1.3 0C15.8 34 28 23.8 28 14 28 6.3 21.7 0 14 0z' fill='%232596be'/%3E%3C/svg%3E") !important;
  background-size:contain !important;background-repeat:no-repeat !important;
  background-position:center top !important;
  filter:none !important;font-weight:700}
#bw-map .maplibregl-marker.fl-pp--locker,
#bw-map #bw-pp-container tr.fl-pp--locker .bw-marker{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 35'%3E%3Cpath d='M14 0C6.3 0 0 6.3 0 14c0 9.8 12.2 20 13.4 20.9.4.3.9.3 1.3 0C15.8 34 28 23.8 28 14 28 6.3 21.7 0 14 0z' fill='%231f9d55'/%3E%3C/svg%3E") !important}

/* Filtrage : on masque d'un coup les lignes de la liste ET les puces. */
#bw-map.fl-f-locker .fl-pp--shop,
#bw-map.fl-f-shop .fl-pp--locker{display:none !important}

/* ==========================================================================
   Tunnel : la LIVRAISON d'abord, la facturation derrière (16 août 2026)
   Voir inc/tunnel.php pour le pourquoi et la mécanique côté serveur.
   ========================================================================== */

/* On inverse l'ordre d'affichage, sans toucher au sens des données.
   ⚠️ PIÈGE MESURÉ le 16 août : inverser `.col-1` / `.col-2` ne sert à RIEN.
   Cette version de WooCommerce rend les DEUX blocs (facturation ET livraison)
   dans `.col-1` ; `.col-2` est vide (17 px de haut, contenu = " ").
   L'ordre doit donc être posé à l'intérieur de `.col-1`. */
.woocommerce-checkout #customer_details .col-1{
  display:flex;flex-direction:column;gap:1.1rem}
.woocommerce-checkout #customer_details .col-1 .woocommerce-shipping-fields{order:1}
.woocommerce-checkout #customer_details .col-1 .woocommerce-billing-fields{order:2}
.woocommerce-checkout #customer_details .col-1 > *:not(.woocommerce-shipping-fields):not(.woocommerce-billing-fields){order:3}

/* La case native « Expédier à une adresse différente ? » et le titre
   « Détails de facturation » sont remplacés par les nôtres. */
.woocommerce-checkout #ship-to-different-address{display:none !important}
/* ⚠️ `:not(.fl-titre-coordonnees)` est INDISPENSABLE : notre propre titre est
   imprimé par `woocommerce_before_checkout_billing_form`, donc au même niveau
   que celui de WooCommerce. Sans l'exclusion, on masquait les deux — mesuré. */
.woocommerce-checkout .woocommerce-billing-fields > h3:not(.fl-titre-coordonnees){
  display:none !important}

.woocommerce-checkout .fl-titre-livraison,
.woocommerce-checkout .fl-titre-coordonnees{
  font-size:1.02rem !important;font-weight:700 !important;
  color:var(--fl-ink);margin:0 0 .2rem !important}
.woocommerce-checkout .fl-titre-aide{
  margin:0 0 .7rem;font-size:.84rem;color:var(--fl-muted)}
.woocommerce-checkout .fl-titre-aide[hidden]{display:none}

/* L'adresse de facturation reste repliée tant que la case n'est pas cochée.
   On masque quand la classe est ABSENTE : à l'ouverture, aucune règle ne
   s'applique, donc les champs retrouvent leur mise en page d'origine
   (form-row-first / form-row-last) sans qu'on ait à la redéclarer. */
.woocommerce-checkout form.checkout:not(.fl-fact-on) .fl-facturation{display:none !important}

.woocommerce-checkout .fl-bascule-facturation{margin:.2rem 0 .8rem !important}
.woocommerce-checkout .fl-bascule-facturation label{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-size:.9rem;color:var(--fl-body)}
.woocommerce-checkout .fl-bascule-facturation input[type="checkbox"]{
  accent-color:var(--fl-primary);width:1rem;height:1rem;margin:0}
/* « (facultatif) » n'a aucun sens sur une case à cocher. */
.woocommerce-checkout .fl-bascule-facturation label .optional{display:none}

/* --------------------------------------------------------------------------
   RUBRIQUES REPLIABLES DE LA FICHE PRODUIT (6 septembre 2026)

   Vianney : « le "en détail" je veux qu'il apparaisse seulement si on l'ouvre,
   faut un truc plus cohérent, presque "conseils" ». L'intro reste visible, tout
   le reste — sécurité comprise — devient une liste de rubriques qu'on ouvre.

   ⛔ PAS de filets entre les rubriques, ni de cartes dans la carte : la règle
   de Léa (« éviter les traits trop droits ») vaut ici aussi. La structure vient
   de l'espacement, du chevron et d'un fond qui s'allume au survol.
   ⚠️ Chaque en-tête fait au moins 44 px de haut — la règle du 14 août sur les
   cibles tactiles s'applique à tout ce qui est cliquable.
   -------------------------------------------------------------------------- */
.fl-rubriques{margin:1.6rem 0 0;display:grid;gap:.15rem}
.fl-rubriques:empty{display:none}

.fl-rubrique{border-radius:var(--fl-r-sm)}
.fl-rubrique summary{
  cursor:pointer;list-style:none;position:relative;
  display:flex;align-items:center;min-height:44px;
  padding:.55rem 2.4rem .55rem .8rem;
  border-radius:var(--fl-r-sm);
  font-size:1rem;font-weight:600;letter-spacing:-.012em;color:var(--fl-ink);
  transition:background-color .2s var(--fl-ease),color .2s var(--fl-ease)}
.fl-rubrique summary::-webkit-details-marker{display:none}
.fl-rubrique summary:hover{background:var(--fl-blue-50);color:var(--fl-primary)}
.fl-rubrique summary:focus-visible{
  outline:2px solid var(--fl-primary);outline-offset:2px}

/* Le chevron, dessiné en CSS : deux traits qui pivotent à l'ouverture. */
.fl-rubrique summary::after{
  content:"";position:absolute;right:.9rem;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--fl-primary);border-bottom:2px solid var(--fl-primary);
  border-radius:1px;rotate:45deg;
  transition:rotate .25s var(--fl-ease),margin-top .25s var(--fl-ease)}
.fl-rubrique[open] summary::after{rotate:225deg;margin-top:-2px}

.fl-rubrique__corps{padding:.1rem .8rem 1.1rem;max-width:72ch}
.fl-rubrique__corps > :first-child{margin-top:0}
.fl-rubrique__corps > :last-child{margin-bottom:0}

/* La rubrique de sécurité se lit comme une notice : plus petite, plus grise.
   Aucun rouge, aucun pictogramme — demande de Vianney : « présent pour être
   légalement safe mais pas hyper visible ». */
.fl-rubrique--securite .fl-securite__liste{
  margin:0;padding:0 0 0 1rem;
  font-size:.88rem;line-height:1.65;color:var(--fl-muted)}
.fl-rubrique--securite .fl-securite__liste li{margin:0 0 .45rem}
.fl-rubrique--securite .fl-securite__liste li::marker{color:var(--fl-line)}
.fl-rubrique--securite .fl-securite__liste strong{color:var(--fl-body);font-weight:600}

@media(max-width:600px){
  .fl-rubrique summary{font-size:.95rem;padding-left:.55rem}
  .fl-rubrique__corps{padding-left:.55rem;padding-right:.55rem}
}

/* --------------------------------------------------------------------------
   AVIS DE DÉMONSTRATION SUR LA FICHE PRODUIT (6 septembre 2026)
   Voir inc/avis-demo.php : ils sont faux, ils ne sont pas en base, et seul un
   administrateur les voit avant l'ouverture. Le style reprend celui des vrais
   avis pour que le rendu soit jugeable — sauf le bandeau d'alerte, qui doit
   rester impossible à confondre avec un élément de la page.
   -------------------------------------------------------------------------- */
.fl-avis-demo{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.8rem}
.fl-avis-demo__item{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);
  padding:1rem 1.15rem}
.fl-avis-demo__tete{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .45rem}
.fl-avis-demo__nom{font-weight:700;font-size:.95rem;color:var(--fl-ink)}
.fl-avis-demo__verifie{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--fl-ok);background:var(--fl-ok-bg);
  border-radius:var(--fl-r-pill);padding:.12rem .5rem}
.fl-avis-demo__item p{
  margin:0;font-size:.93rem;line-height:1.6;color:var(--fl-body);max-width:70ch}
.fl-avis-demo .star-rating{font-size:.78rem;margin:0}

/* --------------------------------------------------------------------------
   INTERRUPTEUR « EN STOCK » DE LA BARRE DE BOUTIQUE (6 septembre 2026)

   Vianney : « dans la boutique, afficher en haut une case cochée par défaut
   "en stock" et le user peut décocher s'il veut […] je veux un site pro ».
   Il vit entre le nombre de résultats et le tri, exactement où il l'avait
   dessiné, et il est ACTIF par défaut.

   C'est un lien (donc sans JavaScript, adressable, dans l'historique) déguisé
   en interrupteur. ⚠️ 44 px de haut : règle des cibles tactiles du 14 août.
   -------------------------------------------------------------------------- */
.fl-stock-switch{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:0 .9rem 0 .7rem;
  border:1px solid var(--fl-line);border-radius:var(--fl-r-pill);
  background:#fff;text-decoration:none;
  font-size:.88rem;font-weight:600;color:var(--fl-muted);
  transition:border-color .2s var(--fl-ease),color .2s var(--fl-ease),
             background-color .2s var(--fl-ease)}
.fl-stock-switch:hover{border-color:var(--fl-blue-200);color:var(--fl-ink)}
.fl-stock-switch:focus-visible{outline:2px solid var(--fl-primary);outline-offset:2px}

/* La piste et son pion, dessinés en CSS : aucune image à charger. */
.fl-stock-switch__piste{
  position:relative;flex:0 0 auto;
  width:32px;height:18px;border-radius:999px;
  background:var(--fl-line);
  transition:background-color .25s var(--fl-ease)}
.fl-stock-switch__pion{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .25s var(--fl-ease)}

.fl-stock-switch.is-on{color:var(--fl-ink);border-color:var(--fl-blue-200);background:var(--fl-blue-50)}
.fl-stock-switch.is-on .fl-stock-switch__piste{background:var(--fl-primary)}
.fl-stock-switch.is-on .fl-stock-switch__pion{transform:translateX(14px)}

/* La barre passe en trois zones : résultats à gauche, interrupteur et tri à
   droite. Sur téléphone, l'interrupteur garde sa place ; c'est le nombre de
   résultats qui prend toute la première ligne. */
.fl-shop-bar{flex-wrap:wrap}
.fl-shop-bar .woocommerce-result-count{margin-right:auto !important}
@media(max-width:600px){
  .fl-shop-bar .woocommerce-result-count{flex:1 0 100%;margin-right:0 !important}
  .fl-stock-switch{font-size:.84rem;padding:0 .75rem 0 .6rem}
}

/* ==========================================================================
   BANNIERE PHOTO — plus de houle, voile quasi nul, cadrage vers le bas
   (9 sept. 2026)

   La nouvelle image (objets sensoriels sur fond creme) a remplace le degrade
   liquide. Trois retours de Vianney, capture a l'appui :
     1. « y'a un espece de filtre devant non ? » -> le voile blanc central
     2. « l'image bouge, c'est cool, mais on dirait un bruit » -> la HOULE :
        un filtre de deplacement etait beau sur un degrade sans contour ; sur
        des objets nets, il fait onduler les aretes et se lit comme du bruit.
        La DERIVE lente (section 48) est ce qu'il trouve « cool » : on la
        garde, on retire seulement la houle.
     3. « le lezard est coupe » -> en 16:9 dans une banniere plus large que
        haute, `cover` rogne le haut et le bas. Or le haut de l'image est DEJA
        rogne par la photo elle-meme (rouleau et Tangle coupes par le bord),
        alors que le bas porte des objets ENTIERS (gecko, engrenages). On
        ancre donc le cadrage vers le bas : ce qu'on perd en haut ne se voit
        pas, ce qu'on garde en bas est complet.

   ⚠️ Ces regles sont ecrites APRES celles de la houle et du voile : a
   specificite egale, c'est l'ordre qui tranche. Si on deplace ce bloc plus
   haut dans le fichier, la houle revient.
   ========================================================================== */
.fl-banniere__fond,
.fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
.fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
  filter:none}
/* Le survol du bouton garde son eclaircissement, sans la houle devant. */
@media(min-width:860px){
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
    filter:brightness(1.03) saturate(1.05)}
}

/* Le fond creme est uniforme la ou le texte se pose : le voile n'a plus rien
   a proteger. On le laisse a peine perceptible (voir la mise en garde de la
   section precedente : une valeur nulle se remarquerait moins qu'une faible). */
.fl-banniere .fl-banniere__voile{
  background:radial-gradient(60% 54% at 50% 50%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 60%,rgba(255,255,255,0) 80%)}

/* Cadrage ancre vers le bas sur ordinateur (le telephone reste centre : la
   tranche visible y est etroite et le bas porte le debut du gecko). */
@media(min-width:601px){
  .fl-banniere__fond{object-position:center 78%}
}

/* Derive plus douce : le zoom a 6,5 % rognait encore 3 % de chaque cote et
   finissait de couper les pattes du gecko. On garde le mouvement, en plus
   petit. */
@keyframes fl-derive-fond{
  0%  {transform:scale(1.01) translate3d(0,0,0)}
  50% {transform:scale(1.035) translate3d(-.8%,-.5%,0)}
  100%{transform:scale(1.01) translate3d(0,0,0)}
}

/* ---- Retour de Vianney, meme jour : « reduis le zoom quand je passe la souris
   dessus » et « j'ai plus l'impression que l'image bouge, je veux le cote
   flottant ». ---------------------------------------------------------- */
/*
 * Le zoom du survol passe de 4,5 % a 1,5 % : on sent que l'image repond, sans
 * que le gecko replonge sous le bord.
 *
 * La derive : ma version precedente (zoom de 1 a 3,5 % en 34 s) ne se voyait
 * plus. Le « flottant » ne vient pas du ZOOM mais du DEPLACEMENT : l'image
 * glisse doucement, comme posee sur l'eau. On fixe donc l'echelle a 1,03
 * (une marge constante de 1,5 % de chaque cote, pas de pompage) et on fait
 * voyager l'image dedans, en trois temps pour ne pas lire un aller-retour
 * mecanique. 22 s : assez lent pour apaiser, assez rapide pour qu'on le voie.
 */
@supports selector(:has(*)){
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__fond,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__fond{
    scale:1.015}
  .fl-banniere:has(.fl-banniere__cta:hover) .fl-banniere__voile,
  .fl-banniere:has(.fl-banniere__cta:focus-visible) .fl-banniere__voile{
    scale:1.02}
}
@keyframes fl-derive-fond{
  0%  {transform:scale(1.03) translate3d(0,0,0)}
  33% {transform:scale(1.03) translate3d(-1.1%,.6%,0)}
  66% {transform:scale(1.03) translate3d(.9%,-.7%,0)}
  100%{transform:scale(1.03) translate3d(0,0,0)}
}
.fl-banniere__fond{animation-duration:22s}

/* ==========================================================================
   DIAPORAMA DE LA BANNIERE — trois fonds en fondu (9 sept. 2026)

   Voir le commentaire de inc/vitrine.php pour le POURQUOI (defiler plutot
   que tirer au sort). Ici, le COMMENT :

   Tous les fonds sont empiles au meme endroit. Celui qui porte `is-active`
   est visible ; celui qui vient de l'etre garde `is-prev` et RESTE OPAQUE,
   un plan en dessous, pendant que le nouveau apparait par-dessus. Sans ce
   plan de secours, deux images a moitie transparentes laisseraient voir le
   degrade CSS entre elles pendant le fondu — un « flash » d'une seconde,
   exactement ce qu'on ne veut pas sur une banniere qui doit apaiser.

   La derive (transform) est la meme sur toutes les images, lancee en meme
   temps : elles glissent ensemble, le fondu ne saute pas.
   ========================================================================== */
.fl-banniere__fond{
  opacity:0;z-index:-3;
  transition:opacity 1.8s ease-in-out,scale 1.1s var(--fl-ease),filter 1.1s var(--fl-ease)}
/* Le <picture> n'est qu'une enveloppe semantique : `display:contents` le
   retire de la mise en page, l'image dedans se positionne comme avant, par
   rapport a la banniere. Sans ca, une boite en ligne vide pourrait decaler
   le contenu centre. */
.fl-banniere__cadre{display:contents}
.fl-banniere__fond.is-prev{opacity:1;z-index:-3}
.fl-banniere__fond.is-active{opacity:1;z-index:-2}

@media(prefers-reduced-motion:reduce){
  .fl-banniere__fond{transition:none !important}
}

/* ==========================================================================
   61. BOUTIQUE PLEINE LARGEUR, PANNEAU DE FILTRES, RONDS DE COLORIS
   (16 septembre 2026)

   Vianney : « j'imaginais plus que la boutique fasse toute la largeur avec en
   haut à droite le tri, en stock et filtre ; quand on ouvre filtre, ça ouvre
   un panel pop-up joli, moderne » — et sur les cartes « voir les couleurs
   disponibles plutôt que "X coloris", avec des petits ronds de couleur ».

   Le panneau est un <dialog> natif (inc/shop.php) ouvert par flowly.js en
   fenêtre modale. Il glisse depuis la droite sur ordinateur, depuis le bas
   sur téléphone. Les anciennes règles « filtres à gauche » (section 9) sont
   écrasées ici, pas supprimées : l'historique du fichier raconte pourquoi
   elles existaient.
   ========================================================================== */

/* --- 1. La grille prend toute la largeur --------------------------------- */
.fl-shop{display:block}
.fl-shop-main{min-width:0}

/* --- 2. La barre du haut : résultats à gauche ; tri, stock, filtres à droite.
   WooCommerce accroche le tri en priorité 30, notre bouton juste après : on
   règle l'ordre VISUEL ici, sans déplacer les crochets. -------------------- */
.fl-shop-bar{gap:.6rem}
.fl-shop-bar .woocommerce-result-count{order:0;margin-right:auto !important}
.fl-shop-bar .woocommerce-ordering{order:1}
.fl-shop-bar .fl-stock-switch{order:2}
.fl-shop-bar .fl-filters-toggle{order:3}

/* Le bouton « Filtres » : même pilule que l'interrupteur « En stock ».
   Astra colore tous les <button> avec la couleur d'action, y compris au
   focus : on fixe explicitement chaque état. 44 px : règle tactile. */
.fl-filters-toggle,
.fl-filters-toggle:hover,
.fl-filters-toggle:focus,
.fl-filters-toggle:active{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:0 1rem 0 .85rem;margin:0;
  background:#fff !important;color:var(--fl-ink) !important;
  border:1px solid var(--fl-line) !important;border-radius:var(--fl-r-pill) !important;
  font-family:var(--fl-font);font-size:.88rem;font-weight:600;line-height:1;
  box-shadow:none !important;cursor:pointer;
  transition:border-color .2s var(--fl-ease),background-color .2s var(--fl-ease),
             transform .2s var(--fl-ease)}
.fl-filters-toggle:hover{border-color:var(--fl-blue-200) !important;background:var(--fl-blue-50) !important}
.fl-filters-toggle:focus-visible{outline:2px solid var(--fl-primary);outline-offset:2px}
.fl-filters-toggle[aria-expanded="true"]{background:var(--fl-blue-50) !important;border-color:var(--fl-blue-200) !important}
.fl-filters-toggle svg{width:16px;height:16px;color:var(--fl-primary);flex:0 0 auto}
.fl-badge{
  background:var(--fl-primary);color:#fff;border-radius:var(--fl-r-pill);
  font-size:.72rem;padding:.12rem .48rem;font-weight:700;line-height:1.2}

/* --- 3. Le panneau ------------------------------------------------------- */
dialog.fl-filters{
  /* Un <dialog> modal est centré par défaut : on le colle au bord droit. */
  position:fixed;inset:0 0 0 auto;margin:0;
  width:min(430px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;
  padding:0;border:0;
  background:#fff;color:var(--fl-body);
  border-radius:var(--fl-r-lg) 0 0 var(--fl-r-lg);
  box-shadow:-18px 0 60px rgba(52,48,94,.18);
  overflow:hidden;
  /* Les anciennes règles de la colonne de gauche (section 9) : neutralisées. */
  top:0 !important}
dialog.fl-filters::backdrop{
  background:rgba(52,48,94,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:fl-voile .3s var(--fl-ease)}
dialog.fl-filters[open]{
  display:flex;flex-direction:column;
  animation:fl-glisse-gauche .38s var(--fl-ease)}
@keyframes fl-voile{from{opacity:0}}
@keyframes fl-glisse-gauche{from{transform:translateX(48px);opacity:0}}
@keyframes fl-glisse-haut{from{transform:translateY(48px);opacity:0}}

.fl-filters__inner{display:flex;flex-direction:column;height:100%;min-height:0}

.fl-filters__head{
  display:flex;align-items:center;gap:.7rem;
  padding:1.1rem 1rem 1rem 1.4rem;margin:0}
.fl-filters__head h2{
  font-size:1.12rem !important;font-weight:700;margin:0 !important;color:var(--fl-ink);
  letter-spacing:-.015em;flex:1 1 auto}
.fl-filters__reset{
  font-size:.8rem;font-weight:600;color:var(--fl-muted);
  border-bottom:1px solid transparent;flex:0 0 auto}
.fl-filters__reset:hover{color:var(--fl-coral-700);border-bottom-color:currentColor}
/* La croix : même dessin que celle du tiroir mobile (--fl-icon-close). */
.fl-filters__close,
.fl-filters__close:hover,
.fl-filters__close:focus,
.fl-filters__close:active{
  flex:0 0 auto;width:44px;height:44px;padding:0;margin:0;
  border:0 !important;border-radius:50% !important;
  background:var(--fl-bg-soft) !important;box-shadow:none !important;
  cursor:pointer;position:relative;
  transition:background-color .2s var(--fl-ease),transform .2s var(--fl-ease)}
.fl-filters__close::before{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  background:var(--fl-ink);
  -webkit-mask:var(--fl-icon-close) center/contain no-repeat;
  mask:var(--fl-icon-close) center/contain no-repeat}
.fl-filters__close:hover{background:var(--fl-blue-100) !important;transform:rotate(90deg)}
.fl-filters__close:focus-visible{outline:2px solid var(--fl-primary);outline-offset:2px}

.fl-filters__corps{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:0 1.4rem 1.2rem;
  scrollbar-width:thin;scrollbar-color:var(--fl-line) transparent}
.fl-filters__corps .fl-fgroup:first-of-type{border-top:0;padding-top:.2rem;margin-top:0}

/* Le pied reste visible pendant qu'on défile : c'est l'action de tout le
   panneau. Pas de filet : une ombre légère vers le haut sépare les deux. */
.fl-filters__pied{
  flex:0 0 auto;padding:.9rem 1.4rem 1.1rem;
  background:#fff;box-shadow:0 -10px 24px rgba(52,48,94,.06)}
.fl-filters__pied .fl-fappliquer{
  width:100%;display:flex;justify-content:center;align-items:center;
  min-height:50px;padding:.75rem 1.4rem !important;font-weight:700 !important}

/* Sans JavaScript, un <dialog> fermé n'existe pas à l'écran : on le pose
   alors en bloc au-dessus des produits, comme une carte ordinaire. */
html:not(.fl-js) dialog.fl-filters{
  display:block;position:static;width:auto;height:auto;max-height:none;
  border-radius:var(--fl-r-lg);box-shadow:var(--fl-sh-1);
  border:1px solid var(--fl-line);margin:0 0 1.2rem}
html:not(.fl-js) .fl-filters__close{display:none}

/* --- 4. Les couleurs : des cases à cocher --------------------------------- */
fieldset.fl-fgroup{border:0;min-width:0;padding-left:0;padding-right:0}
/* Le <legend> flotté sort de son rôle de « titre de cadre » et se pose sur la
   ligne, à gauche ; les deux boutons vont à droite. */
.fl-fgroup--couleurs legend{float:left;padding:0;margin:0 0 .5rem}
.fl-fcouleurs__tous{
  float:right;display:inline-flex;align-items:center;gap:.35rem;
  margin:-.55rem 0 .3rem;color:var(--fl-muted);font-size:.76rem}
.fl-fgroup--couleurs .fl-fcouleurs{clear:both}
.fl-lien-discret,
.fl-lien-discret:hover,
.fl-lien-discret:focus,
.fl-lien-discret:active{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:.6rem .35rem !important;margin:0;min-height:44px;
  font-family:var(--fl-font);font-size:.78rem;font-weight:600;line-height:1;
  color:var(--fl-primary) !important;cursor:pointer;text-decoration:none;
  border-radius:var(--fl-r-sm) !important}
.fl-lien-discret:hover{color:var(--fl-primary-dark) !important;text-decoration:underline}
.fl-lien-discret:focus-visible{outline:2px solid var(--fl-primary);outline-offset:1px}

.fl-fcouleurs{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .5rem}
.fl-fcouleurs__item{margin:0;padding:0}
.fl-fcouleurs label{
  display:flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.3rem .5rem;border-radius:var(--fl-r-sm);
  font-size:.89rem;font-weight:500;color:var(--fl-muted);cursor:pointer;
  position:relative;
  transition:background .18s var(--fl-ease),color .18s var(--fl-ease)}
.fl-fcouleurs label:hover{background:var(--fl-blue-50)}
/* La vraie case reste dans la page (clavier, lecteurs d'écran) mais invisible :
   c'est le rond coloré qui la représente. */
.fl-fcouleurs input[type=checkbox]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fl-fcouleurs__dot{
  width:20px;height:20px;flex:0 0 auto;border-radius:50%;position:relative;
  background:var(--fl-teinte,#d9d4e6);
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.14);
  opacity:.38;filter:saturate(.6);transform:scale(.9);
  transition:opacity .18s var(--fl-ease),filter .18s var(--fl-ease),transform .18s var(--fl-ease)}
.fl-fcouleurs__nom{flex:1 1 auto}
.fl-fcouleurs input:checked ~ .fl-fcouleurs__dot{opacity:1;filter:none;transform:none}
.fl-fcouleurs input:checked ~ .fl-fcouleurs__nom{color:var(--fl-ink);font-weight:600}
/* La coche : blanche avec un liseré d'ombre, lisible sur le citron comme sur l'encre. */
.fl-fcouleurs input:checked ~ .fl-fcouleurs__dot::after{
  content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.fl-fcouleurs input:focus-visible ~ .fl-fcouleurs__dot{
  outline:2px solid var(--fl-primary);outline-offset:2px}
.fl-fcouleurs .fl-cat-count{transition:opacity .18s var(--fl-ease)}
.fl-fcouleurs input:not(:checked) ~ .fl-cat-count{opacity:.5}
/* Les anciennes règles « lien actif = fond bleu » (section 9) ne doivent plus
   peindre la ligne : la case cochée se voit par le rond. */
.fl-fcouleurs .is-active a,.fl-fcouleurs .is-active label{background:transparent;color:inherit}

/* --- 5. Sur téléphone : le panneau monte depuis le bas ------------------- */
@media(max-width:600px){
  dialog.fl-filters{
    inset:auto 0 0 0;width:100vw;height:auto;max-height:92dvh;
    border-radius:var(--fl-r-lg) var(--fl-r-lg) 0 0;
    box-shadow:0 -18px 60px rgba(52,48,94,.2)}
  dialog.fl-filters[open]{animation:fl-glisse-haut .38s var(--fl-ease)}
  .fl-filters__corps{padding:0 1.1rem 1rem}
  .fl-filters__head{padding:1rem .8rem .8rem 1.1rem}
  .fl-filters__pied{padding:.8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom))}
  .fl-fcouleurs{grid-template-columns:1fr}
  .fl-shop-bar .fl-filters-toggle span:not(.fl-badge){font-size:.84rem}
  /* Le tri prend toute une ligne ; « En stock » et « Filtres » se partagent la suivante. */
  .fl-shop-bar .woocommerce-ordering{flex:1 0 100%}
  .fl-shop-bar .woocommerce-ordering select{width:100%}
}
@media(prefers-reduced-motion:reduce){
  dialog.fl-filters[open],dialog.fl-filters::backdrop{animation:none}
}

/* --- 6. Les cartes : les coloris en petits ronds -------------------------- */
.woocommerce ul.products li.product .fl-card-colors{
  margin:0 0 .45rem !important;padding:0;background:none;border-radius:0;
  align-self:stretch;font-size:0;line-height:0}
/* Centrée : quand il y a beaucoup de coloris, la deuxième ligne, plus courte,
   se pose au milieu au lieu de rester collée à gauche (demande du 16 sept.). */
.fl-card-colors__list{
  list-style:none;margin:0;padding:3px 2px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.fl-card-colors__item{margin:0;padding:0;line-height:0}
.fl-card-colors__item a{
  display:block;width:22px;height:22px;padding:2px;box-sizing:border-box;
  border:2px solid transparent;border-radius:50%;position:relative;
  transition:transform .18s var(--fl-ease),border-color .18s var(--fl-ease)}
/* Zone tactile élargie sans grossir le dessin (règle des 44 px, du 14 août) :
   ⚠️ `position:relative` sur le lien, sinon le pseudo-élément se cale ailleurs. */
.fl-card-colors__item a::after{content:"";position:absolute;inset:-7px;border-radius:50%}
.fl-card-colors__dot{
  display:block;width:100%;height:100%;border-radius:50%;
  background:var(--fl-teinte,#d9d4e6);
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.14)}
.fl-card-colors__dot--img{background-size:cover;background-position:center}
.fl-card-colors__item a:hover{transform:scale(1.18);border-color:var(--fl-blue-200)}
.fl-card-colors__item.is-current a{border-color:var(--fl-ink);cursor:default}
.fl-card-colors__item a:focus-visible{outline:2px solid var(--fl-primary);outline-offset:1px}
/* Coloris épuisé : le rond reste PLEIN (Vianney, 16 sept. : « fais-moi des ronds
   pleins »), juste un peu plus pâle ; l'info-bulle dit « épuisé ». Essais écartés :
   une barre en diagonale (hachurait toute la carte quand une gamme entière attend
   sa production) puis un anneau creux (il ne les aimait pas). */
.fl-card-colors__item.is-out .fl-card-colors__dot{opacity:.55}
/* Un produit épuisé ne doit pas estomper la carte deux fois : les ronds gardent
   leur couleur (seul le cadre de la photo est atténué, section 8). */
.woocommerce ul.products li.product.outofstock .fl-card-colors{opacity:1}
/* Petit fondu de la photo quand on change de coloris sur place (flowly.js). */
@keyframes fl-fondu-carte{from{opacity:.25;transform:scale(.97)}}
.woocommerce ul.products li.product.fl-change .astra-shop-thumbnail-wrap img{
  animation:fl-fondu-carte .38s var(--fl-ease)}

/* ==========================================================================
   62. CARTES ÉPURÉES : 5 PAR LIGNE, PHOTO PLEIN CADRE, TITRE EN DEUX LIGNES,
       BOUTON DANS LA CARTE (16 septembre 2026)

   Vianney : « on va épurer : 5 objets par ligne, une image plus grande, un
   bouton "ajouter au panier" plus intégré, un titre plus joli, mieux intégré ».

   La photo occupe toute la largeur de la carte (plus de marge intérieure ni de
   cadre arrondi dans le cadre), les ronds de coloris viennent juste dessous,
   puis le titre en deux lignes (gamme / coloris, voir inc/famille.php §7), et
   enfin une ligne « prix à gauche, bouton à droite ». Le bouton n'est plus une
   barre pleine largeur : une petite pilule discrète qui se remplit au survol.
   Les règles antérieures (sections 8, 20, 23, 29) sont écrasées ici, jamais
   supprimées.
   ========================================================================== */

/* --- 1. Cinq colonnes sur la boutique (l'accueil garde ses quatre) -------
   ⚠️ `.fl-liste-produits` et `.woocommerce` sont TOUTES DEUX sur <body> : un
   sélecteur « .fl-liste-produits .woocommerce » ne matche rien (6 colonnes
   mesurées au lieu de 5 avant correction). D'où `body.fl-liste-produits`. */
body.fl-liste-produits ul.products{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:1.25rem !important}
@media(max-width:1200px){
  body.fl-liste-produits ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:921px){
  body.fl-liste-produits ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:1rem !important}
}
@media(max-width:600px){
  body.fl-liste-produits ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.75rem !important}
}

/* --- 2. La carte : plus de rembourrage, la photo touche les bords -------- */
.woocommerce ul.products li.product{
  padding:0 !important;border-radius:24px;
  border-color:var(--fl-line-soft);background:#fff}
.woocommerce ul.products li.product:hover{border-color:var(--fl-blue-100)}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position:relative;overflow:hidden;border-radius:23px 23px 0 0;background:#fff}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .fl-vignette__survol{
  border-radius:0;padding:0;margin:0 !important}
.woocommerce ul.products li.product .fl-vignette{border-radius:0}
/* Le zoom au survol reste, mais plus doux : la photo est déjà grande. */
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}

/* --- 3. Les ronds, juste sous la photo ------------------------------------ */
.woocommerce ul.products li.product .fl-card-colors{
  margin:0 !important;padding:.7rem .85rem 0 !important}

/* --- 4. Le résumé : titre, puis « prix | bouton » sur la dernière ligne ---- */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:1fr auto;
  grid-template-areas:"titre titre" "prix bouton";
  align-items:center;column-gap:.6rem;row-gap:.6rem;
  padding:.65rem .95rem .95rem;flex:1 1 auto}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .ast-loop-product__link{
  grid-area:titre;align-self:start;display:block}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .price{
  grid-area:prix;margin:0 !important;font-size:1rem !important}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button{
  grid-area:bouton;margin:0 !important;width:auto}
/* « Voir le panier », ajouté par WooCommerce après un ajout : sous la ligne. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart{
  grid-column:1 / -1;margin:0 !important;width:100%}

/* Le titre : la gamme en foncé, le coloris en dessous en discret. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:flex;flex-direction:column;gap:.12rem;
  font-size:.92rem !important;font-weight:600 !important;line-height:1.3 !important;
  letter-spacing:-.01em;margin:0 !important}
.fl-card-titre__gamme{
  color:var(--fl-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fl-card-titre__coloris{
  font-size:.79rem;font-weight:500;color:var(--fl-muted);letter-spacing:.005em}
.woocommerce ul.products li.product .ast-loop-product__link:hover .fl-card-titre__gamme{
  color:var(--fl-primary)}

/* Le bouton : une pilule discrète, qui se remplit au survol. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button{
  min-height:40px;padding:.45rem .95rem !important;
  font-size:.8rem !important;font-weight:600 !important;line-height:1.2 !important;
  background:var(--fl-bg-soft) !important;color:var(--fl-primary) !important;
  border:1px solid var(--fl-blue-100) !important;border-radius:999px !important;
  box-shadow:none !important;white-space:nowrap;
  transition:background .2s var(--fl-ease),color .2s var(--fl-ease),
             border-color .2s var(--fl-ease),box-shadow .2s var(--fl-ease) !important}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{
  background:var(--fl-primary) !important;color:#fff !important;
  border-color:var(--fl-primary) !important;transform:none;
  box-shadow:0 6px 16px rgba(85,101,230,.22) !important}
.woocommerce ul.products li.product .button.loading{opacity:.6}
/* Épuisé : « Voir la fiche » en contour neutre. */
.woocommerce ul.products li.product.outofstock .button{
  background:transparent !important;color:var(--fl-muted) !important;
  border-color:var(--fl-line) !important}
.woocommerce ul.products li.product.outofstock .button:hover{
  background:var(--fl-bg-soft) !important;color:var(--fl-ink) !important;
  border-color:var(--fl-line) !important;box-shadow:none !important}
/* ⚠️ Règle des 44 px (14 août) : la pilule fait 40 px, on complète la cible
   au toucher par un pseudo-élément — le lien est déjà en position:relative
   via inline-flex ? non : on le pose explicitement. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button{position:relative}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button::after{
  content:"";position:absolute;inset:-3px -2px}

/* --- 5. Téléphone : deux colonnes, prix et bouton empilés ------------------ */
@media(max-width:600px){
  .woocommerce ul.products li.product{border-radius:18px}
  .woocommerce ul.products li.product .astra-shop-thumbnail-wrap{border-radius:17px 17px 0 0}
  .woocommerce ul.products li.product .fl-card-colors{padding:.55rem .6rem 0 !important}
  .woocommerce ul.products li.product .astra-shop-summary-wrap{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:1fr auto auto;
    grid-template-areas:"titre" "prix" "bouton";
    row-gap:.45rem;padding:.55rem .7rem .75rem}
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .button{width:100%;min-height:42px}
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .price{font-size:.95rem !important}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.86rem !important}
}

/* ==========================================================================
   63. FILTRES À GAUCHE (VISIBLES, REPLIABLES), RONDS SOUS LE TITRE, MESSAGE
       « AJOUTÉ AU PANIER » RECENTRÉ (16 septembre 2026, soir)

   Vianney : « Léa préférait les filtres à gauche, les laisser apparents,
   quitte à les cacher si on veut ». Le <dialog> du panneau sert donc aussi de
   colonne de gauche : ouvert en ligne (attribut `open`, sans showModal) sur
   ordinateur, fenêtre modale sur téléphone (classe `is-modal` posée par
   flowly.js). « Masquer les filtres » retire la colonne ; le choix est mémorisé.
   ========================================================================== */

/* --- 1. La colonne de gauche ---------------------------------------------- */
@media(min-width:922px){
  .fl-shop.fl-shop--filtres{
    display:grid;grid-template-columns:262px minmax(0,1fr);gap:1.6rem;align-items:start}
  /* Le <dialog> ouvert « en ligne » : plus de position fixe ni de fond assombri. */
  dialog.fl-filters[open]:not(.is-modal){
    position:sticky;top:1rem;inset:auto;
    width:auto;max-width:none;height:auto;max-height:calc(100dvh - 2rem);
    margin:0;padding:0;
    border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
    box-shadow:var(--fl-sh-1);animation:none;
    display:flex;flex-direction:column}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head{padding:1rem .8rem .7rem 1.2rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head h2{font-size:1.02rem !important}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__corps{padding:0 1.2rem 1rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied{padding:.6rem 1.2rem 1.1rem;box-shadow:0 -10px 20px rgba(52,48,94,.045)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied .fl-fappliquer{min-height:46px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs{grid-template-columns:1fr;gap:0}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs label{min-height:40px;padding:.2rem .45rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats a{padding:.4rem .6rem}
  /* La croix du panneau masque la colonne : même geste que le bouton de la barre. */
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close{width:38px;height:38px}
  /* Avec la colonne, la grille passe à quatre cartes ; cinq sans elle. */
  body.fl-liste-produits .fl-shop--filtres ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(min-width:1500px){
  body.fl-liste-produits .fl-shop--filtres ul.products{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}
@media(min-width:922px) and (max-width:1200px){
  body.fl-liste-produits .fl-shop--filtres ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
/* Sur téléphone, le PHP rend le panneau `open` : tant que flowly.js ne l'a pas
   refermé, il ne doit pas s'afficher en bloc dans la page. Seule la fenêtre
   modale (is-modal) se voit. */
@media(max-width:921px){
  html.fl-js dialog.fl-filters[open]:not(.is-modal){display:none}
}
/* Le bouton de la barre garde son icône ; son texte change selon l'état
   (« Masquer / Afficher les filtres » sur ordinateur, « Filtres » sur téléphone). */
.fl-filters-toggle[aria-expanded="true"] svg{color:var(--fl-primary)}

/* --- 2. Les ronds SOUS le titre : titres alignés, une seule ligne de ronds -- */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"titre titre" "ronds ronds" "prix bouton";
  row-gap:.5rem}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .fl-card-colors,
.woocommerce ul.products li.product .fl-card-colors{
  grid-area:ronds;align-self:start;
  margin:0 !important;padding:0 !important}
.fl-card-colors__list{justify-content:flex-start;padding:2px 0 2px 2px;gap:5px}
/* Les ronds au-delà du huitième attendent le clic sur « +N ». */
.fl-card-colors__item.is-plus{display:none}
.fl-card-colors.is-open .fl-card-colors__item.is-plus{display:block}
.fl-card-colors.is-open .fl-card-colors__more{display:none}
.fl-card-colors__more{margin:0;padding:0;line-height:0}
.fl-card-colors__plus,
.fl-card-colors__plus:hover,
.fl-card-colors__plus:focus{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .4rem;margin:0;
  border:1px solid var(--fl-blue-100) !important;border-radius:999px !important;
  background:var(--fl-bg-soft) !important;color:var(--fl-primary) !important;
  font-family:var(--fl-font);font-size:.68rem;font-weight:700;line-height:1;
  box-shadow:none !important;cursor:pointer;position:relative}
.fl-card-colors__plus:hover{background:var(--fl-blue-100) !important}
.fl-card-colors__plus::after{content:"";position:absolute;inset:-7px}
.fl-card-colors__plus:focus-visible{outline:2px solid var(--fl-primary);outline-offset:1px}
@media(max-width:600px){
  .woocommerce ul.products li.product .astra-shop-summary-wrap{
    grid-template-rows:auto 1fr auto auto;
    grid-template-areas:"titre" "ronds" "prix" "bouton"}
}

/* --- 3. « 4 × … ont été ajoutés à votre panier » : texte et bouton alignés -- */
.woocommerce-message,.woocommerce-info{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;
  padding:.8rem 1.1rem .8rem 3rem !important;line-height:1.45}
.woocommerce-message::before,.woocommerce-info::before{
  top:50% !important;transform:translateY(-50%)}
.woocommerce-message .button,.woocommerce-info .button{
  float:none !important;margin:0 0 0 auto !important;order:2;flex:0 0 auto}
@media(max-width:600px){
  .woocommerce-message .button,.woocommerce-info .button{margin-left:0 !important;width:100%;text-align:center}
}

/* ==========================================================================
   64. LA COLONNE DE FILTRES, COMPACTE ET STRUCTURÉE (16 septembre 2026, nuit)

   Vianney : « tu peux faire mieux dans les filtres à gauche, plus compact,
   plus structuré ». Chaque rubrique est un <details> ouvert : un petit titre
   en capitales avec un chevron, repliable d'un clic. Les lignes descendent de
   44 à 34-36 px dans la colonne (on y est à la souris ; la fenêtre du téléphone
   garde ses 44 px), la catégorie active est une pastille douce plutôt qu'un
   pavé bleu, les couleurs tiennent sur deux colonnes sans compteur.
   ========================================================================== */

/* --- Les volets ------------------------------------------------------------ */
details.fl-fgroup{border-top:0;padding:.35rem 0 0;margin:.35rem 0 0}
details.fl-fgroup > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .1rem;margin:0 0 .2rem;
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fl-muted);border-radius:var(--fl-r-sm);
  transition:color .18s var(--fl-ease)}
details.fl-fgroup > summary::-webkit-details-marker{display:none}
details.fl-fgroup > summary:hover{color:var(--fl-ink)}
details.fl-fgroup > summary:focus-visible{outline:2px solid var(--fl-primary);outline-offset:2px}
/* Le chevron : un angle dessiné en CSS, qui pivote quand le volet se ferme. */
details.fl-fgroup > summary::after{
  content:"";width:7px;height:7px;flex:0 0 auto;margin-right:.35rem;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-2px);opacity:.7;
  transition:transform .2s var(--fl-ease)}
details.fl-fgroup:not([open]) > summary::after{transform:rotate(-45deg) translateY(1px)}
.fl-fgroup--recherche{border-top:0;padding:0;margin:0}
.fl-fcouleurs__cadre{border:0;padding:0;margin:0;min-width:0}

/* --- Dans la colonne (ordinateur) : tout se resserre ---------------------- */
@media(min-width:922px){
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head{padding:.8rem .7rem .35rem 1.05rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head h2{font-size:.98rem !important}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close{width:34px;height:34px}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close::before{width:13px;height:13px}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__corps{padding:0 1.05rem .5rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__corps .fl-fgroup:first-of-type{padding-top:0;margin-top:0}
  dialog.fl-filters[open]:not(.is-modal) .fl-fsearch input[type=search]{
    min-height:40px;padding:.45rem .7rem .45rem 2rem !important;font-size:.86rem !important}
  dialog.fl-filters[open]:not(.is-modal) .fl-fsearch svg{left:.7rem;width:14px;height:14px}
  /* Catégories : lignes basses, pastille douce pour l'active. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats{gap:.05rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats a{
    min-height:34px;padding:.25rem .6rem;font-size:.86rem;border-radius:999px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .is-active a{
    background:var(--fl-blue-50);color:var(--fl-primary);font-weight:600}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .is-active .fl-cat-count{
    background:var(--fl-blue-100);color:var(--fl-primary)}
  dialog.fl-filters[open]:not(.is-modal) .fl-cat-count{font-size:.68rem;padding:.02rem .4rem}
  /* Couleurs : deux colonnes, sans compteur, lignes de 32 px. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs__tous{font-size:.7rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-lien-discret{min-height:30px;padding:.4rem .3rem !important;font-size:.7rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs{grid-template-columns:1fr 1fr;gap:0 .3rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs label{
    min-height:32px;padding:.1rem .4rem;gap:.45rem;font-size:.84rem;border-radius:999px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs__dot{width:16px;height:16px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:checked ~ .fl-fcouleurs__dot::after{
    left:5px;top:2.5px;width:3.5px;height:7px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs .fl-cat-count{display:none}
  /* Prix */
  dialog.fl-filters[open]:not(.is-modal) .fl-fprice__row input{padding:.42rem .5rem !important;font-size:.84rem !important}
  dialog.fl-filters[open]:not(.is-modal) .fl-fhint{font-size:.7rem}
  /* Le pied */
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied{padding:.45rem 1.05rem .95rem;box-shadow:none}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied .fl-fappliquer{
    min-height:42px;padding:.6rem 1.2rem !important;font-size:.9rem !important}
}

/* « Tout cocher · Tout décocher » : une petite ligne à droite, SOUS le titre
   « Couleur » (posés sur la même ligne, ils mordaient le titre : mesuré). */
.fl-fcouleurs__tous{
  float:none;display:flex;justify-content:flex-end;align-items:center;gap:.3rem;
  margin:-.15rem 0 .15rem}
dialog.fl-filters .fl-fcouleurs__tous{margin:-.15rem 0 .15rem}
.fl-fgroup--couleurs .fl-fcouleurs{clear:none}

/* ==========================================================================
   65. RETOURS DU 16 SEPTEMBRE (nuit) : BOUTON-ICÔNE SUR LES CARTES, QUANTITÉ
       ALIGNÉE SUR LA FICHE, COLONNE DE FILTRES « COMME LES GRANDS SITES »
   ========================================================================== */

/* --- 1. Cartes : le bouton devient une icône ronde -------------------------
   Vianney : « défaut entre le prix et le bouton, peut-être juste mettre un logo
   pour "ajouter au panier" ». Sur les cartes étroites, le texte mordait le prix.
   Un rond de 42 px avec un panier dessiné : le prix a toute la place, et le
   libellé reste dans le bouton pour les lecteurs d'écran (taille 0, pas masqué). */
:root{
  --fl-icon-panier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.3 11.2a1 1 0 0 0 1 .8h9.6a1 1 0 0 0 1-.8L21 8H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17.5' cy='20' r='1.3'/%3E%3Cpath d='M13.5 9.6v4.2M11.4 11.7h4.2'/%3E%3C/svg%3E");
  --fl-icon-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button:hover{
  width:42px;height:42px;min-height:42px;padding:0 !important;
  font-size:0 !important;line-height:0 !important;
  border-radius:50% !important;border:0 !important;
  background:var(--fl-primary) !important;color:#fff !important;
  justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(85,101,230,.22) !important;
  transition:transform .2s var(--fl-ease),background-color .2s var(--fl-ease),box-shadow .2s var(--fl-ease) !important}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button::before{
  content:"";width:20px;height:20px;background:#fff;
  -webkit-mask:var(--fl-icon-panier) center/contain no-repeat;
  mask:var(--fl-icon-panier) center/contain no-repeat}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button:hover{
  background:var(--fl-primary-dark) !important;transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 18px rgba(85,101,230,.3) !important}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button.loading{opacity:.6}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button::after{
  content:"";position:absolute;inset:-3px;border-radius:50%}
/* Épuisé : « Voir la fiche » devient une flèche sur fond pâle. */
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button:hover{
  background:var(--fl-bg-soft) !important;box-shadow:none !important}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button::before{
  background:var(--fl-primary);
  -webkit-mask:var(--fl-icon-fleche) center/contain no-repeat;
  mask:var(--fl-icon-fleche) center/contain no-repeat}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button:hover{
  background:var(--fl-blue-100) !important}
/* Le prix retrouve sa place. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .price{font-size:1.02rem !important;white-space:nowrap}
/* « Voir le panier », ajouté après un ajout : en petit lien sous la ligne. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart{
  font-size:.8rem !important;padding:.4rem .8rem !important;min-height:0}
@media(max-width:600px){
  /* Sur téléphone, prix et bouton se partagent la dernière ligne aussi. */
  .woocommerce ul.products li.product .astra-shop-summary-wrap{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"titre titre" "ronds ronds" "prix bouton"}
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .button{width:40px;height:40px;min-height:40px}
}

/* --- 2. Fiche produit : quantité et bouton à la même hauteur ---------------
   Mesuré : la quantité faisait 63 px (rembourrage de .75rem hérité du champ),
   le bouton 50. Vianney : « pas alignés, ça fait pas pro du tout ». */
.single-product div.product form.cart{align-items:center;gap:.7rem}
.single-product div.product form.cart .fl-qty{height:52px;align-items:center}
.single-product div.product form.cart .fl-qty__btn{min-height:50px;height:50px;width:46px;flex-basis:46px}
.single-product div.product form.cart .quantity input,
.single-product div.product form.cart .fl-qty input.qty{
  height:50px !important;min-height:50px;padding:0 !important;line-height:50px}
.single-product div.product form.cart button.button{
  min-height:52px;height:52px;padding:0 1.6rem !important;display:inline-flex;align-items:center;justify-content:center}

/* --- 3. La colonne de filtres, façon grands sites -----------------------------
   Vianney : « toujours pas ouf, fais un truc plus pro, copie sur les meilleurs
   sites ». Ce que font Nike, Zalando ou Everlane : PAS de carte autour des
   filtres — la colonne fait partie de la page ; des rubriques en gras, normales
   (pas de petites capitales), séparées par un trait très pâle, avec un chevron ;
   des listes nues sans pastilles ; des couleurs en grille de ronds avec leur
   nom dessous. Les traits sont ici volontaires : ils structurent une colonne
   d'outils, pas une rubrique de page (règle des vagues). */
@media(min-width:922px){
  dialog.fl-filters[open]:not(.is-modal){
    border:0;box-shadow:none;background:transparent;border-radius:0;
    top:.6rem;max-height:calc(100dvh - 1.2rem)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head{
    padding:.55rem 0 .7rem;align-items:center}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head h2{font-size:1.05rem !important;letter-spacing:-.01em}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__reset{font-size:.78rem;color:var(--fl-primary)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close,
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close:hover{
    width:30px;height:30px;background:transparent !important;transform:none}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close::before{width:12px;height:12px;background:var(--fl-muted)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close:hover::before{background:var(--fl-ink)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__corps{padding:0 .1rem .3rem 0;scrollbar-width:none}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__corps::-webkit-scrollbar{display:none}

  /* Recherche : un champ discret, tout en haut. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fgroup--recherche{margin:0 0 .4rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fsearch input[type=search]{
    min-height:42px;border-radius:12px !important;background:#fff !important;
    border:1px solid var(--fl-line) !important;font-size:.88rem !important}

  /* Rubriques : gras, normales, un trait pâle au-dessus, chevron à droite. */
  dialog.fl-filters[open]:not(.is-modal) details.fl-fgroup{
    border-top:1px solid var(--fl-line);padding:.15rem 0 .55rem;margin:0}
  dialog.fl-filters[open]:not(.is-modal) details.fl-fgroup > summary{
    font-size:.92rem;font-weight:700;letter-spacing:-.005em;text-transform:none;
    color:var(--fl-ink);padding:.85rem 0 .6rem;margin:0}
  dialog.fl-filters[open]:not(.is-modal) details.fl-fgroup > summary::after{
    width:8px;height:8px;opacity:.55;margin-right:.3rem}
  dialog.fl-filters[open]:not(.is-modal) details.fl-fgroup:not([open]){padding-bottom:.15rem}

  /* Catégories : une liste nue, l'active en gras bleu. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats{gap:0}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats a,
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats a:hover{
    min-height:34px;padding:.3rem 0;border-radius:0;background:transparent;
    font-size:.9rem;font-weight:500;color:var(--fl-body)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats a:hover{color:var(--fl-ink)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .is-active a{color:var(--fl-primary);font-weight:700;background:transparent}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .fl-cat-count,
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .is-active .fl-cat-count{
    background:transparent;color:var(--fl-muted);font-size:.8rem;font-weight:500;padding:0}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcats .fl-sub{padding-left:.9rem}

  /* Couleurs : une grille de ronds, le nom dessous. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs__tous{margin:-.35rem 0 .45rem;font-size:.72rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem .3rem}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs label,
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs label:hover{
    flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;
    min-height:0;padding:.25rem 0;background:transparent;border-radius:12px;
    font-size:.72rem;font-weight:500;text-align:center;line-height:1.15}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs__dot{
    width:30px;height:30px;
    box-shadow:inset 0 0 0 1px rgba(52,48,94,.14),0 0 0 2px #fff,0 0 0 2px #fff;
    transition:opacity .18s var(--fl-ease),filter .18s var(--fl-ease),transform .18s var(--fl-ease),box-shadow .18s var(--fl-ease)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs label:hover .fl-fcouleurs__dot{transform:scale(1.06)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:checked ~ .fl-fcouleurs__dot{
    box-shadow:inset 0 0 0 1px rgba(52,48,94,.14),0 0 0 2px #fff,0 0 0 3.5px var(--fl-primary)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:checked ~ .fl-fcouleurs__dot::after{
    left:10.5px;top:6.5px;width:5px;height:10px}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:not(:checked) ~ .fl-fcouleurs__dot{opacity:.3}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs__nom{flex:0 0 auto;color:var(--fl-body)}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:checked ~ .fl-fcouleurs__nom{color:var(--fl-ink);font-weight:600}
  dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs .fl-cat-count{display:none}

  /* Prix : deux champs sobres. */
  dialog.fl-filters[open]:not(.is-modal) .fl-fprice__row input{
    min-height:40px;border-radius:10px !important;background:#fff !important;
    border:1px solid var(--fl-line) !important;font-size:.86rem !important}
  dialog.fl-filters[open]:not(.is-modal) .fl-fhint{font-size:.72rem;margin-top:.25rem}

  /* Le bouton, plein et simple, sans le pied ombré. */
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied{
    padding:.9rem 0 .6rem;box-shadow:none;background:transparent;
    border-top:1px solid var(--fl-line)}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied .fl-fappliquer{
    min-height:46px;border-radius:14px !important;font-size:.92rem !important}
  /* La colonne garde 250 px, sans marge intérieure de carte. */
  .fl-shop.fl-shop--filtres{grid-template-columns:250px minmax(0,1fr);gap:2rem}
}

/* ==========================================================================
   66. FILTRES EN DIRECT, BOUTON « MASQUER LES FILTRES » FAÇON NIKE
   (16 septembre 2026, nuit)

   Vianney, capture Nike a l'appui : « "Masquer / Afficher les filtres" en haut,
   c'est plus coherent que la croix dans la colonne ». Et : « les filtres doivent
   modifier les produits en temps reel ». La croix et le bouton « Voir les
   produits » disparaissent donc de la colonne (ils restent dans la fenetre du
   telephone, ou ils ferment la fenetre) ; la barre du haut lit, de gauche a
   droite : En stock · Masquer les filtres · Trier.
   ========================================================================== */
@media(min-width:922px){
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__close{display:none}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__pied{display:none}
  dialog.fl-filters[open]:not(.is-modal) .fl-filters__head{padding-right:0}
}
.fl-shop-bar .fl-stock-switch{order:1}
.fl-shop-bar .fl-filters-toggle{order:2}
.fl-shop-bar .woocommerce-ordering{order:3}
/* Le bouton, en texte + icone comme chez Nike : plus de pilule. */
.fl-shop-bar .fl-filters-toggle,
.fl-shop-bar .fl-filters-toggle:hover,
.fl-shop-bar .fl-filters-toggle:focus,
.fl-shop-bar .fl-filters-toggle:active,
.fl-shop-bar .fl-filters-toggle[aria-expanded="true"]{
  background:transparent !important;border-color:transparent !important;
  padding:0 .4rem;color:var(--fl-ink) !important}
.fl-shop-bar .fl-filters-toggle:hover span:not(.fl-badge){text-decoration:underline;text-underline-offset:3px}
.fl-shop-bar .fl-filters-toggle svg{order:2;color:var(--fl-ink)}
.fl-shop-bar .fl-filters-toggle .fl-badge{order:3}
/* La zone des produits pendant un rechargement en direct. */
.fl-shop-main{transition:opacity .2s var(--fl-ease)}
.fl-shop-main.is-loading{opacity:.5;pointer-events:none}
.fl-shop-main.is-loading .fl-more{visibility:hidden}

/* Carrousel de l'accueil : le coloris sous le nom, comme sur les cartes (16 sept. 2026). */
.fl-carr__coloris{display:block;font-size:.8rem;font-weight:500;color:var(--fl-muted);margin:-.15rem 0 .25rem}

/* ==========================================================================
   67. RETOURS DU 17 SEPTEMBRE (matin) : COLONNE SOUS L'EN-TÊTE, BOUTON-ICÔNE
       PLUS DISCRET, QUANTITÉ ET BOUTON VRAIMENT ALIGNÉS
   ========================================================================== */

/* --- 1. La colonne suit le défilement… SOUS l'en-tête fixe -----------------
   Mesuré : elle collait bien (position:sticky), mais à `top:0` — un `!important`
   de la section 61 destiné à la fenêtre modale — donc CACHÉE derrière l'en-tête
   fixe de 70 px. Vianney : « les filtres doivent descendre en même temps qu'on
   scroll ». On la cale sous l'en-tête, et sa hauteur maximale suit. */
@media(min-width:922px){
  dialog.fl-filters[open]:not(.is-modal){
    top:calc(var(--fl-entete-h,70px) + .9rem) !important;
    max-height:calc(100dvh - var(--fl-entete-h,70px) - 1.8rem)}
}

/* --- 2. Le bouton-icône des cartes : plus petit, plus léger ----------------
   Vianney : « trop gros, trop imposant ». 36 px, fond bleu très pâle, icône
   bleue, pas d'ombre ; il se remplit de bleu au survol. Zone tactile gardée à
   44 px par le pseudo-élément. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button:hover{
  width:36px;height:36px;min-height:36px;
  background:var(--fl-blue-50) !important;color:var(--fl-primary) !important;
  border:1px solid var(--fl-blue-100) !important;box-shadow:none !important}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button::before{
  width:17px;height:17px;background:var(--fl-primary)}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button::after{inset:-4px}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button:hover{
  background:var(--fl-primary) !important;border-color:var(--fl-primary) !important;
  transform:none;box-shadow:none !important}
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button:hover::before{background:#fff}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button:hover{
  background:transparent !important;border-color:var(--fl-line) !important}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button::before{background:var(--fl-muted)}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button:hover{
  background:var(--fl-bg-soft) !important}
.woocommerce ul.products li.product.outofstock .astra-shop-summary-wrap > .button:hover::before{background:var(--fl-ink)}
@media(max-width:600px){
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .button{width:34px;height:34px;min-height:34px}
}

/* --- 3. Fiche : la marge basse du bouton le décalait de 8 px -----------------
   Mesuré : quantité et bouton font tous deux 52 px, mais le bouton portait une
   marge basse (Astra) qui gonflait sa boîte à 68 px : centré sur 68, il
   partait 8 px plus haut. */
.single-product div.product form.cart button.button{margin:0 !important}
.single-product div.product form.cart .quantity,
.single-product div.product form.cart .fl-qty{margin:0 !important}

/* ==========================================================================
   68. LE CURSEUR DE PRIX À DEUX POIGNÉES (17 septembre 2026)
   Deux <input type="range"> transparents empilés sur une piste dessinée en
   CSS ; seules les poignées reçoivent les clics (pointer-events), la piste
   colorée entre elles suit les variables --fl-pmin / --fl-pmax posées par
   flowly.js. Sans JavaScript : les deux champs numériques restent visibles.
   ========================================================================== */
.fl-fprice__curseur{position:relative;height:36px;margin:.3rem 8px .1rem}
.fl-fprice__piste{
  position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  border-radius:2px;background:var(--fl-line)}
.fl-fprice__plage{
  position:absolute;top:0;bottom:0;border-radius:2px;background:var(--fl-primary);
  left:var(--fl-pmin,0%);right:calc(100% - var(--fl-pmax,100%))}
.fl-fprice__poignee{
  position:absolute;left:-8px;right:-8px;top:0;width:calc(100% + 16px);height:36px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  pointer-events:none;outline:none}
.fl-fprice__poignee::-webkit-slider-runnable-track{background:transparent;border:0;height:36px}
.fl-fprice__poignee::-moz-range-track{background:transparent;border:0;height:36px}
.fl-fprice__poignee::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;cursor:grab;
  width:20px;height:20px;border-radius:50%;margin-top:8px;
  background:#fff;border:2px solid var(--fl-primary);
  box-shadow:0 2px 6px rgba(52,48,94,.18);
  transition:transform .15s var(--fl-ease),box-shadow .15s var(--fl-ease)}
.fl-fprice__poignee::-moz-range-thumb{
  pointer-events:auto;cursor:grab;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--fl-primary);
  box-shadow:0 2px 6px rgba(52,48,94,.18)}
.fl-fprice__poignee:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
.fl-fprice__poignee:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--fl-blue-100)}
.fl-fprice__poignee:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--fl-blue-100)}
/* La poignée « max » est au-dessus par défaut ; quand les deux sont collées à
   droite, on remonte la « min » pour qu'elle reste attrapable. */
.fl-fprice__poignee--max{z-index:2}
.fl-fprice__curseur.is-min-devant .fl-fprice__poignee--min{z-index:3}
.fl-fprice__valeurs{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin:.2rem 0 0;font-size:.9rem;font-weight:700;color:var(--fl-ink);font-variant-numeric:tabular-nums}
.fl-fprice__tiret{color:var(--fl-muted);font-weight:400}
/* Avec JavaScript, les champs et la ligne « Catalogue de … à … » deviennent
   redondants : le curseur les remplace. */
html.fl-js .fl-fprice__row,html.fl-js .fl-fprice .fl-fhint{display:none}
html:not(.fl-js) .fl-fprice__curseur,html:not(.fl-js) .fl-fprice__valeurs{display:none}

/* ==========================================================================
   69. EN-TÊTE ENTRE 922 ET 1200 PX : LE MENU PASSAIT SUR DEUX LIGNES
   Mesuré à 1024 px : cinq entrées = 496 px pour une colonne de gauche de
   397 px (les trois colonnes d'Astra sont égales). On donne plus de place à
   la colonne du menu qu'à celle des icônes, on resserre un peu les entrées,
   et on interdit le retour à la ligne.
   ========================================================================== */
@media(min-width:922px) and (max-width:1200px){
  /* ⚠️ L'en-tête d'Astra est une GRILLE (1fr auto 1fr), pas un flex : c'est la
     grille qu'il faut rééquilibrer — les `flex` posés d'abord n'avaient aucun
     effet (mesuré : 397 px des deux côtés). */
  .site-header .ast-builder-grid-row-has-sides{grid-template-columns:minmax(0,1.6fr) auto minmax(0,1fr) !important}
  .site-header .site-header-primary-section-left{min-width:0}
  /* ⚠️ La feuille dynamique d'Astra pose ces mêmes propriétés en `!important`
     et se charge APRÈS la nôtre : à spécificité égale elle gagne. L'identifiant
     du bandeau d'ordinateur fait la différence. */
  #ast-desktop-header .main-header-menu > li > a,
  #ast-desktop-header .main-header-menu > li > .menu-link{
    padding-left:6px !important;padding-right:6px !important;font-size:.74rem !important;white-space:nowrap}
  .site-header .main-header-menu{flex-wrap:nowrap}
}

/* ==========================================================================
   70. PANIER SUR TÉLÉPHONE : PLUS DE DOUBLE « EXPÉDITION », PLUS DE DEUX-POINTS
   (17 septembre 2026)
   Sous 768 px, woocommerce-smallscreen.css réécrit chaque cellule des totaux avec
   un `::before{content:attr(data-title)": "}`. La ligne d'expédition affichait
   donc « Expédition » (notre titre) puis « Expédition: » (le sien), et les
   autres lignes gagnaient un deux-points absent sur ordinateur.
   ========================================================================== */
@media(max-width:768px){
  .woocommerce-cart .cart_totals table td[data-title]::before{content:attr(data-title)}
  .woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td[data-title]::before{display:none}
}

/* ==========================================================================
   71. LA FENÊTRE DE FILTRES (TÉLÉPHONE, TABLETTE) REPREND LE STYLE DE LA COLONNE
   (17 septembre 2026)
   Même produit, deux habillages : la fenêtre gardait la catégorie active en
   gros pavé bleu et les couleurs en liste, quand la colonne d'ordinateur est
   passée aux rubriques grasses, à la liste nue et à la grille de ronds. On
   aligne la fenêtre sur la colonne — seuls le fond assombri et le bouton de
   fermeture restent propres à la fenêtre.
   ========================================================================== */
dialog.fl-filters.is-modal details.fl-fgroup{border-top:1px solid var(--fl-line);padding:.15rem 0 .55rem;margin:0}
dialog.fl-filters.is-modal details.fl-fgroup > summary{
  font-size:.95rem;font-weight:700;text-transform:none;letter-spacing:-.005em;
  color:var(--fl-ink);padding:.85rem 0 .6rem;margin:0}
dialog.fl-filters.is-modal .fl-fgroup--recherche{margin:0 0 .4rem}
dialog.fl-filters.is-modal .fl-fcats{gap:0}
dialog.fl-filters.is-modal .fl-fcats a,
dialog.fl-filters.is-modal .fl-fcats a:hover{
  min-height:44px;padding:.5rem 0;border-radius:0;background:transparent;
  font-size:.95rem;font-weight:500;color:var(--fl-body)}
dialog.fl-filters.is-modal .fl-fcats .is-active a{color:var(--fl-primary);font-weight:700;background:transparent}
dialog.fl-filters.is-modal .fl-fcats .fl-cat-count,
dialog.fl-filters.is-modal .fl-fcats .is-active .fl-cat-count{
  background:transparent;color:var(--fl-muted);font-size:.85rem;font-weight:500;padding:0}
dialog.fl-filters.is-modal .fl-fcouleurs__tous{margin:-.35rem 0 .45rem}
dialog.fl-filters.is-modal .fl-fcouleurs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem .3rem}
dialog.fl-filters.is-modal .fl-fcouleurs label,
dialog.fl-filters.is-modal .fl-fcouleurs label:hover{
  flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;
  min-height:0;padding:.3rem 0;background:transparent;border-radius:12px;
  font-size:.76rem;font-weight:500;text-align:center;line-height:1.15}
dialog.fl-filters.is-modal .fl-fcouleurs__dot{
  width:34px;height:34px;
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.14),0 0 0 2px #fff,0 0 0 2px #fff}
dialog.fl-filters.is-modal .fl-fcouleurs input:checked ~ .fl-fcouleurs__dot{
  box-shadow:inset 0 0 0 1px rgba(52,48,94,.14),0 0 0 2px #fff,0 0 0 3.5px var(--fl-primary)}
dialog.fl-filters.is-modal .fl-fcouleurs input:checked ~ .fl-fcouleurs__dot::after{left:12px;top:8px;width:6px;height:11px}
dialog.fl-filters.is-modal .fl-fcouleurs input:not(:checked) ~ .fl-fcouleurs__dot{opacity:.3}
dialog.fl-filters.is-modal .fl-fcouleurs__nom{flex:0 0 auto;color:var(--fl-body)}
dialog.fl-filters.is-modal .fl-fcouleurs input:checked ~ .fl-fcouleurs__nom{color:var(--fl-ink);font-weight:600}
dialog.fl-filters.is-modal .fl-fcouleurs .fl-cat-count{display:none}
dialog.fl-filters.is-modal .fl-fprice__row input{
  border-radius:10px !important;background:#fff !important;border:1px solid var(--fl-line) !important}
dialog.fl-filters.is-modal .fl-filters__pied{border-top:1px solid var(--fl-line);box-shadow:none}
@media(max-width:600px){
  dialog.fl-filters.is-modal .fl-fcouleurs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ==========================================================================
   72. TIROIR MOBILE : LE MOT « CONNEXION » ÉTAIT INVISIBLE (17 septembre 2026)
   La section 36 (14 août) cache le texte du lien compte pour n'en garder que
   l'icône dans l'en-tête… et la règle touchait aussi le tiroir du téléphone,
   où le lien n'avait plus que 44 px de large et un trait sous rien. Régression
   depuis le 14 août, vue à l'audit. Dans le tiroir : icône + texte, sur une
   ligne comme les entrées de menu.
   ========================================================================== */
@media(max-width:921px){
  #ast-mobile-popup .ast-header-account-link{
    width:auto !important;height:auto !important;
    display:flex !important;align-items:center;gap:.7rem;justify-content:flex-start}
  #ast-mobile-popup .ast-header-account-link .ast-header-account-text{
    position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  #ast-mobile-popup .ast-header-account-link::before{width:20px;height:20px;flex:0 0 auto}
}

/* Page 404 : le titre en gras sombre, le sous-titre en texte courant — la
   hiérarchie était inversée (titre fin et bleu, sous-titre en gras). */
.error404 .page-title,.error404 h1.page-title{
  font-weight:800 !important;color:var(--fl-ink) !important;letter-spacing:-.02em}
.error404 .page-sub-title,.error404 .ast-404-layout-1 .page-sub-title{
  font-weight:400 !important;color:var(--fl-body) !important;font-size:1.05rem !important}

/* ==========================================================================
   73. CURSEUR DE PRIX : LES POIGNÉES SONT DESSINÉES PAR NOUS (17 sept. 2026)
   Vianney, capture à l'appui : « pas pro la barre ! » — dans son navigateur les
   poignées natives (rondes, violettes) et la barre de progression native
   (bleue, épaisse) restaient visibles au-dessus de notre piste : chaque moteur
   habille ses <input type="range"> à sa façon, et Firefox dessine en plus
   `::-moz-range-progress`. On ne se bat plus avec : les deux champs deviennent
   INVISIBLES (opacité 0) mais restent la couche que l'on attrape, au clavier
   comme au doigt ; deux <span> à nous, posés sur --fl-pmin / --fl-pmax, font
   les poignées. Même rendu partout.
   ========================================================================== */
.fl-fprice__poignee,
.fl-fprice__poignee:focus,
.fl-fprice__poignee:active{opacity:0 !important;outline:none}
/* ⚠️ La règle générale des champs (section 6) impose `width:100% !important` :
   le champ s'arrêtait 8 px avant la fin de la piste et la poignée droite
   n'était plus attrapable (mesuré : clic dans le vide). */
.fl-fprice__poignee{width:calc(100% + 16px) !important;min-width:0 !important;left:-8px !important;padding:0 !important;margin:0 !important;border:0 !important;height:36px !important;min-height:0 !important;background:transparent !important;box-shadow:none !important}
.fl-fprice__poignee::-moz-range-progress{background:transparent}
.fl-fprice__pouce{
  position:absolute;top:50%;left:var(--fl-pmin,0%);
  width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:#fff;border:2px solid var(--fl-primary);
  box-shadow:0 2px 6px rgba(52,48,94,.18);
  pointer-events:none;z-index:1;
  transition:transform .15s var(--fl-ease),box-shadow .15s var(--fl-ease)}
.fl-fprice__pouce--max{left:var(--fl-pmax,100%)}
.fl-fprice__pouce.is-actif{transform:scale(1.15);box-shadow:0 0 0 4px var(--fl-blue-100),0 2px 6px rgba(52,48,94,.18)}
/* La piste : un peu plus présente, arrondie ; la plage en bleu plein. */
.fl-fprice__piste{height:5px;margin-top:-2.5px;background:var(--fl-line)}
.fl-fprice__plage{border-radius:3px}

/* Poignées aux extrémités rognées (Vianney, capture) : la zone défilante de la
   colonne coupe ce qui déborde, et un rond de 20 px centré sur le bout de la
   piste dépassait de 2 px. La piste rentre de 12 px de chaque côté (rayon du
   rond + marge), et le bloc garde 4 px d'air pour l'anneau de focus. */
.fl-fprice__curseur{margin:.35rem 12px .15rem;height:40px}
.fl-fprice{padding:0 2px}
.fl-fprice__valeurs{margin-top:.1rem}

/* ==========================================================================
   74. CODE PROMO DANS LE RÉCAPITULATIF DE COMMANDE (17 septembre 2026)
   ========================================================================== */
.woocommerce-checkout table.shop_table tr.fl-promo td{
  padding:.25rem 0 .75rem !important;border:0 !important;text-align:left !important}
.fl-promo__ouvrir,.fl-promo__ouvrir:hover,.fl-promo__ouvrir:focus{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:.3rem 0 !important;margin:0;min-height:0;
  font-family:var(--fl-font);font-size:.86rem;font-weight:600;line-height:1.3;
  color:var(--fl-primary) !important;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fl-promo__ouvrir[aria-expanded="true"]{color:var(--fl-ink) !important;text-decoration:none}
.fl-promo__ouvrir:focus-visible{outline:2px solid var(--fl-primary);outline-offset:2px;border-radius:4px}
.fl-promo__champ{display:flex;gap:.45rem;margin-top:.55rem}
.fl-promo__champ input#fl_promo_code{
  flex:1 1 auto;min-width:0;min-height:42px;
  padding:.5rem .8rem !important;font-size:.9rem !important;
  border:1px solid var(--fl-line) !important;border-radius:12px !important;background:#fff !important;
  text-transform:uppercase;letter-spacing:.04em}
.fl-promo__champ input#fl_promo_code::placeholder{text-transform:none;letter-spacing:0}
.fl-promo__appliquer,.fl-promo__appliquer:hover,.fl-promo__appliquer:focus{
  flex:0 0 auto;min-height:42px;padding:0 1rem !important;
  border:1px solid var(--fl-blue-100) !important;border-radius:12px !important;
  background:var(--fl-blue-50) !important;color:var(--fl-primary) !important;
  font-family:var(--fl-font);font-size:.86rem !important;font-weight:600 !important;
  box-shadow:none !important;cursor:pointer;text-transform:none !important;letter-spacing:0 !important}
.fl-promo__appliquer:hover{background:var(--fl-primary) !important;color:#fff !important;border-color:var(--fl-primary) !important}
.fl-promo__retour{margin:.45rem 0 0;font-size:.82rem;color:var(--fl-ok);line-height:1.4}
.fl-promo__retour.is-erreur{color:var(--fl-coral-700)}
.fl-promo__retour:empty{display:none}
/* L'ancien bloc du haut de page, s'il devait réapparaître, reste caché. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon{display:none !important}

/* ==========================================================================
   Autocompletion d'adresse (Base Adresse Nationale) — commande
   ========================================================================== */
.woocommerce-checkout .form-row.fl-adr{position:relative}
.fl-adr__liste{position:absolute;left:0;right:0;top:100%;z-index:60;margin:.3rem 0 0;padding:.3rem;
  list-style:none;background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r);
  box-shadow:var(--fl-sh-2);max-height:280px;overflow:auto}
.fl-adr__liste[hidden]{display:none}
.fl-adr__opt{display:block;margin:0;padding:.55rem .75rem;border-radius:var(--fl-r-sm);cursor:pointer;
  font-size:.94rem;line-height:1.3;color:var(--fl-ink)}
.fl-adr__opt small{display:block;margin-top:.1rem;font-size:.8em;color:var(--fl-muted)}
.fl-adr__opt:hover,.fl-adr__opt.is-active{background:var(--fl-blue-50)}
.fl-adr__aide{margin:.3rem 0 0 !important;font-size:.8rem !important;color:var(--fl-coral-700)}
.fl-adr__aide[hidden]{display:none}
input[aria-invalid="true"].input-text{border-color:var(--fl-coral-700) !important}

/* ==========================================================================
   Bandeau « Remise en main propre au travail » — livraison offerte aux collegues
   ========================================================================== */
/* Specificite alignee sur la regle des cartes (#order_review / .cart_totals). */
.woocommerce-checkout #order_review ul#shipping_method li:has(.fl-cadeau),
.woocommerce-cart .cart_totals ul#shipping_method li:has(.fl-cadeau),
ul#shipping_method li:has(.fl-cadeau){
  display:block !important;padding:0 !important;border:0 !important;background:transparent !important;
  box-shadow:none !important}
.woocommerce-checkout #order_review ul#shipping_method li:has(.fl-cadeau) > label,
.woocommerce-cart .cart_totals ul#shipping_method li:has(.fl-cadeau) > label,
ul#shipping_method li:has(.fl-cadeau) > label{display:block;margin:0;cursor:default}
.fl-cadeau{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.85rem .95rem;border-radius:var(--fl-r);
  background:linear-gradient(115deg,var(--fl-violet-50) 0%,var(--fl-blue-50) 55%,var(--fl-coral-50) 100%);
  border:1px solid var(--fl-violet-200);box-shadow:var(--fl-sh-1);
  color:var(--fl-ink);text-align:left;line-height:1.35}
.fl-cadeau__icone{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(106,92,196,.18);color:var(--fl-violet-700)}
.fl-cadeau__icone svg{width:21px;height:21px}
.fl-cadeau__corps{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.fl-cadeau__nom{font-weight:700;font-size:.96rem;letter-spacing:-.01em}
.fl-cadeau__detail{font-size:.8rem;color:var(--fl-muted);font-weight:500}
.fl-cadeau__pastille{
  flex:0 0 auto;align-self:center;padding:.3rem .7rem;border-radius:var(--fl-r-pill);
  background:var(--fl-coral-700);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
@media (max-width:480px){
  .fl-cadeau{gap:.65rem}
  .fl-cadeau__pastille{order:3;margin-left:calc(40px + .65rem)}
}


/* ==========================================================================
   75. CODE PROMO APPLIQUÉ : UN BANDEAU (18 septembre 2026)
   Même esprit que le bandeau « adresse connue » : icône ronde, nom, détail,
   valeur en pastille. La ligne du tableau devient un bloc (display:flex sur
   la ligne : chaque ligne de ce tableau est indépendante, rien ne casse).
   ========================================================================== */
.woocommerce-checkout #order_review table.shop_table tr.cart-discount,
.woocommerce-cart .cart_totals table.shop_table tr.cart-discount,
table.shop_table tr.cart-discount{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  margin:.35rem 0 .55rem;padding:.8rem .95rem;border-radius:var(--fl-r);
  background:linear-gradient(115deg,var(--fl-vert-50,#eefaf3) 0%,var(--fl-blue-50) 60%,var(--fl-violet-50) 100%);
  border:1px solid var(--fl-vert-100,#d6f3e2) !important;box-shadow:var(--fl-sh-1)}
table.shop_table tr.cart-discount > th,
table.shop_table tr.cart-discount > td{
  display:block;padding:0 !important;border:0 !important;background:transparent !important;
  font-weight:inherit !important;text-align:left !important}
table.shop_table tr.cart-discount > th{flex:1 1 12rem;min-width:0}
table.shop_table tr.cart-discount > td{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;margin-left:auto}
.fl-promo-ok{display:flex;align-items:center;gap:.8rem;color:var(--fl-ink);line-height:1.35;text-align:left}
.fl-promo-ok__icone{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(31,138,85,.18);color:var(--fl-vert-700,#1f8a55)}
.fl-promo-ok__icone svg{width:20px;height:20px}
.fl-promo-ok__corps{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fl-promo-ok__titre{font-weight:700;font-size:.94rem;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.fl-promo-ok__code{
  font-family:var(--fl-font);font-size:.74rem;font-weight:800;letter-spacing:.08em;
  padding:.15rem .55rem;border-radius:var(--fl-r-pill);background:var(--fl-ink);color:#fff}
.fl-promo-ok__detail{font-size:.8rem;color:var(--fl-muted);font-weight:500}
.fl-promo-ok__valeur{
  padding:.3rem .7rem;border-radius:var(--fl-r-pill);background:var(--fl-vert-700,#1f8a55);color:#fff;
  font-size:.86rem;font-weight:800;white-space:nowrap}
.fl-promo-ok__valeur .woocommerce-Price-amount{color:#fff;font-weight:inherit}
table.shop_table tr.cart-discount a.fl-promo-ok__retirer,
table.shop_table tr.cart-discount a.fl-promo-ok__retirer:hover{
  font-size:.78rem;font-weight:600;color:var(--fl-muted) !important;text-decoration:underline;text-underline-offset:3px;
  background:none !important;border:0 !important;padding:0 !important}
table.shop_table tr.cart-discount a.fl-promo-ok__retirer:hover{color:var(--fl-coral-700) !important}
@media (max-width:480px){
  table.shop_table tr.cart-discount > td{margin-left:calc(40px + .8rem)}
}


/* ==========================================================================
   76. EN-TÊTE : LOGO À GAUCHE, MENU UNIFORME, ICÔNES À DROITE (18 septembre 2026)
   Vianney, référence Joli Slime : un bandeau blanc sobre, le logo à gauche,
   les entrées toutes identiques (majuscules, même graisse, même couleur),
   les icônes à droite sans montant. Le placement logo + menu à gauche vient
   du réglage Astra (header-desktop-items) ; ici la typographie et les détails.
   ========================================================================== */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link{
  font-size:.82rem !important;font-weight:700 !important;letter-spacing:.05em !important;
  color:var(--fl-ink) !important;text-transform:uppercase !important;
  padding-left:.8rem !important;padding-right:.8rem !important}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover{color:var(--fl-primary) !important}
/* Le logo colle au bord gauche, le menu suit sans trou. */
#ast-desktop-header .site-header-primary-section-left{display:flex;align-items:center;gap:1.4rem}
#ast-desktop-header .site-header-primary-section-left .ast-builder-layout-element{margin:0}
#ast-desktop-header .site-branding{margin-right:0}
/* « Tout voir » et les catégories : trait de soulignement seulement au survol ou sur la page courante (déjà géré). */
.ast-builder-menu .main-header-menu > .flowly-categories.current-menu-item > .menu-link::after{transform:scaleX(1)}
/* Panier : icône et pastille, pas le montant (comme la référence). */
.ast-site-header-cart .ast-woo-header-cart-info-wrap{display:none !important}
.ast-site-header-cart .ast-cart-menu-wrap,.ast-site-header-cart .ast-addon-cart-wrap{margin-left:0}
/* Bandeau d'annonce : plus fin, texte plus discret. */
.fl-annonce p{padding:.45rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.02em}


/* ==========================================================================
   77. PANIER = UNE BELLE LISTE, PAS LA CAISSE (18 septembre 2026)
   Coupon, livraison et adresse ont quitté la page (inc/cart.php) ; ici on
   range ce qui reste : plus de bouton « Mettre à jour » (les quantités se
   mettent à jour seules), une carte de totaux courte, des cartes d'articles
   plus aérées avec le prix à l'unité.
   ========================================================================== */
.woocommerce-cart table.cart tr:last-child td.actions{display:none !important}
/* La ligne « Expédition : calculer les frais » de WooCommerce (calculateur) : la nôtre la remplace. */
.woocommerce-cart .cart_totals tr.shipping,.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals{display:none !important}
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item{
  grid-template-columns:92px minmax(0,1fr) auto 32px;padding:1rem 1.1rem;gap:.35rem 1.1rem}
.woocommerce-cart table.cart td.product-thumbnail{width:92px}
.woocommerce-cart table.cart td.product-thumbnail img{width:92px !important;height:92px;border-radius:14px}
.woocommerce-cart table.cart td.product-name a{font-size:1.02rem}
.fl-cart-unit{display:block;margin-top:.15rem;font-size:.82rem;color:var(--fl-muted);font-weight:500}
.fl-cart-unit .woocommerce-Price-amount{color:var(--fl-muted);font-weight:500}
.woocommerce-cart table.cart td.product-subtotal{font-size:1.08rem}
.woocommerce-cart .cart_totals tr.fl-cart-livraison td{color:var(--fl-muted) !important;font-weight:500 !important;font-size:.88rem}
.woocommerce-cart .cart_totals tr.order-total td small.includes_tax{display:block;font-size:.76rem;color:var(--fl-muted);font-weight:500;margin-top:.15rem}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout{padding:0 !important;margin-top:.4rem}


/* ==========================================================================
   78. QUANTITÉ FIXE (dernier exemplaire) : « 1 » affiché, − et + grisés (18 septembre 2026)
   ========================================================================== */
.fl-qty .fl-qty__fixe{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.4rem .3rem;font-weight:600;color:var(--fl-ink)}
.fl-qty .fl-qty__btn:disabled{opacity:.35;cursor:not-allowed}
.single-product div.product form.cart .quantity.hidden{display:inline-flex !important}

/* ==========================================================================
   79. BOUTIQUE REGROUPÉE : UNE CARTE PAR FAMILLE (18 septembre 2026, soir)
   Le regroupement est côté PHP (inc/regroupement.php) et ne demande aucun
   style : la carte d'une famille est une carte ordinaire, ouverte sur le
   coloris « vitrine » choisi pour elle. Un diaporama des photos (communes /
   uniques) a été essayé puis retiré à la demande de Vianney : « trop fatigant
   pour les yeux ». Une seule photo par carte, des coloris variés d'une carte à
   l'autre.
   ========================================================================== */

/* ==========================================================================
   80. GRAND MENU « BOUTIQUE » FAÇON SPEKS (18 septembre 2026, soir)

   Vianney : « je voudrais refaire les catégories, inspire-toi des plus grands »
   (speks.com : un panneau pleine largeur sous « Shop », une colonne par univers
   avec sa photo, son titre en capitales et la liste des gammes). Le contenu est
   fabriqué par inc/navigation.php ; ici, la mise en page. Astra gère déjà
   l'ouverture au survol et au clavier (visibility + animation) : on ne touche
   qu'à la position, à la largeur et à la grille.
   ========================================================================== */

/* --- 1. Le panneau : toute la largeur de la barre ------------------------- */
/* ⚠️ Mesuré : le panneau faisait 316 px, calé sur le bloc de navigation — un
   ancêtre intermédiaire d'Astra est positionné. On rend « static » tout ce qui
   sépare la barre du <li>, pour que la barre soit le seul repère. */
#ast-desktop-header .ast-primary-header-bar{position:relative}
#ast-desktop-header .site-header-primary-section-left,
#ast-desktop-header .ast-builder-menu,
#ast-desktop-header .ast-main-header-bar-alignment,
#ast-desktop-header .main-header-bar-navigation,
#ast-desktop-header .site-navigation,
#ast-desktop-header .main-navigation,
#ast-desktop-header .main-header-menu,
#ast-desktop-header .main-header-menu > .fl-mega{position:static !important}
#ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{
  position:absolute !important;left:0 !important;right:0 !important;top:100% !important;
  width:auto !important;min-width:0 !important;max-width:none;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.5rem;
  padding:1.5rem clamp(1rem,3.5vw,3rem) 1.8rem !important;
  border:0 !important;border-top:1px solid var(--fl-line-soft) !important;
  border-radius:0 0 28px 28px !important;
  box-shadow:0 28px 48px -26px rgba(52,48,94,.28) !important;
  background:#fff !important;overflow:visible !important;
  /* Ceinture et bretelles avec le correctif de visibilité ci-dessous : fermé,
     le panneau n'intercepte AUCUN survol. Il ne redevient sensible que quand
     son entrée de menu est survolée ou tient le focus — c'est-à-dire quand il
     est réellement ouvert, ce qui permet d'y descendre à la souris. */
  pointer-events:none}
#ast-desktop-header .main-header-menu > .fl-mega:hover > .sub-menu,
#ast-desktop-header .main-header-menu > .fl-mega:focus-within > .sub-menu{pointer-events:auto}
@media(max-width:1400px){
  #ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px){
  #ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- 2. Une colonne : photo, titre, gammes -------------------------------- */
#ast-desktop-header .fl-mega > .sub-menu > .menu-item{
  display:flex;flex-direction:column;position:static}
#ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link{
  display:block !important;padding:0 !important;margin:0 0 .45rem !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  color:var(--fl-ink) !important;line-height:1.25}
.fl-mega__img{
  display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:var(--fl-bg-soft);margin-bottom:.85rem}
.fl-mega__img:empty{display:none}
.fl-mega__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--fl-ease)}
#ast-desktop-header .fl-mega > .sub-menu > .menu-item:hover .fl-mega__img img{transform:scale(1.045)}
.fl-mega__titre{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fl-ink)}
#ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link:hover .fl-mega__titre,
#ast-desktop-header .fl-mega > .sub-menu > .current-menu-item > .menu-link .fl-mega__titre{color:var(--fl-primary)}
/* Pas de flèche « déplier » sur les colonnes (tout est déjà ouvert). */
#ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link .ast-header-navigation-arrow,
#ast-desktop-header .fl-mega > .sub-menu .icon-arrow{display:none !important}

/* --- 3. Les gammes : une liste posée, pas un sous-menu volant -------------- */
/* 🐛 BUG CORRIGÉ LE 19 SEPT. 2026 — « quand je monte ma souris vers le
   Powerbuzz Magnets, ça ouvre l'onglet Boutique ».
   `visibility:visible !important` était écrit ici pour déplier les listes de
   gammes. Mais la VISIBILITÉ S'HÉRITE : en la forçant, ces listes restaient
   visibles — donc cliquables et SURVOLABLES — même quand le grand panneau,
   lui, était `visibility:hidden`. Or le panneau fermé occupe quand même
   **1440 × 399 px par-dessus le haut de la page** (mesuré) : passer la souris
   sur la première rangée de produits touchait un lien fantôme du menu, ce qui
   posait `:hover` sur le <li> « Boutique » et ouvrait le panneau.
   🔍 Ce que `document.elementsFromPoint(720, 300)` renvoyait, page au repos :
      A.menu-link | LI.menu-item | UL.sub-menu   ← au milieu de la grille.
   ⚠️ Le correctif est `visibility:inherit` : fermé, la liste hérite de
   `hidden` (donc plus rien n'attrape la souris) ; ouvert, elle hérite de
   `visible`. Ne JAMAIS remettre `visible` ici.
   (`opacity:0` seul n'aurait rien réglé : un élément transparent reste
   cliquable. Seule `visibility:hidden` le retire du test de survol.) */
#ast-desktop-header .fl-mega > .sub-menu .sub-menu{
  position:static !important;left:auto !important;right:auto !important;top:auto !important;
  display:block !important;visibility:inherit !important;opacity:1 !important;transform:none !important;
  width:auto !important;min-width:0 !important;margin:0 !important;padding:0 !important;
  border:0 !important;box-shadow:none !important;background:transparent !important}
#ast-desktop-header .fl-mega > .sub-menu .sub-menu .menu-item{position:static}
#ast-desktop-header .fl-mega > .sub-menu .sub-menu .menu-link{
  display:block !important;padding:.28rem 0 !important;border:0 !important;border-radius:0 !important;
  font-size:.92rem !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--fl-body) !important;background:none !important;line-height:1.35}
#ast-desktop-header .fl-mega > .sub-menu .sub-menu .menu-link:hover,
#ast-desktop-header .fl-mega > .sub-menu .sub-menu .current-menu-item > .menu-link{
  color:var(--fl-primary) !important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* --- 4. Téléphone : le tiroir Astra déplie les mêmes niveaux, sans photos -- */
.ast-mobile-popup-drawer .fl-mega__img,.ast-builder-menu-mobile .fl-mega__img{display:none}
.ast-mobile-popup-drawer .fl-mega__titre{display:inline;font-size:inherit;letter-spacing:.02em;font-weight:700;text-transform:none}
.ast-mobile-popup-drawer .fl-mega .sub-menu .sub-menu .menu-link{font-weight:500 !important;padding-left:2.2rem !important}

/* ==========================================================================
   81. ACCUEIL : MISE EN AVANT DES ROULEAUX + « CHOISISSEZ VOTRE GESTE »
       (19 septembre 2026)
   Deux sections sous « Nos produits » (inc/vitrine.php §6 et §7). La première
   est une grande carte cliquable : la bannière des rouleaux (objets à gauche,
   fond pastel vide à droite) porte son texte dans la partie vide. La seconde
   reprend l'idée des tuiles de Speks (photo haute + pilule) avec la palette
   Flowly : un voile lilas / bleu / rose qui monte du bas, jamais de jaune.
   ========================================================================== */

/* --- 1. La carte des rouleaux -------------------------------------------- */
.fl-rouleaux{padding-top:clamp(1.2rem,2.5vw,2rem)}
.fl-avant,.entry-content a.fl-avant{
  position:relative;display:block;overflow:hidden;
  border-radius:28px;background:#f1f3fe;color:var(--fl-ink);text-decoration:none;
  box-shadow:0 18px 50px -28px rgba(52,48,94,.35);
  transition:transform .35s var(--fl-ease),box-shadow .35s var(--fl-ease)}
.fl-avant:hover,.entry-content a.fl-avant:hover{
  transform:translateY(-3px);box-shadow:0 26px 60px -28px rgba(52,48,94,.42);color:var(--fl-ink)}
.fl-avant__visuel{display:block;aspect-ratio:3/1;background:#f1f3fe}
.fl-avant__visuel img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:left center;
  margin:0;border-radius:0;transition:transform 1.2s var(--fl-ease)}
.fl-avant:hover .fl-avant__visuel img{transform:scale(1.025)}
.fl-avant__corps{
  position:absolute;top:0;bottom:0;right:0;left:52%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(.45rem,1vw,.8rem);padding:clamp(1.2rem,3vw,3rem) clamp(1.4rem,4vw,4rem) clamp(1.2rem,3vw,3rem) clamp(1rem,2.5vw,2rem)}
.fl-avant__sur{margin:0;color:var(--fl-violet-700)}
.fl-avant__titre{
  display:block;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.08;font-weight:800;
  letter-spacing:-.03em;color:var(--fl-ink);text-wrap:balance}
.fl-avant__texte{
  display:block;max-width:34ch;color:var(--fl-body);
  font-size:clamp(.92rem,1.25vw,1.05rem);line-height:1.5;text-wrap:balance}
.fl-avant__cta{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.35rem;
  min-height:46px;padding:.7rem 1.5rem;border-radius:var(--fl-r-pill);
  background:var(--fl-ink);color:#fff;font-size:.95rem;font-weight:700;line-height:1.2;
  box-shadow:0 8px 24px rgba(52,48,94,.18);transition:background .22s var(--fl-ease),transform .22s var(--fl-ease)}
.fl-avant__cta::after{
  content:"";width:16px;height:16px;flex:0 0 auto;
  background:#fff;-webkit-mask:var(--fl-icon-fleche) center/contain no-repeat;mask:var(--fl-icon-fleche) center/contain no-repeat;
  transition:transform .22s var(--fl-ease)}
.fl-avant:hover .fl-avant__cta{background:var(--fl-primary-dark)}
.fl-avant:hover .fl-avant__cta::after{transform:translateX(3px)}
@media(max-width:1000px){
  .fl-avant__corps{left:48%}
}
@media(max-width:700px){
  .fl-avant{border-radius:22px}
  .fl-avant__visuel{aspect-ratio:4/3}
  .fl-avant__corps{position:static;padding:1.25rem 1.25rem 1.5rem;background:#f1f3fe}
  .fl-avant__texte{max-width:none}
  .fl-avant__cta{width:100%;justify-content:center}
}

/* --- 2. Les tuiles des gestes -------------------------------------------- */
.fl-gestes{padding-top:clamp(1.6rem,3vw,2.6rem)}
.fl-gestes__sur,.fl-gestes__titre,.fl-gestes__sous{text-align:center}
.fl-gestes__titre,.entry-content .fl-gestes__titre{margin-bottom:.5rem}
.fl-gestes__sous{margin:0 auto clamp(1.4rem,3vw,2.2rem);max-width:48ch}
.fl-gestes__grille{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
@media(max-width:1000px){.fl-gestes__grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.fl-gestes__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fl-geste,.entry-content a.fl-geste{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;border-radius:22px;background:var(--fl-geste-voile,#c8cffb);
  text-decoration:none;color:var(--fl-ink);
  box-shadow:0 14px 34px -22px rgba(52,48,94,.35);
  transition:transform .3s var(--fl-ease),box-shadow .3s var(--fl-ease)}
.fl-geste:hover,.entry-content a.fl-geste:hover{
  transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(52,48,94,.45);color:var(--fl-ink)}
.fl-geste__visuel{position:absolute;inset:0;display:block}
.fl-geste__visuel img{
  display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
  transition:transform .9s var(--fl-ease)}
.fl-geste:hover .fl-geste__visuel img{transform:scale(1.06)}
/* Le voile : la teinte de la tuile monte du bas, pour asseoir la pilule et
   unifier des photos qui n'ont pas le même fond. */
.fl-geste__visuel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--fl-geste-voile,#c8cffb) 0%,color-mix(in srgb,var(--fl-geste-voile,#c8cffb) 55%,transparent) 32%,transparent 62%);
  transition:opacity .3s var(--fl-ease)}
.fl-geste__nom{
  position:absolute;left:50%;bottom:clamp(.8rem,1.6vw,1.2rem);transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:.45rem 1.05rem;border-radius:var(--fl-r-pill);
  background:#fff;color:var(--fl-ink);
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 18px rgba(52,48,94,.14);transition:transform .3s var(--fl-ease)}
.fl-geste:hover .fl-geste__nom{transform:translateX(-50%) translateY(-2px)}
@media(max-width:600px){
  .fl-geste__nom{font-size:.72rem;padding:.4rem .85rem;min-height:34px}
}

/* ==========================================================================
   82. ICÔNES DEVANT LES ENTRÉES DU MENU (19 septembre 2026)
   Vianney : « est-ce que là on mettrait pas des logos à côté de chaque mot ? »
   Trois pictogrammes au trait, même famille que la loupe, le compte et le
   panier à droite (trait 1,7, bouts ronds) : une maison pour Accueil, une
   petite boutique à store pour Boutique, une étincelle pour Nouveautés.
   Dessinés en SVG, posés en masque : ils prennent la couleur du texte, donc
   passent au bleu au survol avec le mot.
   ========================================================================== */
:root{
  --fl-icon-maison:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.6 12 4l8.2 6.6'/%3E%3Cpath d='M5.6 9.4V20h4.6v-5.2h3.6V20h4.6V9.4'/%3E%3C/svg%3E");
  --fl-icon-boutique:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.4 4.5h13.2L20 9.5'/%3E%3Cpath d='M4 9.5a2.65 2.65 0 0 0 5.3 0 2.65 2.65 0 0 0 5.4 0 2.65 2.65 0 0 0 5.3 0'/%3E%3Cpath d='M5.5 12.3V20h13v-7.7'/%3E%3Cpath d='M10 20v-4.6h4V20'/%3E%3C/svg%3E");
  --fl-icon-etincelle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.5c.5 3.6 2 5.4 5.5 6-3.5.6-5 2.4-5.5 6-.5-3.6-2-5.4-5.5-6 3.5-.6 5-2.4 5.5-6z'/%3E%3Cpath d='M18.3 14.8c.25 1.7.95 2.55 2.7 2.85-1.75.3-2.45 1.15-2.7 2.85-.25-1.7-.95-2.55-2.7-2.85 1.75-.3 2.45-1.15 2.7-2.85z'/%3E%3C/svg%3E");
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link{
  display:inline-flex !important;align-items:center;gap:.45rem}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::before,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link::before{
  content:"";flex:0 0 auto;width:17px;height:17px;margin-top:-1px;
  background:currentColor;
  -webkit-mask:var(--fl-icone-menu,none) center/contain no-repeat;mask:var(--fl-icone-menu,none) center/contain no-repeat}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:not([style])::before{display:none}
/* Chaque entrée choisit son dessin : la règle générique ci-dessus est masquée
   par défaut, puis chaque classe la réactive avec son icône. */
.main-header-menu > .menu-item-home > .menu-link::before{--fl-icone-menu:var(--fl-icon-maison);display:inline-block !important}
.main-header-menu > .fl-mega > .menu-link::before{--fl-icone-menu:var(--fl-icon-boutique);display:inline-block !important}
.main-header-menu > .flowly-nouveautes > .menu-link::before{--fl-icone-menu:var(--fl-icon-etincelle);display:inline-block !important}
/* Le trait de soulignement du survol commence sous le mot, pas sous l'icône. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::after{left:calc(.8rem + 17px + .45rem)}


/* ==========================================================================
   82. FILTRES : TOUT À GAUCHE — tri et disponibilité rejoignent la colonne
       (19 septembre 2026)

   Vianney : « ici enlève les catégories dans les filtres » puis « peut-être
   dans filtre on peut afficher "en stock", "le tri", comme ça on regroupe
   tout à gauche ».
   - Les CATÉGORIES quittent la colonne : elles ne vivent plus que dans le
     grand menu « Boutique ▾ » de l'en-tête (§80). La pastille de la catégorie
     active reste dans la barre du haut pour pouvoir la retirer d'un clic.
   - Le TRI devient une liste de liens dans la colonne (même habillage que les
     catégories : on réutilise `.fl-fcats`, donc les lignes de 34 px, la
     pastille de l'actif et les 44 px tactiles sont déjà là).
   - La DISPONIBILITÉ y descend avec son interrupteur.
   - La barre du haut ne garde que le nombre de résultats, les pastilles et le
     bouton « Masquer les filtres ».
   ⚠️ Le menu déroulant natif de WooCommerce et l'interrupteur RESTENT rendus
   dans la barre : ils réapparaissent dès que la colonne est masquée, sinon le
   visiteur perdrait le tri et la disponibilité d'un seul clic.
   ========================================================================== */

/* --- 1. Le tri dans la colonne ------------------------------------------- */
/* Une seule étiquette par ligne (pas de compteur) : on la cale à gauche,
   `.fl-fcats` étant réglé en `space-between` pour son compteur. */
.fl-ftri a{justify-content:flex-start}

/* --- 2. La disponibilité dans la colonne --------------------------------- */
/* L'interrupteur occupe toute la largeur : dans une colonne de 262 px, une
   pilule courte flottant à gauche paraissait tombée là par accident. */
.fl-fdispo{display:flex;flex-direction:column}
/* ⚠️ `box-sizing:border-box` OBLIGATOIRE : la feuille n'a pas de règle
   globale, et un `width:100%` posé sur un lien à rembourrage donnait 270 px
   dans une colonne de 250 — le bord droit de l'interrupteur était rogné
   (mesuré). Même piège pour tout élément large qu'on ajoutera ici. */
.fl-fdispo .fl-stock-switch{
  display:flex;box-sizing:border-box;width:100%;justify-content:flex-start;
  font-size:.88rem;font-weight:500;color:var(--fl-body)}
.fl-fdispo .fl-stock-switch.is-on{font-weight:600}

/* --- 3. La barre du haut : allégée tant que la colonne est là ------------- */
/* Sans JavaScript, `.fl-shop--filtres` est TOUJOURS posé par le PHP : la
   colonne est visible et la barre reste allégée. Cohérent dans les deux cas. */
.fl-shop-bar .woocommerce-ordering,
.fl-shop-bar .fl-stock-switch{display:none}
@media(min-width:922px){
  .fl-shop:not(.fl-shop--filtres) .fl-shop-bar .woocommerce-ordering{display:block}
  .fl-shop:not(.fl-shop--filtres) .fl-shop-bar .fl-stock-switch{display:inline-flex}
}

/* --- 4. Dans la colonne (ordinateur) : le même resserrement que le reste -- */
@media(min-width:922px){
  dialog.fl-filters[open]:not(.is-modal) .fl-ftri a{
    min-height:34px;padding:.25rem .6rem;font-size:.86rem;border-radius:999px}
  dialog.fl-filters[open]:not(.is-modal) .fl-ftri .is-active a{
    background:var(--fl-blue-50);color:var(--fl-primary);font-weight:600}
  dialog.fl-filters[open]:not(.is-modal) .fl-fdispo .fl-stock-switch{
    min-height:36px;padding:0 .6rem;font-size:.86rem;border-radius:999px}
}

/* --- 5. Les ronds de couleur gardent leur couleur au repos ---------------- */
/* Avant le 19 septembre, les onze cases arrivaient COCHÉES : un rond pâle
   voulait donc dire « teinte écartée ». Maintenant qu'on part de zéro, tout
   pâlir d'emblée rendait la palette illisible — on ne distinguait plus Rose de
   Rouge, ni Ivoire de Gris. Au repos les ronds gardent donc leur vraie
   couleur ; ils ne s'effacent que lorsqu'une teinte est choisie, pour que la
   sélection saute aux yeux.
   ⚠️ LE DÉCLENCHEUR EST LA CLASSE `fl-a-choix`, POSÉE PAR flowly.js — PAS
   `:has(input:checked)`. Mesuré sur Chromium 151 : quand une case est décochée
   PAR SCRIPT (bouton « Effacer »), le sélecteur `:has()` se met bien à jour
   (`ul.matches(':has(input:checked)')` renvoie false) mais **le style n'est pas
   recalculé** — les ronds restaient gris tant qu'on ne forçait pas un reflow.
   Un clic humain, lui, invalide correctement : le défaut ne se voyait donc
   qu'avec ce bouton, et passait pour « le bouton ne fonctionne pas ».
   Ne pas revenir à `:has()` ici. */
.fl-fcouleurs__dot,
.fl-fcouleurs input:not(:checked) ~ .fl-fcouleurs__dot{opacity:1;filter:none;transform:none}
.fl-fcouleurs.fl-a-choix input:not(:checked) ~ .fl-fcouleurs__dot{opacity:.32;filter:saturate(.55)}
/* Les deux contextes plus précis (colonne, fenêtre modale) doivent être repris
   tels quels : leurs sélecteurs pèsent plus lourd que la règle générale. */
dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs input:not(:checked) ~ .fl-fcouleurs__dot{opacity:1;filter:none}
dialog.fl-filters[open]:not(.is-modal) .fl-fcouleurs.fl-a-choix input:not(:checked) ~ .fl-fcouleurs__dot{opacity:.3;filter:saturate(.55)}
dialog.fl-filters.is-modal .fl-fcouleurs input:not(:checked) ~ .fl-fcouleurs__dot{opacity:1;filter:none}
dialog.fl-filters.is-modal .fl-fcouleurs.fl-a-choix input:not(:checked) ~ .fl-fcouleurs__dot{opacity:.3;filter:saturate(.55)}
/* Le bouton « Effacer » ne s'affiche que lorsqu'il a quelque chose à effacer.
   `hidden` doit gagner : la règle d'affichage du groupe est plus précise. */
.fl-fcouleurs__tous[hidden]{display:none !important}

/* --- 6. « Il y a encore quelque chose dessous » --------------------------- */
/* La colonne défile à l'intérieur (`overflow-y:auto`) : sur un portable de
   780 px de haut, 192 px restaient hors champ sans que rien ne le dise. Un
   dégradé collé au bas du cadre le signale. Il ne mange rien : il est
   transparent aux clics et disparaît une fois le bas atteint. */
.fl-filters__corps::after{
  content:"";display:block;position:sticky;bottom:0;left:0;right:0;
  height:26px;margin-top:-26px;pointer-events:none;
  background:linear-gradient(to top,#fff 15%,rgba(255,255,255,0))}


/* ==========================================================================
   83. TÉLÉPHONE : LE CODE PROMO CRACHAIT SON HTML DANS LES TOTAUX
       (19 septembre 2026)

   Vianney, capture à l'appui : sous la carte verte du code promo s'affichait
   la chaîne « <span class="fl-promo-ok"><span clas… », et la page se mettait
   à défiler horizontalement (badge « HELLOFLOWLY » et pastille du panier
   rognés à droite).

   CAUSE, une seule pour les trois symptômes. Le gabarit `cart/cart-totals.php`
   de WooCommerce recopie l'étiquette du coupon dans un attribut :
       <td data-title="<?php echo esc_attr( wc_cart_totals_coupon_label( $coupon, false ) ); ?>">
   Or notre filtre `woocommerce_cart_totals_coupon_label` renvoie du HTML (la
   jolie carte verte). Sous 768 px, woocommerce-smallscreen.css fait
       table.shop_table_responsive tr td::before{content:attr(data-title) ": "}
   → il IMPRIME donc ce HTML en toutes lettres. Et comme c'est une ligne
   insécable, elle poussait la largeur de défilement à **4207 px pour un écran
   de 390** (mesuré) : d'où tout ce qui était rogné à droite.

   ⚠️ NE PAS « corriger » en renvoyant du texte brut dans le filtre : c'est lui
   qui dessine la carte verte sur ordinateur ET sur téléphone (le <th>, lui,
   est bien rendu en HTML). On neutralise le ::before, qui ne faisait que
   répéter l'étiquette.
   ========================================================================== */
@media(max-width:768px){
  /* L'étiquette du coupon est du HTML : son ::before est un doublon illisible. */
  .woocommerce-cart .cart_totals table tr.cart-discount td::before,
  .woocommerce-checkout .cart_totals table tr.cart-discount td::before{
    content:none !important;display:none !important}
  /* Nos lignes maison sans data-title n'affichaient qu'un « : » solitaire.
     Filet de sécurité : celles qui en ont un gardent leur intitulé. */
  .woocommerce-cart .cart_totals table td:not([data-title])::before{
    content:none !important;display:none !important}
}


/* ==========================================================================
   84. TÉLÉPHONE : LES DERNIÈRES CIBLES SOUS 44 px (19 septembre 2026)
   Vianney : « 90 % de mes users utiliseront sûrement leur téléphone pour
   acheter ». Audit par SONDAGE RÉEL (`document.elementFromPoint` autour du
   centre, pas la simple hauteur de boîte — sinon les `::after` transparents
   d'élargissement déjà posés comptent à tort pour des défauts).
   Il restait : le fil d'Ariane (16 à 19 px), le bouton d'ajout des cartes
   (40 px) et le logo (40 px). La règle du projet est 44 px depuis le 14 août.
   ⚠️ Les ronds de coloris restent volontairement à 32 px : les porter à 44
   les ferait se chevaucher sur une ligne de onze. La carte entière, elle,
   est une cible pleine largeur.
   ========================================================================== */
@media(max-width:921px){
  /* Fil d'Ariane : on écarte les lignes au lieu de grossir le texte. */
  .woocommerce-breadcrumb a,
  .woocommerce-breadcrumb{line-height:44px}
  .woocommerce-breadcrumb a{display:inline-block;vertical-align:middle}

  /* Bouton d'ajout des cartes : 42 px dessinés → 44 px touchés. */
  .woocommerce ul.products li.product .astra-shop-summary-wrap > .button{min-height:44px}
  .woocommerce ul.products li.product a.button.add_to_cart_button{
    position:relative;min-width:44px;min-height:44px}

  /* Le logo de l'en-tête : 40 px dessinés, zone portée à 44. */
  .site-header .custom-logo-link{position:relative;display:inline-block}
  .site-header .custom-logo-link::after{
    content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:100%;height:44px}
}


/* ==========================================================================
   85. LE BADGE DU CODE PROMO SORTAIT DE SA CARTE VERTE (19 septembre 2026)

   Vianney : « code promo dépassé toujours ». Le fond vert est celui de la
   LIGNE (`tr.cart-discount`) ; c'est le `<th>` qui la contient qui débordait,
   emportant le badge « HELLOFLOWLY » hors du vert.

   MESURE (page de commande réelle, panier de 4 articles) :
     largeur d'écran   430   390   360   320
     le <th> dépasse    +8   +48   +78  +118 px   → et la page défilait de
     côté à 360 px et moins.

   CAUSE — c'est NOTRE règle de la section « totaux » (ligne ~5508) :
       .woocommerce-checkout #order_review .shop_table tr > th{
         flex:0 0 auto; width:auto !important}
   Juste pour « Sous-total », « Total » : un libellé court, figé à gauche, et
   le montant qui prend le reste. Mais sur la ligne du coupon, le « libellé »
   EST la grande carte verte : figée sur sa largeur maximale (324 px), elle ne
   rétrécissait jamais.
   La règle de la section 75 (`table.shop_table tr.cart-discount > th`) tentait
   déjà de la corriger, mais elle pèse 1 classe + 3 éléments contre 1 ID +
   2 classes : elle perdait. ⚠️ Vérifié en listant les règles qui s'appliquent
   VRAIMENT (`document.styleSheets`), pas en lisant la feuille.
   On reprend donc exactement les mêmes préfixes, plus la classe de la ligne.
   ========================================================================== */
.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > th,
.woocommerce-checkout #order_review .shop_table tr.cart-discount > th{
  flex:1 1 auto;min-width:0;width:auto !important}
.woocommerce-cart .cart_totals table.shop_table tr.cart-discount > td,
.woocommerce-checkout #order_review .shop_table tr.cart-discount > td{
  flex:0 0 auto;margin-left:auto;width:auto !important}

/* Et on laisse le contenu se replier : un code plus long que « HELLOFLOWLY »
   ne doit pas pouvoir repousser la carte. Le badge passe à la ligne tout seul. */
.fl-promo-ok,.fl-promo-ok__corps{min-width:0;max-width:100%}
.fl-promo-ok__titre{display:block}
.fl-promo-ok__code{display:inline-block;margin-left:.4rem;vertical-align:middle}

/* ==========================================================================
   90. REFONTE « NUAGE PERVENCHE » (25 septembre 2026)

   Vianney : « je veux qu'on repense le modele du site, un truc plus pale,
   couleur lisse », « un theme fluide, police Miniro, pas de noir
   trop intense, des couleurs agreables, joie de vivre, positive » — « faut
   juste pas que ca fasse trop enfantin ». Nouveau logo : pervenche + noeud rose
   a visage endormi, sur creme.

   La palette et les polices sont posees dans les JETONS (section 1) : tout le
   site a bascule d'un coup. Cette section ne fait que ce que les jetons ne
   savent pas faire : la forme des blocs, les illustrations, la typographie des
   titres « maison », l'en-tete et le pied de page.

   Regles tenues partout ici :
     - APLATS : aucun degrade de couleur (« couleur lisse ») ;
     - pas de trait droit entre deux rubriques (Lea, 14 aout) : vagues, arches,
       coins tres arrondis ;
     - les illustrations restent dans les marges et en fond, jamais sur un
       produit ni sous un texte long.
   ========================================================================== */

/* --- 1. Fond, en-tete, menu ---------------------------------------------- */
:root{
  /* La barre d'en-tete reprend le creme de la page : le logo y est chez lui. */
  --fl-entete:#fdf7f0;
  /* Une vague FRANCHE pour les grandes transitions de la refonte (bandeau,
     pied de page). Les vagues d'avant (section 46) ont ete volontairement
     aplaties le 15 aout : a 3 px d'amplitude, on ne les voyait plus du tout
     sur le nouveau bandeau. Celle-ci n'est posee QUE sur ces deux bords. Trace
     asymetrique, non repete (pas de raccord visible). */
  --fl-vague-h:clamp(28px,4.2vw,66px);
  --fl-vague-bas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C170 18 350 14 540 50S910 100 1090 66 1330 22 1440 40V100H0Z' fill='%23000'/%3E%3C/svg%3E");
  --fl-icon-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
html body{background:var(--fl-bg) !important}
#page,.site-content,.ast-separate-container,.ast-plain-container{background:transparent}
.ast-primary-header-bar{border-bottom:0 !important;backdrop-filter:none}
.fl-defile .site-header .ast-primary-header-bar,
.fl-defile .site-header .ast-mobile-header-wrap{box-shadow:0 10px 26px -18px rgba(52,48,94,.35) !important}

/* Les entrees du menu : Nunito extra-grasse, en minuscules — plus douce que les
   capitales espacees d'avant, et dans la rondeur des titres. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link{
  font-size:1rem !important;font-weight:800 !important;letter-spacing:0 !important;
  text-transform:none !important}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link::after{
  height:3px;border-radius:3px;background:var(--fl-pervenche);top:calc(50% + .95em)}
/* ⚠️ Entre 922 et 1200 px, le menu en Nunito extra-grasse (plus large que
   l'ancienne police) passait SOUS la loupe : mesure a 1080 px (tablette en
   paysage), fin du menu 596 px, debut des icones 546 px. La cause etait la
   GRILLE (1,6fr | auto | 1fr) : la colonne des icones prenait 40 % de la barre.
   Elle ne prend plus que sa largeur ; mesure apres : 136 px d'air a 960 px. */
@media(min-width:922px) and (max-width:1200px){
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
  .ast-builder-menu .main-header-menu > .menu-item > .menu-link{
    padding-left:.65rem !important;padding-right:.65rem !important}
  .site-header .ast-builder-grid-row-has-sides{grid-template-columns:minmax(0,1fr) auto auto !important}
  #ast-desktop-header .site-header-primary-section-left{gap:.9rem}
}
/* Le logo : un peu plus haut, « Sensory » doit rester lisible sous « Flowly ». */
.site-header .custom-logo,.site-header .site-logo-img img,
.fl-defile .site-header .custom-logo,.fl-defile .site-header .site-logo-img img{height:54px !important}
@media(max-width:921px){
  .site-header .custom-logo,.site-header .site-logo-img img,
  .fl-defile .site-header .custom-logo,.fl-defile .site-header .site-logo-img img{height:44px !important}
}
/* Le noeud du logo ne fait plus deux tours complets (il porte un VISAGE : on
   ne le met pas la tete en bas). Il se balance doucement quand on descend. */
@keyframes fl-o-balance{
  0%{transform:rotate(0deg)} 25%{transform:rotate(-14deg)} 50%{transform:rotate(0deg)}
  75%{transform:rotate(14deg)} 100%{transform:rotate(0deg)}
}
@supports (animation-timeline: scroll()){
  .fl-logo__o{animation:fl-o-balance linear both;animation-timeline:scroll(root block)}
}
@media(prefers-reduced-motion:reduce){.fl-logo__o{animation:none !important}}

/* Grand menu « Boutique » et sous-menus : creme, titres dans la police maison. */
#ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{background:var(--fl-bg) !important;border-top:0 !important}
.fl-mega__titre{
  font-family:var(--fl-font-titre);font-weight:400;font-size:1.08rem;letter-spacing:0;text-transform:none}
.fl-mega__img{border-radius:22px}
.ast-builder-menu .sub-menu{background:var(--fl-bg) !important;border-color:var(--fl-line) !important}
/* Tiroir du telephone */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--fl-bg) !important}

/* --- 2. Titres « maison » : la police des titres partout ou ils se lisent -- */
.fl-h2,.entry-content .fl-h2,
.fl-section-title,.entry-content .fl-section-title,
.fl-avant__titre,
.fl-histoire__titre,.entry-content .fl-histoire__titre,
.fl-accroche__titre,
.fl-banniere__titre,
.fl-aussi__titre,
.fl-page-titre,
.fl-qsn-hero__titre,
.fl-hero__titre{
  font-family:var(--fl-font-titre) !important;font-weight:400 !important;
  letter-spacing:-.004em !important;font-synthesis:none}
.fl-h2,.entry-content .fl-h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.06}
.fl-eyebrow{color:var(--fl-primary);font-weight:800;letter-spacing:.14em}

/* --- 3. Boutons : aplat pervenche, gros, ronds ----------------------------- */
.wp-block-button__link,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce-account form button[type=submit],
.woocommerce .return-to-shop a.button,
.fl-btn{
  font-weight:800 !important;letter-spacing:.005em !important;
  box-shadow:0 10px 22px -12px rgba(85,101,230,.7) !important}
.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce-account form button[type=submit]:hover,
.woocommerce .return-to-shop a.button:hover,
.fl-btn:hover{box-shadow:0 14px 26px -12px rgba(70,82,200,.75) !important;filter:none}

.fl-cta,.entry-content a.fl-cta,
.fl-bouton,.entry-content a.fl-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.9rem;border-radius:var(--fl-r-pill);border:0;
  background:var(--fl-primary);color:#fff;
  font-family:var(--fl-font);font-size:1.02rem;font-weight:800;line-height:1.15;text-decoration:none;
  box-shadow:0 10px 22px -12px rgba(85,101,230,.7);
  transition:transform .22s var(--fl-ease),box-shadow .22s var(--fl-ease),background .22s var(--fl-ease)}
.fl-bouton::after,.entry-content a.fl-bouton::after{
  content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--fl-icon-fleche) center/contain no-repeat;mask:var(--fl-icon-fleche) center/contain no-repeat;
  transition:transform .22s var(--fl-ease)}
.fl-cta:hover,.entry-content a.fl-cta:hover,
.fl-bouton:hover,.entry-content a.fl-bouton:hover{
  background:var(--fl-primary-dark);color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 26px -12px rgba(70,82,200,.75)}
.fl-bouton:hover::after{transform:translateX(3px)}
.fl-cta--ghost,.entry-content a.fl-cta--ghost{
  background:transparent;color:var(--fl-ink);box-shadow:none;
  border:2px solid var(--fl-ink)}
.fl-cta--ghost:hover,.entry-content a.fl-cta--ghost:hover{
  background:var(--fl-ink);color:var(--fl-bg);border-color:var(--fl-ink);box-shadow:none}

/* Le lien souligne d'un trait pervenche (actions secondaires). */
.fl-lien-trait,.entry-content a.fl-lien-trait{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--fl-ink);font-weight:800;font-size:1rem;text-decoration:none;
  background:linear-gradient(var(--fl-pervenche),var(--fl-pervenche)) left calc(100% - 8px)/100% 3px no-repeat;
  transition:background-size .25s var(--fl-ease),color .2s var(--fl-ease)}
.fl-lien-trait:hover,.entry-content a.fl-lien-trait:hover{color:var(--fl-primary);background-size:60% 3px}

/* « Ajouter au panier » (action repetee) : pervenche pale, texte pervenche. */
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce div.product form.cart button.button,
.fl-btn-soft{
  background:var(--fl-blue-100) !important;color:var(--fl-primary-dark) !important;
  border-color:transparent !important;font-weight:800 !important}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce div.product form.cart button.button:hover,
.fl-btn-soft:hover{
  background:var(--fl-blue-200) !important;color:var(--fl-primary-dark) !important;
  box-shadow:0 8px 18px -10px rgba(85,101,230,.5) !important}
/* Sur la FICHE produit, « Ajouter au panier » est l'action decisive de la
   page : on la passe en plein (le pastel se perdait sur le creme). */
.woocommerce div.product form.cart button.single_add_to_cart_button.button{
  background:var(--fl-primary) !important;color:#fff !important;
  box-shadow:0 10px 22px -12px rgba(85,101,230,.7) !important}
.woocommerce div.product form.cart button.single_add_to_cart_button.button:hover{
  background:var(--fl-primary-dark) !important;color:#fff !important}

/* --- 4. Le bandeau d'accueil (inc/vitrine.php, flowly_accroche) ----------- */
.fl-accroche{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--fl-coral-50);
  padding:clamp(1.6rem,4vw,3.4rem) 0 calc(var(--fl-onde-h) + clamp(2.4rem,5vw,4.2rem))}
.fl-accroche.fl-onde.fl-onde{padding-bottom:calc(var(--fl-vague-h) + clamp(2rem,4.5vw,3.6rem))}
.fl-accroche.fl-onde::after{
  height:var(--fl-vague-h);animation:none;
  -webkit-mask:var(--fl-vague-bas) 0 0/100% 100% no-repeat;mask:var(--fl-vague-bas) 0 0/100% 100% no-repeat}
.fl-accroche__grille{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.fl-accroche__corps{position:relative;z-index:2}
.fl-accroche__badge{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.2rem;
  padding:.5rem 1rem .5rem .8rem;border-radius:var(--fl-r-pill);
  background:#fff;color:var(--fl-ink);font-size:.9rem;font-weight:800;line-height:1.2;
  box-shadow:0 1px 0 var(--fl-line)}
.fl-accroche__badge .fl-deco{width:15px;height:15px;color:var(--fl-pervenche);flex:0 0 auto}
.fl-accroche__titre,.entry-content .fl-accroche__titre{
  margin:0 0 1.1rem !important;color:var(--fl-ink);
  font-size:clamp(2.7rem,6vw,5.3rem) !important;line-height:1.01 !important;text-wrap:balance}
.fl-accroche__titre em{font-style:normal;color:var(--fl-pervenche)} /* grand titre : 3,2:1 suffit (seuil 3:1) */
.fl-accroche__titre .fl-envol{color:var(--fl-ink)}
.fl-accroche__sous{
  margin:0 0 2rem;max-width:30ch;color:var(--fl-body);
  font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.5;font-weight:600}
.fl-accroche__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem}

/* La scene : une arche pervenche (creme sur pervenche, comme l'un des essais de
   logo de Vianney) et trois cartes posees dessus. */
.fl-accroche__scene{
  position:relative;width:100%;max-width:560px;justify-self:end;aspect-ratio:1/1.02}
.fl-accroche__arche{
  position:absolute;left:12%;right:4%;top:7%;bottom:0;
  border-radius:50% 50% 34px 34px / 34% 34% 34px 34px;
  background:var(--fl-pervenche);color:#fdf7f0;overflow:hidden}
.fl-accroche__arche .fl-deco{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.fl-accroche__carte,.entry-content a.fl-accroche__carte{
  position:absolute;z-index:2;display:flex;flex-direction:column;
  padding:9px 9px 12px;border-radius:26px;background:#fff;color:var(--fl-ink);text-decoration:none;
  box-shadow:0 22px 40px -22px rgba(52,48,94,.45),0 2px 6px rgba(52,48,94,.06);
  transition:transform .45s var(--fl-ease),box-shadow .45s var(--fl-ease)}
.fl-accroche__carte:hover,.entry-content a.fl-accroche__carte:hover{
  color:var(--fl-ink);box-shadow:0 30px 50px -24px rgba(52,48,94,.5),0 2px 6px rgba(52,48,94,.06)}
.fl-accroche__photo{display:block;border-radius:19px;overflow:hidden;background:#fff}
.fl-accroche__photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0 !important}
.fl-accroche__legende{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.55rem .35rem 0}
.fl-accroche__nom{font-size:.88rem;font-weight:800;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fl-accroche__prix{font-size:.86rem;font-weight:800;color:var(--fl-primary);white-space:nowrap}
.fl-accroche__prix del{opacity:.55;font-weight:600;margin-right:.2rem}
.fl-accroche__carte--1{width:41%;left:0;top:25%;rotate:-7deg}
.fl-accroche__carte--2{width:38%;right:0;top:10%;rotate:6deg}
.fl-accroche__carte--3{width:37%;left:43%;top:56%;rotate:-3deg}
.fl-accroche__carte--1:hover{transform:translateY(-6px) rotate(3deg)}
.fl-accroche__carte--2:hover{transform:translateY(-6px) rotate(-3deg)}
.fl-accroche__carte--3:hover{transform:translateY(-6px) rotate(2deg)}
.fl-accroche__soleil{
  /* Il se leve au-dessus de l'arche, entre les deux premieres cartes, sans en
     cacher aucune. */
  position:absolute;z-index:3;width:25%;left:36%;top:-5%;pointer-events:none;
  animation:fl-soleil-tourne 60s linear infinite}
@keyframes fl-soleil-tourne{to{rotate:360deg}}
/* Il cligne des yeux de temps en temps : un signe de vie, pas un spectacle. */
.fl-soleil__oeil{transform-box:fill-box;transform-origin:center;animation:fl-cligne 7s infinite}
@keyframes fl-cligne{0%,94%,100%{transform:scaleY(1)} 97%{transform:scaleY(.2)}}

/* Les petits decors du bandeau */
.fl-accroche__d{position:absolute;z-index:1;pointer-events:none}
.fl-accroche__d--1{width:44px;left:3%;top:14%;color:var(--fl-coral-400)}
.fl-accroche__d--2{width:28px;left:47%;top:74%;color:var(--fl-violet-400)}
.fl-accroche__d--3{width:120px;left:40%;top:6%;color:var(--fl-blue-200)}
@media(prefers-reduced-motion:no-preference){
  .fl-accroche__d--1,.fl-accroche__d--2{animation:fl-scintille 5s var(--fl-ease) infinite}
  .fl-accroche__d--2{animation-delay:-2.2s}
}
@keyframes fl-scintille{0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(.72) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){
  .fl-accroche__soleil,.fl-soleil__oeil{animation:none}
}

@media(max-width:860px){
  .fl-accroche__grille{grid-template-columns:1fr;gap:1.4rem}
  .fl-accroche__scene{justify-self:center;max-width:430px}
  .fl-accroche__d--3{display:none}
  /* Sur une colonne, les marges n'existent plus : les etoiles vont dans les
     coins libres (au-dessus du badge, a cote de l'arche), jamais sur le texte. */
  .fl-accroche__d--1{left:auto;right:5%;top:1.2rem;width:30px}
  .fl-accroche__d--2{left:4%;right:auto;top:auto;bottom:calc(var(--fl-vague-h) + 18%)}
}
@media(max-width:480px){
  .fl-accroche__titre,.entry-content .fl-accroche__titre{font-size:2.55rem !important}
  .fl-accroche__actions .fl-bouton{flex:1 1 100%}
  .fl-accroche__actions .fl-lien-trait{margin:0 auto}
  /* Le nom tient sur deux lignes au lieu d'etre coupe (« Tangle F… »). */
  .fl-accroche__legende{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.4rem .25rem 0}
  .fl-accroche__nom{font-size:.76rem;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .fl-accroche__prix{font-size:.76rem}
  .fl-accroche__carte,.entry-content a.fl-accroche__carte{padding:6px 6px 9px;border-radius:20px}
  .fl-accroche__photo{border-radius:15px}
}

/* --- 5. « Nos produits » (carrousel) --------------------------------------- */
.fl-carr__item{
  background:#fff !important;border:0 !important;border-radius:26px !important;
  box-shadow:var(--fl-sh-1)}
.fl-carr__item:hover{box-shadow:var(--fl-sh-2)}
.fl-carr__visuel{border-radius:18px !important;background:#fff}
.fl-carr__nom{color:var(--fl-ink);font-weight:800}
.fl-carr__prix{color:var(--fl-ink);font-weight:800}

/* --- 6. La mise en avant des rouleaux -------------------------------------- */
.fl-avant,.entry-content a.fl-avant{
  border-radius:40px;background:var(--fl-bg-tint);
  box-shadow:none}
.fl-avant:hover,.entry-content a.fl-avant:hover{box-shadow:var(--fl-sh-2)}
.fl-avant__visuel{background:var(--fl-bg-tint)}
.fl-avant__sur{color:var(--fl-primary)}
.fl-avant__titre{font-weight:400;letter-spacing:-.004em}
.fl-avant__cta{background:var(--fl-primary);box-shadow:0 10px 22px -12px rgba(85,101,230,.7);font-weight:800}
.fl-avant:hover .fl-avant__cta{background:var(--fl-primary-dark)}
@media(max-width:700px){
  .fl-avant,.entry-content a.fl-avant{border-radius:30px}
  .fl-avant__corps{background:var(--fl-bg-tint)}
}

/* --- 7. « Choisissez votre geste » : des ARCHES ---------------------------- */
.fl-geste,.entry-content a.fl-geste{
  border-radius:999px 999px 28px 28px;aspect-ratio:3/4.1;
  box-shadow:none}
.fl-geste:hover,.entry-content a.fl-geste:hover{box-shadow:0 22px 40px -24px rgba(52,48,94,.45)}
.fl-geste__nom{
  font-family:var(--fl-font-titre);font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none;
  background:var(--fl-bg);min-height:40px;padding:.45rem 1.15rem;
  box-shadow:0 6px 16px rgba(52,48,94,.12)}
@media(max-width:600px){.fl-geste__nom{font-size:.9rem;padding:.4rem .9rem;min-height:36px}}

/* --- 8. « Decouvrez notre histoire » : le bloc pervenche a gribouillis ----- */
.fl-histoire{
  position:relative;isolation:isolate;overflow:hidden;
  margin:clamp(1rem,3vw,2.2rem) clamp(.75rem,2.2vw,2rem) 0;
  border-radius:clamp(30px,4vw,48px);
  /* Le pervenche EXACT du logo, pas celui des boutons : plus doux sur une grande
     surface. Il ne tient que 3,2:1 sous le creme — c'est suffisant ici parce que
     TOUT le texte du bloc est « grand » au sens WCAG (titre, et sous-titre en
     20 px gras), seuil 3:1. Ne pas y mettre de texte courant. */
  background:var(--fl-pervenche);
  padding:clamp(3.6rem,8vw,6.2rem) 0}
.home .entry-content > section.fl-histoire,
.entry-content[data-ast-blocks-layout] > section.fl-histoire{
  /* ⚠️ La feuille en ligne d'Astra (`.entry-content[data-ast-blocks-layout] > *`,
     2 classes) pose `margin-left/right:auto` et `.home .entry-content > *` remet
     les marges verticales a 0 : il faut les battre toutes les deux. */
  margin-left:clamp(.75rem,2.2vw,2rem);margin-right:clamp(.75rem,2.2vw,2rem);
  margin-top:clamp(1rem,3vw,2.2rem)}
.fl-histoire__motif{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  color:#8392f8;pointer-events:none}
.fl-histoire__grille{position:relative;z-index:1}
.fl-histoire__titre,.entry-content .fl-histoire__titre{
  color:#fdf7f0;font-size:clamp(2.2rem,4.6vw,4rem) !important;line-height:1.04 !important}
.fl-histoire__sous{color:#fdf7f0;font-weight:800;font-size:clamp(1.18rem,1.7vw,1.3rem)}
.fl-histoire__cta,.entry-content a.fl-histoire__cta{
  background:#fdf7f0;color:var(--fl-primary-dark);font-weight:800;
  box-shadow:0 12px 26px -14px rgba(30,28,70,.6)}
.fl-histoire__cta:hover,.entry-content a.fl-histoire__cta:hover{
  background:#fff;color:var(--fl-primary-dark);box-shadow:0 16px 30px -14px rgba(30,28,70,.7)}

/* --- 9. Le pied de page (inc/pied.php) ------------------------------------- */
.site-footer{
  position:relative;border-top:0 !important;background:var(--fl-bg-tint) !important;
  margin-top:calc(var(--fl-vague-h) + clamp(2.5rem,6vw,4.5rem))}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--fl-vague-h) + 1px);height:var(--fl-vague-h);
  background:var(--fl-bg-tint);
  -webkit-mask:var(--fl-vague-bas) 0 0/100% 100% no-repeat;mask:var(--fl-vague-bas) 0 0/100% 100% no-repeat;
  transform:scaleX(-1);pointer-events:none}
.site-footer .site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container{background:transparent !important;border:0 !important}
.site-footer .ast-footer-copyright{display:block;width:100%;text-align:left !important}
.fl-pied{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,3.5rem);
  max-width:1180px;margin:0 auto;padding:clamp(2.4rem,5vw,3.6rem) 1.5rem 1.4rem;box-sizing:border-box;
  text-align:left;color:var(--fl-body);font-size:.95rem;line-height:1.5}
.site-footer .ast-footer-copyright .fl-pied p{text-align:left !important;line-height:1.5;font-size:inherit;color:inherit}
.site-footer .ast-footer-copyright .fl-pied a{font-weight:inherit}
.fl-pied__logo{display:inline-block;line-height:0}
.fl-pied__logo img{width:180px;height:auto;display:block}
.site-footer .ast-footer-copyright .fl-pied .fl-pied__devise{margin:.9rem 0 .5rem !important}
.fl-pied__devise{margin:.9rem 0 .5rem;max-width:30ch;color:var(--fl-body);font-weight:600}
.fl-pied .fl-pied__mail{color:var(--fl-primary);font-weight:800;text-decoration:none}
.fl-pied .fl-pied__mail:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer .ast-footer-copyright .fl-pied .fl-pied__titre{margin:.2rem 0 .7rem !important;font-size:1.12rem;color:var(--fl-ink);
  font-family:var(--fl-font-titre) !important;font-weight:400}
.fl-pied__titre{
  margin:.2rem 0 .8rem;font-family:var(--fl-font-titre);font-size:1.12rem;color:var(--fl-ink);line-height:1.2}
.fl-pied ul{list-style:none;margin:0;padding:0}
.fl-pied li{margin:0}
.fl-pied__groupe a{
  display:inline-flex;align-items:center;min-height:34px;
  color:var(--fl-body);font-weight:600;text-decoration:none;transition:color .18s var(--fl-ease)}
.fl-pied__groupe a:hover{color:var(--fl-primary)}
.site-footer .ast-footer-copyright .fl-pied .fl-pied__copy{
  text-align:center !important;margin:1.2rem 0 0 !important;font-size:.82rem;color:var(--fl-muted)}
.fl-pied__copy{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  margin:1.2rem 0 0;padding-top:1.3rem;
  font-size:.82rem;color:var(--fl-muted);text-align:center}
.fl-pied__etoile{width:12px;height:12px;color:var(--fl-pervenche)}
@media(max-width:900px){
  .fl-pied{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fl-pied__marque{grid-column:1 / -1}
}
@media(max-width:600px){
  .fl-pied{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.2rem;padding-left:1.1rem;padding-right:1.1rem}
  .fl-pied__groupe a{min-height:40px}
}

/* --- 10. Les derniers degrades de l'ancienne palette, remis a plat -------- */
/* « Qui sommes-nous » (pages/qui-sommes-nous.html) */
.fl-qsn-hero{background:var(--fl-coral-50)}
.fl-qsn-cite p{font-family:var(--fl-font-titre);font-weight:400;letter-spacing:-.004em;line-height:1.3}
.fl-qsn-cite em,
.fl-hero__titre em{
  background:none !important;-webkit-text-fill-color:currentColor;color:var(--fl-primary);font-style:normal}
.fl-qsn-signature,.fl-signature{background:var(--fl-coral-50);border-top:0;border-bottom:0}
/* L'ancien bandeau de devise (plus sur l'accueil, reste utilisable ailleurs) */
.fl-devise{background:var(--fl-coral-50)}
/* Panier : la carte « cadeau » et la ligne du code promo */
.fl-cadeau{background:var(--fl-coral-50)}
.woocommerce-cart .cart_totals table.shop_table tr.cart-discount,
table.shop_table tr.cart-discount{background:var(--fl-sauge-50)}
/* La colonne de filtres s'estompe vers la couleur de la PAGE, plus vers le blanc
   (on voyait une bande blanche sous « Prix »). */
.fl-filters__corps::after{background:linear-gradient(to top,var(--fl-bg) 15%,rgba(253,247,240,0))}

/* --- 11. Paiement : l'encadre de la carte bancaire -------------------------- */
/* WooCommerce le peint en gris (#efefef), avec une petite fleche du meme gris :
   sur le bloc peche, on aurait dit un reste de l'ancien theme. */
.woocommerce-page.woocommerce-checkout #payment div.payment_box,
.woocommerce.woocommerce-checkout #payment div.payment_box{background-color:#fff !important;border-radius:18px}
.woocommerce-page.woocommerce-checkout #payment div.payment_box::before,
.woocommerce.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#fff !important}

/* --- 12. La page 404 (inc/page-404.php) ------------------------------------ */
.fl-404{
  max-width:640px;margin:0 auto;padding:clamp(1rem,4vw,3rem) 0 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.fl-404__soleil{width:clamp(120px,18vw,170px);margin-bottom:1.2rem;animation:fl-soleil-tourne 60s linear infinite}
.fl-404__titre,.entry-content .fl-404__titre{
  margin:0 0 .8rem;font-size:clamp(2rem,4.6vw,3.3rem) !important;line-height:1.05 !important;text-wrap:balance}
.fl-404__texte{margin:0 0 1.6rem;max-width:44ch;color:var(--fl-body);font-size:1.08rem}
.fl-404__recherche{display:flex;gap:.6rem;width:100%;max-width:480px;margin:0 0 1.2rem}
.fl-404__recherche input[type=search]{flex:1 1 auto;min-height:52px;border-radius:var(--fl-r-pill) !important;padding-left:1.2rem !important}
.fl-404__recherche .fl-bouton{flex:0 0 auto}
.fl-404__recherche .fl-bouton::after{display:none}
.fl-404__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin:0}
.error404 .page-header,.error404 .ast-404-layout-1 > header{display:none}
@media(prefers-reduced-motion:reduce){.fl-404__soleil{animation:none}}
@media(max-width:480px){.fl-404__recherche{flex-direction:column}.fl-404__recherche .fl-bouton{width:100%}}

/* --- 13. Cartes produit : le nom de gamme en gras ------------------------- */
/* Nunito en 500 paraissait maigre a cote des titres en Tilt Warp : le nom de la
   gamme passe en extra-gras, le coloris reste leger dessous. */
.woocommerce ul.products li.product .fl-card-titre__gamme{font-weight:800;color:var(--fl-ink);letter-spacing:0}
.woocommerce ul.products li.product .fl-card-titre__coloris{font-weight:600}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount{font-weight:800;color:var(--fl-ink)}

/* --- 14. Grand menu : les premieres lettres n'etaient plus coupees ---------- */
/* ⚠️ Nunito dessine le F, le T ou le R un pixel A GAUCHE de leur boite. Les
   listes du grand menu heritent de `overflow:hidden` (section 4, pose pour les
   coins arrondis des anciens menus deroulants) : « Fun Cube » s'affichait
   « ſun Cube ». Plus Jakarta n'avait pas ce debord, d'ou un defaut apparu avec
   le changement de police. Ces listes n'ont ni fond ni coins : rien a rogner. */
#ast-desktop-header .fl-mega > .sub-menu .sub-menu{overflow:visible !important}

/* --- 15. Tiroir du telephone : tout creme, « Connexion » en minuscules ------ */
.ast-mobile-popup-drawer .ast-mobile-popup-header,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-popup .ast-builder-layout-element{background:var(--fl-bg) !important}
#ast-mobile-popup .ast-header-account-link,
#ast-mobile-popup .ast-header-account-text,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link{
  text-transform:none !important;letter-spacing:0 !important}
#ast-mobile-popup .ast-header-account-text{font-weight:800 !important;font-size:1rem !important}
/* Astra peint la liste du menu mobile en blanc (#ast-hf-menu-1-mobile) : l'ID
   de la feuille d'Astra impose un ID ici aussi. */
#ast-mobile-popup #ast-hf-menu-1-mobile,
#ast-mobile-popup .main-header-menu,
#ast-mobile-popup .main-header-menu .sub-menu{background:var(--fl-bg) !important}

/* --- 16. La page « Prochainement » (mode Bientot disponible de WooCommerce) -- */
/* C'est la page que voient les visiteurs tant que la boutique est fermee. Le
   gabarit est celui de WooCommerce (bloc woocommerce/coming-soon) : on ne fait
   que l'habiller. Le logo y sortait a sa taille native (1175 px de large),
   doublé du nom du site en texte. */
.woocommerce-coming-soon-default,
.woocommerce-coming-soon-default .coming-soon-cover{background:var(--fl-coral-50) !important}
.woocommerce-coming-soon-header{background:transparent !important}
.woocommerce-coming-soon-header .wp-block-site-logo img.custom-logo{height:64px !important;width:auto !important;max-width:none}
.woocommerce-coming-soon-header .wp-block-site-title{display:none}
.woocommerce-coming-soon-header .wp-block-button__link{
  background:transparent !important;color:var(--fl-ink) !important;border:2px solid var(--fl-ink) !important;
  box-shadow:none !important;padding:.55rem 1.2rem !important;font-size:.92rem !important}
.woocommerce-coming-soon-header .wp-block-button__link:hover{background:var(--fl-ink) !important;color:var(--fl-bg) !important;transform:none}
h1.woocommerce-coming-soon-banner{
  font-size:clamp(2.3rem,5.4vw,4.2rem) !important;line-height:1.04 !important;max-width:15ch;margin-inline:auto !important;
  color:var(--fl-ink);text-wrap:balance}
/* Le soleil du bandeau d'accueil, au-dessus du message (decoratif). */
h1.woocommerce-coming-soon-banner::before{
  content:"";display:block;width:clamp(110px,14vw,160px);aspect-ratio:1;margin:0 auto 1.4rem;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cpath fill=%22%23f886a8%22 stroke=%22%23f886a8%22 stroke-width=%2217%22 stroke-linejoin=%22round%22 d=%22M110 48L100 9.5L90 48zM134.6 60L145.2 21.6L117.4 50zM150 82.6L178.4 54.8L140 65.4zM152 110L190.5 100L152 90zM140 134.6L178.4 145.2L150 117.4zM117.4 150L145.2 178.4L134.6 140zM90 152L100 190.5L110 152zM65.4 140L54.7 178.4L82.6 150zM50 117.4L21.6 145.3L60 134.6zM48 90L9.5 100L48 110zM60 65.4L21.6 54.7L50 82.6zM82.6 50L54.7 21.6L65.4 60z%22/%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2264%22 fill=%22%23f886a8%22/%3E%3Ccircle cx=%2266%22 cy=%22112%22 r=%228%22 fill=%22%23fde2ea%22 opacity=%22.75%22/%3E%3Ccircle cx=%22134%22 cy=%22112%22 r=%228%22 fill=%22%23fde2ea%22 opacity=%22.75%22/%3E%3Cg fill=%22none%22 stroke=%22%2334305e%22 stroke-width=%225%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M71 95q9 10 18 0%22/%3E%3Cpath d=%22M111 95q9 10 18 0%22/%3E%3Cpath d=%22M90 117q10 8 20 0%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
@media(prefers-reduced-motion:no-preference){
  h1.woocommerce-coming-soon-banner::before{animation:fl-soleil-tourne 60s linear infinite}
}
@media(max-width:600px){.woocommerce-coming-soon-header .wp-block-site-logo img.custom-logo{height:48px !important}}

/* --- 17. Case des CGV : le texte ne se coupe plus en deux colonnes ---------- */
/* La section « Commande : la case a cocher des CGV » met AUSSI le <span> du
   texte en `inline-flex` : son texte et son lien « conditions generales »
   devenaient deux colonnes cote a cote (vu en 390 px). Seul le <label> doit
   etre flexible (case | texte) ; le texte, lui, coule normalement. */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
  display:inline;min-height:0;padding:0}

/* ==========================================================================
   91. RETOUCHES DU 25 SEPTEMBRE 2026 (apres-midi)
   ========================================================================== */

/* --- 1. Le trait du survol colle EXACTEMENT au mot ------------------------ */
/* Vianney : « le trait sous "boutique" quand on passe dessus est pas centre ».
   Mesure a 1920 px : sous « Boutique », le trait couvrait AUSSI la fleche du
   grand menu (99 px de trait pour 69 px de mot) ; sous « Accueil » et
   « Nouveautes », il depassait de 3 px a droite (retrait de .62rem pour un
   lien qui en a .8). On part maintenant d'UNE variable, le retrait du lien,
   qui sert au padding ET aux deux bords du trait : ils ne peuvent plus
   diverger. Le lien est un inline-flex : icone | .45rem | mot | .45rem | fleche
   (20 px de large, mesuree). */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{
  --fl-lien-pad:.8rem;
  padding-left:var(--fl-lien-pad) !important;padding-right:var(--fl-lien-pad) !important}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link::after{
  left:calc(var(--fl-lien-pad) + 17px + .45rem);right:var(--fl-lien-pad)}
#ast-desktop-header .main-header-menu > .menu-item-has-children > .menu-link::after{
  right:calc(var(--fl-lien-pad) + .45rem + 20px)}
@media(min-width:922px) and (max-width:1200px){
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link{--fl-lien-pad:.65rem}
}

/* --- 2. Le grand menu tient dans l'ecran a toutes les largeurs ------------ */
/* Mesure le 25 sept. (bas du panneau ouvert / hauteur de fenetre) : 987 / 768
   sur un portable 1366 x 768, 962 / 800 en 1280 x 800, 1334 / 810 sur l'iPad en
   paysage (1080). Le panneau vit dans l'en-tete FIXE : ce qui depasse ne peut
   pas etre atteint en faisant defiler — la colonne « En silence » et toute la
   2e rangee etaient hors d'atteinte. Cause : sous 1400 px la grille passait a
   4 puis 3 colonnes, les illustrations grandissaient jusqu'a 319 x 199 et le
   tout s'empilait sur deux ou trois rangees.
   → jusqu'a 1200 px : les 7 colonnes restent sur UNE rangee (les illustrations
     retrecissent avec elles) ; en dessous (tablette en paysage) : 4 colonnes
     et l'illustration devient une vignette a gauche du titre. */
@media(max-width:1400px){
  #ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{
    grid-template-columns:repeat(7,minmax(0,1fr));gap:1.1rem;
    padding-left:clamp(1rem,2.4vw,2rem) !important;padding-right:clamp(1rem,2.4vw,2rem) !important}
}
@media(max-width:1199px){
  #ast-desktop-header .main-header-menu > .fl-mega > .sub-menu{
    grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem 1.4rem;padding-top:1.2rem !important}
  #ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link{
    display:flex !important;align-items:center;justify-content:flex-start !important;gap:.7rem}
  #ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link .fl-mega__titre{flex:1 1 auto;text-align:left}
  #ast-desktop-header .fl-mega > .sub-menu > .menu-item > .menu-link .fl-mega__img{
    flex:0 0 76px;margin-bottom:0;border-radius:12px}
}

/* --- 3. Cartes du bandeau d'accueil : le nom en entier --------------------- */
/* Sur ordinateur, les trois cartes coupaient le nom sur une ligne (« Tangle
   BrainTo… », « Rouleau sensor… », « Solar Squishers J'… ») : a 1440 px une
   carte ne fait que 200 px de large. Le prix passe SOUS le nom (legende de
   polaroid, comme deja sur telephone, section 90 max-width:480px) : le nom a
   toute la largeur, sur deux lignes au plus. */
.fl-accroche__legende{flex-direction:column;align-items:flex-start;gap:.12rem}
.fl-accroche__nom{white-space:normal;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* --- 4. Le soleil se reveille quand la souris approche -------------------- */
/* Vianney : « est-ce que le soleil peut ouvrir les yeux quand on passe dessus
   avec la souris ? ou quand on est pas loin, il suit la souris des yeux ».
   Les deux : a l'approche, il ouvre les yeux, sourit plus grand et suit la
   souris du regard (flowly.js initSoleil pose .est-eveille et deplace les
   pupilles) ; la souris partie, il se rendort. Rien ne change au doigt : sur
   un ecran tactile il n'y a pas de souris a suivre, il reste endormi.
   Seuls les RAYONS tournent desormais : avant, tout le soleil tournait et son
   visage passait la tete en bas. */
.fl-accroche__soleil,.fl-404__soleil{animation:none}
.fl-soleil__rayons{transform-box:fill-box;transform-origin:center;animation:fl-soleil-tourne 60s linear infinite}
.fl-soleil{transition:scale .35s var(--fl-ease)}
.fl-soleil.est-eveille{scale:1.06}
.fl-soleil__ferme,.fl-soleil__bouche,.fl-soleil__ouvert{transition:opacity .15s ease}
.fl-soleil__ouvert,.fl-soleil__bouche--eveil{opacity:0}
.fl-soleil.est-eveille .fl-soleil__ferme,
.fl-soleil.est-eveille .fl-soleil__bouche:not(.fl-soleil__bouche--eveil){opacity:0}
.fl-soleil.est-eveille .fl-soleil__ouvert,
.fl-soleil.est-eveille .fl-soleil__bouche--eveil{opacity:1}
.fl-soleil__pupilles,.fl-soleil__reflets{transition:transform .2s ease-out}
/* Eveille, il cligne aussi, un peu plus souvent qu'endormi. */
.fl-soleil__ouvert{transform-box:fill-box;transform-origin:center}
.fl-soleil.est-eveille .fl-soleil__ouvert{animation:fl-cligne 4.5s infinite}
@media(prefers-reduced-motion:reduce){
  .fl-soleil__rayons,.fl-soleil.est-eveille .fl-soleil__ouvert{animation:none}
  .fl-soleil,.fl-soleil__pupilles,.fl-soleil__reflets{transition:none}
}

/* --- 5. Tuiles « Choisissez votre geste » : les dessins du grand menu ------ */
/* Vianney : « le truc en bas "presser" "tourner"… mets les mêmes images que
   dans Boutique ». Chaque tuile montre le dessin de sa categorie, version
   arche (assets/gestes/<slug>-arche.svg, meme motif que le menu). Le dessin
   est deja un aplat : le voile en degrade, fait pour asseoir l'etiquette sur
   des PHOTOS de fonds differents, n'a plus lieu d'etre. */
.fl-geste--dessin .fl-geste__visuel::after{display:none}

/* --- 6. Boutons « squishy » et envol vers le panier ------------------------- */
/* Appui : le bouton s'ecrase (plus large, moins haut) puis rebondit en deux
   oscillations amorties, comme un objet sensoriel qu'on relache
   (flowly.js initSquishy). On anime `scale`, qui se compose avec les
   `transform` de survol deja poses sur les boutons (translateY…). */
@keyframes fl-squish{
  0%{scale:1}
  18%{scale:1.07 .86}
  42%{scale:.95 1.06}
  64%{scale:1.025 .975}
  84%{scale:.995 1.005}
  100%{scale:1}}
.fl-squish{animation:fl-squish .52s cubic-bezier(.3,.6,.4,1)}
/* La vignette qui s'envole vers le panier (flowly.js envolPanier) : au-dessus
   de l'en-tete fixe, jamais cliquable. */
.fl-envol-panier{position:fixed;z-index:100000;pointer-events:none;margin:0}
.fl-envol-panier img{
  display:block;width:100%;height:100%;object-fit:cover;margin:0;
  border-radius:24%;background:#fff;box-shadow:0 12px 26px -10px rgba(52,48,94,.5)}
@media(prefers-reduced-motion:reduce){.fl-squish{animation:none}}

/* --- 7. La bulle « Ajouté au panier » (cart.php §4, flowly.js bullePanier) - */
/* Remplace l'ouverture automatique du tiroir : une carte blanche sous
   l'icone du panier, pointe comprise, qui descend doucement et s'efface seule. */
.fl-bulle-panier{
  position:fixed;z-index:100001;top:96px;right:16px;width:min(340px,calc(100vw - 24px));
  padding:14px 14px 14px;border-radius:22px;background:#fff;color:var(--fl-ink);
  box-shadow:0 26px 50px -22px rgba(52,48,94,.5),0 2px 8px rgba(52,48,94,.08);
  opacity:0;translate:0 -10px;scale:.97;transform-origin:calc(100% - var(--fl-bulle-pointe,22px)) 0;
  transition:opacity .22s ease,translate .32s var(--fl-ease),scale .32s var(--fl-ease)}
.fl-bulle-panier.est-visible{opacity:1;translate:0 0;scale:1}
.fl-bulle-panier[hidden]{display:none}
.fl-bulle-panier::before{
  content:"";position:absolute;top:-6px;right:var(--fl-bulle-pointe,22px);
  width:14px;height:14px;background:#fff;border-radius:3px;rotate:45deg}
.fl-bulle-panier__fermer{
  position:absolute;top:6px;right:6px;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--fl-muted,#8a86a6);font-size:1.5rem;line-height:1;cursor:pointer}
.fl-bulle-panier__fermer:hover{background:var(--fl-bg);color:var(--fl-ink)}
.fl-bulle-panier__tete{display:flex;align-items:center;gap:12px;padding-right:30px}
.fl-bulle-panier__photo{flex:0 0 56px;width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--fl-bg);margin:0}
.fl-bulle-panier__photo[hidden]{display:none}
.fl-bulle-panier__ok{
  display:flex;align-items:center;gap:.35rem;margin:0 0 .15rem;
  font-size:.8rem;font-weight:800;color:var(--fl-primary)}
.fl-bulle-panier__ok::before{
  content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  background:var(--fl-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.fl-bulle-panier__nom{
  margin:0;font-weight:800;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fl-bulle-panier__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fl-bulle-panier__actions a{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .8rem;
  border-radius:var(--fl-r-pill);font-weight:800;font-size:.9rem;text-decoration:none;
  transition:background .2s ease,color .2s ease}
.fl-bulle-panier__voir{background:var(--fl-bg);color:var(--fl-ink)}
.fl-bulle-panier__voir:hover{background:var(--fl-blue-100);color:var(--fl-ink)}
.fl-bulle-panier__commander{background:var(--fl-primary);color:#fff}
.fl-bulle-panier__commander:hover{background:var(--fl-blue-700);color:#fff}
@media(max-width:600px){.fl-bulle-panier{right:12px;left:12px;width:auto}}
@media(prefers-reduced-motion:reduce){.fl-bulle-panier{transition:opacity .15s ease;translate:none;scale:none}}
/* Le « Voir le panier » que WooCommerce glisse sous le bouton d'une carte
   apres un ajout fait doublon avec la bulle, et faisait grandir la carte. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart,
.fl-carr__item .added_to_cart{display:none !important}

/* --- 8. Questionnaire « Trouver mon objet » (inc/questionnaire.php) -------- */
/* Une question a la fois (flowly.js initQuestionnaire) ; sans script, les
   quatre a la suite. Reponses en grandes cartes (cibles de 56 px et plus),
   la question des gestes avec les dessins du grand menu. */
.fl-quiz{max-width:860px;margin:0 auto}
.fl-quiz__question{border:0;margin:0 0 2.2rem;padding:0;min-width:0}
.fl-quiz.est-pas-a-pas .fl-quiz__question{margin-bottom:1.4rem}
.fl-quiz__question[hidden]{display:none}
.fl-quiz__question legend,.entry-content .fl-quiz__question legend{
  display:block;width:100%;padding:0;margin:0 0 .4rem;text-align:center;outline:none}
.fl-quiz__aide{text-align:center;margin:0 auto 1rem;max-width:52ch;color:var(--fl-body)}
.fl-quiz__choix{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.8rem;margin-top:1.1rem}
.fl-quiz__question--geste .fl-quiz__choix{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.fl-quiz__option{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  min-height:64px;padding:1rem 1.1rem;border-radius:22px;background:#fff;cursor:pointer;
  border:2px solid transparent;box-shadow:0 12px 28px -20px rgba(52,48,94,.4);
  font-weight:800;color:var(--fl-ink);text-align:center;line-height:1.25;
  transition:border-color .2s ease,background .2s ease,transform .25s var(--fl-ease)}
.fl-quiz__option:hover{transform:translateY(-2px);border-color:var(--fl-blue-200)}
.fl-quiz__option input{position:absolute;opacity:0;pointer-events:none}
.fl-quiz__option:has(input:checked){border-color:var(--fl-primary);background:var(--fl-blue-50)}
.fl-quiz__option:has(input:focus-visible){outline:3px solid var(--fl-primary);outline-offset:3px}
.fl-quiz__option img{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:14px;margin:0}
.fl-quiz__question--geste .fl-quiz__option{padding:.6rem .6rem .9rem}
.fl-quiz__progres{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:0 0 1.2rem;
  font-size:.85rem;font-weight:700;color:var(--fl-body)}
.fl-quiz__progres[hidden]{display:none}
.fl-quiz__points{display:flex;gap:.4rem}
.fl-quiz__points i{width:28px;height:6px;border-radius:6px;background:var(--fl-blue-100);transition:background .3s ease}
.fl-quiz__points i.est-fait{background:var(--fl-pervenche)}
.fl-quiz__actions{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}
.fl-quiz__retour{
  min-height:48px;padding:.6rem 1.2rem;border:0;border-radius:var(--fl-r-pill);background:transparent;
  color:var(--fl-ink);font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fl-quiz__retour[hidden],.fl-quiz__valider[hidden]{display:none}
.fl-quiz.est-envoye{opacity:.55;pointer-events:none;transition:opacity .2s ease}
/* Le resultat */
.fl-quiz--resultat{text-align:center}
.fl-quiz--resultat .fl-eyebrow{margin-bottom:.3rem}
.fl-quiz__phrase{max-width:58ch;margin:.4rem auto 1rem;font-size:1.05rem;color:var(--fl-body)}
.fl-quiz__note{max-width:58ch;margin:.2rem auto 1rem;padding:.7rem 1rem;border-radius:16px;
  background:var(--fl-blue-50);color:var(--fl-ink);font-size:.92rem}
.fl-quiz--resultat .woocommerce{margin-top:1.2rem;text-align:left}
.fl-quiz__suite{display:flex;justify-content:center;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.6rem}
.fl-quiz__refaire{font-weight:800;color:var(--fl-ink);text-underline-offset:4px}
/* Deux ou trois cartes au plus : centrees, sans la 4e colonne vide de la grille de la boutique. */
.fl-quiz--resultat .woocommerce ul.products{
  display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),240px)) !important;
  justify-content:center !important}
@media(max-width:600px){
  .fl-quiz--resultat .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.75rem !important}
}
/* Le texte des reponses : le theme pose un gras leger sur les <label> du contenu. */
.entry-content .fl-quiz__option > span,.fl-quiz__option > span{font-weight:800;font-size:1rem;color:var(--fl-ink)}

/* --- 9. Bandeau d'accueil : « Trouver mon objet » en vrai bouton ----------- */
/* Vianney : « le truc doit etre plus mis en avant » (c'etait un lien souligne)
   et « enleve "Choisis par une psychomotricienne" en haut, c'est moche »
   (badge retire dans vitrine.php). Bouton secondaire de la MEME taille que
   « Voir notre boutique » : blanc, bord pervenche, etoile rose qui scintille. */
.fl-accroche__actions{gap:.8rem 1rem}
.fl-bouton-quiz,.entry-content a.fl-bouton-quiz{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.9rem 1.6rem;border-radius:var(--fl-r-pill);
  background:#fff;color:var(--fl-ink);border:2px solid var(--fl-blue-200);
  font-family:var(--fl-font);font-size:1.02rem;font-weight:800;line-height:1.15;text-decoration:none;
  box-shadow:0 10px 22px -16px rgba(52,48,94,.45);
  transition:transform .22s var(--fl-ease),border-color .22s var(--fl-ease),box-shadow .22s var(--fl-ease)}
.fl-bouton-quiz:hover,.entry-content a.fl-bouton-quiz:hover{
  transform:translateY(-2px);border-color:var(--fl-primary);color:var(--fl-ink);
  box-shadow:0 16px 28px -16px rgba(52,48,94,.5)}
.fl-bouton-quiz .fl-deco{width:18px;height:18px;flex:0 0 auto;color:var(--fl-rose)}
@media(prefers-reduced-motion:no-preference){
  .fl-bouton-quiz .fl-deco{animation:fl-scintille 4s var(--fl-ease) infinite}
}
@media(max-width:480px){.fl-accroche__actions .fl-bouton-quiz{flex:1 1 100%}}
.fl-quiz__age{margin:1rem auto 0;font-size:.85rem;color:var(--fl-body)}

/* ==========================================================================
   92. CHARGEMENT : UN ANNEAU PERVENCHE AU LIEU DU VOILE NOIR (25 septembre 2026)
   ========================================================================== */
/* Vianney : « quand on supprime un objet du panier ca fait un drole de menu de
   "chargement" moche ». C'est le blocage natif de WooCommerce (jQuery blockUI) :
   dans le tiroir, un voile NOIR a 60 % sur la ligne (style en ligne, d'ou les
   !important) et, partout, l'icone grise `loader.svg` que la feuille d'Astra
   (woocommerce-grid.css) centre dessus. On garde le mecanisme (il empeche de
   recliquer pendant la requete), on change seulement le dessin :
   - le voile devient un blanc a 60 % qui arrive en fondu. Il est peint par
     ::after, pas par le voile : l'opacite en ligne du voile est forcee a 1,
     sinon elle estomperait aussi l'anneau (et un `!important` fige la
     propriete, plus aucune animation ne peut la toucher) ;
   - l'anneau est celui du « Voir plus » de la boutique (section 5).
   Vaut pour le tiroir, la page panier et la commande.
   Classe doublee : la regle d'Astra pese 3 classes + 1 pseudo-element. */
.woocommerce-js .blockUI.blockOverlay.blockOverlay{
  background:transparent !important;opacity:1 !important;cursor:progress !important;
  border-radius:inherit}
.woocommerce-js .blockUI.blockOverlay.blockOverlay::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.6);
  animation:fl-voile .2s var(--fl-ease) both}
.woocommerce-js .blockUI.blockOverlay.blockOverlay::before{
  z-index:1;box-sizing:border-box;
  width:22px;height:22px;margin:-11px 0 0 -11px;
  background:none;border-radius:50%;
  border:2.5px solid var(--fl-blue-200);border-top-color:var(--fl-primary);
  animation:fl-tourne .7s linear infinite}
/* Dans le tiroir, WooCommerce ne bloque QUE la ligne retiree : l'anneau prend
   la place exacte de la croix (disque de 30 px cale a droite et centre en
   hauteur, section 13 : centre a 15 px du bord, donc 15 - 11 = 4 px), et son
   fond blanc + un halo de 4 px la recouvrent. La croix « devient » le
   chargement : on voit quelle ligne s'en va. */
.widget_shopping_cart .cart_list li > .blockUI.blockOverlay.blockOverlay::before{
  left:auto;right:4px;
  background:#fff;box-shadow:0 0 0 5px #fff}   /* 5 : couvre aussi le disque grossi au survol (x1,08) */
/* Le pointille autour de la croix cliquee : `a:focus{outline:thin dotted}`
   d'Astra (main.min.css), qui s'allume aussi au clic SOURIS. Le lien garde le
   focus pendant toute la requete, le pointille restait donc visible sous le
   voile. Au clavier, l'anneau rose de la section 13 (:focus-visible) reste. */
.woocommerce-cart table.cart td.product-remove a.remove:focus:not(:focus-visible),
.widget_shopping_cart .cart_list li a.remove:focus:not(:focus-visible){outline:0}

/* ==========================================================================
   93. COMPTES CLIENTS : CONNEXION + INSCRIPTION (29 septembre 2026)
   ==========================================================================
   Vianney : « jveux que mes clients créer des comptes et tout », puis
   « compte ou invité, les deux doivent fonctionner ». L'inscription ouverte,
   WooCommerce range connexion et inscription dans #customer_login
   (.u-column1 / .u-column2) ; seule la carte de connexion était habillée
   (section 15) : l'inscription sortait avec le cadre gris de WooCommerce et
   les deux titres flottaient au-dessus des cartes. → Les deux COLONNES
   deviennent deux cartes identiques, les formulaires perdent leur propre cadre.
   Au paiement : « Déjà client ? » ouvert devient une carte, « Créer un
   compte ? » aussi. Les textes ajoutés sont dans inc/comptes.php.
   ⚠️ #customer_login pèse un ID : il bat aussi la mise en une colonne de la
   section 15 (.u-columns.col2-set) → le passage en une colonne est refait ici.
   -------------------------------------------------------------------------- */
.woocommerce-account:not(.logged-in) .entry-content > p:first-child{
  text-align:center !important;max-width:960px;margin:0 auto 1.4rem !important}
.woocommerce-account #customer_login{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
  max-width:960px;width:100% !important;margin:0 auto 3rem !important;align-items:stretch}
/* clearfix de WooCommerce : dans une grille, ces pseudo-éléments deviennent des cases */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after{display:none !important}
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2{
  display:flex !important;flex-direction:column;box-sizing:border-box;
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  box-shadow:var(--fl-sh-2);padding:2rem 2rem 1.7rem !important}
.woocommerce-account #customer_login h2{
  font-size:1.35rem !important;line-height:1.25 !important;margin:0 0 .35rem !important}
.woocommerce-account #customer_login .woocommerce-form-login,
.woocommerce-account #customer_login .woocommerce-form-register{
  flex:1 1 auto;display:flex;flex-direction:column;
  max-width:none;margin:0 !important;padding:0 !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;background:none !important}
.woocommerce-account #customer_login .fl-compte-intro{
  margin:0 0 1.3rem;font-size:.92rem;line-height:1.5;color:var(--fl-muted)}
.woocommerce-account #customer_login .form-row{margin-bottom:1.05rem;padding:0}
/* « Un lien pour choisir votre mot de passe… » et la mention de confidentialité : petits, discrets */
.woocommerce-account #customer_login .woocommerce-form-register > p:not(.form-row):not(.fl-compte-intro),
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p{
  font-size:.86rem;line-height:1.5;color:var(--fl-muted);margin:0 0 .9rem}
/* Le bouton de l'inscription descend en bas de sa carte, pleine largeur comme « Se connecter » */
.woocommerce-account #customer_login .woocommerce-form-register > p.form-row:last-of-type{margin:auto 0 0}
.woocommerce-account #customer_login .woocommerce-form-register__submit{width:100%;margin-top:.3rem}
@media(max-width:760px){
  .woocommerce-account #customer_login{grid-template-columns:1fr;gap:1.1rem}
  .woocommerce-account #customer_login > .u-column1,
  .woocommerce-account #customer_login > .u-column2{padding:1.5rem 1.2rem 1.3rem !important}
}

/* --- Paiement : « Déjà client ? Cliquez ici » ouvert = une carte ---------- */
.woocommerce-checkout form.woocommerce-form-login{
  background:#fff !important;border:1px solid var(--fl-line) !important;
  border-radius:var(--fl-r-lg) !important;box-shadow:none !important;
  padding:1.1rem 1.25rem !important;margin:0 0 1.2rem !important}
.woocommerce-checkout form.woocommerce-form-login > p:first-child{
  margin:0 0 .9rem;font-size:.9rem;line-height:1.5;color:var(--fl-muted)}
.woocommerce-checkout form.woocommerce-form-login .form-row{margin-bottom:.75rem !important}
.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit{
  background:var(--fl-primary-grad) !important;color:#fff !important;border:0 !important;
  border-radius:var(--fl-r-pill) !important;padding:.72rem 1.8rem !important;min-height:44px;
  font-family:var(--fl-font) !important;font-size:.95rem !important;font-weight:600 !important;
  line-height:1.4 !important;text-transform:none !important;
  box-shadow:0 6px 18px rgba(85,101,230,.26) !important;cursor:pointer;margin-top:.4rem !important}
.woocommerce-checkout form.woocommerce-form-login .lost_password{margin:.6rem 0 0;font-size:.88rem}

/* --- Paiement : « Créer un compte ? » dans sa carte, avec son explication - */
.woocommerce-checkout .woocommerce-account-fields{
  background:#fff;border:1px solid var(--fl-line);border-radius:var(--fl-r-lg);
  padding:.85rem 1.15rem;margin:0 0 .8rem}
.woocommerce-checkout .woocommerce-account-fields p.create-account{margin:0 !important}
.woocommerce-checkout .fl-compte-aide{
  margin:.3rem 0 0;padding-left:2.1rem;font-size:.85rem;line-height:1.45;color:var(--fl-muted)}

/* ==========================================================================
   94. BANDEAU DE CONSENTEMENT — mesure d'audience (29 septembre 2026)
   ==========================================================================
   Google Analytics ne se charge qu'après « Accepter » (inc/mesure.php,
   assets/mesure.js). ⚖️ CNIL : refuser doit être aussi simple qu'accepter →
   DEUX BOUTONS IDENTIQUES (même taille, même style, même place), aucune
   couleur qui pousse vers l'un plus que l'autre. Carte discrète en bas à
   gauche : elle ne bloque pas la page (pas de « mur » de cookies) ; sur
   téléphone, pleine largeur en bas. Au-dessus de la barre d'achat collante
   (z-index 98), sous le tiroir du panier et la bulle « Ajouté au panier ».
   -------------------------------------------------------------------------- */
.fl-consent{
  position:fixed;z-index:9990;left:20px;bottom:20px;box-sizing:border-box;
  width:min(410px,calc(100vw - 40px));
  padding:1.15rem 1.25rem 1.2rem;
  background:#fff;color:var(--fl-body);font-family:var(--fl-font);
  border:1px solid var(--fl-line);border-radius:var(--fl-r);
  box-shadow:var(--fl-sh-3);
  opacity:0;translate:0 12px;transition:opacity .25s ease,translate .35s var(--fl-ease)}
.fl-consent[hidden]{display:none}
.fl-consent.est-visible{opacity:1;translate:0 0}
.fl-consent__titre{
  margin:0 0 .35rem;font-family:var(--fl-font-titre);font-weight:1 1000;
  font-size:1.05rem;line-height:1.25;color:var(--fl-ink)}
.fl-consent__texte{margin:0;font-size:.88rem;line-height:1.5;color:var(--fl-body)}
.fl-consent__texte a{color:var(--fl-primary);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.fl-consent__choix{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.fl-consent .fl-consent__btn{
  min-height:44px;margin:0;padding:.6rem 1rem;box-sizing:border-box;
  border-radius:var(--fl-r-pill);cursor:pointer;box-shadow:none;
  font:600 .92rem/1.2 var(--fl-font);letter-spacing:0;text-transform:none;
  background:var(--fl-bg-soft);color:var(--fl-primary-dark);border:1.5px solid var(--fl-blue-200);
  transition:background .18s var(--fl-ease),border-color .18s var(--fl-ease),color .18s var(--fl-ease)}
.fl-consent .fl-consent__btn:hover{background:var(--fl-primary);border-color:var(--fl-primary);color:#fff}
.fl-consent .fl-consent__btn:focus{outline:0}
.fl-consent .fl-consent__btn:focus-visible{outline:3px solid var(--fl-coral-400);outline-offset:2px}
@media(max-width:600px){
  .fl-consent{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;padding:1rem 1.05rem 1.05rem}
}
@media(prefers-reduced-motion:reduce){.fl-consent{transition:none;translate:none}}