/*
 * Oria & Guizmo — thème Diffusée
 * DA « l'atelier joyeux » : crème chaleureux, bleu du logo, moutarde du nœud papillon,
 * coutures pointillées en signature. Aucune dépendance distante (polices auto-hébergées).
 */

/* ═══════════ Polices ═══════════ */
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ═══════════ Jetons ═══════════ */
:root {
    --bleu: #115477;
    --bleu-fonce: #0c3d58;
    --encre: #21333f;
    --moutarde: #ebbd33;
    --moutarde-vif: #f2c94c;

    --creme: #fbf4e8;
    --creme-2: #f5ead6;
    --blanc: #fffdf8;

    --peche: #f0a17e;
    --peche-texte: #9a4b2d;
    --promo: #a34828;
    --texte-secondaire: #52616a;
    --peche-pale: #fbe3d4;
    --sauge: #9dbfa5;
    --sauge-pale: #e2ecdd;
    --jaune-pale: #faeec3;
    --bleu-pale: #d9e7ee;
    --rose-pale: #f9dcd8;

    --ok: #2e7d4f;
    --alerte: #c46a2d;
    --erreur: #b3442e;

    --f-display: "Baloo 2", "Trebuchet MS", sans-serif;
    --f-body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --f-hand: "Caveat", "Bradley Hand", cursive;

    --container: 1200px;
    --narrow: 46rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --radius: 22px;
    --shadow: 0 10px 30px rgb(17 84 119 / 10%);
    --shadow-lg: 0 22px 50px rgb(17 84 119 / 16%);
    --stitch: 2px dashed rgb(17 84 119 / 45%);
    --transition: .3s cubic-bezier(.22, .8, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* `hidden` doit TOUJOURS gagner : n'importe quel `display: flex/grid` posé sur une classe
   écraserait sinon le `display: none` (faible) du navigateur — un élément masqué en JS
   resterait affiché. Bug réel : les points relais au-delà de 3 restaient visibles. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--f-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--encre);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
.ui-icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: currentColor; }
.inline-with-icon { display: inline-flex; align-items: center; gap: .35rem; }
.inline-with-icon .ui-icon,
.btn .ui-icon { width: 1.05em; height: 1.05em; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.14; color: var(--bleu); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.3rem); letter-spacing: -.3px; }
h3 { font-size: 1.15rem; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* `max-width` sans `margin-inline: auto` collait toute la page à gauche. */
.page--narrow, .container.page--narrow { max-width: 52rem; margin-inline: auto; }
.muted { color: var(--texte-secondaire); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--bleu); color: var(--blanc); padding: .8rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.site-main { display: block; }

/* ═══════════ Boutons ═══════════ */
.btn, .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
    padding: .85rem 1.9rem; border-radius: 999px; border: none; cursor: pointer;
    position: relative; text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn--primary, .btn-primary {
    background: var(--moutarde); color: var(--bleu-fonce);
    box-shadow: 0 6px 18px rgb(235 189 51 / 45%);
}
.btn--primary::after, .btn-primary::after {
    content: ""; position: absolute; inset: 4px; border-radius: 999px;
    border: var(--stitch); opacity: .5; pointer-events: none;
}
.btn--primary:hover, .btn-primary:hover { transform: translateY(-2px); background: var(--moutarde-vif); }
.btn--ghost, .btn-secondary, .btn-ghost { background: transparent; color: var(--bleu); border: 2px solid var(--bleu); }
.btn--ghost:hover, .btn-secondary:hover, .btn-ghost:hover { transform: translateY(-2px); background: var(--bleu); color: var(--blanc); }
.btn--light { background: var(--blanc); color: var(--bleu); box-shadow: 0 6px 18px rgb(0 0 0 / 15%); }
.btn--light:hover { transform: translateY(-2px); }
.btn--dark { background: var(--encre); color: var(--blanc); }
.btn--dark:hover { transform: translateY(-2px); background: #101c24; }
.btn--sm { padding: .6rem 1.4rem; font-size: .95rem; }
.btn--full { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.is-home .btn { border-radius: 14px; }
.is-home .btn--primary::after { border-radius: 10px; }

/* ═══════════ Kickers & têtes de section ═══════════ */
.section-kicker {
    font-family: var(--f-hand); font-size: 1.5rem; color: var(--peche-texte);
    font-weight: 600; margin-bottom: .2rem; display: inline-block;
}
.section-kicker--light { color: var(--moutarde); }
.section-head { text-align: center; margin-bottom: 2.4rem; }
.section-head--row { display: flex; align-items: end; justify-content: space-between; text-align: left; gap: 1rem; flex-wrap: wrap; }

/* ═══════════ Bandeau d'annonce ═══════════ */
.topbar { background: var(--bleu); color: var(--creme); text-align: center; padding: .55rem 1rem; }
.topbar__msg { display: flex; justify-content: center; align-items: center; gap: .65rem; font-size: .88rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar__item .ui-icon { width: 1.15rem; height: 1.15rem; }
.topbar strong { color: var(--moutarde-vif); }

/* ═══════════ En-tête ═══════════ */
.scroll-sentinel { position: absolute; top: 10px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.header {
    position: sticky; top: 0; z-index: 50;
    background: rgb(251 244 232 / 94%); backdrop-filter: blur(10px);
    transition: box-shadow var(--transition);
}
.header.is-scrolled { box-shadow: 0 6px 24px rgb(17 84 119 / 12%); }
.header__inner {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 1.4rem; padding: .9rem 0;
}
/* Recherche et icônes groupées à droite. */
.header__tools { display: flex; align-items: center; gap: .5rem; grid-column: 3; }
.header__search { position: relative; display: flex; align-items: center; }
/* Spécificité renforcée : `.header__icon` (display:grid) est déclarée plus bas et gagnerait. */
.header__search .header__search-toggle { display: none; }
.header__search-panel { display: block; }
.header__logo { display: flex; align-items: center; min-height: 44px; }
.header__logo img { height: 34px; width: auto; }
.header__wordmark { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: var(--bleu); }
.header__burger { display: none; }

.search-form {
    display: flex; align-items: center; width: clamp(200px, 22vw, 300px);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%);
    border-radius: 999px; padding: .2rem .3rem .2rem 1.1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-form:focus-within { border-color: var(--bleu); box-shadow: 0 4px 16px rgb(17 84 119 / 12%); }
.search-form input {
    flex: 1; border: none; outline: none; background: transparent;
    /* JAMAIS sous 1rem (16px) : en dessous, iOS zoome la page entière au focus du champ. */
    font-family: var(--f-body); font-size: 1rem; color: var(--encre); min-width: 0;
}
.search-form button {
    border: none; border-radius: 999px; background: var(--moutarde); color: var(--bleu-fonce);
    font-family: var(--f-display); font-weight: 600; font-size: .85rem;
    padding: .5rem 1.1rem; cursor: pointer; white-space: nowrap;
    transition: background var(--transition);
}
.search-form button:hover { background: var(--moutarde-vif); }

.header__icons { display: flex; align-items: center; gap: .4rem; }
.header__icon {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: var(--bleu); transition: background var(--transition);
    /* La loupe est un <button>, les autres icônes des <a> : sans ce reset, elle héritait du
       bouton natif (fond gris, bordure `outset`) et semblait déjà enfoncée/surlignée. */
    border: none; background: none; padding: 0; cursor: pointer;
}
.header__icon:hover { background: var(--creme-2); }
.header__icon svg { width: 21px; height: 21px; }
.cart-count {
    position: absolute; top: 2px; right: 0;
    background: var(--peche); color: var(--blanc);
    font-size: .68rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px;
}
/* `display: grid` l'emporte sur l'attribut `hidden` : sans cette règle, le compteur affiche « 0 »
   le temps que l'hydratation AJAX arrive, puis saute à la vraie valeur. */
.cart-count[hidden], [data-boutique-total][hidden] { display: none; }
.lang-switch { display: flex; gap: .3rem; font-size: .8rem; font-weight: 800; }
.lang-switch a { padding: .2rem .4rem; border-radius: 6px; }
.lang-switch a[aria-current] { background: var(--bleu); color: var(--blanc); }

.mainnav ul {
    display: flex; justify-content: center; gap: clamp(.8rem, 2.4vw, 2rem);
    padding-bottom: .75rem; flex-wrap: wrap;
}
.mainnav li { position: relative; }
.mainnav a { font-weight: 700; font-size: .96rem; color: var(--encre); padding: .25rem 0; position: relative; display: inline-block; }
.mainnav > ul > li > a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 3px;
    background: var(--moutarde); border-radius: 2px; transition: right var(--transition);
}
.mainnav > ul > li > a:hover::after { right: 0; }
.mainnav__panel {
    position: absolute; top: 100%; left: 50%; translate: -50% 0; z-index: 40;
    display: none; flex-direction: column; gap: .3rem; min-width: 200px;
    background: var(--blanc); border-radius: 16px; padding: .8rem; box-shadow: var(--shadow-lg);
}
.mainnav li.has-children:hover .mainnav__panel,
.mainnav li.has-children:focus-within .mainnav__panel { display: flex; }
.mainnav__panel a { font-weight: 600; font-size: .92rem; padding: .35rem .5rem; border-radius: 8px; }
.mainnav__panel a:hover { background: var(--creme-2); }

/* ═══════════ Hero ═══════════ */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero__grid {
    position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero__kicker { margin-bottom: 1.2rem; }
.stitch-badge {
    display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-display); font-weight: 600; font-size: .92rem;
    color: var(--bleu); background: var(--blanc); border: var(--stitch);
    padding: .35rem 1rem; border-radius: 999px;
}
.stitch-badge .ui-icon { width: 1rem; height: 1rem; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .marker { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 .marker::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .5em;
    background: var(--moutarde); z-index: -1; border-radius: 4px; opacity: .85;
}
.hero__sub { max-width: 33rem; font-size: 1.12rem; margin-bottom: 1.8rem; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__visual { justify-self: center; }
.hero__card { background: var(--blanc); padding: 10px; border-radius: 18px; box-shadow: var(--shadow-lg); }
.hero__card img, .hero__card picture { width: min(460px, 80vw); border-radius: 12px; }
.hero__card figcaption {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    font-family: var(--f-hand); font-size: 1.35rem; color: var(--encre); padding: .65rem .5rem .35rem;
}
.hero__card figcaption .ui-icon { width: 1rem; height: 1rem; color: var(--bleu); }

/* ═══════════ Marquee ═══════════ */
.marquee { background: var(--moutarde); overflow: hidden; padding: .8rem 0; }
.marquee__track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: scroll 32s linear infinite; }
.marquee span { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--bleu-fonce); white-space: nowrap; }
.marquee i { color: var(--bleu-fonce); }
.marquee i .ui-icon { width: 1.1rem; height: 1.1rem; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ═══════════ Blocs de thème ═══════════ */
/* Deux origines de l’offre : deux écussons de tissu cousus, jaune atelier et bleu sélection. */
.block-univers { scroll-margin-top: 9rem; }
.univers__intro { max-width: 47rem; margin-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.univers__intro h2 { max-width: 18ch; margin-bottom: .8rem; }
.univers__intro > p:last-child { max-width: 68ch; color: var(--texte-secondaire); }
.univers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.univers__item {
    position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
    background: var(--jaune-pale); border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.1rem);
}
.univers__item::before {
    content: ""; position: absolute; inset: 8px; border-radius: 16px;
    border: var(--stitch); opacity: .35; pointer-events: none;
}
.univers__item:last-child { background: var(--bleu-pale); }
.univers__icon {
    display: grid; place-items: center; width: 52px; height: 52px;
    color: var(--bleu); background: var(--blanc); border-radius: 14px;
}
.univers__icon .ui-icon { width: 27px; height: 27px; }
.univers__label { font-family: var(--f-display); font-size: .84rem; font-weight: 800; color: var(--peche-texte); margin-bottom: .2rem; }
.univers__item h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin-bottom: .55rem; }
.univers__item p:not(.univers__label) { max-width: 44ch; color: var(--texte-secondaire); }
.univers__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--bleu); font-weight: 800; }
.univers__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.univers__link .ui-icon { width: 1rem; height: 1rem; transition: transform var(--transition); }
.univers__link:hover .ui-icon { transform: translateX(3px); }
.univers__item p.univers__note { margin-top: 1rem; font-family: var(--f-display); font-weight: 700; color: var(--bleu); }
#creations, #notre-selection { scroll-margin-top: 9rem; }

/* Rayons : cartes en arche */
.rayons__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.col-card {
    --tint: var(--creme-2);
    background: var(--blanc); border-radius: 999px 999px var(--radius) var(--radius);
    padding: .65rem .65rem 1.3rem; text-align: center;
    box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition);
}
.col-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.col-card figure { background: var(--tint); border-radius: 999px 999px 16px 16px; overflow: hidden; aspect-ratio: 5 / 6; margin-bottom: 1rem; }
.col-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.col-card:hover img { transform: scale(1.07); }
.col-card h3 { font-size: 1.1rem; }
.col-card p { font-family: var(--f-hand); font-size: 1.05rem; color: rgb(33 51 63 / 70%); }
.is-teinte-peche { --tint: var(--peche-pale); }
.is-teinte-lilas { --tint: #e9e4f3; }
.is-teinte-sauge { --tint: var(--sauge-pale); }
.is-teinte-jaune { --tint: var(--jaune-pale); }
.is-teinte-bleu  { --tint: var(--bleu-pale); }
.is-teinte-rose  { --tint: var(--rose-pale); }

/* Étapes */
.block-etapes { position: relative; overflow: hidden; }
.etapes__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.etapes__visual { position: relative; justify-self: center; }
.etapes__visual figure { position: relative; }
.etapes__visual img {
    border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: min(400px, 78vw);
    border: 8px solid rgb(255 253 248 / 20%); box-shadow: var(--shadow-lg);
}
.etapes__visual figcaption {
    position: absolute; bottom: 4%; left: 50%; translate: -50% 0;
    font-family: var(--f-hand); font-size: 1.3rem; font-weight: 600; white-space: nowrap;
    background: var(--moutarde); color: var(--bleu-fonce);
    padding: .3rem 1.2rem; border-radius: 999px; box-shadow: var(--shadow);
}
.etapes__sub { margin: 1rem 0 2rem; opacity: .92; max-width: 34rem; }
.steps { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; }
.steps li > span {
    flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--moutarde); color: var(--bleu-fonce);
    font-family: var(--f-display); font-weight: 800; font-size: 1.1rem;
    border-radius: 50% 50% 50% 12px;
}
.steps li div { font-size: .98rem; line-height: 1.45; }
.steps li strong { font-family: var(--f-display); font-size: 1.05rem; }

/* Avis : cartes cousues sur bande crème pleine largeur, comme la maquette. */
/* Le bloc reste en largeur « container » côté admin : la bande de fond déborde
   du bloc via box-shadow étalé + clip-path (aucun débord vertical). */
.block-avis[class*="is-bg-"] { box-shadow: 0 0 0 100vmax var(--fond-bloc, transparent); clip-path: inset(0 -100vmax); }
.avis__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.review-card {
    position: relative; min-width: 0;
    background: var(--blanc); border-radius: var(--radius);
    padding: 1.7rem 1.7rem 1.8rem; box-shadow: var(--shadow);
}
.review-card::before {
    content: ""; position: absolute; inset: 8px; border-radius: 16px;
    border: var(--stitch); opacity: .35; pointer-events: none;
}
.review-card blockquote { font-size: .98rem; line-height: 1.65; margin-bottom: 1.15rem; }
.review-card figcaption { display: grid; gap: .2rem; font-size: .88rem; color: var(--texte-secondaire); }
.review-card figcaption strong { color: var(--encre); }
.review-card__meta { display: block; }
.review-card figcaption a { width: fit-content; margin-top: .2rem; text-decoration: underline; text-underline-offset: 3px; }
.stars { color: var(--moutarde); margin-bottom: .7rem; }
.stars > span:last-child { display: inline-flex; gap: .18rem; }
.stars .ui-icon { width: 1rem; height: 1rem; fill: currentColor; stroke-width: 1.5; }

/* ═══════════ Blocs de l'éditeur ═══════════ */
.content-flow > .block + .block { margin-top: 0; }
.block { margin-inline: auto; }
.is-width-container { width: min(var(--container), 100% - 2 * var(--gutter)); }
.is-width-narrow { width: min(var(--narrow), 100% - 2 * var(--gutter)); }
.is-width-full { width: 100%; }
.is-pt-none { padding-top: 0; } .is-pb-none { padding-bottom: 0; }
.is-pt-s { padding-top: 1rem; } .is-pb-s { padding-bottom: 1rem; }
.is-pt-m { padding-top: clamp(1.6rem, 3vw, 2.6rem); } .is-pb-m { padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.is-pt-l { padding-top: clamp(2.6rem, 6vw, 4.5rem); } .is-pb-l { padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.is-pt-xl { padding-top: clamp(4rem, 9vw, 7rem); } .is-pb-xl { padding-bottom: clamp(4rem, 9vw, 7rem); }
.is-align-left { text-align: left; } .is-align-center { text-align: center; } .is-align-right { text-align: right; }
.is-bg-creme { --fond-bloc: var(--creme-2); background: var(--creme-2); }
.is-bg-blanc { --fond-bloc: var(--blanc); background: var(--blanc); }
.is-bg-bleu { --fond-bloc: var(--bleu); background: var(--bleu); color: var(--creme); }
.is-bg-bleu h1, .is-bg-bleu h2, .is-bg-bleu h3 { color: var(--blanc); }
.is-bg-bleu a { color: var(--moutarde-vif); }
.is-bg-bleu .btn--light { color: var(--bleu-fonce); }
.is-bg-moutarde { --fond-bloc: var(--moutarde); background: var(--moutarde); }
.is-bg-moutarde h2, .is-bg-moutarde h3 { color: var(--bleu-fonce); }
/* Un bloc pleine largeur avec fond garde son contenu dans la gouttière */
.is-width-full[class*="is-bg-"] > * { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.block-text { white-space: normal; }
.block-image figcaption, .block-video figcaption {
    font-family: var(--f-hand); font-size: 1.2rem; text-align: center; padding-top: .5rem;
}
.block-image img, .block-video iframe { border-radius: var(--radius); }
.block-button { display: flex; gap: .8rem; flex-wrap: wrap; }
.is-align-center .block-button, .block-button.is-align-center { justify-content: center; }

.block-callout {
    background: var(--jaune-pale); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem);
    position: relative;
}
.block-callout::before { content: ""; position: absolute; inset: 8px; border: var(--stitch); border-radius: 16px; opacity: .4; pointer-events: none; }
.callout--accent { background: var(--jaune-pale); }
.callout--brand { background: var(--bleu); color: var(--creme); }
.callout--brand h2, .callout--brand h3 { color: var(--blanc); }
.callout--muted { background: var(--creme-2); }
.callout-eyebrow { font-family: var(--f-hand); font-size: 1.3rem; color: var(--peche-texte); }

.cards-head { text-align: center; margin-bottom: 1.8rem; }
.cards-head .cards-eyebrow, .accordion-head .accordion-eyebrow {
    font-family: var(--f-hand); font-size: 1.4rem; color: var(--peche-texte);
}
.block-cards .cards-grid, .block-cards ul, .block-cards ol {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem;
}
.block-cards .card, .block-cards li {
    background: var(--blanc); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%);
    transition: transform var(--transition), box-shadow var(--transition);
}
.block-cards .card:hover, .block-cards li:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.block-cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.block-cards .card-body, .block-cards li > div { padding: 1.1rem 1.2rem 1.4rem; display: grid; gap: .4rem; }

.block-accordion details {
    border-bottom: 1px dashed rgb(17 84 119 / 30%);
}
.block-accordion details:first-of-type { border-top: 1px dashed rgb(17 84 119 / 30%); }
.block-accordion summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--bleu); padding: 1rem .2rem;
}
.block-accordion summary::-webkit-details-marker { display: none; }
.block-accordion summary::after { content: "+"; font-size: 1.3rem; transition: transform var(--transition); }
.block-accordion details[open] summary::after { transform: rotate(45deg); }
.block-accordion .accordion-body, .block-accordion details > div { padding: 0 .2rem 1.1rem; }

