/* ashable — parts-ab.css : composants des vagues A (entrer et cadrer) et B (la bible).
   Chargé APRÈS app.css, dans les pages des vagues A et B seulement. Aucune couleur en dur : tout vient de tokens.css,
   donc le thème (Épure, Épure nuit…) repeint ces écrans comme les autres.
   Seule exception voulue : les pastilles de la fiche de marque, dont la couleur est une DONNÉE du client
   (posée dans le HTML en --c, elle ne doit justement pas changer avec le thème).
   Sans JavaScript de plus : les choix (listes, pastilles, cases, dépôts) utilisent de vrais champs HTML + :has(). */

/* ---- socle d'usage ---- */
[data-pane][hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
label.btn,label.chip,label.tile,label.row,label.drop,label.consent,label.vrow{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.lede{display:flex;flex-direction:column;gap:6px;padding:6px 4px 0}
.lede .nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flabel{font-size:13px;font-weight:600;color:var(--ink-2);padding-left:4px}
.group{display:flex;flex-direction:column;gap:8px}
.foot-human{display:flex;justify-content:flex-end}
.danger-t{color:var(--danger)}
.faint{color:var(--ink-3)}
.mt-14{margin-top:14px}
.gap-12{gap:12px}.gap-14{gap:14px}
.sub.sm{font-size:14px}
.section .badge{align-self:center}
.list .row .end .badge{font-size:11.5px}

/* ---- listes à choix (radios / cases natives) ---- */
.list label.row{position:relative}
.list .row:has(input:checked) .check{opacity:1;transform:none}
.list .row:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--accent)}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-width:0;align-self:stretch}
.vrow>div{align-self:center}
.list .row.dim{color:var(--ink-3)}
.list .row.dim b{color:var(--ink-2)}

/* ---- pastilles à cocher ---- */
.chip:has(input:checked){background:var(--grad-soft);border-color:transparent;color:var(--accent)}
.chip:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent)}

/* ---- ligne média : projets, troupe ---- */
.mrow{display:grid;grid-template-columns:56px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:12px 14px 12px 12px;width:100%}
.mrow:active{transform:scale(.99)}
.mrow .ph{width:56px;height:70px;border-radius:14px;overflow:hidden;background:var(--fill);display:grid;place-items:center;color:var(--ink-3)}
.mrow .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 25%)}
.mrow .ph svg{width:24px;height:24px}
.mrow .ph.empty{background:var(--grad-soft);color:var(--accent)}
.mrow .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.mrow .nm{display:flex;align-items:center;gap:8px;min-width:0}
.mrow .nm b{font-size:16px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mrow .nm .badge{flex:0 0 auto}
.mrow .ln{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.35;letter-spacing:-.01em}
.mrow .ln.faint{color:var(--ink-3);font-size:12.5px}
.mrow .chev{width:18px;height:18px;color:var(--ink-3)}
.mrow.lg{grid-template-columns:78px minmax(0,1fr) 18px}
.mrow.lg .ph{width:78px;height:104px;border-radius:16px}

/* ---- en-tête de projet ---- */
.head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center}
.head .ph{width:64px;height:80px;border-radius:16px;overflow:hidden;background:var(--fill)}
.head .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.head .tx{min-width:0;display:flex;flex-direction:column;gap:4px}
.head .h2{overflow-wrap:anywhere}
.head .ring{width:48px;height:48px;flex-basis:48px}
.head .ring::before{inset:4px}
.head .ring b{font-size:14px}

/* ---- couleurs de marque ---- */
.swatches{display:flex;gap:12px 14px;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px;font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;text-align:center}
.swatch i{width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow-card)}
.swatch.add i{background:var(--fill);border:1px dashed var(--fill-2);box-shadow:none;display:grid;place-items:center;color:var(--ink-2)}
.swatch.add svg{width:16px;height:16px}
.dots{display:flex;gap:4px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px var(--hair)}

/* ---- petit bouton retirer ---- */
.x-mini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);flex:0 0 30px;transition:background var(--t-fast)}
.x-mini:active{background:var(--fill)}
.x-mini svg{width:12px;height:12px}
.list .row .input.bare{font-size:16px;padding:4px 0}

