/* ============================================================
   LE DÉCLIC — feuille maîtresse
   Design system V6 « SHOWROOM » de wolfilmz.com (theme-v6.css),
   étendu pour le pipeline d'idéation.
   Doctrine : liserés internes lumineux, quasi aucune drop-shadow,
   jamais de scale sur les boutons, 1 famille / 2 tons.
   ⚠ Le :root ci-dessous est une COPIE de theme-v6.css?v=3 —
   resynchroniser à chaque changement de tokens du site
   (notamment le jour où l'accent silver sera tranché).
   Choix assumé : les chips à contenu libre (noms de projets)
   gardent leur casse, seuls les tags système sont en uppercase.
   ============================================================ */

:root{
  /* murs */
  --bg:#060606;
  --wall:#0C0C0E;
  --card:#141416;
  --card-2:#1C1C1F;
  --seam:#232326;

  /* texte */
  --txt:#F2F3F2;
  --txt-2:#9A9C9A;

  /* accent silver */
  --accent:#B1B7B4;
  --accent-hi:#C6CCC9;
  --accent-ink:#060606;

  /* rayons */
  --r-hero:32px;
  --r-card:16px;
  --r-el:12px;
  --r-btn:8px;
  --r-pill:999px;

  /* motion */
  --t-fast:.18s;
  --t-med:.5s;
  --t-rev:.8s;
  --e-std:cubic-bezier(.4,0,.2,1);
  --e-soft:cubic-bezier(.1,.1,.2,1);
  --e-rev:cubic-bezier(.22,.04,.16,1);

  /* verre */
  --glass-line:rgba(255,255,255,.14);
  --glass-in:inset .5px .5px .5px rgba(255,255,255,.20),
             inset -.5px -.5px .5px rgba(255,255,255,.08);
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));

  /* rythme */
  --gutter:clamp(16px,2.2vw,28px);
  --font:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  /* pipeline — teintes de stade (discrètes, jamais criardes) */
  --st-etincelle:#C9A96A;
  --st-ecriture:#8FA8C9;
  --st-storyboard:#A98FC9;
  --st-pret:#8FCB9B;

  /* zone rouge */
  --danger:#C98F8F;
  --danger-line:rgba(201,143,143,.35);
  --danger-bg:rgba(201,143,143,.08);
}
@media (max-width:768px){ :root{ --r-hero:20px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- typo ---------- */
.h-xl{ font-size:clamp(44px,6.2vw,80px); font-weight:700; line-height:1.02; letter-spacing:-.04em; margin:0; }
.h-lg{ font-size:clamp(32px,3.8vw,52px); font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0; }
.h-md{ font-size:clamp(24px,2.6vw,37px); font-weight:700; line-height:1.12; margin:0; }
.h-xl .dim,.h-lg .dim,.h-md .dim{ color:var(--txt-2); font-weight:400; }
.tagline{
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--txt-2); margin:0 0 14px;
}
.lead{ font-size:clamp(16px,1.4vw,20px); color:var(--txt-2); font-weight:400; margin:0; max-width:36em; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border:0; border-radius:var(--r-pill);
  font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer;
  background:var(--card-2); color:var(--txt);
  box-shadow:var(--glass-in);
  transition:background-color var(--t-fast) var(--e-std), box-shadow var(--t-fast) var(--e-std);
}
.btn:hover{ background:#2A2A2E; }
.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.btn--accent:hover{ background:var(--accent-hi); }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 1px var(--glass-line); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); }
.btn--danger{ background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger-line); }
.btn--danger:hover{ background:var(--danger-bg); }
.btn--sm{ padding:9px 16px; font-size:13px; }
:where(a,button):focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(177,183,180,.35); }

/* ---------- nav : verre dépoli ---------- */
.dcl-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-left)) 14px;
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  background:rgba(6,6,6,.55);
  -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dcl-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.dcl-brand img{ height:26px; width:auto; }
.dcl-brand span{ font-weight:700; letter-spacing:.08em; font-size:15px; white-space:nowrap; }
.dcl-brand .dim{ color:var(--txt-2); font-weight:400; }
.dcl-nav-actions{ display:flex; align-items:center; gap:10px; }
@media (max-width:600px){
  .dcl-brand span b{ display:none; }        /* cache « WOLFILMZ · » sur mobile */
  .btn--nav{ padding:10px 18px; font-size:13.5px; }
}

