/* ================================================================
   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;
  /* Respiration verticale d'une section. C'est la SEULE valeur qui
     commande l'espace entre deux sections : elle sert de retrait haut
     ET bas, donc l'ecart entre deux sections vaut le double.
     Reglee a 64 px, cet ecart montait a 128 px sur grand ecran — la
     page se lisait par blocs isoles, avec du vide entre chacun.
     A 42 px, l'ecart tombe a 84 px : les sections restent distinctes,
     mais elles se suivent au lieu de se tenir a distance. */
  --section: clamp(24px, 3vw, 42px);
  --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; }

/* L'attribut « hidden » doit gagner sur nos propres display.
   Sans cette ligne, une carte produit masquée par le filtre reste
   affichée : la règle du navigateur, [hidden]{display:none}, est
   moins spécifique que .lgj .lgj-carte{display:flex}. */
.lgj [hidden]{ display: none !important; }

/* 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; }

/* Les boutons « Ajouter au panier » enveloppent leur libellé dans un
   .lgj-btn__texte : c'est lui que le script remplace par « Ajouté »
   le temps de l'accusé de réception. Le libellé n'étant plus un
   enfant direct de la flexbox, le rattrapage ci-dessus n'a plus lieu
   d'être. */
.lgj .lgj-btn__texte{ display: inline; }
.lgj .lgj-btn__texte .lgj-mot{ margin-left: 0; }

/* Deux secondes après l'ajout : le bouton reste à sa place, à sa
   taille, seule la couleur dit que le geste a été enregistré.
   Le remplissage est instantané, sans la charge latérale du survol :
   celle-ci met un tiers de seconde à traverser le bouton, pendant
   lequel le libellé, déjà passé au blanc, serait illisible. */
.lgj .lgj-btn--fait{ background-size: 100% 100%; transition: none; }
.lgj .lgj-btn--ligne.lgj-btn--fait{ color: #fff !important; border-color: var(--rose); }
.lgj .lgj-btn--fait .lgj-btn__rond{ background: var(--dore); color: var(--noir); }

/* ------------------------------------------------------------
   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{ 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: 72px; 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); }

/* Variante « réassurance » : quatre arguments sur un rang, icône à
   gauche du libellé. Pas de phrase sous l'intitulé — c'est une bande
   qu'on parcourt du regard en une seconde, pas un texte à lire. */
/* Trois tiers rigoureusement egaux, et chaque repere CENTRE sur son
   tiers : la bande est alors symetrique, et son axe tombe sur celui
   du reste de la page. Ferres a gauche, les trois reperes laissaient
   un grand vide a droite et la bande paraissait de travers.

   La bande est en outre resserree a 860 px : sur un ecran large, trois
   reperes ecarteles sur 1180 px ne se lisent plus ensemble. Deux
   filets marquent les tiers, comme sur un bandeau de garantie. */
.lgj .lgj-atouts--reassurance .lgj-atouts__grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 860px; margin-inline: auto;
}
.lgj .lgj-atouts--reassurance .lgj-atout{
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding-inline: var(--e2);
}
.lgj .lgj-atouts--reassurance .lgj-atout + .lgj-atout{
  border-left: 1px solid var(--primaire-25);
}
.lgj .lgj-atouts--reassurance .lgj-atout__ico{
  flex: 0 0 auto; width: 40px; height: 40px; margin: 0;
}
.lgj .lgj-atouts--reassurance .lgj-atout__ico svg{ width: 21px; height: 21px; }
.lgj .lgj-atouts--reassurance .lgj-atout h3{
  font-size: 14.5px; line-height: 1.25; margin: 0;
}
.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
   ------------------------------------------------------------
   Plus employées depuis que l'accueil est devenu une vitrine :
   les trois colonnes de produits ont laissé la place à l'aperçu
   des catégories (section 9 bis). Les règles restent en place,
   comme celles de la pastille allergènes, pour le jour où une
   page en aura de nouveau besoin.
   ============================================================ */
.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;
}

/* ============================================================
   9 bis. LES SECTIONS PROPRES À L'ACCUEIL
   ------------------------------------------------------------
   L'accueil se lit du haut vers le bas comme un parcours :
   on rassure, on montre ce qu'on vend, on met une création à
   l'honneur, on présente Jeannine, on répond au « et pour mon
   événement ? », on prouve par les avis, on montre en images,
   on explique comment commander, on donne à lire, on conclut.
   Chaque section porte son propre « voir plus ».
   ============================================================ */

/* ---------- 1. Le produit mis à l'honneur ----------
   Une seule création, en grand : une photo qui tient la moitié de
   la largeur, le nom, le texte, le prix, un bouton. C'est la seule
   section de la page où un produit est plus gros que les autres. */
/* Les six éléments (surtitre, nom, description, photo, prix, bouton)
   sont posés À PLAT dans la grille, sans conteneur intermédiaire.
   C'est ce qui permet de les replacer librement :

     · sur ordinateur, la photo tient toute la colonne de gauche et
       le texte se centre dans celle de droite ;
     · sur téléphone, la photo se glisse ENTRE LA DESCRIPTION ET LE
       PRIX. On lit le nom, on lit le texte, on voit la création,
       puis le prix et « Commander » arrivent l'un sous l'autre, à
       portée de pouce, juste au-dessus de la barre d'onglets.

   Les marges des enfants sont remises à zéro : c'est la gouttière
   de la grille (row-gap) qui tient tout le rythme vertical, sinon
   marges et gouttière s'additionnent et l'espacement part en vrille. */
.lgj .lgj-honneur{ background: var(--primaire-08); padding: var(--section) 0; }
.lgj .lgj-honneur__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  /* Une seule rangee souple, EN HAUT : le bloc de texte est donc
     cale EN BAS, et les deux boutons finissent exactement sur la
     ligne du bas de la photo. Avec une rangee souple de chaque cote,
     le texte flottait au milieu et les boutons restaient suspendus
     a mi-hauteur, sans rien pour les aligner. */
  grid-template-rows: 1fr auto auto auto auto auto;
  grid-template-areas:
    "media vide"
    "media sur"
    "media nom"
    "media txt"
    "media prix"
    "media btn";
  column-gap: clamp(26px, 3.6vw, 56px);
  row-gap: 14px;
  align-items: start;
}
.lgj .lgj-honneur__grid > *{ margin: 0; }
/* La cellule libre du haut est occupee par un element fictif.
   Sans lui, elle reste une case vide, et TOUT enfant de la grille
   qui n'aurait pas de zone attribuee irait s'y loger : les boutons
   se retrouveraient alors au-dessus du surtitre, en haut de la
   colonne. C'est exactement ce qui arrive si une ancienne version
   de cette feuille de style est servie depuis le cache. */
