/* Atelier : vérification des boules (plan 04, grille du plan 05). Issu du découpage de editor.css : l'ordre de chargement (les @import de
   editor.css, les <link> de la page du configurateur) est l'ordre de la cascade. */
.atelier .studio-review{padding:8px 16px;font-size:var(--atelier-text-xs);line-height:1.45;background:var(--atelier-soft);color:var(--atelier-ink)}
@media(max-width:760px){
 .atelier .studio-review{font-size:var(--atelier-text-xs);padding:4px 12px}
}
.studio-review{font-size:var(--atelier-text-xs);line-height:1.45;background:var(--atelier-soft);color:var(--atelier-ink);padding:8px 12px;margin:0;border-top:1px solid var(--atelier-line)}
.atelier-stage>.studio-review{grid-row:6}
#mp-config-review{max-width:none;margin:32px 0 0;padding:0;color:var(--ink);background:transparent;border:0;border-radius:0;font:var(--atelier-text-lg)/1.5 var(--font-edito-body,system-ui)}
#mp-config-review>header{max-width:960px;margin-bottom:24px}
#mp-config-review h2{margin:4px 0 8px;font:600 var(--atelier-text-3xl)/1.2 var(--font-edito-body,system-ui)}
#mp-config-review>header p:last-child{color:var(--ink-70)}
.studio-review-body{display:grid;grid-template-columns:minmax(0,1fr)}
.studio-review-main{min-width:0}
.studio-review-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.studio-review-toolbar span{color:var(--ink-50)}
.studio-review-faces{display:flex;gap:4px}
.studio-review-faces button,#mp-config-review>footer button,.studio-review-warning button{min-height:44px;padding:8px 16px;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--ink);font:inherit;cursor:pointer}
.studio-review-faces button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
#mp-config-review figure{margin:12px 0}
#mp-config-review figure img{display:block;width:100%;height:min(58vh,620px);object-fit:contain;background:var(--paper-deep);border:1px solid var(--ink-15);border-radius:var(--atelier-radius-card)}
#mp-config-review figcaption{margin-top:8px;font-size:var(--atelier-text-xs);color:var(--ink-50)}
.studio-review-warning{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ink-15);font-size:var(--atelier-text-md)}
.studio-review-warning p{margin:0}
#mp-config-review>footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#mp-config-review>footer{position:sticky;bottom:0;z-index:10;justify-content:flex-end;align-items:center;gap:16px;border-top:1px solid var(--ink-15);padding:16px 0 calc(18px + env(safe-area-inset-bottom));background:var(--paper)}
@media(max-width:720px){
 #mp-config-review{margin-top:24px}
 #mp-config-review figure img{height:46vh}
 .studio-review-warning{align-items:flex-start;flex-direction:column}
 #mp-config-review>footer{gap:8px;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
}
.studio-review-faces{display:none}
.studio-review-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-review-previews figure img{height:min(46vh,520px)}
@media(max-width:720px){
 .studio-review-faces{display:flex}
 .studio-review-previews{display:block}
 .studio-review-previews figure{display:none}
 .studio-review-previews figure.is-active{display:block}
 .studio-review-previews figure img{height:46vh}
}
#mp-config-review>footer [data-review-confirm]{display:flex;align-items:center;justify-content:center;gap:24px;min-height:56px;padding:16px 24px;border-color:var(--ink);background:var(--ink);color:var(--paper);font-size:var(--atelier-text-lg);font-weight:600}
@media (hover:hover){
 #mp-config-review>footer [data-review-confirm]:hover{background:var(--ink-70)}
}
/* Le prix à côté de « J'ai vérifié, continuer » (audit du 08/10 : l'écran n'en montrait aucun) : le détail en petit, le total en gras,
   juste avant le bouton ; sur téléphone, centré au-dessus de lui. */