/* ---------- reveals ---------- */
.rv{
  opacity:0; transform:translateY(50px);
  transition:opacity var(--t-rev) var(--e-rev) var(--d,0s),
             transform var(--t-rev) var(--e-rev) var(--d,0s);
}
.rv--soft{ transform:translateY(12px); transition-duration:var(--t-med),var(--t-med); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv,.rv--soft{ opacity:1; transform:none; transition:none; }
}

/* ---------- structure de page ---------- */
.dcl-main{
  padding:calc(64px + env(safe-area-inset-top) + clamp(28px,5vw,64px))
          max(var(--gutter), env(safe-area-inset-right))
          calc(96px + env(safe-area-inset-bottom))
          max(var(--gutter), env(safe-area-inset-left));
  max-width:1280px; margin:0 auto;
}
.dcl-head{ margin-bottom:clamp(24px,3.5vw,44px); }

/* ---------- verrou (garde) ---------- */
#dcl-verrou{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,.88);
  -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4);
  padding:var(--gutter);
}
.verrou-carte{
  width:min(400px,100%); padding:34px 30px;
  border-radius:var(--r-card);
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in);
  display:flex; flex-direction:column; gap:18px;
}
.verrou-carte input{
  width:100%; border:0; outline:none;
  background:var(--card); color:var(--txt);
  border-radius:var(--r-el);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:var(--font); font-size:15.5px; padding:15px 18px;
  transition:box-shadow var(--t-fast) var(--e-std), background-color var(--t-fast) var(--e-std);
}
.verrou-carte input:focus{
  background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(177,183,180,.18);
}
.verrou-err{ margin:0; font-size:13px; color:var(--danger); }
.verrou-aide{ margin:0; font-size:12.5px; line-height:1.5; color:var(--txt-2); }

/* ============================================================
   CAPTURE — l'écran d'entrée
   ============================================================ */
.cap-tuiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(20px,3vw,34px);
}
@media (max-width:900px){ .cap-tuiles{ grid-template-columns:repeat(2,1fr); } }
.cap-tuile{
  border:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  min-height:150px; padding:20px;
  border-radius:var(--r-card);
  background:var(--card); color:var(--txt);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:var(--font);
  transition:background-color var(--t-med) var(--e-std), box-shadow var(--t-med) var(--e-std);
}
.cap-tuile:hover{ background:var(--card-2); box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in); }
.cap-tuile.on{ background:var(--txt); color:var(--bg); box-shadow:none; }
.cap-tuile .ti{ width:26px; height:26px; }
.cap-tuile b{ font-size:15px; font-weight:700; letter-spacing:.02em; }
.cap-tuile small{ display:block; font-size:12.5px; font-weight:400; color:var(--txt-2); margin-top:3px; }
.cap-tuile.on small{ color:rgba(6,6,6,.6); }

/* formulaire de capture — panneau de verre */
.cap-form{
  margin-top:18px; padding:clamp(20px,3vw,32px);
  border-radius:var(--r-card);
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in);
  display:flex; flex-direction:column; gap:18px;
}
.cap-form[hidden]{ display:none; }
.f-label{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-2); margin:0 0 8px;
}
.f-champ input[type="text"],
.f-champ input[type="url"],
.f-champ textarea{
  width:100%; border:0; outline:none;
  background:var(--card); color:var(--txt);
  border-radius:var(--r-el);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:var(--font); font-size:15.5px; line-height:1.5;
  padding:15px 18px;
  transition:box-shadow var(--t-fast) var(--e-std), background-color var(--t-fast) var(--e-std);
}
.f-champ ::placeholder{ color:var(--txt-2); opacity:.7; }
.f-champ input:focus,.f-champ textarea:focus{
  background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(177,183,180,.18);
}
.f-champ textarea{ resize:vertical; min-height:110px; }

/* pilules (projets, stades, choix) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:0; cursor:pointer;
  padding:11px 20px; border-radius:var(--r-pill);
  font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--txt-2); background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background-color var(--t-med) var(--e-std), color var(--t-med) var(--e-std),
             box-shadow var(--t-med) var(--e-std);
}
.chip:hover{ color:var(--txt); background:var(--card-2); }
.chip.on{ background:var(--txt); color:var(--bg); box-shadow:none; }

/* dropzone fichier */
.f-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:130px; padding:22px; cursor:pointer; text-align:center;
  border-radius:var(--r-el);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:var(--txt-2); font-size:14px;
  transition:background-color var(--t-fast) var(--e-std), box-shadow var(--t-fast) var(--e-std);
}
.f-drop:hover,.f-drop.sur{ background:var(--card-2); box-shadow:inset 0 0 0 1px var(--glass-line); color:var(--txt); }
.f-drop .ti{ width:24px; height:24px; }
.f-drop input{ display:none; }
.f-drop .apercu{ max-height:180px; border-radius:var(--r-btn); }

