/* ==========================================================================
   Beleez Cooking & Recipes — charte de la vitrine
   Jalon 2 · 14/08/2026
   Les couleurs sont relevées au pixel sur les étiquettes Piment & Co (2024) :
   le noir du bocal, l'or du logo Beleez, le rouge du chiffre de force et le
   vert des piments. Rien n'est inventé, tout vient de l'étiquette.
   ========================================================================== */

:root{
  /* --- Couleurs de marque, relevées sur l'étiquette ------------------- */
  --noir:        #201820;   /* fond de l'étiquette */
  --noir-doux:   #2C2429;
  --or:          #D0A028;   /* arc du logo Beleez */
  --or-fonce:    #805820;   /* lettrage BELEEZ */
  --or-clair:    #E8C46A;
  --rouge:       #D02028;   /* chiffre « Force » */
  --rouge-fonce: #A5171E;
  --vert:        #688838;   /* piments de l'étiquette */
  --vert-fonce:  #4A6528;
  --vert-clair:  #E8F0DC;

  /* --- Fonds et textes ------------------------------------------------ */
  /* Fond blanc sur toute la plateforme, comme la maquette d'origine
     (arbitrage du 15/08/2026). Les deux anciens crèmes restent nommés — ils
     sont lus partout — mais valent désormais le blanc. `--gris` prend le
     relais là où un aplat doit rester visible sur fond blanc. */
  --creme:       #FFFFFF;
  --creme-alt:   #FFFFFF;
  --gris:        #F4F4F6;
  --blanc:       #FFFFFF;
  --encre:       #1B1618;
  --encre-douce: #6A625F;
  --trait:       #E2E2E6;
  /* Contour des encadrés : bleu marine royal, partout. Porté de 1 à 2 px le
     15/08/2026 au soir — à 1 px sur fond blanc, le trait ne se voyait pas.
     Un seul jeton, `--bord`, pour que l'épaisseur ne dérive plus d'une page
     à l'autre. */
  --contour:     #0F1B3D;
  --bord:        2px solid var(--contour);

  /* --- Échelle d'espacement ------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  /* Écart vertical entre deux blocs, arrêté à 0,5 cm le 15/08/2026. */
  --ecart: 19px;

  /* --- Typographie ----------------------------------------------------- */
  --titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Divers ---------------------------------------------------------- */
  --rayon:    14px;
  --rayon-sm: 8px;
  --ombre:    0 1px 2px rgba(27,22,24,.06), 0 8px 24px rgba(27,22,24,.06);
  --ombre-f:  0 2px 6px rgba(27,22,24,.10), 0 18px 44px rgba(27,22,24,.12);
  --largeur:  1240px;
  --entete:   76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--texte);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* --- Titres ------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--titre);font-weight:700;line-height:1.15;margin:0 0 var(--e4);letter-spacing:-.01em}
h1{font-size:clamp(38px,5.2vw,62px)}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:clamp(20px,2.2vw,26px)}
h4{font-size:18px}
h1 em,h2 em{font-style:italic;color:var(--rouge)}
p{margin:0 0 var(--e4)}

.sur-titre{
  font-family:var(--texte);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce);
  margin-bottom:var(--e2);display:block;
}

/* --- Structure --------------------------------------------------------- */
.enveloppe{max-width:var(--largeur);margin:0 auto;padding:0 var(--e5)}
.bloc{padding:var(--ecart) 0}
.bloc--serre{padding:var(--ecart) 0}
.bloc--creme{background:var(--creme-alt)}
.bloc--noir{background:var(--noir);color:var(--creme)}
.bloc--noir h1,.bloc--noir h2,.bloc--noir h3{color:var(--blanc)}
.bloc--noir .sur-titre{color:var(--or)}

.grille{display:grid;gap:var(--e5)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.grille--3,.grille--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grille--2,.grille--3,.grille--4{grid-template-columns:1fr}}

/* --- En-tête ----------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait);
}
.entete__barre{
  max-width:var(--largeur);margin:0 auto;padding:0 var(--e5);
  height:var(--entete);display:flex;align-items:center;gap:var(--e4);
}
.marque{display:flex;align-items:center;gap:var(--e3);flex-shrink:0}
.marque img{height:38px;width:auto}
.marque__nom{font-family:var(--titre);font-size:20px;font-weight:700;line-height:1}
.marque__sous{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--or-fonce)}

/* --- La barre de navigation ---------------------------------------------
   Six entrées depuis le 16/08/2026 (maquette de Sérilo) : Accueil · Nous ·
   Identités · Actualités · Boutique · Carnet. Deux d'entre elles portent un
   volet ; « Identités » n'a pas de page à elle et se tient donc en bouton,
   pas en lien qui ne mène nulle part. */