.studio-review-total{display:grid;gap:2px;margin:0;text-align:right;line-height:1.35}
.studio-review-total[hidden]{display:none}
.studio-review-total span{font-size:var(--atelier-text-sm);color:var(--ink-70)}
.studio-review-total strong{font-size:var(--atelier-text-lg);font-weight:700;color:var(--ink)}
@media(max-width:760px){
 .studio-review-total{text-align:center}
}
@media(max-width:720px){
 #mp-config-review h2{font-size:var(--atelier-text-2xl)}
 #mp-config-review>footer{flex-direction:column;align-items:stretch}
 #mp-config-review>footer [data-review-confirm]{gap:12px;padding-inline:16px}
}
/* Review zoom stays inside its face viewport, including on touch screens. */
#mp-config-review [data-review-zoom]{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 4px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:500 var(--atelier-text-md)/1.4 var(--font-edito-body,system-ui);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
#mp-config-review [data-review-zoom]::before{content:"";flex:none;width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){
 #mp-config-review [data-review-zoom]:hover{color:var(--rouge-ink);text-decoration-thickness:2px}
}
#mp-config-review [data-review-zoom][aria-expanded=true]{font-weight:600}
#mp-config-review [data-review-viewport]{height:min(46vh,520px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--ink-15);border-radius:var(--atelier-radius-card);background:var(--paper-deep)}
#mp-config-review [data-review-viewport] img{width:100%;max-width:none;height:100%;border:0;border-radius:0;margin:0}
#mp-config-review [data-review-viewport].is-zoomed img{width:200%;height:200%}
#mp-config-review .studio-review-faces{gap:16px}
#mp-config-review .studio-review-faces button{border:0;border-radius:0;background:transparent;color:var(--ink-70);min-height:44px;padding:8px 0;font-size:var(--atelier-text-md)}
#mp-config-review .studio-review-faces button[aria-pressed=true]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
/* End-to-end mobile review: previews precede the decision, without an overlay. */
.studio-review-toolbar strong{overflow-wrap:anywhere;min-width:0}
@media(max-width:760px){
 #mp-config-review{margin-top:8px}
 #mp-config-review>header{margin-bottom:16px}
 #mp-config-review h2{font-size:var(--atelier-text-2xl)}
 #mp-config-review>header p:last-child{margin-bottom:0;font-size:var(--atelier-text-md)}
 #mp-config-review .studio-review-toolbar{gap:4px;margin-bottom:4px;font-size:var(--atelier-text-md)}
 .studio-review-faces{display:flex}
 .studio-review-previews{display:block}
 .studio-review-previews figure{display:none}
 .studio-review-previews figure.is-active{display:block}
 #mp-config-review [data-review-viewport]{height:clamp(240px,46svh,440px)}
 #mp-config-review>footer{position:static;flex-direction:column;align-items:stretch;gap:4px;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
 #mp-config-review>footer [data-review-confirm]{padding-inline:12px;gap:8px;font-size:var(--atelier-text-lg)}
}
@media(max-height:500px){
 #mp-config-review>footer{position:static}
}
/* Review: the checked creation is framed, a creation with a warning says so, and the sticky bar stays above the cookie banner. */
.studio-review-flag{justify-self:start;font-style:normal;font-size:var(--atelier-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rouge-ink)}
/* D4 (27/09) : variante au visuel de découpe différent. L'alerte du pied prend sa ligne, encadrée de rouge encre (plan 04 : plus de liseré latéral). */
.studio-review-block{flex:1 1 100%;margin:0;padding:12px 12px;border:1px solid var(--rouge-ink);border-radius:var(--atelier-radius-card);background:var(--atelier-paper);color:var(--ink);font-size:var(--atelier-text-md);font-weight:600}
.studio-review-block[hidden]{display:none}
@media(max-width:760px){
 .studio-review-block{order:1}
}
/* pied en colonne inversée sur téléphone : l'alerte reste au-dessus des boutons */
.studio-review-warning.is-blocking p{font-weight:600;color:var(--rouge-ink)}
@media(min-width:761px){
 #mp-config-review>footer{bottom:var(--atelier-cookie-offset,0px)}
}
/* Review toolbar: position and size read from the left, « Modifier cette version » (ou « cette boule ») on the right, on the same text line. */
#mp-config-review .studio-review-toolbar{justify-content:flex-start;align-items:baseline;column-gap:16px}
#mp-config-review .studio-review-toolbar [data-review-edit]{margin-left:auto;cursor:pointer}
/* Petits écrans (P3) : Recto et Verso de la vérification en 44 px. Le bouton cookies flottant recouvrait le formulaire et,
   au zoom 400 %, masquait le focus : il est remplacé sur cette page par « Gérer mes cookies », sous le formulaire. */
#mp-config-review .studio-review-faces button{min-width:44px;padding-inline:8px}
@media(min-width:761px) and (min-height:501px){
/* Vérification sur ordinateur (F37) : la ligne sous les aperçus reste au-dessus de la barre d'actions collante au premier affichage.
   Recouvrement mesuré à 1440 × 900 : 60 px, d'où 68 px (60 + 8). Sous 501 px de haut, la barre n'est plus collante : aperçus inchangés. */
 #mp-config-review [data-review-viewport],.studio-review-previews figure img{height:min(calc(46vh - 68px),520px)}
}
/* Grille « Vérifiez vos boules » (plan 05) : alertes en tête, une section par boule (titre h3), vignettes recto et verso.
   Cartes et boutons suivent le jeu de composants (80-composants.css : carte, familles lien et choix) ; ici, placement et tailles. */
