/* ==========================================================================
   Base : jetons, éléments, boutons, champs, messages, composants partagés.
   Les couleurs sont des ALIAS des couleurs de theme.json : le client les change
   dans Styles → Couleurs → Palette et tout le site suit ; les nuances se dérivent
   par color-mix(). --police-titres et --police-texte ne se définissent PAS ici :
   inc/theme.php les pose depuis Styles → Typographie (le « pont »).
   ========================================================================== */

/* ---------- Jetons ---------- */
:root{
  --fond:var(--wp--preset--color--fond);
  --surface:var(--wp--preset--color--surface);
  --texte:var(--wp--preset--color--texte);
  --sourdine:var(--wp--preset--color--sourdine);
  --trait:var(--wp--preset--color--trait);
  --accent:var(--wp--preset--color--accent);
  --sur-accent:var(--wp--preset--color--sur-accent);
  --promo:var(--wp--preset--color--promo);
  --alerte:var(--wp--preset--color--alerte);
  --surface-rose:var(--wp--preset--color--surface-rose);
  --rose:var(--wp--preset--color--rose);
  --rose-vif:var(--wp--preset--color--rose-vif);
  --lilas:var(--wp--preset--color--lilas);
  --nuit:var(--wp--preset--color--nuit);
  --nuit-2:var(--wp--preset--color--nuit-2);
  --nuit-3:var(--wp--preset--color--nuit-3);
  --sur-nuit:var(--wp--preset--color--sur-nuit);
  --sur-nuit-sourdine:var(--wp--preset--color--sur-nuit-sourdine);
  --trait-nuit:var(--wp--preset--color--trait-nuit);
  --coloris-ivoire:var(--wp--preset--color--coloris-ivoire);
  --coloris-nuit:var(--wp--preset--color--coloris-nuit);
  --coloris-sauge:var(--wp--preset--color--coloris-sauge);
  /* pastilles promotionnelles : texte blanc lisible (contraste ≥ 4,5:1) */
  --degrade-promo:linear-gradient(110deg,var(--promo),#6E55C9);

  --rayon:var(--wp--custom--rayon,10px);
  --rayon-grand:var(--wp--custom--rayon-grand,28px);
  --rayon-bouton:var(--wp--custom--rayon-bouton,999px);
  --surface-calme:#f6f4f8;
  --bord-composant:#d7d9e3;
  --texte-secondaire:#555b71;
  --rayon-carte:18px;
  --duree-interface:220ms;
  --largeur:1240px;
  --gouttiere:clamp(16px,4vw,40px);   /* règle aussi les sections pleine largeur */
  --entete-h:80px;
  --courbe:cubic-bezier(.22,1,.36,1);
  --sortie:cubic-bezier(.16,1,.3,1);   /* apparitions : départ vif, arrivée très douce */

  /* icônes en masques CSS (jamais de SVG dans le contenu) : couleur = currentColor */
  --i-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-diagonale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  --i-livraison:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v9H3zM14 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  --i-retour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E");
  --i-cadenas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
  --i-etoiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 16'%3E%3Cg%3E%3Cpath id='e' d='M8 0l2.35 4.95 5.45.7-4 3.75 1 5.4L8 12.2 3.2 14.8l1-5.4-4-3.75 5.45-.7z'/%3E%3Cuse href='%23e' x='19'/%3E%3Cuse href='%23e' x='38'/%3E%3Cuse href='%23e' x='57'/%3E%3Cuse href='%23e' x='76'/%3E%3C/g%3E%3C/svg%3E");

  /* variables exposées par WooCommerce, branchées sur les rôles du thème */
  --wc-separator-color:var(--trait);
  --wc-form-color-text:var(--texte);
  --wc-product-filter-chips-text:var(--texte);
  --wc-product-filter-chips-border:var(--trait);
  --wc-product-filter-chips-background:var(--fond);
  --wc-product-filter-chips-selected-text:var(--sur-accent);
  --wc-product-filter-chips-selected-border:var(--accent);
  --wc-product-filter-chips-selected-background:var(--accent);
  --wc-product-filter-price-slider:var(--accent);
  --wc-product-filter-price-slider-handle:var(--accent);
  --wc-product-filter-price-slider-handle-border:var(--fond);
  --wc-product-filter-checkbox-list-option-element:var(--trait);
  --wc-product-filter-checkbox-list-option-element-border:var(--trait);
  --wc-product-filter-checkbox-list-option-element-selected:var(--accent);
  --wc-product-filter-removable-chips-text:var(--texte);
  --wc-product-filter-removable-chips-border:var(--trait);
  --wc-product-filter-removable-chips-background:var(--surface);
  --wc-customer-account-dropdown-border-color:var(--trait);
  --wc-customer-account-dropdown-surface:var(--fond);
  --wc-customer-account-dropdown-item-hover-bg:var(--surface);
}

/* Ambiances « jour » (rosé) et « nuit » (bleu nuit) : l'accueil bascule au défilement (accueil.js) */
@property --ambiance-fond{syntax:"<color>";inherits:true;initial-value:transparent}
@property --ambiance-encre{syntax:"<color>";inherits:true;initial-value:transparent}
@property --ambiance-douce{syntax:"<color>";inherits:true;initial-value:transparent}
@property --ambiance-trait{syntax:"<color>";inherits:true;initial-value:transparent}
:root{--ambiance-fond:var(--fond);--ambiance-encre:var(--texte);--ambiance-douce:var(--sourdine);--ambiance-trait:var(--trait)}
body.theme-nuit{--ambiance-fond:var(--nuit);--ambiance-encre:var(--sur-nuit);--ambiance-douce:var(--sur-nuit-sourdine);--ambiance-trait:var(--trait-nuit)}
body:not(.home){--ambiance-fond:var(--fond)}

/* ---------- Éléments ---------- */
/* pseudo-éléments compris : sinon un rond de 9 px bordé mesure 11 px */
*,*::before,*::after{box-sizing:border-box}
/* pas de position:relative sur body : les décalages de la barre d'admin restent justes */
/* Fond du document : la nuit du pied et de la barre d'annonce, montrée quand la page rebondit (haut ou bas)
   et sous la barre du navigateur quand elle glisse. PIÈGE iPhone : cette couleur est celle du CORPS de
   page s'il en a une (posée par-dessus celle du document) : le corps reste transparent, et le fond rosé
   de la page est porté par .wp-site-blocks. Ses voiles (nuit et ciel de l'accueil) y vivent en z-index −1. */
html{background:var(--nuit);-webkit-tap-highlight-color:transparent}   /* pas de rectangle gris au toucher (iPhone) */
html body{background:transparent}
.wp-site-blocks{position:relative;z-index:1;min-height:100vh;background:var(--ambiance-fond)}
body{min-height:100vh;margin:0;color:var(--ambiance-encre);font-family:var(--police-texte);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wp-site-blocks,main{overflow-x:clip}
/* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */
img{max-width:100%;height:auto;display:block}
/* PIÈGE : img{display:block} écrase l'attribut hidden (deux vignettes par article dans le panier) */
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;font-family:var(--police-titres);text-wrap:balance;hyphens:none}
p{margin:0}
a{color:inherit;text-underline-offset:.18em}
@media (hover:hover){a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.button):not([class*="button"]):not([class*="bouton"])):hover{color:var(--accent)}}
/* sur les sections de nuit, un lien survolé passe au rosé (jamais bleu nuit sur bleu nuit) */
@media (hover:hover){body.theme-nuit a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.button):not([class*="button"]):not([class*="bouton"])):hover{color:var(--rose)}}
/* Gutenberg ajoute une marge entre frères : neutralisée dans theme.json (blockGap 0) et ici,
   À SPÉCIFICITÉ NULLE (un « .wp-block-group > * » écraserait les marges des composants) */
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}
.wrap{width:100%;max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)}