.nav{display:flex;align-items:center;gap:var(--e4);margin-left:auto;min-width:0;flex-wrap:nowrap}
.nav__lien{
  font-family:var(--texte);font-size:14px;font-weight:500;color:var(--encre);
  padding:6px 0;position:relative;white-space:nowrap;background:none;border:0;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1.6;
}
.nav__lien::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--rouge);transition:right .25s ease;
}
.nav__lien:hover::after,
.nav__lien[aria-current]::after,
.nav__lien[data-courant]::after{right:0}
.nav__lien[aria-current],.nav__lien[data-courant]{color:var(--rouge)}
.nav__lien svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* Un groupe : l'entrée, son chevron, et le volet qu'ils ouvrent. */
.nav__groupe{position:relative;display:inline-flex;align-items:center;gap:3px}
.nav__chevron{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--encre);
  display:inline-flex;align-items:center}
.nav__chevron svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.nav__volet{
  position:absolute;top:100%;left:-14px;min-width:210px;z-index:60;
  background:var(--blanc);border:var(--bord);border-radius:var(--rayon-sm);
  padding:var(--e2);margin-top:10px;box-shadow:var(--ombre-f);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__groupe:hover .nav__volet,
.nav__groupe:focus-within .nav__volet,
.nav__groupe.ouvert .nav__volet{opacity:1;visibility:visible;transform:translateY(0)}
.nav__volet a{
  font-size:13.5px;font-weight:500;color:var(--encre);padding:9px 12px;
  border-radius:6px;white-space:nowrap;
}
.nav__volet a:hover{background:var(--gris)}
.nav__volet a[aria-current]{color:var(--rouge);font-weight:600}
/* Le volet reste ouvert quand la souris descend vers lui : ce pont invisible
   couvre les dix pixels qui séparent l'entrée de son volet. */
.nav__groupe::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}

/* --- Le menu du téléphone ------------------------------------------------
   Sous 1320 px la barre se replie. Jusqu'au 16/08/2026 le bouton n'ouvrait
   rien : le site n'avait plus aucune navigation sur un téléphone. */
.menu-tel{border-top:1px solid var(--trait);background:var(--blanc);
  padding:var(--e3) var(--e5) var(--e5);max-height:75vh;overflow-y:auto}
.menu-tel nav{display:flex;flex-direction:column}
.menu-tel__entree{font-family:var(--titre);font-size:19px;font-weight:700;
  padding:13px 0;border-bottom:1px solid var(--trait);color:var(--encre)}
.menu-tel__entree[aria-current]{color:var(--rouge)}
.menu-tel__titre{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-fonce);padding:16px 0 6px}
.menu-tel__enfant{font-size:15px;padding:11px 0 11px var(--e4);
  border-bottom:1px solid var(--trait);color:var(--encre-douce)}
.menu-tel__enfant[aria-current]{color:var(--rouge)}

.nav__neuf{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:var(--vert);color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:2px;
}
.outils{display:flex;align-items:center;gap:var(--e3);flex-shrink:0}
.outil{
  width:40px;height:40px;border-radius:50%;border:var(--bord);
  background:var(--blanc);display:grid;place-items:center;cursor:pointer;
  position:relative;transition:border-color .2s,transform .2s;
}
.outil:hover{border-color:var(--or);transform:translateY(-1px)}
/* L'entrée d'administration, réservée aux administrateurs. */
.outil--admin{background:var(--noir);border-color:var(--noir)}
/* Deux classes dans le sélecteur, à dessein : la règle générale `.outil svg`
   est écrite PLUS BAS dans ce fichier et, à égalité de poids, c'est la dernière
   qui gagne — l'icône repassait en encre sombre sur le noir du bouton. */
.outil.outil--admin svg{stroke:var(--or);stroke-width:2.2;width:21px;height:21px}
.outil--admin:hover{background:var(--noir-doux);border-color:var(--or)}
.outil svg{width:19px;height:19px;stroke:var(--encre);fill:none;stroke-width:1.7}
.outil__compte{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--rouge);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
/* Sélecteur de langue */
.selecteur-langue{display:flex;gap:2px;align-items:center;border:var(--bord);
  border-radius:999px;padding:3px;background:var(--blanc)}
.selecteur-langue a{font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 7px;
  border-radius:999px;color:var(--encre-douce);line-height:1}
.selecteur-langue a:hover{color:var(--encre)}
.selecteur-langue a.on{background:var(--noir);color:var(--creme)}