#mp-config-review .studio-review-alerts{max-width:960px;margin:0 0 24px;padding:16px}
#mp-config-review :is(.studio-review-alerts,.studio-review-set) h3{margin:0 0 8px;font-size:var(--atelier-text-lg);font-weight:600;line-height:1.4}
#mp-config-review .studio-review-alerts ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
#mp-config-review .studio-review-alerts p{margin:0;font-size:var(--atelier-text-md)}
#mp-config-review .studio-review-alerts li.is-blocking p{font-weight:600;color:var(--atelier-danger)}
#mp-config-review .studio-review-alert-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;font-size:var(--atelier-text-md)}
#mp-config-review .studio-review-alert-links span{color:var(--atelier-muted)}
#mp-config-review .studio-review-grid{margin:0 0 32px}
#mp-config-review .studio-review-set{margin:0 0 24px}
/* Passe 3, lot G4 (bogue 8, capture de Robin : « cartes bancales ») : une liste sans cadre, un filet entre les versions. La ligne entière
   se clique (le bouton s'étend sur elle) ; la version affichée prend le fond sur toute la ligne, « Modifier » compris, et son nom passe en
   600 (500 pour les autres, plus de 900 hérité de <strong>) ; le survol est plus léger que la version affichée. Vignette du recto de 64 px
   sans fond gris, le verso en petite pastille seulement s'il diffère. « Modifier » en lien 500. Deux identifiants : la règle passe devant le
   modèle de carte et la famille « choix » de 80-composants.css. */
#mp-config-review .studio-review-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--atelier-line)}
#mp-screen-order #mp-config-review .studio-review-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:0;border:0;border-bottom:1px solid var(--atelier-line);border-radius:0;background:transparent}
#mp-screen-order #mp-config-review .studio-review-card-open{--survol-fond:transparent;--appui-fond:transparent;position:static;display:grid;grid-template-columns:64px minmax(0,1fr);align-content:center;column-gap:12px;width:100%;min-height:80px;padding:8px 12px;border:0;border-radius:0;background:transparent;font:inherit;font-size:var(--atelier-text-md);font-weight:400;line-height:1.4;text-align:left;cursor:pointer}
#mp-screen-order #mp-config-review .studio-review-card-open::before{content:"";position:absolute;inset:0}
#mp-config-review .studio-review-card-faces{position:relative;grid-column:1;grid-row:1/4;display:block;width:64px;height:64px}
#mp-config-review .studio-review-card-faces img{display:block;width:64px;height:64px;object-fit:contain;background:transparent}
#mp-config-review .studio-review-card-faces .studio-review-card-back{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border:1px solid var(--atelier-line);border-radius:50%;background:var(--atelier-paper)}
#mp-config-review .studio-review-card-open>:not(.studio-review-card-faces){grid-column:2}
#mp-screen-order #mp-config-review .studio-review-card-open strong{font-weight:500;color:var(--atelier-ink);overflow-wrap:anywhere}
#mp-screen-order #mp-config-review .studio-review-card-open[aria-current=true]{background:transparent}
#mp-screen-order #mp-config-review .studio-review-card-open[aria-current=true] strong{font-weight:600}
#mp-config-review .studio-review-card-open small{color:var(--atelier-muted);font-size:var(--atelier-text-sm)}
#mp-screen-order #mp-config-review .studio-review-card-edit{position:relative;z-index:1;margin:0 12px 0 0;font-weight:500}
#mp-screen-order #mp-config-review .studio-review-card:has(>[aria-current=true]){background:var(--atelier-soft)}
@media (hover:hover){
 #mp-screen-order #mp-config-review .studio-review-card:not(:has(>[aria-current=true])):hover{background:color-mix(in oklab,var(--atelier-soft) 50%,transparent)}
}
/* Lot 4 (08/10, audit P2 n° 10). Une boule n'est jamais rognée : une marge autour du rendu garde l'attache et le bas dans leur cadre.
   Ordinateur, plusieurs versions : les vignettes à gauche (une ligne par version), le grand recto/verso à droite, visibles avec le
   total et « J'ai vérifié, continuer » sans défiler (1 440 × 900). Téléphone : le prix et ce bouton collent au bas de l'écran. */