/* ---- zone de dépôt (un vrai champ fichier : sur iPhone, ouvre les photos ; rien n'est envoyé) ---- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:136px;padding:18px 16px;border-radius:var(--r-l);border:1.5px dashed var(--fill-2);background:var(--surface-2);text-align:center;transition:background var(--t-fast),border-color var(--t-fast)}
.drop:active{background:var(--fill)}
.drop .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent);margin-bottom:4px}
.drop .ic svg{width:22px;height:22px}
.drop b{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.drop small{font-size:12.5px;line-height:1.4;color:var(--ink-3);max-width:34ch}
.drop .done{display:none;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-weight:600;color:var(--ok)}
.drop .done svg{width:14px;height:14px}
.drop:has(input:valid){border-style:solid;border-color:var(--ok)}
.drop:has(input:valid) .done{display:inline-flex}
.drop:has(input:focus-visible){border-color:var(--accent)}
.drop.sm{min-height:0;flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:12px 14px}
.drop.sm .ic{margin:0;width:36px;height:36px;border-radius:11px;flex:0 0 36px}
.drop.sm .ic svg{width:18px;height:18px}
.drop.sm .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.drop.sm .done{margin:0 0 0 auto}

/* ---- encadrés : info, loi ---- */
.note{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:12px;align-items:center;width:100%;padding:14px;border-radius:var(--r-l);background:var(--grad-soft);color:var(--ink)}
.note:active{transform:scale(.99)}
.note .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--accent);box-shadow:var(--shadow-card)}
.note .ic svg{width:20px;height:20px}
.note b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.note small{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:2px}
.law{padding:14px 16px;border-radius:var(--r-l);background:var(--grad-soft);font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.law b{font-weight:600}
.law p+p{margin-top:6px}
.law a{color:var(--accent);font-weight:600}
.law .row-flex{margin-bottom:6px}
.law .row-flex svg{width:18px;height:18px;color:var(--accent);flex:0 0 18px}

/* ---- case d'accord (et bouton qui attend l'accord) ---- */
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-card);font-size:14.5px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.consent .box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--fill-2);display:grid;place-items:center;color:transparent;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.consent .box svg{width:14px;height:14px}
.consent:has(input:checked) .box{background:var(--grad);border-color:transparent;color:var(--on-accent)}
.consent:has(input:focus-visible) .box{box-shadow:0 0 0 3px var(--tint-a)}
.consent small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2)}
.sheet .consent{box-shadow:none;background:var(--fill)}
.gate .gated{opacity:.45;pointer-events:none;transition:opacity var(--t) var(--ease)}
.gate:has(input[data-gate]:checked) .gated{opacity:1;pointer-events:auto}
.gate-hint{font-size:12.5px;color:var(--ink-3);text-align:center;transition:opacity var(--t-fast)}
.gate:has(input[data-gate]:checked) .gate-hint{opacity:0}

/* ---- lecture d'une voix ---- */
.play{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent);flex:0 0 34px;transition:transform var(--t-fast) var(--ease)}
.play:active{transform:scale(.9)}
.play svg{width:13px;height:13px;margin-left:2px}
.rec{display:flex;flex-direction:column;align-items:center;gap:10px;align-self:center;font-size:14px;font-weight:600;color:var(--ink-2);text-align:center}
.rec .dot{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-float),inset 0 0 0 1px var(--hair)}
.rec .dot i{width:30px;height:30px;border-radius:50%;background:var(--grad)}
.rec:active .dot{transform:scale(.96)}

/* ---- tuiles : visages, décors ---- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.tile{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
.tile .im{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-m);overflow:hidden;background:var(--fill);box-shadow:var(--shadow-card);transition:box-shadow var(--t-fast)}
.tile .im img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.tile b{font-size:14px;font-weight:600;letter-spacing:-.015em;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{font-size:12px;color:var(--ink-3);padding:0 2px;margin-top:-5px;line-height:1.3}
.tile .tick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--glass-bg);border:1px solid var(--glass-border);color:transparent;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background var(--t-fast),color var(--t-fast)}
.tile .tick svg{width:13px;height:13px}
.tile:has(input:checked) .tick{background:var(--grad);border-color:transparent;color:var(--on-accent)}
.tile:has(input:checked) .im{box-shadow:0 0 0 2.5px var(--accent-b),var(--shadow-card)}
.tile:has(input:focus-visible) .im{box-shadow:0 0 0 2.5px var(--accent)}
.tile .flag{position:absolute;left:6px;bottom:6px;right:6px;justify-content:center}
.tile.soon .im{display:grid;place-items:center;align-content:center;gap:6px;background:var(--surface-2);border:1.5px dashed var(--fill-2);box-shadow:none;color:var(--ink-3)}
.tile.soon .im svg{width:22px;height:22px}
.tile.soon .im span{font-size:12px;font-weight:600}
.tile.soon b{color:var(--ink-2)}
.tiles.three .tile b{font-size:13px}

/* ---- segments dérivés du .seg du socle (même mécanique app.js : data-show / data-pane) ---- */
.seg.etapes button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;font-size:13.5px}
.seg.etapes button i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--fill-2);color:var(--ink-2);flex:0 0 18px}
.seg.etapes button.on i{background:var(--grad);color:var(--on-accent)}
.seg.choices{flex-direction:column;gap:10px;padding:0;background:none;border-radius:0}
.seg.choices button{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:14px;align-items:center;flex:none;min-height:0;padding:15px 16px;border-radius:var(--r-l);background:var(--surface);border:1.5px solid transparent;box-shadow:var(--shadow-card);color:var(--ink);font-weight:400;font-size:15px;text-align:left;transition:border-color var(--t-fast),background var(--t) var(--ease)}
.seg.choices button .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.seg.choices button .ic svg{width:22px;height:22px}
.seg.choices button b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.seg.choices button small{display:block;margin-top:2px;font-size:13px;color:var(--ink-2);line-height:1.35}
.seg.choices button .check{width:22px;height:22px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity var(--t-fast),transform var(--t) var(--ease)}
.seg.choices button.on{border-color:var(--accent-b);background:var(--surface);box-shadow:var(--shadow-card)}
.seg.choices button.on .ic{background:var(--grad);color:var(--on-accent)}
.seg.choices button.on .check{opacity:1;transform:none}
.seg.filters{gap:6px;padding:2px 16px 4px;margin:0 -16px;background:none;border-radius:0;overflow-x:auto;scrollbar-width:none}
.seg.filters::-webkit-scrollbar{display:none}
.seg.filters button{flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--fill);border:1px solid var(--hair);font-weight:500;color:var(--ink)}
.seg.filters .on{background:var(--grad-soft);border-color:transparent;color:var(--accent);box-shadow:none}

