/* ================================================================
   LES GOURMETS DE JEANNINE — FEUILLE DE STYLE DU CONCEPT
   ----------------------------------------------------------------
   C'est le « BLOC 0 » commun aux 5 pages.
   Sur WordPress : coller tout ce fichier dans
   Apparence > Personnaliser > CSS additionnel (une seule fois).

   Aucune ombre, aucune animation d'entrée : le rendu est plat.
   Les seuls mouvements sont les survols, où la couleur se charge
   latéralement, et l'ouverture du menu sur téléphone.
   Tout est préfixé .lgj- et enfermé dans .lgj pour ne jamais
   entrer en conflit avec le thème ou Elementor.
   ================================================================ */

/* ============================================================
   1. VARIABLES DE MARQUE
   ============================================================ */
.lgj{
  /* ============================================================
     PALETTE  —  deux couleurs, plus le blanc et le noir.
     Les deux sont relevées dans le logo (image.png) :
       primaire   #C21E52  le lettrage manuscrit
       secondaire #DDA05A  les biscuits
     Tout le reste n'est qu'un ton de ces deux couleurs, ou du
     blanc, ou du noir. Aucune troisième teinte n'est introduite.
     ============================================================ */
  --primaire:     #C21E52;
  --primaire-f:   #9E1340;   /* la primaire assombrie : remplissage au survol */
  --primaire-25:  #F2CED9;   /* primaire à 22 % sur blanc : filets, bordures */
  --primaire-08:  #FAEDF1;   /* primaire à 8 % sur blanc : aplats très pâles */

  --secondaire:   #DDA05A;
  --secondaire-f: #C0813C;

  --noir:         #1A1214;   /* noir réchauffé : texte, panneau, pied de page */
  --noir-62:      #716C6D;   /* noir à 62 % sur blanc : texte secondaire */
  --blanc:        #FFFFFF;

  /* --- Les anciens noms restent, mais ne sont plus que des alias.
         Aucune règle du fichier n'a eu besoin d'être réécrite. --- */
  --rose:        var(--primaire);
  --rose-fonce:  var(--primaire-f);
  --rose-vif:    var(--primaire);
  --rose-clair:  var(--primaire-08);
  --rose-pale:   var(--primaire-25);
  --creme:       var(--primaire-08);
  --dore:        var(--secondaire);
  --dore-fonce:  var(--secondaire-f);
  --brun:        var(--primaire);
  --bordeaux:    var(--noir);
  --choco:       var(--noir);
  --encre:       var(--noir);
  --encre-doux:  var(--noir-62);

  --fond-page:   var(--blanc);

  /* Échelle de rayons. Trois valeurs, pas une de plus :
     vignettes, blocs, panneaux. */
  --r-s:  14px;   /* vignettes produit, photos de mosaïque */
  --r-m:  22px;   /* cartes, encadrés */
  --r-l:  36px;   /* panneaux et grandes photos */
  --rayon-xl: var(--r-l);   /* ancien nom, conservé */

  /* Échelle d'espacement, base 8, seule source du rythme vertical. */
  --e1:  8px;  --e2: 16px;  --e3: 24px;  --e4: 32px;
  --e5: 48px;  --e6: 64px;  --e7: 88px;
  --section: clamp(34px, 4.6vw, 64px);
  --gout:    clamp(18px, 2.2vw, 30px);

  --titre: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --texte: "Manrope", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   2. RESET LOCAL (ne touche que le concept)
   ============================================================ */
.lgj, .lgj *, .lgj *::before, .lgj *::after{ box-sizing: border-box; }
.lgj{
  font-family: var(--texte);
  color: var(--encre);
  line-height: 1.65;
  font-size: 16px;
  background: var(--fond-page);
  overflow-x: clip;
}
.lgj img{ max-width:100%; display:block; }
.lgj ul{ list-style:none; margin:0; padding:0; }
.lgj a{ color:inherit; text-decoration:none; }
.lgj h1,.lgj h2,.lgj h3,.lgj h4{
  font-family: var(--titre);
  color: var(--rose);
  margin: 0;
  line-height: 1.12;
  letter-spacing: .005em;
}
.lgj p{ margin: 0 0 1em; }
.lgj button{ font: inherit; }
.lgj .lgj-wrap{ width: min(1180px, 92vw); margin-inline: auto; }

/* Focus clavier visible partout (accessibilité) */
.lgj a:focus-visible,
.lgj button:focus-visible,
.lgj input:focus-visible,
.lgj textarea:focus-visible,
.lgj select:focus-visible{
  outline: 3px solid var(--rose-vif);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   3. BOUTONS  (sans ombre)
   ------------------------------------------------------------
   Survol : la couleur se charge de la gauche vers la droite,
   au lieu de basculer d'un coup. C'est un simple dégradé posé
   en image de fond dont on anime la largeur, donc pas d'élément
   supplémentaire, pas de déplacement, pas d'ombre.
   ============================================================ */
/* Une seule famille de boutons. Deux tailles : normale et .lgj-btn--fin.
   Quatre habillages qui ne changent QUE la couleur, jamais la géométrie :
   plein, blanc, ajouré clair, ajouré foncé. Même hauteur, même rayon,
   même graisse, même pastille, partout et sur toutes les pages. */
.lgj .lgj-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 7px 8px 7px 28px;
  border: 2px solid transparent; border-radius: 999px;
  background-color: var(--rose); color: #fff !important;
  background-image: linear-gradient(var(--rose-fonce), var(--rose-fonce));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  font-family: var(--titre); font-weight: 700; font-size: 15px;
  letter-spacing: .02em; cursor: pointer;
  transition: background-size .34s cubic-bezier(.22,.7,.28,1),
              color .22s ease .06s, border-color .22s ease;
}
.lgj .lgj-btn:hover,
.lgj .lgj-btn:focus-visible{ background-size: 100% 100%; }
.lgj .lgj-btn--fin{ min-height: 46px; padding: 5px 6px 5px 22px; font-size: 14px; gap: 11px; }

/* « Ajouter au panier » : le mot « au panier » disparaît sur téléphone.
   C'est un <span>, donc un élément de la flexbox du bouton, qui héritait
   du gap et ouvrait un trou au milieu du libellé. On le rattrape. */
.lgj .lgj-btn .lgj-mot{ margin-left: -14px; }
.lgj .lgj-btn--fin .lgj-mot{ margin-left: -11px; }

/* ------------------------------------------------------------
   Pastille ronde à droite du libellé, sur les appels à l'action
   principaux. Au survol elle passe au doré des biscuits du logo,
   pendant que le fond se charge. Aucun déplacement, aucune ombre.
   Les petits boutons (.lgj-btn--fin) n'en portent pas.
   ------------------------------------------------------------ */
.lgj .lgj-btn__rond{
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--rose);
  transition: background .3s ease, color .3s ease;
}
.lgj .lgj-btn--fin .lgj-btn__rond{ width: 36px; height: 36px; }
.lgj .lgj-btn__rond svg{
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-btn:hover .lgj-btn__rond,
.lgj .lgj-btn:focus-visible .lgj-btn__rond{
  background: var(--dore); color: var(--noir);
}
/* sur le bouton blanc, la pastille est framboise dès le départ */
.lgj .lgj-btn--blanc .lgj-btn__rond{ background: var(--rose); color: #fff; }
.lgj .lgj-btn--blanc:hover .lgj-btn__rond{ background: var(--dore); color: var(--noir); }
/* sur les boutons ajourés, elle est cerclée */
.lgj .lgj-btn--creme .lgj-btn__rond{
  background: transparent; color: #fff;
  border: 2px solid rgba(255,247,243,.7);
}
.lgj .lgj-btn--creme:hover .lgj-btn__rond{
  background: var(--dore); color: var(--noir); border-color: var(--dore);
}
.lgj .lgj-btn--ligne .lgj-btn__rond{ background: var(--rose); color: #fff; }
.lgj .lgj-btn--ligne:hover .lgj-btn__rond{ background: var(--dore); color: var(--noir); }

/* Un bouton sans pastille garde la même géométrie : on rétablit
   simplement un remplissage symétrique. */
.lgj .lgj-btn:not(:has(.lgj-btn__rond)){ padding-inline: 30px; }
.lgj .lgj-btn--fin:not(:has(.lgj-btn__rond)){ padding-inline: 24px; }
@supports not selector(:has(*)){
  .lgj .lgj-btn{ padding-inline: 30px; }
  .lgj .lgj-btn__rond{ display: none; }
}

/* Blanc plein — sur fond chocolat ou bordeaux */
.lgj .lgj-btn--blanc{
  background-color: #fff; color: var(--rose) !important;
  background-image: linear-gradient(var(--creme), var(--creme));
}
.lgj .lgj-btn--blanc:hover,
.lgj .lgj-btn--blanc:focus-visible{ color: var(--rose-fonce) !important; }

/* Contour crème — sur fond chocolat ou bordeaux */
.lgj .lgj-btn--creme{
  background-color: transparent; color: #fff !important;
  border-color: rgba(255,247,243,.7);
  background-image: linear-gradient(rgba(255,247,243,.18), rgba(255,247,243,.18));
}
.lgj .lgj-btn--creme:hover,
.lgj .lgj-btn--creme:focus-visible{ border-color: #fff; }

/* Contour framboise — sur fond clair. Le texte passe au blanc une fois
   que le remplissage est arrivé dessous. */
.lgj .lgj-btn--ligne{
  background-color: transparent; color: var(--rose) !important;
  border-color: var(--rose-pale);
  background-image: linear-gradient(var(--rose), var(--rose));
}
.lgj .lgj-btn--ligne:hover,
.lgj .lgj-btn--ligne:focus-visible{
  color: #fff !important; border-color: var(--rose);
}

/* ------------------------------------------------------------
   Liens : le trait se charge de la gauche vers la droite.
   ------------------------------------------------------------ */
.lgj .lgj-famille__lien,
.lgj .lgj-fiche__lien{
  border-bottom: 0; padding-bottom: 3px;
  background-image: linear-gradient(var(--rose), var(--rose)),
                    linear-gradient(var(--rose-pale), var(--rose-pale));
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 2px, 100% 2px;
  transition: background-size .3s cubic-bezier(.22,.7,.28,1);
}
.lgj .lgj-famille__lien:hover,
.lgj .lgj-fiche__lien:hover,
.lgj .lgj-famille__lien:focus-visible,
.lgj .lgj-fiche__lien:focus-visible{ background-size: 100% 2px, 100% 2px; }

/* Si l'utilisateur refuse les animations, le survol devient instantané */
@media (prefers-reduced-motion: reduce){
  .lgj .lgj-btn,
  .lgj .lgj-famille__lien,
  .lgj .lgj-fiche__lien,
  .lgj .lgj-nav a,
  .lgj .lgj-onglet{ transition: none; }
}

/* ============================================================
   4. TITRES DE SECTION
   ============================================================ */
.lgj .lgj-surtitre{
  display:block; text-align:center;
  font-family: var(--titre); font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brun); margin-bottom: 10px;
}
/* Deux alignements possibles, pas trois : centré pour les sections
   pleine largeur, à gauche pour les colonnes de texte. */
.lgj .lgj-titre-section{
  text-align: center;
  font-size: clamp(25px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 10px;
}
.lgj .lgj-filet{
  width: 48px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rose) 0 50%, var(--dore) 50% 100%);
  margin: 0 auto var(--e2);
}
.lgj .lgj-titre-section--gauche{ text-align: left; }
.lgj .lgj-titre-section--gauche + .lgj-filet{ margin-inline: 0; }
.lgj .lgj-chapo{
  text-align: center;
  max-width: 640px; margin: 0 auto var(--e3);
  color: var(--encre-doux);
  font-size: 15px;
}
.lgj .lgj-chapo--gauche{ text-align: left; margin-inline: 0; }
.lgj .lgj-surtitre--gauche{ text-align: left; }

/* ============================================================
   5. EN-TÊTE (posé sur le hero ou sur la bannière de page)
   ============================================================ */
.lgj .lgj-header{
  position: relative; z-index: 6;
  padding: 22px 0 6px;
  background: transparent;
}
.lgj .lgj-header__in{ display: flex; align-items: center; gap: 26px; }
.lgj .lgj-logo img{ height: 64px; width: auto; }
.lgj .lgj-nav{ display: flex; align-items: center; gap: 30px; margin-left: auto; }
.lgj .lgj-nav a{
  font-family: var(--titre); font-weight: 600; font-size: 15px;
  color: #fff; opacity: .9;
  padding: 6px 0 8px;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size .3s cubic-bezier(.22,.7,.28,1), opacity .2s ease;
}
.lgj .lgj-nav a:hover,
.lgj .lgj-nav a:focus-visible{ opacity: 1; background-size: 100% 2px; }
.lgj .lgj-nav a[aria-current="page"]{ opacity: 1; background-size: 100% 2px; }
/* Les deux outils de l'en-tête du site : compte et mini-panier.
   Le panier reste visible sur toutes les pages, y compris au paiement,
   où l'audit avait relevé sa disparition. */
.lgj .lgj-header__outils{
  display: flex; align-items: center; gap: 4px; margin-left: 14px;
}
.lgj .lgj-outil{
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  transition: background .16s ease;
}
.lgj .lgj-outil:hover{ background: rgba(255,255,255,.18); }
.lgj .lgj-outil svg{
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-outil__compte{
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #fff; color: var(--rose);
  font-family: var(--titre); font-weight: 800; font-size: 10.5px;
  line-height: 17px; text-align: center;
}
.lgj .lgj-burger{
  display: none; margin-left: auto;
  width: 44px; height: 40px; padding: 9px 8px;
  background: transparent; border: 0; cursor: pointer;
}
.lgj .lgj-burger span{
  display: block; height: 2.5px; border-radius: 2px; background: #fff; margin: 4px 0;
}

/* ============================================================
   6. HERO DE L'ACCUEIL  (sans ombre, sans animation)
   ----------------------------------------------------------
   La photo occupe tout le hero, pleine largeur. Un voile chocolat
   la couvre à gauche, là où se trouve le texte, et s'efface vers
   la droite pour laisser le cake à ses couleurs. La teinte du voile
   (--choco) est le ton sombre dominant de la photo elle-même.
   Le texte reste sur du chocolat opaque : le contraste ne dépend
   jamais de ce qu'il y a sur l'image.
   ============================================================ */
.lgj .lgj-hero{
  position: relative;
  margin-top: -92px; padding-top: 92px;   /* l'en-tête flotte sur la photo */
  background: var(--choco);
  overflow: hidden;
}
.lgj .lgj-hero__fond{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 52%;
}
.lgj .lgj-hero__voile{
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg,
    rgba(26,18,20,.94)  0%,
    rgba(26,18,20,.90) 32%,
    rgba(26,18,20,.66) 46%,
    rgba(26,18,20,.27) 60%,
    rgba(26,18,20,.06) 72%,
    rgba(26,18,20,0)   82%);
}
.lgj .lgj-hero__grid{
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 600px);
  align-content: center;
  min-height: 380px;
  padding: var(--e4) 0 var(--e5);
}
.lgj .lgj-hero__texte h1{
  color: #fff;
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 900;
  letter-spacing: -.018em;
  margin-bottom: 14px;
}
.lgj .lgj-hero__lieu{
  display:inline-block;
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  padding: 6px 15px; border-radius: 999px;
  margin-bottom: 14px;
}
.lgj .lgj-hero__texte p{
  color: rgba(255,255,255,.94);
  font-size: 16.5px; max-width: 46ch;
  margin-bottom: var(--e3);
}
.lgj .lgj-hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.lgj .lgj-hero__media{ display: none; }   /* plus de colonne image : la photo est le fond */

/* ============================================================
   7. BANNIÈRE DE PAGE INTÉRIEURE
   ============================================================ */
/* ------------------------------------------------------------
   Bannière des pages intérieures. Un simple aplat de noir chaud,
   sans photo : les pages intérieures ne rejouent pas l'image du
   hero d'accueil. Le titre est seul, la bande reste compacte
   pour ne pas repousser le contenu.
   ------------------------------------------------------------ */
.lgj .lgj-banniere{
  position: relative;
  margin-top: -92px; padding-top: 92px;
  background: var(--noir);
  overflow: hidden;
}
.lgj .lgj-banniere__in{
  position: relative; z-index: 3;
  padding: var(--e5) 0 var(--e5);
}
.lgj .lgj-banniere h1{
  color: #fff; font-size: clamp(32px, 4.4vw, 50px); font-weight: 900;
  letter-spacing: -.018em; margin-bottom: 10px;
}
.lgj .lgj-banniere p{
  color: rgba(255,255,255,.92); font-size: 16.5px; max-width: 60ch; margin: 0;
}
.lgj .lgj-fil{
  font-family: var(--titre); font-weight: 600; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondaire); margin-bottom: 12px;
}
.lgj .lgj-fil a:hover{ color: #fff; text-decoration: underline; }

/* ============================================================
   8. BANDEAU 3 ARGUMENTS
   ============================================================ */
.lgj .lgj-atouts{
  background: #fff;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--rose-clair);
}
.lgj .lgj-atouts__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout); }
.lgj .lgj-atout__ico{
  width: 44px; height: 44px; border-radius: var(--r-s);
  background: var(--rose-clair);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.lgj .lgj-atout__ico svg{
  width: 23px; height: 23px;
  fill: none; stroke: var(--rose); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-atout h3{ font-size: 17px; font-weight: 800; color: var(--encre); margin-bottom: 6px; }
.lgj .lgj-atout p{ font-size: 14.5px; color: var(--encre-doux); margin: 0; }

/* ============================================================
   9. COLONNES FILETÉES
   ============================================================ */
.lgj .lgj-familles{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-familles__grid{ display: grid; grid-template-columns: repeat(3, 1fr); }
.lgj .lgj-famille{
  padding: 0 var(--e4); text-align: center;
  border-left: 1px solid var(--rose-pale);
}
.lgj .lgj-famille:first-child{ border-left: 0; }
.lgj .lgj-famille h3{ font-size: 19px; font-weight: 800; color: var(--rose); margin-bottom: 10px; }
.lgj .lgj-famille p{ font-size: 14.5px; color: var(--encre-doux); }
.lgj .lgj-famille__prix{
  display: block;
  font-family: var(--titre); font-weight: 900; font-size: 23px;
  color: var(--encre); margin-bottom: 12px;
}
.lgj .lgj-famille__lien{
  font-family: var(--titre); font-weight: 700; font-size: 14px;
  color: var(--rose); border-bottom: 2px solid var(--rose-pale); padding-bottom: 2px;
}
.lgj .lgj-famille__lien:hover{ border-bottom-color: var(--rose); }

/* Le geste d'achat, disponible dès l'accueil : bouton plein pour
   l'ajout, lien simple pour aller lire la fiche. Deux poids, deux
   intentions, jamais deux boutons qui se disputent le clic. */
.lgj .lgj-famille__actions{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lgj .lgj-fiche__pied .lgj-btn{ margin-right: -6px; }

/* Visuel détouré posé au-dessus des colonnes (fond blanc obligatoire) */
.lgj .lgj-visuel{
  display: block; width: min(460px, 84%); height: auto;
  margin: 0 auto 30px;
}

/* ============================================================
   10. PANNEAU À ENCOCHES
   ============================================================ */
.lgj .lgj-panneau-sec{ background: #fff; padding: var(--e3) 0 var(--section); }
.lgj .lgj-panneau{
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bordeaux);
  border-radius: var(--rayon-xl);
  margin: var(--e3) 0;
}
.lgj .lgj-panneau__texte{ padding: var(--e5) var(--e5); color: #fff; }
.lgj .lgj-panneau__texte .lgj-surtitre{ text-align: left; color: var(--rose-pale); }
.lgj .lgj-panneau__texte h2{
  text-align: left; color: #fff;
  font-size: clamp(25px, 2.9vw, 34px); font-weight: 800;
  margin-bottom: 16px;
}
.lgj .lgj-panneau__texte p{ color: rgba(255,255,255,.82); font-size: 15px; max-width: 44ch; }
.lgj .lgj-panneau__liste{ margin: 0 0 6px; }
.lgj .lgj-panneau__liste li{
  display: flex; gap: 12px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16);
  font-size: 15px; color: rgba(255,255,255,.86);
}
.lgj .lgj-panneau__liste b{ color: #fff; font-family: var(--titre); font-weight: 700; }
.lgj .lgj-panneau__liste span{
  margin-left: auto; font-family: var(--titre); font-weight: 800;
  color: var(--rose-pale); white-space: nowrap;
}
.lgj .lgj-panneau__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.lgj .lgj-panneau__media{
  position: absolute; right: 0; top: calc(var(--e3) * -1); bottom: calc(var(--e3) * -1); width: 50%;
  border-radius: var(--rayon-xl); overflow: hidden;
}
.lgj .lgj-panneau__media img{ width: 100%; height: 100%; object-fit: cover; }

/* Les deux encoches concaves, découpées dans la couleur de la page */
.lgj .lgj-encoche{ position: absolute; left: calc(50% - 28px); width: 28px; height: 28px; }
.lgj .lgj-encoche--haut{
  top: 0;
  background: radial-gradient(circle at 0 100%, transparent 28px, var(--fond-page) 28px);
}
.lgj .lgj-encoche--bas{
  bottom: 0;
  background: radial-gradient(circle at 0 0, transparent 28px, var(--fond-page) 28px);
}

/* ============================================================
   11. MOSAÏQUE + FICHES
   ============================================================ */
.lgj .lgj-best{ background: #fff; padding: var(--e1) 0 var(--section); }
.lgj .lgj-best__grid{
  display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(26px, 3.4vw, 46px);
  align-items: start;
}
.lgj .lgj-mosaique{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lgj .lgj-mosaique a{
  display: block; border-radius: var(--r-s); overflow: hidden;
  aspect-ratio: 1; background: var(--rose-clair);
}
.lgj .lgj-mosaique img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-mosaique a{ position: relative; }
.lgj .lgj-mosaique a::after{
  content: ""; position: absolute; inset: 0;
  background: rgba(194,30,82,.24);
  opacity: 0; transition: opacity .3s ease;
}
.lgj .lgj-mosaique a:hover::after,
.lgj .lgj-mosaique a:focus-visible::after{ opacity: 1; }

.lgj .lgj-fiche{ padding: 0 0 var(--e3); margin-bottom: var(--e3); border-bottom: 1px solid var(--rose-pale); }
.lgj .lgj-fiche:last-of-type{ border-bottom: 0; margin-bottom: 14px; }
.lgj .lgj-fiche h3{ font-size: 21px; font-weight: 800; color: var(--encre); margin-bottom: 8px; }
.lgj .lgj-fiche p{ font-size: 14.5px; color: var(--encre-doux); }
.lgj .lgj-fiche__pied{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lgj .lgj-fiche__prix{ font-family: var(--titre); font-weight: 900; font-size: 26px; color: var(--rose); }
.lgj .lgj-fiche__lien{
  font-family: var(--titre); font-weight: 700; font-size: 14px;
  color: var(--rose); border-bottom: 2px solid var(--rose-pale); padding-bottom: 2px;
}
.lgj .lgj-fiche__lien:hover{ border-bottom-color: var(--rose); }
.lgj .lgj-best__tout{ margin-top: 8px; }

/* Pastille allergènes. Plus utilisée pour l'instant : la règle reste
   en place pour le jour où Jeannine renseignera les vraies valeurs
   (règlement UE 1169/2011, obligatoire avant l'achat). */
.lgj .lgj-allerg{
  font-size: 12.5px; color: var(--encre-doux);
  background: var(--rose-clair); border-radius: 10px;
  display: inline-block; padding: 5px 12px; margin-bottom: 14px;
}

/* ============================================================
   12. BOUTIQUE — grille de produits
   ============================================================ */
.lgj .lgj-boutique{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-onglets{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 42px;
}
.lgj .lgj-onglet{
  padding: 11px 26px; border-radius: 999px;
  border: 2px solid var(--rose-pale);
  background-color: transparent;
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  font-family: var(--titre); font-weight: 700; font-size: 14px;
  color: var(--rose); cursor: pointer;
  transition: background-size .32s cubic-bezier(.22,.7,.28,1),
              color .22s ease .06s, border-color .22s ease;
}
.lgj .lgj-onglet:hover,
.lgj .lgj-onglet:focus-visible{
  background-size: 100% 100%; color: #fff; border-color: var(--rose);
}
.lgj .lgj-onglet[aria-selected="true"]{
  background-size: 100% 100%; color: #fff; border-color: var(--rose);
}

.lgj .lgj-grille{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5) var(--gout);
}
.lgj .lgj-carte{ display: flex; flex-direction: column; }
.lgj .lgj-carte__vignette{
  display: block; border-radius: var(--r-s); overflow: hidden;
  aspect-ratio: 1; background: var(--rose-clair); margin-bottom: var(--e2);
}
.lgj .lgj-carte__vignette{ position: relative; }
.lgj .lgj-carte__vignette img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-carte__vignette::after{
  content: ""; position: absolute; inset: 0;
  background: rgba(194,30,82,.22);
  opacity: 0; transition: opacity .3s ease;
}
.lgj .lgj-carte__vignette:hover::after,
.lgj .lgj-carte__vignette:focus-visible::after{ opacity: 1; }
.lgj .lgj-carte__cat{
  font-family: var(--titre); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-vif); margin-bottom: 6px;
}
.lgj .lgj-carte h3{ font-size: 18px; font-weight: 800; color: var(--encre); margin-bottom: 8px; }
.lgj .lgj-carte p{ font-size: 14px; color: var(--encre-doux); }
.lgj .lgj-carte__pied{
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lgj .lgj-carte__prix{ font-family: var(--titre); font-weight: 900; font-size: 22px; color: var(--rose); }

/* ============================================================
   13. À PROPOS / NOS ENGAGEMENTS — récit + engagements
   ============================================================ */
.lgj .lgj-recit{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-recit__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.6vw, 50px); align-items: center;
}
.lgj .lgj-recit__media{ border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/5; }
.lgj .lgj-recit__media img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-recit h2{
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin-bottom: 18px;
}
.lgj .lgj-recit p{ font-size: 16px; color: var(--encre-doux); }
.lgj .lgj-recit .lgj-btn{ margin-top: 14px; }

.lgj .lgj-engagements{ background: var(--rose-clair); padding: var(--section) 0; }
.lgj .lgj-engagements__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout);
}
.lgj .lgj-engagement{
  background: #fff; border-radius: var(--r-m); padding: var(--e4) var(--e3);
}
.lgj .lgj-engagement__num{
  font-family: var(--titre); font-weight: 900; font-size: 15px;
  color: var(--brun); margin-bottom: 12px;   /* le doré ne passe pas le contraste en texte */
}
.lgj .lgj-engagement h3{ font-size: 19px; font-weight: 800; color: var(--rose); margin-bottom: 10px; }
.lgj .lgj-engagement p{ font-size: 14.5px; color: var(--encre-doux); margin: 0; }

.lgj .lgj-citation{ background: #fff; padding: var(--section) 0; text-align: center; }
.lgj .lgj-citation blockquote{
  margin: 0 auto; max-width: 760px;
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.35;
  color: var(--rose);
}
.lgj .lgj-citation cite{
  display: block; margin-top: 20px;
  font-family: var(--texte); font-style: normal; font-size: 14px;
  color: var(--encre-doux); letter-spacing: .04em;
}

/* ============================================================
   14. CONTACT
   ============================================================ */
.lgj .lgj-contact{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-contact__grid{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 3.6vw, 50px); align-items: start;
}
.lgj .lgj-champ{ margin-bottom: 18px; }
.lgj .lgj-champ label{
  display: block; margin-bottom: 7px;
  font-family: var(--titre); font-weight: 700; font-size: 13.5px; color: var(--encre);
}
.lgj .lgj-champ input,
.lgj .lgj-champ textarea{
  width: 100%; padding: 14px 18px;
  border: 1.5px solid var(--rose-pale); border-radius: var(--r-s);
  background: #fff; color: var(--encre);
  font: inherit; font-size: 15px;
}
.lgj .lgj-champ textarea{ min-height: 150px; resize: vertical; }
.lgj .lgj-champ input::placeholder,
.lgj .lgj-champ textarea::placeholder{ color: var(--noir-62); }
.lgj .lgj-rgpd{
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; color: var(--encre-doux); line-height: 1.55;
  margin: 6px 0 22px;
}
.lgj .lgj-rgpd input{ margin-top: 4px; accent-color: var(--rose); }
.lgj .lgj-rgpd a{ color: var(--rose); text-decoration: underline; }

.lgj .lgj-infos{ background: var(--rose-clair); border-radius: var(--r-m); padding: var(--e4); }
.lgj .lgj-infos h2{ font-size: 21px; font-weight: 800; margin-bottom: 20px; }
.lgj .lgj-infos dl{ margin: 0; }
.lgj .lgj-infos dt{
  font-family: var(--titre); font-weight: 800; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 5px;
}
.lgj .lgj-infos dd{
  margin: 0 0 20px; font-size: 15px; color: var(--encre);
}
.lgj .lgj-infos dd a:hover{ color: var(--rose); text-decoration: underline; }
.lgj .lgj-infos__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }


/* ------------------------------------------------------------
   Utilitaires. Ils existent pour qu'aucune page ne porte de
   style en ligne : tout le rendu se règle depuis ce seul fichier.
   ------------------------------------------------------------ */
.lgj .lgj-note{ color: rgba(255,255,255,.66); }
.lgj .lgj-note--serre{ margin-bottom: 0; }
.lgj .lgj-intro{ color: var(--encre-doux); max-width: 52ch; margin-bottom: var(--e3); }
.lgj .lgj-facultatif{ font-weight: 500; color: var(--encre-doux); }
.lgj .lgj-citation--pale{ background: var(--rose-clair); }



/* ============================================================
   AVIS CLIENTS — bande horizontale, à toutes les tailles
   ------------------------------------------------------------
   Les cartes défilent à gauche et à droite, au doigt comme à la
   souris, avec calage sur chaque carte. Les deux boutons ronds
   sont posés par le script, comme pour les autres carrousels.
   ============================================================ */
.lgj .lgj-avis{ background: var(--primaire-08); padding: var(--section) 0; }
.lgj .lgj-avis__piste{
  display: flex; gap: var(--e2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc((100vw - min(1180px, 92vw)) / -2);
  padding: 2px calc((100vw - min(1180px, 92vw)) / 2) var(--e2);
}
.lgj .lgj-avis__piste::-webkit-scrollbar{ height: 0; }
.lgj .lgj-avis__carte{
  flex: 0 0 clamp(272px, 31%, 372px);
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--primaire-25);
  border-radius: var(--r-m); padding: var(--e3);
  display: flex; flex-direction: column;
}
.lgj .lgj-avis__notes{ display: flex; gap: 3px; margin-bottom: var(--e2); }
.lgj .lgj-avis__notes svg{ width: 17px; height: 17px; fill: var(--secondaire); }

/* ---------- La source Google ----------
   Le seul endroit du site où d'autres couleurs entrent : le G de
   Google. Il n'est pas décoratif, c'est lui qui rend l'avis
   crédible, donc il garde ses quatre couleurs officielles. */
.lgj .lgj-avis__haut{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--e2);
}
.lgj .lgj-avis__haut .lgj-avis__notes{ margin-bottom: 0; }
.lgj .lgj-avis__source{ flex: 0 0 auto; width: 17px; height: 17px; display: block; }
.lgj .lgj-avis__source svg{ width: 100%; height: 100%; display: block; }

/* ---------- Bandeau de synthèse de la fiche Google ---------- */
.lgj .lgj-avis__google{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--primaire-25);
  border-radius: var(--r-m); padding: 14px 20px;
  margin-bottom: var(--e3); width: fit-content; max-width: 100%;
}
.lgj .lgj-avis__logo{ flex: 0 0 auto; width: 28px; height: 28px; display: block; }
.lgj .lgj-avis__logo svg{ width: 100%; height: 100%; display: block; }
.lgj .lgj-avis__bilan{ display: flex; align-items: center; gap: 10px; }
.lgj .lgj-avis__note{
  margin: 0; font-family: var(--titre); font-size: 15px; color: var(--encre-doux);
}
.lgj .lgj-avis__note strong{
  font-size: 23px; font-weight: 800; color: var(--encre); letter-spacing: -.02em;
}
.lgj .lgj-avis__etoiles{ display: flex; gap: 3px; }
.lgj .lgj-avis__etoiles svg{ width: 16px; height: 16px; fill: var(--secondaire); }
.lgj .lgj-avis__compte{
  margin: 0; font-size: 13.5px; color: var(--encre-doux);
  padding-left: 18px; border-left: 1px solid var(--primaire-25);
}
.lgj .lgj-avis__voir{
  font-family: var(--titre); font-weight: 700; font-size: 13.5px;
  color: var(--primaire); border-bottom: 1px solid var(--primaire-25);
  padding-bottom: 2px;
}
.lgj .lgj-avis__voir:hover{ color: var(--primaire-f); border-bottom-color: var(--primaire); }

@media (max-width: 560px){
  .lgj .lgj-avis__google{ gap: 12px 14px; padding: 14px 16px; }
  .lgj .lgj-avis__compte{ padding-left: 0; border-left: 0; }
  .lgj .lgj-avis__voir{ flex-basis: 100%; }
}
.lgj .lgj-avis__carte blockquote{
  margin: 0 0 var(--e3);
  font-size: 15.5px; line-height: 1.55; color: var(--encre);
}
.lgj .lgj-avis__pied{
  margin-top: auto; display: flex; align-items: center; gap: 12px;
}
.lgj .lgj-avis__initiale{
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--primaire); color: #fff;
  display: grid; place-items: center;
  font-family: var(--titre); font-weight: 800; font-size: 16px;
}
.lgj .lgj-avis__qui{ font-family: var(--titre); font-weight: 700; font-size: 14.5px; color: var(--encre); }
.lgj .lgj-avis__date{ font-size: 12.5px; color: var(--encre-doux); }

@media (max-width: 560px){
  .lgj .lgj-avis__carte{ flex-basis: 82%; padding: var(--e3) var(--e2); }
}

/* Boutons de carrousel : masqués par défaut, affichés sur les avis
   (à toutes les tailles) et sur tous les carrousels en mobile. */
.lgj .lgj-fleches{ display: none; }
.lgj .lgj-avis .lgj-fleches{ display: flex; }
/* ---------- Boutons précédent / suivant des carrousels ----------
   Ajoutés par le script, uniquement là où le défilement horizontal
   existe vraiment. Sans JavaScript, le doigt fait déjà le travail. */
.lgj .lgj-fleches{
  justify-content: center; align-items: center; gap: 12px;
  margin-top: 14px;
}
.lgj .lgj-fleche{
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--rose-pale);
  background-color: #fff; color: var(--rose);
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat; background-position: center center;
  background-size: 0% 0%;
  display: grid; place-items: center; cursor: pointer;
  transition: background-size .3s cubic-bezier(.22,.7,.28,1),
              color .22s ease .06s, border-color .22s ease, opacity .2s ease;
}
.lgj .lgj-fleche:hover:not([disabled]),
.lgj .lgj-fleche:focus-visible{
  background-size: 100% 100%; color: #fff; border-color: var(--rose);
}
.lgj .lgj-fleche[disabled]{ opacity: .3; cursor: default; }
.lgj .lgj-fleche svg{
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* petit repère de position, entre les deux boutons */
.lgj .lgj-fleches__rang{
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  color: var(--encre-doux); min-width: 44px; text-align: center;
}

/* ============================================================
   BLOG — liste d'articles
   ============================================================ */
.lgj .lgj-articles{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-articles__grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gout);
}
.lgj .lgj-article{ display: flex; flex-direction: column; }
.lgj .lgj-article__vignette{
  display: block; position: relative;
  border-radius: var(--r-s); overflow: hidden;
  aspect-ratio: 16/10; background: var(--rose-clair);
  margin-bottom: var(--e2);
}
.lgj .lgj-article__vignette img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-article__vignette::after{
  content: ""; position: absolute; inset: 0;
  background: rgba(194,30,82,.22);
  opacity: 0; transition: opacity .3s ease;
}
.lgj .lgj-article__vignette:hover::after,
.lgj .lgj-article__vignette:focus-visible::after{ opacity: 1; }
.lgj .lgj-article__date{
  font-family: var(--titre); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--primaire); margin-bottom: 6px;
}
.lgj .lgj-article h2{
  font-size: clamp(19px, 2.1vw, 23px); font-weight: 800;
  color: var(--encre); margin-bottom: 10px; line-height: 1.22;
}
.lgj .lgj-article p{ font-size: 14.5px; color: var(--encre-doux); }
.lgj .lgj-article__pied{ margin-top: auto; padding-top: var(--e1); }