#mp-config-review [data-review-viewport] img{padding:16px}
.studio-review-decision{display:flex;align-items:center;gap:16px}
@media(min-width:761px) and (min-height:501px){
 #mp-config-review [data-review-viewport],.studio-review-previews figure img{height:clamp(280px,calc(100dvh - 560px),560px)}
}
@media(min-width:1100px){
 #mp-config-review:not([hidden]):has(>[data-review-list]:not([hidden])){display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:32px;align-items:start}
 #mp-config-review:not([hidden]):has(>[data-review-list]:not([hidden]))>:is(header,footer){grid-column:1/-1}
 #mp-config-review>.studio-review-alerts{grid-column:1;grid-row:2;margin:0 0 16px}
 #mp-config-review>.studio-review-grid{grid-column:1;grid-row:3;margin:0}
 #mp-config-review:not([hidden]):has(>[data-review-list]:not([hidden]))>.studio-review-body{grid-column:2;grid-row:2/4;position:sticky;top:16px}
}
@media(max-width:760px){
 #mp-config-review [data-review-viewport] img{padding:12px}
 #mp-config-review>footer{display:contents}
 .studio-review-decision{position:sticky;bottom:var(--atelier-cookie-offset,0px);z-index:10;display:grid;gap:4px;margin-top:8px;padding:8px 0 calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--ink-15);background:var(--paper)}
 .studio-review-total{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:8px}
 #mp-config-review>footer [data-review-confirm]{min-height:48px;padding:8px 12px;font-size:var(--atelier-text-md)}
 /* Le prix et le bouton de décision (91 à 122 px) collent au bas de l'écran : un contrôle atteint au clavier s'arrête au-dessus
    d'eux, jamais dessous (lot 6a, audit du 08/10 : « Modifier » d'une vignette restait caché). */
 #mp-config-review :is(button,a,summary,input,[tabindex]){scroll-margin-bottom:calc(var(--atelier-space-6) * 4 + var(--atelier-space-2) + env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (max-height:500px){
 .studio-review-decision{position:static}
}
/* Lot 8 (08/10) : ordinateur bas (1 280 × 720, portable 1 366 × 768). Les grands aperçus commençaient à 452 px et passaient sous la barre
   « J'ai vérifié » : il fallait défiler pour voir les boules. En resserrant les marges au-dessus (et celle du fil d'Ariane, dans la feuille de la page) et la barre (aucun texte retiré),
   ils tiennent entiers, au-dessus de la barre, avec le total et le bouton à côté. Au-delà de 800 px de haut, rien ne change. Passe 2 :
   l'en-tête de la coque remplace le menu et le fil d'Ariane, le titre garde 16 px sous son filet. */
@media(min-width:761px) and (min-height:501px) and (max-height:800px){
 #mp-config-review{margin-top:16px}
 #mp-config-review>header{margin-bottom:8px}
 #mp-config-review .studio-review-toolbar{margin-bottom:4px}
 .studio-review-warning{padding-block:4px}
 #mp-config-review figure{margin:4px 0}
 #mp-config-review [data-review-viewport],.studio-review-previews figure img{height:clamp(220px,calc(100dvh - 478px),560px)}
 #mp-config-review>footer{padding-block:8px calc(10px + env(safe-area-inset-bottom))}
 #mp-config-review>footer [data-review-confirm]{min-height:48px;padding-block:8px}
}
/* Passe 2, lot A (08/10 ; critique du 08/10, problème 2 : à 390 × 664, la vérification s'ouvrait sans montrer la boule). Sous 1 100 px
   (une seule colonne), plusieurs versions : les vignettes deviennent une rangée de pastilles qui défile (vignette du recto et prénom, la
   version affichée en papier foncé), entre le titre et l'aperçu ; « À regarder avant de valider » vient après l'aperçu, comme la
   position, les dimensions, « Modifier » et les remarques de la version affichée. Le titre du
   groupe (« Boule 1 · Sphère · 4 pièces ») ne reste visible que s'il y a plusieurs boules ; « Modifier » de chaque version est porté
   par « Modifier cette version », sous l'aperçu. */