/* barre de progression d'upload */
.f-prog{ height:3px; border-radius:2px; background:var(--card-2); overflow:hidden; }
.f-prog i{ display:block; height:100%; width:0; background:var(--accent); transition:width var(--t-fast) linear; } /* jauge : linéaire volontaire, elle suit la donnée */

/* confirmation de capture */
.cap-ok{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:clamp(24px,3vw,36px);
  border-radius:var(--r-card);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.cap-ok .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--st-pret);
  box-shadow:0 0 8px rgba(143,203,155,.8);
  animation:pulse-dcl 2.4s var(--e-std) infinite;
}
@keyframes pulse-dcl{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================================================
   LE TABLEAU — kanban pipeline
   ============================================================ */
.tb-filtres{ margin:18px 0 26px; display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.tb-filtres::-webkit-scrollbar{ display:none; }
.tb-filtres .chip{ flex:0 0 auto; }

.tb-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  align-items:start;
}
@media (max-width:1000px){
  .tb-cols{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:12px; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 8px;
    scrollbar-width:none;
  }
  .tb-cols::-webkit-scrollbar{ display:none; }
  .tb-col{ flex:0 0 82vw; max-width:360px; scroll-snap-align:center; }
}
.tb-col{
  border-radius:var(--r-card);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  padding:14px;
  min-height:220px;
}
.tb-col-titre{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-2); padding:4px 6px 14px;
}
.tb-col-titre i{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.tb-col-titre .n{ margin-left:auto; font-weight:400; }
.tb-col[data-stade="etincelle"] .tb-col-titre i{ background:var(--st-etincelle); }
.tb-col[data-stade="ecriture"] .tb-col-titre i{ background:var(--st-ecriture); }
.tb-col[data-stade="storyboard"] .tb-col-titre i{ background:var(--st-storyboard); }
.tb-col[data-stade="pret"] .tb-col-titre i{ background:var(--st-pret); }
.tb-col.sur{ box-shadow:inset 0 0 0 1px var(--glass-line); }

.tb-cartes{ display:flex; flex-direction:column; gap:10px; min-height:60px; }

/* carte idée */
.carte{
  display:block; cursor:pointer; overflow:hidden;
  border-radius:var(--r-el);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background-color var(--t-med) var(--e-std), box-shadow var(--t-med) var(--e-std),
             opacity var(--t-fast) var(--e-std);
}
.carte:hover{ background:var(--card-2); box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in); }
.carte.trainee{ opacity:.35; }
.carte-cover{ position:relative; aspect-ratio:16/9; background:var(--card-2); overflow:hidden; }
.carte-cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-med) var(--e-std); }
.carte:hover .carte-cover img{ transform:scale(1.05); }
.carte-cover .ti{
  position:absolute; inset:0; margin:auto; width:30px; height:30px; color:var(--txt-2);
}
.carte-corps{ padding:13px 15px 15px; display:flex; flex-direction:column; gap:9px; }
.carte-titre{ font-size:15px; font-weight:600; line-height:1.3; margin:0; }
.carte-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4.5px 11px; border-radius:var(--r-pill);
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-2); background:var(--card-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.tag .ti{ width:12px; height:12px; }
.tag--projet{ color:var(--txt); }
.tag--projet i{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.carte-nbs{ margin-left:auto; font-size:11px; color:var(--txt-2); display:flex; gap:9px; }

.tb-vide{
  padding:20px 6px; text-align:center;
  font-size:13px; color:var(--txt-2);
}

/* ============================================================
   FICHE IDÉE
   ============================================================ */
.id-retour{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:var(--txt-2);
  margin-bottom:18px;
  transition:color var(--t-fast) var(--e-std);
}
.id-retour .ti{ width:15px; height:15px; }
.id-retour:hover{ color:var(--txt); }

.id-titre{
  width:100%; border:0; outline:none; background:transparent; color:var(--txt);
  font-family:var(--font); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(30px,3.6vw,48px); line-height:1.08; padding:0; margin:0 0 14px;
}
.id-titre::placeholder{ color:var(--txt-2); opacity:.5; }

.id-barre{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:26px; }

/* stade en pilules */
.stades .chip[data-stade="etincelle"].on{ background:var(--st-etincelle); color:var(--bg); }
.stades .chip[data-stade="ecriture"].on{ background:var(--st-ecriture); color:var(--bg); }
.stades .chip[data-stade="storyboard"].on{ background:var(--st-storyboard); color:var(--bg); }
.stades .chip[data-stade="pret"].on{ background:var(--st-pret); color:var(--bg); }

.id-grille{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:start; }
@media (max-width:1000px){ .id-grille{ grid-template-columns:1fr; } }

.panneau{
  border-radius:var(--r-card);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  padding:clamp(18px,2.4vw,26px);
  display:flex; flex-direction:column; gap:16px;
}
.panneau > .f-label{ margin:0; }

/* la source d'inspiration */
.src-img{ border-radius:var(--r-el); overflow:hidden; }
.src-lien{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:var(--r-pill);
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-size:14px; font-weight:600; color:var(--txt);
  transition:box-shadow var(--t-fast) var(--e-std);
  word-break:break-all;
}
.src-lien:hover{ box-shadow:inset 0 0 0 1px var(--glass-line); }
.src-lien .ti{ width:16px; height:16px; flex:0 0 auto; }
.src-audio{ width:100%; border-radius:var(--r-el); }
/* lecteur natif assumé (un invert hasardeux rend pire sur iOS) — mini-lecteur maison prévu en phase 2 */

.id-notes{ min-height:130px; }
.autosave{ font-size:11.5px; color:var(--txt-2); letter-spacing:.06em; text-transform:uppercase; }

/* onglets script / storyboard / moodboard */
.id-onglets{ display:flex; gap:8px; flex-wrap:wrap; }
.id-vue[hidden]{ display:none; }

/* script */
.script-zone{
  width:100%; min-height:min(52vh,560px); border:0; outline:none; resize:vertical;
  background:var(--card); color:var(--txt);
  border-radius:var(--r-el);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:var(--font); font-size:16.5px; line-height:1.75;
  padding:clamp(18px,2.4vw,28px);
  transition:box-shadow var(--t-fast) var(--e-std), background-color var(--t-fast) var(--e-std);
}
.script-zone:focus{ background:var(--card-2); box-shadow:inset 0 0 0 1px var(--accent); } /* ring externe omis exprès : la grande zone d'écriture reste calme */
.script-pied{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.script-pied .mots{ font-size:12px; color:var(--txt-2); }

/* storyboard */
.sb-liste{ display:flex; flex-direction:column; gap:12px; }
.sb-case{
  display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:14px; align-items:start;
  padding:14px; border-radius:var(--r-el);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
@media (max-width:700px){ .sb-case{ grid-template-columns:1fr; } }
.sb-num{
  position:absolute; top:8px; left:8px; z-index:2;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:11.5px; font-weight:700;
  background:rgba(6,6,6,.55); color:var(--txt);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.sb-visuel{ position:relative; border-radius:var(--r-btn); overflow:hidden; aspect-ratio:16/9; background:var(--card-2); cursor:pointer; }
.sb-visuel img{ width:100%; height:100%; object-fit:cover; }
.sb-visuel .vide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--txt-2); font-size:12px; }
.sb-txt textarea{
  width:100%; border:0; outline:none; resize:vertical; min-height:76px;
  background:transparent; color:var(--txt);
  font-family:var(--font); font-size:14.5px; line-height:1.55; padding:2px 0;
}
.sb-txt input{
  border:0; outline:none; background:transparent; color:var(--txt-2);
  font-family:var(--font); font-size:12.5px; width:90px;
}
.sb-outils{ display:flex; flex-direction:column; gap:6px; }
.sb-outils .btn{ padding:7px 12px; font-size:12px; }

/* moodboard */
.mb-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.mb-item{ position:relative; border-radius:var(--r-btn); overflow:hidden; aspect-ratio:1; background:var(--card-2); }
.mb-item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-med) var(--e-std); }
.mb-item:hover img{ transform:scale(1.05); }
.mb-item .x{
  position:absolute; top:6px; right:6px; border:0; cursor:pointer;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,.55); color:var(--txt);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:0; transition:opacity var(--t-fast) var(--e-std);
}
.mb-item:hover .x{ opacity:1; }
.mb-ajout{ aspect-ratio:1; min-height:0; }