@media (max-width: 760px){
  .lgj .lgj-articles__grid{ grid-template-columns: 1fr; gap: var(--e4); }
}

/* ============================================================
   15. PIED DE PAGE
   ============================================================ */
.lgj .lgj-footer{ background: var(--bordeaux); color: rgba(255,255,255,.86); padding: var(--section) 0 var(--e4); }
.lgj .lgj-footer h3{
  color: #fff; font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
}
.lgj .lgj-footer__grid{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: var(--gout); }
.lgj .lgj-footer__logo img{ height: 70px; width: auto; margin-bottom: var(--e2); }
.lgj .lgj-footer p, .lgj .lgj-footer li{ font-size: 14px; }
.lgj .lgj-footer li{ margin-bottom: 9px; }
.lgj .lgj-footer a{
  color: rgba(255,255,255,.86);
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat; background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size .28s cubic-bezier(.22,.7,.28,1), color .2s ease;
}
.lgj .lgj-footer a:hover,
.lgj .lgj-footer a:focus-visible{ color: #fff; background-size: 100% 1px; }
.lgj .lgj-social{ display: flex; gap: 10px; margin-top: 18px; }
.lgj .lgj-social a{
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: grid; place-items: center;
  transition: background .16s ease;
}
.lgj .lgj-social a:hover{ background: var(--rose); }
.lgj .lgj-social svg{ width: 17px; height: 17px; fill: #fff; }

.lgj .lgj-footer__form{ display: flex; gap: 8px; margin: 14px 0 12px; }
.lgj .lgj-footer__form input{
  flex: 1 1 auto; min-width: 0;
  padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff;
  font: inherit; font-size: 14px;
}
.lgj .lgj-footer__form input::placeholder{ color: rgba(255,255,255,.52); }
.lgj .lgj-footer__rgpd{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; color: rgba(255,255,255,.66); line-height: 1.5;
}
.lgj .lgj-footer__rgpd input{ margin-top: 3px; accent-color: var(--rose); }
.lgj .lgj-footer__rgpd a{ text-decoration: underline; }

.lgj .lgj-footer__legal{
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.62);
}
.lgj .lgj-footer__legal nav{ display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1040px){
  .lgj .lgj-nav{ gap: 20px; }
  .lgj .lgj-nav a{ font-size: 14px; }
  .lgj .lgj-panneau__texte{ padding: 46px 38px; }
  .lgj .lgj-famille{ padding: 4px 20px; }
  .lgj .lgj-grille{ grid-template-columns: repeat(2, 1fr); }
  .lgj .lgj-recit__grid,
  .lgj .lgj-contact__grid{ gap: 38px; }
}

@media (max-width: 900px){
  /* En-tête : menu replié */
  .lgj .lgj-burger{ display: block; }
  .lgj .lgj-nav{ display: none; }
  .lgj .lgj-header__in{ flex-wrap: wrap; }
  .lgj .lgj-header__outils{ margin-left: auto; gap: 0; }
  .lgj .lgj-outil{ width: 38px; height: 38px; }
  .lgj .lgj-burger{ margin-left: 2px; }

  /* Hero mobile : la photo passe derrière, légèrement floutée, sous un
     voile chocolat. Le titre, le texte et les boutons se posent dessus,
     centrés. Le flou évite que les détails du cake concurrencent le texte,
     et le voile garantit le contraste quelle que soit la zone de l'image. */
  .lgj .lgj-hero{ background: var(--choco); }
  .lgj .lgj-hero__fond{
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 56% 50%;
    filter: blur(3px) saturate(1.06);
    transform: scale(1.09);   /* masque les bords adoucis par le flou */
  }
  .lgj .lgj-hero__voile{
    display: block;
    background: linear-gradient(180deg,
      rgba(26,18,20,.68)   0%,
      rgba(26,18,20,.84)  52%,
      rgba(26,18,20,.93) 100%);
  }
  .lgj .lgj-hero__grid{
    grid-template-columns: 1fr;
    min-height: 340px; align-content: center;
    padding: var(--e5) 0 var(--e4);
    text-align: center;
  }
  .lgj .lgj-hero__texte p{ margin-inline: auto; }
  .lgj .lgj-hero__actions{ justify-content: center; }

  .lgj .lgj-banniere__in{ padding: var(--e4) 0; }

  /* Colonnes empilées */
  /* Trust bar : les trois arguments restent sur UNE seule ligne.
     On garde l'icône et l'intitulé, le détail passe à la trappe :
     c'est un repère de confiance, pas un paragraphe à lire. */
  .lgj .lgj-atouts{ padding: var(--e3) 0; }
  .lgj .lgj-atouts__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; align-items: start;
  }
  .lgj .lgj-atout{ text-align: center; }
  .lgj .lgj-atout__ico{
    margin: 0 auto 8px; width: 38px; height: 38px; border-radius: 12px;
  }
  .lgj .lgj-atout__ico svg{ width: 20px; height: 20px; }
  .lgj .lgj-atout h3{ font-size: 12.5px; line-height: 1.25; margin: 0; }
  .lgj .lgj-atout p{ display: none; }
  .lgj .lgj-familles__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-famille{ border-left: 0; border-top: 1px solid var(--rose-pale); padding: 26px 0; }
  .lgj .lgj-famille:first-child{ border-top: 0; padding-top: 0; }
  .lgj .lgj-engagements__grid{ grid-template-columns: 1fr; }

  /* Panneau : plus d'encoches, photo dessous */
  .lgj .lgj-panneau{ grid-template-columns: 1fr; margin: 0; }
  .lgj .lgj-panneau__texte{ padding: 40px 30px 34px; }
  .lgj .lgj-panneau__media{
    position: static; width: 100%; height: 260px;
    border-radius: 0 0 var(--rayon-xl) var(--rayon-xl);
  }
  .lgj .lgj-encoche{ display: none; }

  /* Mosaïque, récit, contact empilés */
  .lgj .lgj-best__grid{ grid-template-columns: 1fr; gap: 34px; }
  .lgj .lgj-recit__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-recit__media{ aspect-ratio: 3/2; }
  .lgj .lgj-contact__grid{ grid-template-columns: 1fr; }

  /* ---------- Pied de page sur téléphone ----------
     Le bloc logo tient toute la largeur, Menu et Contacts se partagent
     la ligne suivante, la newsletter reprend toute la largeur. Deux
     colonnes au lieu d'une seule colonne interminable : la hauteur est
     divisée par deux et il n'y a plus de blancs entre les rubriques. */
  .lgj .lgj-footer{
    padding: var(--e4) 0 calc(var(--e3) + 66px + env(safe-area-inset-bottom));
  }
  .lgj .lgj-footer__grid{
    grid-template-columns: 1fr 1fr;
    gap: var(--e3) var(--e2);
    align-items: start;
  }
  .lgj .lgj-footer__logo{ grid-column: 1 / -1; }
  .lgj .lgj-footer__logo img{ height: 58px; margin-bottom: var(--e1); }
  .lgj .lgj-footer__grid > div:last-child{ grid-column: 1 / -1; }
  .lgj .lgj-footer h3{ font-size: 12.5px; letter-spacing: .08em; margin-bottom: var(--e1); }
  .lgj .lgj-footer p, .lgj .lgj-footer li{ font-size: 13.5px; line-height: 1.5; }
  .lgj .lgj-footer li{ margin-bottom: 7px; }
  .lgj .lgj-social{ margin-top: var(--e2); }
  .lgj .lgj-footer__form{ margin: var(--e2) 0 var(--e1); }
  .lgj .lgj-footer__legal{ margin-top: var(--e3); padding-top: var(--e2); }
}

