/*
Theme Name: Hello Elementor Child — TINY HANDS
Theme URI: https://artofdoing.net
Description: Child theme Hello Elementor pour Tiny Hands (livres & jeux éducatifs pour enfants, Algérie). Univers enfantin coloré et arrondi, polices Fredoka + Nunito (Cairo en AR), panier WooCommerce activé, paiement à la livraison. FR ⇄ AR + RTL.
Author: Art Of Doing
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Palette officielle — extraite du logo Tiny Hands Playbooks (analyse pixel) :
   corail #E85A4A · turquoise #26A79A · jaune doré #F5BB28 · vert #35AC74 */
:root {
  --coral:#E85A4A;  --coral-d:#D24535;   /* « N » de TINY, H et S de HANDS */
  --teal:#26A79A;   --teal-d:#1E8C81;    /* « T » et « D » */
  --yellow:#F5BB28; --yellow-d:#DDA414;  /* « i », « N », étoiles */
  --green:#35AC74;  --green-d:#2A8C5E;   /* « Y » et « A » */
  --orange:#F5BB28;                       /* alias : le logo n'a pas d'orange, on garde le jaune */
  --blue:#26A79A; --purple:#35AC74; --pink:#E85A4A; /* alias sur la marque */
  --ink:#2b2b40; --muted:#6b6b80; --cream:#fff9f3; --card:#fff; --line:#f0e7de;
  --shadow:0 12px 30px rgba(43,43,64,.09); --shadow-s:0 6px 16px rgba(43,43,64,.08);
  --radius:22px; --radius-s:14px;
  --head:'Rubik',system-ui,sans-serif;               /* titres — police du site en ligne */
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif; /* corps */
}
html[dir="rtl"]{ --head:'Cairo',system-ui,sans-serif; --body:'Cairo',system-ui,sans-serif; }

body{ font-family:var(--body); color:var(--ink); background:var(--cream); line-height:1.6; }
h1,h2,h3,h4{ font-family:var(--head); font-weight:600; color:var(--ink); }
a{ color:var(--teal-d); }
img{ max-width:100%; height:auto; }

/* ── PAS DE BLEU AU CLIC ───────────────────────────────────────────────
   Trois mécanismes distincts colorent un lien en bleu, et il faut les
   neutraliser tous les trois — en corriger un seul laisse le problème :

   1. `-webkit-tap-highlight-color` : au TOUCHER, mobile et Chrome posent un
      voile bleuté sur l'élément pressé. C'est la cause la plus fréquente.
   2. `:visited` : une fois la page visitée, le navigateur repasse le lien
      au violet/bleu par défaut si aucune couleur n'est imposée.
   3. `:active` / `:focus` : couleur et anneau de focus bleus par défaut.

   L'anneau de focus n'est PAS supprimé pour autant : il est remplacé plus
   bas par un contour turquoise sur `:focus-visible`, qui ne s'affiche qu'à
   la navigation au clavier. Le retirer complètement rendrait le site
   inutilisable sans souris. */
a, button, input, select, textarea, .button,
.site-navigation a, .th-footer a{
  -webkit-tap-highlight-color:transparent;
}
a:visited{ color:inherit; }
.site-header a:visited, .site-header a:active, .site-header a:focus,
.th-footer a:visited, .th-footer a:active, .th-footer a:focus{
  color:inherit;
}
/* Le menu impose déjà sa couleur : on la maintient dans TOUS les états. */
.site-header .site-navigation .menu > li > a:visited,
.site-header .site-navigation .menu > li > a:active,
.site-header .site-navigation .menu > li > a:focus,
.site-navigation a:visited, .site-navigation a:active, .site-navigation a:focus{
  color:var(--ink) !important;
}
.site-header .site-navigation .menu > li.current-menu-item > a:visited,
.site-header .site-navigation .menu > li.current-menu-item > a:active{
  color:var(--teal-d) !important;
}
/* Le panier reste blanc sur corail, quel que soit l'état. */
.menu-item-th-cart > a:visited, .menu-item-th-cart > a:active,
.menu-item-th-cart > a:focus, .menu-item-th-cart a:visited{
  color:#fff !important;
}
/* Sélection de texte aux couleurs de la marque plutôt qu'au bleu système. */
::selection{ background:rgba(232,90,74,.22); color:var(--ink); }
.th-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- Bandeau annonce ---------- */
.th-topbar{ background:var(--teal); color:#fff;
  font-weight:700; font-size:13.5px; text-align:center; padding:8px 16px; }
.th-topbar span{ margin:0 10px; white-space:nowrap; }

/* ---------- En-tête Hello Elementor ---------- */
/* (Le style complet du header est plus bas — fond opaque, sans flou : voir
   la section « HEADER — une seule ligne, moderne ».) */
.site-header .site-branding .site-title,
.site-header .site-title a{ font-family:var(--head); font-weight:700; color:var(--ink); }

/* ============================================================
   HEADER — une seule ligne, moderne :
   logo à gauche · navigation au centre · langue + panier à droite.
   ============================================================ */
/* PERF — RÈGLE À NE PAS CASSER : pas de `backdrop-filter` ici. Un flou
   d'arrière-plan sur un header COLLANT force le navigateur à recalculer le
   flou à chaque image pendant le défilement → scroll saccadé. C'était la
   cause du « ça plante » signalé. Tout ce qui suit est soit peint une seule
   fois, soit animé sur une surface minuscule.

   NI `overflow:hidden` : le header contient les menus déroulants en position
   absolue — les rogner les rendrait invisibles. */
/* ── HEADER FIXE ──────────────────────────────────────────────────────
   `fixed` (et non `sticky`) : la barre reste visible en permanence, dès le
   haut de page, sans jamais se déplacer.

   Conséquence à gérer : un élément fixe SORT DU FLUX, donc il ne réserve
   plus sa place — le haut de la page passerait dessous. On compense avec
   un padding-top sur <body>, calculé à partir des hauteurs réelles mesurées
   en JS (--th-header-top / --th-header-h). Des valeurs codées en dur seraient
   fausses dès qu'un texte passe sur deux lignes ou qu'on change la langue.
   ────────────────────────────────────────────────────────────────────── */
:root{
  /* --th-header-top : ou COMMENCE le header (= bas du bandeau annonce, qui
     lui-meme descend si la barre d'admin WordPress est affichee).
     --th-header-h   : sa hauteur.
     Ces deux valeurs sont recalculees en JS a partir des dimensions reelles ;
     celles ci-dessous ne servent que le temps du premier rendu. */
  --th-header-top:33px; --th-header-h:88px;
}

.th-chrome{ padding-top:calc(var(--th-header-top) + var(--th-header-h)); }
/* Scope volontaire sur .th-chrome (et non `body`) : /gestion n'affiche NI
   bandeau NI header, mais heritait quand meme de ce padding — soit ~121 px
   de vide en haut d'une page qui n'a aucun header a compenser. */

/* Le bandeau annonce est fixé au-dessus du header. */
.th-topbar{
  position:fixed; top:0; left:0; right:0; z-index:101;
}
/* Barre d'administration WordPress : elle occupe déjà le haut de l'écran
   quand on est connecté. Sans ça, le bandeau passerait dessous. */
body.admin-bar .th-topbar{ top:32px; }
@media(max-width:782px){ body.admin-bar .th-topbar{ top:46px; } }

/* Les ancres (#th-products…) ne doivent pas se retrouver cachées derrière
   la barre fixe : on réserve la hauteur au moment du saut. */
[id]{ scroll-margin-top:calc(var(--th-header-top) + var(--th-header-h) + 14px); }

/* ── UN HAUT DE PAGE STRICTEMENT IDENTIQUE PARTOUT ────────────────────
   Constat : le thème insère un bloc titre `.page-header` (un <h1> nu) sur
   l'accueil, le contact et le panier — mais PAS sur la boutique ni sur les
   fiches produit. Le haut de page paraissait donc nettement plus haut sur
   certaines pages que sur d'autres.

   On le retire visuellement partout. Il n'est PAS supprimé du HTML (pas de
   `display:none`) : le <h1> reste lu par les lecteurs d'écran et pris en
   compte par les moteurs de recherche. Les pages qui ont besoin d'un titre
   visible en affichent un elles-mêmes (le panier et la commande ont leur
   propre bloc `.th-page-head`). */
.th-chrome .page-header{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Exception : panier et commande affichent DÉJÀ leur propre <h1> visible
   (bloc .th-page-head). Garder en plus celui du thème, même masqué, ferait
   deux <h1> identiques sur la même page — mauvais pour le référencement et
   déroutant pour un lecteur d'écran. Ici on le retire vraiment. */
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header{ display:none; }

/* Hauteur du header verrouillée : elle ne doit dépendre ni de la page, ni
   du chargement des polices, ni d'un menu qui passerait sur deux lignes.
   88 px = 68 px de logo + 2 × 10 px de marge interne. */
.site-header .header-inner{ min-height:88px; }
@media(max-width:992px){ .site-header .header-inner{ min-height:66px; } }
@media(max-width:480px){ .site-header .header-inner{ min-height:60px; } }

.site-header{
  padding:0 !important;
  position:fixed; top:var(--th-header-top); left:0; right:0; z-index:100;
  /* Dégradé vertical très doux plutôt qu'un blanc plat : donne de la
     profondeur, et ne coûte rien (peint une fois). */
  background:linear-gradient(180deg,#ffffff 0%,#fffdfa 55%,#fff8f3 100%);
  border-bottom:none;
  transition:box-shadow .25s ease;
}

/* --- Voile coloré aux teintes du logo, qui « respire » ---
   On anime UNIQUEMENT l'opacité : le navigateur réutilise la même couche
   déjà peinte et se contente de la fondre. Aucun repaint. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(232,90,74,.13) 0%,
    rgba(245,187,40,.10) 30%,
    rgba(38,167,154,.13) 62%,
    rgba(53,172,116,.11) 100%);
  animation:thHeadGlow 13s ease-in-out infinite;
}
@keyframes thHeadGlow{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* --- Filet coloré animé en bas du header ---
   Il remplace la bordure grise. Ici on anime `background-position`, ce qui
   provoque bien un repaint — mais sur une bande de 3 px de haut. La surface
   est si petite que le coût est négligeable, contrairement au même effet
   appliqué au header entier. */
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  pointer-events:none;   /* sans ça, cette bande intercepterait les clics sur les 3 px du bas */
  background:linear-gradient(90deg,
    var(--coral),var(--yellow),var(--teal),var(--green),
    var(--coral),var(--yellow),var(--teal),var(--green));
  background-size:200% 100%;
  animation:thHeadLine 14s linear infinite;
}
@keyframes thHeadLine{ from{background-position:0% 0} to{background-position:200% 0} }

/* Au défilement : ombre portée + le voile se calme pour ne pas concurrencer
   le contenu de la page qui passe dessous. */
.site-header.is-scrolled{ box-shadow:0 6px 22px rgba(43,43,64,.10); }
.site-header.is-scrolled::before{ animation-duration:20s; opacity:.45; }

/* Le contenu doit passer AU-DESSUS du voile coloré. */
.site-header .header-inner{
  position:relative; z-index:1;
  display:flex !important; flex-direction:row; align-items:center; flex-wrap:nowrap;
  gap:22px; max-width:1240px; margin:0 auto; width:100%;
  padding:10px 22px; transition:padding .28s ease;
}
/* PAS de changement de hauteur au défilement : la barre doit rester
   strictement immobile. (L'ancien effet réduisait le padding et le logo —
   c'est ce mouvement qu'on supprime. Seule l'ombre portée change, car elle
   ne déplace rien.) */
/* Idem pour le menu mobile, qui est un frère de .header-inner. */
.site-header .site-navigation-dropdown{ z-index:3; }

/* Halo doux derrière le logo : attire l'œil sur la marque sans surcharger. */
.site-header .site-branding{ position:relative; }
.site-header .site-branding::before{
  content:""; position:absolute; z-index:-1;
  inset:-14px -22px;
  background:radial-gradient(60% 80% at 30% 50%,rgba(232,90,74,.14),transparent 70%);
  opacity:.9; pointer-events:none;
}

/* --- Logo --- */
.site-header .site-branding{ display:flex; align-items:center; flex:0 0 auto; margin:0; padding:0; }
.custom-logo-link{ display:block; line-height:0; }
.custom-logo{
  display:block; height:68px; width:auto;
  animation:thLogoIn .6s cubic-bezier(.2,.8,.25,1) both;
  transition:height .28s ease, transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
  /* pas de will-change : il promeut une couche GPU en permanence pour rien */
}
.custom-logo-link:hover .custom-logo{
  transform:scale(1.06) rotate(-2deg);
  filter:drop-shadow(0 6px 14px rgba(232,90,74,.25));
}
@keyframes thLogoIn{
  0%  { opacity:0; transform:translateX(-10px) scale(.92); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}

/* --- Navigation sur la même ligne (DESKTOP uniquement : en mobile, Hello
       Elementor masque la nav derrière son bouton — ne pas forcer display) --- */
@media(min-width:901px){
  .site-header .site-navigation{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; border:none; margin:0; }
  .site-header .site-navigation .menu{
    display:flex; flex-wrap:nowrap; align-items:center; gap:2px;
    margin:0; padding:0; list-style:none; width:100%;
  }
}
.site-header .site-navigation .menu > li > a{
  position:relative; padding:10px 14px !important; border-radius:12px;
  font-weight:700; font-size:14.5px; white-space:nowrap; color:var(--ink) !important;
  transition:color .18s ease, background .18s ease;
}
/* Soulignement animé aux couleurs de la marque */
.site-header .site-navigation .menu > li > a::before{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--yellow),var(--teal),var(--green));
  transform:scaleX(0); transform-origin:center; transition:transform .28s cubic-bezier(.34,1.4,.64,1);
}
.site-header .site-navigation .menu > li > a:hover::before,
.site-header .site-navigation .menu > li.current-menu-item > a::before{ transform:scaleX(1); }
.site-header .site-navigation .menu > li > a:hover{ background:rgba(38,167,154,.07); }
.site-header .site-navigation .menu > li.current-menu-item > a{ color:var(--teal-d) !important; }