.block-editorial { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.block-editorial.has-media { grid-template-columns: 1fr 1fr; }
.block-editorial.editorial--right .editorial-media { order: 2; }
.block-editorial img { border-radius: var(--radius); box-shadow: var(--shadow); }
.editorial--dark { background: var(--bleu); color: var(--creme); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); }
.editorial--dark h2, .editorial--dark h3 { color: var(--blanc); }

.block-contact { background: var(--blanc); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow); }

/* ═══════════ Prose (rich text) ═══════════ */
.prose, .block-richtext { font-size: 1.06rem; }
.prose > * + *, .block-richtext > * + * { margin-top: 1.1rem; }
.prose h2, .block-richtext h2 { font-size: 1.5rem; margin-top: 2rem; }
.prose h3, .block-richtext h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.prose ul, .block-richtext ul { list-style: none; padding-left: .2rem; }
.prose ul li, .block-richtext ul li { padding-left: 1.5rem; position: relative; margin-bottom: .45rem; }
.prose ul li::before, .block-richtext ul li::before {
    content: ""; position: absolute; left: .2rem; top: .7em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--moutarde);
}
.prose ol, .block-richtext ol { list-style: decimal; padding-left: 1.4rem; }
.prose ol li, .block-richtext ol li { margin-bottom: .45rem; }
.prose a, .block-richtext a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .block-richtext a:hover { color: var(--peche-texte); }
.prose blockquote, .block-richtext blockquote {
    border-block: 1px solid rgb(17 84 119 / 18%); padding-block: .9rem; font-style: italic;
}
.prose img, .block-richtext img { border-radius: var(--radius); }
.lead { font-size: 1.18rem; color: rgb(33 51 63 / 82%); }

/* ═══════════ En-têtes de page & fil d'Ariane ═══════════ */
.page-hero { padding: 1.4rem 0 2.2rem; }
.page-hero--center { text-align: center; max-width: 46rem; margin-inline: auto; }
.page-hero h1 { margin-bottom: .5rem; }
.breadcrumb { font-size: .85rem; color: var(--texte-secondaire); padding: 1.2rem 0 .4rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.breadcrumb a { font-weight: 700; color: var(--bleu); }
.breadcrumb a:hover { color: var(--peche-texte); }
/* Autres rangements d'un produit multi-catégories, sous le fil d'Ariane */
.pdp-aussi { font-size: .85rem; color: var(--texte-secondaire); margin: -.1rem 0 .3rem; }
.pdp-aussi a { font-weight: 700; color: var(--bleu); }
.pdp-aussi a:hover { color: var(--peche-texte); text-decoration: underline; text-underline-offset: 3px; }

.notice-wrap { padding-top: 1.2rem; }
.notice { border-radius: 14px; padding: .9rem 1.2rem; font-weight: 700; }
.notice-ok { background: var(--sauge-pale); color: var(--ok); }
.notice-error { background: var(--rose-pale); color: var(--erreur); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--texte-secondaire); }

/* ═══════════ Réassurance ═══════════ */
/* Marge haute : sans elle, la dernière rangée de contenu (grille du blog, pagination) vient
   coller la bande de réassurance, qui est sur un fond différent. */
.trust { background: var(--blanc); padding: clamp(2.4rem, 5vw, 3.4rem) 0; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.is-home .trust, .is-produit .trust { margin-top: 0; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.trust__item > span { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto .6rem; color: var(--bleu); }
.trust__item > span .ui-icon { width: 30px; height: 30px; }
.trust__item h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.trust__item p { font-size: .86rem; color: var(--texte-secondaire); }

/* ═══════════ Pied de page ═══════════ */
.footer { background: var(--bleu-fonce); color: var(--creme-2); }
.footer__slot { padding-top: 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; }
.footer__logo { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 1rem; }
.footer__wordmark { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: var(--blanc); margin-bottom: .8rem; }
.footer__brand p { font-size: .92rem; max-width: 26rem; }
.footer__socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__socials a {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: rgb(251 244 232 / 12%); font-family: var(--f-display); font-weight: 700;
    transition: background var(--transition), transform var(--transition), color var(--transition);
}
.footer__socials a:hover { background: var(--moutarde); color: var(--bleu-fonce); transform: translateY(-3px); }
.footer__col { display: flex; flex-direction: column; gap: .5rem; }
.footer__col h2 { color: var(--moutarde); font-size: 1rem; margin-bottom: .4rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; font-size: .93rem; transition: translate var(--transition), color var(--transition); }
.footer__col a:hover { opacity: 1; translate: 3px 0; color: var(--moutarde-vif); }
.footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border-top: 1px dashed rgb(251 244 232 / 25%); padding: 1.4rem 0 2rem; font-size: .84rem;
}
.footer__payments { display: flex; gap: .4rem; flex-wrap: wrap; }
.footer__payments span { background: rgb(251 244 232 / 12%); border-radius: 6px; padding: .18rem .6rem; font-size: .72rem; font-weight: 700; }
.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal a:hover { color: var(--moutarde-vif); }

/* ═══════════ Boutique — cartes & grilles ═══════════ */
.boutique-catalogue { padding-bottom: 2rem; }

/* ── Les univers en écussons de l'établi ──────────────────────────────────────
   Accueil du catalogue : deux grands patchs de tissu festonnés (Chien, Chat) et des « bons
   d'atelier » compacts pour les saisons. L'ombre et l'anneau de focus vivent sur le WRAPPER
   non masqué : le mask du feston (et le clip-path des tickets) rognerait les deux. */
.univers { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; margin-bottom: 2.2rem; }
.univers .u-7 { grid-column: span 7; }
.univers .u-5 { grid-column: span 5; }

.ecusson { position: relative; filter: drop-shadow(0 10px 22px rgb(17 84 119 / 13%)); transition: translate var(--transition), filter var(--transition), opacity var(--transition), scale var(--transition); }
.ecusson__tissu {
    position: relative; height: 100%;
    background: var(--tint, var(--creme-2));
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.35rem 1.4rem 1.85rem;
    /* Feston du bas : rangée de bosses, comme un patch découpé aux ciseaux cranteurs.
       Sans support du mask : bord droit à radius 22px, parfaitement présentable. */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
        radial-gradient(circle at 50% 0, #000 9px, #0000 9.8px) bottom / 22px 11px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
        radial-gradient(circle at 50% 0, #000 9px, #0000 9.8px) bottom / 22px 11px repeat-x;
}
.ecusson__tissu::before {
    content: ""; position: absolute; inset: 10px; border-radius: 15px 15px 0 0;
    border: var(--stitch); border-bottom-color: transparent; opacity: .5; pointer-events: none;
}
.ecusson__etiquette {
    position: absolute; top: -1px; left: 2.6rem; z-index: 3;
    font-family: var(--f-hand); font-size: 1.02rem; font-weight: 600; color: var(--bleu);
    background: var(--blanc); border: var(--stitch); padding: .08rem .75rem .06rem;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    border-radius: 3px;
}
.ecusson__tete { position: relative; display: grid; grid-template-columns: 94px 1fr; gap: 1.1rem; align-items: center; }
.u-5 .ecusson__tete { grid-template-columns: 86px 1fr; }

.medaillon { position: relative; width: 94px; }
.u-5 .medaillon { width: 86px; }
.medaillon__cadre {
    aspect-ratio: 4 / 5; border-radius: 999px 999px 16px 16px; overflow: hidden;
    background: var(--blanc); display: grid; place-items: center;
}
.medaillon__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: saturate(.94); transition: scale .5s ease; }
.medaillon--vide .medaillon__cadre::before {
    content: ""; position: absolute; inset: 7px; border-radius: 999px 999px 11px 11px;
    border: var(--stitch); opacity: .4;
}
.medaillon--vide .medaillon__cadre .ui-icon { width: 34px; height: 34px; color: var(--bleu); opacity: .85; }
.medaillon__bouton {
    position: absolute; top: 0; right: -10px; width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--moutarde); color: var(--bleu-fonce);
    font-family: var(--f-display); font-weight: 800; font-size: .95rem;
    border-radius: 50% 50% 50% 10px; box-shadow: 0 3px 8px rgb(17 84 119 / 18%);
}
.medaillon__bouton::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; border: 1.5px dashed rgb(12 61 88 / 45%); }

.ecusson__titre { font-family: var(--f-display); font-weight: 700; font-size: 1.42rem; line-height: 1.15; color: var(--bleu); text-wrap: balance; }
.ecusson__titre a { display: inline-flex; align-items: center; gap: .5rem; }
.ecusson__titre .ui-icon { width: 1.1rem; height: 1.1rem; transition: transform var(--transition); }
/* Le lien du titre s'étend sur la zone en-tête (jamais de <a> imbriqués : les chips sont des
   liens FRÈRES relevés en z-index). */
.ecusson__titre a::after { content: ""; position: absolute; inset: -1.35rem -1.4rem auto; height: 165px; }
.surligne { position: relative; z-index: 0; }
.surligne::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: .05em; height: .38em;
    background: var(--moutarde); border-radius: 3px; z-index: -1; opacity: .85;
    transform: scaleX(.35); transform-origin: left; transition: transform .3s ease;
}
.ecusson__note { font-family: var(--f-hand); font-size: 1.16rem; color: rgb(33 51 63 / 72%); margin-top: 0; }
.ecusson__groupes { display: grid; gap: .55rem; margin-top: .9rem; }

/* ── Chips de sous-catégories, partagées avec les pages catégorie ──
   La distinction maison/sélection est portée par le style AU REPOS : bordure cousue (dashed)
   pour les créations d'Andréa, bordure pleine sur bleu pâle pour la revente. */
.groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.groupe__chips { display: contents; }
.groupe__titre {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--f-display); font-weight: 800; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--bleu); margin-right: .3rem;
}
.groupe__titre .ui-icon { width: .95rem; height: .95rem; }
.groupe__chips a {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; min-height: 44px;
    font-weight: 700; font-size: .84rem; color: var(--bleu);
    padding: .26rem .85rem; border-radius: 999px;
    transition: translate var(--transition), background-color var(--transition), border-color var(--transition);
}
.groupe--maison .groupe__chips a { background: var(--blanc); border: 2px dashed rgb(17 84 119 / 40%); }
.groupe--selection .groupe__chips a { background: var(--bleu-pale); border: 2px solid rgb(17 84 119 / 14%); }
@media (hover: hover) and (pointer: fine) {
    .groupe__chips a { min-height: 34px; padding: .12rem .8rem; font-size: .8rem; }
}
/* Sur une page catégorie : la rangée de chips vit seule sous le hero */
.sous-categories { display: grid; gap: .55rem; justify-content: center; margin-bottom: 1.8rem; }
.sous-categories .groupe { justify-content: center; }

/* ── Les bons d'atelier saisonniers ── */
.ticket { position: relative; filter: drop-shadow(0 4px 14px rgb(17 84 119 / 8%)); transition: translate var(--transition), filter var(--transition); }
.ticket__lien {
    position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: .9rem; align-items: center;
    min-height: 86px; height: 100%;
    background: var(--tint); border-radius: 14px; padding: .8rem 1.15rem;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.ticket__lien::before {
    content: ""; position: absolute; inset: 8px; border-radius: 9px;
    border: var(--stitch); opacity: .4; pointer-events: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.ticket__icone { display: grid; place-items: center; width: 44px; height: 44px; background: var(--blanc); border-radius: 12px; color: var(--bleu); }
.ticket__icone .ui-icon { width: 23px; height: 23px; }
.ticket__titre { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--bleu); line-height: 1.2; }
.ticket__note { font-family: var(--f-hand); font-size: 1.06rem; color: rgb(33 51 63 / 72%); line-height: 1.25; }
.ticket__badge {
    display: inline-flex; align-items: center; gap: .4rem; align-self: center;
    font-family: var(--f-display); font-weight: 600; font-size: .8rem; color: var(--bleu);
    background: var(--blanc); border: var(--stitch); padding: .28rem .85rem; border-radius: 999px;
    white-space: nowrap;
}

/* ── Interactions : souris et clavier en miroir, jamais exigées au doigt ── */
@media (hover: hover) {
    .ecusson:hover, .ecusson:focus-within { translate: 0 -8px; filter: drop-shadow(0 22px 34px rgb(17 84 119 / 19%)); }
    .ecusson:hover .medaillon__cadre img, .ecusson:focus-within .medaillon__cadre img { scale: 1.07; }
    .ecusson:hover .ecusson__titre .ui-icon, .ecusson:focus-within .ecusson__titre .ui-icon { transform: translateX(4px); }
    .groupe__chips a:hover, .groupe__chips a:focus-visible { translate: 0 -3px; background: var(--jaune-pale); border-color: rgb(17 84 119 / 45%); }
    /* La cascade : les pastilles se redressent une à une sous la main */
    .ecusson:hover .groupe__chips a { transition-delay: 0ms; }
    .ecusson:hover .groupe__chips a:nth-child(2) { transition-delay: 40ms; }
    .ecusson:hover .groupe__chips a:nth-child(3) { transition-delay: 80ms; }
    .ecusson:hover .groupe__chips a:nth-child(n+4) { transition-delay: 120ms; }
    /* L'établi s'éclaire là où la main se pose (décoratif : sans :has(), rien ne manque) */
    .univers:has(.ecusson:hover) .ecusson:not(:hover) { opacity: .78; scale: .988; }
    .ticket:hover, .ticket:focus-within { translate: 0 -4px; filter: drop-shadow(0 10px 20px rgb(17 84 119 / 13%)); }
}
.ecusson:hover .surligne::after, .ecusson:focus-within .surligne::after { transform: scaleX(1); }
.ecusson:has(.ecusson__titre a:focus-visible), .ticket:has(a:focus-visible) { outline: 3px solid var(--bleu); outline-offset: 4px; border-radius: var(--radius); }
.ecusson__titre a:focus-visible, .ticket__lien:focus-visible { outline: none; }
/* Le kill-switch global (fin de fichier) neutralise les durées ; on garde ici les CHANGEMENTS
   d'état sans mouvement pour que le retour visuel survive sans animation. */
@media (prefers-reduced-motion: reduce) {
    .ecusson:hover, .ecusson:focus-within, .ticket:hover, .ticket:focus-within, .groupe__chips a:hover { translate: 0; }
    .ecusson:hover .medaillon__cadre img { scale: 1; }
    .surligne::after { transform: scaleX(1); }
}

/* ── Responsive écussons ── */
@media (max-width: 1024px) {
    .univers .u-7, .univers .u-5 { grid-column: span 6; }
    .ecusson__tete, .u-5 .ecusson__tete { grid-template-columns: 86px 1fr; }
    .medaillon, .u-5 .medaillon { width: 86px; }
}
@media (max-width: 820px) {
    .ecusson.u-7, .ecusson.u-5 { grid-column: span 12; }
    .ticket.u-7, .ticket.u-5 { grid-column: span 6; }
}
@media (max-width: 720px) {
    .univers { gap: 1rem; }
    .ecusson__tissu { padding: 2rem .95rem 1.45rem; }
    .ecusson__tete, .u-5 .ecusson__tete { grid-template-columns: 64px 1fr; gap: .8rem; }
    .medaillon, .u-5 .medaillon { width: 64px; }
    .medaillon__cadre { border-radius: 999px 999px 12px 12px; }
    .medaillon--vide .medaillon__cadre .ui-icon { width: 26px; height: 26px; }
    .medaillon__bouton { width: 27px; height: 27px; font-size: .8rem; right: -8px; }
    .ecusson__titre { font-size: 1.26rem; }
    .ecusson__titre a::after { inset: -2rem -.95rem auto; height: 125px; }
    .ecusson__note { font-size: 1rem; }
    .ecusson__etiquette { left: 1rem; font-size: .92rem; }
    .ecusson__groupes { margin-top: .7rem; gap: .55rem; }
    /* Sous 720px les micro-titres reprennent leur ligne : l'inline y rend déchiqueté */
    .groupe { display: block; }
    .groupe__titre { margin: 0 0 .3rem; }
    .groupe__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
    .groupe__chips a { min-height: 44px; padding: .26rem .85rem; font-size: .84rem; }
    .ticket__lien { grid-template-columns: 36px 1fr; gap: .6rem; min-height: 72px; padding: .7rem .8rem .7rem 1rem; }
    .ticket__icone { width: 36px; height: 36px; border-radius: 10px; }
    .ticket__icone .ui-icon { width: 21px; height: 21px; }
    .ticket__titre { font-size: .98rem; }
    .ticket__note { font-size: .95rem; }
    .ticket__badge { display: none; }
    .ticket__lien::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--moutarde); border-radius: 0 4px 4px 0; }
}
@media (max-width: 460px) {
    .ticket__note { display: none; }
    .ticket__lien { min-height: 58px; }
}