/* ---------- Champs de formulaire : WooCommerce, recherche, Contact Form 7 ---------- */
:where(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea){
  font:inherit;color:var(--texte);background:var(--fond);border:1px solid var(--trait);border-radius:var(--rayon);padding:12px 14px;min-height:48px;max-width:100%}
:where(input,select,textarea):focus{outline:none;border-color:var(--texte)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Boutons ----------
   Les styles de theme.json (elements.button) valent pour les boutons de la page ET
   pour ceux de WooCommerce, qui portent tous .wp-element-button. */
.wp-element-button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.wp-block-button.b-plein{display:inline-block;background:none;border:0;padding:0;border-radius:0}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--texte);border:1px solid var(--trait)}
/* boutons de la maquette : div.wp-block-button.bouton > a */
.wp-block-buttons.boutons{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
:is(.bouton,.bouton-blanc)>.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 30px;border-radius:var(--rayon-bouton);font-size:15px;font-weight:600;
  transition:background-color .35s var(--courbe),color .35s var(--courbe),transform .35s var(--courbe),box-shadow .35s var(--courbe)}
@media (hover:hover){:is(.bouton,.bouton-blanc)>.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--texte) 22%,transparent)}}
.bouton--clair>.wp-block-button__link{background:var(--surface);color:var(--texte)}
@media (hover:hover){.bouton--clair>.wp-block-button__link:hover{background:var(--surface);color:var(--texte)}}
.bouton--rose>.wp-block-button__link{background:var(--rose);color:var(--nuit)}
@media (hover:hover){.bouton--rose>.wp-block-button__link:hover{background:var(--surface-rose);color:var(--nuit)}}
.bouton-blanc>.wp-block-button__link{background:var(--surface);color:var(--nuit)}
@media (hover:hover){.bouton-blanc>.wp-block-button__link:hover{background:var(--surface-rose);color:var(--nuit)}}
/* lien fléché : p.lien-fleche > a, la flèche est portée par le lien */
.lien-fleche{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.lien-fleche a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;color:inherit;
  text-decoration:none;border-bottom:1px solid currentColor}