.entete__menu{display:none;background:none;border:0;cursor:pointer;padding:8px}
/* Huit entrées débordaient de la barre : la maquette du 16/08/2026 les ramène
   à six, dont deux qui portent leurs cadettes dans un volet. Au-delà de
   1320 px la barre se resserre encore d'un cran ; en dessous, elle cède la
   place au menu du téléphone. */
@media(min-width:1321px){
  .nav{gap:var(--e3)}
  .nav__lien{font-size:13.5px}
}
@media(max-width:1320px){
  .nav{display:none}
  .entete__menu{display:block}
  .outils{margin-left:auto}
}
@media(min-width:1321px){
  .menu-tel{display:none!important}
}
/* Téléphone : le nom de la marque cède la place, le logo suffit à l'identifier */
@media(max-width:560px){
  .entete__barre{padding:0 var(--e4);gap:var(--e3)}
  .marque > span{display:none}
  .marque img{height:32px}
  .outils{gap:var(--e2)}
  .selecteur-langue{padding:2px}
  .selecteur-langue a{padding:5px 6px;font-size:10.5px}
  .outil,.entete__menu{width:36px;height:36px;padding:0}
  .outil svg{width:17px;height:17px}
  .enveloppe{padding:0 var(--e4)}
}

/* --- Boutons ----------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:15px var(--e6);border:1px solid transparent;border-radius:var(--rayon-sm);
  font-family:var(--texte);font-size:14px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.bouton:hover{transform:translateY(-2px)}
.bouton--rouge{background:var(--rouge);color:#fff;box-shadow:0 6px 18px rgba(208,32,40,.28)}
.bouton--rouge:hover{background:var(--rouge-fonce)}
.bouton--vert{background:transparent;color:var(--vert-fonce);border-color:var(--vert)}
.bouton--vert:hover{background:var(--vert-clair)}
.bouton--noir{background:var(--noir);color:var(--creme)}
.bouton--or{background:var(--or);color:var(--noir)}
.bouton--fantome{background:transparent;color:var(--encre);border-color:var(--contour)}
.bouton--fantome:hover{border-color:var(--encre)}

/* --- Cartes ------------------------------------------------------------ */
.carte{
  background:var(--blanc);border:var(--bord);border-radius:var(--rayon);
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;
}
.carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-f)}
.carte__corps{padding:var(--e5)}

.etiquette{
  display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.etiquette--best{background:var(--or);color:var(--noir)}
.etiquette--neuf{background:var(--vert);color:#fff}
.etiquette--rupture{background:var(--gris);color:var(--encre-douce)}

.prix{font-family:var(--titre);font-size:22px;font-weight:700}
.prix small{font-size:13px;font-weight:400;color:var(--encre-douce)}

/* --- Échelle de force -------------------------------------------------- */
.force{display:inline-flex;gap:4px;align-items:center}
.force i{width:9px;height:9px;border-radius:50%;background:var(--trait);display:block}
.force i.on{background:var(--rouge)}
.force--1 i.on{background:#7BC47F}
.force--2 i.on{background:#E8891A}
.force--3 i.on{background:var(--or)}
.force--4 i.on{background:#D4600B}
.force--5 i.on{background:var(--rouge)}

/* --- Bandeau de confiance ----------------------------------------------
   Retiré de l'accueil le 15/08/2026 ; il ne reparaît que si l'administrateur
   lève le réglage « bandeau_confiance ». La règle reste ici pour ce jour-là. */
.confiance{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);
  padding:var(--e6) 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.confiance__item{display:flex;gap:var(--e3);align-items:center;justify-content:center}
.confiance__item svg{width:26px;height:26px;stroke:var(--vert-fonce);fill:none;stroke-width:1.5;flex-shrink:0}
.confiance__t{font-weight:600;font-size:14.5px}
.confiance__d{font-size:12.5px;color:var(--encre-douce)}
@media(max-width:760px){.confiance{grid-template-columns:1fr;gap:var(--e4)}}

/* --- Pied de page ------------------------------------------------------ */
.pied{background:var(--noir);color:#C9C2BC;padding:var(--ecart) 0 var(--e6)}
.pied h4{color:var(--blanc);font-family:var(--texte);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e4)}
.pied a{color:#C9C2BC;font-size:14px;line-height:2.1}
.pied a:hover{color:var(--or)}
.pied__bas{
  margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;
  font-size:12.5px;color:#8C8580;
}

/* --- Accessibilité ----------------------------------------------------- */
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:var(--e4);top:var(--e4);z-index:100;background:var(--blanc);
  padding:var(--e3) var(--e4);border-radius:var(--rayon-sm)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}