/* Langue + panier poussés à droite */
.menu-item-aod-lang{ margin-inline-start:auto; }
.menu-item-aod-lang > a, .menu-item-aod-lang{ font-weight:800; }
.menu-item-th-cart > a{
  background:var(--coral) !important; color:#fff !important; border-radius:999px;
  padding:9px 16px !important; box-shadow:0 6px 16px rgba(232,90,74,.32);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .2s ease;
}
.menu-item-th-cart > a::before{ display:none; }
.menu-item-th-cart > a:hover{ background:var(--coral-d) !important; transform:translateY(-2px); box-shadow:0 10px 22px rgba(232,90,74,.42); }
.th-cart-count{ background:#fff; color:var(--coral-d); }

@media(max-width:1100px){
  .site-header .site-navigation .menu > li > a{ padding:9px 10px !important; font-size:13.5px; }
  .custom-logo{ height:58px; }
}
/* (Les tailles de logo et l'espacement de l'en-tête en petit écran sont
   définis dans la section MOBILE, alignés sur le vrai seuil de 992 px.) */

/* ---------- Logo (footer) ---------- */
.th-footer__logo{
  max-height:74px; width:auto; display:block; margin-bottom:12px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.th-footer__logo:hover{ transform:translateY(-4px) scale(1.04); }
/* Filet coloré rappelant les 4 couleurs de la marque */
.th-footer{ border-top:5px solid transparent;
  border-image:linear-gradient(90deg,var(--coral) 0 25%,var(--yellow) 25% 50%,var(--teal) 50% 75%,var(--green) 75% 100%) 1; }
.th-topbar{ background:var(--teal); }

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce){
  .custom-logo, .th-footer__logo{ animation:none !important; transition:none !important; }
  .custom-logo-link::after{ animation:none; opacity:0; }
  .th-hero .th-emojis span{ animation:none; }
}
header .site-navigation ul, .site-navigation .menu{ gap:4px; align-items:center; }
.site-navigation a{ font-weight:700; color:var(--ink)!important; padding:9px 15px!important;
  border-radius:999px; transition:background .12s,color .12s; }
/* Survol et page courante : turquoise très pâle, texte aux couleurs de la marque.
   AVANT : `background:var(--ink); color:#fff` — soit un bleu-nuit #2b2b40 presque
   noir derrière « Accueil », « Par âge », « Par type ». Vestige d'une version
   antérieure du menu, qui contredisait déjà les règles plus haut (survol
   turquoise pâle + soulignement arc-en-ciel) et jurait avec l'univers coloré
   du site.
   Le menu MOBILE utilisait déjà ce traitement turquoise : les deux menus sont
   désormais identiques.
   `> a` et non ` a` : sans le chevron, un parent marqué « page courante »
   colorait aussi tous les liens de son sous-menu. */
.site-navigation a:hover,
.site-navigation .current-menu-item > a{
  background:rgba(38,167,154,.10);
  color:var(--teal-d)!important;
}

/* Bouton panier dans le menu */
.menu-item-th-cart a{ background:var(--coral)!important; color:#fff!important; }
.menu-item-th-cart a:hover{ background:var(--coral-d)!important; }
.th-cart-count{ background:#fff; color:var(--coral-d); border-radius:999px; padding:0 7px;
  font-size:12px; font-weight:800; margin-inline-start:6px; }
.menu-item-aod-lang a, .menu-item-th-cart a{ display:inline-flex; align-items:center; }

/* ---------- Boutons ---------- */
.button, button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .button.alt, input[type="submit"]{
  background:var(--ink)!important; color:#fff!important; font-family:var(--body);
  font-weight:800!important; border:none!important; border-radius:12px!important;
  padding:12px 20px!important; transition:transform .1s,background .12s!important; box-shadow:none!important; }
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover{
  background:var(--coral)!important; transform:translateY(-2px); }
.woocommerce .button.alt, .single_add_to_cart_button{ background:var(--coral)!important; font-size:17px!important; padding:15px 28px!important; border-radius:16px!important; }
.woocommerce .button.alt:hover{ background:var(--coral-d)!important; }

/* ---------- Boutique : héro + atouts (injectés) ---------- */
.th-hero{ position:relative; overflow:hidden; border-radius:34px; margin:26px auto; max-width:1160px;
  padding:48px 44px; background:radial-gradient(120% 140% at 100% 0%,#fff4e6 0%,#ffe3e3 45%,#e7f5ff 100%);
  box-shadow:var(--shadow); }
.th-hero h1{ font-size:clamp(28px,4.4vw,46px); max-width:16ch; margin:0 0 14px; }
.th-hero p{ font-size:18px; color:var(--muted); max-width:44ch; margin:0 0 24px; }
.th-hero .th-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--coral); color:#fff!important;
  font-family:var(--head); font-weight:600; font-size:18px; padding:14px 30px; border-radius:999px;
  box-shadow:0 10px 22px rgba(242,75,75,.32); }
.th-hero .th-emojis{ position:absolute; inset-inline-end:40px; top:50%; transform:translateY(-50%); font-size:64px; }
.th-hero .th-emojis span{ display:inline-block; margin:0 4px; animation:thfloat 4s ease-in-out infinite; }
.th-hero .th-emojis span:nth-child(2){ animation-delay:.6s } .th-hero .th-emojis span:nth-child(3){ animation-delay:1.2s }
@keyframes thfloat{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
.th-perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1160px; margin:0 auto 10px; }
.th-perk{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); padding:14px 16px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-s); }
.th-perk .e{ font-size:26px } .th-perk b{ display:block; font-size:14px } .th-perk small{ color:var(--muted); font-size:12.5px }

/* ---------- Titre de la boutique ---------- */
.woocommerce-products-header{ text-align:center; padding:16px 0 4px; }
.woocommerce-products-header__title, .woocommerce .page-title{ font-size:clamp(26px,3.6vw,38px)!important; }
.th-shop-subtitle{ text-align:center; color:var(--muted); font-size:16px; margin:6px auto 20px; max-width:52ch; }

/* ---------- Grille produits WooCommerce ---------- */
/* Grille adaptative : le nombre de colonnes découle de la largeur disponible
   (`auto-fill`), il n'est plus décidé par des paliers. Une carte ne descend
   jamais sous 230px, donc le visuel produit reste lisible sur toute taille
   d'écran — y compris les largeurs intermédiaires (tablette paysage, fenêtre
   réduite, écran large) que trois points de rupture ne couvraient pas. */
.woocommerce ul.products{ display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; margin:0!important; }
.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;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-s); transition:transform .14s,box-shadow .14s; padding:0!important; display:flex; flex-direction:column; }
.woocommerce ul.products li.product:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.woocommerce ul.products li.product a img{ margin:0!important; border-radius:0; background:linear-gradient(135deg,#fff4e6,#e7f5ff);
  aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--head)!important;
  font-size:16.5px!important; font-weight:600!important; padding:14px 16px 4px!important; color:var(--ink); }
.woocommerce ul.products li.product .price{ padding:0 16px; color:var(--ink)!important; font-family:var(--head); font-weight:700; font-size:18px; }
.woocommerce ul.products li.product .price del{ color:var(--muted); font-weight:600; font-size:14px; margin-inline-end:6px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--coral-d); }
.woocommerce ul.products li.product .star-rating{ margin:8px 16px; color:var(--yellow); }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{
  margin:auto 16px 16px!important; text-align:center; }
.woocommerce span.onsale{ background:var(--coral)!important; color:#fff!important; border-radius:999px!important;
  font-weight:800; min-height:auto; min-width:auto; padding:5px 12px; top:12px; inset-inline-start:12px; margin:0; }

/* ---------- Fiche produit ---------- */
.woocommerce div.product .product_title{ font-size:clamp(24px,3.4vw,34px); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--coral-d)!important; font-family:var(--head); font-weight:700; font-size:26px; }
.woocommerce .quantity input.qty{ border:2px solid var(--line); border-radius:12px; padding:12px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ border-radius:999px; background:#fff; }
.th-reassure{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.th-reassure span{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:700; font-size:13px; }

/* ---------- Panier & Checkout ---------- */
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review, .woocommerce form.checkout #payment{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-s); }
.woocommerce table.shop_table{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--teal)!important; border-radius:12px; }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--teal)!important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select,
.select2-container--default .select2-selection--single{ border:2px solid var(--line)!important; border-radius:12px!important; padding:12px 14px!important; min-height:48px; }

/* ---------- Pied de page ---------- */
.th-footer{ background:var(--ink); color:#cfcfe0; margin-top:50px; }
.th-footer__inner{ max-width:1200px; margin:0 auto; padding:48px 20px 30px; display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr; gap:30px; }
.th-footer h4{ color:#fff; font-size:18px; margin:0 0 14px; }
.th-footer a{ color:#b8b8cc!important; display:block; padding:5px 0; font-size:14.5px; }
.th-footer a:hover{ color:var(--orange)!important; }
.th-footer__name{ font-family:var(--head); font-weight:700; font-size:24px; color:#fff; }
.th-footer__reassure li{ list-style:none; color:#b8b8cc; padding:5px 0; }
/* Deux mentions sur une ligne : copyright du client à gauche, signature de
   l'agence à droite. `flex-wrap` plutôt qu'une media query — sur écran étroit
   les deux passent l'une sous l'autre, centrées, sans règle supplémentaire. */
.th-footer__bar{ border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:16px; font-size:13px; color:#9a9ab5;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px; }
/* `display` forcé : le pied de page met ses liens en `block` (colonne de
   navigation), ce dont hérite la signature — « Réalisé par » et « Art Of Doing »
   se retrouvaient sur deux lignes. */
.th-footer__by{ display:inline-flex; align-items:baseline; gap:6px; }
.th-footer__by a{
  display:inline; color:#cfcfe0; text-decoration:none; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
/* Turquoise de la marque au survol : le lien se distingue du texte gris sans
   attirer l'œil au repos — c'est une signature, pas un appel à l'action. */
.th-footer__by a:hover{ color:var(--teal); border-color:var(--teal); }
.th-footer ul{ margin:0; padding:0; }

/* ---------- Responsive ---------- */
@media(max-width:980px){
  /* (colonnes produits : plus de règle ici, `auto-fill` gère la transition) */
  .th-perks{ grid-template-columns:repeat(2,1fr); }
  .th-hero .th-emojis{ display:none; }
  .th-footer__inner{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  /* Sous 640px, `auto-fill` ne tiendrait qu'une colonne : on force 2 cartes
     côte à côte, ce qu'attend un acheteur mobile, jusqu'à ce que la largeur
     ne le permette plus (voir la règle 380px). */
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr)!important; gap:14px; }
  .th-hero{ padding:32px 22px; border-radius:24px; }
  .th-footer__inner{ grid-template-columns:1fr; }
}

/* ---------- Menus déroulants (Par âge ▾ / Par type ▾) ---------- */
.site-navigation .menu-item-has-children,
nav .menu-item-has-children{ position:relative; }
.site-navigation .menu-item-has-children > a::after,
nav .menu-item-has-children > a::after{ content:" ▾"; font-size:11px; opacity:.7; }
.site-navigation ul.sub-menu, nav ul.sub-menu{
  position:absolute; top:100%; inset-inline-start:0; min-width:230px; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:all .16s; z-index:50; list-style:none; margin:6px 0 0; }
.site-navigation .menu-item-has-children:hover > ul.sub-menu,
nav .menu-item-has-children:hover > ul.sub-menu,
.menu-item-has-children:focus-within > ul.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.site-navigation ul.sub-menu a, nav ul.sub-menu a{
  display:block; padding:10px 14px!important; border-radius:10px; font-size:14px; white-space:nowrap; color:var(--ink)!important; }
.site-navigation ul.sub-menu a:hover, nav ul.sub-menu a:hover{ background:var(--cream); color:var(--coral-d)!important; }
html[dir="rtl"] .site-navigation ul.sub-menu, html[dir="rtl"] nav ul.sub-menu{ inset-inline-start:auto; inset-inline-end:0; }
/* 992 px (et non 900) : c'est LE seuil où Hello Elementor bascule sur le
   menu hamburger. Entre 901 et 992 px, les sous-menus du menu mobile
   restaient positionnés en absolu — donc superposés au lieu d'être empilés. */
@media(max-width:992px){
  .site-navigation ul.sub-menu, nav ul.sub-menu{ position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background:transparent; padding-inline-start:16px; }
}

/* ---------- Titres de sections (accueil) ---------- */
.th-sec-title{ text-align:center; font-size:clamp(24px,3.4vw,32px); margin:44px 0 18px; }
.th-home-cta{ text-align:center; background:linear-gradient(135deg,#fff4e6,#ffe3e3); border-radius:28px;
  padding:40px 24px; margin:50px 0 10px; }
.th-home-cta h2{ font-size:clamp(22px,3vw,30px); margin-bottom:18px; }

/* ---------- Tuiles de catégories (product_categories) ---------- */
.woocommerce ul.products li.product-category{ text-align:center; }
.woocommerce ul.products li.product-category a img{ aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  font-family:var(--head)!important; font-size:18px!important; padding:14px 10px 6px!important; }
.woocommerce ul.products li.product-category .count{ background:var(--cream); border-radius:999px;
  padding:2px 12px; color:var(--muted); font-weight:800; font-size:12.5px; }

/* ---------- Fiche produit : produits similaires + réassurance ---------- */
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2{
  font-family:var(--head); font-size:26px; text-align:center; margin:40px 0 20px; }
.woocommerce div.product form.cart{ margin-bottom:14px; }
.single-product .th-reassure{ margin-top:16px; }
.woocommerce div.product .woocommerce-product-gallery{ border-radius:var(--radius); overflow:hidden; }
.woocommerce div.product div.images img{ border-radius:var(--radius); }
@media(max-width:640px){
  .woocommerce div.product .summary{ margin-top:16px; }
  .th-sec-title{ margin:32px 0 14px; }
}

/* ---------- Avis produits (reviews) ---------- */
.woocommerce #reviews h2, .woocommerce #reviews h3{ font-family:var(--head); }
.woocommerce #reviews #comments ol.commentlist{ margin:0; padding:0; }
.woocommerce #reviews #comments ol.commentlist li{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-s); padding:16px 18px; margin-bottom:14px; list-style:none; }
.woocommerce #reviews #comments ol.commentlist li .comment-text{ margin:0; border:none; padding:0; }
.woocommerce #reviews #comments ol.commentlist li img.avatar{ width:44px; height:44px; border-radius:50%;
  border:2px solid var(--line); padding:0; position:static; float:none; margin-inline-end:12px; }
.woocommerce #reviews .comment-form-rating .stars a{ color:var(--yellow); }
.woocommerce #reviews .star-rating span::before, .woocommerce .star-rating span::before{ color:var(--yellow); }
.woocommerce #review_form_wrapper{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-s); }
.woocommerce #review_form #respond input#submit{ background:var(--coral)!important; font-size:16px!important;
  padding:13px 24px!important; border-radius:14px!important; }
.woocommerce #review_form #respond input#submit:hover{ background:var(--coral-d)!important; }
.woocommerce #review_form #respond textarea, .woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"]{ border:2px solid var(--line); border-radius:12px; padding:12px 14px; width:100%; }
.woocommerce #reviews .comment-form-rating label{ font-weight:800; display:block; margin-bottom:6px; }
.th-reviews-cta{ text-align:center; background:linear-gradient(135deg,#fff4e6,#e7f5ff); border-radius:var(--radius);
  padding:16px; margin-bottom:18px; font-weight:700; color:var(--ink); }

/* ---------- RTL ---------- */
html[dir="rtl"] .woocommerce ul.products li.product .button{ text-align:center; }
html[dir="rtl"] .woocommerce #reviews #comments ol.commentlist li img.avatar{ float:none; }
html[dir="rtl"] .th-hero .th-emojis{ inset-inline-end:auto; inset-inline-start:40px; }


/* ════════════════════════════════════════════════════════════════════
   DESIGN MODERNE & ANIMATIONS
   ────────────────────────────────────────────────────────────────────
   RÈGLE DE PERF tenue partout ici : on n'anime QUE `transform` et
   `opacity`. Ce sont les deux seules propriétés que le navigateur peut
   animer sur le GPU sans refaire la mise en page ni repeindre. Animer
   width/height/top/box-shadow/filter provoque un recalcul par image
   → c'est exactement ce qui faisait ramer le site avant.
   ════════════════════════════════════════════════════════════════════ */

html{ scroll-behavior:smooth; }

/* --- Accessibilité clavier : anneau de focus visible et net --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:10px;
}

/* ─── 1. Apparition au défilement ────────────────────────────────────
   Les éléments montent et se révèlent quand ils entrent dans l'écran.
   La classe .th-in est posée par un IntersectionObserver (pas de
   listener de scroll : le navigateur fait le travail nativement). */
.th-reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.28,1);
}
.th-reveal.th-in{ opacity:1; transform:translate3d(0,0,0); }
/* Cascade : chaque élément d'un groupe part légèrement après le précédent */
.th-reveal[style*="--d"]{ transition-delay:var(--d); }

/* ─── 2. Héro : dégradé vivant + entrée en cascade ───────────────── */
.th-hero{
  background:linear-gradient(120deg,#fff4e6,#ffe7e3,#e6f6f4,#eaf7ee,#fff4e6);
  background-size:300% 300%;
  animation:thMesh 22s ease-in-out infinite;
}
@keyframes thMesh{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Halos colorés flottants — rastérisés une fois, seulement déplacés ensuite */
.th-hero::before, .th-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  opacity:.5; z-index:0;
}
.th-hero::before{
  width:340px; height:340px; top:-120px; inset-inline-end:-80px;
  background:radial-gradient(circle,rgba(232,90,74,.35),transparent 68%);
  animation:thBlobA 16s ease-in-out infinite;
}
.th-hero::after{
  width:300px; height:300px; bottom:-130px; inset-inline-start:-70px;
  background:radial-gradient(circle,rgba(38,167,154,.32),transparent 68%);
  animation:thBlobB 19s ease-in-out infinite;
}
@keyframes thBlobA{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-34px,30px,0) scale(1.14)} }
@keyframes thBlobB{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(30px,-26px,0) scale(1.1)} }
/* Le contenu passe au-dessus des halos */
.th-hero h1, .th-hero p, .th-hero .th-cta, .th-hero .th-emojis{ position:relative; z-index:1; }

.th-hero h1{ animation:thUp .7s cubic-bezier(.22,.8,.28,1) both; }
.th-hero p { animation:thUp .7s cubic-bezier(.22,.8,.28,1) .12s both; }
.th-hero .th-cta{ animation:thUp .7s cubic-bezier(.22,.8,.28,1) .24s both; }
@keyframes thUp{ from{opacity:0; transform:translate3d(0,22px,0)} to{opacity:1; transform:none} }

/* CTA du héro : halo qui respire + rebond au survol */
.th-hero .th-cta{
  position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.th-hero .th-cta::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(232,90,74,.5);
  animation:thPulse 2.6s ease-out infinite;
}
@keyframes thPulse{ 0%{box-shadow:0 0 0 0 rgba(232,90,74,.45)} 70%,100%{box-shadow:0 0 0 20px rgba(232,90,74,0)} }
.th-hero .th-cta:hover{ transform:translateY(-3px) scale(1.03); }

/* ─── 3. Atouts : lévitation + icône qui rebondit ───────────────── */
.th-perk{
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.th-perk:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal); }
.th-perk .e{ display:inline-block; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.th-perk:hover .e{ transform:scale(1.25) rotate(-8deg); }

/* ─── 4. Cartes produit : zoom image + bouton qui monte ─────────── */
.woocommerce ul.products li.product{
  position:relative;
  transition:transform .3s cubic-bezier(.22,.8,.28,1), box-shadow .3s ease, border-color .3s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-8px); box-shadow:0 20px 40px rgba(43,43,64,.14); border-color:transparent;
}
/* Liseré coloré qui se dessine en haut de la carte au survol */
.woocommerce ul.products li.product::after{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background:linear-gradient(90deg,var(--coral),var(--yellow),var(--teal),var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.8,.28,1);
}
html[dir="rtl"] .woocommerce ul.products li.product::after{ transform-origin:right; }
.woocommerce ul.products li.product:hover::after{ transform:scaleX(1); }

/* L'image zoome dans son cadre (le cadre, lui, ne bouge pas) */
.woocommerce ul.products li.product > a:first-of-type,
.woocommerce ul.products li.product .woocommerce-loop-product__link{ display:block; overflow:hidden; }
.woocommerce ul.products li.product a img{
  transition:transform .5s cubic-bezier(.22,.8,.28,1);
}
.woocommerce ul.products li.product:hover a img{ transform:scale(1.07); }

/* Le bouton « Ajouter » glisse vers le haut au survol */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.woocommerce ul.products li.product:hover .button{ transform:translateY(-3px); }

/* Badge promo : petit battement discret */
.woocommerce span.onsale{ animation:thBadge 3.4s ease-in-out infinite; transform-origin:center; }
@keyframes thBadge{ 0%,88%,100%{transform:scale(1)} 92%{transform:scale(1.12)} 96%{transform:scale(.97)} }

/* ─── 5. Boutons : reflet qui balaie au survol ──────────────────── */
.button, button, .woocommerce a.button, .woocommerce button.button,
.woocommerce .button.alt, .single_add_to_cart_button{
  position:relative; overflow:hidden; isolation:isolate;
}
.button::after, .woocommerce a.button::after, .woocommerce button.button::after,
.woocommerce .button.alt::after, .single_add_to_cart_button::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; z-index:-1;
  left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .6s ease;
}
.button:hover::after, .woocommerce a.button:hover::after, .woocommerce button.button:hover::after,
.woocommerce .button.alt:hover::after, .single_add_to_cart_button:hover::after{ transform:translateX(360%) skewX(-20deg); }