.lien-fleche a::after{content:"";width:18px;height:18px;background:currentColor;transition:transform .3s var(--courbe);
  -webkit-mask:var(--i-fleche) center/contain no-repeat;mask:var(--i-fleche) center/contain no-repeat}
@media (hover:hover){.lien-fleche a:hover{color:inherit}}
@media (hover:hover){.lien-fleche a:hover::after{transform:translateX(4px)}}

/* ---------- Composants partagés ---------- */
.surtitre{font-family:var(--police-texte);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ambiance-douce);margin-bottom:18px}
/* titres découpés en lignes par interface.js, révélés par un masque. La ligne déborde de sa boîte
   (jambages des « p », « g ») : le masque et le texte s'étendent dessous, la mise en page ne bouge pas.
   Un texte en dégradé (background-clip:text) n'est peint que dans sa boîte : sans ce débord, le bas
   du « p » de « simplement » était coupé. */
.ligne{display:block;overflow:hidden;padding-block:.14em .26em;margin-block:-.14em -.26em}
.ligne>span{display:block;padding-block:.06em .24em;margin-block:-.06em -.24em}

/* ---------- Apparitions (inc/apparitions.php, interface.js) ----------
   Ce qui est dans le premier écran s'affiche tel quel, dès la première image : au chargement, au
   rechargement ou d'une page à l'autre, rien ne s'affiche à moitié avant d'apparaître. Plus bas,
   interface.js marque les blocs « a-reveler » (masqués) et ajoute « est-revele » à leur entrée dans
   l'écran. Les animations (transform, opacity) sont jouées par la carte graphique et ramènent chaque
   bloc à son état normal (rien n'est figé après coup : les survols restent intacts). */
.revele-titre.a-reveler:not(.est-revele) .ligne>span{transform:translateY(110%)}
.a-reveler:not(.est-revele):not(.revele-titre){opacity:0;transform:translateY(48px)}
.pied-geant>.a-reveler:not(.est-revele){transform:translateY(100%)}
.revele-titre.a-reveler.est-revele .ligne>span{animation:ligne-monte 1.3s var(--sortie) calc(var(--i,0) * .1s) backwards}
.a-reveler.est-revele:not(.revele-titre){animation:bloc-monte 1.1s var(--sortie) calc(var(--i,0) * .09s) backwards}
.pied-geant>.a-reveler.est-revele{animation-name:lettre-monte}
/* arrivée sur une page (classe « entree » posée dans <head>, inc/theme.php) : les titres du premier écran montent,
   dès la première image (aucun titre affiché puis effacé). Pas au rechargement ni au retour. */
