/* Landing magnesium — règles extraites de product.css
 *
 * Extrait de product.css par scripts/gbs-split-product-css.mjs — NE PAS éditer à la
 * main sans relancer la garde (`npm run check:gbs-css-split`), qui vérifie que le
 * tronc ne contient plus aucune règle de landing.
 *
 * Cette feuille n'est enfilée que sur la fiche concernée (voir functions.php), APRÈS
 * product.css : l'ordre de cascade d'origine est donc conservé.
 */
/* ==================================================================== */
/* Bespoke Magnesium Glycinate landing (product 8559 + AR twin).        */
/* Ported from the prototype's keto/mag sections; the prototype's plum/  */
/* amber accent is dropped for the theme's single green/gold accent.    */
/* The hero reuses the generic .gbs-* primitives (offer-quantity, buy    */
/* form, dock) — these rules only add the bespoke sections + accents.    */
/* ==================================================================== */
/* Palette bespoke de la fiche, relevee sur `.magnesium-page` du template (« univers mineral
   ambre et prune »). Scopee sur la landing et JAMAIS dans le :root de base.css : elle ne vaut
   que pour cette fiche. Le template redefinit aussi les jetons keto partages, d'ou les cinq
   premieres lignes : sur cette page le « vert » keto est une terre cuite, et le « vert fonce »
   une prune. */
