/* =============================================================================
* Tamalou Orthopedie - Entete & mega-menu (front)
* CSS pur & leger, zero Elementor. Les variables couleur --tml-* sont
* definies ici par defaut et surchargees par le bloc :root que le plugin
* injecte dans le (issu de la config style). Meme selecteur (:root),
* le bloc injecte est parse apres -> il gagne.
* ========================================================================== */
:root {
--tml-green: #6bbd45;
--tml-green-dk: #5aad34;
--tml-accent: #5ab031;
--tml-pale: #cfe9c7;
--tml-panel: #c9e7c1;
--tml-navy: #04092d;
--tml-sep: #a6c959;
--tml-cart: #69727d;
--tml-badge: #e24545;
--tml-card: rgba(255,255,255,.55);
--tml-radius: 14px;
--tml-maxw: 1440px;
--tml-shadow: 0 22px 45px rgba(20,50,15,.18);
--tml-f-body: 'Roboto', system-ui, -apple-system, sans-serif;
--tml-f-menu: 'Jost', 'Roboto', system-ui, sans-serif;
}
.tml-topbar *, .tml-topbar *::before, .tml-topbar *::after,
.tml-header *, .tml-header *::before, .tml-header *::after,
.tml-drawer *, .tml-drawer *::before, .tml-drawer *::after,
.tml-cart-drawer *, .tml-cart-drawer *::before, .tml-cart-drawer *::after { box-sizing: border-box; }
.tml-topbar a, .tml-header a, .tml-drawer a, .tml-cart-drawer a { text-decoration: none; color: inherit; }
.tml-topbar img, .tml-header img, .tml-drawer img, .tml-cart-drawer img { max-width: 100%; display: block; }
body.tml-noscroll { overflow: hidden; }
/* Les tiroirs (mobile + panier) sont en position:fixed hors-champ a droite :
on empeche tout scroll horizontal parasite. 'clip' n'etablit pas de conteneur
de defilement -> n'affecte pas position:sticky ni le scroll vertical. */
html { overflow-x: clip; }
/* Conteneur du header : sert de contexte aux container queries. Les tiroirs
* (mobile + panier) sont volontairement HORS de .tml-root pour rester en
* position:fixed relative a la fenetre (container-type etablirait sinon un
* nouveau bloc contenant qui casserait le fixed). */
.tml-root { container-type: inline-size; container-name: tmlroot; }
/* =========================================================================
* BARRE HAUTE (verte)
* ====================================================================== */
.tml-topbar { background: var(--tml-green); color: #fff; }
.tml-topbar__in {
max-width: var(--tml-maxw);
margin: 0 auto;
min-height: 57px;
padding: 8px 26px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 18px;
}
.tb-phone { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.tb-phone svg { width: 20px; height: 20px; flex: none; }
.tb-phone a { color: #fff; }
.tb-delivery { text-align: center; font-size: 15px; font-weight: 500; white-space: nowrap; }
/* --- recherche --- */
.tb-search { position: relative; justify-self: end; display: flex; align-items: center; width: 100%; max-width: 430px; }
/* !important : le champ/bouton sont des /