/* ---- thèmes : aperçus vivants (chaque aperçu porte son propre data-theme) ---- */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.theme-card{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-card);border:1.5px solid transparent;min-width:0;transition:border-color var(--t-fast),transform var(--t-fast) var(--ease)}
.theme-card:active{transform:scale(.98)}
.theme-card.on{border-color:var(--accent-b)}
.theme-prev{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--bg);padding:10px 9px;display:flex;flex-direction:column;gap:7px;box-shadow:inset 0 0 0 1px var(--hair)}
.theme-prev::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 55% at 10% 0%,var(--tint-a),transparent 70%),radial-gradient(70% 45% at 100% 30%,var(--tint-b),transparent 70%)}
.theme-prev>*{position:relative}
.theme-prev .pb{height:15px;border-radius:var(--r-pill);background:var(--glass-bg);border:1px solid var(--glass-border)}
.theme-prev .pt{height:9px;width:62%;border-radius:4px;background:var(--ink);opacity:.85;margin-top:4px}
.theme-prev .pc{border-radius:10px;background:var(--surface);padding:8px 7px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow-card)}
.theme-prev .pl{height:5px;border-radius:3px;background:var(--fill-2)}
.theme-prev .pl.s{width:58%}
.theme-prev .pbtn{height:15px;border-radius:5px;background:var(--grad);margin-top:2px}
.theme-prev .pbot{margin-top:auto;display:flex;justify-content:center}
.theme-prev .phub{width:20px;height:20px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-card)}
.theme-card .meta{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:8px;align-items:center;padding:0 4px 2px}
.theme-card .meta b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.theme-card .meta small{display:block;font-size:12px;color:var(--ink-2);line-height:1.3;margin-top:2px}
.theme-card .check{width:20px;height:20px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity var(--t-fast),transform var(--t) var(--ease)}
.theme-card.on .check{opacity:1;transform:none}
.soon-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:var(--r-l);background:var(--surface-2);border:1.5px dashed var(--fill-2)}
.soon-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--fill);color:var(--ink-2)}
.soon-card .ic svg{width:20px;height:20px}
.soon-card b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.soon-card small{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:2px}

/* ---- grandes images ---- */
.portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--fill);box-shadow:var(--shadow-card)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.wide-im{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:9/5;background:var(--fill);box-shadow:var(--shadow-card);display:grid;place-items:center;color:var(--accent)}
.wide-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.wide-im.empty{background:var(--grad-soft)}
.wide-im.empty svg{width:46px;height:46px}
.wide-im .badge{position:absolute;left:10px;bottom:10px}

/* ---- carte produit ---- */
.prod{display:flex;flex-direction:column;gap:12px;padding:10px 10px 14px;width:100%}
.prod:active{transform:scale(.99)}
.prod .wide-im{box-shadow:none;border-radius:var(--r-m)}
.prod .tx{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:4px 10px;align-items:center;padding:0 6px}
.prod .tx b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.prod .tx .ln{grid-column:1;font-size:14px;color:var(--ink-2);line-height:1.35}
.prod .tx .ln.faint{color:var(--ink-3);font-size:12.5px}
.prod .tx .chev{grid-column:2;grid-row:1/span 3;width:18px;height:18px;color:var(--ink-3)}

/* ---- ajout (tuile large en pointillé) ---- */
.add-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:16px;border-radius:var(--r-l);border:1.5px dashed var(--fill-2);background:var(--surface-2);color:var(--ink)}
.add-card:active{background:var(--fill)}
.add-card .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);color:var(--accent)}
.add-card .ic svg{width:22px;height:22px}
.add-card b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.add-card small{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:2px}

/* ---- accords (consentements) ---- */
.rec-card{display:flex;flex-direction:column;gap:12px}
.rec-card .top{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.rec-card .top .avatar{width:40px;height:40px;flex-basis:40px}
.rec-card .top b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.rec-card .top small{display:block;font-size:13px;color:var(--ink-2);margin-top:1px}
.rec-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:14px;line-height:1.35;padding-top:12px;border-top:1px solid var(--hair)}
.rec-card dt{color:var(--ink-3)}
.rec-card dd{color:var(--ink);min-width:0}
.rec-card .btn{align-self:flex-start}

/* ---- divers ---- */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;font-size:14px;line-height:1.35}
.kv dt{color:var(--ink-3)}
.kv dd{color:var(--ink);min-width:0}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;font-size:12px;color:var(--ink-3);margin-top:-6px}