/* scripts/dupelia/assets/guides-redaction.css — les guides de la rédaction de Dupelia, mis en page comme un magazine (lot 479, MK le 11/11 :
   « il faut que les guides DP dépassent les meilleurs magazines beauté et santé en design et contenu »). Chargé par ces seules pages ;
   reprend les variables de dupelia.css (couleurs, rayons, polices) : aucune couleur écrite en dur. */

/* ——— La couverture ——— */
.gr-couverture { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  margin: 8px 0 28px; padding: clamp(24px, 4vw, 52px); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--rose-pale) 0%, var(--perle) 55%, var(--nacre) 100%); overflow: hidden; }
.gr-surtitre { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--rose-fonce); }
.gr-surtitre span + span { position: relative; padding-left: 14px; color: var(--prune-2); }
.gr-surtitre span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: currentColor; }
.gr-couverture h1 { margin: 0; font: 500 clamp(34px, 5vw, 60px)/1.02 var(--serif); letter-spacing: -.015em; color: var(--prune); text-wrap: balance; }
.gr-chapo { margin: 20px 0 0; max-width: 58ch; font: 400 clamp(17px, 1.6vw, 20px)/1.6 var(--serif); color: var(--prune-2); }
.gr-signature { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--ligne-2); font-size: 13.5px; color: var(--prune-3); }
.gr-sig-nom { font-weight: 700; color: var(--prune); }
.gr-couv-photos { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.gr-couv-p { position: absolute; display: grid; place-items: center; border-radius: var(--r-xl); background: var(--blanc); box-shadow: var(--ombre); overflow: hidden; }
.gr-couv-p img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.gr-couv-p1 { inset: 6% 24% 24% 6%; z-index: 3; }
.gr-couv-p2 { width: 40%; aspect-ratio: 1; right: 2%; top: 4%; z-index: 2; transform: rotate(4deg); }
.gr-couv-p3 { width: 38%; aspect-ratio: 1; right: 6%; bottom: 2%; z-index: 4; transform: rotate(-3deg); }
.gr-couv-p4 { width: 30%; aspect-ratio: 1; left: 2%; bottom: 0; z-index: 1; transform: rotate(-6deg); }

/* ——— La colonne de lecture ——— */
.guide-magazine { display: block; max-width: none; padding-bottom: 32px; }
.guide-magazine > section, .guide-magazine > nav { max-width: 860px; margin-left: auto; margin-right: auto; }
.guide-magazine p { font-size: 17px; line-height: 1.75; color: var(--prune-2); }
.guide-magazine h2 { font: 500 clamp(26px, 3.2vw, 36px)/1.12 var(--serif); color: var(--prune); text-wrap: balance; }
.guide-magazine h3 { margin: 26px 0 10px; font: 700 15px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--prune); }

/* ——— Le sommaire ——— */
.gr-sommaire { margin: 0 auto 36px; padding: 18px 20px; border: 1px solid var(--ligne); border-radius: var(--r-l); background: var(--blanc); }
.gr-sommaire > p { margin: 0 0 10px; font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--prune-3); }
.gr-sommaire ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gr-sommaire a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--nacre); color: var(--prune); font-size: 14px; font-weight: 600; text-decoration: none; }
.gr-sommaire a:hover, .gr-sommaire a:focus-visible { background: var(--rose-pale); color: var(--rose-fonce); }

/* ——— Le choix en bref ——— */
.gr-bref { margin: 0 auto 48px; }
.gr-bref h2 { margin-bottom: 18px; }
.gr-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gr-carte { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.gr-carte:hover { transform: translateY(-3px); border-color: var(--ligne-2); }
.gr-carte-lien { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 10px; flex: 1; text-decoration: none; }
.gr-ruban { align-self: flex-start; margin: 0 -14px 10px; padding: 7px 14px; width: calc(100% + 28px); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; background: var(--rose-pale); color: var(--rose-fonce); }
.gr-carte-notre-choix .gr-ruban { background: var(--prune); color: var(--blanc); }
.gr-carte-le-rival .gr-ruban { background: var(--menthe); color: var(--menthe-encre); }
.gr-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-m); background: var(--nacre); overflow: hidden; }
.gr-photo img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.gr-carte .nom { margin-top: 4px; font: 600 15.5px/1.3 var(--sans); color: var(--prune); }
.gr-carte-accroche { font: italic 400 14px/1.45 var(--serif); color: var(--prune-2); }
.gr-carte-achat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--ligne); }
.gr-prix { font: 600 18px var(--sans); color: var(--prune); white-space: nowrap; }
.gr-mini-bouton { padding: 7px 12px; border-radius: 999px; background: var(--rose); color: var(--blanc); font-size: 13px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; }
.gr-mini-bouton:hover { background: var(--rose-fonce); }
.guide-magazine a.gr-mini-bouton, .guide-magazine a.bouton.rose { color: var(--blanc); text-decoration: none; }
.gr-note-prix { margin-top: 12px !important; font-size: 13.5px !important; color: var(--prune-3) !important; }