.boutique-categories { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.boutique-categories a {
    display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .9rem; background: var(--blanc);
    border: 2px solid rgb(17 84 119 / 16%); border-radius: 999px; padding: .45rem 1.1rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.boutique-categories a:hover, .boutique-categories a.is-active { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

/* Menu de tri à la largeur de son contenu — la règle générique des champs de formulaire le
   passait en `width: 100%`, d'où un menu déroulant démesuré. */
.boutique-barre__tri select, .boutique-filtres select {
    width: auto; min-width: 0; min-height: 44px; flex: 0 0 auto;
    font-family: var(--f-body); font-weight: 700; font-size: .9rem; color: var(--encre);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 16%); border-radius: 999px;
    padding: .45rem 2.2rem .45rem 1rem; cursor: pointer;
}

/* ── Filtres : colonne à gauche (desktop), tiroir plein écran (mobile) ─────────
   Facettes + tri dans UN seul formulaire GET, le menu de tri lui étant rattaché par
   l'attribut `form` depuis l'autre colonne. Les cases sont de vraies cases à cocher,
   masquées visuellement : le libellé qui les entoure fait la pastille, et le focus
   clavier reste dessiné. */
.boutique-listing { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.boutique-listing--pleine { grid-template-columns: minmax(0, 1fr); }
.boutique-resultats { min-width: 0; }

/* La colonne de filtres prend 260 px : la grille passe de quatre à trois cartes pour garder des
   photos lisibles. Les règles ne valent QUE tant que la colonne existe — sous 900 px elle devient
   un tiroir, la grille reprend la largeur pleine et les règles générales. */
@media (min-width: 901px) {
    .boutique-listing:not(.boutique-listing--pleine) .boutique-grille { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .boutique-listing:not(.boutique-listing--pleine) .boutique-grille { grid-template-columns: repeat(2, 1fr); }
}

.boutique-filtres {
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 10%); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; position: sticky; top: 1.5rem;
}
/* En-tête et pied ne servent qu'au tiroir : en colonne, le titre est redondant avec les
   légendes de facettes et le bouton d'application est masqué par le script. */
.boutique-filtres__entete { display: none; }
.boutique-filtres__corps { display: grid; gap: 1.1rem; }
.boutique-facette { border: 0; padding: 0; margin: 0; min-width: 0; }
.boutique-facette legend {
    font-family: var(--f-display); font-weight: 700; font-size: .8rem; color: var(--bleu);
    text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: .45rem;
}
.boutique-facette__valeurs { display: flex; flex-wrap: wrap; gap: .4rem; }
.boutique-puce { position: relative; display: inline-flex; cursor: pointer; }
.boutique-puce input {
    position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.boutique-puce span {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 38px;
    font-weight: 700; font-size: .86rem; color: var(--encre);
    background: var(--creme); border: 2px solid rgb(17 84 119 / 14%); border-radius: 999px;
    padding: .3rem .9rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.boutique-puce small { font-weight: 600; font-size: .74rem; color: var(--texte-secondaire); }
.boutique-puce[hidden] { display: none; }
/* « Voir les N autres » : un lien de service, pas un bouton d'action — il ne doit pas rivaliser
   visuellement avec les valeurs qu'il révèle. */
.boutique-facette__plus {
    margin-top: .5rem; padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--f-body); font-size: .84rem; font-weight: 700; color: var(--bleu);
    text-decoration: underline; text-underline-offset: 3px;
}
.boutique-facette__plus:hover { color: var(--peche-texte); }
.boutique-facette__plus[hidden] { display: none; }
.boutique-puce:hover span { border-color: var(--bleu); }
.boutique-puce input:focus-visible + span { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.boutique-puce input:checked + span { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.boutique-puce input:checked + span small { color: rgb(255 255 255 / 75%); }

.boutique-filtres__pied { margin-top: 1.1rem; display: grid; gap: .6rem; justify-items: start; }
.boutique-filtres__appliquer { width: 100%; justify-content: center; }
.boutique-filtres__reset {
    font-size: .85rem; font-weight: 700; color: var(--peche-texte);
    text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.boutique-filtres__reset:hover { color: var(--bleu); }

/* Barre de résultats : compteur à gauche, tri à droite, bouton « Filtrer » en tête sur mobile. */
.boutique-barre {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .6rem 1rem; margin-bottom: 1.2rem;
}
.boutique-filtres__compte { font-size: .88rem; font-weight: 700; color: var(--texte-secondaire); }
.boutique-barre__tri { display: flex; align-items: center; gap: .6rem; font-size: .9rem; margin-left: auto; }
.boutique-barre__tri label { white-space: nowrap; font-weight: 700; }
.boutique-barre__filtrer { display: none; }
.boutique-barre__pastille {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .3rem;
    margin-left: .1rem; font-size: .74rem; font-weight: 800; line-height: 1;
    background: var(--moutarde); color: var(--bleu-fonce); border-radius: 999px;
}

.boutique-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.2rem; }
.boutique-carte { display: flex; flex-direction: column; }
.boutique-carte-lien { display: block; }
.boutique-carte-image {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: var(--creme-2); aspect-ratio: 1; box-shadow: 0 4px 14px rgb(17 84 119 / 8%);
}
.boutique-carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.boutique-carte:hover .boutique-carte-image img { transform: scale(1.06); }
.boutique-carte-titre { font-size: 1.05rem; margin-top: .9rem; }
.boutique-carte:hover .boutique-carte-titre { color: var(--peche-texte); }
.boutique-carte-accroche { font-size: .84rem; color: var(--texte-secondaire); margin-top: .15rem; }
.boutique-carte-marque { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-secondaire); margin-top: .3rem; }
.boutique-carte-prix { font-weight: 800; color: var(--bleu); margin-top: .35rem; }
.boutique-des { font-weight: 600; font-size: .82rem; color: var(--texte-secondaire); }
.boutique-prix-barre { font-weight: 600; font-size: .85rem; color: var(--texte-secondaire); margin-left: .3rem; }
.boutique-carte.est-epuise .boutique-carte-image { opacity: .55; }
/* `align-self` et pas seulement `inline-block` : la carte est un conteneur flex, qui BLOQUE ses
   enfants — la pastille s'étirait sur toute la largeur au lieu d'épouser son texte. */
.boutique-epuise, .est-epuise .boutique-epuise {
    font-family: var(--f-display); font-weight: 600; font-size: .78rem;
    background: var(--creme-2); color: var(--encre); border-radius: 999px;
    padding: .2rem .7rem; display: inline-block; align-self: flex-start; margin-top: .3rem;
}
.boutique-vide { text-align: center; padding: 3rem 1rem; color: var(--texte-secondaire); }
/* La sortie de secours d'une grille vide (« afficher les épuisés ») doit se voir comme un lien :
   en gris hérité du paragraphe, personne ne cliquait. */
.boutique-vide a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.boutique-vide a:hover { color: var(--peche-texte); }

/* Pagination numérotée : la page courante est un jeton plein, les autres des jetons cliquables,
   les ellipses ne prennent pas la place d'un bouton. La barre garde la même largeur d'une page à
   l'autre — sinon les numéros glissent sous le curseur entre deux clics. */
.boutique-pagination, .pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 2.4rem; }
.boutique-pagination__pages {
    display: flex; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0;
}
.boutique-pagination__pages li { margin: 0; padding: 0; }
.boutique-pagination a, .boutique-pagination__pages span, .pagination a, .pagination span {
    display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .9rem;
    font-family: var(--f-display); font-weight: 700; color: var(--bleu);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 16%); border-radius: 999px;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition);
}
.boutique-pagination a:hover, .pagination a:hover { border-color: var(--bleu); transform: translateY(-2px); }
.boutique-pagination .is-active, .pagination .is-active {
    background: var(--bleu); border-color: var(--bleu); color: var(--blanc);
}
.boutique-pagination__fleche { font-size: 1.35rem; line-height: 1; padding: 0; }
.boutique-pagination__gap {
    background: none; border: 0; min-width: 1.4rem; padding: 0; color: var(--texte-secondaire);
}

/* ── Filtres en tiroir (mobile) ────────────────────────────────────────────────
   Sous 900 px, la colonne se replie derrière un bouton « Filtrer » et s'ouvre en panneau
   plein écran. C'est le geste attendu d'une boutique au doigt : l'écran revient aux
   produits, et la sélection s'applique en une fois plutôt qu'à chaque case. */
@media (max-width: 900px) {
    .boutique-listing { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .boutique-barre__filtrer {
        display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
        font-family: var(--f-body); font-weight: 800; font-size: .9rem; color: var(--bleu);
        background: var(--blanc); border: 2px solid rgb(17 84 119 / 16%); border-radius: 999px;
        padding: .35rem 1rem; cursor: pointer;
    }
    .boutique-barre__filtrer:hover { border-color: var(--bleu); }
    /* « Filtrer » et le tri côte à côte, le compteur en dessous : sur 375 px, le libellé
       « Trier par » volait la place du menu qu'il annonce — le menu affiche déjà son choix. */
    .boutique-barre__tri label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    .boutique-filtres__compte { order: 3; width: 100%; }

    .boutique-filtres {
        position: fixed; inset: 0; z-index: 60; margin: 0; border: 0; border-radius: 0;
        padding: 0; overflow-y: auto; overscroll-behavior: contain;
        display: grid; grid-template-rows: auto 1fr auto;
        /* `visibility` en plus de la translation : un panneau seulement déplacé garde ses
           champs focusables au clavier et lisibles par un lecteur d'écran. */
        visibility: hidden; transform: translateX(-100%);
        transition: transform var(--transition), visibility var(--transition);
    }
    .boutique-filtres.is-ouvert { visibility: visible; transform: none; }
    body.boutique-filtres-ouverts { overflow: hidden; }

    .boutique-filtres__entete {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 1rem var(--gutter); border-bottom: 2px solid rgb(17 84 119 / 10%);
        background: var(--blanc); position: sticky; top: 0; z-index: 1;
    }
    .boutique-filtres__titre { font-family: var(--f-display); font-size: 1.2rem; color: var(--bleu); margin: 0; }
    .boutique-filtres__fermer {
        display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
        background: none; border: 0; border-radius: 50%; color: var(--bleu); cursor: pointer;
    }
    .boutique-filtres__fermer:hover { background: var(--creme-2); }
    .boutique-filtres__corps { padding: 1.2rem var(--gutter); gap: 1.6rem; align-content: start; }
    .boutique-filtres__pied {
        position: sticky; bottom: 0; padding: .9rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom));
        background: var(--blanc); border-top: 2px solid rgb(17 84 119 / 10%);
        justify-items: stretch; margin-top: 0;
    }
    .boutique-filtres__reset { justify-self: center; }
}

/* Badges produit */
.badge {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    font-family: var(--f-display); font-weight: 600; font-size: .74rem;
    padding: .28rem .8rem; border-radius: 999px;
}
.badge--best { background: var(--moutarde); color: var(--bleu-fonce); }
.badge--new { background: var(--sauge); color: #183e29; }
.badge--perso { background: var(--bleu); color: #fff; }
.badge--promo { background: var(--promo); color: #fff; }

/* ═══════════ Fiche produit ═══════════ */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; padding-bottom: 2rem; }
.gallery { position: sticky; top: 130px; }
.gallery__main { border-radius: var(--radius); overflow: hidden; background: var(--creme-2); box-shadow: var(--shadow); aspect-ratio: 1; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* Scène = photo + loupe. La loupe vit hors de [data-gallery-main], que theme.js vide et
   remplit au changement de vignette. */
.gallery__stage { position: relative; }
.gallery__zoom {
    position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
    width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--blanc); color: var(--bleu); box-shadow: 0 4px 14px rgb(17 84 119 / 25%);
    line-height: 1; display: grid; place-items: center;
    transition: transform var(--transition);
}
.gallery__zoom:hover, .gallery__zoom:focus-visible { transform: scale(1.08); }

.gallery-lightbox {
    /* `margin: auto` EXPLICITE : le reset global `* { margin: 0 }` écrase celui du navigateur,
       et la modale se retrouvait collée en haut à gauche au lieu d'être centrée. */
    margin: auto; border: none; padding: 0; background: transparent;
    max-width: min(96vw, 1100px); max-height: 94vh;
}
.gallery-lightbox::backdrop { background: rgb(12 61 88 / 78%); }
.gallery-lightbox__body img {
    display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain;
    border-radius: 18px; background: var(--blanc);
}
.gallery-lightbox__close {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--blanc); box-shadow: 0 4px 14px rgb(12 61 88 / 35%);
    font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
}
.gallery-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--blanc); color: var(--bleu); box-shadow: 0 4px 14px rgb(12 61 88 / 35%);
    display: grid; place-items: center; transition: transform var(--transition);
}
.gallery-lightbox__nav:hover, .gallery-lightbox__nav:focus-visible { transform: translateY(-50%) scale(1.08); }
/* Réceptacle du focus d'ouverture (autofocus) : pas d'anneau sur un conteneur non interactif.
   La croix garde le sien, mais seulement quand on navigue au clavier jusqu'à elle. */
.gallery-lightbox__body:focus, .gallery-lightbox__body:focus-visible { outline: none; }
.gallery-lightbox__nav--prev { left: .6rem; }
.gallery-lightbox__nav--next { right: .6rem; }
.gallery-lightbox__nav[hidden] { display: none; }

/* Message de stock sous le CTA : épuisé, ou tout le stock déjà au panier. */
.stock-note { font-size: .88rem; font-weight: 700; color: var(--alerte); margin-top: .55rem; }
.stock-note[hidden] { display: none; }

/* ═══════════ Essayage virtuel « Testez sur votre animal » ═══════════ */
.essayage-bouton { width: 100%; margin-top: .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.essayage-bouton[hidden] { display: none; }

.essayage-modale {
    margin: auto; border: none; padding: 0; background: var(--blanc);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    width: min(94vw, 34rem); max-height: 92vh; overflow-y: auto;
}
.essayage-modale::backdrop { background: rgb(12 61 88 / 78%); }
.essayage-modale__close {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--creme); font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.essayage-etape { padding: 1.8rem; text-align: center; }
.essayage-etape[hidden] { display: none; }
/* Le focus est posé sur l'ÉTAPE à chaque changement d'écran (voir essayage.js) : pas d'anneau
   dessus — il ne guiderait vers rien — et surtout pas d'anneau parasite sur croix/retour. */
.essayage-etape:focus, .essayage-etape:focus-visible { outline: none; }
.essayage-etape h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.essayage-intro-texte { font-size: .95rem; margin-bottom: 1.1rem; }

.essayage-drop {
    display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer;
    border: 2px dashed rgb(17 84 119 / 40%); border-radius: 18px; padding: 1.8rem 1rem;
    background: var(--creme); transition: border-color var(--transition), background var(--transition);
}
.essayage-drop:hover, .essayage-drop:focus-within, .essayage-drop.est-survolee {
    border-color: var(--bleu); background: var(--bleu-pale);
}
.essayage-drop__icone { display: grid; place-items: center; width: 42px; height: 42px; color: var(--bleu); }
.essayage-drop__icone .ui-icon { width: 32px; height: 32px; }
.essayage-drop small { color: var(--texte-secondaire); font-weight: 400; }

.essayage-erreur { color: var(--erreur); font-weight: 700; font-size: .92rem; margin-top: .9rem; }
.essayage-erreur[hidden] { display: none; }
.essayage-confidentialite { font-size: .78rem; color: var(--texte-secondaire); margin-top: 1rem; }
.essayage-confidentialite a { text-decoration: underline; text-underline-offset: 2px; }

.essayage-apercu, .essayage-resultat {
    display: block; width: 100%; max-height: 46vh; object-fit: contain;
    border-radius: 16px; background: var(--creme-2); margin-bottom: 1rem;
}
.essayage-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
/* Le partage natif est une gestuelle MOBILE : sur desktop, la feuille de partage est pauvre ou
   absente — Télécharger fait le travail. Le bouton n'apparaît qu'en dessous de 820 px. */
@media (min-width: 821px) {
    [data-essayage-partager] { display: none; }
}

.essayage-barre {
    position: relative; height: 14px; border-radius: 999px; background: var(--creme-2);
    margin: 1.3rem 0 .4rem; overflow: visible;
}
.essayage-barre__remplissage {
    height: 100%; width: 100%; border-radius: 999px; transform: scaleX(var(--essayage-progression, 0)); transform-origin: left center;
    background: linear-gradient(90deg, var(--moutarde), var(--moutarde-vif));
    transition: transform 1.2s ease;
}
.essayage-barre__patte {
    position: absolute; top: -12px; left: -12px; width: 24px; height: 24px; color: var(--bleu);
    transition: left 1.2s ease; filter: drop-shadow(0 2px 3px rgb(17 84 119 / 25%));
}
.essayage-barre__patte .ui-icon { width: 24px; height: 24px; }
.essayage-progression-texte { min-height: 1.4em; font-weight: 700; color: var(--bleu); }
.essayage-progression-note { font-size: .82rem; color: var(--texte-secondaire); margin-top: .8rem; }

.essayage-email { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.essayage-email input { max-width: 16rem; padding: .55rem .9rem; border-radius: 999px; }
.essayage-email.est-occupee { opacity: .6; pointer-events: none; }
.essayage-note { font-size: .88rem; font-weight: 700; color: var(--ok); margin-top: .7rem; }
.essayage-note[hidden] { display: none; }
.essayage-rejouer {
    margin-top: 1rem; border: none; background: none; cursor: pointer;
    font-size: .85rem; color: var(--bleu); text-decoration: underline; text-underline-offset: 2px;
}
.essayage-notif { margin-top: 1.1rem; }
.essayage-mention { font-size: .78rem; color: var(--texte-secondaire); margin-top: .7rem; }

/* Liste de suivi (étape « suivis ») : une ligne par essayage — vignettes photo + produit
   superposées, barre de progression individuelle, actions à droite. */
.essayage-suivis { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; text-align: left; }
.essayage-suivi {
    display: flex; align-items: center; gap: .8rem;
    background: var(--creme); border-radius: 14px; padding: .7rem .9rem;
}
.essayage-suivi.est-prete { background: var(--bleu-pale); }
.essayage-suivi.est-erreur { background: rgb(200 60 60 / 8%); }
.essayage-suivi__photos { position: relative; flex: 0 0 64px; width: 64px; height: 56px; }
.essayage-suivi__photo, .essayage-suivi__produit {
    position: absolute; width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
    background: var(--creme-2); border: 2px solid var(--blanc); box-shadow: 0 1px 4px rgb(17 84 119 / 15%);
}
.essayage-suivi__photo { left: 0; top: 0; z-index: 1; }
.essayage-suivi__produit { right: 0; bottom: 0; z-index: 2; }
.essayage-suivi__patte { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.4rem; }
.essayage-suivi__infos { flex: 1; min-width: 0; }
.essayage-suivi__titre { font-weight: 700; font-size: .92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.essayage-suivi__etat { font-size: .8rem; color: var(--texte-secondaire); margin: .15rem 0 .35rem; }
.essayage-suivi.est-erreur .essayage-suivi__etat { color: var(--erreur); font-weight: 700; }
.essayage-suivi.est-prete .essayage-suivi__etat { color: var(--bleu); font-weight: 700; }
.essayage-suivi__piste { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: rgb(17 84 119 / 12%); }
.essayage-suivi__piste[hidden] { display: none; }
.essayage-suivi__remplissage {
    display: block; height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--moutarde), var(--moutarde-vif)); transition: width 1.4s ease;
}
.essayage-suivi__actions { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.essayage-suivi__retirer { border: none; background: none; cursor: pointer; color: var(--texte-secondaire); font-size: .9rem; padding: .2rem .4rem; }
.essayage-retour { display: block; margin: 0 auto .6rem; }

/* Pendant la génération, la croix devient un « réduire » : un tiret plein, comme le bouton de
   réduction d'une fenêtre — fermer ne perd rien, la mini-barre prend le relais. */
.essayage-modale__close-reduire { display: none; width: 16px; height: 3px; border-radius: 2px; background: var(--bleu); }
.essayage-modale.est-en-generation .essayage-modale__close-x { display: none; }
.essayage-modale.est-en-generation .essayage-modale__close-reduire { display: block; }

/* Mini-barre de veille : la « fenêtre réduite » de l'essayage, ancrée en bas d'écran (mobile
   compris). Une vraie barre de progression synchronisée avec la modale ; cliquer rouvre la
   fenêtre, terminée ou non. Sous la barre d'achat mobile (z 60). */
.essayage-veille {
    position: fixed; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom)); z-index: 58;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: .7rem;
    width: min(94vw, 26rem); padding: .65rem 1rem; border-radius: 999px;
    background: var(--bleu); color: var(--blanc);
    font-size: .85rem; font-weight: 700; text-decoration: none;
    box-shadow: var(--shadow-lg); transition: transform var(--transition), background var(--transition);
}
.essayage-veille:hover, .essayage-veille:focus-visible { transform: translate(-50%, -2px); }
/* L'emoji patte est sombre : invisible sur le fond bleu — silhouette BLANCHE via filtre
   (le `color` CSS n'a aucun effet sur un emoji couleur). Naturel sur le fond jaune « prêt ». */