@media (max-width: 560px){
  /* Le site est surtout consulté sur mobile : une seule colonne partout,
     des marges plus serrées, et des zones tactiles d'au moins 46 px. */
  .lgj .lgj-wrap{ width: min(1180px, 90vw); }
  .lgj .lgj-grille{ grid-template-columns: 1fr; gap: 30px; }
  .lgj .lgj-footer__form{ flex-wrap: wrap; }
  .lgj .lgj-footer__form input{ flex: 1 1 100%; }
  .lgj .lgj-panneau__texte{ padding: 34px 22px 30px; }
  .lgj .lgj-infos{ padding: 30px 24px; }

  /* Boutons : pleine largeur et confortables au pouce */
  /* même géométrie qu'en grand écran, juste un cran plus compact :
     la pastille reste, l'alignement reste, seul le calibre change. */
  .lgj .lgj-btn{ min-height: 52px; padding: 6px 7px 6px 24px; gap: 12px; }
  .lgj .lgj-btn__rond{ width: 40px; height: 40px; }
  .lgj .lgj-btn:not(:has(.lgj-btn__rond)){ padding-inline: 26px; }
  .lgj .lgj-hero__actions{ flex-direction: column; align-items: stretch; }
  .lgj .lgj-hero__actions .lgj-btn{ width: 100%; }
  .lgj .lgj-panneau__actions{ flex-direction: column; align-items: stretch; }
  .lgj .lgj-panneau__actions .lgj-btn{ width: 100%; }
  .lgj .lgj-carte__pied{ gap: 12px; }
  .lgj .lgj-carte__pied .lgj-btn{ width: 100%; }

  /* Menu déplié : chaque entrée fait toute la largeur */
  .lgj .lgj-nav a{ width: 100%; padding: 12px 0; font-size: 16px; }
  .lgj .lgj-logo img{ height: 46px; }

  /* Le rythme vertical suit déjà --section : rien à redéfinir ici. */
  .lgj .lgj-titre-section{ font-size: 26px; }
  .lgj .lgj-chapo{ margin-bottom: var(--e4); }

  /* Onglets de la boutique : défilement horizontal plutôt que retour à la ligne */
  .lgj .lgj-onglets{
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin-bottom: 30px;
  }
  .lgj .lgj-onglet{ flex: 0 0 auto; min-height: 44px; }

  /* Le pied de page reste lisible */
  .lgj .lgj-footer__legal{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .lgj .lgj-footer__legal nav{ gap: 6px 16px; }
}

/* ----------------------------------------------------------------
   Tuiles produit sur téléphone : deux par ligne, format court,
   prix et bouton côte à côte, bordure arrondie.
   Ce bloc vient après le palier 560 px, donc il le surcharge.
   ---------------------------------------------------------------- */
@media (max-width: 560px){
  .lgj .lgj-grille{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .lgj .lgj-carte{
    background: #fff;
    border: 1px solid var(--rose-pale); border-radius: var(--r-m);
    padding: var(--e1) var(--e1) 14px;
  }
  .lgj .lgj-carte__vignette{ border-radius: var(--r-s); margin-bottom: var(--e1); }
  .lgj .lgj-carte__cat{ font-size: 10px; letter-spacing: .1em; margin-bottom: 3px; }
  .lgj .lgj-carte h3{ font-size: 14px; line-height: 1.22; margin-bottom: 6px; }

  /* la description passe à la trappe : elle est sur la fiche produit */
  .lgj .lgj-carte > p:not(.lgj-allerg){ display: none; }
  .lgj .lgj-carte .lgj-allerg{
    font-size: 10.5px; padding: 3px 8px; margin-bottom: 10px;
  }

  /* prix à gauche, bouton à droite, sur la même ligne */
  .lgj .lgj-carte__pied{
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-top: 0; flex-wrap: nowrap;
  }
  .lgj .lgj-carte__prix{ font-size: 16px; }
  .lgj .lgj-carte__pied .lgj-btn{
    width: auto; min-height: 38px;
    padding: 8px 14px; font-size: 12px; border-width: 1.5px;
  }
  /* « Ajouter au panier » devient « Ajouter », et la pastille disparaît :
     c'est la seule exception à la règle du bouton unique, la tuile
     produit à deux par ligne n'a pas la place. */
  .lgj .lgj-mot{ display: none; }
  .lgj .lgj-carte__pied .lgj-btn__rond{ display: none; }
  .lgj .lgj-carte__pied .lgj-btn{ padding-inline: 16px; }
}

@media (max-width: 380px){
  .lgj{ font-size: 15px; }
  .lgj .lgj-carte h3{ font-size: 13px; }
  .lgj .lgj-carte__prix{ font-size: 15px; }
  .lgj .lgj-carte__pied .lgj-btn{ padding: 8px 11px; font-size: 11.5px; }
  .lgj .lgj-hero__texte h1{ font-size: 34px; }
  .lgj .lgj-banniere h1{ font-size: 30px; }
  .lgj .lgj-hero__lieu{ font-size: 11.5px; letter-spacing: .12em; }
  .lgj .lgj-fiche__prix, .lgj .lgj-carte__prix{ font-size: 21px; }
}

/* Confort de lecture sur iOS : pas de zoom auto sur les champs (16 px mini) */
@media (max-width: 900px){
  .lgj .lgj-champ input,
  .lgj .lgj-champ textarea,
  .lgj .lgj-footer__form input{ font-size: 16px; }
}

/* ================================================================
   17. MODE APPLICATION SUR TÉLÉPHONE
   ----------------------------------------------------------------
   Sur mobile, le site se comporte comme une application :
     · en-tête collant et compact, toujours accessible
     · barre d'onglets fixe en bas (Accueil, Boutique, Contact, Panier)
     · menu en panneau plein écran qui glisse depuis la droite
     · carrousels à défilement calé pour les produits
   Sur ordinateur, rien de tout cela ne s'affiche.
   ================================================================ */

/* La barre d'onglets n'existe que sur téléphone */
.lgj .lgj-appbar{ display: none; }
.lgj .lgj-nav__fermer{ display: none; }

@media (max-width: 900px){

  /* ---------- En-tête collant et compact ---------- */
  .lgj .lgj-header{
    position: sticky; top: 0; z-index: 65;
    background: var(--rose-fonce);
    padding: 10px 0;
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  .lgj .lgj-header__in{ flex-wrap: nowrap; gap: 12px; }
  .lgj .lgj-logo img{ height: 50px; }
  /* le hero ne passe plus sous l'en-tête : celui-ci est opaque */
  .lgj .lgj-hero{ margin-top: 0; padding-top: 0; }
  .lgj .lgj-banniere{ margin-top: 0; padding-top: 0; }

  /* ---------- Menu en panneau plein écran ---------- */
  .lgj .lgj-nav{
    display: flex !important;          /* le panneau existe toujours, il est juste hors écran */
    flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; inset: 0; z-index: 80;
    margin: 0; width: 100%;
    background: var(--rose-fonce);
    padding: calc(26px + env(safe-area-inset-top)) 22px 26px;
    transform: translateX(100%);
    transition: transform .22s ease;   /* seul mouvement conservé : l'ouverture du menu */
    overflow-y: auto;
    visibility: hidden;
  }
  .lgj .lgj-nav[data-ouvert="true"]{ transform: none; visibility: visible; }
  .lgj .lgj-nav a{
    width: 100%; padding: 16px 4px; font-size: 19px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .lgj .lgj-nav a:hover,
  .lgj .lgj-nav a[aria-current="page"]{ border-bottom-color: rgba(255,255,255,.14); }
  .lgj .lgj-nav a[aria-current="page"]{ color: var(--rose-pale); }

  .lgj .lgj-nav__fermer{
    display: block; align-self: flex-end;
    width: 46px; height: 46px; margin-bottom: 14px;
    background: transparent; border: 0; cursor: pointer;
    color: #fff; font-size: 30px; line-height: 1;
  }

  /* ---------- Barre d'onglets fixe en bas ---------- */
  .lgj .lgj-appbar{
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff;
    border-top: 1px solid var(--rose-pale);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lgj .lgj-appbar a{
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 58px; padding: 9px 4px 7px;
    font-family: var(--titre); font-weight: 700; font-size: 11px;
    color: var(--encre-doux); text-align: center;
  }
  .lgj .lgj-appbar svg{
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .lgj .lgj-appbar a[aria-current="page"]{ color: var(--rose); }

  /* le pied de page ne doit pas passer sous la barre d'onglets */

  /* ---------- Carrousels calés, comme dans une application ---------- */
  .lgj .lgj-familles__grid,
  .lgj .lgj-engagements__grid{
    grid-template-columns: none;
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -5vw; padding: 4px 5vw 10px;
  }
  .lgj .lgj-famille,
  .lgj .lgj-engagement{
    flex: 0 0 78%; scroll-snap-align: center;
    border: 1px solid var(--rose-pale); border-top: 1px solid var(--rose-pale);
    border-radius: var(--r-m); padding: var(--e3) var(--e3);
  }
  .lgj .lgj-famille:first-child{ border-top: 1px solid var(--rose-pale); padding-top: 26px; }
  .lgj .lgj-engagement{ border-color: transparent; }

  .lgj .lgj-mosaique{
    grid-template-columns: none;
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -5vw; padding: 0 5vw;
  }
  .lgj .lgj-mosaique a{ flex: 0 0 64%; scroll-snap-align: center; }

  /* Sur téléphone, tous les carrousels affichent leurs flèches. */
  .lgj .lgj-fleches{ display: flex; }

  /* Barres de défilement discrètes */
  .lgj .lgj-familles__grid::-webkit-scrollbar,
  .lgj .lgj-engagements__grid::-webkit-scrollbar,
  .lgj .lgj-mosaique::-webkit-scrollbar,
  .lgj .lgj-onglets::-webkit-scrollbar{ height: 0; }
}

/* Si l'utilisateur refuse les animations, le menu s'ouvre sans glisser */
@media (prefers-reduced-motion: reduce){
  .lgj .lgj-nav{ transition: none; }
}


/* ============================================================
   18. ARTICLE DE BLOG — la page qu'on ouvre en cliquant « Lire »
   ------------------------------------------------------------
   Une seule colonne, calée sur une mesure de lecture de 68
   caractères : au-delà, l'œil perd la ligne. Aucune fioriture,
   le texte est le sujet. Mêmes titres, mêmes filets, même rose
   que partout ailleurs.
   ============================================================ */
.lgj .lgj-post{ padding: var(--section) 0 var(--e6); background: var(--blanc); }
.lgj .lgj-post__media{
  /* margin-inline: 0 est indispensable — un <figure> porte par défaut
     40 px de marge de chaque côté, l'image serait alors plus étroite
     que les deux colonnes posées dessous. Elles doivent être à ras. */
  margin: 0 0 var(--e5);
  border-radius: var(--r-l); overflow: hidden;
  background: var(--primaire-08);
}
.lgj .lgj-post__media img{ width: 100%; height: auto; }
/* Deux colonnes : le texte, et la colonne d'appoint.
   Le texte garde sa mesure de 68 caractères, il ne s'étire pas
   pour remplir la place laissée libre. */
.lgj .lgj-post__grid{
  display: grid; grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(30px, 3.6vw, 60px); align-items: start;
}
.lgj .lgj-post__corps{ max-width: 68ch; }

/* ---------- La colonne latérale ----------
   Quatre encadrés, et pas un de plus : le sommaire, qui a écrit,
   ce dont l'article parle et où l'acheter, et comment venir. Tout
   le reste est du bruit à côté d'un texte qu'on est venu lire. */
.lgj .lgj-post__cote{ display: flex; flex-direction: column; gap: var(--e3); }
.lgj .lgj-cote{
  border: 1px solid var(--primaire-25); border-radius: var(--r-m);
  padding: var(--e3);
}
.lgj .lgj-cote--pleine{ background: var(--primaire-08); }
.lgj .lgj-cote h2{
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--secondaire-f); margin-bottom: var(--e2);
}
.lgj .lgj-cote p{ font-size: 14.5px; line-height: 1.65; color: var(--encre-doux); }
.lgj .lgj-cote p:last-child{ margin-bottom: 0; }

/* Sommaire : les titres de niveau 2 de l'article, dans l'ordre. */
.lgj .lgj-cote__sommaire li{ counter-increment: som; margin-bottom: 10px; }
.lgj .lgj-cote__sommaire{ counter-reset: som; }
.lgj .lgj-cote__sommaire a{
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--titre); font-weight: 600; font-size: 14.5px;
  line-height: 1.4; color: var(--encre);
}
.lgj .lgj-cote__sommaire a::before{
  content: counter(som, decimal-leading-zero);
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--secondaire);
}
.lgj .lgj-cote__sommaire a:hover{ color: var(--primaire); }

/* Qui écrit */
.lgj .lgj-cote__auteur{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lgj .lgj-cote__initiale{
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--primaire); color: #fff; display: grid; place-items: center;
  font-family: var(--titre); font-weight: 800; font-size: 19px;
}
.lgj .lgj-cote__nom{ font-family: var(--titre); font-weight: 800; font-size: 16px; color: var(--encre); }
.lgj .lgj-cote__role{ font-size: 12.5px; color: var(--encre-doux); }
.lgj .lgj-cote__lien{
  display: inline-block; margin-top: 4px;
  font-family: var(--titre); font-weight: 700; font-size: 13.5px;
  color: var(--primaire); border-bottom: 1px solid var(--primaire-25); padding-bottom: 2px;
}
.lgj .lgj-cote__lien:hover{ border-bottom-color: var(--primaire); }

/* Les produits dont parle l'article */
.lgj .lgj-cote__produit{
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--primaire-25);
}
.lgj .lgj-cote__produit:first-of-type{ border-top: 0; padding-top: 0; }
.lgj .lgj-cote__produit img{
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 10px; background: var(--primaire-08);
}
.lgj .lgj-cote__produit strong{
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: 14px; line-height: 1.3; color: var(--encre);
}
.lgj .lgj-cote__produit span{ font-size: 12.5px; color: var(--encre-doux); }
.lgj .lgj-cote__produit b{
  font-family: var(--titre); font-weight: 900; font-size: 15px; color: var(--primaire);
}
.lgj .lgj-cote__produit a:hover strong{ color: var(--primaire); }
.lgj .lgj-cote .lgj-btn{ width: 100%; justify-content: center; margin-top: var(--e2); }

/* Infos pratiques */
.lgj .lgj-cote__infos li{
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.6; color: var(--encre-doux);
  padding: 7px 0;
}
.lgj .lgj-cote__infos svg{
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
  fill: none; stroke: var(--primaire); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-cote__infos strong{ display: block; color: var(--encre); font-weight: 700; }
.lgj .lgj-cote__infos a:hover{ color: var(--primaire); }

@media (max-width: 980px){
  /* La colonne passe sous le texte. Le sommaire, lui, ne sert plus
     à rien une fois l'article déjà lu : il disparaît. */
  .lgj .lgj-post__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-post__corps{ margin-inline: auto; }
  .lgj .lgj-post__cote{
    max-width: 68ch; margin-inline: auto; width: 100%;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  }
  .lgj .lgj-cote--sommaire{ display: none; }
  .lgj .lgj-partage{ margin-inline: auto; }
}
.lgj .lgj-post__corps > p{
  font-size: 17px; line-height: 1.75; color: var(--encre); margin-bottom: 1.25em;
}
.lgj .lgj-post__corps > p:first-of-type{
  font-size: 19.5px; line-height: 1.6; font-weight: 500; color: var(--encre);
}
.lgj .lgj-post__corps h2{
  font-size: clamp(23px, 2.6vw, 29px); font-weight: 800;
  margin: var(--e5) 0 var(--e2);
}
.lgj .lgj-post__corps h3{
  font-size: 19px; font-weight: 800; color: var(--encre);
  margin: var(--e4) 0 10px;
}
.lgj .lgj-post__corps ul{ margin: 0 0 1.25em; }
.lgj .lgj-post__corps li{
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 17px; line-height: 1.7;
}
.lgj .lgj-post__corps li::before{
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--secondaire);
}
.lgj .lgj-post__corps a{ color: var(--primaire); border-bottom: 1px solid var(--primaire-25); }
.lgj .lgj-post__corps a:hover{ border-bottom-color: var(--primaire); }

/* La citation détachée : le seul moment où le texte hausse la voix. */
.lgj .lgj-post__citation{
  margin: var(--e5) 0; padding: var(--e3) 0 var(--e3) var(--e3);
  border-left: 3px solid var(--primaire);
}
.lgj .lgj-post__citation p{
  margin: 0; font-family: var(--titre); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; color: var(--primaire);
}
.lgj .lgj-post__citation cite{
  display: block; margin-top: 12px; font-style: normal;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-doux);
}

/* Métadonnées, posées sous le titre dans la bannière noire */
.lgj .lgj-post__meta{
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  margin-top: var(--e2);
  font-size: 13.5px; color: rgba(255,255,255,.82);
}
.lgj .lgj-post__meta span{ display: inline-flex; align-items: center; gap: 7px; }
.lgj .lgj-post__meta svg{
  width: 15px; height: 15px; fill: none;
  stroke: var(--secondaire); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-post__meta i{ font-style: normal; color: rgba(255,255,255,.35); }

/* Partage — en bas de l'article */
.lgj .lgj-partage{
  /* Calé sur la colonne de texte, pas centré dans la page : il
     appartient à l'article, pas à la mise en page. */
  max-width: 68ch; margin: var(--e6) 0 0;
  padding-top: var(--e3); border-top: 1px solid var(--primaire-25);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.lgj .lgj-partage p{
  margin: 0; font-family: var(--titre); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-doux);
}
.lgj .lgj-partage__liens{ display: flex; gap: 10px; }
.lgj .lgj-partage__liens a{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--primaire-25);
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.lgj .lgj-partage__liens svg{ width: 17px; height: 17px; fill: var(--primaire); }
.lgj .lgj-partage__liens a:hover{ background: var(--primaire); border-color: var(--primaire); }
.lgj .lgj-partage__liens a:hover svg{ fill: #fff; }

/* Bandeau « article suivant » */
.lgj .lgj-suite{ background: var(--primaire-08); padding: var(--section) 0; }
.lgj .lgj-suite__lien{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  background: #fff; border: 1px solid var(--primaire-25);
  border-radius: var(--r-m); padding: var(--e3);
  transition: border-color .2s ease;
}
.lgj .lgj-suite__lien:hover{ border-color: var(--primaire); }
.lgj .lgj-suite__quoi{
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondaire-f); margin-bottom: 8px;
}
.lgj .lgj-suite__lien h3{ font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; margin: 0; }

/* ============================================================
   19. FICHE PRODUIT — la page qu'on ouvre en cliquant un produit
   ------------------------------------------------------------
   Deux colonnes sur PC : les photos à gauche, la décision à
   droite. Sur téléphone, la photo passe au-dessus et le bouton
   d'ajout prend toute la largeur : c'est le seul geste attendu.
   ============================================================ */
.lgj .lgj-produit{ padding: var(--section) 0; }
.lgj .lgj-produit__grid{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 62px); align-items: start;
}

/* ---------- Colonne photos ---------- */
.lgj .lgj-produit__scene{
  border-radius: var(--r-l); overflow: hidden;
  background: var(--primaire-08); aspect-ratio: 1 / 1;
}
.lgj .lgj-produit__scene img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-produit__vignettes{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 12px;
}
.lgj .lgj-produit__vignettes button{
  padding: 0; border: 1.5px solid var(--primaire-25); background: none;
  border-radius: var(--r-s); overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1; transition: border-color .2s ease;
}
.lgj .lgj-produit__vignettes button img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-produit__vignettes button[aria-current="true"],
.lgj .lgj-produit__vignettes button:hover{ border-color: var(--primaire); }

/* ---------- Colonne décision ---------- */
.lgj .lgj-produit__cat{
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--secondaire-f); margin-bottom: 12px;
}
.lgj .lgj-produit__infos h1{
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 900;
  letter-spacing: -.018em; margin-bottom: 14px;
}
.lgj .lgj-produit__note{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--e3); font-size: 13.5px; color: var(--encre-doux);
}
.lgj .lgj-produit__note .lgj-avis__etoiles svg{ width: 15px; height: 15px; }
.lgj .lgj-produit__note .lgj-avis__source{ width: 15px; height: 15px; }
.lgj .lgj-produit__prix{
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.lgj .lgj-produit__prix strong{
  font-family: var(--titre); font-weight: 900; font-size: 34px;
  color: var(--primaire); letter-spacing: -.02em;
}
.lgj .lgj-produit__prix span{ font-size: 13.5px; color: var(--encre-doux); }
.lgj .lgj-produit__texte{ font-size: 16.5px; line-height: 1.7; color: var(--encre); }
.lgj .lgj-produit__stock{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--encre-doux); margin-bottom: var(--e3);
}
.lgj .lgj-produit__stock::before{
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #2E7D46; flex: 0 0 auto;
}