/* Retour tactile au clic */
.button:active, button:active, .woocommerce a.button:active,
.woocommerce button.button:active, .woocommerce .button.alt:active{ transform:translateY(0) scale(.97); }

/* ─── 6. Panier : le compteur tressaute à chaque ajout ──────────── */
.th-cart-count{ display:inline-block; transition:transform .2s ease; }
.th-cart-count.th-bump{ animation:thBump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes thBump{ 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* ─── 7. Titres de section : trait coloré qui se déploie ────────── */
.th-sec-title{ position:relative; padding-bottom:14px; }
.th-sec-title::after{
  content:""; position:absolute; left:50%; bottom:0; width:70px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--coral),var(--yellow),var(--teal),var(--green));
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform .6s cubic-bezier(.22,.8,.28,1) .15s;
}
.th-sec-title.th-in::after{ transform:translateX(-50%) scaleX(1); }

/* ─── 8. Tuiles de catégories : le titre se soulève ─────────────── */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}
.woocommerce ul.products li.product-category:hover h2.woocommerce-loop-category__title{
  transform:translateY(-3px); color:var(--coral-d);
}

/* ─── 9. Pied de page : les liens glissent au survol ────────────── */
.th-footer a{ transition:transform .22s ease, color .22s ease; }
.th-footer a:hover{ transform:translateX(5px); }
html[dir="rtl"] .th-footer a:hover{ transform:translateX(-5px); }
.th-footer__reassure li{ transition:transform .22s ease; }
.th-footer__reassure li:hover{ transform:translateX(4px); }

/* ─── 10. Menus déroulants : ouverture plus souple ──────────────── */
.site-navigation ul.sub-menu, nav ul.sub-menu{
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.8,.28,1), visibility .22s;
  transform:translate3d(0,10px,0) scale(.98); transform-origin:top center;
}
.site-navigation .menu-item-has-children:hover > ul.sub-menu,
nav .menu-item-has-children:hover > ul.sub-menu,
.menu-item-has-children:focus-within > ul.sub-menu{ transform:translate3d(0,0,0) scale(1); }
.site-navigation ul.sub-menu a, nav ul.sub-menu a{ transition:background .18s ease, transform .18s ease, color .18s ease; }
.site-navigation ul.sub-menu a:hover, nav ul.sub-menu a:hover{ transform:translateX(4px); }
html[dir="rtl"] .site-navigation ul.sub-menu a:hover, html[dir="rtl"] nav ul.sub-menu a:hover{ transform:translateX(-4px); }
@media(max-width:992px){
  .site-navigation ul.sub-menu, nav ul.sub-menu{ transform:none; }
}

/* ─── 11. Bandeau annonce : le texte défile en boucle ───────────── */
.th-topbar{ overflow:hidden; }
.th-topbar span{ display:inline-block; }

/* ─── 12. Fiche produit : galerie et prix ───────────────────────── */
.woocommerce div.product div.images img{ transition:transform .5s cubic-bezier(.22,.8,.28,1); }
.woocommerce div.product div.images:hover img{ transform:scale(1.03); }
.woocommerce div.product .summary > *{ animation:thUp .6s cubic-bezier(.22,.8,.28,1) both; }
.woocommerce div.product .summary > *:nth-child(2){ animation-delay:.06s }
.woocommerce div.product .summary > *:nth-child(3){ animation-delay:.12s }
.woocommerce div.product .summary > *:nth-child(4){ animation-delay:.18s }
.th-reassure span{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease; }
.th-reassure span:hover{ transform:translateY(-3px); border-color:var(--teal); }

/* ─── 13. Avis : les cartes se soulèvent ────────────────────────── */
.woocommerce #reviews #comments ol.commentlist li{
  transition:transform .25s ease, box-shadow .25s ease;
}
.woocommerce #reviews #comments ol.commentlist li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-s); }

/* ─── 14. Bloc CTA d'accueil : dégradé animé ────────────────────── */
.th-home-cta{
  background:linear-gradient(120deg,#fff4e6,#ffe7e3,#e6f6f4,#fff4e6);
  background-size:300% 300%; animation:thMesh 20s ease-in-out infinite;
}

/* ─── 15. Champs de formulaire : mise en avant à la saisie ─────── */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce #review_form #respond textarea:focus,
.woocommerce #review_form #respond input[type="text"]:focus,
.woocommerce #review_form #respond input[type="email"]:focus{
  border-color:var(--teal)!important; outline:none;
}

/* ════════════════════════════════════════════════════════════════════
   FOND ANIMÉ DU SITE
   ────────────────────────────────────────────────────────────────────
   POURQUOI CETTE STRUCTURE : animer un dégradé sur `body` (via
   background-position) obligerait le navigateur à REPEINDRE toute la
   fenêtre à chaque image — c'est le pire cas possible en plein écran.
   À la place : une couche fixe, peinte UNE seule fois, dans laquelle on
   ne déplace que des formes en `transform`. Le GPU compose, le CPU ne
   repeint rien. `position:fixed` évite aussi tout recalcul au scroll.
   ════════════════════════════════════════════════════════════════════ */
body{ background:linear-gradient(180deg,#fffdfa 0%,var(--cream) 40%,#fef7f4 100%); }

.th-bg{
  position:fixed; inset:0; z-index:-1;   /* derrière le contenu, devant le fond du body */
  overflow:hidden; pointer-events:none;  /* ne bloque jamais un clic */
  /* Isole la couche : ses animations ne peuvent pas déclencher de recalcul
     ailleurs dans la page. On évite `strict` (qui ajoute la containment de
     TAILLE) : la couche tire ses dimensions de `inset:0`, inutile de risquer
     qu'elle se réduise à zéro sur un navigateur qui l'interprète autrement. */
  contain:layout paint style;
}

/* --- L'IMAGE de fond : dégradé « mesh » généré aux couleurs du logo ---
   Elle est portée par un élément DÉDIÉ (et non par .th-bg) pour pouvoir
   l'animer sans entraîner la trame et le voile qui, eux, doivent rester
   fixes. Débordement de 8 % de chaque côté : le lent zoom/glissement ne
   doit jamais laisser apparaître un bord blanc. */
.th-bg__mesh{
  position:absolute; inset:-8%;
  background:url(assets/img/bg-mesh.webp) center/cover no-repeat;
  animation:thMeshMove 48s ease-in-out infinite;
  will-change:transform;
}
@keyframes thMeshMove{
  0%,100%{ transform:scale(1.04) translate3d(0,0,0); }
  33%    { transform:scale(1.12) translate3d(-2%,1.5%,0); }
  66%    { transform:scale(1.08) translate3d(2%,-1%,0); }
}

/* --- La TRAME de formes (étoiles, ronds, croix, anneaux) ---
   L'image est répétable sans couture : en la faisant glisser d'exactement
   une tuile (300 px) puis en recommençant, le mouvement est infini et
   parfaitement continu — l'œil ne voit jamais le « saut ». */
.th-bg__tile{
  position:absolute; inset:-320px;
  background:url(assets/img/bg-tile.webp) 0 0 repeat;
  background-size:300px 300px;
  opacity:.85;
  animation:thTileDrift 90s linear infinite;
  will-change:transform;
}
@keyframes thTileDrift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(300px,300px,0); }
}

/* --- Bulles colorées qui dérivent lentement --- */
.th-bg i{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;   /* justifié ICI : ces formes bougent en permanence,
                              la couche GPU sert à chaque image (contrairement au
                              logo, où elle était réservée pour rien) */
}
.th-bg i:nth-child(1){
  width:520px; height:520px; top:-140px; inset-inline-start:-120px;
  background:radial-gradient(circle,rgba(232,90,74,.20),transparent 70%);
  animation:thDrift1 34s ease-in-out infinite;
}
.th-bg i:nth-child(2){
  width:460px; height:460px; top:18%; inset-inline-end:-150px;
  background:radial-gradient(circle,rgba(38,167,154,.20),transparent 70%);
  animation:thDrift2 41s ease-in-out infinite;
}
.th-bg i:nth-child(3){
  width:400px; height:400px; bottom:6%; inset-inline-start:8%;
  background:radial-gradient(circle,rgba(245,187,40,.18),transparent 70%);
  animation:thDrift3 37s ease-in-out infinite;
}
.th-bg i:nth-child(4){
  width:340px; height:340px; bottom:-100px; inset-inline-end:12%;
  background:radial-gradient(circle,rgba(53,172,116,.18),transparent 70%);
  animation:thDrift4 45s ease-in-out infinite;
}
.th-bg i:nth-child(5){
  width:300px; height:300px; top:52%; inset-inline-start:38%;
  background:radial-gradient(circle,rgba(232,90,74,.13),transparent 70%);
  animation:thDrift2 39s ease-in-out infinite reverse;
}
@keyframes thDrift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)}      50%{transform:translate3d(90px,70px,0) scale(1.18)} }
@keyframes thDrift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)}      50%{transform:translate3d(-80px,90px,0) scale(1.14)} }
@keyframes thDrift3{ 0%,100%{transform:translate3d(0,0,0) scale(1.1)}    50%{transform:translate3d(70px,-80px,0) scale(1)} }
@keyframes thDrift4{ 0%,100%{transform:translate3d(0,0,0) scale(1)}      50%{transform:translate3d(-60px,-70px,0) scale(1.2)} }

/* --- Voile pour garder le texte parfaitement lisible par-dessus ---
   Plus léger qu'avant : l'image « mesh » est déjà pastel, un voile trop
   opaque l'effacerait complètement. */
.th-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(125% 95% at 50% 32%,rgba(255,255,255,.34),rgba(255,255,255,.62));
}

/* Mobile : on allège (petit GPU, batterie). L'image mesh, elle, RESTE —
   c'est elle qui porte l'identité visuelle ; ce sont les surcouches
   animées qu'on réduit. */
@media(max-width:900px){
  .th-bg i:nth-child(3), .th-bg i:nth-child(5){ display:none; }
  .th-bg i{ opacity:.65; }
  .th-bg__tile{ opacity:.5; animation-duration:140s; }
  .th-bg__mesh{ animation-duration:70s; }
}

/* Les blocs de contenu restent lisibles au-dessus du fond animé. */
.th-perk, .woocommerce ul.products li.product,
.woocommerce #reviews #comments ol.commentlist li,
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review,
.woocommerce #review_form_wrapper{ background:#fff; }

/* ─── 16. Chargement de page : voile qui s'estompe ──────────────── */
body{ animation:thFadeIn .4s ease both; }
@keyframes thFadeIn{ from{opacity:0} to{opacity:1} }

/* ════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — respect de « réduire les animations » du système.
   Tout est neutralisé : rien ne bouge, mais rien n'est invisible non
   plus (les éléments à révéler sont remis opaques).
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   PAGE PANIER — mise en page en deux colonnes
   ────────────────────────────────────────────────────────────────────
   Le panier WooCommerce empile par défaut : articles, puis récapitulatif
   tout en bas. Sur grand écran, le bouton « Commander » se retrouve donc
   hors de vue. On passe en deux colonnes avec un récapitulatif COLLANT :
   le total et le bouton restent visibles pendant qu'on ajuste le panier.
   ════════════════════════════════════════════════════════════════════ */
@media(min-width:993px){
  .woocommerce-cart .woocommerce{
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);
    gap:26px; align-items:start; max-width:1180px; margin:0 auto;
  }
  /* La barre de livraison et les messages occupent toute la largeur */
  .woocommerce-cart .woocommerce > .th-ship,
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-info,
  .woocommerce-cart .woocommerce > .woocommerce-error,
  /* l'en-tête de page occupe toute la largeur, pas la seule colonne gauche */
  .woocommerce-cart .woocommerce > .th-page-head{ grid-column:1 / -1; }
  .woocommerce-cart .woocommerce-cart-form{ grid-column:1; margin:0; }
  .woocommerce-cart .cart-collaterals{ grid-column:2; width:100%; float:none; margin:0; position:sticky;
    /* se cale sous la barre fixe, quelle que soit sa hauteur reelle */
    top:calc(var(--th-header-top) + var(--th-header-h) + 16px); }
  .woocommerce-cart .cart-collaterals .cart_totals{ width:100%; float:none; }
}

/* ── EN-TÊTE DES PAGES PANIER / COMMANDE ──────────────────────────── */

/* Le <h1> nu du thème ferait doublon avec notre en-tête. */
/* (Le bloc titre du thème est neutralisé pour TOUTES les pages — voir la
   règle `.th-chrome .page-header` dans la section HEADER.) */