/* partage */
.part-lien{
  display:flex; align-items:center; gap:10px;
  padding:13px 18px; border-radius:var(--r-el);
  background:var(--card); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:13.5px; color:var(--txt-2); word-break:break-all;
}
.part-lien b{ color:var(--txt); font-weight:500; }

/* ============================================================
   PAGE CLIENT (/p/<token>) — la vitrine
   ============================================================ */
.pc-hero{
  position:relative; min-height:min(72vh,640px);
  display:flex; align-items:flex-end;
  border-radius:var(--r-hero); overflow:hidden;
  margin:calc(64px + 18px) var(--gutter) 18px;
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.pc-hero-img{ position:absolute; inset:0; }
.pc-hero-img img{ width:100%; height:100%; object-fit:cover; }
.pc-hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,6,6,.18) 0%,rgba(6,6,6,.34) 55%,rgba(6,6,6,.86) 100%);
}
.pc-hero-contenu{ position:relative; padding:clamp(24px,4vw,56px); max-width:820px; }
.pc-sections{ max-width:960px; margin:0 auto; padding:0 var(--gutter) 40px; }
.pc-sec{ margin-top:clamp(48px,7vw,110px); }
.pc-script{
  font-size:clamp(16.5px,1.5vw,19px); line-height:1.8; color:var(--txt);
  white-space:pre-wrap; max-width:42em;
}
.pc-sb-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.pc-sb-case{
  border-radius:var(--r-el); overflow:hidden;
  background:var(--card); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.pc-sb-case .visu{ position:relative; aspect-ratio:16/9; background:var(--card-2); }
.pc-sb-case .visu img{ width:100%; height:100%; object-fit:cover; }
.pc-sb-case .txt{ padding:14px 16px 16px; font-size:14px; line-height:1.55; color:var(--txt-2); }
.pc-sb-case .txt b{ color:var(--txt); font-weight:600; display:block; margin-bottom:4px; font-size:12px; letter-spacing:.1em; }
.pc-mb-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.pc-mb-grille img{ border-radius:var(--r-btn); aspect-ratio:1; object-fit:cover; width:100%; }
.pc-pied{
  margin-top:clamp(48px,7vw,110px);
  padding:34px var(--gutter) calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--txt-2); font-size:13px;
}
.pc-pied img{ height:22px; opacity:.85; }
.pc-pied .sig{ display:flex; align-items:center; gap:12px; }