.essayage-veille__icone { font-size: 1rem; line-height: 1; filter: brightness(0) invert(1); }
.essayage-veille.est-prete .essayage-veille__icone { filter: none; }
.essayage-veille__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.essayage-veille__texte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.essayage-veille__piste {
    display: block; height: 6px; border-radius: 999px; overflow: hidden;
    background: rgb(255 255 255 / 22%);
}
.essayage-veille__remplissage {
    display: block; height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--moutarde), var(--moutarde-vif));
    transition: width 3.8s linear;
}
.essayage-veille__ouvrir {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: .3rem .7rem; border-radius: 999px; background: rgb(255 255 255 / 16%);
}
.essayage-veille.est-prete { background: var(--moutarde-vif); color: var(--bleu); }
.essayage-veille.est-prete .essayage-veille__piste { background: rgb(17 84 119 / 18%); }
.essayage-veille.est-prete .essayage-veille__remplissage { background: var(--bleu); transition-duration: .6s; }
.essayage-veille.est-prete .essayage-veille__ouvrir { background: rgb(17 84 119 / 14%); }
@media (max-width: 820px) {
    /* Au-dessus de la barre d'achat fixe des fiches produit. */
    .has-sticky-buy .essayage-veille { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* « Mes essayages » (espace client) : le résultat en vedette, le produit essayé juste dessous —
   vignette, prix, retour direct au panier. */
.essayage-compte-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.1rem; margin-top: 1.2rem;
}
.essayage-compte-carte {
    background: var(--blanc); border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; display: flex; flex-direction: column;
}
/* Bouton-vignette (ouvre la lightbox) : neutralise l'habillage bouton, garde le zoom au survol. */
.essayage-compte-visuel {
    display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in;
}
.essayage-compte-image { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--creme-2); }
.essayage-compte-attente {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; background: var(--creme-2); color: var(--bleu); font-weight: 700; padding: 1rem;
    text-align: center;
}
.essayage-compte-attente__patte { font-size: 1.5rem; }
.essayage-compte-attente__barre {
    display: block; width: 60%; height: 6px; border-radius: 999px; overflow: hidden;
    background: rgb(17 84 119 / 14%); position: relative;
}
.essayage-compte-attente__barre::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 999px;
    background: linear-gradient(90deg, var(--moutarde), var(--moutarde-vif));
    animation: essayage-attente 1.6s ease-in-out infinite;
}
@keyframes essayage-attente {
    from { transform: translateX(-100%); }
    to { transform: translateX(280%); }
}
.essayage-compte-attente--expire { color: var(--texte-secondaire); }
.essayage-compte-attente--expire small { font-weight: 400; font-size: .78rem; }
.essayage-compte-infos { padding: .95rem; display: flex; flex-direction: column; gap: .7rem; }
.essayage-compte-produit { display: flex; align-items: center; gap: .7rem; }
.essayage-compte-produit__vignette {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
    background: var(--creme-2);
}
.essayage-compte-produit__vignette img { width: 100%; height: 100%; object-fit: cover; }
.essayage-compte-produit__titre { font-weight: 700; line-height: 1.25; }
.essayage-compte-produit__prix { font-family: var(--f-display); font-weight: 800; color: var(--bleu); }
.essayage-compte-date { font-size: .78rem; color: var(--texte-secondaire); margin-top: .1rem; }
.essayage-compte-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.essayage-compte-vide {
    text-align: center; background: var(--blanc); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 2.2rem 1.4rem; margin-top: 1.2rem;
}
.essayage-compte-vide__patte { font-size: 2rem; margin-bottom: .4rem; }
.essayage-compte-vide h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.essayage-compte-vide p { max-width: 34rem; margin: 0 auto .6rem; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: .7rem; }
.gallery__thumbs button {
    border: 2px solid transparent; border-radius: 14px; overflow: hidden; padding: 0;
    cursor: pointer; background: var(--creme-2); aspect-ratio: 1; transition: border-color var(--transition), transform var(--transition);
}
.gallery__thumbs button:hover { transform: translateY(-2px); }
.gallery__thumbs button.is-active { border-color: var(--bleu); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pdp__badges .badge { position: static; }
/* Marque : petite ligne discrète au-dessus du titre, comme sur les fiches de mode. */
.pdp__marque { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-secondaire); margin-bottom: .2rem; }
.pdp h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .4rem; }
.pdp__price { display: flex; align-items: baseline; gap: .7rem; margin: .8rem 0 1rem; }
.pdp__price .prix { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; color: var(--bleu); }
.pdp__price .tax { font-size: .8rem; color: var(--texte-secondaire); }
.pdp__excerpt { margin-bottom: 1.2rem; }

.stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: var(--ok); margin-bottom: 1.2rem; }
.stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stock--low { color: var(--alerte); }
.stock--out { color: var(--erreur); }
/* Vente suspendue : orange comme une pause, pas rouge comme une rupture. Le produit n'a rien
   perdu, c'est le marchand qui l'a mis de côté — et il revient. */
.stock--paused { color: var(--alerte); }
.pdp__offsale-note { font-size: .9rem; color: var(--texte-secondaire); margin: -.7rem 0 1.3rem; max-width: 46ch; }

.opt { margin-bottom: 1.3rem; }
.opt__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 800; font-size: .92rem; margin-bottom: .55rem; }
.opt__label a, .opt__label span { display: inline-flex; align-items: center; gap: .35rem; }
.opt__label a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.opt select {
    width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--encre);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 14px;
    padding: .8rem 1rem; cursor: pointer;
}

.qty { display: inline-flex; align-items: center; background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 999px; }
.qty button { width: 44px; height: 44px; border: none; background: none; cursor: pointer; font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; color: var(--bleu); border-radius: 50%; }
.qty button:hover { background: var(--creme-2); }
.qty input { width: 40px; text-align: center; border: none; background: none; outline: none; font-family: var(--f-body); font-weight: 800; font-size: 1rem; color: var(--encre); }

.buy-row { display: flex; gap: .8rem; align-items: stretch; margin-bottom: .8rem; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 200px; font-size: 1.1rem; padding: 1rem 1.5rem; }

/* Personnalisation (médailles gravées, bandanas brodés…) — même langage que .opt select. */
.boutique-perso { background: var(--creme-2); border-radius: 14px; padding: .9rem 1rem; }
.boutique-perso__champ { margin: 0 0 .7rem; }
.boutique-perso__champ:last-of-type { margin-bottom: 0; }
.boutique-perso__champ label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.boutique-perso__champ input {
    width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--encre);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 14px;
    padding: .8rem 1rem;
}
.boutique-perso__champ input:focus-visible { outline: 3px solid var(--jaune); outline-offset: 1px; }
.boutique-perso__note { font-size: .88rem; font-weight: 700; color: var(--bleu); margin: .6rem 0 0; }
.boutique-perso__hint { font-size: .85rem; color: rgb(44 39 64 / 72%); margin: 0 0 .7rem; }
.boutique-perso-recap { list-style: none; padding: 0; margin: .2rem 0 0; }
.boutique-perso-recap li { font-size: .88rem; }

.delivery-note {
    display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem;
    background: var(--sauge-pale); border-radius: 14px; padding: .8rem 1rem; margin: 1rem 0 1.3rem;
}
.delivery-note > .ui-icon { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--ok); }
.delivery-note strong { color: var(--ok); }

.pdp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.6rem; }
.pdp-trust li {
    display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
    font-size: .78rem; font-weight: 700; color: rgb(33 51 63 / 75%);
    background: var(--blanc); border: var(--stitch); border-radius: 14px; padding: .7rem .4rem;
}
.pdp-trust span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--bleu); }
.pdp-trust span .ui-icon { width: 1.3rem; height: 1.3rem; }
.heading-with-icon { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.heading-with-icon .ui-icon { width: 1.15em; height: 1.15em; }
.summary__note--icon { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.summary__note--icon .ui-icon { width: 1rem; height: 1rem; }

/* Description : toujours dépliée. Elle était dans un <details> repliable — un pli de plus à ouvrir
   pour lire l'argumentaire du produit, sans rien à gagner en échange. */
.pdp-description { border-top: 1px dashed rgb(17 84 119 / 30%); margin-top: 1.4rem; padding-top: 1.1rem; }
.pdp-description h2 {
    font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--bleu);
    margin-bottom: .6rem;
}
.pdp-description .prose { font-size: .95rem; }

/* Texte SEO de bas de catégorie : c'est du contenu destiné à être LU, pas une mention légale
   qu'on planque. Il tient TOUTE la largeur de la grille de produits — bridé à 70ch et centré, il
   formait une colonne étroite désalignée du reste de la page. */
.boutique-seo-texte {
    margin: 3rem 0 0; padding-top: 2rem;
    border-top: 1px dashed rgb(17 84 119 / 30%); font-size: .95rem;
}
.boutique-seo-texte h2 { font-family: var(--f-display); font-size: 1.3rem; color: var(--bleu); margin: 1.6rem 0 .6rem; }
.boutique-seo-texte h3 { font-family: var(--f-display); font-size: 1.08rem; color: var(--bleu); margin: 1.2rem 0 .4rem; }
.boutique-seo-texte h2:first-child, .boutique-seo-texte h3:first-child { margin-top: 0; }
.boutique-seo-texte p { margin-bottom: .8rem; }
.boutique-seo-texte ul, .boutique-seo-texte ol { margin: 0 0 .8rem 1.2rem; }
.boutique-seo-texte li { margin-bottom: .3rem; }
.boutique-seo-texte a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

/* Produits similaires : même grille que le catalogue, séparée de la fiche par un filet. */
.pdp-similaires { margin-top: 3.2rem; border-top: 1px dashed rgb(17 84 119 / 30%); padding-top: 2rem; }
.pdp-similaires h2 {
    font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--bleu);
    text-align: center; margin-bottom: 1.6rem;
}

/* Guide des tailles : contenu libre saisi dans l'admin, donc largeur de lecture bornée et
   tableaux de mensurations lisibles jusque sur un téléphone (d'où le défilement horizontal). */
.opt__guide {
    border: none; background: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--bleu); font: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
}
.guide-tailles {
    margin: auto; border: none; padding: 1.6rem; background: var(--blanc);
    border-radius: 20px; max-width: min(94vw, 640px); max-height: 88vh; overflow-y: auto;
    box-shadow: 0 18px 50px rgb(12 61 88 / 30%);
}
.guide-tailles::backdrop { background: rgb(12 61 88 / 78%); }
.guide-tailles h2 {
    display: flex; align-items: center; gap: .45rem; padding-right: 2.6rem;
    font-family: var(--f-display); font-size: 1.25rem; color: var(--bleu); margin-bottom: 1rem;
}
.guide-tailles__close {
    position: absolute; top: .8rem; right: .8rem;
    width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
    background: var(--creme-2); color: var(--bleu); display: grid; place-items: center;
}
.guide-tailles__corps { font-size: .95rem; overflow-x: auto; }
.guide-tailles__corps table { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.guide-tailles__corps th, .guide-tailles__corps td {
    border: 1px solid rgb(17 84 119 / 18%); padding: .5rem .6rem; text-align: left;
}
.guide-tailles__corps th { background: var(--creme-2); font-weight: 700; }

/* Barre d'achat sticky : réservée au MOBILE. Sur desktop le CTA reste visible dans la colonne
   d'achat — la barre pleine largeur qui surgissait au scroll était un bug, pas une feature.
   Son activation (`.is-visible`) ne vit donc QUE dans la media query ≤ 820px. */
.sticky-buy {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--blanc); box-shadow: 0 -6px 24px rgb(17 84 119 / 15%);
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    gap: .8rem; align-items: center;
}
.sticky-buy .prix { font-family: var(--f-display); font-weight: 800; color: var(--bleu); }
.sticky-buy .btn { flex: 1; padding: .8rem; }

/* ═══════════ Panier ═══════════ */
.shipbar { background: var(--blanc); border: var(--stitch); border-radius: var(--radius); padding: 1rem 1.3rem; margin-bottom: 1.6rem; }
.shipbar p { font-size: .93rem; font-weight: 700; margin-bottom: .55rem; }
.shipbar strong { color: var(--bleu); }
.shipbar .track { height: 10px; background: var(--creme-2); border-radius: 6px; overflow: hidden; }
.shipbar .fill { height: 100%; background: linear-gradient(90deg, var(--sauge), #7fae8a); border-radius: 6px; }

.cart-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.cart-item {
    display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem; align-items: center;
    background: var(--blanc); border-radius: var(--radius); padding: 1rem;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: .9rem;
}
.cart-item img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.cart-item h2, .cart-item h3 { font-size: 1.02rem; }
.cart-item .meta { font-size: .84rem; color: var(--texte-secondaire); margin: .15rem 0 .5rem; }
.cart-item__side { display: flex; flex-direction: column; align-items: end; gap: .5rem; }
.cart-item .remove { min-height: 44px; font-size: .8rem; color: var(--texte-secondaire); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: var(--f-body); }
.cart-item .remove:hover { color: var(--erreur); }

/* Vider le panier : discret et à droite, sous la liste. Il ne rivalise avec aucune action de la
   colonne de droite — c'est une sortie de secours, pas une étape du parcours. */
.cart-actions { display: flex; justify-content: flex-end; margin: -.2rem 0 .4rem; }
.cart-vider {
    min-height: 44px; padding: 0 .2rem; font-size: .82rem; font-family: var(--f-body);
    color: var(--texte-secondaire); background: none; border: none; text-decoration: underline;
    cursor: pointer;
}
.cart-vider:hover, .cart-vider:focus-visible { color: var(--erreur); }
.cart-vider[disabled] { opacity: .5; cursor: default; }

.summary { background: var(--blanc); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); position: sticky; top: 130px; }
.summary h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; padding: .35rem 0; }
/* `display: flex` gagnerait sinon sur l'attribut `hidden` : la ligne « Code −0,00 € » restait
   visible sans aucun code appliqué. */
.summary__row[hidden] { display: none; }
.summary__row.total {
    font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; color: var(--bleu);
    border-top: 1px dashed rgb(17 84 119 / 30%); margin-top: .6rem; padding-top: .9rem;
}
.summary .free { color: var(--ok); font-weight: 800; }
.summary .btn { width: 100%; margin-top: 1.1rem; }
.summary__pay { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; flex-wrap: wrap; }
.summary__pay span { background: var(--creme-2); border-radius: 6px; padding: .18rem .55rem; font-size: .72rem; font-weight: 800; }
.summary__note { text-align: center; font-size: .8rem; color: var(--texte-secondaire); margin-top: .7rem; }
.summary__note a { color: var(--bleu); font-weight: 700; text-decoration: underline; }

.promo { display: flex; gap: .5rem; margin-top: 1rem; align-items: center; }
.promo input {
    flex: 1 1 8rem; min-width: 0; width: auto;
    border: 2px dashed rgb(17 84 119 / 30%); border-radius: 999px;
    padding: .6rem 1rem; font-family: var(--f-body); background: var(--blanc); outline: none;
}
/* `.summary .btn` passe les boutons en pleine largeur : le bouton du code promo doit y échapper,
   sinon il écrase le champ de saisie à côté de lui. */
.promo .btn, .summary .promo .btn { flex: 0 0 auto; width: auto; margin-top: 0; }

/* ═══════════ Formulaires ═══════════ */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label, label.field-label { font-weight: 800; font-size: .9rem; color: var(--encre); }
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"]:not(.search-form input), textarea, select {
    font-family: var(--f-body); font-size: 1rem; color: var(--encre);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%);
    border-radius: 14px; padding: .8rem 1rem; outline: none; width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus,
input:focus, textarea:focus { border-color: var(--bleu); box-shadow: 0 3px 12px rgb(17 84 119 / 10%); }
.field .hint, .form-hint { font-size: .8rem; color: var(--texte-secondaire); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-error, .error { color: var(--erreur); font-size: .85rem; font-weight: 700; }

/* Champ obligatoire : l'astérisque est décoratif (aria-hidden), `required` fait foi. */
.req { color: var(--erreur); font-weight: 800; }
.co-obligatoire { font-size: .82rem; color: var(--texte-secondaire); margin-bottom: 1rem; }

/* Mot de passe : bouton afficher/masquer dans le champ + critères évalués à la frappe. */
.password-box { position: relative; }
.password-box input { padding-right: 3.2rem; }
.password-toggle {
    position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
    background: none; font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
}
.password-toggle:hover, .password-toggle:focus-visible { background: var(--creme-2); }
.password-toggle { color: var(--bleu); }
.password-toggle svg { display: block; }
.password-toggle svg[hidden] { display: none; }
.password-criteres { list-style: none; margin: .55rem 0 .2rem; display: grid; gap: .25rem; }
.password-criteres li {
    font-size: .82rem; font-weight: 700; color: var(--texte-secondaire);
    display: flex; align-items: center; gap: .45rem;
}
.password-criteres .criterion-icon { width: .9rem; height: .9rem; color: rgb(17 84 119 / 35%); transition: color var(--transition); }
.password-criteres .criterion-icon__check { opacity: 0; transition: opacity var(--transition); }
.password-criteres li.est-ok { color: var(--ok); }
.password-criteres li.est-ok .criterion-icon { color: var(--ok); }
.password-criteres li.est-ok .criterion-icon__check { opacity: 1; }
.password-criteres small { font-weight: 400; }

/* Autocomplétion d'adresse (API Base Adresse Nationale) */
.adresse-box { position: relative; }
.adresse-liste {
    position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 30;
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 16px;
    box-shadow: var(--shadow-lg); overflow: hidden; max-height: 17rem; overflow-y: auto;
}
.adresse-liste li {
    display: grid; gap: .1rem; padding: .6rem .9rem; cursor: pointer; font-size: .92rem;
    border-bottom: 1px solid rgb(17 84 119 / 8%);
}
.adresse-liste li:last-child { border-bottom: none; }
.adresse-liste li.actif, .adresse-liste li:hover { background: var(--creme-2); }
.adresse-liste strong { font-weight: 700; color: var(--encre); }
.adresse-liste span { font-size: .82rem; color: var(--texte-secondaire); }

/* ═══════════ Champ téléphone (indicatif + numéro) ═══════════
   Le sélecteur de pays reste ÉTROIT : il ne montre que le drapeau et l'indicatif, le nom du pays
   n'apparaissant que dans la liste dépliée. « Luxembourg +352 » écrit en toutes lettres dans un
   `<select>` mangeait toute la largeur et reléguait le numéro à la ligne suivante. */
.champ-tel__groupe { display: flex; align-items: stretch; gap: .5rem; }
.champ-tel__groupe input[type="tel"] { flex: 1 1 auto; min-width: 0; }
/* Repli sans JS : le `<select>` natif, borné pour ne pas manger la ligne. */
.champ-tel__indicatif { flex: 0 0 auto; width: auto; max-width: 9.5rem; padding-inline: .7rem; }
.champ-tel__selecteur { position: relative; flex: 0 0 auto; }

.champ-tel__pays {
    display: flex; align-items: center; gap: .45rem; height: 100%; cursor: pointer;
    font-family: var(--f-body); font-size: 1rem; font-weight: 700; color: var(--encre);
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 14px;
    padding: .8rem .8rem; transition: border-color var(--transition), box-shadow var(--transition);
    /* `normal`, comme un `input` — et non le 1.65 hérité du corps de texte, qui rendait tout le
       bloc téléphone 5 px plus haut que les champs voisins (le groupe est en `align-items:
       stretch`, donc le bouton tirait l'input avec lui). */
    line-height: normal;
}
.champ-tel__pays:hover { border-color: rgb(17 84 119 / 40%); }
.champ-tel__pays:focus-visible { border-color: var(--bleu); box-shadow: 0 3px 12px rgb(17 84 119 / 10%); outline: none; }
.champ-tel__dial { font-variant-numeric: tabular-nums; white-space: nowrap; }
.champ-tel__chevron {
    width: 0; height: 0; margin-left: .1rem; flex: 0 0 auto;
    border-left: .3rem solid transparent; border-right: .3rem solid transparent;
    border-top: .34rem solid var(--bleu); transition: transform var(--transition);
}
.champ-tel__pays[aria-expanded="true"] .champ-tel__chevron { transform: rotate(180deg); }

.champ-tel__liste {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; min-width: 15rem;
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 18%); border-radius: 16px;
    box-shadow: var(--shadow-lg); max-height: 17rem; overflow-y: auto; outline: none;
}
.champ-tel__liste li {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; cursor: pointer;
    font-size: .93rem; border-bottom: 1px solid rgb(17 84 119 / 8%);
}
.champ-tel__liste li:last-child { border-bottom: none; }
.champ-tel__liste li.actif, .champ-tel__liste li:hover { background: var(--creme-2); }
.champ-tel__liste li[aria-selected="true"] { font-weight: 800; }
.champ-tel__nom { flex: 1 1 auto; }
.champ-tel__liste .champ-tel__dial { color: var(--texte-secondaire); font-weight: 400; }
.champ-tel__retour { font-size: .8rem; font-weight: 700; color: var(--alerte); }

