/* CLB Pharmacie — adaptation du prototype (clb.css) aux blocs WordPress et WooCommerce.
   clb.css reste le design de référence ; ce fichier relie ses classes au balisage des blocs natifs. */

/* ---------- titres sans classe (pages de contenu, WooCommerce) ---------- */
:where(h1, h2, h3, h4, h5, h6) { font-stretch: 72%; letter-spacing: -.01em; line-height: 1; text-wrap: balance; }
:where(h1) { font-size: var(--wp--preset--font-size--display-2); }
:where(h2) { font-size: var(--wp--preset--font-size--display-3); }
:where(h3) { font-size: var(--wp--preset--font-size--large); }
:where(h4, h5, h6) { font-size: var(--wp--preset--font-size--medium); }

/* ---------- en-tête : la partie de modèle s'efface pour que .header reste collant sur toute la page ---------- */
.site-head, .wp-site-blocks > header.wp-block-template-part { display: contents; }
.mega__in { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) 1.3fr; }
/* titres de colonnes du méga-menu et du pied de page : même rendu que les h3 du prototype, sans fausser la hiérarchie des titres */
.mega__t { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.mega__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer h2 { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
/* catalogue : le nombre de soins sort du H1 mais reste en exposant à côté */
.plp-title { display: flex; align-items: flex-start; font-size: clamp(52px, 9vw, 148px); line-height: .88; }

/* logo agrandi : la hauteur de l'en-tête (--hh) suit le logo, et les éléments collants se placent dessous */
:root { --hh: 84px; }
@media (max-width: 1080px) { :root { --hh: 68px; } }
@media (max-width: 560px) { :root { --hh: 64px; } }
.header__in { height: var(--hh); }
.header .logo svg { height: calc(var(--hh) - 20px); }
@media (max-width: 560px) { .header .logo svg { height: calc(var(--hh) - 14px); } }
.footer__base .logo svg { height: 64px; }
.plp-bar, .buy { top: calc(var(--hh) + 1px); }
.hero { height: clamp(520px, calc(100svh - var(--hh) - 37px), 860px); }
@media (max-width: 760px) { .hero { height: auto; } }
body.admin-bar .header { top: 32px; }
body.admin-bar .plp-bar, body.admin-bar .buy { top: calc(var(--hh) + 33px); }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } body.admin-bar .plp-bar { top: calc(var(--hh) + 47px); } }
@media (max-width: 600px) { body.admin-bar .header { top: 0; } body.admin-bar .plp-bar { top: calc(var(--hh) + 1px); } }
.drawer__cart { justify-self: center; margin-top: 4px; }