/* ---------- divers ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(16px);
  z-index:300; opacity:0; pointer-events:none;
  padding:12px 22px; border-radius:var(--r-pill);
  background:rgba(12,12,14,.72);
  -webkit-backdrop-filter:blur(28px) saturate(1.4); backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in);
  font-size:14px; font-weight:600;
  transition:opacity var(--t-fast) var(--e-std), transform var(--t-fast) var(--e-std);
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (pointer:coarse){
  /* en bas, le clavier iOS cacherait le toast — on le monte sous la nav */
  .toast{ bottom:auto; top:calc(74px + env(safe-area-inset-top)); transform:translateX(-50%) translateY(-16px); }
  .toast.on{ transform:translateX(-50%) translateY(0); }
}
.autosave.err{ color:var(--danger); }
.ti{
  stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;
  width:18px; height:18px; flex:0 0 auto;   /* taille par défaut — sinon un SVG nu fait 300×150 */
}
[hidden]{ display:none !important; }

/* ---------- tactile : Safari iOS et les doigts ---------- */
@media (pointer:coarse){
  /* 16px minimum sur tout champ, sinon Safari zoome à chaque focus */
  .f-champ input[type="text"], .f-champ input[type="url"], .f-champ textarea,
  .verrou-carte input, .script-zone, .sb-txt textarea, .sb-txt input, .id-titre{ font-size:16px; }
  .id-titre{ font-size:clamp(30px,3.6vw,48px); } /* déjà > 16px, on le garde tel quel */
  /* cibles tactiles ≥ 44px */
  .btn--sm{ min-height:44px; }
  .chip{ min-height:44px; display:inline-flex; align-items:center; }
  .sb-outils .btn{ min-height:44px; min-width:44px; justify-content:center; }
  .sb-outils{ gap:10px; }
  /* la croix du moodboard : visible sans hover, zone tactile élargie */
  .mb-item .x{ opacity:1; width:32px; height:32px; }
  .mb-item .x::after{ content:''; position:absolute; inset:-8px; }
}