/* Drapeaux en dégradés CSS : rien à télécharger, et surtout aucune dépendance aux emoji —
   Windows n'embarque pas les drapeaux et affichait « FR » en toutes lettres à la place. */
.champ-tel__drapeau {
    flex: 0 0 auto; width: 1.35rem; height: .95rem; border-radius: 2px; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(33 51 63 / 20%);
}
.champ-tel__drapeau[data-iso="FR"] { background: linear-gradient(90deg, #002654 0 33.34%, #fff 33.34% 66.67%, #ed2939 66.67%); }
.champ-tel__drapeau[data-iso="BE"] { background: linear-gradient(90deg, #000 0 33.34%, #fdda24 33.34% 66.67%, #ef3340 66.67%); }
.champ-tel__drapeau[data-iso="IT"] { background: linear-gradient(90deg, #008c45 0 33.34%, #f4f5f0 33.34% 66.67%, #cd212a 66.67%); }
.champ-tel__drapeau[data-iso="DE"] { background: linear-gradient(#000 0 33.34%, #d00 33.34% 66.67%, #ffce00 66.67%); }
.champ-tel__drapeau[data-iso="LU"] { background: linear-gradient(#ed2939 0 33.34%, #fff 33.34% 66.67%, #00a1de 66.67%); }
.champ-tel__drapeau[data-iso="NL"] { background: linear-gradient(#ae1c28 0 33.34%, #fff 33.34% 66.67%, #21468b 66.67%); }
.champ-tel__drapeau[data-iso="ES"] { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.champ-tel__drapeau[data-iso="CH"] {
    background:
        linear-gradient(#fff 0 0) center / 46% 17% no-repeat,
        linear-gradient(#fff 0 0) center / 17% 62% no-repeat,
        #d52b1e;
}
.champ-tel__drapeau[data-iso="PT"] {
    background:
        radial-gradient(circle at 40% 50%, #ffe900 0 26%, #046a38 26% 30%, transparent 30%),
        linear-gradient(90deg, #046a38 0 40%, #da291c 40%);
}
/* Union Jack : le seul dessin que des bandes ne rendent pas. SVG en ligne, ~500 octets. */
.champ-tel__drapeau[data-iso="GB"] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M30 15h30v15zv15H30zH0V15zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' clip-path='url(%23c)' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E") center / cover;
}

/* ═══════════ Bloc formulaire de contact ═══════════
   Le gabarit vient du CORE (`core/blocks/contact/block.twig`) et le core est PRIORITAIRE sur les
   blocs : un thème peut en ajouter, pas en surcharger. Tout se règle donc ici, sans toucher au
   balisage — d'où les sélecteurs sur les éléments nus (`button`, `.field-consent label`), que le
   gabarit ne nous laisse pas nommer.

   Sans ces règles : bouton gris par défaut du navigateur, champs étirés sur toute la largeur du
   conteneur (1130 px de saisie pour un nom), et case de consentement décrochée de son libellé. */
.block-contact .contact-title { margin-bottom: .4rem; }
.block-contact .contact-intro { color: var(--texte-secondaire); margin-bottom: 1.6rem; }
/* Une ligne de saisie ne se lit plus au-delà d'une soixantaine de caractères : le formulaire garde
   sa colonne quelle que soit la largeur choisie pour le bloc dans l'admin. */
.contact-form { max-width: 34rem; }
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form textarea { resize: vertical; min-height: 8rem; }

/* Consentement RGPD : case et libellé sur une même ligne, la case alignée sur la 1re ligne de
   texte (le libellé passe sur deux lignes en mobile). */
.contact-form .field-consent label {
    display: flex; align-items: flex-start; gap: .6rem;
    font-weight: 600; font-size: .93rem; line-height: 1.45; cursor: pointer;
}
.contact-form .field-consent input[type="checkbox"] {
    width: 18px; height: 18px; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--bleu);
}

.contact-form button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; cursor: pointer;
    background: var(--moutarde); color: var(--bleu-fonce); border: none;
    padding: .85rem 1.9rem; border-radius: 999px; margin-top: .4rem; width: auto;
    box-shadow: 0 6px 18px rgb(235 189 51 / 45%);
    transition: transform var(--transition), background var(--transition);
}
.contact-form button[type="submit"]:hover { transform: translateY(-2px); background: var(--moutarde-vif); }
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; transform: none; }

/* Champ signalé par le serveur (`aria-invalid`) ou par `contact.js` : le rouge ne dit pas seul
   l'erreur, le message sous le champ le fait. */
.contact-form [aria-invalid="true"] { border-color: var(--erreur); }
.contact-form [aria-invalid="true"]:focus { box-shadow: 0 3px 12px rgb(179 68 46 / 18%); }

/* Cartes radio (livraison / paiement) */
.radio-card {
    display: flex; align-items: center; gap: .9rem; background: var(--creme);
    border: 2px solid rgb(17 84 119 / 14%); border-radius: 14px; padding: .9rem 1rem;
    margin-bottom: .7rem; cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.radio-card:hover { border-color: var(--bleu); }
.radio-card:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); }
.radio-card input { accent-color: var(--bleu); width: 18px; height: 18px; }
.radio-card .grow { flex: 1; }
.radio-card strong { display: block; font-size: .95rem; }
.radio-card small { font-size: .8rem; color: var(--texte-secondaire); }
/* Variante <div> + <label> interne (bloc CGV) : le label reste cliquable pour cocher, et les
   liens — HORS du label — s'ouvrent au lieu de cocher la case. */
.radio-card label { cursor: pointer; }
.radio-card a {
    color: var(--bleu); font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px;
}
.radio-card a:hover { color: var(--bleu-fonce); }

/* ═══════════ Tunnel & compte ═══════════ */
.co-steps {
    display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap;
    font-size: .85rem; font-weight: 700; color: var(--texte-secondaire); padding: 1.4rem 0 .4rem;
}
.co-steps a { color: var(--bleu); }
.co-steps a:hover { color: var(--peche-texte); }
.co-steps .on { color: var(--bleu); }
.co-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.co-section { background: var(--blanc); border-radius: var(--radius); padding: 1.6rem; box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: 1.2rem; }
.co-section h2 { font-size: 1.15rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.co-section h2 .num {
    width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto;
    background: var(--moutarde); color: var(--bleu-fonce); border-radius: 50% 50% 50% 10px;
    font-size: .95rem; font-weight: 800;
}
/* Rappel « déjà client » en tête de tunnel — discret : la commande en invité reste la voie
   principale, on n'impose pas la connexion. */
.co-login {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--bleu-pale); border-radius: 14px; padding: .7rem 1rem; margin-bottom: 1.2rem;
    font-size: .92rem;
}
.co-login span { font-weight: 800; }
.co-login a { color: var(--bleu); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.co-login small { flex-basis: 100%; color: var(--texte-secondaire); font-size: .8rem; }
.co-login--connecte { background: var(--sauge-pale); }
.co-login--connecte strong { color: var(--ok); }

/* Invitation à créer un compte, après la commande uniquement. */
.post-order-account {
    background: var(--blanc); border-radius: var(--radius); padding: 1.8rem;
    box-shadow: var(--shadow); text-align: left; max-width: 34rem; margin: 2rem auto 0;
    position: relative;
}
.post-order-account::before {
    content: ""; position: absolute; inset: 9px; border: var(--stitch);
    border-radius: 16px; opacity: .35; pointer-events: none;
}
.post-order-account > * { position: relative; }
.post-order-account h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.post-order-account p { font-size: .93rem; }
.post-order-account .auth-perks { margin: 1rem 0 1.3rem; }
.post-order-account .btn { width: 100%; }
.post-order-account__login { text-align: center; margin-top: .8rem; font-size: .88rem; }
.post-order-account__login a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.co-summary { position: sticky; top: 20px; }
.co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: .8rem; align-items: center; padding: .55rem 0; }
.co-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.co-item h3 { font-size: .9rem; }
.co-item small { color: var(--texte-secondaire); font-size: .78rem; }
.co-item .thumb { position: relative; display: block; }
.co-item .qty-badge {
    position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px;
    background: var(--bleu); color: #fff; border-radius: 999px;
    display: grid; place-items: center; font-size: .72rem; font-weight: 800;
}
.co-item .price { font-size: .95rem; font-weight: 800; color: var(--bleu); }

/* « Un petit plus » : upsell du tunnel, sous le récapitulatif. */
.co-upsell h2 { font-size: 1.05rem; }
.co-upsell__item {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    padding: .6rem 0; transition: opacity var(--transition);
}
.co-upsell__item + .co-upsell__item { border-top: 1px dashed rgb(17 84 119 / 20%); }
/* Tout le bloc produit est un lien : photo + titre + prix, cible large. */
.co-upsell__lien { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
.co-upsell__lien:hover strong, .co-upsell__lien:focus-visible strong { text-decoration: underline; }
.co-upsell__item .thumb { display: block; flex: 0 0 auto; }
.co-upsell__item .thumb img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.co-upsell__infos { display: block; min-width: 0; }
.co-upsell__infos strong { display: block; font-size: .9rem; line-height: 1.25; }
.co-upsell__infos .price { display: block; font-size: .88rem; font-weight: 800; color: var(--bleu); }
/* Stepper et « Ajouter » sur LA MÊME ligne, comme au panier. */
.co-upsell__achat { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
/* Version compacte du stepper du panier : mêmes formes, taille sidebar. */
.qty-stepper--sm button { width: 34px; height: 34px; font-size: 1rem; }
.qty-stepper--sm input.boutique-quantite { width: 2.3rem; padding: .3rem .1rem; font-size: .9rem; }
.co-upsell__achat .btn { min-height: 34px; padding: .4rem .8rem; white-space: nowrap; }
.co-upsell__item.est-ajoutee { opacity: .55; }
#boutique-payment-element { min-height: 220px; }
.is-paiement .page--narrow { max-width: 68rem; }
.payment-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.3rem, 3vw, 2.5rem); align-items: start; }
.payment-layout h2 { display: block; margin-bottom: 1rem; }
.payment-review { background: var(--creme); border-radius: 18px; padding: 1.25rem; }
.payment-review__items { display: grid; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px dashed rgb(17 84 119 / 28%); }
.payment-review__items li { display: flex; align-items: start; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.payment-review__items li > span { display: grid; }
.payment-review__items small { color: var(--texte-secondaire); }
.payment-review__address { padding: 1rem 0; border-bottom: 1px dashed rgb(17 84 119 / 28%); font-size: .9rem; }
.payment-review__address h3 { font-size: 1rem; margin-bottom: .3rem; }
.payment-review__address address { font-style: normal; }
.payment-review__totals { padding-top: .8rem; }
.payment-review__totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .92rem; }
.payment-review__totals dd { font-weight: 700; }
.payment-review__totals .total { margin-top: .45rem; padding-top: .7rem; border-top: 2px solid rgb(17 84 119 / 20%); color: var(--bleu); font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; }
.payment-review__edit { display: grid; justify-items: start; gap: .35rem; margin-top: 1rem; }
.payment-review__edit small, .payment-entry__legal { color: var(--texte-secondaire); font-size: .78rem; }
.payment-entry { position: sticky; top: 130px; }
.payment-entry .boutique-payer { min-height: 52px; margin-top: 1.2rem; line-height: 1.25; }
.payment-entry__legal { margin-top: .6rem; text-align: center; }

.panel { background: var(--blanc); border-radius: var(--radius); padding: 1.6rem; box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: 1.4rem; }
.panel h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.status { font-size: .78rem; font-weight: 800; padding: .28rem .75rem; border-radius: 999px; white-space: nowrap; display: inline-block; }
.status--ok { background: var(--sauge-pale); color: var(--ok); }
.status--ship { background: var(--bleu-pale); color: var(--bleu-fonce); }
.status--prep { background: var(--jaune-pale); color: #8a6a10; }
.status--ko { background: var(--rose-pale); color: var(--erreur); }

.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card { background: var(--blanc); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); position: relative; }
.auth-card::before { content: ""; position: absolute; inset: 9px; border: var(--stitch); border-radius: 16px; opacity: .35; pointer-events: none; }
.auth-card > * { position: relative; z-index: 1; }
/* Texte à GAUCHE malgré la carte centrée : centré, une puce qui passe sur deux lignes voyait
   sa seconde ligne flotter au milieu (« clic » orphelin), désalignée des puces suivantes. */
.auth-perks { margin-top: 1.6rem; display: grid; gap: .35rem; text-align: left; }
.auth-perks li { display: flex; gap: .6rem; font-size: .9rem; align-items: baseline; }
.auth-perks li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--moutarde); }

/* ═══════════ Tables ═══════════ */
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .5rem; border-bottom: 1px dashed rgb(17 84 119 / 20%); }
th { font-family: var(--f-display); color: var(--bleu); }

/* ═══════════ Blog ═══════════ */
.post-tag {
    display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    background: var(--peche-pale); color: #a4552f; border-radius: 999px; padding: .3rem .8rem;
}
.post-meta { font-size: .82rem; color: var(--texte-secondaire); }
.featured-post {
    display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden;
    background: var(--blanc); border-radius: calc(var(--radius) * 1.3); box-shadow: var(--shadow); margin-bottom: 2.4rem;
}
.featured-post img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.featured-post__body { padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .8rem; }
.featured-post h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.featured-post h2 a:hover, .post-card h2 a:hover, .post-card h3 a:hover { color: var(--peche-texte); }

/* ── Carrousel d'articles ──
   Défilement natif avec accroche : tactile en mobile, molette/trackpad en desktop, et les
   flèches ne font qu'appeler scrollBy(). Aucune dépendance, aucun état à synchroniser. */
.post-slider { margin-bottom: clamp(2rem, 5vw, 3rem); }
.post-slider__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.post-slider__head h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.post-slider__nav { display: flex; gap: .4rem; }
.post-slider__nav button {
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 16%); color: var(--bleu);
    font-family: var(--f-display); font-size: 1.4rem; line-height: 1;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.post-slider__nav button:hover { border-color: var(--bleu); background: var(--bleu); color: var(--blanc); transform: translateY(-2px); }
.post-slider__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(33.333% - .95rem);
    gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 0; padding-bottom: .2rem;
    overscroll-behavior-x: contain;
    /* Barre masquée : sur macOS elle n'apparaît qu'au survol, et ce liseré gris surgissant
       sous la carte se lisait comme un défaut d'affichage. Le défilement reste intact — au
       doigt, à la molette, au clavier — et les flèches donnent l'affordance en pointeur. */
    scrollbar-width: none;
}
.post-slider__track::-webkit-scrollbar { display: none; }
.post-slider__slide { scroll-snap-align: start; }
.post-slider__slide .post-card { height: 100%; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.post-card {
    background: var(--blanc); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%); display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
/* `--shadow-lg` (22px de décalage) dessinait un halo gris sous la carte au survol. */
.post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(17 84 119 / 12%); }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; flex: 1; }
.post-card h2, .post-card h3 { font-size: 1.12rem; }
.post-card p { font-size: .9rem; color: rgb(33 51 63 / 70%); }
.post-card .post-meta { margin-top: auto; }

.article-hero { max-width: 52rem; margin: 0 auto 1.8rem; text-align: center; padding-top: 1rem; }
.article-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: .7rem 0; }
/* Méta sur une ligne, séparateurs générés : le gabarit n'a pas à gérer les « · » selon les
   champs présents (auteur absent, pas de mise à jour…). */
.article-hero .post-meta {
    font-size: .95rem; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .55rem;
}
.article-hero .post-meta span + span::before { content: "·"; margin-right: .55rem; color: rgb(33 51 63 / 45%); }
/* Plus large que la colonne de texte (58rem vs 45rem) : l'image respire sans écraser
   le début de l'article comme en pleine largeur. */
.article-cover {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    margin: 0 auto 2.4rem; max-width: 58rem;
}
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Colonne de lecture ──
   45rem à 18px ≈ 70 caractères par ligne, le haut de la fourchette lisible (50-75).
   Le sommaire vit DANS la marge gauche (absolu + sticky), la colonne reste donc parfaitement
   centrée : hero, cover et texte partagent le même axe à toutes les largeurs. */
.article-main { position: relative; max-width: 45rem; margin-inline: auto; }
.article-body { max-width: none; margin: 0; }
.article-body.prose { font-size: 1.125rem; line-height: 1.7; }
.article-body.prose > * + * { margin-top: 1.25rem; }
.article-body.prose h2 { font-size: 1.65rem; margin-top: 2.7rem; }
.article-body.prose h3 { font-size: 1.28rem; margin-top: 1.8rem; }
/* Sans ce dégagement, l'ancre cliquée cache le titre sous l'en-tête sticky. */
.article-body :is(h2, h3)[id] { scroll-margin-top: 120px; }

/* Encadré « L'essentiel » : la réponse directe en tête d'article (extrait/chapô). */
.essentiel {
    background: var(--blanc); border: var(--stitch); border-radius: var(--radius);
    padding: 1.2rem 1.5rem 1.4rem; margin-bottom: 2rem;
}
.essentiel__title {
    font-size: .78rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--peche-texte); margin-bottom: .45rem;
}
.essentiel p:last-child { font-size: 1.1rem; line-height: 1.65; }

/* Sommaire desktop : dans la marge gauche uniquement quand elle est assez large
   (13.5rem + retrait), sinon la version mobile prend le relais. */
.article-toc { display: none; }
.article-toc a { display: block; padding: .32rem .6rem; border-radius: 9px; font-size: .92rem; color: var(--texte-secondaire); }
.article-toc a:hover { color: var(--bleu); background: rgb(17 84 119 / 7%); }
.article-toc a.is-active { color: var(--bleu); font-weight: 700; background: rgb(17 84 119 / 7%); box-shadow: inset 3px 0 0 var(--moutarde); }
.article-toc__title, .article-toc-mobile summary {
    font-family: var(--f-display); font-weight: 700; color: var(--bleu); font-size: 1.02rem;
}
.article-toc__title { margin-bottom: .5rem; padding-left: .6rem; }
.article-toc-mobile {
    background: var(--blanc); border-radius: 14px; box-shadow: 0 4px 14px rgb(17 84 119 / 7%);
    padding: .9rem 1.2rem; margin-bottom: 1.8rem;
}
.article-toc-mobile summary { cursor: pointer; }
.article-toc-mobile ol { margin-top: .55rem; display: grid; gap: .3rem; }
.article-toc-mobile a { color: var(--texte-secondaire); font-size: .95rem; }
.article-toc-mobile a:hover { color: var(--bleu); }
@media (min-width: 1180px) {
    .article-toc { display: block; position: absolute; inset: 0 calc(100% + 2.75rem) 0 auto; width: 13.5rem; }
    .article-toc__inner { position: sticky; top: 120px; }
    .article-toc-mobile { display: none; }
}

.author-box {
    display: flex; gap: 1.1rem; align-items: center; background: var(--blanc);
    border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 2.6rem 0 0;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%);
}
.author-box img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; }
.author-box .name { font-family: var(--f-display); font-weight: 700; color: var(--bleu); }
.author-box p { font-size: .9rem; }
.related { margin-top: 3rem; padding-bottom: 1rem; }

/* Polaroid (histoire) */
.polaroid { background: var(--blanc); padding: .8rem .8rem 1rem; border-radius: 12px; box-shadow: var(--shadow-lg); display: inline-block; }
.polaroid img { border-radius: 8px; }
.polaroid figcaption { font-family: var(--f-hand); font-size: 1.25rem; text-align: center; padding-top: .6rem; }
.histoire__visual { text-align: center; margin-bottom: 2rem; }

/* Bandeau CTA */
.cta-band { background: var(--bleu); color: var(--creme); padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; margin-top: 3rem; }
.cta-band h2 { color: var(--blanc); margin-bottom: 1.4rem; }
.cta-band__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ═══════════ Recherche & 404 ═══════════ */
/* La boîte était centrée, mais pas le formulaire : `.search-form` garde la largeur de l'entête
   (clamp jusqu'à 300px), il restait donc étroit et collé à gauche de sa boîte. Sur la page dont
   la recherche est le sujet, le champ prend toute la largeur — et grandit un peu. */
.search-box { max-width: 44rem; margin: 0 auto 2.4rem; }
.search-box .search-form { width: 100%; padding: .3rem .4rem .3rem 1.4rem; }
.search-box .search-form input { font-size: 1.05rem; padding: .35rem 0; }
.search-box .search-form button { font-size: .95rem; padding: .65rem 1.5rem; }
.search-summary { text-align: center; margin-bottom: 1.4rem; }
.search-results { display: grid; gap: 1rem; }
.search-result { background: var(--blanc); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: 0 4px 14px rgb(17 84 119 / 7%); }
.search-result h2, .search-result h3 { font-size: 1.15rem; margin: .4rem 0 .3rem; }
mark { background: var(--jaune-pale); color: inherit; padding: 0 .15rem; border-radius: 3px; }

/* Page de recherche : les produits d'abord, en cartes — sur une boutique, c'est le résultat
   attendu. Les pages et guides suivent en liste. */
.search-produits, .search-editorial, .search-suggestions, .search-decouverte { margin-top: 2.6rem; }
.search-produits h2, .search-editorial h2, .search-suggestions h2, .search-decouverte h2 {
    font-family: var(--f-display); font-size: 1.25rem; color: var(--bleu); margin-bottom: 1.1rem;
}
.search-vide {
    text-align: center; max-width: 34rem; margin: 0 auto 1rem;
    color: var(--texte-secondaire); font-size: 1rem;
}

/* Recherches fréquentes : des pastilles cliquables. Sans requête, la page n'offrait rien —
   c'était une impasse, alors que le visiteur y arrive justement sans savoir quoi taper. */
.search-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.search-chips a {
    display: inline-block; padding: .45rem 1rem; border-radius: 999px;
    background: var(--blanc); border: 2px solid rgb(17 84 119 / 15%);
    color: var(--bleu); font-weight: 700; font-size: .9rem; text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}
.search-chips a:hover, .search-chips a:focus-visible { border-color: var(--bleu); transform: translateY(-1px); }

.search-decouverte__lien { margin-top: 1.2rem; text-align: center; }
.search-guides { list-style: none; padding: 0; display: grid; gap: .8rem; }
.search-guides li {
    background: var(--blanc); border-radius: var(--radius); padding: 1rem 1.2rem;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%);
}
.search-guides a { color: var(--bleu); font-weight: 700; text-decoration: none; }
.search-guides a:hover { text-decoration: underline; text-underline-offset: 2px; }
.search-guides span { display: block; font-size: .88rem; margin-top: .2rem; }

.err { text-align: center; max-width: 34rem; margin: 0 auto; padding: 3rem 0 2rem; }
.err__code { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 10vw, 6.5rem); color: var(--moutarde); line-height: 1; }
.err h1 { margin: .4rem 0 .8rem; }
.err__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.err__search { margin-top: 2rem; display: flex; justify-content: center; }
.err__search .search-form { width: min(26rem, 100%); }

/* ═══════════ Compatibilité : gabarits du plugin non surchargés ═══════════
   (tunnel de commande, espace client, confirmation) — ils utilisent leurs propres classes. */
.boutique-panier, .boutique-commande, .boutique-paiement, .boutique-confirmation,
.boutique-compte, .boutique-catalogue, .boutique-categorie, .boutique-produit { padding-bottom: 2.5rem; }
.boutique-message { border-radius: 14px; padding: .8rem 1.1rem; background: var(--sauge-pale); color: var(--ok); font-weight: 700; margin-bottom: 1rem; }
.boutique-alerte { border-radius: 14px; padding: .8rem 1.1rem; background: var(--jaune-pale); color: #8a6a10; font-weight: 700; margin-bottom: 1rem; }
.boutique-fil-ariane { display: flex; gap: .35rem; flex-wrap: wrap; font-size: .85rem; color: var(--texte-secondaire); padding: 1.2rem 0 .4rem; }
.boutique-fil-ariane a { font-weight: 700; color: var(--bleu); }
.boutique-fil-ariane a::after { content: " ›"; color: rgb(33 51 63 / 40%); }
.boutique-sous-categories { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.boutique-sous-categories a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .9rem; background: var(--blanc); border: 2px solid rgb(17 84 119 / 16%); border-radius: 999px; padding: .4rem 1rem; }
.boutique-bouton, .boutique-ajouter {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--f-display); font-weight: 600; font-size: 1rem; cursor: pointer; border: none;
    background: var(--moutarde); color: var(--bleu-fonce); padding: .8rem 1.7rem; border-radius: 999px;
    box-shadow: 0 6px 18px rgb(235 189 51 / 45%); transition: transform var(--transition), background var(--transition);
}
.boutique-bouton:hover, .boutique-ajouter:hover { transform: translateY(-2px); background: var(--moutarde-vif); }
.boutique-lien-bouton { background: none; border: none; color: var(--bleu); text-decoration: underline; cursor: pointer; font-family: var(--f-body); font-size: .88rem; }
.boutique-panier-lignes { background: var(--blanc); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgb(17 84 119 / 7%); }
.boutique-panier-lignes th, .boutique-panier-lignes td { padding: .9rem .8rem; }
/* Ligne de quantité du panier : libellé visible, pas-à-pas, calcul explicité. */
.qty-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.qty-line label { font-weight: 800; color: var(--encre); }
.qty-stepper {
    display: inline-flex; align-items: center; background: var(--blanc);
    border: 2px solid rgb(17 84 119 / 18%); border-radius: 999px; overflow: hidden;
}
.qty-stepper button {
    width: 44px; height: 44px; border: none; background: none; cursor: pointer;
    font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: var(--bleu);
    line-height: 1; transition: background var(--transition);
}
.qty-stepper button:hover { background: var(--creme-2); }
.qty-stepper button:disabled {
    opacity: .35; cursor: not-allowed; background: none;
}
.qty-stepper input.boutique-quantite {
    width: 3rem; flex: 0 0 auto; text-align: center; padding: .4rem .1rem;
    font-weight: 800; border: none; border-radius: 0; background: none;
}
/* Les flèches natives feraient doublon avec les nôtres. */
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty-stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-line__message { font-size: .82rem; color: var(--alerte); font-weight: 700; margin-top: .3rem; }
.qty-line__message[hidden] { display: none; }

/* Ligne en cours de mise à jour / en cours de retrait. */
.cart-item.est-occupee { opacity: .65; }
.cart-item.est-retiree {
    opacity: 0; transform: translateX(-14px);
    transition: opacity .25s ease, transform .25s ease;
}
.cart-item { transition: opacity .2s ease; }

/* Retour du code promo */
.promo-retour { font-size: .84rem; font-weight: 700; margin-top: .5rem; }
.promo-retour.est-ko { color: var(--erreur); }
.promo-retour.est-ok { color: var(--ok); }
.promo-retour[hidden] { display: none; }
.promo.est-occupee { opacity: .6; pointer-events: none; }
/* Condition d'identité en attente (« réservé à une première commande — vérifié avec votre
   email ») : informative en gris, mais rouge quand devis.js la remplace par un refus. */
.promo-conditions { font-size: .8rem; color: var(--texte-secondaire); margin-top: .35rem; text-align: left; }
.promo-conditions.est-ko { color: var(--erreur); font-weight: 700; }
.promo-conditions[hidden] { display: none; }

/* Ajout au panier : la pastille produit jaillit du bouton, vole en arc, le panier l'attrape.
   La pastille est ronde avec un liseré blanc — une « médaille », pas une photo qui flotte. */
.vol-panier {
    position: fixed; z-index: 90; pointer-events: none;
    background: var(--creme-2) center / cover no-repeat;
    border-radius: 50%; border: 3px solid var(--blanc);
    box-shadow: 0 12px 28px rgb(17 84 119 / 28%);
}
/* Le panier « attrape » : léger recul en rotation, comme s'il recevait un poids.
   Le rebond est écrit dans les keyframes (1.22 → .96 → 1), la courbe reste une décélération. */
.header__icon--cart.est-rempli { animation: panier-recu .5s cubic-bezier(.3, .1, .25, 1); }
@keyframes panier-recu {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.22) rotate(-8deg); }
    60% { transform: scale(.96) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
/* Confirmation sous le doigt : le bouton passe brièvement en « Ajouté ! ». */
.boutique-ajouter { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.boutique-ajouter.est-ajoute {
    background: var(--ok); color: var(--blanc);
    box-shadow: 0 6px 18px rgb(46 125 79 / 35%);
}
.boutique-ajouter.est-ajoute:hover { background: var(--ok); transform: none; }

/* Bouton de tri : masqué par JS, visible sans lui (la CSP interdit un handler en attribut). */
.boutique-tri-valider {
    border: 2px solid rgb(17 84 119 / 18%); background: var(--blanc); color: var(--bleu);
    font-family: var(--f-display); font-weight: 600; font-size: .88rem;
    border-radius: 999px; padding: .4rem 1rem; cursor: pointer;
}
.boutique-tri-valider:hover { border-color: var(--bleu); }
.boutique-tri-valider[hidden] { display: none; }
.qty-line__calcul { color: var(--texte-secondaire); }
.qty-line__calcul strong { color: var(--bleu); }
.co-item__calcul { display: block; color: var(--texte-secondaire); }
.boutique-quantite { width: 5rem; text-align: center; }
.boutique-sous-total { text-align: right; font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; color: var(--bleu); margin: 1rem 0; }
.boutique-promo, .boutique-promo-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1.2rem 0; }
.boutique-promo-form input[type="text"] { max-width: 16rem; }
.boutique-promo-actif { color: var(--ok); font-weight: 700; }
.boutique-promo-erreur { color: var(--erreur); font-weight: 700; }
.boutique-mention { font-size: .85rem; color: var(--texte-secondaire); }
.boutique-variantes { display: grid; gap: .9rem; margin-bottom: 1rem; }
.boutique-galerie { display: grid; gap: 1rem; }
.boutique-galerie img { border-radius: var(--radius); }
.boutique-prix { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; color: var(--bleu); margin: .6rem 0; }
.boutique-description { margin-top: 1.4rem; }
/* Champs et boutons des gabarits du plugin (espace client, écrans non surchargés). */
.boutique-champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.boutique-champ > label { font-weight: 800; font-size: .9rem; }
.boutique-champ label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: .55rem; font-weight: 600; }
.boutique-aide { font-size: .8rem; color: var(--texte-secondaire); }
.boutique-recap {
    background: var(--blanc); border-radius: var(--radius); padding: 1.4rem;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: 1.4rem;
}
.boutique-recap ul { display: grid; gap: .4rem; margin: .6rem 0; }
.boutique-recap li { font-size: .93rem; padding-bottom: .4rem; border-bottom: 1px dashed rgb(17 84 119 / 18%); }
fieldset {
    border: 2px dashed rgb(17 84 119 / 20%); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
}
legend { font-family: var(--f-display); font-weight: 700; color: var(--bleu); padding: 0 .5rem; }
.boutique-valider, .boutique-payer {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; cursor: pointer; border: none;
    background: var(--moutarde); color: var(--bleu-fonce); padding: 1rem 1.7rem; border-radius: 999px;
    box-shadow: 0 6px 18px rgb(235 189 51 / 45%); transition: transform var(--transition), background var(--transition);
}
.boutique-valider:hover, .boutique-payer:hover { transform: translateY(-2px); background: var(--moutarde-vif); }
/* LEURRE ANTI-ROBOTS : le plugin le pose dans le DOM et compte sur le thème pour le masquer.
   Sans cette règle, le champ « Ne pas remplir » s'affiche à l'inscription — et tout visiteur qui
   le remplit voit sa création de compte refusée. Ne jamais supprimer. */