/* Quantité + ajout : la seule ligne d'action de la page */
.lgj .lgj-produit__achat{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.lgj .lgj-qte{
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--primaire-25); border-radius: 999px;
  padding: 4px;
}
.lgj .lgj-qte button{
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: none; color: var(--primaire);
  font-size: 20px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.lgj .lgj-qte button:hover{ background: var(--primaire); color: #fff; }
.lgj .lgj-qte input{
  width: 46px; border: 0; background: none; text-align: center;
  font-family: var(--titre); font-weight: 800; font-size: 16px; color: var(--encre);
  -moz-appearance: textfield;
}
.lgj .lgj-qte input::-webkit-outer-spin-button,
.lgj .lgj-qte input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Réassurance : trois lignes sobres, pas trois pictos criards */
.lgj .lgj-produit__gages{
  border-top: 1px solid var(--primaire-25);
  border-bottom: 1px solid var(--primaire-25);
  padding: var(--e2) 0; margin-bottom: var(--e3);
}
.lgj .lgj-produit__gages li{
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--encre-doux); padding: 7px 0;
}
.lgj .lgj-produit__gages svg{
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  fill: none; stroke: var(--primaire); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-produit__gages strong{ color: var(--encre); font-weight: 700; }

/* Accordéon : composition, conservation, livraison */
.lgj .lgj-repli{ border-top: 1px solid var(--primaire-25); }
.lgj .lgj-repli:last-of-type{ border-bottom: 1px solid var(--primaire-25); }
.lgj .lgj-repli__tete{
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; text-align: left;
  font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--encre);
}
.lgj .lgj-repli__tete svg{
  flex: 0 0 auto; width: 16px; height: 16px;
  fill: none; stroke: var(--primaire); stroke-width: 2; stroke-linecap: round;
  transition: transform .25s ease;
}
.lgj .lgj-repli__tete[aria-expanded="true"] svg{ transform: rotate(45deg); }
.lgj .lgj-repli__corps{ display: none; padding: 0 0 var(--e2); }
.lgj .lgj-repli__corps[data-ouvert="true"]{ display: block; }
.lgj .lgj-repli__corps p,
.lgj .lgj-repli__corps li{ font-size: 14.5px; color: var(--encre-doux); }
.lgj .lgj-repli__corps p:last-child{ margin-bottom: 0; }
.lgj .lgj-repli__corps li{ padding: 3px 0; }

/* ============================================================
   20. PANIER
   ------------------------------------------------------------
   La liste à gauche, le total à droite, collé pendant qu'on
   fait défiler. Un seul bouton dominant : commander.
   ============================================================ */
.lgj .lgj-panier{ padding: var(--section) 0 var(--e6); }
.lgj .lgj-panier__grid{
  display: grid; grid-template-columns: 1.6fr .85fr;
  gap: clamp(28px, 3.6vw, 52px); align-items: start;
}
.lgj .lgj-panier__liste{ border-top: 1px solid var(--primaire-25); }
.lgj .lgj-ligne{
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto;
  gap: var(--e2) var(--e3); align-items: center;
  padding: var(--e3) 0; border-bottom: 1px solid var(--primaire-25);
}
.lgj .lgj-ligne__photo{
  width: 96px; height: 96px; border-radius: var(--r-s); overflow: hidden;
  background: var(--primaire-08);
}
.lgj .lgj-ligne__photo img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-ligne__cat{
  font-family: var(--titre); font-weight: 700; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--secondaire-f); margin-bottom: 5px;
}
.lgj .lgj-ligne h3{ font-size: 17px; font-weight: 800; color: var(--encre); margin-bottom: 5px; }
.lgj .lgj-ligne h3 a:hover{ color: var(--primaire); }
.lgj .lgj-ligne__unite{ font-size: 13.5px; color: var(--encre-doux); margin: 0; }
.lgj .lgj-ligne__total{
  font-family: var(--titre); font-weight: 900; font-size: 19px;
  color: var(--encre); white-space: nowrap;
}
.lgj .lgj-ligne__retirer{
  background: none; border: 0; cursor: pointer; padding: 6px;
  color: var(--encre-doux); font-size: 13px;
  border-bottom: 1px solid transparent;
}
.lgj .lgj-ligne__retirer:hover{ color: var(--primaire); border-bottom-color: var(--primaire-25); }
.lgj .lgj-panier__pied{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); flex-wrap: wrap; padding-top: var(--e3);
}