.lgj .lgj-honneur__grid::before{ content: ""; grid-area: vide; }
.lgj .lgj-honneur__sur  { grid-area: sur; }
.lgj .lgj-honneur__nom  { grid-area: nom; }
.lgj .lgj-honneur__texte{ grid-area: txt; }
.lgj .lgj-honneur__media{ grid-area: media; }
.lgj .lgj-honneur__prix { grid-area: prix; }
/* Les deux gestes forment UNE rangee de la grille : c'est elle qui
   porte la zone « btn », pas chaque bouton. Sans cela, le second
   bouton serait alle se ranger dans une rangee a lui, sous le
   premier, meme sur grand ecran. */
.lgj .lgj-honneur__actions{
  grid-area: btn; justify-self: start;
  display: flex; flex-wrap: wrap; gap: 12px;
}

.lgj .lgj-honneur__media{
  border-radius: var(--r-l); overflow: hidden;
  aspect-ratio: 4 / 3; background: #fff;
  align-self: center;
}
.lgj .lgj-honneur__media img{ width: 100%; height: 100%; object-fit: cover; }
.lgj .lgj-honneur .lgj-surtitre{ text-align: left; }
.lgj .lgj-honneur h2{
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 800;
  line-height: 1.1;
}
.lgj .lgj-honneur p{ font-size: 16px; color: var(--encre-doux); max-width: 46ch; }
.lgj .lgj-honneur__prix{
  display: block; margin-top: 4px;
  font-family: var(--titre); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 38px); color: var(--primaire);
  line-height: 1.1;
}
.lgj .lgj-honneur__prix small{
  display: block; margin-top: 6px;
  font-family: var(--texte); font-weight: 500; font-size: 13.5px;
  color: var(--encre-doux); letter-spacing: 0;
}

/* ---------- 2. Vos moments : la commande sur mesure ----------
   Une carte sombre coupée en deux : le texte d'un côté, la photo de
   l'autre, toutes deux découpées dans le même rectangle. Le panneau
   à encoches, lui, reste pour les pages intérieures — sa photo qui
   déborde n'avait pas de sens au milieu de cette page-ci. */
.lgj .lgj-moments{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-moments__in{
  display: grid; grid-template-columns: 1.08fr .92fr;
  background: var(--noir);
  border-radius: var(--r-l); overflow: hidden;
}
.lgj .lgj-moments__texte{ padding: clamp(32px, 4vw, 62px); align-self: center; }
.lgj .lgj-moments__texte .lgj-surtitre{ text-align: left; color: var(--primaire-25); }
.lgj .lgj-moments h2{
  color: #fff; font-weight: 800;
  font-size: clamp(25px, 3vw, 36px); line-height: 1.12; margin-bottom: 16px;
}
.lgj .lgj-moments p{ color: rgba(255,255,255,.82); font-size: 15.5px; max-width: 44ch; }

/* Les occasions : des étiquettes, pas une liste à puces. On les
   parcourt d'un coup d'œil pour y reconnaître la sienne. */
.lgj .lgj-moments__liste{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--e3) 0 var(--e4);
}
.lgj .lgj-moments__liste li{
  font-family: var(--titre); font-weight: 600; font-size: 13px;
  color: #fff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  padding: 7px 15px;
}

/* Un seul bouton. Le téléphone reste un lien : deux boutons côte à
   côte se disputeraient le clic. */