.magnesium-landing{line-height:normal;--keto-green:#a84b2a;--keto-green-dark:#3a2545;--keto-green-soft:#f4e6d7;--keto-orange:#d76b31;--keto-orange-soft:#f3d9bc;--mag-plum:#3a2545;--mag-plum-deep:#27192f;--mag-amber:#d76b31;--mag-amber-soft:#f3d9bc;--mag-sage:#a9b8a0;color:var(--ink);padding-bottom:clamp(24px,4vw,48px)}
.mag-container{width:min(1320px,calc(100% - 48px));margin-inline:auto}
.magnesium-landing h2{letter-spacing:-.025em}
.mag-stars{color:var(--gold);letter-spacing:1.5px;white-space:nowrap}

/* Hero accents (layered onto reused .gbs-product-hero / .gbs-product-summary) */
.magnesium-hero{padding-block:clamp(24px,3.4vw,52px)}
.magnesium-hero .gbs-gallery{top:104px}
/* La colonne resume du template est plus large que celle du generique : le ratio de la grille
   du hero est `1fr / .98fr` a partir de 470px, pas `1.02fr / .98fr` a partir de 420px. Sans
   cette ligne, toutes les largeurs derivees (grille d'offres, reassurance, ligne d'achat)
   divergent de ~6px. */
.magnesium-hero .gbs-product-hero{grid-template-columns:minmax(0,1fr) minmax(470px,.98fr);gap:clamp(32px,4vw,58px)}
/* Le badge d'economie et le badge bestseller vivent dans le conteneur flex generique
   `.gbs-gallery-badges` : le template les empile en absolu au meme point, ou ils se
   chevauchent — on garde son intention (les deux badges) sans son defaut. */
.magnesium-landing .gbs-gallery-badge{background:var(--mag-plum)}
.magnesium-landing .gbs-saving-badge{padding:8px 14px;background:#174f3c;letter-spacing:.035em}
.mag-zoom{position:absolute;z-index:2;inset-block-end:16px;inset-inline-end:16px;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.91);color:var(--ink);font-size:12px;font-weight:800;line-height:normal;pointer-events:none;backdrop-filter:blur(8px)}
.mag-zoom{text-align:center}
.mag-zoom svg{width:15px;height:15px}
.mag-gallery-note{margin:12px 0 0;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
/* Fond de galerie du template : halo blanc radial pose sur un degrade sable -> mauve. Le
   generique est un gris-vert ; c'est l'ecart d'« arriere-plan » le plus visible du hero. */
.magnesium-landing .gbs-gallery-main{text-align:start;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.96) 0 24%,transparent 55%),linear-gradient(145deg,#ede1d2,#d8b789 54%,#a99aaa)}
/* --- Bandeau meta (pastille marque / stock / note) --------------------------------- */
.magnesium-summary .gbs-product-meta{gap:7px;color:var(--ink);font-size:inherit;font-weight:inherit}
.magnesium-summary .gbs-product-meta .gbs-brand{min-height:29px;background:var(--mag-amber-soft);color:var(--mag-plum);line-height:normal}
.magnesium-summary .gbs-product-meta a.gbs-brand:hover{background:var(--mag-amber-soft);filter:brightness(.95)}
/* Le format n'est plus dans la pastille : il se lit comme la meta qu'il est, pas comme une seconde etiquette. */
.magnesium-summary .mag-format{color:var(--muted);font-size:12px;font-weight:400;line-height:normal}
.magnesium-summary .gbs-product-meta .is-stock{display:flex;align-items:center;gap:5px;margin:6px 0 0;color:var(--green);font-size:12px;font-weight:800;line-height:normal}
.magnesium-summary .gbs-product-meta .is-stock:before{margin-inline-end:0}
/* `:not(.gbs-brand)` — sans cette exclusion, la pastille de marque devenue lien heriterait ici
   du gris et du 400 destines au lien d'avis, et perdrait le contraste de sa surface ambre. */
.magnesium-summary .gbs-product-meta a:not(.gbs-brand){min-height:44px;gap:8px;color:var(--muted);font-size:12px;font-weight:400;line-height:normal}
.magnesium-summary .mag-stars{color:#89713d;font-size:13px;font-weight:400;letter-spacing:.08em}

.magnesium-summary .mag-lead{margin:0;max-width:630px;color:var(--muted);font-size:14px;line-height:1.55}

/* --- Benefices : DEUX colonnes sur desktop -----------------------------------------
   Le generique `.gbs-keypoints` porte la variante <=700px du template (1 colonne, 7px) en
   valeur de BASE. Le template la declare hors media query a deux colonnes et ne retombe a une
   qu'a 700px — d'ou la surcharge scopee ici plus la media query a 700px (le generique casse a
   900px). Le marqueur est un <span> peint par clip-path, pas un glyphe « ✦ » : un glyphe
   depend de la fonte disponible, la forme non. */
.magnesium-summary>.gbs-keypoints{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;margin:13px 0 16px;font-size:inherit;font-weight:inherit;line-height:inherit}
.magnesium-summary>.gbs-keypoints li{display:flex;align-items:flex-start;gap:9px;padding-inline-start:0;font-size:14px;font-weight:650;line-height:1.35}
.magnesium-summary>.gbs-keypoints li:before{content:none}
.magnesium-summary .benefit-spark{width:15px;height:15px;flex:0 0 15px;margin-top:1px;background:currentColor;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}

/* --- Prix : une ligne bornee par deux filets, pas une carte remplie ----------------- */
.keto-price-panel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;min-height:62px;margin:9px 0;padding:9px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none}
/* `.mag-price` partage son element avec `.gbs-product-price`, que storefront.js interroge pour
   synchroniser le prix des offres quantite : on neutralise sa typographie ici plutot que de
   retirer la classe du markup. */
.mag-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit}
.mag-price ins,.mag-price>.woocommerce-Price-amount{font-size:32px;font-weight:850;letter-spacing:-.025em;line-height:normal;font-variant-numeric:tabular-nums;text-decoration:none}
.mag-price del{order:2;margin:0;color:#8a837d;font-size:16px;font-weight:650;letter-spacing:normal;line-height:normal;font-variant-numeric:tabular-nums}
.keto-price-panel p{max-width:260px;margin:0;color:#677068;font-size:12px;line-height:1.4;text-align:right}
.keto-price-panel p strong{display:block;color:var(--mag-plum);font-variant-numeric:tabular-nums}

/* --- Offres quantite : le template ne declare aucune interligne sur ces libelles -----
   La surcharge `.magnesium-summary .gbs-quantity-offers{margin:18px 0 14px}` a ete RETIREE le
   2026-08-16 : la regle generique porte desormais la meme valeur, donc le style calcule de cette
   landing est inchange (verifie en mesurant `getComputedStyle(...).margin` sur la page servie,
   pas en le supposant). La garder ferait croire a une specificite magnesium qui n'existe plus. */
.magnesium-summary .gbs-quantity-offer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.magnesium-summary .gbs-quantity-offers__title,.magnesium-summary .gbs-quantity-offer__qty,.magnesium-summary .gbs-quantity-offer-grid button>strong,.magnesium-summary .gbs-quantity-offer__unit,.magnesium-summary .gbs-quantity-offer__off{line-height:normal}
.magnesium-summary .gbs-quantity-saving{min-height:22px;line-height:normal}

/* --- Ligne d'achat : selecteur a trois cellules + CTA prune -------------------------- */
.magnesium-landing .gbs-buy .quantity{display:grid;grid-template-columns:44px 44px 44px;align-items:center;justify-content:normal;overflow:hidden;background:#fff}
.magnesium-landing .gbs-buy .quantity button{display:grid;min-height:50px;place-items:center;border:0;background:transparent;color:var(--ink);font-size:17px;line-height:normal;cursor:pointer}
.magnesium-landing .gbs-buy .quantity button:hover{background:var(--ivory)}
.magnesium-landing .gbs-buy .qty{width:44px;min-height:50px;padding:0;font-size:12px;font-weight:800;line-height:normal;appearance:textfield}
.magnesium-landing .gbs-buy .qty::-webkit-outer-spin-button,.magnesium-landing .gbs-buy .qty::-webkit-inner-spin-button{margin:0;appearance:none}
.magnesium-landing .gbs-buy .gbs-button{background:var(--mag-plum);border-color:var(--mag-plum)}@media (hover:hover) and (pointer:fine){.magnesium-landing .gbs-buy .gbs-button:hover{background:var(--mag-plum-deep);border-color:var(--mag-plum-deep)}}

/* --- Reassurance : icones ambre a 14px (le generique n'en colore aucune) ------------- */
.magnesium-landing .gbs-reassurance{grid-template-columns:repeat(3,1fr)}
.magnesium-landing .gbs-reassurance>span{min-height:58px;color:var(--ink)}
.magnesium-landing .gbs-reassurance svg{width:14px;height:14px;flex:0 0 14px;color:var(--mag-amber)}
.magnesium-landing .gbs-reassurance b{color:var(--muted)}

/* --- WhatsApp : une pilule pleine largeur, pas un lien nu ---------------------------- */
.mag-whatsapp{display:flex;min-height:44px;align-items:center;justify-content:center;gap:9px;margin-top:8px;border:1px solid var(--line);border-radius:999px;color:var(--mag-plum);font-size:12px;font-weight:800;text-decoration:none}
.mag-whatsapp:hover{border-color:var(--green);background:var(--green-soft)}
.mag-whatsapp svg{width:18px;height:18px;color:var(--mag-amber)}@media(max-width:700px){.magnesium-summary>.gbs-keypoints{grid-template-columns:1fr;gap:7px}.magnesium-summary>.gbs-keypoints li{font-size:13px}}




/* --- Sections sous le hero : palette prune / ambre / sauge -------------------------
   Le theme rendait toute la page avec le vert du site ; le template reserve a cette fiche un
   « univers mineral ambre et prune ». Tout est scope sur `.magnesium-landing` : les memes
   composants (`.keto-stat`, `.gbs-trust-strip`) servent d'autres fiches, qui restent vertes. */
.magnesium-landing .gbs-trust-strip{width:min(1320px,calc(100% - 48px));margin:44px auto 0;padding-block:34px;border:1px solid rgba(16,37,28,.1);border-radius:22px;background:var(--ivory);color:var(--ink)}
/* La ligne ci-dessus inverse le fond du composant (vert-noir -> ivoire) mais `color` sur la
   SECTION ne repeint que ce qui HERITE : les enfants qui declarent leur propre couleur pour le
   fond sombre (`.gbs-trust-marks span{color:#e8efe9}`, `svg{color:var(--gold)}`, plus bas dans ce
   fichier) restaient clairs sur clair — mesure du 15/08 sur le staging : 1,05:1 pour les reperes,
   2,43:1 pour les icones, quand le titre, lui, heritait bien et sortait a 16:1. Inverser un fond
   oblige donc a inverser AUSSI chaque couleur enfant explicite. Les valeurs reprennent le template
   (`.customer-trust-*`, L6310-6317) : centrage, vert du site, 12px/650, plancher tactile 44px. */
/* `justify-content:normal` n'est PAS decoratif : le generique pose `space-between` pour son
   flex, et la cascade s'applique propriete par propriete — passer en `grid` ne l'annule donc
   pas. Sur une grille a UNE colonne, `space-between` empeche la piste auto de s'etirer : elle
   se reduit au contenu et se plaque a gauche (mesure du 15/08 : piste de 626px dans un inner
   de 1270, marge gauche 0 / droite 644). Meme piege que les couleurs ci-dessus. */
.magnesium-landing .gbs-trust-inner{display:grid;justify-content:normal;justify-items:center;gap:22px;text-align:center}
.magnesium-landing .gbs-trust-title{color:var(--green-dark);letter-spacing:-.025em}
.magnesium-landing .gbs-trust-marks{gap:10px 28px}
.magnesium-landing .gbs-trust-marks span{min-height:44px;color:#35433d;font-size:12px;font-weight:650}
.magnesium-landing .gbs-trust-marks svg{color:var(--green)}
.magnesium-landing .keto-stat{padding:24px;min-height:190px;border:0}
.magnesium-landing .keto-stat:nth-child(1){background:linear-gradient(145deg,var(--mag-plum-deep),var(--mag-plum));color:#fff}
.magnesium-landing .keto-stat:nth-child(2){background:linear-gradient(145deg,var(--mag-amber-soft),#e8bd8d);color:#182019}
.magnesium-landing .keto-stat:nth-child(3){background:linear-gradient(145deg,#e4eadf,#b8c5ae);color:#182019}
.magnesium-landing .keto-use-shell{grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,78px);align-items:stretch;border:0;border-radius:25px;background:var(--mag-plum-deep)}
.magnesium-landing .keto-use-media{margin:16px 40px;min-height:540px;background:#c8a780}
.magnesium-landing .gbs-routine{background:var(--ivory)}
.magnesium-landing .mag-review-card{padding:24px;border-color:rgba(16,37,28,.14);border-radius:19px}
.magnesium-landing .mag-review-card:nth-child(odd){background:#f7efe5}
.magnesium-landing .mag-review-card:nth-child(even){border-color:rgba(16,37,28,.14);background:var(--mag-plum)}
.magnesium-landing .mag-final-shell{grid-template-columns:minmax(0,1fr) min(350px,29vw);gap:30px;padding:53px 58px;border:0;border-radius:34px;background:linear-gradient(115deg,var(--mag-plum-deep),var(--mag-plum))}
.magnesium-landing .mag-seo{padding-block:80px;background:linear-gradient(var(--paper),#f4f0e8)}

/* --- Responsif : seuils du template (900 / 760 / 700 / 640 / 400), pas ceux du generique
   (1100 / 900 / 480). Les regles ci-dessus vivent HORS media query : par ordre de source elles
   battent les media queries generiques declarees plus haut dans le fichier, donc chaque repli
   doit etre redeclare ici — sans ce bloc, `minmax(380px,...)` et `minmax(470px,...)` debordent
   sous 470px (mesure : colonne de 470px dans un ecran de 375). */
.magnesium-summary h1{font-size:clamp(38px,3.75vw,52px)}@media(max-width:900px){.magnesium-hero .gbs-product-hero{grid-template-columns:1fr;gap:35px}
  .magnesium-landing .gbs-gallery-main{height:430px;min-height:430px;border-radius:22px}
  .magnesium-landing .keto-use-shell{grid-template-columns:1fr;gap:0}
  .magnesium-landing .keto-use-media{min-height:420px}
  .magnesium-landing .mag-final-shell{grid-template-columns:1fr}}@media(max-width:760px){.magnesium-landing .mag-seo{padding-block:54px}}@media(max-width:700px){.magnesium-summary h1{font-size:32px}
  .magnesium-landing .gbs-trust-strip{padding-block:28px}
  .magnesium-landing .gbs-trust-inner{gap:15px}
  .magnesium-landing .gbs-trust-marks{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
  .magnesium-landing .gbs-trust-marks span{justify-content:center;font-size:12px}}@media(max-width:640px){.magnesium-hero .gbs-product-hero{gap:22px}
  .magnesium-landing .gbs-gallery-main{height:clamp(300px,82vw,380px);min-height:clamp(300px,82vw,380px);border-radius:18px}
  .mag-gallery-note{display:none}
  .mag-zoom{inset-inline-end:10px;inset-block-end:9px;width:44px;padding:0;justify-content:center}
  .magnesium-summary .mag-lead{font-size:13px}
  .magnesium-landing .keto-stat{min-height:142px;padding:20px}
  .magnesium-landing .keto-use-media{min-height:300px}
  .magnesium-landing .mag-final-shell{padding:38px 23px}}@media(max-width:760px){.magnesium-summary .gbs-quantity-offer-grid{gap:6px}
  .magnesium-summary .gbs-quantity-offer-grid button{min-height:78px;padding:8px 5px;text-align:center}
  .magnesium-summary .gbs-quantity-offer-grid button>strong{font-size:14px}}@media(max-width:640px){.magnesium-summary{display:flex;flex-direction:column}
  .magnesium-summary>*{order:11}
  .magnesium-summary>.gbs-product-meta{order:1}
  .magnesium-summary>h1{order:2;margin:9px 0 8px}
  .magnesium-summary>.keto-price-panel{order:3}
  .magnesium-summary>.sale-status{order:4}
  .magnesium-summary>.gbs-quantity-offers{order:5}
  .magnesium-summary>form.gbs-buy{order:6}
  .magnesium-summary>.gbs-reassurance{order:7}
  .magnesium-summary>.mag-lead{order:8}
  .magnesium-summary>.gbs-keypoints{order:9}
  .magnesium-summary>.mag-whatsapp{order:10}
  .magnesium-summary .gbs-product-meta{row-gap:6px}
  .magnesium-summary .keto-price-panel{align-items:flex-start}
  .magnesium-summary .keto-price-panel p{max-width:155px;text-align:right}
  .magnesium-summary .mag-price ins{font-size:29px}
  .magnesium-summary .gbs-quantity-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .magnesium-summary .mag-lead{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
  .magnesium-landing .gbs-reassurance>span{min-height:44px;align-items:flex-start;gap:4px;padding:7px 5px}
  .magnesium-landing .gbs-reassurance svg{width:12px;height:12px;flex-basis:12px}
  .magnesium-landing .mag-whatsapp{margin-top:10px}}@media(max-width:480px){.magnesium-landing .gbs-buy{grid-template-columns:134px 1fr}
  .magnesium-landing .gbs-buy .gbs-button{padding-inline:23px;font-size:13px}}@media(max-width:400px){.magnesium-summary>*{order:1}
  .magnesium-summary>.mag-lead{order:2;margin-top:14px}
  .magnesium-summary>.gbs-reassurance{order:3}
  .magnesium-summary>.mag-whatsapp{order:5}
  .magnesium-landing .gbs-reassurance{grid-template-columns:minmax(0,1fr);gap:0}
  .magnesium-landing .gbs-reassurance>span{min-height:0;padding:9px 10px;text-align:left}
  .magnesium-landing .gbs-reassurance>span+span{border-top:1px solid var(--line)}}


/* Shared section heading (snapshot / use / routine / reviews) */
.keto-section-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:22px 40px;align-items:end;margin-bottom:clamp(24px,3vw,34px)}
.keto-section-heading h2{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.03}
.keto-section-heading>p{margin:0;max-width:52ch;color:#686860;font-size:16px;line-height:1.5}
/* Sans texte secondaire, la grille reserverait encore 45 % de la largeur a une colonne vide. */
.keto-section-heading.keto-section-heading--solo{display:block}

/* Snapshot */
.keto-snapshot{padding-block:clamp(44px,5vw,82px)}
.keto-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.keto-stat{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.keto-stat:nth-child(1){border-color:transparent;background:var(--deep);color:#fff}
.keto-stat:nth-child(2){border-color:transparent;background:var(--green);color:#fff}
.keto-stat:nth-child(3){background:var(--stone);color:var(--ink)}
.keto-stat strong{display:block;font-size:clamp(30px,3vw,38px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.keto-stat span{display:block;max-width:250px;margin-top:14px;font-size:13.5px;font-weight:600;line-height:1.45}

/* How to use */
.keto-use{padding-block:clamp(44px,5vw,82px)}
.keto-use-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--deep);color:#fff}
.keto-use-media{position:relative;min-height:460px;overflow:hidden;isolation:isolate;background:#25332c}
.keto-use-media picture{display:block;width:100%;height:100%}
.keto-use-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%}
.keto-use-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,48px)}
.keto-use-copy .gbs-eyebrow{color:var(--gold)}
.keto-use-copy h2{margin:8px 0 20px;font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.keto-steps{display:grid}
.keto-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;border-block-start:1px solid rgba(255,255,255,.14);padding:16px 0}
.keto-step>span{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;color:var(--deep);background:var(--gold);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.keto-step h3{margin:0;font-size:15px}
.keto-step p{margin:4px 0 0;color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.5}
.keto-use-warning{margin:18px 0 0;color:rgba(255,255,255,.68);font-size:12.5px;line-height:1.55}

/* Complementary routine — les dix regles `.mag-routine*` vivaient ici : cartes VERTICALES,
   media en 5/4, sur-etiquette de marque et un lien « Voir la fiche actuelle » en pied. Elles
   habillaient la seule surface du site ou le meme titre (« Compléter seulement selon votre
   besoin. ») ne menait pas au panier — il fallait quitter la landing pour acheter un des trois
   produits. La section rend desormais `gbs_routine_block_html()`, comme les 684 autres fiches,
   donc `.gbs-routine*` (plus haut dans ce fichier). Ne pas les reintroduire : le seul apport de
   la forme verticale etait la sur-etiquette de marque, et la rangee qu'elle occupait porte
   maintenant le prix et le bouton d'ajout. */
.magnesium-landing .gbs-routine{padding-block:clamp(40px,5vw,80px)}

/* Reviews */
.mag-reviews{padding-block:clamp(44px,5vw,82px)}
/* Maconnerie, meme raison que sur la landing Regaine : une grille egalisait la hauteur d'une
   rangee entiere sur sa carte la plus haute. `min-height` saute avec elle, la hauteur venant
   desormais du contenu. */
.mag-review-grid{columns:2;column-gap:16px;max-width:920px}
.mag-review-card{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--white);break-inside:avoid}
/* Carte sombre en alternance, et non plus a la position 2 : la grille etait une composition de
   DEUX cartes ecrites en dur. Depuis qu'elle est alimentee par la base elle en porte autant que
   le produit a d'avis, et un accent fige sur la 2e laissait toutes les suivantes uniformes. */
.mag-review-card:nth-child(even){border-color:transparent;background:var(--deep);color:#fff}
.mag-review-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.mag-review-product{color:#686860;font-size:12px}
.mag-review-card:nth-child(even) .mag-review-product,.mag-review-card:nth-child(even) .mag-review-author span{color:rgba(255,255,255,.7)}
.mag-review-card blockquote{margin:0;font-size:15px;line-height:1.55}
/* Photo ENTIERE, jamais recadree (cf. la note de .regaine-review-photo). */
.mag-review-photo{margin:0;display:flex;justify-content:center}
.mag-review-photo a{display:block;max-width:100%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--stone);cursor:zoom-in;transition:border-color .18s ease}
.mag-review-photo a:hover,.mag-review-photo a:focus-visible{border-color:var(--deep)}
.mag-review-card:nth-child(even) .mag-review-photo a{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
/* `width:auto` : le cadre epouse la photo au lieu de la letterboxer. Une photo portrait
   dans une boite pleine largeur laissait 75 px de bandes de chaque cote. */
.mag-review-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:400px}
.mag-review-author{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.mag-review-author strong{display:block;font-size:14px}
.mag-review-author>div span{color:#686860;font-size:12.5px}
.mag-verified{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px}
.mag-review-card:nth-child(2) .mag-verified{color:var(--gold)}

/* Imported SEO / description + FAQ */
.mag-seo{padding-block:clamp(44px,5vw,82px);background:var(--stone)}
.mag-seo-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.mag-seo-aside{position:sticky;top:104px}
.mag-seo-title{margin:10px 0 14px;font-size:clamp(26px,2.4vw,36px);font-weight:800;line-height:1.06}
.mag-seo-aside>p{color:#686860;font-size:14px;line-height:1.6}

/* Closing CTA */
.mag-final{padding-block:clamp(40px,4.6vw,74px)}
.mag-final-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 40px;align-items:center;padding:clamp(26px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--deep);color:#fff}
.mag-final-shell h2{margin:0 0 8px;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.05}
.mag-final-shell>div>p{margin:0;color:#cdd9d1;font-size:15px;font-variant-numeric:tabular-nums}
.mag-final-add{justify-self:start;min-height:56px;background:var(--white);color:var(--deep);border-color:var(--white)}
.mag-final-add span{font-variant-numeric:tabular-nums}

/* Sticky dock (reuses .gbs-buy-dock) */
.mag-dock .price{font-variant-numeric:tabular-nums}@media(max-width:1000px){.keto-section-heading,.keto-use-shell,.mag-final-shell{grid-template-columns:1fr}
  .keto-use-shell{gap:0}
  .keto-use-media{min-height:340px}
  .mag-seo-grid{grid-template-columns:1fr}
  .mag-seo-aside{position:static;max-width:560px}
  .mag-review-grid{columns:1}
  .mag-review-photo img{max-height:320px}}@media(max-width:640px){.mag-container{width:min(100% - 28px,760px)}
  .keto-stat-grid{grid-template-columns:1fr}
  .keto-price-panel p{text-align:start}
  .mag-final{padding-bottom:100px}}@media(max-width:900px){/* La landing magnesium borne SA pastille a 29 px (`.magnesium-summary .gbs-product-meta
     .gbs-brand`, l. 498) : plus specifique que la ligne au-dessus, elle la battait et rendait le
     seul lien de marque sous le plancher — 29 px mesures a 375 px. Legitime tant que la pastille
     etait un <span> ; plus depuis qu'elle est une cible tactile. */
  .magnesium-summary .gbs-product-meta a.gbs-brand{min-height:44px}}