@media(max-width:1099px){
 #mp-config-review:not([hidden]){display:flex;flex-direction:column}
 #mp-config-review>header{order:0}
 #mp-config-review>.studio-review-grid{order:1}
 #mp-config-review>.studio-review-body{order:2}
 #mp-config-review>.studio-review-alerts{order:3;margin:16px 0 0}
 #mp-config-review>footer{order:4}
 #mp-config-review .studio-review-main{display:flex;flex-direction:column}
 #mp-config-review .studio-review-faces{order:1}
 #mp-config-review .studio-review-previews{order:2}
 #mp-config-review .studio-review-toolbar{order:3;margin:0}
 #mp-config-review [data-review-warnings]{order:4}
 #mp-config-review>.studio-review-grid:not([hidden]){display:flex;gap:8px;margin:0 0 8px;padding:0 0 4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 /* Passe 3, lot G4 (P1, en ligne depuis la passe 2) : la rangée défile seule. Sans bloc conteneur, les « Voir … » masqués des
    pastilles (position absolue) sortaient de la rangée et élargissaient la page (450 à 1 074 px), la barre « J'ai vérifié » sortait de
    l'écran. La rangée les contient ; la vérification ne déborde jamais de sa colonne. */
 #mp-config-review>.studio-review-grid{position:relative;min-width:0;max-width:100%}
 #mp-config-review:not([hidden]){min-width:0;overflow-x:clip}
 #mp-config-review .studio-review-set{display:flex;flex:none;align-items:center;gap:8px;margin:0}
 #mp-config-review .studio-review-set>h3{flex:none;margin:0;font-size:var(--atelier-text-xs);font-weight:600;color:var(--atelier-muted);white-space:nowrap}
 #mp-config-review>.studio-review-grid:has(>.studio-review-set:only-child) .studio-review-set>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 /* Pastilles sans cadre (choix : la version affichée sur le papier foncé, le survol plus léger), vignette du recto de 40 px. */
 #mp-screen-order #mp-config-review .studio-review-cards{display:flex;gap:8px;border-top:0}
 #mp-screen-order #mp-config-review .studio-review-card{flex:none;display:block;border:0;border-radius:var(--atelier-radius-control)}
 #mp-screen-order #mp-config-review .studio-review-card-open{display:flex;align-items:center;gap:8px;width:auto;min-height:48px;padding:4px 12px 4px 4px;white-space:nowrap}
 #mp-screen-order #mp-config-review .studio-review-card-open::before{content:none}
 #mp-config-review .studio-review-card-faces{flex:none;width:40px;height:40px}
 #mp-config-review .studio-review-card-faces img{width:40px;height:40px}
 #mp-config-review .studio-review-card-faces .studio-review-card-back,#mp-config-review .studio-review-card-open small,#mp-screen-order #mp-config-review .studio-review-card-edit{display:none}
}
/* Téléphone : la boule d'abord. Sous le titre et sa phrase d'une ligne viennent Recto / Verso puis l'aperçu, entier au premier écran avec le
   prix et « J'ai vérifié » collés en bas ; « Agrandir » passe sous l'image. Hauteur de l'aperçu : l'écran moins ce qui l'entoure au premier écran (en-tête de la coque, titre, onglets, barre du bas ;
   rangée des versions en plus). Le pied est en display:contents : ses boutons se rangent après les remarques. */
@media(max-width:760px){
 #mp-config-review>header{margin-bottom:12px}
 #mp-config-review .studio-review-block{order:4}
 #mp-config-review .studio-review-decision{order:6}
 #mp-config-review figure{margin:4px 0 0}
 #mp-config-review .studio-review-previews figure.is-active{display:flex;flex-direction:column}
 #mp-config-review [data-review-zoom]{order:2;align-self:flex-start;margin:0}
 #mp-config-review figcaption{order:3;margin:0 0 8px}
 #mp-config-review [data-review-viewport]{height:clamp(240px,calc(100svh - 336px),440px)}
 #mp-config-review:has(>.studio-review-grid:not([hidden])) [data-review-viewport]{height:clamp(200px,calc(100svh - 396px),420px)}
}
@media(max-width:374px){
 /* 360 et 320 px : le prix et « J'ai vérifié, continuer vers la commande » passent sur deux lignes chacun (bas d'écran plus haut). */
 #mp-config-review [data-review-viewport]{height:clamp(220px,calc(100svh - 364px),440px)}
 #mp-config-review:has(>.studio-review-grid:not([hidden])) [data-review-viewport]{height:clamp(200px,calc(100svh - 424px),420px)}
}
@media(min-width:761px) and (max-width:1099px) and (min-height:501px){
 /* Tablette, plusieurs versions : la rangée des pastilles prend sa place au-dessus des aperçus, la barre collée reste dessous. */
 #mp-config-review:has(>.studio-review-grid:not([hidden])) [data-review-viewport]{height:clamp(260px,calc(100dvh - 600px),520px)}
}