.lgj .lgj-moments__actions{ display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.lgj .lgj-moments__tel{
  font-family: var(--titre); font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,.8); padding-bottom: 3px;
  border-bottom: 2px solid rgba(255,255,255,.28);
}
.lgj .lgj-moments__tel:hover,
.lgj .lgj-moments__tel:focus-visible{ color: #fff; border-bottom-color: #fff; }

.lgj .lgj-moments__media{ position: relative; min-height: 320px; }
.lgj .lgj-moments__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- 3. L'appel final ----------
   Un dernier panneau, avant le pied de page. Il ne dit qu'une
   chose et ne propose qu'un seul geste. */
.lgj .lgj-cta{ background: #fff; padding: 0 0 var(--section); }
.lgj .lgj-cta__in{
  background: var(--noir); border-radius: var(--r-l);
  padding: clamp(36px, 5vw, 74px) clamp(24px, 4vw, 60px);
  text-align: center;
}
.lgj .lgj-cta h2{
  color: #fff; font-weight: 800;
  font-size: clamp(27px, 3.8vw, 44px); line-height: 1.1; margin-bottom: 14px;
}
.lgj .lgj-cta p{
  color: rgba(255,255,255,.82); font-size: 16.5px;
  max-width: 46ch; margin: 0 auto var(--e3);
}

/* ---------- 4. Le bouton de sortie d'une section ----------
   « voir plus », centré sous le contenu. Le même partout. */
.lgj .lgj-centre{ display: flex; justify-content: center; margin-top: var(--e4); }

/* ============================================================
   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;
}
/* Le texte et les boutons sont deux rangees distinctes de la MEME
   colonne : c'est ce qui permet, sur telephone, de glisser la photo
   entre les deux (voir la section 16). Sur ordinateur, rien ne
   change a l'oeil : la photo reste hors flux, a droite. */
.lgj .lgj-panneau__texte{ padding: var(--e5) var(--e5) 0; color: #fff; grid-column: 1; }
.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{
  grid-column: 1;
  padding: 0 var(--e5) var(--e5);
  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
   ------------------------------------------------------------
   Plus employées : la galerie a quitté l'accueil. Les règles
   restent en place, comme celles de la pastille allergènes, pour
   le jour où une page en aura besoin.
   ============================================================ */
.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
   ------------------------------------------------------------
   La grille et la carte produit. La devanture, la recherche et
   la colonne de filtres sont juste en dessous, en 12 bis.
   ============================================================ */
.lgj .lgj-boutique{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-grille{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5) var(--gout);
}
/* L'accueil n'en montre que quatre, sur un seul rang. */
.lgj .lgj-grille--4{ grid-template-columns: repeat(4, 1fr); gap: var(--e4) 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 h3{ font-size: 18px; font-weight: 800; color: var(--encre); margin-bottom: 8px; }
/* Le titre ouvre la fiche produit, comme la photo. Le bouton « Ajouter
   au panier », lui, ne quitte jamais la page : deux gestes distincts,
   deux cibles distinctes. */
.lgj .lgj-carte h3 a{ color: inherit; }
.lgj .lgj-carte h3 a:hover,
.lgj .lgj-carte h3 a:focus-visible{ color: var(--rose); }
.lgj .lgj-carte p{ font-size: 14px; color: var(--encre-doux); }
.lgj .lgj-carte__prix{ font-family: var(--titre); font-weight: 900; font-size: 22px; color: var(--rose); }

/* ============================================================
   12 ter. LES PLUS COMMANDÉS — le carrousel de l'accueil
   ------------------------------------------------------------
   Mêmes tuiles que la boutique, posées sur une piste qui défile
   vers la droite au lieu d'une grille figée.

   Le nombre de tuiles VISIBLES est réglé par une seule variable,
   --vue : quatre sur ordinateur, trois sur tablette, DEUX sur
   téléphone. La largeur d'une tuile s'en déduit, gouttières
   déduites, pour que la dernière tuile visible s'arrête PILE au
   bord droit du contenu — jamais une demi-tuile coupée au hasard.

   La piste reste dans la largeur du contenu (.lgj-wrap) : les
   tuiles s'alignent donc exactement sur le titre, le filet et le
   bouton posés au-dessus et en dessous. C'est ce qui tient
   l'alignement sur téléphone.
   ============================================================ */
.lgj .lgj-plus{ background: #fff; padding: var(--section) 0; }
.lgj .lgj-plus__piste{
  --vue: 4;               /* tuiles visibles d'un coup */
  --pas: var(--gout);     /* gouttière entre deux tuiles */
  display: flex; gap: var(--pas);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 2 px en haut, une gouttière en bas : le contour de focus d'un
     bouton ne doit pas être rogné par le bord de la zone qui défile. */
  padding: 2px 0 var(--e2);
}
.lgj .lgj-plus__piste::-webkit-scrollbar{ height: 0; }
.lgj .lgj-plus__piste > .lgj-carte{
  /* repli pour les navigateurs qui refuseraient le calcul */
  flex: 0 0 clamp(230px, 23%, 320px);
  flex: 0 0 calc((100% - (var(--vue) - 1) * var(--pas)) / var(--vue));
  scroll-snap-align: start;
  min-width: 0;
}
/* Ce carrousel-ci montre ses flèches à toutes les tailles : sur
   ordinateur, rien n'indiquerait sinon qu'il y a huit créations. */
.lgj .lgj-plus .lgj-fleches{ display: flex; }
.lgj .lgj-plus .lgj-centre{ margin-top: var(--e3); }

@media (max-width: 1040px){
  .lgj .lgj-plus__piste{ --vue: 3; }
}
@media (max-width: 900px){
  .lgj .lgj-plus__piste{ --vue: 2; }
}
@media (max-width: 560px){
  /* Deux tuiles par ligne, gouttière resserrée : même calibre que
     la grille de la boutique sur téléphone. */
  .lgj .lgj-plus__piste{ --vue: 2; --pas: 12px; padding-bottom: var(--e1); }
}

/* ============================================================
   12 bis. BOUTIQUE — COLONNE DE FILTRES
   ------------------------------------------------------------
   Sous la bannière, la page se coupe en deux : les filtres à
   gauche, la grille à droite.
   Sur téléphone, la colonne de filtres se déplie en rangées de
   pastilles qui défilent au doigt, comme le reste du site.
   ============================================================ */

/* ---------- Les deux colonnes ---------- */
.lgj .lgj-shop{
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px); align-items: start;
}
.lgj .lgj-filtres{ position: sticky; top: var(--e3); }
.lgj .lgj-filtres__groupe{
  border-top: 1px solid var(--primaire-25);
  padding: var(--e3) 0;
}
.lgj .lgj-filtres__groupe:first-child{ border-top: 0; padding-top: 0; }
.lgj .lgj-filtres__titre{
  font-family: var(--titre); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre); margin: 0 0 var(--e2);
}
.lgj .lgj-filtres__liste{ display: flex; flex-direction: column; gap: 2px; }

.lgj .lgj-filtre{
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 42px; padding: 9px 12px;
  border: 0; border-radius: 12px; background: transparent;
  font-family: var(--titre); font-weight: 600; font-size: 14.5px;
  color: var(--encre); text-align: left; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lgj .lgj-filtre svg{
  flex: 0 0 auto; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--primaire);
}
.lgj .lgj-filtre__compte{
  margin-left: auto;
  background: var(--primaire-08); color: var(--primaire);
  border-radius: 999px; padding: 3px 9px;
  font-size: 12px; font-weight: 800;
}
.lgj .lgj-filtre:hover{ background: var(--primaire-08); }
.lgj .lgj-filtre[aria-pressed="true"]{ background: var(--primaire); color: #fff; }
.lgj .lgj-filtre[aria-pressed="true"] svg{ color: #fff; }
.lgj .lgj-filtre[aria-pressed="true"] .lgj-filtre__compte{
  background: rgba(255,255,255,.24); color: #fff;
}
@media (prefers-reduced-motion: reduce){
  .lgj .lgj-filtre{ transition: none; }
}

/* ---------- La barre de résultats ---------- */
.lgj .lgj-shop__tete{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3);
}
.lgj .lgj-shop__compte{ margin: 0; font-size: 14.5px; color: var(--encre-doux); }
.lgj .lgj-shop__compte b{ font-family: var(--titre); font-weight: 800; color: var(--encre); }
.lgj .lgj-tri{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--encre-doux); }
.lgj .lgj-tri select{
  font: inherit; font-family: var(--titre); font-weight: 600; font-size: 14px;
  color: var(--encre); background: #fff;
  border: 1px solid var(--primaire-25); border-radius: 999px;
  padding: 9px 15px; cursor: pointer;
}

/* Quand aucun produit ne répond, on le dit, et on propose la sortie. */
.lgj .lgj-shop__vide{
  border: 1px dashed var(--primaire-25); border-radius: var(--r-m);
  padding: var(--e6) var(--e3); text-align: center;
}
.lgj .lgj-shop__vide p{ color: var(--encre-doux); }

/* ---------- La carte produit, façon devanture ----------
   La famille se lit sur la photo, le format et le prix sur une même
   ligne, et les deux gestes possibles se partagent la largeur :
   « Ajouter » reste sur la page, « Commander » emmène au panier. */
/* Beaucoup de photos produit sont sur fond blanc : une pastille
   blanche s'y perdrait. Le liseré et le lettrage framboise la font
   tenir aussi bien sur le blanc que sur une photo sombre. */
.lgj .lgj-carte__pastille{
  position: absolute; z-index: 2; right: 10px; top: 10px;
  background: rgba(255,255,255,.94); color: var(--primaire);
  border: 1px solid var(--primaire-25);
  font-family: var(--titre); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
/* Deux lignes réservées au nom : le format, le prix et les deux
   boutons se retrouvent alors à la même hauteur d'une carte à
   l'autre, que le nom tienne sur une ligne ou sur deux. */
.lgj .lgj-carte h3{ min-height: 2.24em; }
.lgj .lgj-carte__ligne{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: var(--e2);
}
.lgj .lgj-carte__unite{ margin: 0; font-size: 13px; color: var(--encre-doux); }
.lgj .lgj-carte__actions{
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

/* Sur l'accueil, la carte garde une courte description et propose
   deux gestes de poids différents : le bouton ajoute au panier, le
   lien ouvre la fiche. Un seul bouton par carte, donc un seul clic
   évident. */
.lgj .lgj-carte__texte{ font-size: 14px; color: var(--encre-doux); margin-bottom: var(--e2); }
.lgj .lgj-carte__texte + .lgj-carte__ligne{ margin-top: auto; }
.lgj .lgj-carte__actions--pile{
  margin-top: 0;
  grid-template-columns: 1fr; gap: 10px; justify-items: center;
}
.lgj .lgj-carte__lien{
  font-family: var(--titre); font-weight: 700; font-size: 13.5px;
  color: var(--rose); 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-carte__lien:hover,
.lgj .lgj-carte__lien:focus-visible{ background-size: 100% 2px, 100% 2px; }
@media (prefers-reduced-motion: reduce){
  .lgj .lgj-carte__lien{ transition: none; }
}
.lgj .lgj-carte .lgj-carte__actions .lgj-btn{
  width: 100%; min-height: 42px;
  padding-inline: 10px; font-size: 13px; letter-spacing: 0;
}

/* ============================================================
   13. À PROPOS — récit + citation
   ============================================================ */
.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; }
/* Le portrait est cadre PAR LE HAUT.
   La photo d'origine est en hauteur (1024 x 1188) ; le cadre, lui,
   est souvent plus large que haut. Recadree par le centre, comme le
   fait le navigateur par defaut, elle perdait d'abord le haut du
   crane : on se retrouvait avec un visage decapite.
   En calant le haut de la photo sur le haut du cadre, ce qui part
   au recadrage est le bas du buste — ce dont personne ne remarque
   l'absence. La photo a juste ce qu'il faut d'air au-dessus de la
   tete pour que le cadrage ne serre pas. */
.lgj .lgj-recit__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}

/* Variante à colonnes égales, employée sur l'accueil : la photo n'a
   plus de format imposé, elle prend exactement la hauteur du texte
   posé à côté. Les deux colonnes commencent et finissent sur la même
   ligne, au lieu de laisser un grand vide au-dessus du texte.
   La page À propos, elle, garde son portrait au format 4/5 : son
   texte y est plus long, et le cadrage vertical lui va. */
.lgj .lgj-recit--egal .lgj-recit__grid{ align-items: stretch; }
.lgj .lgj-recit--egal .lgj-recit__grid > div:first-child{ align-self: center; }
.lgj .lgj-recit--egal .lgj-recit__media{
  aspect-ratio: auto; position: relative; min-height: 340px;
}
/* La photo est sortie du flux : sans cela elle imposerait sa propre
   hauteur (celle de son format d'origine) à la rangée, et c'est le
   texte qui se retrouverait à côté d'une image trop haute. */
.lgj .lgj-recit--egal .lgj-recit__media img{ position: absolute; inset: 0; }

/* ---------- Variante « à plat », employée sur l'accueil ----------
   Mêmes deux colonnes qu'au-dessus, mais les cinq éléments (surtitre,
   titre, texte, portrait, bouton) sont des ENFANTS DIRECTS de la
   grille, sans <div> qui les regroupe. C'est la seule façon de faire
   remonter le portrait entre le texte et le bouton sur téléphone.
   Sur ordinateur, rien ne change à l'œil : texte à gauche, portrait
   à droite, le texte centré sur la hauteur de la photo. */
.lgj .lgj-recit--egal .lgj-recit__grid--plat{
  grid-template-areas:
    "vide  media"
    "sur   media"
    "nom   media"
    "txt   media"
    "btn   media"
    "vide2 media";
  grid-template-rows: 1fr auto auto auto auto 1fr;
  align-items: start;
  row-gap: 0;
}
.lgj .lgj-recit__grid--plat > *{ margin: 0; }
/* Memes elements fictifs qu'a la section « A l'honneur » : les deux
   cellules libres sont occupees, donc aucune ne peut accueillir par
   erreur un enfant sans zone. */
.lgj .lgj-recit__grid--plat::before{ content: ""; grid-area: vide; }
.lgj .lgj-recit__grid--plat::after { content: ""; grid-area: vide2; }
.lgj .lgj-recit__sur{ grid-area: sur; }
.lgj .lgj-recit__nom{ grid-area: nom; margin-bottom: 18px; }
.lgj .lgj-recit__texte{ grid-area: txt; }
.lgj .lgj-recit__texte p:last-child{ margin-bottom: 0; }
.lgj .lgj-recit__grid--plat .lgj-recit__media{
  grid-area: media;
  /* la photo doit s'étirer sur toute la hauteur de la grille : sans
     cela, align-items: start la réduirait à sa hauteur minimale */
  align-self: stretch;
}
.lgj .lgj-recit__btn{ grid-area: btn; justify-self: start; margin-top: 18px; }

.lgj .lgj-recit .lgj-surtitre{ text-align: left; }
.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-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; }

/* ---------- La carte ----------
   Reprise du site actuel (même adresse, même embed Google Maps),
   mais recadrée : coins arrondis comme les autres encadrés, ratio
   fixe pour ne pas casser la colonne, et un lien de repli si le
   cadre est bloqué. Elle est posée juste après l'adresse : c'est
   la question qui suit toujours « où ? ».

   ⚠ RGPD : cet embed dépose des cookies Google dès le chargement.
   En production, le mettre derrière le bandeau de consentement,
   ou n'afficher qu'une image de la carte cliquable tant que le
   visiteur n'a pas accepté. */
.lgj .lgj-infos__carte{
  margin: 0 0 20px;
  border-radius: var(--r-s); overflow: hidden;
  border: 1px solid var(--rose-pale); background: #fff;
}
.lgj .lgj-infos__carte iframe{
  display: block; width: 100%; height: 300px; border: 0;
}
.lgj .lgj-infos__carte figcaption{
  padding: 11px 16px; border-top: 1px solid var(--rose-pale);
  font-size: 13px; color: var(--encre-doux);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.lgj .lgj-infos__carte figcaption a{
  font-family: var(--titre); font-weight: 700; font-size: 13px;
  color: var(--rose); border-bottom: 1px solid var(--rose-pale); padding-bottom: 2px;
}
.lgj .lgj-infos__carte figcaption a:hover{ border-bottom-color: var(--rose); }

@media (max-width: 560px){
  .lgj .lgj-infos__carte iframe{ height: 240px; }
}


/* ------------------------------------------------------------
   Utilitaires. Ils existent pour qu'aucune page ne porte de
   style en ligne : tout le rendu se règle depuis ce seul fichier.
   ------------------------------------------------------------ */
/* Texte d'appoint : l'adresse sous le logo du pied de page, la
   phrase sous le titre de la newsletter, le rappel du panier.
   Le blanc translucide d'avant supposait un fond sombre : depuis que
   le pied de page est blanc, il ne restait rien à lire — et sur la
   page Panier, où ce texte a toujours été posé sur du blanc, il était
   invisible depuis le début. */
.lgj .lgj-note{ color: var(--encre-doux); }
.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,
.lgj .lgj-article h3{
  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
   ============================================================ */
/* ---------- Fond BLANC ----------
   Le logo de la marque est une aquarelle : son lettrage rose est
   posé sur une tache d'eau blanche, et ses bords sont dégradés vers
   le blanc. Sur un aplat sombre, ce halo se voyait comme un
   rectangle clair autour du dessin — le logo ne s'incrustait pas, il
   était collé dessus. Sur blanc, le dégradé disparaît dans le fond
   et le logo redevient ce qu'il est : un dessin, pas une vignette.

   Le pied de page tire donc toute sa tenue de la TYPOGRAPHIE et des
   FILETS, non d'un aplat de couleur : un filet en haut pour le
   détacher de la section précédente, un second au-dessus des
   mentions légales. C'est la mise en page des pieds de page de
   maisons de qualité, et c'est celle qui vieillit le mieux. */
.lgj .lgj-footer{
  background: var(--blanc); color: var(--encre-doux);
  border-top: 1px solid var(--primaire-25);
  padding: var(--section) 0 var(--e4);
}
.lgj .lgj-footer h3{
  color: var(--encre); font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
}
/* La colonne « Contacts » est un cran plus large que celle du menu :
   c'est elle qui porte l'adresse électronique, le plus long mot de
   tout le pied de page. Des colonnes strictement égales la faisaient
   se couper en deux pour rien. */
.lgj .lgj-footer__grid{ display: grid; grid-template-columns: 1.4fr .85fr 1.25fr 1.5fr; gap: var(--gout); }
.lgj .lgj-footer__logo img{ height: 96px; 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: var(--encre-doux);
  background-image: linear-gradient(var(--primaire), var(--primaire));
  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: var(--primaire); 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: var(--primaire-08);
  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: var(--primaire); transition: fill .16s ease; }
.lgj .lgj-social a:hover svg{ 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 var(--primaire-25);
  background: var(--blanc); color: var(--encre);
  font: inherit; font-size: 14px;
}
.lgj .lgj-footer__form input:focus-visible{ border-color: var(--primaire); outline-color: var(--primaire); }
.lgj .lgj-footer__form input::placeholder{ color: var(--encre-doux); }
.lgj .lgj-footer__rgpd{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12px; color: var(--encre-doux); 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 var(--primaire-25);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--encre-doux);
}
.lgj .lgj-footer__legal nav{ display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ============================================================
   15 bis. ACCUSÉ DE RÉCEPTION DU PANIER
   ------------------------------------------------------------
   « Ajouter au panier » n'ouvre plus la fiche produit : il ajoute
   sur place. Un ajout qui ne se voit pas est un ajout qu'on refait
   trois fois, donc une bande de confirmation apparaît en bas de
   l'écran, avec le chemin vers le panier. Elle disparaît seule au
   bout de quatre secondes ; elle ne recouvre rien d'important et
   n'attend aucun clic.
   ============================================================ */
.lgj .lgj-toast{
  position: fixed; z-index: 90;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 20px;
  background: var(--noir); color: #fff;
  border-radius: 999px;
  font-size: 14.5px; line-height: 1.35;
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.lgj .lgj-toast--vu{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.lgj .lgj-toast__texte{ flex: 1 1 auto; }
.lgj .lgj-toast__texte b{ font-family: var(--titre); font-weight: 700; }
.lgj .lgj-toast__ico{
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rose); color: #fff;
}
.lgj .lgj-toast__ico svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.lgj .lgj-toast__lien{
  flex: 0 0 auto;
  font-family: var(--titre); font-weight: 700; font-size: 13.5px;
  color: var(--rose-pale); white-space: nowrap;
  border-bottom: 2px solid rgba(242,206,217,.45); padding-bottom: 2px;
}
.lgj .lgj-toast__lien:hover{ color: #fff; border-bottom-color: #fff; }

@media (max-width: 900px){
  /* la bande se pose au-dessus de la barre d'onglets, jamais dessous */
  .lgj .lgj-toast{
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px); border-radius: var(--r-m);
    font-size: 13.5px; padding: 12px 16px; gap: 11px;
  }
}
@media (prefers-reduced-motion: reduce){
  .lgj .lgj-toast{ transition: opacity .01s linear, visibility .01s; transform: translate(-50%, 0); }
}

/* ============================================================
   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; }

  /* Boutique : plus de colonne latérale. Chaque groupe de filtres
     devient une rangée de pastilles qui défile au doigt. */
  .lgj .lgj-shop{ grid-template-columns: 1fr; gap: var(--e3); }
  .lgj .lgj-filtres{ position: static; }
  .lgj .lgj-filtres__groupe{ border-top: 0; padding: 0 0 var(--e2); }
  .lgj .lgj-filtres__titre{ margin-bottom: 10px; }
  .lgj .lgj-filtres__liste{
    flex-direction: row; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-inline: -5vw; padding: 2px 5vw 8px;
    scrollbar-width: none;
  }
  .lgj .lgj-filtres__liste::-webkit-scrollbar{ height: 0; }
  .lgj .lgj-filtre{
    flex: 0 0 auto; width: auto; min-height: 44px;
    border: 2px solid var(--primaire-25); border-radius: 999px;
    padding: 9px 16px; font-size: 13.5px;
    white-space: nowrap;   /* une pastille tient sur une seule ligne */
  }
  .lgj .lgj-filtre[aria-pressed="true"]{ border-color: var(--primaire); }

  /* 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; }
  /* Réassurance : LES QUATRE REPÈRES SUR UNE SEULE LIGNE, y compris
     sur téléphone. L'icône passe au-dessus du libellé — côte à côte,
     quatre colonnes n'auraient plus la place. Chaque repère est
     centré sur sa colonne, et les quatre colonnes font exactement la
     même largeur : c'est ce qui donne la bande régulière.
     Le libellé peut tomber sur deux lignes, elles restent alignées
     par le haut (align-items: start sur la grille). */
  .lgj .lgj-atouts--reassurance .lgj-atouts__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; align-items: start;
    max-width: none;
  }
  /* Plus de filets : a cette taille ils serrent le texte pour rien. */
  .lgj .lgj-atouts--reassurance .lgj-atout + .lgj-atout{ border-left: 0; }
  .lgj .lgj-atouts--reassurance .lgj-atout{ padding-inline: 0; }
  .lgj .lgj-atouts--reassurance .lgj-atout{
    flex-direction: column; text-align: center; gap: 7px;
  }
  .lgj .lgj-atouts--reassurance .lgj-atout__ico{
    width: 36px; height: 36px; margin: 0 auto;
  }
  .lgj .lgj-atouts--reassurance .lgj-atout__ico svg{ width: 19px; height: 19px; }
  .lgj .lgj-atouts--reassurance .lgj-atout h3{
    font-size: 12.5px; line-height: 1.22; letter-spacing: -.01em;
    /* break-word et NON anywhere : « anywhere » autorise une coupure
       à chaque lettre y compris pour le calcul de la largeur minimale
       de la colonne, ce qui finit par couper « gourmandise » en plein
       milieu alors que le mot tenait. */
    overflow-wrap: break-word;
  }
  .lgj .lgj-familles__grid{ grid-template-columns: 1fr; }
  .lgj .lgj-centre .lgj-btn{ width: 100%; }

  /* Les sections propres à l'accueil, sur téléphone */
  /* Une seule colonne, et la photo REMONTE entre la description et le
     prix : c'est l'ordre de lecture naturel du pouce. Plus bas, le
     prix et « Commander » se suivent sans rien entre eux, juste
     au-dessus de la barre d'onglets. */
  .lgj .lgj-honneur__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "sur"
      "nom"
      "txt"
      "media"
      "prix"
      "btn";
    row-gap: var(--e2);
  }
  .lgj .lgj-honneur__grid::before{ display: none; }
  .lgj .lgj-honneur__media{ aspect-ratio: 3 / 2; margin: var(--e1) 0 var(--e1); }
  .lgj .lgj-honneur__nom{ margin-bottom: 2px; }
  /* Sur une colonne, tout est centré : le surtitre, le nom, la
     description, le prix, et le bouton prend toute la largeur.
     Un bloc centré sur toute la largeur de l'écran se lit d'un coup
     d'œil ; le même bloc ferré à gauche laisse une colonne de vide à
     droite qui déséquilibre la page. */
  .lgj .lgj-honneur__grid{ text-align: center; }
  .lgj .lgj-honneur .lgj-surtitre{ text-align: center; }
  .lgj .lgj-honneur p{ max-width: none; margin-inline: auto; }
  .lgj .lgj-honneur__actions{
    justify-self: stretch;
    flex-direction: column; align-items: stretch; gap: var(--e1);
  }
  .lgj .lgj-honneur__btn{ width: 100%; }
  /* La photo passe sous le texte, en bandeau : sur une colonne, une
     demi-carte de photo à côté du texte n'aurait plus de sens. */
  .lgj .lgj-moments__in{ grid-template-columns: 1fr; }
  .lgj .lgj-moments__media{ min-height: 0; height: 230px; order: 2; }
  .lgj .lgj-moments__actions{ gap: var(--e2); }
  .lgj .lgj-moments__actions .lgj-btn{ width: 100%; }
  /* Même traitement que les autres sections : tout au centre. Les
     pastilles d'occasions se recentrent d'elles-mêmes, sans ligne
     bancale à gauche. */
  .lgj .lgj-moments__texte{ text-align: center; }
  .lgj .lgj-moments__texte .lgj-surtitre{ text-align: center; }
  .lgj .lgj-moments__liste{ justify-content: center; }
  .lgj .lgj-moments__actions{ align-items: center; }

  /* Blog, avis : mêmes règles de centrage. */
  .lgj .lgj-article{ text-align: center; }
  .lgj .lgj-article__pied{ display: flex; justify-content: center; }
  .lgj .lgj-avis__google{ margin-inline: auto; justify-content: center; text-align: center; }

  /* Tuiles produit : titre, prix et gestes alignés sur le même axe
     central que la photo au-dessus. */
  .lgj .lgj-carte{ text-align: center; }
  .lgj .lgj-carte__ligne{ justify-content: center; }
  .lgj .lgj-carte__lien{ justify-self: center; }
  .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; }

  /* Panneau : plus d'encoches, et LA PHOTO REMONTE — elle se place
     entre la fin de la description et les boutons. On lit l'offre, on
     voit ce dont il s'agit, puis « Nous ecrire » arrive. La photo
     reprend des angles droits : elle n'est plus au bas du panneau,
     c'est la rangee des boutons qui en dessine maintenant le pied. */
  .lgj .lgj-panneau{ grid-template-columns: 1fr; margin: 0; }
  .lgj .lgj-panneau__texte{ padding: 40px 30px 30px; }
  .lgj .lgj-panneau__media{
    position: static; width: 100%; height: 240px;
    border-radius: 0;
  }
  .lgj .lgj-panneau__actions{ padding: 30px 30px 34px; margin-top: 0; }
  .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; }
  /* Colonnes empilées : plus de hauteur à partager, la photo reprend
     un format d'image. */
  .lgj .lgj-recit--egal .lgj-recit__media{ aspect-ratio: 3/2; min-height: 0; }

  /* L'accueil : le PORTRAIT DE JEANNINE remonte AVANT le bouton.
     On lit qui elle est, on voit son visage, et le bouton
     « Découvrir Jeannine » arrive juste après — au moment où l'envie
     de cliquer est là. Tout est centré, comme le reste de la page
     sur téléphone. */
  .lgj .lgj-recit--egal .lgj-recit__grid--plat{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "sur"
      "nom"
      "txt"
      "media"
      "btn";
    row-gap: var(--e2);
    text-align: center;
  }
  .lgj .lgj-recit__grid--plat::before,
  .lgj .lgj-recit__grid--plat::after{ display: none; }
  .lgj .lgj-recit__grid--plat .lgj-recit__media{ align-self: auto; }
  .lgj .lgj-recit__grid--plat .lgj-surtitre{ text-align: center; }
  .lgj .lgj-recit__nom{ margin-bottom: 0; }
  .lgj .lgj-recit__btn{ justify-self: stretch; width: 100%; margin-top: 0; }
  .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));
  }
  /* minmax(0, 1fr) et non 1fr : sans cela, l'adresse e-mail — un mot
     de 33 caractères sans espace — élargit sa colonne et écrase
     celle du menu. Les deux colonnes doivent faire la même largeur,
     et c'est à l'e-mail de se couper, pas à la grille de céder. */
  .lgj .lgj-footer__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e3) var(--e1);
    align-items: start;
  }
  .lgj .lgj-footer li a{ overflow-wrap: anywhere; }
  /* ---------- Pied de page centré ----------
     Tout est aligné sur le même axe : le logo, l'adresse, les
     réseaux, les deux colonnes de liens, la newsletter, les mentions.
     Un pied de page dont chaque bloc part d'un bord différent est ce
     qui fait « site bricolé » ; un axe unique fait le contraire. */
  .lgj .lgj-footer{ text-align: center; }
  .lgj .lgj-footer__logo{ grid-column: 1 / -1; }
  .lgj .lgj-footer__logo img{ height: 84px; margin: 0 auto var(--e1); display: block; }
  .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; }
  /* L'adresse électronique est le seul mot de la colonne qui dépasse.
     Un <wbr> après l'arobase lui donne un endroit propre où se
     couper, et un demi-point de moins la fait tenir sur deux lignes
     franches au lieu de trois. */
  .lgj .lgj-footer__grid a[href^="mailto:"]{ font-size: 12px; letter-spacing: -.01em; }
  .lgj .lgj-social{ justify-content: center; margin-top: var(--e2); }

  /* Un filet sépare la carte de visite des deux colonnes de liens :
     sans lui, les deux blocs se touchent et l'œil ne sait plus où
     commence le sommaire. */
  .lgj .lgj-footer__logo{
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--primaire-25);
  }

  /* ---------- Newsletter : l'adresse et le bouton SUR LA MÊME LIGNE ----------
     Un champ qui prend toute la largeur et un bouton relégué en
     dessous, c'est deux gestes ; côte à côte, c'en est un seul.
     La pastille fléchée disparaît ici : sur 350 px, elle mangeait la
     place du champ pour ne rien ajouter au sens du bouton. */
  .lgj .lgj-footer__form{
    margin: var(--e2) auto var(--e1);
    flex-wrap: nowrap; align-items: stretch;
    max-width: 420px;
  }
  .lgj .lgj-footer__form input{ flex: 1 1 auto; min-width: 0; text-align: left; }
  .lgj .lgj-footer__form .lgj-btn{
    flex: 0 0 auto; padding-inline: 18px; white-space: nowrap;
  }
  .lgj .lgj-footer__form .lgj-btn__rond{ display: none; }

  /* La case de consentement reste ferrée à gauche — une phrase
     juridique de quatre lignes centrée est illisible — mais le bloc
     qui la porte est centré comme les autres. */
  .lgj .lgj-footer__rgpd{
    max-width: 420px; margin-inline: auto; text-align: left;
  }
  .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-panneau__texte{ padding: 34px 22px 26px; }
  /* Le <br> du titre est cale pour un ecran large : sur 350 px il
     produisait une ligne orpheline (« ... qui n'est / pas / ... »).
     On le neutralise et on laisse le navigateur equilibrer les deux
     lignes lui-meme. */
  .lgj .lgj-panneau__texte h2 br{ display: none; }
  .lgj .lgj-panneau__texte h2{ text-wrap: balance; }
  .lgj .lgj-panneau__actions{ padding: 26px 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%; }


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

  /* 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); }

  /* Le pied de page reste lisible : les mentions légales passent
     l'une sous l'autre, centrées comme le reste. */
  .lgj .lgj-footer__legal{ flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .lgj .lgj-footer__legal nav{ gap: 6px 16px; justify-content: center; }
}