.th-page-head{
  max-width:1180px; margin:0 auto 22px; padding:22px 24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-s);
}
.th-page-head__top{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.th-page-head__title{ font-family:var(--head); font-size:clamp(22px,3vw,30px); margin:0; }
.th-page-head__count{
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  padding:4px 13px; font-size:13px; font-weight:800; color:var(--muted);
}

/* --- Indicateur d'étapes --- */
.th-steps{ display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.th-step{
  display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0;
  color:var(--muted); font-size:13.5px; font-weight:700;
}
/* Trait de liaison entre deux étapes */
.th-step + .th-step::before{
  content:""; flex:1 1 auto; height:2px; min-width:14px; margin:0 10px;
  background:var(--line); border-radius:2px;
}
.th-step.is-done + .th-step::before{ background:linear-gradient(90deg,var(--teal),var(--green)); }

.th-step__n{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream); border:2px solid var(--line);
  font-size:13.5px; font-weight:800; color:var(--muted);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.th-step__l{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Étape en cours : halo pulsé, repérable d'un coup d'œil */
.th-step.is-current{ color:var(--ink); }
.th-step.is-current .th-step__n{
  background:var(--coral); border-color:var(--coral); color:#fff;
  animation:thStepPulse 2.4s ease-out infinite;
}
@keyframes thStepPulse{
  0%      { box-shadow:0 6px 16px rgba(232,90,74,.32), 0 0 0 0 rgba(232,90,74,.40); }
  70%,100%{ box-shadow:0 6px 16px rgba(232,90,74,.32), 0 0 0 12px rgba(232,90,74,0); }
}

/* Étape franchie : coche verte */
.th-step.is-done{ color:var(--green-d); }
.th-step.is-done .th-step__n{ background:var(--green); border-color:var(--green); color:#fff; }

@media(max-width:768px){
  .th-page-head{ padding:16px; margin-bottom:16px; border-radius:var(--radius-s); }
  .th-page-head__top{ padding-bottom:12px; margin-bottom:12px; }
  /* Sur écran étroit, les trois libellés ne tiennent pas et seraient tronqués
     de façon illisible. On ne garde que celui de l'étape EN COURS — la seule
     information réellement utile à ce moment-là. */
  .th-step__l{ display:none; }
  .th-step.is-current .th-step__l{ display:inline; font-size:13px; }
  .th-step{ flex:0 0 auto; }
  .th-step.is-current{ flex:1 1 auto; }
  .th-step + .th-step::before{ margin:0 7px; min-width:10px; }
}

/* --- Barre « livraison offerte » --- */
.th-ship{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  padding:14px 18px; margin:0 0 18px; box-shadow:var(--shadow-s);
}
.th-ship__label{ margin:0 0 9px; font-weight:700; font-size:14.5px; color:var(--ink); }
.th-ship__track{
  height:9px; border-radius:999px; background:var(--cream);
  border:1px solid var(--line); overflow:hidden;
}
.th-ship__fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--coral),var(--yellow),var(--teal),var(--green));
  transition:width .55s cubic-bezier(.22,.8,.28,1);   /* la barre se remplit en glissant */
}
.th-ship.is-done .th-ship__label{ color:var(--green-d); }
.th-ship.is-done .th-ship__fill{ background:linear-gradient(90deg,var(--green),var(--teal)); }

/* --- Le tableau des articles devient une liste de cartes --- */
.woocommerce-cart table.shop_table.cart{
  border:none; background:transparent; border-collapse:separate; border-spacing:0 12px;
}
.woocommerce-cart table.shop_table.cart thead th{
  background:transparent; border:none; color:var(--muted);
  font-family:var(--body); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.4px; padding:0 14px 2px;
}
.woocommerce-cart table.shop_table.cart tr.cart_item{
  background:#fff; box-shadow:var(--shadow-s);
  transition:opacity .25s ease, transform .25s ease;
}
.woocommerce-cart table.shop_table.cart tr.cart_item td{
  border:none; border-block:1px solid var(--line); padding:14px !important; vertical-align:middle;
}
/* Coins arrondis : seules les cellules d'extrémité portent le rayon */
.woocommerce-cart table.shop_table.cart tr.cart_item td:first-child{
  border-inline-start:1px solid var(--line);
  border-start-start-radius:var(--radius-s); border-end-start-radius:var(--radius-s);
}
.woocommerce-cart table.shop_table.cart tr.cart_item td:last-child{
  border-inline-end:1px solid var(--line);
  border-start-end-radius:var(--radius-s); border-end-end-radius:var(--radius-s);
}
.woocommerce-cart table.shop_table.cart td.product-thumbnail img{
  width:74px; border-radius:12px; box-shadow:var(--shadow-s);
}
.woocommerce-cart table.shop_table.cart td.product-name a{
  font-family:var(--head); font-weight:600; font-size:16px; color:var(--ink) !important;
}
.woocommerce-cart table.shop_table.cart td.product-name a:hover{ color:var(--coral-d) !important; }
.woocommerce-cart table.shop_table.cart td.product-subtotal{ font-weight:800; color:var(--ink); }
.woocommerce-cart table.shop_table.cart td.actions{
  background:transparent; border:none !important; padding:6px 0 0 !important;
}

/* Bouton « retirer » : discret, rouge à l'approche */
.woocommerce-cart table.shop_table.cart a.remove{
  width:30px; height:30px; line-height:28px; font-size:19px; font-weight:400;
  color:var(--muted) !important; background:var(--cream); border:1px solid var(--line);
  border-radius:50%;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease;
}
.woocommerce-cart table.shop_table.cart a.remove:hover{
  background:var(--coral) !important; color:#fff !important; transform:scale(1.12) rotate(90deg);
}
/* Ligne en cours de suppression : elle s'efface au lieu de disparaître d'un coup */
.woocommerce-cart tr.cart_item.th-removing{ opacity:.35; transform:scale(.99); }

/* --- Sélecteur de quantité − / + --- */
.woocommerce-cart .quantity.th-qty{
  display:inline-flex; align-items:center; background:#fff;
  border:2px solid var(--line); border-radius:12px; overflow:hidden;
}
.woocommerce-cart .quantity.th-qty input.qty{
  width:46px; border:none !important; text-align:center; font-weight:800;
  padding:9px 0 !important; background:transparent;
  appearance:textfield; -moz-appearance:textfield;   /* masque les fleches natives */
}
.woocommerce-cart .quantity.th-qty input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity.th-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.th-qty__btn{
  width:38px; height:40px; flex:0 0 auto;
  background:var(--cream) !important; color:var(--ink) !important;
  border:none !important; border-radius:0 !important; padding:0 !important;
  font-size:18px !important; font-weight:800 !important; line-height:1; cursor:pointer;
  transition:background .16s ease, color .16s ease;
  box-shadow:none !important;
}
.th-qty__btn:hover{ background:var(--coral) !important; color:#fff !important; transform:none; }
.th-qty__btn::after{ display:none; }   /* pas de reflet balayant sur ces petits boutons */

/* --- Pendant une mise à jour AJAX : la page reste utilisable, on signale
       juste que les montants sont en train d'être recalculés. --- */
form.woocommerce-cart-form.th-busy{ position:relative; }
form.woocommerce-cart-form.th-busy::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.45);
  border-radius:var(--radius); pointer-events:none;
}
form.woocommerce-cart-form.th-busy .quantity.th-qty{ border-color:var(--teal); }

/* --- Récapitulatif --- */
.woocommerce-cart .cart_totals h2{
  font-family:var(--head); font-size:19px; margin:0 0 14px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.woocommerce-cart .cart_totals table.shop_table{ border:none; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
  border:none; border-bottom:1px solid var(--line); padding:12px 0 !important; background:transparent;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td{ border-bottom:none; padding-top:14px !important; }
.woocommerce-cart .cart_totals tr.order-total .amount{
  font-family:var(--head); font-size:24px; color:var(--coral-d);
}
.woocommerce-cart .wc-proceed-to-checkout{ padding:14px 0 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:block; text-align:center; background:var(--coral) !important;
  font-size:17px !important; padding:16px !important; border-radius:14px !important;
  box-shadow:0 10px 22px rgba(232,90,74,.30) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--coral-d) !important; transform:translateY(-2px);
}

/* Réassurance sous le récapitulatif (paiement à la livraison, retours…) */
.th-cart-trust{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  padding:14px 16px; margin-top:14px; box-shadow:var(--shadow-s);
}
.th-cart-trust li{
  list-style:none; display:flex; gap:10px; align-items:flex-start;
  padding:7px 0; font-size:13.5px; color:var(--muted);
}
.th-cart-trust li b{ color:var(--ink); font-weight:700; }
.th-cart-trust li span{ font-size:17px; line-height:1.2; }

/* Lien « continuer mes achats » */
.th-cart-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-weight:700; font-size:14.5px; color:var(--teal-d) !important;
  transition:transform .2s ease;
}
.th-cart-back:hover{ transform:translateX(-4px); }
html[dir="rtl"] .th-cart-back:hover{ transform:translateX(4px); }

/* --- Panier vide : un vrai écran, pas une ligne de texte perdue --- */
.th-empty{ text-align:center; max-width:520px; margin:30px auto 10px; padding:40px 24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-s); }
.th-empty__emoji{ font-size:56px; display:block; margin-bottom:10px; animation:thfloat 4s ease-in-out infinite; }
.th-empty h2{ font-size:23px; margin:0 0 8px; }
.th-empty p{ color:var(--muted); margin:0 0 20px; }
.th-empty .button{ background:var(--coral) !important; font-size:16px !important; padding:14px 28px !important; border-radius:14px !important; }
.woocommerce-cart .cart-empty, .woocommerce-cart .return-to-shop{ display:none; }  /* remplacés par .th-empty */

/* --- Panier en petit écran --- */
@media(max-width:992px){
  .woocommerce-cart .cart-collaterals{ width:100% !important; float:none !important; }
  .woocommerce-cart .cart_totals{ width:100% !important; float:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE CONTACT
   ────────────────────────────────────────────────────────────────────
   Même discipline que partout ailleurs : seuls `transform` et `opacity`
   sont animés, pour ne rien coûter au défilement.
   ════════════════════════════════════════════════════════════════════ */

.page-id-35 .page-content{ max-width:1140px; margin:0 auto; padding:0 20px; }

/* --- Bandeau d'accroche --- */
.th-contact-hero{
  position:relative; overflow:hidden; text-align:center;
  border-radius:var(--radius); padding:44px 28px; margin:8px 0 26px;
  background:linear-gradient(120deg,#fff4e6,#ffe7e3,#e6f6f4,#eaf7ee,#fff4e6);
  background-size:300% 300%;
  animation:thMesh 22s ease-in-out infinite;   /* dégradé déjà défini plus haut */
  box-shadow:var(--shadow-s);
}
/* Halos flottants, rastérisés une fois puis simplement déplacés */
.th-contact-hero::before, .th-contact-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; opacity:.55;
}
.th-contact-hero::before{
  width:260px; height:260px; top:-110px; inset-inline-end:-60px;
  background:radial-gradient(circle,rgba(232,90,74,.32),transparent 68%);
  animation:thBlobA 16s ease-in-out infinite;
}
.th-contact-hero::after{
  width:230px; height:230px; bottom:-110px; inset-inline-start:-50px;
  background:radial-gradient(circle,rgba(38,167,154,.30),transparent 68%);
  animation:thBlobB 19s ease-in-out infinite;
}
.th-contact-hero > *{ position:relative; z-index:1; }
.th-contact-hero__badge{
  display:inline-block; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:6px 16px; font-size:13.5px; font-weight:800;
  color:var(--coral-d); margin-bottom:14px;
  animation:thUp .6s cubic-bezier(.22,.8,.28,1) both;
}
.th-contact-hero h2{
  font-size:clamp(26px,4vw,38px); margin:0 0 10px;
  animation:thUp .6s cubic-bezier(.22,.8,.28,1) .08s both;
}
.th-contact-hero p{
  color:var(--muted); font-size:16.5px; max-width:52ch; margin:0 auto;
  animation:thUp .6s cubic-bezier(.22,.8,.28,1) .16s both;
}

/* --- Cartes de contact --- */
.th-cc{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px; }
.th-cc__item{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:3px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow-s); text-decoration:none;
  color:var(--ink) !important;
  transition:transform .3s cubic-bezier(.22,.8,.28,1), box-shadow .3s ease, border-color .3s ease;
}
/* Liseré coloré qui se dessine au survol — la couleur vient du modificateur */
.th-cc__item::after{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.8,.28,1);
  background:var(--th-cc-color,var(--coral));
}
html[dir="rtl"] .th-cc__item::after{ transform-origin:right; }
a.th-cc__item:hover{
  transform:translateY(-6px); box-shadow:0 18px 36px rgba(43,43,64,.13); border-color:transparent;
}
a.th-cc__item:hover::after{ transform:scaleX(1); }
.th-cc__item.is-coral { --th-cc-color:var(--coral);  }
.th-cc__item.is-green { --th-cc-color:var(--green);  }
.th-cc__item.is-teal  { --th-cc-color:var(--teal);   }
.th-cc__item.is-yellow{ --th-cc-color:var(--yellow); }

.th-cc__icon{
  font-size:30px; line-height:1; margin-bottom:8px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
a.th-cc__item:hover .th-cc__icon{ transform:scale(1.2) rotate(-8deg); }
.th-cc__title{ font-family:var(--head); font-weight:600; font-size:15px; color:var(--muted); }
.th-cc__text { font-family:var(--head); font-weight:700; font-size:19px; color:var(--ink); }
.th-cc__sub  { font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px; }
.th-cc__cta{
  margin-top:12px; font-size:13.5px; font-weight:800; color:var(--th-cc-color,var(--coral));
  transition:transform .25s ease;
}
a.th-cc__item:hover .th-cc__cta{ transform:translateX(4px); }
html[dir="rtl"] a.th-cc__item:hover .th-cc__cta{ transform:translateX(-4px); }

/* --- Deux colonnes : formulaire + FAQ --- */
.th-contact-main{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);
  gap:22px; align-items:start;
}
.th-contact-form, .th-contact-side{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-s);
}
.th-contact-form h3, .th-contact-side h3{
  font-family:var(--head); font-size:21px; margin:0 0 6px;
}
.th-contact-form__intro{ color:var(--muted); font-size:14.5px; margin:0 0 18px; }

