/* =========================================================================
   commun.css — Styles partagés entre toutes les pages de « Boutique aux 4 Vents »
   (page d'accueil, catégorie, et futures pages)

   Ce fichier ne contient QUE ce qui doit rester identique partout : couleurs,
   police, arrière-plan, structure générale de page, logo/ornements (étoile,
   profil, panier), la base des panneaux "overlay", et le script de mise à
   l'échelle sur grand écran.

   Chaque page garde son propre bloc <style> pour tout ce qui lui est propre
   (titres, grilles, boutons spécifiques…). Comme ce fichier est chargé AVANT
   le <style> de la page, tu peux toujours surcharger une règle ici juste en
   la réécrivant dans le <style> de la page concernée (ex: changer la taille
   d'un titre sur une seule page) — la règle de la page l'emporte.
   ========================================================================= */

:root{
  --montserrat: 'Montserrat', system-ui, -apple-system, sans-serif;
  --ink:#2e2a24;
  --panel:#fffaf2;
  --panel-border:#e4d9c4;
  --accent:#c96a6a;
  --accent-2:#8fae9c;
  --shadow: 0 10px 30px rgba(40,30,10,.18);
  --frame-h: clamp(72px, 22vw, 105.6px);
  --rose: #e0637a;
  --rose-fonce: #a83f54;
  --rose-clair: #ff9aab;
  /* couleurs extraites du logo (arbre) */
  --brun-clair: #a08e78;
  --brun: #7a6b58;
  --brun-fonce: #55483a;
  --sauge-clair: #b7d4c8;
  --sauge: #8fae9c;
  --sauge-fonce: #5c8778;
}
*{box-sizing:border-box;}
/* overflow-x:hidden sur html ET body (22.09.2026) : certains navigateurs mobiles
   (Safari iOS notamment) autorisent quand meme le scroll/rebond horizontal du
   document si seul body l'a -- necessaire depuis que .page-scroll (voir
   body.view-home .page-scroll dans index.html) deborde davantage de .page pour
   eviter de rogner le texte accueil, meme si ce debordement est deja cense etre
   invisible (clippe par #scale-wrap). Rapporte par Fred : "la page ne doit pas
   scroller". */
html,body{margin:0;padding:0;height:100%;overflow-x:hidden;}
body{
  font-family:var(--montserrat);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Transition douce entre les pages (navigateurs qui la supportent) ----------
   Sur les navigateurs qui savent le faire (Chrome/Edge, et de plus en plus Safari), cette
   seule règle suffit à demander un fondu-enchaîné natif entre l'ancienne et la nouvelle
   page lors d'un clic sur un lien vers une autre page du site (au lieu du changement
   instantané par défaut) : le navigateur garde une "photo" de la page qu'on quitte
   affichée pendant que la nouvelle se prépare, puis fond doucement de l'une à l'autre.
   Sur les navigateurs qui ne la connaissent pas encore, cette règle est simplement
   ignorée — comportement inchangé, aucun risque. */
@view-transition{
  navigation:auto;
}

/* ---------- Arrière-plan fixe (plein écran, ne bouge pas au scroll) ---------- */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:-1;
  background:url('asset/fond.jpg') center center / cover no-repeat;
}

/* ---------- Page ---------- */
.page{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  padding-top:max(14px, env(safe-area-inset-top));
  padding-bottom:max(14px, env(safe-area-inset-bottom));
  transform-origin:top center;
  /* Invisible tant que commun.js n'a pas calculé et posé la bonne mise à l'échelle
     (voir fitPageToScreen() + classe .page-ready) : évite l'flash de logo géant/
     déformé qu'on voit sinon le temps que le script s'exécute après le chargement
     d'une page. Le fond (.bg-fixed) reste lui visible tout de suite, donc l'écran
     n'est jamais "blanc" pendant cette très courte attente. Le <noscript> de chaque
     page annule cette règle si JavaScript est désactivé, pour ne jamais bloquer
     l'affichage dans ce cas. */
  opacity:0;
}
.page.page-ready{
  opacity:1;
  transition:opacity .15s ease;
}

/* ---------- Barre du haut : logo ---------- */
.topbar{
  position:relative;
  padding:4px 8px 0;
}
.logo-img{
  width:93.248%;
  max-width:451.2px;
  height:auto;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));
  transform:translate(clamp(-12px, -2.5vw, -9px), clamp(-24px, -5vw, -18px));
}

/* ---------- Ornements suspendus sous les racines : étoile / profil / panier ---------- */
.ornaments{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(28px, 9vw, 43.2px);
  margin-top:-10.4%;
  padding:0 10px;
  transform:translateY(clamp(-42px, -8.75vw, -31px));
}
.ornament{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transform-origin:top center;
  animation:swing 4.5s ease-in-out infinite;
}
.ornament img{
  width:17.25vw;
  max-width:80.5px;
  min-width:52.9px;
  height:auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));
  display:block;
}
#btn-profil{animation-delay:.4s;}
#btn-panier{animation-delay:.8s;}
/* ---------- Ordre des ornements : panier, étoile, profil (18.10.2026, demande de Fred) ----------
   Le HTML place maintenant le panier en 1er, l'étoile en 2e, le profil en 3e. Pour que le CLOU de
   chaque icône tombe exactement là où était le clou de l'ancienne icône du même emplacement
   (étoile -> panier, profil -> étoile, panier -> profil), chaque icône est décalée par la propriété
   individuelle `translate` (indépendante de `transform`, donc l'animation swing n'est pas touchée),
   sur le bouton ou, quand il existe, sur le wrapper du profil (pour que le menu déroulant et le
   point vert "connecté" suivent). Valeurs = différence entre les positions de clou propres à chaque
   image (clou mesuré dans asset/*.png, échelle 1.49317, décalages internes des icônes inclus) :
   panier = clou de l'ancienne étoile ; étoile = clou de l'ancien profil ; profil = clou de l'ancien panier.
   Valables sur toutes les pages (largeur d'icône 80.5px, échelle 1.49317, identiques partout). */