html.anim.entree:not(.intro) :is(.revele-titre:not(.a-reveler),.heros:not(.est-ouvert) .heros__titre) .ligne>span{animation:ligne-monte 1.25s var(--sortie) calc(.1s + var(--i,0) * .12s) backwards}
@keyframes ligne-monte{from{transform:translateY(110%)}}
@keyframes bloc-monte{from{opacity:0;transform:translateY(48px)}}
@keyframes lettre-monte{from{opacity:0;transform:translateY(100%)}}
/* toucher (sans survol) : un léger retour visuel à la place du rectangle gris de l'iPhone */
@media (hover:none){:is(a,button,[role="button"],summary):active{opacity:.6}}
/* tête de section : titre à gauche, texte à droite */
.tete-section{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto 56px;padding-inline:var(--gouttiere);
  display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:40px}
.tete-section__titre{font-size:clamp(32px,4vw,60px);line-height:.98;letter-spacing:-.01em;font-weight:400}
.tete-section__texte{max-width:380px;color:var(--ambiance-douce);justify-self:end}
.tete-section--lien{grid-template-columns:1fr auto}
/* promesses : paragraphes à icône. N'y écrire QUE des faits (seuil de livraison, retours, paiement) */
.promesse{display:flex;align-items:center;gap:12px;font-size:14px}
.promesse::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i-livraison) center/contain no-repeat;mask:var(--i-livraison) center/contain no-repeat}
.promesse-retours::before{-webkit-mask-image:var(--i-retour);mask-image:var(--i-retour)}
.promesse-paiement::before{-webkit-mask-image:var(--i-cadenas);mask-image:var(--i-cadenas)}
/* messages du balisage classique de WooCommerce (Mon compte, suivi) */
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 24px;padding:16px 20px;
  border-radius:var(--rayon);background:var(--surface);border-left:3px solid var(--texte)}
.woocommerce-error{border-left-color:var(--alerte)}
@keyframes coeur-bat{30%{transform:scale(1.3)}60%{transform:scale(.92)}}

/* ---------- Bandeau de cookies (SureCookie) aux couleurs et polices NYVALI ---------- */
:root,.surecookie-public-banner-wrapper,.surecookie-preferences-modal,.surecookie-styles{
  --surecookie-banner-background-color:#fff!important;
  --surecookie-banner-text-color:var(--texte)!important;
  --surecookie-banner-primary-color:var(--nuit)!important;
  --surecookie-banner-primary-hover-color:var(--nuit-2)!important;
  --surecookie-banner-primary-text-color:#fff!important;
  --surecookie-banner-secondary-color:var(--surface-rose)!important;
  --surecookie-banner-secondary-text-color:var(--texte)!important;
  --surecookie-banner-overlay-color:color-mix(in srgb,var(--nuit) 45%,transparent)!important}