/* ----------------------------------------------------------------
   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 h3{ font-size: 14px; line-height: 1.22; margin-bottom: 6px; }
  .lgj .lgj-carte__pastille{ font-size: 10px; padding: 4px 9px; right: 7px; top: 7px; }

  /* Le format passe à la trappe : il est sur la fiche produit. Reste
     le prix, seul sur sa ligne, et les deux gestes l'un sous l'autre —
     à deux tuiles par ligne, il n'y a pas la place de les côtoyer. */
  .lgj .lgj-carte__unite,
  .lgj .lgj-carte__texte{ display: none; }
  .lgj .lgj-carte__ligne{ margin-bottom: 10px; }
  .lgj .lgj-carte__prix{ font-size: 17px; }
  .lgj .lgj-carte__actions{ grid-template-columns: 1fr; gap: 6px; }
  .lgj .lgj-carte .lgj-carte__actions .lgj-btn{
    min-height: 38px; padding: 8px 12px; font-size: 12px; border-width: 1.5px;
  }
  .lgj .lgj-mot{ display: none; }
  .lgj .lgj-carte__actions .lgj-btn__rond{ display: none; }
}

@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 .lgj-carte__actions .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: 54px; }
  /* 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{
    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{
    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-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-mosaique::-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; }
}


/* ================================================================
   19. GARDE-FOU DE LARGEUR
   ----------------------------------------------------------------
   Dans une grille comme dans une boîte flexible, un enfant ne peut
   pas, par défaut, devenir plus étroit que son contenu (c'est la
   règle « min-width: auto »). Une seule photo déclarée en 1536 px
   suffit alors à faire gonfler sa colonne, puis toute la grille, et
   la page part en travers sur téléphone : deux tuiles par ligne qui
   débordent de l'écran, une moitié invisible à droite.

   On remet ce minimum à zéro sur les enfants de TOUTES les mises en
   page du site. La règle est simple, et elle vaut partout : c'est la
   colonne qui décide de la largeur du contenu, jamais l'inverse.
   ================================================================ */
