/* =====================================================================
   COMPOSANTS DE LA MAQUETTE · partagés par l'outil et l'espace mariés
   Pile de cartes à glisser, tons YID, pastille de validation, Voir plus,
   bouton pour remonter, débordements maîtrisés.
   ===================================================================== */
/* Rien ne dépasse : les mots longs (adresses, numéros) se coupent proprement */
p,li,td,.muted,.small,.lead,.meta,.sub,.bas,b,span,a,label,h1,h2,h3{ overflow-wrap:anywhere; }
td,th{ overflow-wrap:normal; }
img,svg,video{ max-width:100%; }

/* Pile de cartes */
.pile2{ position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; margin-right:46px; }
.pile2 > .sc{ position:absolute; inset:0; border-radius:30px; padding:22px; transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;
  -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08),0 2px 6px rgba(30,20,10,.08),0 24px 50px -16px rgba(30,20,10,.38);
  display:flex; flex-direction:column; overflow:hidden; }
.pile2 > .sc.drag{ transition:none; will-change:transform; }
.pile2{ isolation:isolate; contain:layout style; }
.pile2 > .sc::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(150deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 40%); pointer-events:none; }
.pile2 > .sc > *{ position:relative; z-index:1; }
.t-espresso{ background:rgba(40,31,24,.82); color:#F6EEDF; }
.t-champagne{ background:rgba(201,167,118,.86); color:#1D1813; }
.t-sable{ background:rgba(234,222,203,.88); color:#1D1813; }
.t-cacao{ background:rgba(92,65,47,.84); color:#F6EEDF; }
.t-ivoire{ background:rgba(253,250,245,.9); color:#1D1813; }
.sc .sub{ opacity:.68; }
.sc .k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; opacity:.7; }
.sc .nomc{ font:600 26px/1.05 "Cormorant Garamond",Georgia,serif; }
.sc .ini{ width:50px; height:50px; border-radius:25px; flex:0 0 50px; display:flex; align-items:center; justify-content:center; font:600 19px/1 "Cormorant Garamond",serif; background:rgba(255,255,255,.14); }
.t-champagne .ini,.t-sable .ini,.t-ivoire .ini{ background:rgba(29,24,19,.08); }
.sc .alerte{ margin-top:14px; padding:10px 14px; border-radius:16px; font-size:12.5px; display:flex; align-items:center; gap:8px; background:rgba(163,65,47,.12); }
.t-espresso .alerte,.t-cacao .alerte{ background:rgba(239,170,150,.14); color:#F2C2B4; }
.sc .ch{ min-height:38px; padding:0 14px; border-radius:19px; border:1px solid rgba(127,112,98,.38); background:rgba(255,255,255,.1); color:inherit; font:500 12.5px Inter,sans-serif; letter-spacing:0; text-transform:none; box-shadow:none; cursor:pointer; }
.sc .ch.sel,.t-espresso .ch.sel,.t-cacao .ch.sel{ background:#F6EEDF; color:#1D1813; border-color:#F6EEDF; }
.t-champagne .ch.sel,.t-sable .ch.sel,.t-ivoire .ch.sel{ background:#1D1813; color:#F6EEDF; border-color:#1D1813; }
.sc .rond{ width:38px; height:38px; border-radius:19px; border:1px solid rgba(127,112,98,.38); display:inline-flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; background:transparent; padding:0; min-height:0; box-shadow:none; }
.sc .lienbas{ background:none; border:0; box-shadow:none; padding:0; min-height:0; color:inherit; font:500 12.5px Inter,sans-serif; letter-spacing:0; text-transform:none; text-decoration:underline; text-underline-offset:3px; opacity:.8; cursor:pointer; }
/* Pastille de validation : toucher pour décocher */
.okmark{ position:absolute; top:16px; right:16px; z-index:3; width:32px; height:32px; border-radius:16px; background:#5F9E73; border:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:.3s; padding:0; min-height:0; box-shadow:0 4px 12px rgba(40,90,60,.35); cursor:pointer; }
.sc.valide .okmark{ opacity:1; transform:scale(1); }
.shake{ animation:sh .4s; }
@keyframes sh{ 20%{ transform:translateX(-10px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(3px); } }
.metap{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; margin:0 0 12px; }
.hint{ display:flex; align-items:center; gap:6px; opacity:.6; }
.dots{ display:flex; gap:5px; justify-content:center; margin-top:16px; }
.dots i{ width:6px; height:6px; border-radius:3px; background:currentColor; opacity:.22; transition:.3s; }
.dots i.on{ width:18px; opacity:.85; }
.cta{ width:100%; min-height:56px; border-radius:28px; border:0; display:flex; align-items:center; justify-content:center; gap:8px; font:600 14px Inter,sans-serif; letter-spacing:.02em; text-transform:none; cursor:pointer; }
.cta.or{ background:linear-gradient(160deg,#EBD6B0,#D4B07A); color:#1D1813; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -12px rgba(120,80,30,.55); }
.cta.encre{ background:#1D1813; color:#F6EEDF; box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 14px 30px -12px rgba(0,0,0,.5); }

/* Voir plus : un texte long replié sur deux lignes */
.replie{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.voirplus{ background:none; border:0; box-shadow:none; padding:4px 0; min-height:0; color:var(--gold,#B8956A); font:500 12.5px Inter,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }

/* Remonter en haut de page */
#remonter{ position:fixed; right:18px; bottom:calc(98px + env(safe-area-inset-bottom)); z-index:49; width:46px; height:46px; border-radius:23px; padding:0; min-height:0;
  display:flex; align-items:center; justify-content:center; background:rgba(255,253,249,.72); color:#1D1813; border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px -8px rgba(80,55,30,.3);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.3s; }
#remonter.on{ opacity:1; transform:none; pointer-events:auto; }
:root[data-theme="sombre"] #remonter{ background:rgba(40,30,22,.72); color:#E4CDA4; border-color:rgba(255,236,210,.14); }
@media (min-width:1000px){ #remonter{ bottom:30px; right:30px; } }
.pile2 > .sc.t-photo{ padding:0; background:#1A140F; color:#F6EEDF; border-color:rgba(255,255,255,.22); }
.pile2 > .sc.t-photo::after{ background:linear-gradient(150deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 35%); }
.pile2 > .sc.t-photo > *{ position:absolute; }
.pile2 > .sc.t-photo > img{ inset:0; }
.pile2 > .sc.t-photo > .ombre{ inset:0; }
@media (min-width:861px){ #b-fiches .pile2{ max-width:560px; } #b-fiches .metap,#b-fiches .dots,#b-fiches #valider{ max-width:606px; } #b-fiches .dots{ justify-content:center; } }

/* Choix de la source d'une photo */
#choixphoto .choix{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line,rgba(120,90,60,.14)); cursor:pointer; }
#choixphoto .choix:last-of-type{ border-bottom:0; }
#choixphoto .pic{ width:44px; height:44px; border-radius:22px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; background:var(--cream,rgba(255,253,249,.6)); border:1px solid var(--edge,rgba(255,255,255,.8)); }
#choixphoto b{ display:block; font-size:15px; } #choixphoto small{ display:block; font-size:12px; opacity:.6; margin-top:2px; }

/* Fluidité sur téléphone : le flou en temps réel coûte cher quand il se répète sur des dizaines de cartes.
   On le garde sur la barre, les feuilles et la carte de tête ; ailleurs, un verre dépoli peint, sans calcul. */
@media (max-width:860px){
  .fiche,.kpi,.bloc > .bh,.toolbar .grp,.card,.verre,.wrap,.steps,.step,.tableau th:first-child,.tableau td:first-child,.tableau thead th,.inv,.chiffre,.fait,.surface{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .fiche,.kpi,.bloc > .bh,.toolbar .grp,.card,.verre,.wrap{ background:var(--glass2); }
  .pile2 > .sc{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  body::before{ filter:none; background:radial-gradient(circle,rgba(212,176,122,.28) 0%,rgba(212,176,122,0) 70%) !important; }
  body::after{ filter:none; background:radial-gradient(circle,rgba(170,128,92,.18) 0%,rgba(170,128,92,0) 70%) !important; }
  :root[data-theme="sombre"] body::after{ background:radial-gradient(circle,rgba(120,80,50,.35) 0%,rgba(120,80,50,0) 70%) !important; }
}
/* ---------- appel guidé ---------- */
.appel{ max-width:1080px; margin:0 auto; }
.appel .tete{ display:flex; align-items:center; gap:12px; margin:4px 0 6px; }
.appel .pastille{ position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:23px; background:linear-gradient(160deg,#3A2E24,#1D1813); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.appel .pastille img{ width:24px; }
.appel .pastille i{ position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:6px; background:#5F9E73; border:2px solid var(--bg,#F4EEE6); }
.appel .quitter{ height:38px; min-height:0; padding:0 16px; border-radius:19px; border:0; background:linear-gradient(160deg,#A6463A,#7E2D22); color:#fff; font:600 12.5px Inter,sans-serif; letter-spacing:0; text-transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); cursor:pointer; }
.appel .prog{ display:flex; align-items:center; gap:14px; margin:16px 0 12px; }
.appel .prog .barre{ flex:1; height:8px; border-radius:4px; background:rgba(127,112,98,.18); overflow:hidden; }
.appel .prog .barre i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#CDAE7E,#EFDDBC); transition:width .5s; }
.appel .prog span{ font-size:12.5px; font-weight:600; color:#B8955F; }
.appel .pile2 > .sc{ overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; }
.appel .sc.solo{ position:relative; border-radius:30px; padding:24px; }
.appel .exig{ margin-top:16px; }
.appel .exig > div{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(127,112,98,.24); font-size:13px; }
.appel .rondv{ width:22px; height:22px; flex:0 0 22px; border-radius:11px; border:1px solid rgba(127,112,98,.5); display:flex; align-items:center; justify-content:center; }
.appel .exig .ok .rondv{ background:#5F9E73; border-color:#5F9E73; }
.appel .exig .ok .rondv svg{ width:12px; height:12px; }
.appel .carte-in{ margin-top:16px; padding:16px; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.appel .proches{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; max-height:150px; overflow-y:auto; }
.appel .sc input{ min-height:40px; border-radius:20px; padding:0 14px; background:rgba(255,255,255,.12); border:1px solid rgba(127,112,98,.38); color:inherit; font:13px Inter,sans-serif; box-sizing:border-box; }
.appel .sc input::placeholder{ color:inherit; opacity:.55; }
.appel .recap{ display:grid; gap:2px; margin-top:16px; }
.appel .recap > div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(127,112,98,.24); font-size:13px; }
.appel .recap b{ text-align:right; font-weight:600; }
.appel .notes{ margin-top:18px; padding:14px 18px; border-radius:22px; }
.appel .notes summary{ cursor:pointer; font-weight:600; font-size:13px; }
.appel .notes textarea{ width:100%; margin-top:10px; border-radius:16px; box-sizing:border-box; }
.appel .grille{ display:block; }
.appel .direct{ display:none; }
.appel .frise{ display:grid; gap:2px; margin-top:12px; }
.appel .frise button{ display:flex; align-items:center; gap:10px; background:none; border:0; box-shadow:none; padding:8px 0; min-height:0; color:inherit; font:500 13px Inter,sans-serif; letter-spacing:0; text-transform:none; text-align:left; cursor:pointer; opacity:.55; }
.appel .frise button i{ width:10px; height:10px; border-radius:5px; border:1.5px solid currentColor; flex:0 0 10px; }
.appel .frise button.fait{ opacity:.9; } .appel .frise button.fait i{ background:#5F9E73; border-color:#5F9E73; }
.appel .frise button.cours{ opacity:1; font-weight:600; } .appel .frise button.cours i{ background:#D4B07A; border-color:#D4B07A; }
.appel .frise button.vue span{ text-decoration:underline; text-underline-offset:4px; }
.appel .pctg{ font:600 44px/1 "Cormorant Garamond",Georgia,serif; margin-top:8px; color:#B8955F; }
@media (min-width:900px){
  .appel .grille{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
  .appel .direct{ display:block; position:sticky; top:24px; padding:22px; border-radius:28px; }
  .appel .pile2{ max-width:600px; }
}
.appel .pile2{ height:max(470px, calc(100vh - 300px)); height:max(470px, calc(100dvh - 300px)); }
.appel .pile2 > .sc.t-espresso{ background:#2B2119; } .appel .pile2 > .sc.t-cacao{ background:#45332A; }
.appel .pile2 > .sc.t-champagne{ background:#CFB085; } .appel .pile2 > .sc.t-sable{ background:#EBE0CE; }
.appel .pile2 > .sc:not(:first-child){ box-shadow:0 18px 40px -22px rgba(0,0,0,.45); }
@media (min-width:900px){ .appel .pile2{ height:620px; } }
.appel .sc.solo.t-espresso{ background:#2B2119; color:#F6EEDF; }
.appel .journal-appels{ margin-top:18px; padding:8px 20px 10px; border-radius:24px; }
.appel .journal-appels h3{ margin:12px 0 6px; }
.appel .memo{ border-top:1px solid rgba(127,112,98,.24); padding:12px 0; }
.appel .memo summary{ display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; list-style:none; }
.appel .memo summary::-webkit-details-marker{ display:none; }
.appel .recap > div > .sub{ flex:0 0 42%; } .appel .memo summary > span:last-child{ white-space:nowrap; }