.surecookie-public-banner-wrapper,.surecookie-public-banner-wrapper *,.surecookie-preferences-modal,.surecookie-preferences-modal *{font-family:var(--police-texte)!important}
.surecookie-public-banner-wrapper :is(h1,h2,h3,h4,.surecookie-banner-title),.surecookie-preferences-modal :is(h1,h2,h3,h4){font-family:var(--police-titres)!important;font-weight:400!important;color:var(--texte)!important}
.surecookie-public-banner-wrapper>*{border-radius:24px!important;box-shadow:0 30px 60px -24px color-mix(in srgb,var(--nuit) 45%,transparent)!important;border:1px solid var(--trait)!important}
.surecookie-banner-description,.surecookie-modal-description{color:var(--sourdine)!important;line-height:1.55!important}
.surecookie-btn-base,.surecookie-btn-primary,.surecookie-btn-outline,.surecookie-preferences-btn{border-radius:999px!important;min-height:46px!important;font-weight:600!important;transition:transform .3s var(--courbe),background .3s!important}
.surecookie-btn-primary{background:var(--nuit)!important;border-color:var(--nuit)!important;color:#fff!important}
@media (hover:hover){.surecookie-btn-primary:hover{background:var(--nuit-2)!important;transform:translateY(-1px)}}
.surecookie-btn-outline,.surecookie-preferences-btn{background:#fff!important;border:1px solid var(--nuit)!important;color:var(--nuit)!important}
@media (hover:hover){.surecookie-btn-outline:hover,.surecookie-preferences-btn:hover{background:var(--surface-rose)!important}}
.surecookie-toggle-btn[aria-checked="true"],.surecookie-toggle-btn.is-active{background:var(--rose-vif)!important}
.surecookie-modal-tab[aria-selected="true"]{color:var(--nuit)!important;border-color:var(--rose-vif)!important}

/* ---------- Performances et confort ---------- */
/* rien ne s'anime hors de l'écran (classe posée par interface.js) */
.est-hors-ecran,.est-hors-ecran *,.est-hors-ecran::before,.est-hors-ecran::after,.est-hors-ecran *::before,.est-hors-ecran *::after{animation-play-state:paused!important}

@media (max-width:1024px){
  .tete-section{grid-template-columns:1fr;gap:16px}
  .tete-section__texte{justify-self:start}
  .tete-section--lien{grid-template-columns:1fr auto}
}
@media (max-width:640px){
  body{font-size:15px}
  .tete-section{margin-bottom:36px}
  .tete-section--lien{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Retours d’achat partagés : texte réel, fermeture au clavier, aucune alerte bloquante. */
.retour-ajout{position:relative;margin:12px 0;padding:16px 46px 16px 16px;border:1px solid var(--bord-composant);border-radius:var(--rayon-carte);background:var(--surface-calme);color:var(--nuit);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.retour-ajout p{margin:0 0 6px}.retour-ajout a{font-weight:600;color:var(--nuit);text-decoration:underline}
.retour-ajout>button{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:transparent;color:var(--nuit);font:400 24px var(--police-texte);cursor:pointer}
.retour-ajout--erreur{border-color:#b75c7c;background:#fff5f7}
.wc-block-mini-cart__drawer .retour-ajout{flex:none;margin:12px 16px 0}
:is(.quiz__ajout,.associe__ajout,.livraison-coup__bouton,.single_add_to_cart_button)[aria-busy=true]{cursor:wait;opacity:.65}
@media(hover:hover){.retour-ajout a:hover{color:var(--promo)}}

/* Hauteur visible sur ordinateur (barre d'administration déduite) : les blocs de présentation et leurs
   images s'y bornent pour se voir en entier, des portables 13 pouces aux grands écrans (1.8.21). */
@media (min-width:1025px){
  :root{--vue:100svh}
  .admin-bar{--vue:calc(100svh - 32px)}
}

/* Aucun fil d'Ariane affiché (demande du client, 16-10), y compris s'il est ajouté plus tard dans l'éditeur. */
.woocommerce-breadcrumb,.wp-block-woocommerce-breadcrumbs,.fil-ariane{display:none!important}


/* Modes de livraison (marqueur [[livraison-modes]], inc/livraison.php) : page Livraison et retours, fiches produit */
.livraison-modes{display:grid;gap:8px;margin:12px 0;padding:0;list-style:none}
.livraison-modes__mode{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:12px 16px;border-radius:var(--rayon);background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--texte) 9%,transparent)}
.livraison-modes__nom{font-weight:600;color:var(--nuit)}
.livraison-modes__delai{grid-column:1;grid-row:2;font-size:14px;color:var(--texte-secondaire)}
.livraison-modes__prix{grid-column:2;grid-row:1/span 2;font-weight:600;color:var(--nuit);white-space:nowrap}
.livraison-modes__seuil,.livraison-modes__preparation{margin:6px 0 0;font-size:14px;color:var(--texte-secondaire)}