.lgj .lgj-shop > *,
.lgj .lgj-grille > *,
.lgj .lgj-grille--4 > *,
.lgj .lgj-plus__piste > *,
.lgj .lgj-articles__grid > *,
.lgj .lgj-recit__grid > *,
.lgj .lgj-honneur__grid > *,
.lgj .lgj-moments__in > *,
.lgj .lgj-footer__grid > *,
.lgj .lgj-contact__grid > *,
.lgj .lgj-atouts__grid > *,
.lgj .lgj-familles__grid > *,
.lgj .lgj-mosaique > *,
.lgj .lgj-best__grid > *,
.lgj .lgj-panneau > *,
.lgj .lgj-post__grid > *,
.lgj .lgj-produit__grid > *,
.lgj .lgj-panier__grid > *,
.lgj .lgj-carte > *,
.lgj .lgj-carte__ligne > *,
.lgj .lgj-shop__tete > *{ min-width: 0; }

/* Et, quoi qu'il arrive, aucune image ni aucun cadre ne dépasse de
   son conteneur. C'est la ceinture, la règle ci-dessus est les
   bretelles : ensemble, plus une seule barre de défilement
   horizontale sur le site. */
.lgj img,
.lgj iframe,
.lgj video{ max-width: 100%; }


/* ================================================================
   20. BOUTIQUE SUR TÉLÉPHONE
   ----------------------------------------------------------------
   Deux corrections, toutes deux de navigation.
   ================================================================ */