/* --- Formulaire --- */
.th-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.th-form__field{ margin:0 0 14px; }
.th-form__field label{
  display:block; font-weight:700; font-size:13.5px; margin-bottom:6px; color:var(--ink);
}
.th-form__field label small{ color:var(--muted); font-weight:600; }
.th-form__field .req{ color:var(--coral-d); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea{
  width:100%; border:2px solid var(--line); border-radius:12px;
  padding:12px 14px; font-family:var(--body); font-size:15px; background:var(--cream);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus{
  border-color:var(--teal); background:#fff; outline:none;
}
.wpcf7 textarea{ resize:vertical; min-height:130px; }
.th-form__submit{ margin:6px 0 0; }
.wpcf7 input[type="submit"]{
  width:100%; background:var(--coral) !important; color:#fff !important;
  border:none !important; border-radius:14px !important;
  padding:15px 24px !important; font-size:16px !important; font-weight:800 !important;
  box-shadow:0 10px 22px rgba(232,90,74,.28) !important;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.wpcf7 input[type="submit"]:hover{ background:var(--coral-d) !important; transform:translateY(-2px); }
/* Messages de Contact Form 7, alignés sur la charte */
.wpcf7 form .wpcf7-response-output{
  border-radius:12px; border-width:2px; padding:13px 16px; margin:16px 0 0; font-size:14px;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--green); background:rgba(53,172,116,.08); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{ border-color:var(--coral); background:rgba(232,90,74,.07); }
.wpcf7-not-valid-tip{ color:var(--coral-d); font-size:12.5px; font-weight:700; margin-top:4px; }
.wpcf7 .wpcf7-spinner{ margin:0 8px; }

/* --- FAQ (accordéon natif <details>, sans JavaScript) --- */
.th-faq__item{
  border:1px solid var(--line); border-radius:var(--radius-s);
  margin-bottom:10px; overflow:hidden; background:var(--cream);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.th-faq__item[open]{ border-color:var(--teal); box-shadow:var(--shadow-s); background:#fff; }
.th-faq__q{
  cursor:pointer; list-style:none; padding:14px 42px 14px 16px; position:relative;
  font-weight:700; font-size:14.5px; color:var(--ink);
  transition:color .2s ease, background .2s ease;
}
html[dir="rtl"] .th-faq__q{ padding:14px 16px 14px 42px; }
.th-faq__q::-webkit-details-marker{ display:none; }   /* flèche native masquée */
.th-faq__q:hover{ color:var(--teal-d); background:rgba(38,167,154,.05); }
/* Chevron dessiné en CSS, qui pivote à l'ouverture */
.th-faq__q::after{
  content:""; position:absolute; inset-inline-end:16px; top:50%;
  width:8px; height:8px; margin-top:-5px;
  border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), border-color .25s ease;
}
.th-faq__item[open] .th-faq__q::after{ transform:rotate(-135deg); border-color:var(--teal); }
.th-faq__item[open] .th-faq__q{ color:var(--teal-d); }
.th-faq__a{ padding:0 16px 15px; }
.th-faq__a p{
  margin:0; color:var(--muted); font-size:14px; line-height:1.7;
  animation:thFaqIn .35s ease both;
}
@keyframes thFaqIn{ from{opacity:0; transform:translate3d(0,-6px,0)} to{opacity:1; transform:none} }

/* --- Petits écrans --- */
@media(max-width:980px){
  .th-cc{ grid-template-columns:repeat(2,1fr); }
  .th-contact-main{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .th-cc{ grid-template-columns:1fr; gap:10px; }
  .th-cc__item{ padding:18px; }
  .th-contact-hero{ padding:30px 20px; }
  .th-contact-form, .th-contact-side{ padding:18px; }
  .th-form__row{ grid-template-columns:1fr; }
  /* iOS zoome sur un champ sous 16 px : on l'en empêche. */
  .wpcf7 input, .wpcf7 select, .wpcf7 textarea{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE
   ────────────────────────────────────────────────────────────────────
   POINT DE BASCULE : Hello Elementor passe au menu hamburger à 992 px
   (règle `.menu-dropdown-tablet`, en !important). Mes anciennes règles
   utilisaient 900 px — entre 901 et 992 px l'en-tête gardait donc ses
   dimensions « bureau » alors que le hamburger était déjà affiché.
   Tout est réaligné sur 992 px ci-dessous.
   ════════════════════════════════════════════════════════════════════ */

/* Aucun débordement horizontal possible (la cause n°1 du « ça bouge sur
   le côté » en mobile : un seul élément trop large fait scroller la page). */
html, body{ overflow-x:hidden; max-width:100%; }
img, video, iframe, table{ max-width:100%; }

@media(max-width:992px){

  /* --- En-tête : logo lisible, hamburger confortable --- */
  .site-header .header-inner{ gap:10px; padding:8px 14px; }
  .custom-logo{ height:50px; }

  /* Le bouton hamburger : cible tactile de 44 px (minimum recommandé
     pour qu'un doigt l'atteigne sans viser), aux couleurs de la marque. */
  .site-navigation-toggle-holder{ margin-inline-start:auto; padding:0 !important; }
  .site-header .site-navigation-toggle{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:var(--cream) !important; color:var(--ink) !important;
    border:1px solid var(--line) !important; border-radius:14px !important;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  }
  .site-header .site-navigation-toggle:hover,
  .site-header .site-navigation-toggle[aria-expanded="true"]{
    background:var(--coral) !important; color:#fff !important; transform:scale(1.05);
  }

  /* --- Menu déroulant mobile : grandes cibles, hiérarchie claire --- */
  /* NE JAMAIS poser `max-height` ni `overflow` sur ce conteneur.
     Le thème parent s'en sert pour ouvrir/fermer le menu :
       :not(.elementor-active) + .site-navigation-dropdown → max-height:0
       .elementor-active        + .site-navigation-dropdown → max-height:100vh
     Et son seul enfant (`ul.menu`) est en position ABSOLUE : le conteneur a
     donc une hauteur réelle de zéro. Un `overflow` y découpe tout le menu —
     c'est ce qui empêchait le menu mobile de s'ouvrir.
     Le défilement d'un menu trop long est donc géré sur la LISTE elle-même,
     juste en dessous. */
  .site-navigation-dropdown{
    background:#fff !important; border-top:1px solid var(--line);
    box-shadow:0 18px 40px rgba(43,43,64,.14);
  }
  /* La liste, elle, peut défiler sans rien casser : hauteur restante à
     l'écran une fois le bandeau et le header déduits. */
  .site-navigation-dropdown ul.menu{
    max-height:calc(100vh - var(--th-header-top) - var(--th-header-h) - 16px);
    overflow-y:auto;
  }
  .site-navigation-dropdown ul.menu{ padding:8px 10px 18px !important; }
  .site-navigation-dropdown .menu li a{
    display:block; padding:14px 16px !important;      /* ≈ 48 px de haut */
    font-size:16px !important; font-weight:700;
    border-radius:12px; color:var(--ink) !important;
  }
  .site-navigation-dropdown .menu li a:hover,
  .site-navigation-dropdown .menu li a:focus{ background:var(--cream); }
  /* Sélecteur volontairement VERBEUX (`ul.menu li…`) : le thème parent pose
     `.site-navigation-dropdown ul.menu li.current-menu-item a{background:#55595c}`
     dans header-footer.css, soit une spécificité (0,3,3). Une écriture plus
     courte — `.site-navigation-dropdown .menu .current-menu-item > a`, (0,3,1) —
     perdait sur le fond : la page courante restait grise foncée dans le menu
     mobile, alors que seule la couleur du texte passait, grâce au !important.
     À spécificité égale, c'est la feuille enfant (chargée après) qui l'emporte.
     Ne pas « simplifier » ce sélecteur. */
  .site-navigation-dropdown ul.menu li.current-menu-item > a{
    background:rgba(38,167,154,.10); color:var(--teal-d) !important;
  }
  /* Sous-menus : décalés et adoucis, pour distinguer les niveaux */
  .site-navigation-dropdown .sub-menu{
    padding-inline-start:14px !important; margin:2px 0 6px;
    border-inline-start:2px solid var(--line);
  }
  .site-navigation-dropdown .sub-menu li a{
    font-size:15px !important; font-weight:600; padding:11px 14px !important;
    color:var(--muted) !important;
  }
  /* Panier : bouton pleine largeur, impossible à rater */
  .site-navigation-dropdown .menu-item-th-cart{ margin:12px 6px 4px; }
  .site-navigation-dropdown .menu-item-th-cart > a{
    justify-content:center; background:var(--coral) !important; color:#fff !important;
    border-radius:14px !important; padding:15px !important; font-size:16px !important;
  }
  /* Langue : encadrée, en évidence (le bilingue est un vrai usage ici) */
  .site-navigation-dropdown .menu-item-aod-lang{ margin:6px; }
  .site-navigation-dropdown .menu-item-aod-lang > a,
  .site-navigation-dropdown .menu-item-aod-lang{
    justify-content:center; border:1px solid var(--line); border-radius:12px;
  }

  /* --- Bandeau annonce : 3 messages ne tiennent pas côte à côte.
         On le rend défilable au doigt plutôt que de le laisser se casser. --- */
  .th-topbar{
    white-space:nowrap; overflow-x:auto; text-align:start;
    scrollbar-width:none; font-size:12.5px; padding:7px 12px;
  }
  .th-topbar::-webkit-scrollbar{ display:none; }
}

@media(max-width:768px){

  /* --- Héro : compact, texte pleine largeur --- */
  .th-hero{ padding:30px 20px; border-radius:22px; margin:16px auto; }
  .th-hero h1{ max-width:100%; font-size:clamp(23px,6.2vw,30px); }
  .th-hero p{ max-width:100%; font-size:15.5px; }
  .th-hero .th-cta{ display:flex; justify-content:center; width:100%; font-size:16.5px; padding:15px 20px; }

  /* --- Atouts : 2 colonnes serrées --- */
  .th-perks{ grid-template-columns:repeat(2,1fr); gap:10px; padding:0 14px; }
  .th-perk{ padding:12px; gap:9px; }
  .th-perk .e{ font-size:22px; }
  .th-perk b{ font-size:13px; } .th-perk small{ font-size:11.5px; }

  /* --- Grille produits ---
     Pas de nombre de colonnes ici : à 768px `auto-fill` en place 3, ce qui
     convient à une tablette portrait. Le passage à 2 puis 1 colonne est géré
     par les règles 640px et 380px. */
  .woocommerce ul.products{ gap:14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:14.5px !important; padding:11px 12px 3px !important;
  }
  .woocommerce ul.products li.product .price{ padding:0 12px; font-size:16px; }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    margin:auto 12px 12px !important; padding:12px 10px !important; font-size:13.5px !important;
  }
  /* Le survol n'existe pas au doigt : on neutralise les effets de survol
     pour éviter qu'ils restent « collés » après un appui. */
  .woocommerce ul.products li.product:hover{ transform:none; }
  .woocommerce ul.products li.product:hover a img{ transform:none; }

  /* --- Fiche produit --- */
  .woocommerce div.product .product_title{ font-size:23px; }
  .woocommerce div.product p.price, .woocommerce div.product span.price{ font-size:22px; }
  .th-reassure{ gap:7px; }
  .th-reassure span{ font-size:12px; padding:7px 11px; }

  /* --- Titres & espacements généraux --- */
  .th-sec-title{ font-size:22px; margin:28px 0 14px; }
  .th-home-cta{ padding:28px 18px; border-radius:22px; margin:34px 0 10px; }
  .th-wrap{ padding:0 14px; }

  /* --- Pied de page : liens bien espacés au doigt --- */
  .th-footer__inner{ grid-template-columns:1fr; gap:22px; padding:34px 18px 24px; }
  .th-footer a{ padding:9px 0; font-size:15px; }
  .th-footer a:hover{ transform:none; }   /* pas de survol au tactile */

  /* --- iOS : un champ sous 16 px déclenche un ZOOM automatique à la
         saisie, qui décale toute la page. 16 px l'empêche. --- */
  input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
  input[type="password"], input[type="search"], select, textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select{
    font-size:16px !important;
  }
  .woocommerce form .form-row{ width:100% !important; float:none !important; padding:0 0 12px !important; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:100% !important; }

  /* --- PANIER : le tableau devient une pile de cartes ---
         Un tableau à 6 colonnes est illisible sur 375 px de large. Chaque
         ligne devient une carte, et l'intitulé de colonne (attribut
         data-title fourni par WooCommerce) est réaffiché devant la valeur. */
  .woocommerce-cart table.shop_table.cart thead{ display:none; }
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody{ display:block; width:100%; border:none; }
  .woocommerce-cart table.shop_table.cart tr.cart_item{
    display:grid; grid-template-columns:64px 1fr; gap:4px 12px; align-items:center;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
    padding:14px; margin-bottom:12px; position:relative;
  }
  .woocommerce-cart table.shop_table.cart tr.cart_item td{
    display:block; border:none; padding:3px 0 !important; text-align:start;
  }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail{ grid-row:1 / span 4; align-self:start; }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img{ width:64px; border-radius:10px; }
  /* `!important` INDISPENSABLE : la règle générique juste au-dessus impose
     `padding:3px 0 !important` à toutes les cellules et écrasait cette
     réserve de 26 px. Le titre passait alors sous la croix de suppression,
     en haut à droite de la carte, et s'affichait tronqué
     (« Je construis mes premiers m… »). */
  /* `tr.cart_item` est nécessaire dans le sélecteur, pas décoratif : la règle
     générique `…tr.cart_item td{padding:3px 0 !important}` pèse (0,4,3) et
     l'emportait sur un `…td.product-name` en (0,4,2), tous deux !important.
     En ajoutant `tr.cart_item` on passe à (0,5,3) et la réserve tient. */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name{
    font-weight:700;
    padding-inline-end:30px !important;
    /* Un nom long doit passer à la ligne plutôt que déborder, et un mot
       très long (référence, code) doit pouvoir être coupé. */
    overflow-wrap:anywhere;
  }
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a{
    display:inline-block; max-width:100%; line-height:1.35;
  }
  /* Rappel de l'intitulé devant le prix et le total.
     ATTENTION : on n'utilise PAS attr(data-title). WooCommerce tourne ici en
     locale anglaise — l'attribut vaut littéralement "Price" / "Subtotal", ce
     qui afficherait des libellés anglais sur un site français. On écrit donc
     nos propres libellés, avec leur équivalent arabe pour la version RTL. */
  .woocommerce-cart table.shop_table.cart td.product-price::before{ content:"Prix : "; }
  .woocommerce-cart table.shop_table.cart td.product-subtotal::before{ content:"Total : "; }
  html[dir="rtl"] .woocommerce-cart table.shop_table.cart td.product-price::before{ content:"السعر : "; }
  html[dir="rtl"] .woocommerce-cart table.shop_table.cart td.product-subtotal::before{ content:"المجموع : "; }
  .woocommerce-cart table.shop_table.cart td.product-price::before,
  .woocommerce-cart table.shop_table.cart td.product-subtotal::before{
    font-weight:700; color:var(--muted); font-size:13px;
  }
  .woocommerce-cart table.shop_table.cart td.product-price,
  .woocommerce-cart table.shop_table.cart td.product-subtotal{ font-size:14.5px; }
  .woocommerce-cart table.shop_table.cart td.product-quantity .quantity input.qty{
    width:74px; padding:9px; font-size:16px;
  }
  /* La croix de suppression : en haut à droite de la carte */
  .woocommerce-cart table.shop_table.cart td.product-remove{
    position:absolute; top:8px; inset-inline-end:8px; padding:0 !important;
  }
  .woocommerce-cart table.shop_table.cart td.product-remove a.remove{
    width:32px; height:32px; line-height:30px; font-size:20px;
  }
  /* Ligne « code promo + mise à jour » : empilée */
  /* La LIGNE qui contient le coupon doit passer en bloc, pas seulement la
     cellule : tant que le <tr> reste `table-row`, il conserve la largeur
     calculée par le tableau (335 px mesurés) et ne se réduit plus. Sous
     320 px, le bouton « Appliquer » sortait ainsi de l'écran de 25 px.
     `box-sizing:border-box` pour que le padding reste dans les 100 %. */
  .woocommerce-cart table.shop_table.cart tbody > tr:has(td.actions){
    display:block; width:100%;
  }
  .woocommerce-cart table.shop_table.cart td.actions{
    display:block; width:100%; box-sizing:border-box; padding:0 !important;
  }
  /* Le bloc coupon ne prenait que 201 px (largeur au contenu) : le champ
     tombait à 80 px, où « Code promo » ne tient même pas. `width:100%` sur
     le conteneur, puis `flex:1` sur le champ pour qu'il occupe la place
     restante et `flex:0 0 auto` sur le bouton, dont le libellé ne doit pas
     être compressé. */
  .woocommerce-cart table.shop_table.cart td.actions .coupon{
    display:flex; gap:8px; margin-bottom:10px; width:100%;
  }
  /* `!important` assumé ici, faute d'alternative : WooCommerce fixe la largeur
     avec `.woocommerce #content table.cart td.actions .input-text{width:80px}`.
     Ce sélecteur contient un ID (`#content`, posé par le thème sur le <main>),
     et AUCUN empilement de classes ne bat un ID. Le champ tombait donc à 80 px,
     où le mot « Code promo » ne tient même pas. */
  .woocommerce-cart table.shop_table.cart td.actions .coupon input{
    flex:1 1 auto; min-width:0; width:auto !important;
  }
  .woocommerce-cart table.shop_table.cart td.actions .coupon .button{
    flex:0 0 auto; width:auto; white-space:nowrap;
  }
  /* Le bouton « Mettre à jour le panier », hors bloc coupon, reste pleine largeur. */
  .woocommerce-cart table.shop_table.cart td.actions > .button{ width:100%; }
  .woocommerce-cart .cart_totals, .woocommerce-checkout #order_review{ padding:16px; }
  .woocommerce-cart .wc-proceed-to-checkout a.button{
    display:block; text-align:center; font-size:16.5px !important; padding:16px !important;
  }

  /* --- Toutes les grandes actions en pleine largeur --- */
  .woocommerce #place_order, .woocommerce .checkout-button,
  .woocommerce div.product form.cart .single_add_to_cart_button{ width:100%; }
}

/* --- BARRE D'ACHAT COLLANTE (fiche produit, mobile) ---
   Sur mobile, le bouton « Ajouter au panier » sort de l'écran dès qu'on
   descend lire la description ou les avis. On rend le bloc d'achat collant
   en bas : l'action reste accessible à tout moment. C'est l'un des leviers
   les plus efficaces sur une boutique mobile. */
@media(max-width:768px){
  .single-product .woocommerce div.product form.cart{
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    display:flex; align-items:center; gap:10px; margin:0;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(43,43,64,.12);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));  /* encoche iPhone */
    animation:thBarUp .45s cubic-bezier(.22,.8,.28,1) both;
  }
  @keyframes thBarUp{ from{ transform:translate3d(0,100%,0); } to{ transform:none; } }
  .single-product .woocommerce div.product form.cart .quantity{ flex:0 0 auto; margin:0; }
  .single-product .woocommerce div.product form.cart .quantity input.qty{
    width:64px; padding:13px 6px; font-size:16px; text-align:center;
  }
  .single-product .woocommerce div.product form.cart .single_add_to_cart_button{
    flex:1 1 auto; margin:0 !important; padding:15px 12px !important; font-size:16px !important;
  }
  /* Le contenu ne doit pas passer SOUS la barre : on réserve la place. */
  .single-product .site-footer, .single-product .th-footer{ margin-bottom:78px; }
  /* Les formulaires de variation ne se prêtent pas au format barre :
     on les laisse dans le flux normal pour ne pas masquer les options. */
  .single-product .woocommerce div.product form.cart.variations_form{
    position:static; display:block; box-shadow:none; border-top:none; padding:0; animation:none;
  }
}

@media(max-width:480px){
  .custom-logo{ height:44px; }
  .th-hero h1{ font-size:22px; }
  .th-perks{ grid-template-columns:1fr; }
  .woocommerce ul.products{ gap:10px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:13.5px !important; }
  .th-footer__name{ font-size:21px; }
}

/* ============================================================
   MODERNISATION — ajustements ciblés
   ------------------------------------------------------------
   Bloc volontairement placé en fin de feuille : il ne réécrit
   rien plus haut, il affine. Le retirer d'un bloc rend
   exactement l'apparence précédente.
   Il reste AVANT le bloc `prefers-reduced-motion` final, pour
   que celui-ci continue de neutraliser les animations.
   ============================================================ */

/* ─── Ombres en deux couches ─────────────────────────────────
   Une ombre unique et large paraît « posée » et un peu datée.
   Deux couches — un contact net et proche, un halo large et
   très transparent — imitent la lumière réelle : l'objet a
   l'air soulevé plutôt que dessiné. */
:root{
  --shadow-s:0 1px 2px rgba(43,43,64,.06), 0 4px 12px rgba(43,43,64,.06);
  --shadow:0 2px 4px rgba(43,43,64,.06), 0 14px 32px rgba(43,43,64,.10);
  --shadow-l:0 4px 8px rgba(43,43,64,.05), 0 24px 48px rgba(43,43,64,.13);
}

/* ─── Typographie des titres ─────────────────────────────────
   Aux grandes tailles, l'espacement par défaut entre lettres
   est trop lâche et le titre paraît distendu. Un très léger
   resserrement (-0,02em) est la signature typographique des
   interfaces récentes. On ne l'applique PAS en arabe : le
   Cairo est une écriture liée, resserrer les lettres y dégrade
   la lisibilité au lieu de l'améliorer. */
h1,h2,h3,.th-sec-title,.th-hero h1,
.woocommerce div.product .product_title{
  letter-spacing:-.02em;
  line-height:1.2;
  text-wrap:balance; /* évite le mot orphelin sur la dernière ligne */
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .th-sec-title, html[dir="rtl"] .th-hero h1{
  letter-spacing:normal;
}

/* ─── Cartes produit : alignement de la grille ───────────────
   PROBLÈME CORRIGÉ (le plus visible du site) : un titre sur une
   ligne et un titre sur deux lignes donnaient deux cartes de
   hauteurs différentes. Prix et boutons se retrouvaient à des
   hauteurs différentes d'une carte à l'autre, ce qui donne à
   toute la grille un aspect bricolé.

   Correction en deux temps :
   1. le titre est limité à 2 lignes et RÉSERVE ces 2 lignes
      (min-height) même s'il n'en occupe qu'une ;
   2. `margin-top:auto` sur le bloc bouton pousse celui-ci en
      bas de carte.
   Résultat : prix et boutons alignés au pixel sur toute la
   ligne, quelle que soit la longueur des noms de produits. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  /* 2 lignes × interligne 1.35 — réservées même si le titre est court. */
  min-height:calc(2 * 1.35em);
  line-height:1.35;
}

/* ─── Bouton « Ajouter au panier » pleine largeur ────────────
   Par défaut WooCommerce rend un bouton en ligne : sa largeur
   suit le texte, donc « Ajouter » et « Ajouter au panier » ne
   font pas la même largeur sur deux cartes voisines. Pleine
   largeur = cible tactile plus grande sur mobile et grille
   visuellement régulière. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:block;
  width:auto;
  text-align:center;
  padding:13px 14px!important;
  border-radius:var(--radius-s);
  font-weight:700;
  letter-spacing:.01em;
}

/* ─── Badge promo : on coupe le clignotement perpétuel ───────
   PERF autant que goût : une animation `infinite` sur chaque
   badge oblige le navigateur à repeindre la zone en continu,
   même quand l'utilisateur ne fait rien — consommation
   batterie inutile sur mobile. Le badge reste parfaitement
   visible sans bouger ; il s'anime seulement au survol de la
   carte, c'est-à-dire quand l'utilisateur regarde vraiment. */
.woocommerce span.onsale{
  animation:none;
  box-shadow:0 2px 8px rgba(232,90,74,.35);
  letter-spacing:.02em;
}
.woocommerce ul.products li.product:hover span.onsale{
  transform:scale(1.06);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}

/* ─── Prix : hiérarchie plus lisible ─────────────────────────
   Le prix barré et le prix promo avaient un poids visuel
   proche. On efface franchement l'ancien prix et on affirme le
   nouveau : l'œil trouve le prix à payer sans hésiter. */
.woocommerce ul.products li.product .price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-top:2px; padding-bottom:2px;
}
.woocommerce ul.products li.product .price del{
  opacity:.55; font-size:13.5px; font-weight:500;
}
.woocommerce ul.products li.product .price ins{
  font-size:19px; font-weight:800;
}

/* ─── Images produit : cadre neutre ──────────────────────────
   Le dégradé crème/bleu derrière les visuels teintait les
   photos détourées et changeait selon le produit. Un gris très
   clair et constant met tous les produits sur le même pied. */
.woocommerce ul.products li.product a img{
  background:#f7f5f2;
}

/* ─── Héros : le logo occupe la moitié droite ────────────────
   PROBLÈME CORRIGÉ : toute la moitié droite du héros était vide.
   Cause : `.th-hero .th-emojis` était positionné en `absolute`
   (ligne ~344) pour aller se placer à droite, mais une règle
   PLUS BAS dans la feuille (« le contenu passe au-dessus des
   halos ») lui réimposait `position:relative`. À spécificité
   égale, c'est la dernière qui gagne — les décorations
   retombaient donc dans le flux, sous le bouton, et la droite
   restait vide.

   Plutôt que de rétablir un positionnement absolu (fragile :
   il ne réserve aucune place et peut chevaucher le texte), on
   passe le héros en GRILLE : le texte occupe la colonne 1, le
   logo la colonne 2. Chacun a sa place réservée, rien ne peut
   se superposer, et la hauteur s'adapte au contenu. */
/* ATTENTION avant de refactorer : le bouton `.th-cta` et le bloc
   `.th-emojis` ne sont PAS des enfants directs de `.th-hero`.
   `wpautop` les enveloppe dans un <p> quand le héros vient du
   contenu de la page (cas de l'accueil). Une grille posée sur
   `.th-hero` place donc DEUX paragraphes sur la même ligne, qui
   se superposent — essayé, cassé, corrigé.
   D'où le choix ci-dessous : positionnement absolu du logo, et
   place réservée par un padding pour que le texte ne passe
   jamais dessous. Insensible à l'imbrication du HTML. */
/* Seuil à 981 px, et non 993 : la règle qui masque ces décorations plus
   haut dans la feuille s'arrête à `max-width:980px`. Avec 993, la bande
   981–992 px n'était couverte par AUCUNE des deux et laissait réapparaître
   les émojis d'origine en pleine largeur. Ces deux seuils doivent rester
   collés l'un à l'autre. */
@media(min-width:981px){
  /* Réserve la colonne de droite. Sans ce padding, le texte
     passerait SOUS le logo, qui est hors du flux. */
  .th-hero{ padding-inline-end:400px; }

  /* CLÉ DU CORRECTIF — le paragraphe qui enveloppe le logo ne doit
     PAS être un bloc de référence.
     `position:absolute` se résout contre le plus proche ancêtre
     positionné. Or la règle « le contenu passe au-dessus des halos »
     met `position:relative` sur tous les <p> du héros : le logo se
     calait donc dans le coin du PARAGRAPHE (en bas à gauche), et non
     du héros. Symptôme observé : un logo rogné en bas de bloc.
     On rend statique le seul paragraphe concerné. Le bouton qu'il
     contient possède son propre `position:relative; z-index:1`, il
     reste donc au-dessus des halos — rien ne régresse. */
  .th-hero p:has(> .th-emojis){
    position:static;
    /* `transform` ET `animation` doivent tomber tous les deux.
       Le paragraphe porte l'animation d'entrée `thUp`, qui lui laisse
       une transformation IDENTITÉ (`matrix(1,0,0,1,0,0)`) une fois
       terminée. Or toute transformation — même neutre — fait de
       l'élément un bloc de référence pour ses descendants en
       `absolute` : le logo restait donc calé sur le paragraphe malgré
       `position:static`. Diagnostic long à établir, car la
       transformation est invisible à l'œil.
       Retirer `animation` seul ne suffirait pas non plus : une
       animation l'emporte sur une déclaration normale, elle
       réimposerait sa transformation. Il faut les deux.
       Le bouton conserve sa propre animation d'entrée. */
    transform:none;
    animation:none;
  }

  .th-hero .th-emojis{
    /* `position:absolute` doit l'emporter sur la règle
       « le contenu passe au-dessus des halos », qui impose
       `relative` à ce même sélecteur plus haut dans la feuille.
       Spécificité identique : c'est la position dans le fichier
       qui tranche, et ce bloc est plus bas. Ne pas le remonter. */
    position:absolute;
    inset-inline-end:44px;
    /* Centrage vertical SANS `transform` — volontaire.
       Un `top:50%; transform:translateY(-50%)` ne fonctionnerait pas
       ici : l'animation d'entrée `thUp` se termine sur
       `transform:none` et, une animation l'emportant sur une
       déclaration normale, elle annulerait le décalage. Le logo
       tombait alors 156 px trop bas et débordait du héros (rogné par
       `overflow:hidden`).
       `top/bottom:0` + marges auto centrent sans toucher à
       `transform`, qui reste disponible pour l'animation. */
    top:0; bottom:0; margin-block:auto;
    width:312px;
    /* Si le héros est plus court que le logo (titre court, écran bas),
       le logo rétrécit au lieu de déborder. `contain` conserve les
       proportions. */
    height:min(312px, calc(100% - 56px));
    background:var(--th-hero-logo) center/contain no-repeat;
    z-index:1;                       /* au-dessus des halos colorés */
    /* Ombre qui épouse la forme du logo et non sa boîte carrée :
       `filter` suit la transparence du WebP. */
    filter:drop-shadow(0 14px 26px rgba(43,43,64,.16));
    animation:thUp .7s cubic-bezier(.22,.8,.28,1) .18s both;
  }
  /* Les émojis laissent la place au logo. Bonus perf : leurs trois
     animations `infinite` ne tournent plus en continu. */
  .th-hero .th-emojis span{ display:none; }
}

/* Sous 993 px, le héros reste sur une colonne et le logo est masqué
   (règle existante) : l'en-tête l'affiche déjà, le répéter pousserait
   le bouton d'action hors de l'écran au premier coup d'œil. */

/* ─── Panier desktop : vignette produit lisible ──────────────
   Le tableau du panier répartit ses 6 colonnes au prorata du
   contenu. La colonne vignette, dont le contenu est une image
   sans largeur imposée, se retrouvait écrasée : 4 px de large
   mesurés à 1024 px de viewport, 27 px à 769. Autant dire
   invisible.
   On lui impose une largeur, et à l'image une taille fixe avec
   `object-fit:cover` pour que les visuels non carrés ne soient
   pas déformés.
   Borné à `min-width:769px` : sous ce seuil, la mise en carte
   du panier prend le relais avec sa vignette de 64 px. */
@media(min-width:769px){
  /* `min-width` et non `width` : sur un tableau en `table-layout:auto`, une
     largeur n'est qu'une indication que le navigateur abandonne dès que la
     place manque. C'était le cas à 1024 px, où le panier passe en deux
     colonnes : la vignette restait à 4 px malgré un `width:96px`.
     `min-width` est, lui, contraignant. */
  .woocommerce-cart table.shop_table.cart td.product-thumbnail,
  .woocommerce-cart table.shop_table.cart th.product-thumbnail{
    min-width:96px; width:96px;
  }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img{
    width:76px !important; height:76px;
    min-width:76px;      /* `img{max-width:100%}` du thème le rétrécissait sinon */
    object-fit:cover; border-radius:12px; display:block;
  }
}

/* ─── Slogan du header : masqué dès que la place manque ──────
   Seuil à 1199 px, et non 992, pour une raison mesurée : le thème
   parent ne bascule sur le menu hamburger qu'à 992 px. Entre 993
   et ~1023 px, le menu complet (7 entrées) cohabitait donc avec le
   slogan dans un header trop étroit — et le PANIER, dernière
   entrée, sortait de l'écran. Un client sur tablette ne voyait
   tout simplement plus son panier.

   Le slogan est le premier élément sacrifiable : il répète mot pour
   mot le titre du héros situé juste en dessous. `display:none`
   plutôt qu'un masquage visuel — le contenu étant dupliqué, le
   faire lire deux fois par un lecteur d'écran n'apporte rien. */
@media(max-width:1199px){
  .site-header .site-description{ display:none !important; }
}

/* ─── Panier visible dans le header mobile ───────────────────
   AVANT : sous 992 px, le panier n'existait que dans le menu
   déroulant — donc invisible tant que le client n'ouvrait pas le
   hamburger. Sur une boutique, le panier doit être visible en
   permanence : c'est le rappel qu'un achat est en cours.

   Méthode : la barre de navigation « desktop » est masquée en
   mobile ; on la réaffiche mais on n'en garde QUE le panier. On
   réutilise ainsi le même élément (et le même compteur, mis à
   jour par WooCommerce) au lieu d'en ajouter un second qu'il
   faudrait synchroniser.

   Le header étant déjà `position:fixed`, le panier suit
   automatiquement : il reste visible au défilement. */
@media(max-width:992px){
  /* Sélecteur calqué sur celui du thème parent, à dessein.
     hello-elementor masque la barre de navigation en mobile avec
       .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown)
        .site-navigation{ display:none!important }
     soit une spécificité (0,4,0) ET un !important. Un
     `.site-header .site-navigation{display:flex!important}` (0,2,0)
     ne suffit donc PAS : entre deux !important, c'est la spécificité
     qui tranche. On reprend le même sélecteur — à égalité, la
     feuille enfant, chargée après, l'emporte.
     Ne pas raccourcir ce sélecteur. */
  .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation,
  .site-header .site-navigation{
    display:flex !important;
    flex:0 0 auto;
    min-width:0;
    margin-inline-start:auto;  /* pousse panier + hamburger à droite */
    justify-content:flex-end;
    border:none;
  }
  /* On masque tout le menu SAUF le panier. Les autres entrées
     (et le sélecteur de langue) restent dans le menu déroulant. */
  .site-header .site-navigation .menu > li{ display:none !important; }
  .site-header .site-navigation .menu > li.menu-item-th-cart{ display:flex !important; }

  /* La marge automatique passe à la navigation : la laisser aussi
     sur le hamburger ajouterait un second écart et collerait le
     panier au logo. */
  .site-header .site-navigation-toggle-holder{ margin-inline-start:0 !important; }

  /* La zone de marque ne doit plus imposer sa largeur : sans cela, un
     nom de site long repousserait de nouveau le hamburger. */
  .site-header .site-branding{ flex:0 1 auto; min-width:0; }

  /* Format compact : le header mobile ne fait que 66 px de haut. */
  .site-header .site-navigation .menu > li.menu-item-th-cart > a{
    padding:9px 13px !important;
    font-size:15px;
    gap:5px;
  }

  /* Le panier du menu déroulant fait doublon maintenant qu'il est
     toujours visible en haut : on le retire pour ne pas proposer
     deux fois la même action. */
  .site-navigation-dropdown .menu-item-th-cart{ display:none !important; }
}

/* ─── Anneau de focus homogène ───────────────────────────────
   Le focus clavier existait déjà par endroits ; on l'étend à
   TOUS les éléments interactifs, avec un décalage pour qu'il
   ne colle pas au bord et reste lisible sur fond coloré. */
:where(a,button,input,select,textarea,.button):focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .th-reveal{ opacity:1!important; transform:none!important; }
  .th-sec-title::after{ transform:translateX(-50%) scaleX(1)!important; }
}

/* ==========================================================================
   Avis clients — champ à la commande + bloc sous la grille produits
   Repris de la maquette `Desktop/book`. Les avis sont modérés : seuls les
   commentaires approuvés (Commentaires → En attente) arrivent jusqu'ici.
   ========================================================================== */
.th-avis{ max-width:1200px; margin:44px auto 10px; padding:0 20px; }
.th-avis-title{ font-family:var(--head); font-size:clamp(20px,2.6vw,26px); margin:0 0 20px; }
.th-avis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.th-avis-card{ margin:0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:14px; }
/* `plaintext` : chaque avis prend la direction de sa première lettre, pour
   qu'un avis en français reste lisible dans la version arabe (et l'inverse). */
.th-avis-card blockquote{ margin:0; font-size:15px; color:var(--ink); position:relative;
  padding-inline-start:22px; unicode-bidi:plaintext; text-align:start; }
.th-avis-card blockquote::before{ content:'\201C'; position:absolute; inset-inline-start:0; top:-10px;
  font-family:var(--head); font-size:40px; line-height:1; color:var(--teal); opacity:.5; }
.th-avis-card figcaption{ margin-top:auto; display:flex; align-items:baseline; gap:8px; font-size:13.5px; }
.th-avis-card figcaption b{ font-weight:700; unicode-bidi:plaintext; }
.th-avis-card figcaption span{ color:var(--muted); font-size:12.5px; }
.th-avis-card figcaption span::before{ content:'\00B7\00A0'; }

/* Champ avis dans le formulaire de commande */
.th-avis-opt{ font-weight:600; color:var(--muted); font-size:12.5px; }
.th-avis-field textarea{ width:100%; min-height:84px; resize:vertical; }

@media(max-width:980px){ .th-avis-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .th-avis-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Très petits écrans : deux cartes côte à côte deviennent illisibles
   (titre sur 3 lignes, prix et bouton comprimés). En dessous de 380px on
   passe à une colonne pleine largeur.
   ========================================================================== */
@media(max-width:380px){
  .woocommerce ul.products{ grid-template-columns:1fr!important; gap:14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:16px !important; }
}

/* Avis clients : même logique adaptative que la grille produits. */
.th-avis-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

/* ==========================================================================
   Largeur de la zone principale sur les pages boutique
   --------------------------------------------------------------------------
   Hello Elementor calibre `.site-main` pour un article de blog, par paliers :
   500px (≥576) · 600px (≥768) · 800px (≥992) · 1140px (≥1200). Sur une grille
   produits, ce plafond étrangle l'affichage : à 768px de large, la grille ne
   recevait que 600px et ne tenait que 2 colonnes au lieu de 3 ; à 1024px,
   800px pour 3 colonnes au lieu de 4.

   On rend donc la zone fluide sur les pages boutique, avec une gouttière
   constante et un plafond confortable. Les pages éditoriales (articles, pages
   de contenu) gardent la largeur de lecture d'origine, où elle a du sens.
   ========================================================================== */
/* DEMANDE CLIENT (2026-07-23) : la grille produits doit suivre la taille de
   l'écran, et non rester bloquée à 4 par ligne.

   La boutique était doublement plafonnée : conteneur figé à 1240px ET règle
   `repeat(4,1fr)` au-delà de 1100px. Sur un écran de 1920px, 672px restaient
   donc vides à droite. Les deux plafonds sont levés.

   La zone devient fluide (94vw) avec un plafond haut à 2200px, qui n'existe
   que pour les écrans très larges : au-delà, une rangée de 12 vignettes
   demanderait un balayage complet de l'écran pour être parcourue.

   La lisibilité, qui motivait le plafond à 4, est préservée autrement : c'est
   la largeur MINIMALE de carte (250px, voir la grille) qui décide désormais du
   nombre de colonnes. Une carte ne peut donc jamais descendre sous cette
   taille, quel que soit le nombre de colonnes.
     1280px → 4 colonnes ·  1920px → 6 ·  2560px → 8

   La FICHE PRODUIT reste à 1240px : elle affiche deux colonnes (photo +
   formulaire de commande), les étirer sur 1800px éloignerait le formulaire de
   la photo et allongerait les lignes de texte. */
body.home .site-main,
body.archive .site-main,
body.single-product .site-main{
  max-width:1240px !important;
  width:100%;
  padding-inline:20px;
}
/* L'élargissement ne concerne QUE les grands écrans, et seulement la boutique.
   ATTENTION : ne pas sortir `94vw` de cette media query. Appliqué à toutes les
   largeurs, il rognerait 6 % sur mobile — soit une bande vide sur le côté d'un
   écran de 400px, alors que la page doit y occuper toute la largeur avec sa
   seule gouttière de 14px. En dessous de 1100px, le comportement d'origine est
   donc conservé à l'identique. */
@media(min-width:1100px){
  body.home .site-main,
  body.archive .site-main{
    max-width:min(2200px, 94vw) !important;
  }
}
@media(max-width:640px){
  body.home .site-main,
  body.archive .site-main,
  body.single-product .site-main{ padding-inline:14px; }
}

/* Au-delà de 1100px, la carte ne descend plus sous 250px : c'est ce plancher
   qui fixe le nombre de colonnes, à la place de l'ancien `repeat(4,1fr)`.
   En dessous, la règle de base (minmax 220px) et les paliers tablette/mobile
   reprennent la main. */
@media(min-width:1100px){
  .woocommerce ul.products{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
}

/* Sur les cartes étroites (2 colonnes en téléphone), « Ajouter au panier »
   passait sur deux lignes. On resserre la typo et les marges internes pour
   le garder sur une seule ligne, sans réduire la zone tactile. */
@media(max-width:640px){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    font-size:12.5px !important; padding-inline:8px !important; white-space:nowrap;
  }
}

/* ==========================================================================
   En-tête — corrections d'affichage
   ========================================================================== */

/* 1. Double flèche sur « Par âge » / « Par type ».
   Hello Elementor pose `li.menu-item-has-children::after{content:"▾";font-size:1.5em}`
   (grande flèche grise détachée) et le thème enfant ajoute `a::after{content:" ▾"}`.
   Les deux s'affichaient. On neutralise celle du parent et on garde celle du
   thème enfant, collée au libellé. */
.site-navigation ul.menu li.menu-item-has-children::after{ display:none !important; content:none !important; }
.site-navigation ul.menu li.menu-item-has-children{ padding-inline-end:0; }
nav .menu-item-has-children > a::after{ display:inline-block; transition:transform .2s; }
nav .menu-item-has-children:hover > a::after{ transform:translateY(1px) rotate(180deg); }

/* 2. Le slogan du site sortait du bloc de marque : il s'affichait tout à gauche
   (x=30) alors que le logo commence à x=132, et débordait sous la barre. Le logo
   porte déjà « playbooks » et le bandeau supérieur porte la promesse commerciale.
   On le retire visuellement, sans le supprimer pour les lecteurs d'écran. */
.site-header .site-description{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* 3. Panneau déroulant : le style par défaut est un bloc blanc à angles droits
   avec un filet gris entre chaque ligne, sans respiration. */
.site-navigation ul.menu li ul{
  min-width:210px; padding:8px; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 34px rgba(30,42,50,.14); z-index:120;
}
.site-navigation ul.menu li ul li{ border:0 !important; display:block; width:100%; }
.site-navigation ul.menu li ul li a{
  display:block; padding:10px 14px; border-radius:10px; font-size:14.5px; font-weight:600;
  white-space:nowrap; transition:background .14s, color .14s;
}
.site-navigation ul.menu li ul li a:hover{ background:var(--teal); color:#fff; }
/* Le sous-menu s'ouvrait collé au libellé : le moindre écart de souris le
   refermait. Ce pont invisible garde le survol continu. */
.site-navigation ul.menu li.menu-item-has-children > ul::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}
.site-navigation ul.menu li ul{ margin-top:6px; }

/* ==========================================================================
   Langue du livre — boutons radio du formulaire de commande
   --------------------------------------------------------------------------
   WooCommerce sort l'`<input>` et son `<label>` en FRÈRES, pas imbriqués :
   une grille naïve créait donc 6 cellules (3 ronds géants + 3 libellés) au
   lieu de 3 cartes. On sort les inputs du flux et on habille le label, en
   s'appuyant sur `input:checked + label` pour l'état sélectionné.
   ========================================================================== */
.th-booklang .th-booklang-row > label{ display:block; font-weight:700; margin-bottom:8px; }
.th-booklang .woocommerce-input-wrapper{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative;
}
/* Hors flux : l'input ne prend pas de cellule, mais reste focusable au clavier
   (un `display:none` le retirerait de la navigation par tabulation). */
.th-booklang .woocommerce-input-wrapper input[type=radio]{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.th-booklang .woocommerce-input-wrapper label.radio{
  display:flex; align-items:center; justify-content:center; margin:0;
  border:2px solid var(--line); border-radius:14px; padding:13px 10px;
  font-weight:600; font-size:15px; text-align:center; cursor:pointer;
  transition:border-color .14s, background .14s, color .14s;
}
.th-booklang .woocommerce-input-wrapper label.radio:hover{ border-color:var(--teal); }
.th-booklang .woocommerce-input-wrapper input[type=radio]:checked + label.radio{
  border-color:var(--teal); background:rgba(38,167,154,.10); color:var(--teal-d);
}
/* Le contour de focus doit rester visible : c'est le seul repère au clavier
   une fois l'input masqué. */
.th-booklang .woocommerce-input-wrapper input[type=radio]:focus-visible + label.radio{
  outline:2px solid var(--teal); outline-offset:2px;
}
/* L'astérisque « obligatoire » est déjà porté par le libellé du groupe :
   le répéter dans chaque option n'ajoute rien et alourdit la lecture. */
.th-booklang .woocommerce-input-wrapper label.radio .required,
.th-booklang .woocommerce-input-wrapper label.radio abbr{ display:none; }

@media(max-width:480px){
  .th-booklang .woocommerce-input-wrapper{ grid-template-columns:1fr; }
}

/* Le bloc « Informations complémentaires » suivait immédiatement les cartes
   de langue, sans respiration : les deux groupes se lisaient comme un seul. */
.th-booklang{ margin-bottom:26px; }
.woocommerce-additional-fields > h3,
.woocommerce-additional-fields__field-wrapper > h3{ margin-top:6px; }

/* ==========================================================================
   Commande en une seule étape
   ========================================================================== */
.th-page-head--single .th-page-head__lead{
  margin:6px 0 0; color:var(--muted); font-size:14.5px;
}

/* Sections numérotées : elles remplacent le fil d'étapes. Le repère de
   progression devient la structure du formulaire lui-même. */
.th-cosec{ display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; }
.th-cosec__n{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--teal); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.th-cosec__t{ font-family:var(--head); font-weight:600; font-size:19px; color:var(--ink); line-height:1.25; }
.th-cosec__t small{ display:block; font-family:var(--body); font-weight:500; font-size:13px; color:var(--muted); margin-top:2px; }

/* Contrôles de quantité dans le récapitulatif */
.th-qty{ display:inline-flex; align-items:center; gap:2px; margin-top:6px; }
.th-qty.is-busy{ opacity:.5; pointer-events:none; }
/* `!important` assumé : les boutons du thème (fond sombre, grand rayon,
   padding généreux) s'appliquent à tout <button> du tunnel et transformaient
   ces commandes en grosses pastilles noires. */
.th-qty .th-qty__b{
  width:28px !important; height:28px !important; min-width:0 !important;
  padding:0 !important; border-radius:8px !important; border:1px solid var(--line) !important;
  background:#fff !important; font-size:16px !important; font-weight:700; line-height:1;
  color:var(--ink) !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.th-qty .th-qty__b:hover{ border-color:var(--teal) !important; color:var(--teal-d) !important; transform:none !important; }
.th-qty__v{ min-width:30px; text-align:center; font-weight:700; font-size:14px; }
.th-qty .th-qty__rm{
  width:28px !important; height:28px !important; min-width:0 !important; padding:0 !important;
  margin-inline-start:6px; border-radius:8px !important; border:1px solid transparent !important;
  background:none !important; box-shadow:none !important; cursor:pointer; opacity:.55;
  font-size:14px !important; line-height:1; color:var(--ink) !important;
}
.th-qty .th-qty__rm:hover{ opacity:1; background:rgba(232,88,72,.10) !important; border-color:rgba(232,88,72,.35) !important; transform:none !important; }

/* Titres natifs masqués : « Facturation & Expédition » et « Votre commande »
   font doublon avec les sections numérotées 1 et 3, qui portent le même
   intitulé en plus clair. Deux titres l'un sur l'autre donnaient une page qui
   se répète. */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading{ display:none; }
/* La section 3 titre déjà le récapitulatif : on récupère l'espace libéré. */
.woocommerce-checkout .th-cosec{ margin-bottom:18px; }

/* ============================================================
   PRIX EN ARABE — correction d'un affichage trompeur
   ------------------------------------------------------------
   WooCommerce enveloppe le montant dans <bdi>, dont la direction est
   auto-detectee : le premier caractere fort etant le symbole arabe « د.ج »,
   tout le contenu basculait en RTL. Le separateur de milliers etant une
   ESPACE (caractere neutre), « 1 700 » devenait deux nombres reordonnes et
   s'affichait « 700 1 ». Un client pouvait lire 700 au lieu de 1700.
   On force la direction LTR sur le montant : les chiffres restent dans
   l'ordre, le symbole passe apres. `isolate` empeche ce forcage de deranger
   le texte arabe autour (« Total : … »).
   ============================================================ */
html[dir="rtl"] .woocommerce-Price-amount,
html[dir="rtl"] .woocommerce-Price-amount bdi{
  direction:ltr;
  unicode-bidi:isolate;
}

/* =========================================================================
   Barre de tri du catalogue (remplace le <select> « Tri par défaut »)
   Voir th_render_sort_chips() dans functions.php.
   ========================================================================= */

.th-sort{
  display:flex; align-items:center; gap:14px;
  margin:0 0 26px; padding:0;
  /* WooCommerce fait flotter son bloc de tri à droite ; notre barre occupe
     toute la largeur, on neutralise donc tout flottement hérité. */
  float:none; width:100%; clear:both;
}
.th-sort__label{
  font-family:var(--head); font-weight:600; font-size:14px;
  color:var(--muted); letter-spacing:.02em; flex:0 0 auto;
}
.th-sort__list{
  display:flex; align-items:center; gap:9px;
  list-style:none; margin:0; padding:4px 0;
  /* Sur mobile la rangée défile horizontalement plutôt que de passer à la
     ligne : la barre garde une hauteur constante et ne repousse pas la
     première rangée de produits hors de l'écran. */
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.th-sort__list::-webkit-scrollbar{ display:none; }
.th-sort__list > li{ margin:0; flex:0 0 auto; scroll-snap-align:start; }

.th-sort__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink); text-decoration:none;
  font-family:var(--head); font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap;
  box-shadow:var(--shadow-s);
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease,
             border-color .14s ease, color .14s ease;
}
.th-sort__icon{ font-size:15px; line-height:1; }

.th-sort__chip:hover,
.th-sort__chip:focus-visible{
  border-color:var(--teal);
  color:var(--teal-d);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(38,167,154,.18);
  text-decoration:none;
}
.th-sort__chip:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.th-sort__chip:active{ transform:translateY(0); }

/* Pastille active : le turquoise du logo, pleine, pour qu'on voie d'un coup
   d'œil quel tri est appliqué. */
.th-sort__chip.is-active{
  background:var(--teal); border-color:var(--teal); color:#fff;
  box-shadow:0 8px 18px rgba(38,167,154,.28);
}
.th-sort__chip.is-active:hover{ background:var(--teal-d); border-color:var(--teal-d); color:#fff; }

/* Les deux pastilles de prix reprennent le jaune du logo au survol : elles
   forment une paire, distincte des tris « éditoriaux ». */
.th-sort__chip[href*="orderby=price"]:hover:not(.is-active){
  border-color:var(--yellow); color:var(--yellow-d);
  box-shadow:0 8px 18px rgba(245,187,40,.22);
}

@media(max-width:780px){
  .th-sort{ gap:10px; margin-bottom:20px; }
  .th-sort__label{ display:none; } /* la rangée se comprend seule, on gagne la place */
  .th-sort__chip{ padding:8px 14px; font-size:13.5px; }
}

/* Arabe : la rangée s'inverse avec le sens de lecture (flex + gap suffisent),
   mais les flèches de prix doivent rester des flèches verticales — on isole
   leur direction pour éviter tout retournement. */
html[dir="rtl"] .th-sort__icon{ direction:ltr; unicode-bidi:isolate; }

/* ============================================================================
   Slider « catégories » — haut de la boutique
   Hero carrousel : panneau coloré (nom + accroche + Découvrir) | image carrée.
   La mécanique reste LTR (transform) ; seul le texte des slides suit la langue.
   ==========================================================================*/
.th-slider{ position:relative; direction:ltr; max-width:1200px; margin:22px auto 34px; padding:0 20px; }
.th-slider-viewport{ position:relative; overflow:hidden; border-radius:28px; background:#fff;
  box-shadow:0 24px 60px -24px rgba(30,42,50,.45), 0 2px 8px rgba(30,42,50,.06); }
.th-slider-track{ display:flex; transition:transform .7s cubic-bezier(.16,1,.3,1); will-change:transform; }
.th-slide{ flex:0 0 100%; display:grid; grid-template-columns:1.05fr .95fr; min-height:360px;
  background:#fff; text-decoration:none; color:var(--ink); overflow:hidden; }
.th-slide-text{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center;
  gap:16px; padding:48px 52px; overflow:hidden; color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 94%, #fff), color-mix(in srgb, var(--acc) 74%, #1e2a32) 45%, color-mix(in srgb, var(--acc) 58%, #1e2a32));
  background-size:180% 180%; animation:thPan 14s ease infinite;
  translate:calc(var(--mx,0) * -7px) 0; transition:translate .3s ease; }
@keyframes thPan{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
/* Halos décoratifs flous qui dérivent lentement (profondeur, vie) */
.th-slide-text::before{ content:""; position:absolute; z-index:-1; width:340px; height:340px; border-radius:50%;
  top:-120px; right:-90px; background:radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  animation:thHaloA 13s ease-in-out infinite; }
.th-slide-text::after{ content:""; position:absolute; z-index:-1; width:220px; height:220px; border-radius:50%;
  bottom:-90px; left:-60px; background:radial-gradient(circle, rgba(0,0,0,.14), rgba(0,0,0,0) 70%);
  animation:thHaloB 16s ease-in-out infinite; }
@keyframes thHaloA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-22px,16px); } }
@keyframes thHaloB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(18px,-14px); } }
.th-slide-kicker{ display:inline-flex; align-items:center; align-self:flex-start; gap:6px;
  font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.3px;
  padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.18);
  backdrop-filter:blur(2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.th-slide-title{ font-family:var(--head); font-weight:800; font-size:clamp(27px,3.4vw,42px); line-height:1.06;
  text-shadow:0 2px 12px rgba(0,0,0,.14); }
.th-slide-title::after{ content:""; display:block; height:4px; width:58px; margin-top:12px; border-radius:99px;
  background:rgba(255,255,255,.85); transform:scaleX(0); transform-origin:left; }
html[dir="rtl"] .th-slide-title::after{ transform-origin:right; }
.th-slide.is-active .th-slide-title::after{ animation:thUnderline .55s .32s cubic-bezier(.2,.75,.3,1) forwards; }
@keyframes thUnderline{ to{ transform:scaleX(1); } }
.th-slide-cta{ position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  background:#fff; color:var(--ink); font-family:var(--head); font-weight:700; font-size:16px;
  padding:13px 26px; border-radius:999px; box-shadow:0 10px 24px -6px rgba(0,0,0,.35);
  transition:transform .18s ease, gap .18s ease, box-shadow .18s ease; }
.th-slide-cta::before{ content:""; position:absolute; inset:-3px; z-index:-1; border-radius:999px;
  background:rgba(255,255,255,.6); filter:blur(7px); opacity:0; animation:thCtaPulse 3s ease-in-out infinite; }
@keyframes thCtaPulse{ 0%,100%{ opacity:0; transform:scale(.92); } 50%{ opacity:.45; transform:scale(1.05); } }
.th-slide:hover .th-slide-cta{ transform:translateY(-2px); gap:14px; box-shadow:0 14px 30px -8px rgba(0,0,0,.4); }
.th-slide-cta svg{ display:block; transition:transform .18s ease; }
.th-slide:hover .th-slide-cta svg{ transform:translateX(3px); }
.th-slide-media{ position:relative; display:grid; place-items:center; padding:22px; opacity:0; transform:scale(.96);
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--acc) 14%, #fff), #fff 74%); }
.th-slide.is-active .th-slide-media{ animation:thMediaIn .8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes thMediaIn{ to{ opacity:1; transform:none; } }
/* Blob d'accent qui ondule derrière le produit (profondeur) */
.th-slide-media::before{ content:""; position:absolute; z-index:0; width:60%; aspect-ratio:1/1;
  border-radius:42% 58% 55% 45% / 52% 44% 56% 48%;
  background:color-mix(in srgb, var(--acc) 20%, #fff); animation:thBlob 9s ease-in-out infinite;
  translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -7px); transition:translate .3s ease; }
/* Ombre au sol qui respire au rythme de la lévitation */
.th-slide-media::after{ content:""; position:absolute; z-index:0; bottom:30px; width:44%; height:20px;
  border-radius:50%; background:rgba(30,42,50,.20); filter:blur(9px); animation:thShadow 4.2s ease-in-out infinite; }
/* Le produit lévite doucement en continu */
.th-slide-media img{ position:relative; z-index:1; width:100%; height:100%; max-height:300px; object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(30,42,50,.16)); animation:thFloat 4.2s ease-in-out infinite;
  translate:calc(var(--mx,0) * 16px) calc(var(--my,0) * 11px); transition:translate .25s ease; }
@keyframes thFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes thShadow{ 0%,100%{ transform:scale(1); opacity:.20; } 50%{ transform:scale(.8); opacity:.1; } }
@keyframes thBlob{ 0%,100%{ border-radius:42% 58% 55% 45% / 52% 44% 56% 48%; transform:rotate(0deg); }
  50%{ border-radius:56% 44% 47% 53% / 44% 56% 44% 56%; transform:rotate(8deg); } }
/* Entrée animée du contenu texte (glissé + fondu, en cascade) */
.th-slide-text > *{ opacity:0; transform:translateY(18px); }
.th-slide.is-active .th-slide-text > *{ animation:thRise .6s cubic-bezier(.2,.75,.3,1) forwards; }
.th-slide.is-active .th-slide-kicker{ animation-delay:.05s; }
.th-slide.is-active .th-slide-title{ animation-delay:.13s; }
.th-slide.is-active .th-slide-cta{ animation-delay:.23s; }
@keyframes thRise{ to{ opacity:1; transform:none; } }
/* Arabe : le texte du panneau passe en RTL, le carrousel reste LTR. */
html[dir="rtl"] .th-slide-text{ direction:rtl; text-align:right; }
html[dir="rtl"] .th-slide-cta svg{ transform:scaleX(-1); }
html[dir="rtl"] .th-slide:hover .th-slide-cta svg{ transform:scaleX(-1) translateX(3px); }
/* Barre de progression de l'auto-défilement */
.th-slider-progress{ position:absolute; left:0; right:0; bottom:0; height:5px; z-index:5;
  background:rgba(30,42,50,.10); }
.th-slider-progress i{ display:block; height:100%; width:0; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg, var(--teal), #35ac74); box-shadow:0 0 12px rgba(38,167,154,.55); }
/* Compteur de slides « 01 / 06 » */
.th-slider-count{ position:absolute; top:16px; left:20px; z-index:5;
  font:800 12px/1 var(--head); letter-spacing:1.5px; color:#fff;
  background:rgba(30,42,50,.26); backdrop-filter:blur(4px);
  padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
html[dir="rtl"] .th-slider-count{ left:auto; right:20px; }
/* Flèches */
.th-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:28px; line-height:1; display:grid; place-items:center; border:none; cursor:pointer;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4); transition:background .15s, transform .15s, box-shadow .15s; }
.th-slider-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.09); box-shadow:0 12px 28px -8px rgba(0,0,0,.45); }
.th-slider-prev{ left:22px; }
.th-slider-next{ right:22px; }
/* Points */
.th-slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.th-slider-dots button{ width:9px !important; height:9px; min-width:0 !important; min-height:0; padding:0 !important;
  border:none !important; border-radius:50%; background:#d9cec2 !important; box-shadow:none !important;
  cursor:pointer; transition:width .25s cubic-bezier(.16,1,.3,1), background .2s; }
.th-slider-dots button:hover{ background:var(--muted) !important; }
.th-slider-dots button.is-active{ width:28px !important; border-radius:99px; background:var(--teal) !important; }
@media (prefers-reduced-motion: reduce){
  .th-slider-track{ transition:none; }
  .th-slide-text{ animation:none; translate:none; }
  .th-slide-text > *{ opacity:1; transform:none; animation:none; }
  .th-slide-text::before, .th-slide-text::after,
  .th-slide-title::after, .th-slide-cta::before{ animation:none; }
  .th-slide-title::after{ transform:scaleX(1); }
  .th-slide-media, .th-slide-media img,
  .th-slide-media::before, .th-slide-media::after{ animation:none; opacity:1; transform:none; translate:none; }
}
/* ---- Mobile : carte 100 % colorée, image carrée entière encadrée en blanc ----
   Sur petit écran on empile (image en haut, texte en dessous) et on donne à
   TOUT le slide le fond dégradé de l'accent : l'image est posée sur une vignette
   blanche arrondie (object-fit:contain → aucune coupe des visuels carrés), le
   texte passe en blanc dessous. `aspect-ratio` ne contraignait pas la hauteur
   (l'image montait à 526 px) : on fixe une hauteur d'image explicite. */
@media (max-width:820px){
  .th-slide{ grid-template-columns:1fr; min-height:0;
    background:linear-gradient(165deg, var(--acc), color-mix(in srgb, var(--acc) 66%, #1e2a32)); }
  .th-slide-media{ order:-1; aspect-ratio:auto; display:block; height:auto;
    background:transparent; padding:16px 16px 0; }
  .th-slide-media::before, .th-slide-media::after{ display:none; }  /* blob + ombre sol : desktop only */
  .th-slide-media img{ width:100%; height:196px !important; max-height:196px !important;
    object-fit:contain; background:#fff; border-radius:16px; padding:10px;
    box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .th-slider-count{ top:12px; left:14px; padding:6px 10px; font-size:11px; }
  .th-slide-text{ background:transparent; padding:16px 20px 24px; gap:9px; }
  .th-slide-kicker{ font-size:13px; }
  .th-slide-title{ font-size:24px; }
  .th-slide-cta{ font-size:15px; padding:11px 22px; box-shadow:0 6px 16px rgba(0,0,0,.22); }
  .th-slider-arrow{ display:none; }        /* mobile : swipe + points suffisent */
  .th-slider{ padding:0 14px; margin:14px auto 24px; }
  .th-slider-viewport{ border-radius:22px; }
  .th-slider-dots{ margin-top:12px; }
}
@media (max-width:380px){
  .th-slide-media img{ height:172px !important; max-height:172px !important; }
  .th-slide-title{ font-size:22px; }
}

/* ============================================================================
   Header — équilibrage après réduction du menu (Accueil + Contact)
   Le menu ne contient plus que 2 liens : sans cela ils restaient collés au logo
   avec un grand vide. On centre le groupe (auto-marge des deux côtés) et on
   habille le sélecteur de langue en toggle segmenté propre.
   ==========================================================================*/
@media(min-width:901px){
  /* Auto-marge à gauche du 1er lien : combinée à celle de la langue, elle
     centre « Accueil · Contact » entre le logo et les actions. */
  .site-header .site-navigation .menu > li:first-child{ margin-inline-start:auto; }
}
/* Item actif : pastille douce au lieu du petit fond isolé */
.site-header .site-navigation .menu > li.current-menu-item > a{
  background:rgba(38,167,154,.10); border-radius:12px;
}

/* --- Sélecteur de langue : toggle segmenté FR | AR --- */
.aod-lang{ display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  box-shadow:0 2px 8px rgba(43,43,64,.06); }
.site-header .site-navigation .menu .aod-lang__btn,
.aod-lang__btn{ display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; padding:6px 14px !important; margin:0 !important;
  border-radius:999px !important; font-weight:800; font-size:13px; line-height:1;
  color:var(--muted) !important; background:transparent !important; text-decoration:none;
  transition:color .18s ease, background .18s ease; }
.site-header .site-navigation .menu .aod-lang__btn:not(.is-active):hover{ color:var(--ink) !important; background:var(--cream) !important; }
.site-header .site-navigation .menu .aod-lang__btn.is-active{ background:var(--teal) !important; color:#fff !important;
  box-shadow:0 2px 8px rgba(38,167,154,.35); }
.aod-lang__btn::before{ display:none !important; }   /* pas de soulignement animé ici */
.menu-item-aod-lang{ margin-inline-end:12px; }        /* respiration avant le panier */

/* ============================================================
   Fiche produit — bouton « Ajouter au panier » (en plus du
   formulaire de commande directe). Demande client 2026-07-24.
   ============================================================ */
.th-single-cart{ margin:14px 0 6px; }
.th-add-to-cart.button,
a.th-add-to-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 22px; border-radius:16px;
  background:#fff; color:var(--teal); border:2px solid var(--teal);
  font-weight:800; font-size:16px; line-height:1.1; text-decoration:none; cursor:pointer;
  box-shadow:0 2px 10px rgba(38,167,154,.12);
  transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.th-add-to-cart.button:hover,
a.th-add-to-cart:hover{ background:var(--teal); color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(38,167,154,.28); }
.th-add-to-cart.loading{ opacity:.65; pointer-events:none; }
.th-add-to-cart.added{ background:var(--teal); color:#fff; }
.th-single-cart .added_to_cart{ display:inline-block; margin-top:8px; width:100%;
  text-align:center; font-weight:700; color:var(--teal); text-decoration:underline; }
.th-single-cart-hint{ margin:8px 2px 0; font-size:13px; color:var(--muted); text-align:center; }
.th-single-or{ display:flex; align-items:center; gap:12px; margin:16px 2px 4px;
  color:var(--muted); font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.th-single-or span{ white-space:nowrap; }
.th-single-or::before, .th-single-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ============================================================
   Bouton flottant WhatsApp — tout le site public.
   ============================================================ */
.th-wa-float{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff !important; text-decoration:none;
  box-shadow:0 6px 20px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.15);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:thWaPulse 2.6s ease-in-out infinite;
}
.th-wa-float:hover{ transform:scale(1.08); color:#fff !important;
  box-shadow:0 10px 26px rgba(37,211,102,.55), 0 2px 6px rgba(0,0,0,.15); }
.th-wa-float svg{ display:block; }
@keyframes thWaPulse{
  0%,100%{ box-shadow:0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  50%{ box-shadow:0 6px 20px rgba(37,211,102,.45), 0 0 0 12px rgba(37,211,102,0); }
}
html[dir="rtl"] .th-wa-float{ right:auto; left:18px; }
@media (max-width:600px){
  .th-wa-float{ width:52px; height:52px; right:14px; bottom:14px; }
  .th-wa-float svg{ width:27px; height:27px; }
}
@media (prefers-reduced-motion:reduce){ .th-wa-float{ animation:none; } }

/* ============================================================
   Page « À propos de nous » — shortcode [th_about] (arabe, RTL)
   ============================================================ */
.th-about{ max-width:900px; margin:0 auto; padding:0 20px 64px; text-align:right;
  font-family:'Rubik',system-ui,-apple-system,sans-serif; color:var(--ink,#2b2b40); }
.th-about *{ box-sizing:border-box; }
.th-about-hero{ text-align:center; padding:56px 24px 46px; margin:22px 0 36px;
  border-radius:28px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1f9d90 0%,#26bfa9 55%,#43d3b9 100%);
  box-shadow:0 18px 42px rgba(34,166,153,.30); }
.th-about-kicker{ display:inline-block; background:rgba(255,255,255,.20);
  padding:7px 17px; border-radius:999px; font-weight:700; font-size:14px; margin-bottom:16px; }
.th-about-title{ color:#fff; font-size:clamp(28px,5vw,44px); font-weight:900; margin:0 0 14px; line-height:1.25; }
.th-about-lead{ font-size:clamp(16px,2.4vw,21px); font-weight:600; line-height:1.8; margin:0; opacity:.97; }
.th-about-body{ font-size:17px; line-height:2.05; }
.th-about-body > p{ margin:0 0 20px; }
.th-about-intro{ font-size:19px; font-weight:600; color:#177f74; }
.th-about-block{ margin:32px 0; }
.th-about-block h2{ font-size:clamp(22px,3vw,28px); font-weight:800; margin:0 0 14px;
  color:var(--ink,#2b2b40); display:flex; align-items:center; gap:10px; }
.th-about-block h2.th-about-center{ justify-content:center; text-align:center; }
.th-about-emoji{ font-size:1.1em; line-height:1; }
.th-about-mission{ background:linear-gradient(135deg,#eafaf7,#f3fbf9);
  border:2px solid #cdeee7; border-radius:22px; padding:26px 28px; }
.th-about-mission h2{ color:#177f74; }
.th-about-promise{ background:#fff7ef; border:2px dashed #ffcf9e; border-radius:22px; padding:26px 28px; }
.th-about-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:22px; }
.th-about-card{ background:#fff; border:1.5px solid var(--line,#ececf4); border-radius:20px;
  padding:26px 22px; text-align:center; box-shadow:0 6px 18px rgba(43,43,64,.06);
  transition:transform .18s ease, box-shadow .18s ease; }
.th-about-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(34,166,153,.18); }
.th-about-ico{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px;
  border-radius:50%; background:linear-gradient(135deg,#eafaf7,#d6f2eb); font-size:28px; margin-bottom:14px; }
.th-about-card h3{ font-size:19px; font-weight:800; margin:0 0 8px; color:#177f74; }
.th-about-card p{ margin:0; font-size:15px; color:var(--muted,#6b6b80); line-height:1.7; }
.th-about-cta{ text-align:center; margin:46px 0 0; padding:44px 28px; border-radius:26px;
  background:linear-gradient(135deg,#2b2b40,#3a3a58); color:#fff; }
.th-about-cta h2{ color:#fff; font-size:clamp(24px,3.5vw,32px); font-weight:900; margin:0 0 10px; }
.th-about-cta p{ margin:0 0 26px; font-size:17px; opacity:.92; }
.th-about-cta-btn{ display:inline-block; background:linear-gradient(135deg,#22a699,#37cbb3); color:#fff !important;
  padding:15px 36px; border-radius:999px; font-weight:800; font-size:17px; text-decoration:none;
  box-shadow:0 10px 26px rgba(34,166,153,.42); transition:transform .16s ease, box-shadow .16s ease; }
.th-about-cta-btn:hover{ transform:translateY(-2px) scale(1.02); color:#fff !important;
  box-shadow:0 16px 34px rgba(34,166,153,.52); }
@media (max-width:640px){
  .th-about-cards{ grid-template-columns:1fr; }
  .th-about-hero{ padding:42px 18px 34px; }
  .th-about-mission, .th-about-promise{ padding:22px 20px; }
}