/* Le récapitulatif */
.lgj .lgj-recap{
  background: var(--primaire-08); border: 1px solid var(--primaire-25);
  border-radius: var(--r-m); padding: var(--e3);
  position: sticky; top: 112px;
}
.lgj .lgj-recap h2{ font-size: 21px; font-weight: 800; margin-bottom: var(--e3); }
.lgj .lgj-recap__ligne{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 9px 0; font-size: 15px; color: var(--encre-doux);
}
.lgj .lgj-recap__ligne strong{ color: var(--encre); font-weight: 600; }
.lgj .lgj-recap__total{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: var(--e2); padding-top: var(--e2);
  border-top: 1px solid var(--primaire-25);
  font-family: var(--titre); font-weight: 800; font-size: 16px; color: var(--encre);
}
.lgj .lgj-recap__total span:last-child{ font-size: 27px; font-weight: 900; color: var(--primaire); }
.lgj .lgj-recap .lgj-btn{ width: 100%; justify-content: center; margin-top: var(--e3); }
.lgj .lgj-recap__note{
  margin: var(--e2) 0 0; font-size: 12.5px; line-height: 1.6; color: var(--encre-doux);
}

/* Code promo */
.lgj .lgj-promo{ display: flex; gap: 10px; margin-top: var(--e2); }
.lgj .lgj-promo input{
  flex: 1 1 auto; min-width: 0; padding: 12px 16px;
  border: 1.5px solid var(--primaire-25); border-radius: var(--r-s);
  background: #fff; font: inherit; font-size: 14.5px; color: var(--encre);
}
.lgj .lgj-promo input::placeholder{ color: var(--encre-doux); }
.lgj .lgj-promo button{
  flex: 0 0 auto; padding: 12px 18px; cursor: pointer;
  border: 1.5px solid var(--primaire); border-radius: var(--r-s);
  background: none; color: var(--primaire);
  font-family: var(--titre); font-weight: 700; font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.lgj .lgj-promo button:hover{ background: var(--primaire); color: #fff; }

/* Les moyens de paiement, en toutes lettres plutôt qu'en logos */
.lgj .lgj-paiement{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--e2); }
.lgj .lgj-paiement li{
  font-family: var(--titre); font-weight: 700; font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--encre-doux);
  border: 1px solid var(--primaire-25); border-radius: 8px;
  padding: 6px 10px; background: #fff;
}