.ornaments > #btn-panier{translate:-19.92px 0px;}
.ornaments > #btn-etoile{translate:13.81px 2px;}
.ornaments > #btn-profil, .ornaments > .ornament-profil-wrap{translate:6.11px -2px;}
.ornament:active img{transform:scale(.92);}
@keyframes swing{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}

/* ---------- Icône profil : indicateur "connecté" + menu déroulant (se déconnecter) ----------
   Ajouté pour refléter l'état connecté/déconnecté du client (voir le script de
   index.html / mes_paniers.html : window.b4vOnAuthChange). #btn-profil garde sa classe
   .ornament (et donc l'animation swing) ; seul un wrapper autour du bouton est ajouté
   pour pouvoir positionner le menu, sans changer la taille ni l'espacement de la rangée
   d'icônes (le wrapper épouse exactement la taille du bouton). */
.ornament-profil-wrap{
  position:relative;
  display:inline-flex;
}
#btn-profil{position:relative;}
#btn-profil.connecte::after{
  content:"";
  position:absolute;
  /* Déplacé de 25px vers le haut et 15px vers la gauche (demande explicite
     du 03.09.2026), de la même façon sur toutes les pages puisque cette
     règle vit dans commun.css (partagé). Valeurs d'origine : top:6%; right:6%. */
  top:calc(6% - 25px);
  right:calc(6% + 15px);
  /* Taille +50% (demande explicite du 03.09.2026) : 13% -> 19.5%,
     9px -> 13.5px, 13px -> 19.5px. */
  width:19.5%;
  min-width:13.5px;
  max-width:19.5px;
  aspect-ratio:1/1;
  border-radius:50%;
  background:#3fb950;
  border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.profil-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:8px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  padding:6px;
  min-width:170px;
  z-index:60;
}
.profil-menu[hidden]{display:none;}
.profil-menu-item{
  display:block;
  width:100%;
  background:none;
  border:none;
  padding:10px 14px;
  font-size:14px;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:6px;
  color:#333;
  white-space:nowrap;
  /* classe partagée bouton (Se déconnecter) / lien (Mon profil, ajouté
     ensuite) : text-decoration:none pour que le lien ait exactement le
     même rendu que le bouton (pas de soulignement par défaut). */
  text-decoration:none;
}
.profil-menu-item:hover{background:#f2f2f2;}

/* ---------- Overlays (base commune) ---------- */
.overlay-bg{
  position:fixed;inset:0;
  background:rgba(30,22,14,.42);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:50;
}
.overlay-bg.open{opacity:1;pointer-events:auto;}
.overlay-panel{
  width:100%;
  max-width:480px;
  max-height:82dvh;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:22px 22px 0 0;
  box-shadow:var(--shadow);
  padding:18px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(24px);
  transition:transform .25s ease;
  overflow-y:auto;
}
.overlay-bg.open .overlay-panel{transform:translateY(0);}
.overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.overlay-head h2{
  margin:0;font-size:1.15rem;font-weight:700;
}
.overlay-close{
  width:32px;height:32px;border-radius:50%;
  border:none;background:#efe6d6;
  font-size:1.1rem;line-height:1;cursor:pointer;
  color:var(--ink);
}
.overlay-empty{
  text-align:center;color:#7a7264;padding:22px 6px 10px;font-size:.95rem;
}

/* ---------- Champs de formulaire (overlay profil, etc.) ---------- */
.field{margin-bottom:12px;}
.field label{display:block;font-size:.8rem;color:#8a8171;margin-bottom:4px;}
.field input{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid var(--panel-border);font-family:var(--montserrat);font-size:.92rem;
  background:#fff;color:#8a8171;
}
.note{font-size:.8rem;color:#a39a89;text-align:center;margin-top:10px;}

/* ---------- Mise à l'échelle globale sur écran large (PC/tablette) ---------- */
#scale-wrap{
  width:100%;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* 18.10.2026 : meme bouton de fermeture rouge partout (carre aux coins arrondis,
   degrade rose, bordure blanche - comme la croix de fermeture d'article de
   index.html .close-btn). Chaque bouton garde sa taille ; seuls la forme et le
   fond sont unifies. Les croix vertes (verification e-mail/mot de passe) ne
   sont pas concernees. */
.auth-card-close,
.mc-box-close,
.options-close-btn,
.mp-close-btn,
#overlay-menu .overlay-close,
#overlay-alerte .overlay-close,
#overlay-categories .overlay-close,
#overlay-cadeau .overlay-close,
#overlay-choix-panier .overlay-close{
  border-radius:32% !important;
  background:linear-gradient(160deg, var(--rose-clair), var(--rose) 60%, var(--rose-fonce)) !important;
  border:2px solid #fff !important;
  color:#fff !important;
}

/* 18.10.2026 : les icônes panier / étoile / profil sont remontées et chevauchent la zone du
   ballon (placée après dans le DOM, donc peinte par-dessus) : les clics partaient sur le ballon.
   On les met au-dessus (z-index) pour qu'elles reçoivent les clics. */
.ornaments{position:relative;z-index:6;}