@media (max-width: 900px){

  /* ---------- 1. Les filtres : UNE LIGNE, QU'ON BALAIE ----------
     Les catégories sur une ligne, les tranches de prix sur une autre.
     Chaque ligne se parcourt au doigt, de gauche à droite et
     inversement, sans jamais repousser la grille produit vers le bas.

     La ligne DÉBORDE volontairement jusqu'aux deux bords de l'écran
     (marges négatives, retraits compensatoires) : la dernière
     pastille visible est donc coupée net par le bord, et c'est ce
     demi-mot qui dit qu'il y en a d'autres derrière. Une rangée qui
     s'arrête proprement dans la marge, elle, a l'air complète — et
     personne ne pense à la balayer.

     Le calage (scroll-snap) évite de s'arrêter au milieu d'une
     pastille, et le retrait de calage empêche la pastille calée de
     se glisser sous le bord de l'écran. */
  .lgj .lgj-filtres{ position: static; }
  .lgj .lgj-filtres__liste{
    flex-direction: row; flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: -4vw;
    padding: 2px 4vw 8px;
    scroll-padding-left: 4vw;
  }
  .lgj .lgj-filtres__liste::-webkit-scrollbar{ height: 0; }
  .lgj .lgj-filtres__liste > li{ flex: 0 0 auto; scroll-snap-align: start; }
  .lgj .lgj-filtre{
    flex: 0 0 auto; width: auto; min-height: 42px;
    padding: 8px 14px; font-size: 13px;
    white-space: nowrap;
  }
  .lgj .lgj-filtres__groupe{ padding-bottom: var(--e2); }

  /* La colonne de droite ne peut plus imposer sa largeur : c'est
     elle qui prend celle qu'on lui donne. */
  .lgj .lgj-shop{ grid-template-columns: minmax(0, 1fr); }

  /* ---------- 2. La grille produit ----------
     Deux tuiles par ligne, à parts strictement égales. */
  .lgj .lgj-grille{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Le bandeau « 8 produits · Trier par » reste sur une ligne. */
  .lgj .lgj-shop__tete{ flex-wrap: wrap; gap: 10px var(--e2); }
}

@media (max-width: 560px){
  .lgj .lgj-grille{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

  /* Les deux gestes de la tuile prennent toute sa largeur : d'une
     tuile à l'autre, les boutons commencent et finissent sur la
     même verticale. C'est ce qui fait la grille propre. */
  .lgj .lgj-carte__actions{ justify-items: stretch; }
  .lgj .lgj-carte__actions .lgj-btn{ width: 100%; justify-content: center; }
  .lgj .lgj-carte__actions .lgj-carte__lien{ justify-self: center; width: auto; }

  /* Sous 560 px, la gouttiere du contenu passe de 4 % a 5 % de la
     largeur : le debord des lignes de filtres doit suivre, sinon la
     premiere pastille ne s'aligne plus sur le titre au-dessus. */
  .lgj .lgj-filtres__liste{
    margin-inline: -5vw;
    padding: 2px 5vw 8px;
    scroll-padding-left: 5vw;
  }
  .lgj .lgj-filtre{ padding: 8px 12px; font-size: 12.5px; min-height: 40px; }
}


/* ================================================================
   21. CONTACT — LES TROIS GESTES SOUS L'ITINÉRAIRE
   ----------------------------------------------------------------
   WhatsApp, itinéraire, appel. Sur ordinateur, chacun porte son
   pictogramme et son libellé. Sur téléphone, LE PICTOGRAMME SEUL :
   les trois tiennent sur une ligne, à un tiers de largeur chacun,
   au lieu de trois pavés de texte empilés.
   Le libellé reste annoncé aux lecteurs d'écran par l'aria-label
   posé sur chaque lien : rien n'est perdu, seul l'affichage change.
   ================================================================ */
.lgj .lgj-geste{ gap: 10px; }
.lgj .lgj-geste__ico{
  flex: 0 0 auto; width: 19px; height: 19px; display: block;
}
.lgj .lgj-geste__ico svg{ width: 100%; height: 100%; fill: currentColor; display: block; }
/* Les deux pictogrammes dessinés au trait (épingle, combiné) :
   ils se contentent d'un contour, comme le reste des icônes du site. */
.lgj .lgj-geste__ico--trait svg{
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px){
  .lgj .lgj-infos__actions{ flex-wrap: nowrap; gap: 8px; }
  .lgj .lgj-infos__actions .lgj-geste{
    flex: 1 1 0; min-width: 0;
    justify-content: center;
    padding: 0; min-height: 48px;
  }
  .lgj .lgj-geste__mot{ display: none; }
  .lgj .lgj-geste .lgj-btn__rond{ display: none; }
  .lgj .lgj-geste__ico{ width: 21px; height: 21px; }
}


/* ================================================================
   22. FICHE PRODUIT SUR TÉLÉPHONE — LA LIGNE D'ACHAT
   ----------------------------------------------------------------
   Le sélecteur de quantité et « Ajouter au panier » tiennent SUR LA
   MÊME LIGNE. Empilés, ils faisaient deux gestes séparés par un
   blanc, et le bouton d'achat descendait sous la ligne de flottaison.

   Pour que tout entre dans 350 px : le sélecteur se resserre d'un
   cran, et le bouton perd sa pastille fléchée — elle ne disait rien
   que le libellé ne dise déjà, et elle valait 40 px de texte.
   ================================================================ */
@media (max-width: 560px){
  .lgj .lgj-produit__achat{ flex-wrap: nowrap; gap: 10px; }
  .lgj .lgj-qte{ flex: 0 0 auto; padding: 3px; }
  .lgj .lgj-qte button{ width: 36px; height: 36px; font-size: 18px; }
  .lgj .lgj-qte input{ width: 34px; font-size: 15px; }
  .lgj .lgj-produit__achat .lgj-btn{
    flex: 1 1 auto; min-width: 0;
    position: static;
    padding: 6px 14px;
    justify-content: center;
  }
  .lgj .lgj-produit__achat .lgj-btn .lgj-btn__rond{ display: none; }
}


/* ================================================================
   23. BOUTONS PLEINE LARGEUR SUR TABLETTE ET TÉLÉPHONE
   ----------------------------------------------------------------
   Dès le palier 900 px, les appels à l'action prennent toute la
   largeur de leur colonne. Or, dans un bouton pleine largeur, le
   libellé et la pastille fléchée forment un groupe centré ENSEMBLE :
   le texte se retrouve donc décalé vers la gauche de la moitié de la
   pastille, et le bouton paraît mal aligné avec le titre centré
   posé au-dessus.

   On sort la pastille du flux et on la cale à droite ; le libellé se
   centre alors dans TOUT le bouton, à l'aplomb exact du reste de la
   section. Les retraits restent symétriques (52 px de chaque côté)
   pour que rien ne vienne dévier ce centre.

   La ligne d'achat de la fiche produit n'est pas dans la liste : la
   quantité et le bouton s'y partagent une seule ligne, elle a son
   propre réglage à la section 22.
   ================================================================ */
@media (max-width: 900px){
  .lgj .lgj-hero__actions .lgj-btn,
  .lgj .lgj-panneau__actions .lgj-btn,
  .lgj .lgj-moments__actions .lgj-btn,
  .lgj .lgj-centre .lgj-btn,
  .lgj .lgj-honneur__btn,
  .lgj .lgj-recit__btn,
  .lgj .lgj-panier__pied .lgj-btn,
  .lgj .lgj-cta .lgj-btn{
    position: relative;
    padding: 6px 52px;
    text-align: center;
    line-height: 1.25;
  }
  .lgj .lgj-hero__actions .lgj-btn .lgj-btn__rond,
  .lgj .lgj-panneau__actions .lgj-btn .lgj-btn__rond,
  .lgj .lgj-moments__actions .lgj-btn .lgj-btn__rond,
  .lgj .lgj-centre .lgj-btn .lgj-btn__rond,
  .lgj .lgj-honneur__btn .lgj-btn__rond,
  .lgj .lgj-recit__btn .lgj-btn__rond,
  .lgj .lgj-panier__pied .lgj-btn .lgj-btn__rond,
  .lgj .lgj-cta .lgj-btn .lgj-btn__rond{
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%); margin: 0;
  }
  .lgj .lgj-cta .lgj-btn{ width: 100%; }
}