/* ——— Chaque choix, en chapitre ——— */
.gr-choix { margin: 64px auto; padding-top: 36px; border-top: 1px solid var(--ligne); scroll-margin-top: 90px; }
.gr-choix-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.gr-numero { font: 400 clamp(46px, 6vw, 72px)/.9 var(--serif); color: var(--rose); }
.gr-sur { margin: 4px 0 6px !important; font: 700 12px var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-fonce) !important; }
.gr-accroche { margin-top: 10px !important; font: italic 400 clamp(18px, 1.8vw, 21px)/1.45 var(--serif) !important; color: var(--prune) !important; }
.gr-produit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; margin: 26px 0; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--r-xl); background: linear-gradient(160deg, var(--rose-pale), var(--nacre)); }
.gr-produit-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre); overflow: hidden; }
.gr-produit-photo img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.gr-produit-achat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gr-config { margin: 0 !important; font-size: 14px !important; color: var(--prune-3) !important; }
.gr-prix-grand { font: 500 clamp(34px, 4.4vw, 46px)/1 var(--serif); color: var(--prune); }
.gr-prix-note { font-size: 13.5px; color: var(--prune-3); }
.gr-face { padding: 5px 12px; border-radius: 999px; background: var(--menthe); color: var(--menthe-encre); font-size: 13.5px; font-weight: 700; }
.gr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.gr-lien { color: var(--prune); font-weight: 600; font-size: 14.5px; text-underline-offset: 3px; }
.gr-recommande { margin-top: 12px; }
.gr-recommande p { margin: 0 0 6px !important; font: 700 11.5px var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--prune-3) !important; }
.gr-recommande ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gr-recommande li { padding: 4px 10px; border-radius: var(--r-s); border: 1px solid var(--ligne-2); background: var(--blanc); font-size: 12.5px; font-weight: 600; color: var(--prune); }
.gr-resume { font: 400 clamp(18px, 1.7vw, 19.5px)/1.7 var(--serif) !important; color: var(--prune) !important; }
.gr-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.gr-points li { position: relative; padding-left: 30px; color: var(--prune-2); font-size: 16.5px; line-height: 1.7; }
.gr-points li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--menthe); }
.gr-points li::after { content: ""; position: absolute; left: 6px; top: calc(.3em + 5px); width: 8px; height: 5px; border-left: 2px solid var(--menthe-encre); border-bottom: 2px solid var(--menthe-encre); transform: rotate(-45deg); }
.gr-defauts li::before { background: var(--peche); }
.gr-defauts li::after { content: "!"; left: 0; top: .3em; width: 20px; height: 20px; border: 0; transform: none; font: 700 13px/20px var(--sans); text-align: center; color: var(--prune); }
.gr-points b { color: var(--prune); font-weight: 700; }
.gr-preuve { margin-top: 20px !important; font-size: 14px !important; color: var(--prune-3) !important; }
.gr-niveau { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; background: var(--rose-pale); color: var(--rose-fonce); }
.gr-niveau-A { background: var(--menthe); color: var(--menthe-encre); }

/* ——— Sections ——— */
.gr-section { margin: 56px auto; }
.gr-section h2 { margin-bottom: 14px; }
.gr-section p + p { margin-top: 12px; }
.gr-pour-qui { padding: clamp(18px, 3vw, 28px); border-radius: var(--r-xl); background: var(--perle); }
.gr-pour-qui p:first-of-type { font: 400 19px/1.6 var(--serif); color: var(--prune); }

/* En un coup d'œil */
.gr-tableau { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--r-l); background: var(--blanc); }
.gr-tableau:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.gr-tableau table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.gr-tableau th, .gr-tableau td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--ligne); color: var(--prune-2); vertical-align: middle; }
.gr-tableau thead th { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--prune-3); background: var(--nacre); }
.gr-tableau tbody tr:last-child > * { border-bottom: 0; }
.gr-tableau tbody th a { display: flex; align-items: center; gap: 10px; color: var(--prune); font-weight: 600; text-decoration: none; }
.gr-tableau tbody th img { flex: none; border-radius: var(--r-s); background: var(--nacre); object-fit: contain; }
.gr-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--prune) !important; white-space: nowrap; }

/* Bien choisir */
.gr-criteres { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gr-critere { position: relative; padding: 20px 20px 18px; border-radius: var(--r-l); background: var(--blanc); border: 1px solid var(--ligne); }
.gr-critere-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rose-pale); color: var(--rose-fonce); font: 700 14px var(--sans); }
.gr-critere h3 { margin: 10px 0 6px; text-transform: none; letter-spacing: 0; font: 600 18px/1.3 var(--serif); }
.gr-critere p { font-size: 15.5px; line-height: 1.65; }
.gr-ecartes p { padding-left: 14px; border-left: 3px solid var(--ligne-2); }

/* Notre méthode */
.gr-methode { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--prune); }
.gr-methode h2, .gr-methode p { color: var(--blanc) !important; }
.gr-methode p { opacity: .85; }
.gr-engagements { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 20px; padding: 0; list-style: none; }
.gr-engagements li { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-l); background: rgb(255 255 255 / .08); }
.gr-engagements b { font: 600 17px/1.3 var(--serif); color: var(--blanc); }
.gr-engagements span { font-size: 14.5px; line-height: 1.55; color: var(--blanc); opacity: .82; }

/* Sources */
.gr-sources ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--prune-2); font-size: 14.5px; line-height: 1.55; }
.gr-sources li span { display: block; color: var(--prune-3); font-size: 13.5px; }
.gr-sources a { color: var(--prune); font-weight: 600; }
.gr-sources .maj { margin-top: 18px !important; font-size: 14px !important; color: var(--prune-3) !important; }

@media (max-width: 760px) {
  .gr-couverture { grid-template-columns: 1fr; }
  .gr-couv-photos { max-width: 320px; order: -1; }
  .gr-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gr-carte-achat { flex-direction: column; align-items: stretch; }
  .gr-mini-bouton { padding: 8px 10px; }
  .gr-produit { grid-template-columns: 1fr; }
  .gr-produit-photo { max-width: 300px; justify-self: center; width: 100%; }
  .gr-choix-tete { grid-template-columns: 1fr; gap: 4px; }
  .gr-engagements { grid-template-columns: 1fr; }
  .gr-sommaire ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .gr-sommaire li { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .gr-carte { transition: none; } .gr-carte:hover { transform: none; } }