.boutique-leurre {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ═══════════ Espace client (gabarits du plugin) ═══════════ */
.boutique-compte { padding-bottom: 2.5rem; }
.boutique-compte h1 { margin: 1.6rem 0 .6rem; }
.boutique-formulaire { display: block; }

/* Écrans d'authentification non surchargés (mot de passe oublié, réinitialisation) : le
   formulaire est un enfant DIRECT du conteneur — dans nos surcharges il est niché dans
   `.auth-card`, qui porte déjà le cadre. Le sélecteur enfant évite le double cadre. */
.boutique-compte--auth { max-width: 34rem; margin-inline: auto; text-align: center; }
.boutique-compte--auth h1 { margin-top: 2rem; }
.boutique-compte--auth > p { font-size: .95rem; color: rgb(33 51 63 / 72%); margin-bottom: 1rem; }
.boutique-compte--auth > p a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.boutique-compte--auth > .boutique-formulaire {
    background: var(--blanc); border-radius: var(--radius); padding: 1.8rem;
    box-shadow: var(--shadow); text-align: left; margin: 1.4rem 0;
}
.boutique-compte--auth > .boutique-formulaire .boutique-bouton { width: 100%; margin-top: .6rem; }
.auth-forgot {
    display: block; text-align: right; font-size: .84rem; color: var(--bleu);
    text-decoration: underline; text-underline-offset: 2px; margin: -.4rem 0 1rem;
}
.auth-switch { text-align: center; font-size: .92rem; margin-top: 1rem; }
.auth-switch a { color: var(--bleu); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.boutique-notice { border-radius: 14px; padding: .85rem 1.15rem; font-weight: 700; font-size: .93rem; margin-bottom: 1.1rem; }
.boutique-notice--success, .boutique-notice--info { background: var(--sauge-pale); color: var(--ok); }
.boutique-notice--error { background: var(--rose-pale); color: var(--erreur); }
.boutique-notice--warning { background: var(--jaune-pale); color: #8a6a10; }
.boutique-notice form { margin-top: .5rem; }

/* ── Navigation de l'espace client ──
   Desktop : sidebar carte sticky à gauche du contenu. La grille est posée sur `.boutique-compte`
   sans toucher aux gabarits de page : tout enfant part en colonne 2, sauf l'en-tête (h1, lien
   retour, statut de commande) en pleine largeur, et la nav en colonne 1 — étirée sur les lignes
   suivantes (`span 20`) pour que sa zone couvre toute la hauteur et que le sticky voyage.
   Le `:has()` épargne les écrans d'authentification, qui portent `.boutique-compte` sans nav ;
   sans support :has, la page reste simplement empilée comme avant.
   Mobile (≤ 820px, pivot du thème) : la carte devient une barre de chips à défilement
   horizontal — recentrage de l'entrée active et dégradés de débordement pilotés par theme.js. */
.boutique-compte:has(.boutique-compte-nav) {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    gap: 0 clamp(1.4rem, 3vw, 2.4rem); align-items: start;
}
.boutique-compte:has(.boutique-compte-nav) > * { grid-column: 2; }
.boutique-compte:has(.boutique-compte-nav) > h1,
.boutique-compte:has(.boutique-compte-nav) > .compte-retour,
.boutique-compte:has(.boutique-compte-nav) > .commande-entete { grid-column: 1 / -1; }
.boutique-compte:has(.boutique-compte-nav) > .boutique-compte-nav {
    grid-column: 1; grid-row: span 20; position: sticky; top: 130px;
}
.boutique-compte-nav {
    background: var(--blanc); border-radius: var(--radius); padding: .8rem;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: 1.6rem;
}
.boutique-compte-nav__defileur, .boutique-compte-nav ul { display: grid; gap: .15rem; }
.boutique-compte-nav a, .boutique-compte-deconnexion button {
    display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px;
    padding: .5rem .8rem; border-radius: 12px; font: inherit; font-weight: 700; font-size: .95rem;
    line-height: 1.25; text-align: left; transition: background var(--transition), color var(--transition);
}
.boutique-compte-nav .ui-icon { width: 1.15em; height: 1.15em; }
.boutique-compte-nav a:hover { background: var(--creme-2); }
.boutique-compte-nav a[aria-current] { background: var(--bleu); color: var(--blanc); }
.boutique-compte-nav__sep { border-top: 1px dashed rgb(17 84 119 / 30%); margin: .45rem .5rem; }
.boutique-compte-deconnexion {
    margin: .45rem 0 0; padding-top: .45rem;
    border-top: 1px dashed rgb(17 84 119 / 30%);
}
.boutique-compte-deconnexion button { background: none; border: 0; cursor: pointer; color: var(--erreur); }
.boutique-compte-deconnexion button:hover { background: var(--rose-pale); }

@media (max-width: 820px) {
    .boutique-compte:has(.boutique-compte-nav) { display: block; }
    .boutique-compte:has(.boutique-compte-nav) > .boutique-compte-nav { position: relative; top: auto; }
    .boutique-compte-nav { padding: .45rem; margin-bottom: 1.4rem; }
    .boutique-compte-nav__defileur {
        display: flex; align-items: stretch; gap: .25rem;
        overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .boutique-compte-nav__defileur::-webkit-scrollbar { display: none; }
    .boutique-compte-nav ul { display: flex; align-items: stretch; gap: .25rem; }
    .boutique-compte-nav li { flex: 0 0 auto; display: flex; }
    .boutique-compte-nav a, .boutique-compte-deconnexion button {
        width: auto; white-space: nowrap; border-radius: 999px; padding: .5rem 1rem;
        gap: .5rem; font-size: .92rem; scroll-snap-align: center;
    }
    .boutique-compte-nav__sep {
        border-top: 0; border-left: 1px dashed rgb(17 84 119 / 30%);
        margin: .4rem .25rem; padding: 0;
    }
    .boutique-compte-deconnexion {
        flex: 0 0 auto; display: flex; margin: 0 0 0 .25rem; padding: 0 0 0 .5rem;
        border-top: 0; border-left: 1px dashed rgb(17 84 119 / 30%);
    }
    /* Dégradés signalant qu'il reste des entrées masquées — classes posées par theme.js. */
    .boutique-compte-nav::before, .boutique-compte-nav::after {
        content: ""; position: absolute; top: 2px; bottom: 2px; width: 2.2rem;
        pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 1;
    }
    .boutique-compte-nav::before {
        left: 1px; border-radius: var(--radius) 0 0 var(--radius);
        background: linear-gradient(to right, var(--blanc) 25%, rgb(255 253 248 / 0%));
    }
    .boutique-compte-nav::after {
        right: 1px; border-radius: 0 var(--radius) var(--radius) 0;
        background: linear-gradient(to left, var(--blanc) 25%, rgb(255 253 248 / 0%));
    }
    .boutique-compte-nav.is-deborde-gauche::before { opacity: 1; }
    .boutique-compte-nav.is-deborde-droite::after { opacity: 1; }
}

.boutique-compte-section {
    background: var(--blanc); border-radius: var(--radius); padding: 1.6rem;
    box-shadow: 0 4px 14px rgb(17 84 119 / 7%); margin-bottom: 1.4rem;
}
.boutique-compte-section h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.boutique-compte-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
/* `margin-bottom` : la liste des adresses est suivie du formulaire d'ajout, qui n'a pas de marge
   haute — les deux blocs se touchaient. */
.boutique-compte-adresses {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .9rem; margin-bottom: 1.8rem;
}
.boutique-compte-adresses > * {
    border: 2px dashed rgb(17 84 119 / 25%); border-radius: 16px; padding: 1.1rem; font-size: .92rem;
}
.boutique-compte-table, .boutique-compte-commandes { width: 100%; }
.boutique-compte-table th { font-size: .85rem; }
.boutique-montant { font-family: var(--f-display); font-weight: 800; color: var(--bleu); white-space: nowrap; }
.boutique-variante { display: block; font-size: .84rem; color: var(--texte-secondaire); }
.boutique-suivi { font-size: .88rem; }
.boutique-badge {
    display: inline-block; font-size: .76rem; font-weight: 800; padding: .28rem .75rem;
    border-radius: 999px; background: var(--creme-2); color: var(--encre); white-space: nowrap;
}
.boutique-badge--paid, .boutique-badge--delivered { background: var(--sauge-pale); color: var(--ok); }
.boutique-badge--shipped { background: var(--bleu-pale); color: var(--bleu-fonce); }
.boutique-badge--pending { background: var(--jaune-pale); color: #8a6a10; }
.boutique-badge--cancelled, .boutique-badge--refunded { background: var(--rose-pale); color: var(--erreur); }
/* ── Le club (points de fidélité) ──
   La carte de solde rompt volontairement avec les autres sections, blanches : c'est une carte de
   membre, pas un encadré d'information. Le bleu de la marque en fond, la moutarde du logo sur le
   chiffre — le seul élément que le client vient réellement chercher sur cette page. */
.club-carte { background: var(--bleu); color: var(--creme); text-align: center; }
.club-carte__nom {
    font-family: var(--f-hand); font-size: 1.5rem; color: var(--moutarde-vif);
    margin: 0 0 .3rem;
}
.club-carte__solde { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: 0; }
.club-carte__chiffre {
    font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; line-height: 1;
    color: var(--moutarde); font-variant-numeric: tabular-nums;
}
.club-carte__unite { font-size: 1.1rem; font-weight: 700; }
.club-carte__validite { margin: 1rem 0 0; font-size: .95rem; }
/* Les aides de la carte sont sur fond bleu : la couleur secondaire par défaut y serait illisible. */
.club-carte .boutique-aide { color: rgb(251 244 232 / 78%); }
.club-carte__cumul { margin-top: .6rem; }

.club-etapes { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.club-etapes li { margin-bottom: .5rem; }

.club-historique { list-style: none; margin: 0; padding: 0; }
.club-ligne {
    display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem; align-items: baseline;
    padding: .75rem 0; border-bottom: 1px solid var(--creme-2);
}
.club-ligne:last-child { border-bottom: none; }
.club-ligne__date { font-size: .85rem; color: var(--texte-secondaire); white-space: nowrap; }
.club-ligne__motif { font-size: .95rem; }
.club-ligne__points {
    font-family: var(--f-display); font-weight: 800; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--texte-secondaire);
}
.club-ligne__points--gain { color: var(--ok); }
/* Sous 520 px, la grille à trois colonnes écrase le motif : la date passe au-dessus. */
@media (max-width: 520px) {
    .club-ligne { grid-template-columns: 1fr auto; }
    .club-ligne__date { grid-column: 1 / -1; }
}

/* Badge du club sous le prix d'une fiche produit. C'est un bouton (il ouvre la modale), mais il ne
   doit pas ressembler à un second CTA à côté d'« Ajouter au panier » : fond discret, pas d'ombre. */
.club-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--jaune-pale); color: var(--bleu-fonce);
    border: 1px solid transparent; border-radius: 999px;
    padding: .4rem .85rem; font: inherit; font-size: .88rem; cursor: pointer;
    margin: 0 0 .8rem;
}
.club-badge:hover { border-color: var(--moutarde); }
.club-badge svg { width: 1em; height: 1em; flex: none; color: var(--moutarde-vif); }
.club-badge strong { font-variant-numeric: tabular-nums; }

/* `margin: auto` est INDISPENSABLE : le centrage d'un <dialog> modal vient de la feuille de style
   du navigateur, et le reset global `* { margin: 0 }` (plus haut) l'écrase — la modale se collait
   alors en haut à gauche. Le guide des tailles le redéclare pour la même raison.
   `max-height` + `overflow-y` : sur un petit écran, le contenu déborderait sans être atteignable. */
.club-modale {
    margin: auto; border: none; border-radius: 20px; padding: 2rem;
    max-width: min(94vw, 30rem); max-height: 88vh; overflow-y: auto;
    background: var(--blanc); color: var(--encre);
    box-shadow: 0 18px 50px rgb(12 61 88 / 30%);
}
/* Même voile que le guide des tailles : les deux modales cohabitent sur la fiche produit, deux
   opacités différentes s'y verraient. */
.club-modale::backdrop { background: rgb(12 61 88 / 78%); }
/* `padding-right` : le bouton de fermeture est en position absolue dans le coin — sans cette
   réserve, il chevauche la fin du titre. */
.club-modale h2 {
    display: flex; align-items: center; gap: .5rem; padding-right: 2.6rem;
    font-family: var(--f-display); font-size: 1.25rem; color: var(--bleu); margin: 0 0 1.2rem;
}
.club-modale h2 svg { width: 1.1em; height: 1.1em; color: var(--moutarde); }
.club-modale__etapes { list-style: none; margin: 0; padding: 0; counter-reset: club; }
.club-modale__etapes li {
    counter-increment: club; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem;
    margin-bottom: 1rem;
}
/* Le numéro EST l'information : les trois étapes sont une séquence, pas une liste d'arguments. */
.club-modale__etapes li::before {
    content: counter(club); grid-row: 1 / 3;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--bleu); color: var(--creme);
    font-family: var(--f-display); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.club-modale__etapes strong { font-size: .98rem; }
.club-modale__etapes span { font-size: .9rem; color: var(--texte-secondaire); }
.club-modale__pied { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

/* Rappel du club sur l'écran de confirmation — le moment de plus forte attention du parcours. */
.club-confirmation {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--jaune-pale); color: var(--bleu-fonce);
    border-radius: 999px; padding: .55rem 1.1rem; margin: 1.2rem auto 0; font-size: .95rem;
}
.club-confirmation svg { width: 1.1em; height: 1.1em; flex: none; color: var(--moutarde-vif); }

/* Ligne de cadeau au panier : le coût en points remplace le prix, il ne s'y ajoute pas. */
.cart-item__cadeau {
    margin: 0; font-size: .92rem; color: var(--bleu);
    background: var(--jaune-pale); border-radius: 999px; padding: .3rem .8rem; display: inline-block;
}

/* La grille de cadeaux. Les articles hors de portée restent VISIBLES et lisibles : ce sont eux qui
   donnent envie de revenir. Les estomper au point de les rendre illisibles supprimerait le seul
   ressort du programme — voir la récompense qu'on n'a pas encore. */
.club-cadeaux {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem;
}
.club-cadeau {
    border: 2px dashed rgb(17 84 119 / 25%); border-radius: 16px; padding: 1rem;
    display: flex; flex-direction: column; gap: .35rem; text-align: center;
}
.club-cadeau--hors-portee { border-style: solid; border-color: var(--creme-2); }
.club-cadeau__image { width: 100%; height: auto; border-radius: 12px; }
.club-cadeau__titre { font-weight: 700; margin: 0; font-size: .95rem; }
.club-cadeau__cout {
    font-family: var(--f-display); font-weight: 800; color: var(--bleu); margin: 0;
    font-variant-numeric: tabular-nums;
}
.club-cadeau__manque { font-size: .82rem; color: var(--texte-secondaire); margin: 0; }
.club-cadeau form { margin: .25rem 0 0; display: grid; gap: .4rem; }
/* Sélecteur de taille : même rôle que celui d'une fiche produit, à l'échelle d'une carte. Il
   PORTE le champ du formulaire (`name="cadeau"`), d'où sa pleine largeur — c'est un choix à
   faire avant de valider, pas une décoration. */
.club-cadeau__taille {
    font: inherit; font-size: .85rem; width: 100%;
    padding: .35rem .5rem; border: 2px solid rgb(17 84 119 / 25%);
    border-radius: 10px; background: var(--blanc); color: var(--encre);
}
.club-cadeau__taille:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.club-cadeau .boutique-des { font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: var(--texte-secondaire); }

/* Encart de solde sur le tableau de bord — un rappel, pas une seconde carte de membre. */
.club-rappel { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.club-rappel__chiffre {
    font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; line-height: 1;
    color: var(--bleu); font-variant-numeric: tabular-nums;
}

.boutique-bouton--danger { background: var(--erreur); color: #fff; box-shadow: 0 6px 18px rgb(179 68 46 / 35%); }
.boutique-bouton--danger:hover { background: #983926; }

/* ── Commandes du client ──
   La ligne ENTIÈRE est un lien : le tableau d'origine ne rendait cliquable que la référence, une
   cible minuscule que rien ne signalait. Survol, chevron et mention « Voir le détail » disent
   maintenant où l'on va. */
.commande-liste { display: grid; gap: .7rem; }
.commande-carte {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem; border: 2px solid rgb(17 84 119 / 12%); border-radius: 16px;
    background: var(--blanc); color: inherit; text-decoration: none;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.commande-carte:hover, .commande-carte:focus-visible {
    border-color: var(--bleu); transform: translateY(-2px); box-shadow: 0 8px 20px rgb(17 84 119 / 12%);
}
.commande-carte__principal { display: grid; gap: .15rem; }
.commande-carte__ref { font-family: var(--f-display); color: var(--bleu); font-size: 1.02rem; }
.commande-carte__date { font-size: .86rem; color: var(--texte-secondaire); }
.commande-carte__etat { display: flex; align-items: center; gap: .8rem; }
.commande-carte__montant { font-family: var(--f-display); font-weight: 800; color: var(--bleu); white-space: nowrap; }
.commande-carte__voir {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .86rem; font-weight: 700; color: var(--bleu);
}
.commande-carte__voir .ui-icon { width: 1rem; height: 1rem; transition: transform var(--transition); }
.commande-carte:hover .commande-carte__voir .ui-icon { transform: translateX(3px); }
.commande-liste__suite { margin-top: 1rem; }

/* Retour en TÊTE de page — le lien nu de bas de page ne se voyait pas. La flèche pointe à
   gauche : c'est le même pictogramme que « suivant », retourné. */
.compte-retour { margin: 1.4rem 0 .2rem; }
.compte-retour a {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 700; font-size: .9rem; color: var(--bleu);
    text-decoration: underline; text-underline-offset: 3px;
}
.compte-retour .ui-icon { width: 1rem; height: 1rem; transform: rotate(180deg); }

.commande-entete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* Livraison et facturation côte à côte quand la place le permet, empilées sinon. */
.commande-adresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; }
.commande-adresses h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.commande-adresses address { font-style: normal; font-size: .93rem; line-height: 1.6; }
.commande-entete__date { font-size: .9rem; color: var(--texte-secondaire); }

/* Timeline de suivi : ces classes n'avaient AUCUN style — la page tombait en HTML nu. */
.boutique-suivi { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .88rem; margin-bottom: .6rem; }
.boutique-suivi .ui-icon { width: 1.1rem; height: 1.1rem; color: var(--bleu); }
.boutique-suivi-timeline { list-style: none; padding: 0; margin: 0; }
.boutique-suivi-timeline li {
    position: relative; padding: 0 0 1.1rem 1.6rem;
    border-left: 2px solid rgb(17 84 119 / 18%);
}
.boutique-suivi-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.boutique-suivi-timeline li::before {
    content: ""; position: absolute; left: -7px; top: .25rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--creme-2); border: 2px solid var(--bleu);
}
/* L'événement le plus récent est en tête : c'est lui qu'on met en avant. */
.boutique-suivi-timeline li:first-child::before { background: var(--bleu); }
.boutique-suivi-timeline strong { display: block; font-size: .95rem; color: var(--bleu); }
.boutique-suivi-timeline__detail { display: block; font-size: .88rem; }
.boutique-suivi-timeline__date { display: block; font-size: .82rem; color: var(--texte-secondaire); }

/* Tableau des articles : il déborde sur téléphone, il défile plutôt que de casser la page. */
.table-defilante { overflow-x: auto; }
.boutique-compte-table { border-collapse: collapse; }
.boutique-compte-table th, .boutique-compte-table td {
    padding: .6rem .5rem; text-align: left; vertical-align: top;
    border-bottom: 1px solid rgb(17 84 119 / 12%);
}
.boutique-compte-table thead th { font-size: .82rem; color: var(--texte-secondaire); text-transform: uppercase; letter-spacing: .03em; }
.boutique-compte-table tfoot th { font-weight: 700; }
.boutique-compte-table tfoot td { text-align: left; }
.boutique-compte-table__total th, .boutique-compte-table__total td {
    border-top: 2px solid rgb(17 84 119 / 25%); border-bottom: none; font-size: 1.02rem; color: var(--bleu);
}

.boutique-factures { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.boutique-factures li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.boutique-factures__libelle { font-size: .93rem; }
.boutique-factures__attente { font-size: .86rem; color: var(--texte-secondaire); font-style: italic; }

.boutique-champ--case { flex-direction: row; align-items: flex-start; gap: .6rem; }
.boutique-champ--case input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bleu); margin-top: .2rem; }
.boutique-champ--case label { font-weight: 600; font-size: .93rem; }

/* ═══════════ Zones globales (slots) ═══════════ */
.footer__slot .block, .footer__slot form { color: var(--encre); }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1024px) {
    .rayons__grid { grid-template-columns: repeat(3, 1fr); }
    .avis__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .boutique-grille { grid-template-columns: repeat(3, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .pdp { grid-template-columns: 1fr 1fr; }
    .cart-grid, .co-grid { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 1024px) {
    .post-slider__track { grid-auto-columns: calc(50% - .7rem); }
}

@media (max-width: 820px) {
    .header__inner { gap: 1rem; }

    /* Recherche repliée derrière la loupe : dépliée, elle occupe toute la largeur sous l'en-tête.
       ANCRÉE AU HEADER en `absolute`, pas en `fixed` : le `backdrop-filter` du header en fait le
       bloc conteneur des descendants fixed — le panneau se retrouvait décalé de la hauteur du
       bandeau. L'ancrage absolu suit le header sticky sans mesure JavaScript. */
    .header__search { position: static; }
    .header__search .header__search-toggle { display: grid; }
    .header__search-panel {
        display: none; position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); z-index: 56;
        width: auto; background: var(--blanc); border-radius: 16px; padding: .35rem;
        box-shadow: var(--shadow-lg);
    }
    .header__search.is-open .header__search-panel { display: block; }
    .header__search.is-open .search-form { width: 100%; }
    .post-slider__track { grid-auto-columns: 82%; }
    .post-slider__nav { display: none; }
    .header__burger {
        display: flex; flex-direction: column; gap: 5px; justify-content: center;
        width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 8px;
    }
    .header__burger span { height: 2.5px; background: var(--bleu); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
    body.nav-open .header__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    body.nav-open .header__burger span:nth-child(2) { opacity: 0; }
    body.nav-open .header__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    body.nav-open { overflow: hidden; }
    body.nav-open::before {
        content: ""; position: fixed; inset: 0; z-index: 40; background: rgb(12 61 88 / 42%);
    }
    .mainnav {
        display: none; position: fixed; z-index: 55; top: var(--mobile-nav-top, 70px); left: var(--gutter); right: var(--gutter);
        max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
        background: var(--blanc); border-radius: 18px; box-shadow: var(--shadow-lg);
    }
    body.nav-open .mainnav { display: block; }
    .mainnav ul { flex-direction: column; align-items: stretch; gap: .25rem; padding: .8rem; }
    .mainnav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem .8rem; border-radius: 10px; }
    .mainnav a:hover, .mainnav a:focus-visible { background: var(--creme-2); }
    .mainnav__panel { position: static; translate: none; display: flex; box-shadow: none; background: transparent; padding: .3rem 0 0; }

    .hero__grid { grid-template-columns: 1fr; text-align: center; }
    .hero__sub { margin-inline: auto; }
    .hero__cta { justify-content: center; }
    .univers__grid { grid-template-columns: 1fr; }

    .pdp { grid-template-columns: 1fr; }
    .gallery { position: static; }
    .cart-grid, .co-grid { grid-template-columns: 1fr; }
    .payment-layout { grid-template-columns: 1fr; }
    .payment-entry { position: static; }
    .summary, .co-summary { position: static; }
    .featured-post { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .trust__grid { grid-template-columns: repeat(2, 1fr); }
    .block-editorial.has-media { grid-template-columns: 1fr; }
    .sticky-buy.is-visible { display: flex; }
    .has-sticky-buy .site-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .etapes__grid { grid-template-columns: 1fr; }
    .etapes__visual { margin-bottom: 1.5rem; }
}

@media (max-width: 560px) {
    .rayons__grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
    .boutique-grille { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .8rem; }
    /* Deux colonnes de liens (la marque garde toute la largeur) et des interlignes resserrés :
       en une colonne de liens de 44px, le footer occupait plusieurs écrans de défilement. */
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__col { gap: 0; }
    .footer__col a { min-height: 36px; font-size: .9rem; }
    .footer__bottom { justify-content: center; text-align: center; }
    .cart-item { grid-template-columns: 72px 1fr; }
    .cart-item img { width: 72px; height: 72px; }
    .cart-item__side { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
    .field--row { grid-template-columns: 1fr; }
    .pdp-trust { grid-template-columns: 1fr; }
    .topbar { padding-block: .45rem; }
    .topbar__msg { flex-wrap: wrap; column-gap: .45rem; row-gap: 0; font-size: .76rem; line-height: 1.4; }
    .topbar__separator { display: none; }
    .univers__item { grid-template-columns: 42px 1fr; gap: .9rem; padding: 1.25rem; }
    .univers__icon { width: 42px; height: 42px; border-radius: 12px; }
    .univers__icon .ui-icon { width: 23px; height: 23px; }
    .review-card { padding: 1.4rem 1.4rem 1.5rem; }
    /* La ligne de commande se replie en trois blocs empilés : trois colonnes de chiffres ne
       tiennent pas dans 360 px, et « Voir le détail » doit rester lisible. */
    .commande-carte { grid-template-columns: 1fr; gap: .6rem; }
    .commande-carte__etat { justify-content: space-between; }
}

@media (max-width: 359px) {
    .rayons__grid, .boutique-grille { grid-template-columns: 1fr; }
    .header__inner { gap: .45rem; }
    .header__logo img { max-width: 130px; }
}

/* ── Modale de confirmation standard (og.confirm) ─────────────────────────────────────────
   <dialog> natif : le fond inerte et le piégeage du focus viennent du navigateur. Cadres nets,
   ancrée au centre — pas d'effet flottant. */
.og-modale {
    border: none;
    background: transparent;
    padding: 1rem;
    max-width: min(26rem, calc(100vw - 2rem));
    width: 100%;
    /* Le reset global (`margin: 0`) écrase le centrage natif du <dialog> : on le rétablit. */
    margin: auto;
}

.og-modale::backdrop {
    background: rgb(12 61 88 / 45%);
}

.og-modale__carte {
    background: var(--blanc);
    border: 2px solid var(--bleu);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.5rem 1.4rem;
    text-align: center;
    /* Une modale riche (carte + semaine d'horaires) défile à l'intérieur : le titre et le
       bouton restent atteignables sur les petits écrans. */
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
}

.og-modale__titre {
    font-family: var(--f-display);
    color: var(--bleu);
    font-size: 1.3rem;
    margin: 0 0 .5rem;
}

.og-modale__message {
    color: var(--encre);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.og-modale__actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.og-modale__actions .btn { min-width: 8.5rem; }

.og-modale__danger {
    background: var(--erreur);
    color: var(--blanc);
}

.og-modale__danger:hover { transform: translateY(-2px); background: #9c3826; }

.og-modale[open] { animation: og-modale-entree .18s ease-out; }
.og-modale[open]::backdrop { animation: og-modale-fond .18s ease-out; }

@keyframes og-modale-entree {
    from { transform: translateY(10px) scale(.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes og-modale-fond {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Carnet d'adresses du tunnel (cartes remplissant le formulaire) ──────────────────────── */
.carnet {
    border: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .7rem;
}

.carnet__titre {
    font-family: var(--f-display);
    color: var(--bleu);
    padding: 0 0 .35rem;
}

.carnet__carte { align-items: flex-start; }

.carnet__corps { display: block; min-width: 0; }
.carnet__corps strong { color: var(--encre); }
.carnet__corps small { display: block; color: var(--texte-secondaire); margin-top: .15rem; }

.carnet__defaut {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--sauge-pale);
    color: var(--ok);
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}

.carnet__carte--nouvelle { border-style: dashed; }

/* L'icône et le nom de l'offre restent côte à côte, quelle que soit la largeur de carte. */
.carnet__corps strong { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Carte OpenStreetMap des modales (position d'un point relais) ───────────────────────── */
.og-modale__osm-boite {
    position: relative;
    border: 2px solid var(--bleu);
    border-radius: calc(var(--radius) - 10px);
    overflow: hidden;
    margin: 0 0 .35rem;
    background: var(--creme-2);
}

/* Message d'attente SOUS l'iframe : visible tant qu'elle est transparente, recouvert dès
   qu'elle a chargé. */
.og-modale__osm-boite::before {
    content: 'Chargement de la carte…';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--texte-secondaire);
    font-size: .88rem;
}

.og-modale__osm {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: none;
    opacity: 0;
    transition: opacity .25s ease-out;
}

.og-modale__osm.est-chargee { opacity: 1; }

.og-modale__itineraire {
    display: inline-block;
    font-size: .82rem;
    color: var(--bleu);
    margin-bottom: 1rem;
}

/* ── Liste terme/valeur des modales (horaires d'ouverture…) ─────────────────────────────── */
.og-modale__liste {
    margin: 0 0 1.25rem;
    text-align: left;
}

.og-modale__rangee {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px dashed rgb(17 84 119 / 15%);
}

.og-modale__rangee:last-child { border-bottom: none; }
.og-modale__rangee dt { color: var(--texte-secondaire); }
.og-modale__rangee dd { margin: 0; font-weight: 700; color: var(--encre); text-align: right; }

/* ── Points relais : titre, liste, bouton horaires + « Voir plus » ──────────────────────── */
.co-relais > p:first-child { margin-bottom: .7rem; }

/* Même rythme que la liste des choix de livraison : l'espacement vient du `margin-bottom`
   des cartes elles-mêmes — pas de gap supplémentaire. */
.co-relais__liste { margin-bottom: .6rem; }

.co-relais__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .6rem;
}

/* Champ de saisie des modales (og.invite) + liste de complétion (même famille visuelle que
   l'autocomplétion d'adresse du tunnel). */
.og-modale__champ { position: relative; margin: 0 0 1.1rem; text-align: left; }
.og-modale__champ label { display: block; margin-bottom: .3rem; font-weight: 700; color: var(--encre); }

.og-modale__suggestions {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 5;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    background: var(--blanc);
    border: 2px solid var(--bleu);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
}

.og-modale__suggestions li {
    padding: .5rem .8rem;
    cursor: pointer;
    border-bottom: 1px dashed rgb(17 84 119 / 15%);
}

.og-modale__suggestions li:last-child { border-bottom: none; }
.og-modale__suggestions li:hover,
.og-modale__suggestions li.est-active { background: var(--bleu-pale); }

.boutique-relais-horaires {
    border: none;
    background: none;
    color: var(--bleu);
    font: inherit;
    font-size: .82rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: .2rem 0;
    flex: 0 0 auto;
    align-self: center;
}

.boutique-relais-horaires:hover { color: var(--bleu-fonce); }

.boutique-relais-plus {
    display: block;
    width: 100%;
    border: 2px dashed var(--bleu);
    border-radius: var(--radius);
    background: none;
    color: var(--bleu);
    font: inherit;
    font-weight: 700;
    padding: .55rem 1rem;
    cursor: pointer;
    margin-top: .25rem;
}

.boutique-relais-plus:hover { background: var(--bleu-pale); }

/* ── Notes du récapitulatif : un seul bloc, une ligne par promesse ──────────────────────── */
.co-notes {
    display: grid;
    gap: .55rem;
    background: var(--creme-2);
    border-radius: calc(var(--radius) - 8px);
    padding: .85rem 1rem;
    margin-top: 1rem;
}

.co-notes__ligne {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    font-size: .9rem;
    color: var(--encre);
}

.co-notes__ligne .ui-icon { margin-top: .15rem; color: var(--bleu); }

/* ═══════════ Avis clients ═══════════ */

/* Étoiles d'affichage : deux rangées superposées, celle du dessus tronquée par sa largeur. Une
   note de 4,6 s'affiche donc à 4,6 exactement — pas arrondie à l'étoile pleine, ce qui ferait
   diverger l'image du chiffre écrit juste à côté (et du balisage envoyé à Google). */
.avis-etoiles { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.avis-etoiles__couche { display: inline-flex; gap: .08em; }
.avis-etoiles__couche svg { width: 1.05em; height: 1.05em; }
.avis-etoiles__couche--vide { color: rgb(17 84 119 / 20%); }
.avis-etoiles__couche--pleine {
    position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--moutarde);
}

/* Note sous le titre de la fiche : discrète, mais cliquable jusqu'à la section. */
.pdp__note { margin: -.2rem 0 .2rem; font-size: .92rem; }
.pdp__note a {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--encre); text-decoration: none; font-weight: 700;
}
.pdp__note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdp__note-total { font-weight: 400; color: var(--texte-secondaire); }

.pdp-avis { margin-top: 3.2rem; border-top: 1px dashed rgb(17 84 119 / 30%); padding-top: 2rem; }
.pdp-avis > h2 {
    font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--bleu);
    text-align: center; margin-bottom: 1.6rem;
}

.pdp-avis__resume {
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(1rem, 4vw, 2.4rem);
    align-items: center;
    background: var(--blanc); border: var(--stitch); border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 1.6rem);
}
.pdp-avis__note { text-align: center; }
.pdp-avis__moyenne { font-family: var(--f-display); color: var(--bleu); line-height: 1; }
.pdp-avis__moyenne strong { font-size: 2.6rem; }
.pdp-avis__moyenne span { font-size: 1.1rem; opacity: .6; }
.pdp-avis__note .avis-etoiles { font-size: 1.15rem; margin: .35rem 0 .3rem; }
.pdp-avis__total { font-size: .88rem; color: var(--texte-secondaire); }

.pdp-avis__histogramme { list-style: none; display: grid; gap: .3rem; }
.pdp-avis__histogramme li { display: grid; grid-template-columns: 3.2rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .85rem; }
.pdp-avis__histo-note { color: var(--texte-secondaire); white-space: nowrap; }
.pdp-avis__histo-barre { display: block; height: .5rem; border-radius: 99px; background: var(--creme-2); overflow: hidden; }
.pdp-avis__histo-barre > span { display: block; height: 100%; background: var(--moutarde); border-radius: 99px; }
.pdp-avis__histo-n { text-align: right; color: var(--texte-secondaire); }

.pdp-avis__barre {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem; margin: 1.4rem 0 1rem;
}
.pdp-avis__tri { font-size: .88rem; color: var(--texte-secondaire); }
.pdp-avis__tri a { color: var(--bleu); margin-left: .5rem; text-decoration: underline; text-underline-offset: 2px; }
.pdp-avis__tri a[aria-current] { font-weight: 800; text-decoration: none; }

.pdp-avis__liste, .compte-avis-liste { list-style: none; display: grid; gap: 1rem; }

.avis-carte {
    background: var(--blanc); border: var(--stitch); border-radius: var(--radius);
    padding: clamp(.9rem, 3vw, 1.3rem);
}
.avis-carte__entete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.avis-carte__entete .avis-etoiles { font-size: 1rem; }
.avis-carte__auteur { font-weight: 800; color: var(--encre); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.avis-carte__auteur a { color: var(--bleu); }
.avis-carte__verifie {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .78rem; font-weight: 700; color: var(--ok);
    background: var(--sauge-pale); border-radius: 99px; padding: .12rem .5rem;
}
.avis-carte__verifie .ui-icon { width: .95rem; height: .95rem; }
/* Contexte d'usage : l'animal et la taille achetée. C'est l'information la plus utile de tout
   l'avis pour qui hésite sur une taille — d'où le traitement en puces lisibles, pas en note de
   bas de carte. */
.avis-carte__contexte { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.avis-carte__contexte span {
    font-size: .8rem; font-weight: 700; color: var(--bleu);
    background: var(--bleu-pale); border-radius: 99px; padding: .15rem .6rem;
}
.avis-carte__texte { margin-top: .7rem; font-size: .95rem; }
.avis-carte__photos { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.avis-carte__photos img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 12px; display: block; }
.avis-carte__reponse {
    margin-top: .8rem; padding: .7rem .9rem;
    background: var(--creme-2); border-radius: 14px; font-size: .9rem;
}
.avis-carte__reponse-titre { font-family: var(--f-hand); font-size: 1.05rem; color: var(--bleu); }
.avis-carte__pied {
    display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem;
    font-size: .78rem; color: var(--texte-secondaire);
}
.avis-carte__pied a { color: var(--texte-secondaire); text-decoration: underline; text-underline-offset: 2px; }
.avis-carte--signale { margin: 1rem 0 1.4rem; }

.pdp-avis__pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; font-size: .9rem; }
.pdp-avis__pagination a { color: var(--bleu); font-weight: 700; }
.pdp-avis__vide { text-align: center; display: grid; gap: .5rem; justify-items: center; padding: 1rem 0 .4rem; }
.pdp-avis__vide p:first-child { font-weight: 800; color: var(--bleu); }

/* Appel à l'action : masqué dans le HTML (page en cache), révélé par avis.js pour les seuls
   clients ayant reçu le produit. `hidden` doit rester gagnant — d'où le sélecteur du reset. */
.pdp-avis__cta {
    display: grid; gap: .5rem; justify-items: center; text-align: center;
    background: var(--creme-2); border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 1.5rem); margin-top: 1.4rem;
}
.pdp-avis__cta-titre { font-family: var(--f-display); font-size: 1.15rem; color: var(--bleu); }
.pdp-avis__cta-points { font-size: .92rem; }
.pdp-avis__points-badge {
    display: inline-block; font-weight: 800; color: var(--bleu);
    background: var(--jaune-pale); border-radius: 99px; padding: .1rem .55rem;
}
.pdp-avis__infos-lien { margin-top: 1.4rem; text-align: center; }
.pdp-avis__infos-lien button { font-size: .88rem; color: var(--bleu); font-weight: 700; }

/* Mentions légales sur le fonctionnement des avis. En modale : le décret demande une information
   « à proximité des avis » et facilement accessible — pas qu'elle pousse la page de deux écrans
   quand on la déplie. Le <details> ne subsiste que dans le <noscript>. */
.avis-infos-modale {
    margin: auto; border: none; padding: clamp(1.2rem, 4vw, 2rem);
    background: var(--blanc); border-radius: var(--radius);
    max-width: min(92vw, 46rem); max-height: 86vh; overflow-y: auto;
    color: var(--encre); box-shadow: var(--shadow-lg);
}
.avis-infos-modale::backdrop { background: rgb(33 51 63 / 70%); }
.avis-infos-modale h2 {
    font-family: var(--f-display); font-size: 1.35rem; color: var(--bleu);
    margin-bottom: .9rem; padding-right: 2rem;
}
.avis-infos-modale__corps { display: grid; gap: .7rem; font-size: .92rem; }
.avis-infos-modale__corps strong { color: var(--bleu); }
.avis-infos-modale__fermer {
    position: absolute; top: .7rem; right: .9rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none; cursor: pointer;
    background: var(--creme-2); color: var(--bleu); font-size: 1.4rem; line-height: 1;
}
.avis-infos { margin-top: 1.6rem; font-size: .88rem; }
.avis-infos summary { cursor: pointer; font-weight: 700; color: var(--bleu); }
.avis-infos__corps { display: grid; gap: .6rem; margin-top: .7rem; color: var(--texte-secondaire); max-width: 70ch; }

/* Gain en points : même pastille partout (fiche produit, « Mes avis », formulaire) — c'est la
   répétition de la forme qui fait reconnaître l'information d'un écran à l'autre. */
.compte-avis-gain {
    display: inline-block; font-family: var(--f-body); font-size: .8rem; font-weight: 800;
    color: var(--bleu); background: var(--jaune-pale);
    border-radius: 99px; padding: .12rem .6rem; vertical-align: middle;
}
.avis-form__bonus {
    font-size: .85rem; color: var(--encre);
    background: var(--jaune-pale); border-radius: 12px; padding: .5rem .75rem;
}

/* ═══════════ Formulaire d'avis ═══════════ */

/* Colonne de lecture bornée pour les écrans qui ne sont QU'un formulaire (dépôt d'avis,
   signalement) : la classe était posée dans les gabarits sans jamais avoir de règle. */
.boutique-compte--etroit { max-width: 52rem; margin-inline: auto; }
/* Avec la sidebar du compte, le plafond de la variante étroite comprimait la grille ENTIÈRE :
   la page paraissait plus étroite et désaxée par rapport aux autres écrans du compte. Le plafond
   ne subsiste que sur les écrans sans nav (signalement d'avis public). */
.boutique-compte--etroit:has(.boutique-compte-nav) { max-width: none; }

.avis-form { display: grid; gap: 1.1rem; margin-top: 1.4rem; max-width: var(--narrow); }
.avis-form__champ { display: grid; gap: .35rem; }
.avis-form__champ legend, .avis-form__champ label { font-weight: 700; color: var(--encre); }
.avis-form__champ input[type="text"], .avis-form__champ input[type="email"],
.avis-form__champ textarea, .avis-form__champ select {
    font: inherit; padding: .6rem .8rem; border: 2px solid rgb(17 84 119 / 25%);
    border-radius: 14px; background: var(--blanc); color: var(--encre); width: 100%;
}
.avis-form__champ textarea { resize: vertical; }
.avis-form__facultatif { font-weight: 400; color: var(--texte-secondaire); }
.avis-form__aide { font-size: .82rem; color: var(--texte-secondaire); }
.avis-form__rappel { font-size: .9rem; color: var(--texte-secondaire); }
.avis-form__radio { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; margin-top: .35rem; }
.avis-form__mentions {
    font-size: .82rem; color: var(--texte-secondaire);
    background: var(--creme-2); border-radius: 14px; padding: .8rem 1rem; max-width: 70ch;
}
.avis-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.avis-form__produit { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0; }
.avis-form__produit img { width: 5.5rem; height: auto; border-radius: 14px; display: block; }
.avis-form__produit-titre { font-family: var(--f-display); font-size: 1.15rem; color: var(--bleu); }
.avis-form__produit-note { font-size: .84rem; color: var(--texte-secondaire); }

/* Notation : de vrais boutons radio, dans l'ordre 5→1 dans le DOM. `row-reverse` les remet à
   l'endroit à l'écran, ce qui permet de colorer « cette étoile et celles d'avant » avec le
   sélecteur de frère `~` — sans une ligne de JavaScript, que la CSP du front interdirait de
   toute façon en ligne. */
.avis-notation { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.avis-notation input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avis-notation label { cursor: pointer; color: rgb(17 84 119 / 20%); line-height: 0; transition: color var(--transition); }
.avis-notation label svg { width: 2.1rem; height: 2.1rem; }
.avis-notation input:checked ~ label, .avis-notation label:hover, .avis-notation label:hover ~ label { color: var(--moutarde); }
/* Le focus clavier doit se voir : l'input est masqué, c'est donc son label qui porte l'anneau. */
.avis-notation input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

/* ═══════════ Avis dans l'espace client ═══════════ */

.compte-avis-attente { list-style: none; display: grid; gap: .8rem; margin-top: .9rem; }
.compte-avis-attente li {
    display: flex; align-items: center; gap: 1rem;
    background: var(--blanc); border: var(--stitch); border-radius: var(--radius); padding: .8rem;
}
.compte-avis-attente img { width: 4.5rem; height: auto; border-radius: 12px; display: block; }
.compte-avis-attente__titre { font-weight: 800; color: var(--encre); margin-bottom: .4rem; }
.commande-avis { margin-top: .35rem; font-size: .82rem; }
.commande-avis a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════ Photos d'avis ═══════════ */

/* Les vignettes sont déjà carrées côté serveur (recadrage au centre) : pas d'`object-fit` qui
   ferait télécharger l'image entière pour n'en montrer qu'un carré. */
.avis-carte__photos a {
    display: block; border-radius: 12px; overflow: hidden;
    border: 2px solid transparent; transition: border-color var(--transition), transform var(--transition);
}
.avis-carte__photos a:hover { border-color: var(--moutarde); transform: translateY(-2px); }
.avis-carte__photos a:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.avis-lightbox {
    margin: auto; border: none; padding: 0; background: transparent;
    max-width: min(92vw, 900px); max-height: 92vh; overflow: visible;
}
.avis-lightbox::backdrop { background: rgb(33 51 63 / 78%); }
.avis-lightbox img { display: block; max-width: 100%; max-height: 88vh; border-radius: var(--radius); }
.avis-lightbox__fermer {
    position: absolute; top: -.9rem; right: -.9rem; z-index: 1;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none; cursor: pointer;
    background: var(--blanc); color: var(--bleu); font-size: 1.5rem; line-height: 1;
    box-shadow: var(--shadow);
}

/* Zone de dépôt des photos — même écriture que celle de l'essayage virtuel, en multi-fichiers.
   `:focus-within` porte le style de focus : l'input est visuellement caché mais reste focusable,
   c'est lui qui reçoit le clavier. */
.avis-drop {
    display: flex; align-items: center; gap: .9rem; cursor: pointer; text-align: left;
    border: 2px dashed rgb(17 84 119 / 35%); border-radius: 16px;
    padding: 1rem 1.1rem; background: var(--creme); transition: var(--transition);
    transition-property: background-color, border-color, transform;
}
.avis-drop:hover, .avis-drop:focus-within, .avis-drop.est-survolee {
    background: var(--jaune-pale); border-color: var(--moutarde);
}
.avis-drop.est-survolee { transform: scale(1.01); }
.avis-drop__icone { display: grid; place-items: center; width: 42px; height: 42px; flex: none; color: var(--bleu); }
.avis-drop__icone svg { width: 32px; height: 32px; }
.avis-drop__texte { font-size: .95rem; }
.avis-drop__texte small { color: var(--texte-secondaire); font-weight: 400; }

/* Aperçu avant envoi : mêmes cadres que les vignettes publiées, pour que le client voie
   exactement ce qu'il s'apprête à publier. */
.avis-drop__apercus, .avis-form__photos-actuelles {
    list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem;
}
.avis-drop__apercus li { position: relative; }
.avis-drop__apercus img, .avis-form__photos-actuelles img {
    width: 5rem; height: 5rem; object-fit: cover; border-radius: 12px; display: block;
    border: var(--stitch);
}
/* Le bouton de retrait chevauche le coin de la vignette : à l'intérieur, il masquerait la photo
   qu'il sert justement à identifier. */
.avis-drop__retirer {
    position: absolute; top: -.35rem; right: -.35rem; z-index: 1;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; border: none; cursor: pointer;
    background: var(--bleu); color: var(--blanc); font-size: 1rem; line-height: 1;
    display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}
.avis-drop__retirer:hover { background: var(--erreur); }
.avis-form__legende { font-weight: 700; color: var(--encre); }
.avis-form__case {
    display: flex; align-items: flex-start; gap: .5rem;
    font-weight: 400; font-size: .85rem; color: var(--texte-secondaire); margin-top: .5rem;
}
.avis-form__case input { margin-top: .2rem; flex: none; }

@media (max-width: 640px) {
    .pdp-avis__resume { grid-template-columns: 1fr; }
    .avis-notation label svg { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}