/* Le message d'ajout au panier, discret, sous le bouton */
.lgj .lgj-ajoute{
  display: none; align-items: center; gap: 9px;
  font-family: var(--titre); font-weight: 700; font-size: 13.5px;
  color: #2E7D46; margin: 0 0 var(--e2);
}
.lgj .lgj-ajoute[data-vu="true"]{ display: flex; }
.lgj .lgj-ajoute svg{
  width: 16px; height: 16px; fill: none; stroke: #2E7D46;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   21. RESPONSIVE DES TROIS NOUVELLES PAGES
   ============================================================ */
@media (max-width: 900px){
  .lgj .lgj-produit__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-panier__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-recap{ position: static; }
}

@media (max-width: 560px){
  .lgj .lgj-post__media{ border-radius: var(--r-m); margin-bottom: var(--e4); }
  .lgj .lgj-post__corps > p:first-of-type{ font-size: 17.5px; }
  .lgj .lgj-post__citation{ margin: var(--e4) 0; padding-left: var(--e2); }
  .lgj .lgj-produit__vignettes{ gap: 8px; }
  .lgj .lgj-produit__achat .lgj-btn{ flex: 1 1 100%; justify-content: center; }

  /* Le panier passe en fiches empilées : plus de colonnes à lire. */
  .lgj .lgj-ligne{
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      "photo titre"
      "qte   total"
      "retirer retirer";
    row-gap: 14px;
  }
  .lgj .lgj-ligne__photo{ grid-area: photo; width: 76px; height: 76px; }
  .lgj .lgj-ligne__nom{ grid-area: titre; }
  .lgj .lgj-ligne .lgj-qte{ grid-area: qte; justify-self: start; }
  .lgj .lgj-ligne__total{ grid-area: total; justify-self: end; }
  .lgj .lgj-ligne__retirer{ grid-area: retirer; justify-self: start; padding-left: 0; }
  .lgj .lgj-panier__pied .lgj-btn{ width: 100%; justify-content: center; }
}