/* panier latéral AJAX : bouton en cours d'ajout, panier en cours de mise à jour, ligne qui vient d'arriver */
.is-busy { cursor: progress; }
button.is-busy, .btn.is-busy { opacity: .6; }
.tile__add.is-busy { transform: none; }
.drawer.is-busy .drawer__list, .drawer.is-busy .drawer__foot { opacity: .5; pointer-events: none; transition: opacity .2s; }
.li.is-new { animation: clb-new 1.6s var(--ease); }
@keyframes clb-new { 0%, 35% { background: var(--fog); box-shadow: -20px 0 0 var(--fog), 20px 0 0 var(--fog); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .li.is-new { animation: none; } }
.tile__add.is-out { background: var(--line); color: var(--ink-2); cursor: default; }
.search form { display: block; }

/* ---------- boutons natifs = .btn du prototype ---------- */
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 0; white-space: nowrap; transition: background .2s, color .2s;
}
.wp-block-button.is-style-line .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.wp-block-button.is-style-line .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.wp-block-button.is-style-white .wp-block-button__link { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.wp-block-button.is-style-white .wp-block-button__link:hover { background: transparent; color: var(--paper); }
.wp-block-button.is-style-ghost-white .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.wp-block-button.is-style-ghost-white .wp-block-button__link:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- textes ---------- */
.bar strong { font-weight: 700; white-space: nowrap; }
p.more a { text-decoration: inherit; }
.tag--static { position: static; align-self: flex-start; }

/* ---------- médias natifs dans les formes CLB ---------- */
.wp-block-video { margin: 0; }
.wp-block-video video { width: 100%; }
.wp-block-image.newb__arch img, .wp-block-image.newb__dot img, .wp-block-image.tip__img img { width: 100%; height: 100%; object-fit: cover; }

/* hero : la vidéo du bloc Vidéo occupe tout le bandeau */
.hero .wp-block-video { position: static; }
/* WordPress ajoute à chaque vidéo un style en ligne « aspect-ratio: largeur / hauteur » (854 / 480) qui écrasait le cadrage
   mobile du thème : sur téléphone, la vidéo devenait un bandeau de 210 px recouvert par le titre et les boutons */
@media (max-width: 760px) {
  .hero video { aspect-ratio: 4 / 5 !important; }
}
.hero .wp-block-buttons.hero__cta .wp-block-button.is-style-line .wp-block-button__link { border-color: rgba(17,17,17,.4); background: rgba(255,255,255,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .wp-block-buttons.hero__cta .wp-block-button.is-style-line .wp-block-button__link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 760px) {
  .hero .wp-block-buttons.hero__cta { flex-wrap: nowrap; gap: 8px; }
  .hero .wp-block-buttons.hero__cta .wp-block-button { flex: 1 1 0; min-width: 0; }
  .hero .wp-block-buttons.hero__cta .wp-block-button__link { width: 100%; min-height: 46px; padding: 0 10px; font-size: 11px; letter-spacing: .04em; white-space: normal; text-align: center; line-height: 1.15; }
  .hero .wp-block-buttons.hero__cta .wp-block-button:not(.is-style-line) .wp-block-button__link { background: #fff; color: var(--ink); border-color: #fff; }
  .hero .wp-block-buttons.hero__cta .wp-block-button.is-style-line .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
}

/* engagements : icônes dessinées en CSS, dans l'ordre des lignes de la liste */
.trust li { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-content: start; }
.trust li::before { content: ""; grid-row: 1 / span 2; width: 30px; height: 30px; background: var(--ink); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.trust strong { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.trust li:nth-child(4n+1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 9h16v13H3zM19 13h5l4 4.5V22h-9z'/%3E%3Ccircle cx='8.5' cy='23.5' r='2.5'/%3E%3Ccircle cx='23.5' cy='23.5' r='2.5'/%3E%3C/svg%3E"); }
.trust li:nth-child(4n+2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3' y='8' width='26' height='16' rx='1'/%3E%3Ccircle cx='16' cy='16' r='3.5'/%3E%3Cpath d='M7 12v8M25 12v8'/%3E%3C/svg%3E"); }
.trust li:nth-child(4n+3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M16 3l11 4v8c0 7-5 12-11 14C10 27 5 22 5 15V7z'/%3E%3Cpath d='M11 16l3.5 3.5L21.5 12'/%3E%3C/svg%3E"); }
.trust li:nth-child(4n+4) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M16 9v7l5 3'/%3E%3C/svg%3E"); }

/* soin signature */
.feature__media.wp-block-video { margin: 0 0 -1px; }
.feature__media video { height: 100%; }
.wp-block-image.feature__media { margin: 0 0 -1px; }
.wp-block-image.feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* bandeau Laboratoire : les trois soins dosés côte à côte, comme une étagère, à droite de la carte */
.lab__shelf { position: absolute; top: 0; bottom: 0; right: var(--gx-r); left: calc(var(--gx) + 500px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); z-index: -1; }
.lab__shelf .wp-block-image { margin: 0; height: 100%; border-left: 1px solid var(--line); }
.lab__shelf .wp-block-image:last-child { border-right: 1px solid var(--line); }
.lab__shelf img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
/* écrans moyens et téléphones : l'étagère au-dessus, la carte en dessous */
@media (max-width: 1100px) {
  .lab { height: auto; }
  .lab__shelf { position: relative; inset: auto; height: clamp(300px, 62vw, 560px); padding-top: clamp(24px, 6vw, 72px); }
  .lab__shelf .wp-block-image:first-child { border-left: 0; }
  .lab__shelf .wp-block-image:last-child { border-right: 0; }
  .lab__card { position: static; max-width: none; padding: 22px var(--gx-r) 32px var(--gx); }
}
.feature__ritual p:not(.lbl) { font-size: 14px; opacity: .92; }

/* nouveauté */
.newb__media .wp-block-image.newb__dot { position: absolute; }

/* conseils : cadrage de chaque image */
.tip:nth-child(1) .tip__img img { object-position: center 40%; }
.tip:nth-child(2) .tip__img img { object-position: center 60%; }
.tip:nth-child(3) .tip__img img { object-position: 20% 70%; }
.tip__links a { text-decoration: inherit; }

/* laboratoire */
.lab .wp-block-video { position: static; }
.lab__card li strong { font-weight: 400; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* où trouver */
.where__list { border-top: 1px solid var(--ink); }
.where__row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.where__row strong { font-size: 14px; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.where__row .wp-block-group p + p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }

/* accordéons (bloc Détails) */
.acc .wp-block-details > :not(summary) { padding: 0 0 18px; font-size: 14px; color: var(--ink-2); }
.faqh .acc .wp-block-details > :not(summary) { font-size: 15px; max-width: 62ch; }
/* dans clb.css, « .acc summary » passe après « .faqh summary » et l'annule : on rétablit l'intention du prototype */
.faqh .acc summary { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---------- catalogue : les filtres sont des liens ---------- */
.tabs a { flex: none; padding: 14px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.tabs a sup { font-size: 9.5px; margin-left: 3px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); font-size: 12.5px; }
.chips a i { width: 8px; height: 8px; background: var(--bar); }
.chips a:hover { border-color: var(--ink); }
.chips a[aria-pressed="true"] { background: var(--bar); border-color: var(--bar); color: #fff; }
.chips a[aria-pressed="true"] i { background: #fff; }
@media (max-width: 760px) { .chips a { flex: none; } }
.pager { display: flex; gap: 14px; justify-content: center; padding-top: 32px; font-size: 13px; }
.pager .current { font-weight: 700; }
.pdp-end { height: clamp(56px, 7vw, 96px); }

/* ---------- pages de contenu ---------- */
.page-head { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 28px; display: grid; gap: 12px; }
.page-body { padding-bottom: clamp(64px, 8vw, 112px); font-size: 16px; }
.page-body > * + * { margin-top: 1em; }
.page-body :where(h2, h3) { margin-top: 1.6em; }
.page-body a:not(.wp-element-button) { text-decoration: underline; text-underline-offset: 3px; }
.wp-block-query.gx { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 96px; }

/* ---------- WooCommerce : notices, panier, commande, compte ---------- */
/* panier et commande : 1100 px de contenu au plus, centrés, pour que les champs restent à une largeur lisible */
.wc-page { width: 100%; max-width: calc(1100px + var(--gx) + var(--gx-r)); margin-inline: auto; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(64px, 8vw, 112px); display: grid; gap: 28px; }
.wc-page .wp-block-post-content > .alignwide, .wc-page .wp-block-post-content > * { max-width: none; }
.checkout-head .header__in { grid-template-columns: 1fr auto 1fr; max-width: calc(1100px + var(--gx) + var(--gx-r)); margin-inline: auto; }
.checkout-head__note { justify-self: end; }
@media (max-width: 1080px) { .checkout-head .header__in { grid-template-columns: 1fr auto; } .checkout-head .logo { grid-column: 1; justify-self: start; } .checkout-head .more { display: none; } }
.wc-block-store-notices, .woocommerce-notices-wrapper { padding-left: var(--gx); padding-right: var(--gx-r); }
.wc-block-components-notice-banner { border-radius: 0; }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-radio-control--highlight-checked, .wc-block-components-radio-control-accordion-option,
.wc-block-components-totals-coupon__input input, .woocommerce form .input-text { border-radius: 0 !important; }
.wc-block-components-button:not(.is-link) { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; }
.woocommerce-cart .wp-block-post-title, .woocommerce-checkout .wp-block-post-title, .woocommerce-account .wp-block-post-title { font-stretch: 72%; }

/* =========================================================
   PAGES : Le laboratoire, Nous contacter
   ========================================================= */
.page-wide { padding-bottom: 0; }

/* en-tête de page : texte à gauche, vidéo dans une arche à droite */
.about-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(56px, 7vw, 96px); }
.about-hero__text { display: grid; gap: 18px; padding-bottom: 8px; }
.about-hero__lead { font-size: clamp(24px, 2.6vw, 38px); font-weight: 650; font-stretch: 72%; text-transform: uppercase; line-height: .95; }
.about-hero__media { aspect-ratio: 3 / 4; background: var(--tile); margin: 0; }
.about-hero__media video, .about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .about-hero { grid-template-columns: 1fr; } .about-hero__media { max-width: 440px; width: 100%; justify-self: center; } }

/* la méthode : quatre colonnes séparées par des filets */
.method__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.method__item { display: grid; gap: 12px; align-content: start; padding: 20px 24px 0 0; }
.method__item + .method__item { padding-left: 24px; border-left: 1px solid var(--line); }
.method__n { font-size: 56px; font-weight: 700; font-stretch: 62%; line-height: .8; font-variant-numeric: tabular-nums; }
.method__item p:not(.method__n) { font-size: 14.5px; color: var(--ink-2); }
.method { padding-bottom: clamp(56px, 7vw, 96px); }
@media (max-width: 960px) { .method__row { grid-template-columns: 1fr 1fr; row-gap: 28px; } .method__item:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .method__row { grid-template-columns: 1fr; } .method__item + .method__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } }

/* lire une boîte : packshot dans une arche, légende numérotée */
.anatomy { margin-top: clamp(64px, 8vw, 112px); background: var(--fog); }
.anatomy__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.wp-block-image.anatomy__img { aspect-ratio: 3 / 4.2; background: var(--tile); width: 100%; max-width: 460px; justify-self: center; }
.wp-block-image.anatomy__img img { width: 100%; height: 100%; object-fit: cover; }
.anatomy__body { display: grid; gap: 18px; }
.anatomy__list { border-top: 1px solid var(--ink); margin-top: 6px; }
.anatomy__item { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.anatomy__item .method__n { font-size: 40px; }
.anatomy__item h3 { font-size: 14px; font-weight: 650; font-stretch: 100%; letter-spacing: .02em; margin-bottom: 4px; }
.anatomy__item p:not(.method__n):not(.bar) { font-size: 14px; color: var(--ink-2); }
.anatomy__item .bar { margin-top: 10px; max-width: 360px; }
.anatomy__item .bar + .bar { margin-top: 2px; }
@media (max-width: 860px) { .anatomy__in { grid-template-columns: 1fr; } .wp-block-image.anatomy__img { max-width: 360px; } }

/* index des actifs */
.actives { border-top: 1px solid var(--ink); }
.actives__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 8px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.actives__name { font-size: clamp(20px, 2vw, 28px); line-height: 1; }
.actives__dose { font-size: 13px; font-weight: 600; font-stretch: 100%; letter-spacing: .04em; color: var(--red); margin-left: 6px; white-space: nowrap; }
.actives__row p { font-size: 14px; color: var(--ink-2); }
.actives__in { font-size: 13px; }
.actives__in a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .actives__row { grid-template-columns: 1fr; } }

/* la gamme par geste */
.gestures { border-top: 1px solid var(--ink); }
.gesture { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.gesture__name { display: block; font-size: clamp(22px, 2.4vw, 34px); font-weight: 650; font-stretch: 72%; text-transform: uppercase; line-height: 1; }
.gesture:hover .gesture__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gesture__desc { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; max-width: 64ch; }
.gesture__dots { display: flex; gap: 4px; margin-top: 10px; }
.gesture__dots i { width: 10px; height: 10px; background: var(--bar); }
@media (max-width: 560px) { .gesture { grid-template-columns: 40px 1fr; } .gesture .more { grid-column: 2; justify-self: start; } }
.page-wide .where__in { padding-top: clamp(56px, 7vw, 96px); }
.page-wide .help { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }

/* contact */
.page-hero { display: grid; gap: 16px; padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(32px, 4vw, 56px); }
.page-hero .copy { max-width: 56ch; font-size: 16px; }
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(64px, 8vw, 112px); }
.contact__aside { display: grid; gap: 16px; }
.contact__box { background: var(--fog); padding: 30px 24px 24px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.contact__t { font-size: 11.5px; font-weight: 600; font-stretch: 100%; letter-spacing: .06em; color: var(--ink); }
.contact__links { list-style: none; padding: 0; display: grid; gap: 8px; }
.contact__links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.cform { display: grid; gap: 18px; position: relative; border-top: 1px solid var(--ink); padding-top: 24px; scroll-margin-top: calc(var(--hh) + 24px); }
body.admin-bar .cform { scroll-margin-top: calc(var(--hh) + 56px); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__f { display: grid; gap: 6px; }
.cform__f label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cform__f label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.cform input:not([type=checkbox]), .cform select, .cform textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.cform textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; }
.cform select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 14px) 21px; background-size: 4px 4px; background-repeat: no-repeat; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cform__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.cform__check input { margin-top: 3px; accent-color: var(--ink); }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__msg { padding: 14px 16px; font-size: 14px; background: var(--fog); border-left: 3px solid var(--ink); }
.cform__msg--ok { border-left-color: #78B407; }
.cform__msg--err { border-left-color: var(--red); background: #FBEDEE; }
@media (max-width: 640px) { .cform__row { grid-template-columns: 1fr; } }

/* fiche soin : bénéfices à gauche (à la place de l'ancienne photo de texture), mode d'emploi à droite */
.howto--one { grid-template-columns: 1fr; }
.howto__ben { background: var(--fog); padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px) var(--gx); display: flex; flex-direction: column; gap: 24px; }
.howto--one .howto__b { padding-left: var(--gx); }
.benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.benefits li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.benefits li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
@media (max-width: 860px) { .howto__ben { padding: 32px var(--gx-r) 32px var(--gx); } .howto__b { padding-left: var(--gx); } }
/* fiche soin : résumé en tête de la description, liste INCI */
.acc__lead { color: var(--ink); }
.acc .inci { font-size: 12.5px; line-height: 1.55; letter-spacing: .01em; }
.acc .inci b { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
/* accueil, nouveauté : plus de rond de texture, l'arche se centre */
.newb__media { padding-right: 0; }

/* =========================================================
   LARGEUR MAXIMALE
   Au-delà de 1440 px de contenu, les marges latérales (--gx) grandissent : textes, grilles et en-tête restent centrés,
   les fonds de couleur et les vidéos restent pleine largeur. Pour changer la largeur, modifier --maxw.
   ========================================================= */
:root { --maxw: 1440px; }
@media (min-width: 900px) {
  :root {
    /* 100 % = largeur du bloc parent, sans la barre de défilement (que 100vw inclurait) */
    --gx: max(32px, env(safe-area-inset-left, 0px), calc((100% - var(--maxw)) / 2));
    --gx-r: max(32px, env(safe-area-inset-right, 0px), calc((100% - var(--maxw)) / 2));
  }
}
/* les blocs bord à bord du prototype (grilles de soins, dosages, fiche soin) s'arrêtent à la même largeur */
.grid, .doses__row, .pdp, .howto { max-width: var(--maxw); margin-inline: auto; }
/* à l'intérieur de ces blocs déjà centrés, les marges reprennent leur valeur normale */
.pdp, .howto { --gx: 32px; --gx-r: 32px; }
@media (max-width: 899px) { .pdp, .howto { --gx: 20px; --gx-r: 20px; } }
/* la carte du laboratoire se place depuis le bas avec une marge fixe, pas avec la marge latérale */
@media (min-width: 761px) { .lab__card { bottom: 32px; } }
/* une fois centrées, les grilles se ferment aussi sur les côtés */
@media (min-width: 1441px) {
  .grid, .pairs .grid, .search .grid { border-left: 1px solid var(--line); }
  .doses__row { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .pdp { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}