/* Idunn — site-only components. Depends on brand.css (tokens + primitives).
   Base stays white/black/grey; colour only for essential highlights & the hand-drawn ink. */

/* ---------- layout helpers ---------- */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
section[id],[id]{scroll-margin-top:5rem;}
.section{padding:5.5rem 0;}
.section.tight{padding:3.5rem 0;}
.wide{max-width:68rem;margin:0 auto;padding:0 1.5rem;}
.narrow{max-width:44rem;margin:0 auto;padding:0 1.5rem;}
.center{text-align:center;}
.stack-sm > * + *{margin-top:.6rem;}
.rule{border:0;border-top:1px solid var(--hair);margin:0;}
.eyebrow{display:flex;align-items:center;gap:.6rem;}
[hidden]{display:none !important;}

/* watermark = page/section title, very pale, behind content */
.wm{position:absolute;inset:auto 0 auto 0;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(5rem,22vw,15rem);line-height:.8;color:var(--ink);opacity:.045;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;}
.section{position:relative;}
.section > .wide,.section > .narrow{position:relative;z-index:1;}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--hair);}
.nav-in{max-width:72rem;margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;gap:1rem;}
.brandmark{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:1.28rem;letter-spacing:-.03em;}
.brandmark .dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--crab);display:inline-block;
  transform:translateY(-.05em);}
.nav-links{display:flex;gap:.3rem;margin-left:1.2rem;}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:550;font-size:.92rem;
  padding:.4rem .6rem;border-radius:7px;}
.nav-links a:hover{color:var(--ink);background:var(--surface-2);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.5rem;}

/* language switch + theme toggle */
.langsw{display:inline-flex;border:1px solid var(--hair-strong);border-radius:8px;overflow:hidden;}
.langsw button{background:transparent;border:0;padding:.32rem .5rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;}
.langsw button + button{border-left:1px solid var(--hair);}
.langsw button.is-active{background:var(--ink);color:var(--paper);}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;
  border:1px solid var(--hair-strong);border-radius:8px;background:transparent;color:var(--ink);
  cursor:pointer;padding:0;}
.iconbtn:hover{background:var(--surface-2);}
.iconbtn svg{width:1.05rem;height:1.05rem;}
.iconbtn .moon{display:none;} :root[data-theme="dark"] .iconbtn .sun{display:none;}
:root[data-theme="dark"] .iconbtn .moon{display:inline;}

.navtoggle{display:none;}
.nav-drawer{display:none;border-top:1px solid var(--hair);background:var(--paper);}

@media (max-width:860px){
  .nav-links,.nav-right .desktoponly{display:none;}
  .navtoggle{display:inline-flex;}
  .nav-drawer.open{display:block;}
  .nav-drawer .nav-links{flex-direction:column;margin:0;padding:.6rem 1.5rem 1rem;gap:.1rem;}
  .nav-drawer .nav-links a{font-size:1.02rem;padding:.6rem .2rem;}
  .nav-drawer .drawer-actions{padding:0 1.5rem 1.1rem;display:flex;gap:.6rem;align-items:center;}
}

/* ---------- buttons (extend brand .btn) ---------- */
.btn.crab{background:var(--crab);color:#fff;}
.btn.lg{font-size:1rem;padding:.8rem 1.4rem;border-radius:9px;}
.btn.block{display:flex;width:100%;justify-content:center;}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}

/* indeterminate loading fill, instead of a static "…" — used while a redirect/request is in
   flight and we have no real progress to report (Stripe checkout redirect, payment confirmation) */
.btn.loading{position:relative;overflow:hidden;color:transparent!important;pointer-events:none;}
.btn.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  color-mix(in srgb,currentColor 0%,transparent) 0%,
  color-mix(in srgb,#fff 35%,transparent) 50%,
  color-mix(in srgb,currentColor 0%,transparent) 100%);
  background-size:60% 100%;background-repeat:no-repeat;animation:btnLoadingSweep 1.1s ease-in-out infinite;}
@keyframes btnLoadingSweep{0%{background-position:-60% 0;}100%{background-position:160% 0;}}

/* ---------- hero ---------- */
.hero{padding:4.5rem 0 3rem;position:relative;overflow:hidden;}
.hero h1{max-width:16ch;}
.hero .lede{margin:.3rem 0 1.6rem;}
.hero-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--faint);margin-top:1rem;}
.hero-art{position:absolute;right:-2rem;top:2rem;width:min(38%,22rem);opacity:.9;pointer-events:none;z-index:0;}
@media (max-width:860px){.hero-art{display:none;}}

/* ---------- feature card grid ---------- */
.grid{display:grid;gap:1rem;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}
.feature{padding:1.3rem;}
.feature h3{margin:.2rem 0 .4rem;font-size:1.05rem;}
.feature p{color:var(--muted);font-size:.95rem;margin:0;}
.feature .ico{width:2rem;height:2rem;color:var(--ink);}
.feature .ico.crab{color:var(--crab);}

/* ---------- steps (how I work) ---------- */
.steps{display:grid;gap:0;counter-reset:s;margin-top:1.6rem;}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.2rem 0;border-top:1px solid var(--hair);}
.step:last-child{border-bottom:1px solid var(--hair);}
.step .n{font-family:var(--mono);font-size:.85rem;color:var(--crab);font-variant-numeric:tabular-nums;
  padding-top:.15rem;font-weight:600;}
.step h3{margin:0 0 .25rem;font-size:1.1rem;}
.step p{margin:0;color:var(--muted);max-width:52ch;}

/* ---------- forms ---------- */
.field{margin:0 0 1rem;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin:0 0 .35rem;}
.field .req{color:var(--crab);}
.input,textarea.input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:9px;padding:.7rem .85rem;min-height:44px;
  transition:border-color .12s,box-shadow .12s;}
.input:focus,textarea.input:focus{outline:none;border-color:var(--ocean);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ocean) 22%,transparent);}
.input[aria-invalid="true"]{border-color:var(--crab);}
textarea.input{min-height:7rem;resize:vertical;line-height:1.5;}
.err{display:block;color:var(--crab);font-size:.8rem;margin-top:.3rem;min-height:1em;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:560px){.row2{grid-template-columns:1fr;}}

/* success card (form / booking / payment done) */
.done{text-align:center;padding:2rem 1rem;}
.done .check{width:3.2rem;height:3.2rem;margin:0 auto 1rem;color:var(--crab);}
.done h3{font-size:1.35rem;margin:0 0 .4rem;}
.done p{color:var(--muted);margin:0 auto;max-width:32ch;}

/* two-column split (contact | calendar) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:2.2rem;}}

/* ---------- 30-min calendar ---------- */
.cal{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:1.2rem;}
.stepbar{display:flex;gap:.5rem;margin:0 0 1.1rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint);}
.stepbar span{display:inline-flex;align-items:center;gap:.35rem;}
.stepbar span::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--hair-strong);}
.stepbar span.on{color:var(--ink);} .stepbar span.on::before{background:var(--crab);}
.stepbar .sep{color:var(--hair-strong);}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8rem;}
.cal-head .mo{font-weight:700;font-size:1.02rem;text-transform:capitalize;}
.cal-nav{display:flex;gap:.35rem;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;}
.cal-grid .dow{text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--faint);
  padding:.2rem 0;letter-spacing:.04em;}
.cal-day{aspect-ratio:1/1;min-height:40px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--ink);font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;}
.cal-day:hover:not(:disabled){background:var(--surface-2);}
.cal-day.avail{border-color:var(--hair-strong);font-weight:600;}
.cal-day.avail::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
  background:var(--crab);}
.cal-day.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cal-day.sel::after{background:var(--paper);}
.cal-day:disabled{color:var(--faint);cursor:default;opacity:.55;}
.cal-day.empty{border:0;cursor:default;}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
@media (max-width:400px){.slots{grid-template-columns:repeat(2,1fr);}}
.slot{padding:.6rem .3rem;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;cursor:pointer;min-height:44px;}
.slot:hover:not(:disabled){border-color:var(--ink);}
.slot.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.slot:disabled{opacity:.4;cursor:default;text-decoration:line-through;}
.slot .tk{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;color:var(--faint);
  text-transform:uppercase;text-decoration:none;}
.cal-slot-title{font-weight:650;margin:0 0 .8rem;text-transform:capitalize;}
.linkback{background:none;border:0;color:var(--link);cursor:pointer;font:inherit;font-size:.88rem;
  padding:.4rem 0;display:inline-flex;align-items:center;gap:.35rem;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);background:var(--surface);padding:3rem 0 2.2rem;margin-top:1rem;}
.foot-in{max-width:72rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;}
@media (max-width:760px){.foot-in{grid-template-columns:1fr;gap:1.6rem;}}
.foot h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .7rem;}
.foot a{color:var(--muted);text-decoration:none;display:block;padding:.18rem 0;font-size:.92rem;}
.foot a:hover{color:var(--ink);}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:1.1rem;margin-top:.6rem;
  font-size:.78rem;color:var(--faint);font-family:var(--mono);}

/* ---------- PORTAL ---------- */
.portal-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;}
.codecard{width:100%;max-width:26rem;}
.codecard .card{padding:1.8rem;}
.codecard h1{font-size:1.7rem;margin:0 0 .3rem;}
.codecard .lede{font-size:1rem;margin:0 0 1.4rem;}
.code-input{text-transform:uppercase;letter-spacing:.14em;font-family:var(--mono);text-align:center;
  font-size:1.15rem;}

/* dashboard */
.dash-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:.4rem;}
.dash-head h1{font-size:2rem;margin:0;}
.statusbadge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:99px;
  border:1px solid var(--hair-strong);color:var(--muted);background:var(--surface);}
.statusbadge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--butter);}
.statusbadge.validated::before{background:var(--ocean);}
.statusbadge.paid::before{background:var(--crab);}
.metaline{color:var(--muted);font-size:.95rem;margin:.2rem 0 0;}
.metaline strong{color:var(--ink);}

/* devis layout: cards column + sticky recap */
.devis-layout{display:grid;grid-template-columns:1fr 20rem;gap:1.6rem;align-items:start;margin-top:1.6rem;}
@media (max-width:900px){.devis-layout{grid-template-columns:1fr;}}

.dcards{display:flex;flex-direction:column;gap:.7rem;position:relative;}
.dcard{border:1px solid var(--hair-strong);border-radius:var(--r);background:var(--surface);padding:.9rem 1rem;
  display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:start;transition:border-color .12s,box-shadow .12s;}
.dcard .dc-name{font-weight:650;font-size:1rem;}
.dcard .dc-desc{color:var(--muted);font-size:.88rem;margin:.2rem 0 0;max-width:46ch;}
.dcard .dc-badges{display:flex;gap:.4rem;align-items:center;justify-self:end;}
.badge{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.72rem;padding:.2rem .45rem;
  border-radius:6px;border:1px solid var(--hair-strong);color:var(--muted);white-space:nowrap;}
.badge.price{color:var(--ink);border-color:var(--ink);font-weight:600;}
.dcard .dc-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:.2rem;}
.dcard.on{border-color:var(--ocean);box-shadow:inset 3px 0 0 var(--ocean);}
.dcard.base{background:var(--surface-2);}
.dcard.locked{opacity:.7;border-style:dashed;}
.tag-base{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--crab);border:1px solid var(--crab-weak);border-radius:5px;padding:.05rem .35rem;}
.tag-lock{font-family:var(--mono);font-size:.62rem;color:var(--faint);display:inline-flex;gap:.3rem;align-items:center;}

/* toggle switch */
.toggle{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.85rem;color:var(--muted);
  user-select:none;}
.toggle input{position:absolute;opacity:0;width:0;height:0;}
.toggle .track{width:2.5rem;height:1.4rem;border-radius:99px;background:var(--hair-strong);position:relative;
  transition:background .15s;flex:none;}
.toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:1.05rem;height:1.05rem;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.toggle input:checked + .track{background:var(--ocean);}
.toggle input:checked + .track::after{transform:translateX(1.1rem);}
.toggle input:focus-visible + .track{box-shadow:0 0 0 3px color-mix(in srgb,var(--ocean) 30%,transparent);}
.toggle input:disabled + .track{opacity:.5;cursor:default;}

/* recap */
.recap{border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);padding:1.2rem;
  position:sticky;top:5rem;}
.recap h3{margin:0 0 .8rem;font-size:.72rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);}
.recap .line{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;font-size:.92rem;}
.recap .line .v{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.recap .line.muted{color:var(--muted);}
.recap .line.total{border-top:1.5px solid var(--ink);margin-top:.5rem;padding-top:.6rem;font-weight:700;font-size:1.05rem;}
.recap .line.total .v{font-size:1.1rem;}
.recap .sub{font-size:.78rem;color:var(--faint);margin:.1rem 0 .9rem;}
.recap .deposit{background:var(--surface-2);border-radius:8px;padding:.5rem .7rem;margin-top:.8rem;
  display:flex;justify-content:space-between;font-size:.88rem;}
.recap .deposit .v{font-family:var(--mono);font-weight:700;color:var(--crab);}

/* validation options */
.optcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem;}
@media (max-width:800px){.optcards{grid-template-columns:1fr;}}
.optcard{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.optcard .oc-ico{width:2rem;height:2rem;color:var(--crab);}
.optcard h3{margin:0;font-size:1.05rem;}
.optcard p{margin:0;color:var(--muted);font-size:.9rem;flex:1;}
.optcard .btn{margin-top:.4rem;}

/* pay panel */
.panel{max-width:32rem;margin:0 auto;}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--hair);
  font-size:.94rem;}
.kv:last-of-type{border-bottom:0;}
.kv .k{color:var(--muted);}
.kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;word-break:break-all;}
.kv .v.big{font-size:1.2rem;font-weight:700;color:var(--crab);}

/* toast */
#toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(2rem);opacity:0;
  background:var(--ink);color:var(--paper);font-size:.85rem;padding:.6rem 1.1rem;border-radius:99px;
  transition:opacity .2s,transform .2s;pointer-events:none;z-index:80;font-family:var(--mono);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* hosted devis document (iframe, client view) — height auto-set by JS from the doc, no inner scroll */
.devis-frame{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.devis-frame iframe{width:100%;min-height:60vh;border:0;display:block;}
/* prominent "validate" call-to-action: docked to the bottom of the viewport while the client
   composes, so it is reachable from anywhere in a long devis (mirrors the sticky top nav).
   It rests in flow once the page bottom is reached. */
.validate-dock{position:sticky;bottom:0;z-index:40;}
.validate-cta{text-align:center;padding:.95rem 0 1.05rem;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--hair);}
.validate-cta .btn{font-size:1.12rem;padding:.95rem 2.5rem;border-radius:11px;
  box-shadow:0 8px 22px color-mix(in srgb,var(--crab) 32%,transparent);}

/* view transitions between portal screens */
.view{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.view{animation:none;}}

/* ===== espace client: board + menu (2026-08-14 redesign) ===== */
.pmenu{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1.6rem;border-bottom:1px solid var(--hair);padding-bottom:.75rem;}
.pmenu-item{position:relative;font:inherit;font-size:.92rem;font-weight:550;color:var(--muted);
  background:none;border:1px solid transparent;border-radius:99px;padding:.45rem 1rem;cursor:pointer;}
.pmenu-item:hover{color:var(--ink);background:var(--surface-2);}
.pmenu-item.on{color:var(--paper);background:var(--ink);border-color:var(--ink);}
.pmenu-item .pdot{position:absolute;top:.3rem;right:.45rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--crab);}
.pmenu-item.on .pdot{background:var(--crab);}

.board-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:1.2rem;align-items:start;}
@media(max-width:820px){.board-grid{grid-template-columns:1fr;}}
.bcard{padding:1.4rem 1.5rem;}

.btimeline{display:flex;flex-direction:column;}
.brow{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--hair);cursor:pointer;color:inherit;text-decoration:none;}
a.brow:hover,a.brow:focus-visible{text-decoration:none;} a.brow:focus-visible{outline:2px solid var(--ocean);outline-offset:2px;border-radius:6px;}
.brow:last-child{border-bottom:0;}
.brow:hover .brow-what{color:var(--ink);}
.brow-what{flex:1;min-width:0;color:var(--muted);font-weight:550;}
.brow-who{display:block;font-size:.82rem;font-weight:400;color:var(--faint);}
.brow-date{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-align:right;line-height:1.7;}
.brow-what{min-width:9rem;}
.brow-date.muted{color:var(--faint);}
/* narrow screens: the label takes the full first line, date + chip wrap underneath —
   the page must NEVER scroll horizontally (brand rule) */
@media(max-width:600px){
  .brow{flex-wrap:wrap;row-gap:.25rem;}
  .brow-what{flex:1 1 100%;}
}

.pchip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;border-radius:99px;
  border:1px solid var(--hair-strong);color:var(--muted);white-space:nowrap;}
.pchip::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--butter);}
.pchip.ok::before{background:var(--crab);}
.pchip.mid::before{background:var(--ocean);}
.pchip.warn::before{background:var(--butter);}
.pchip.dim{color:var(--faint);}
.pchip.dim::before{background:var(--faint);}
/* the right side of a row (amount + status chip + button) must be able to shrink and wrap —
   a flex:none group keeps its single-line width and forces horizontal scroll on phones */
.frow-right{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;min-width:0;}
/* long labels (« en attente d'informations complémentaires ») must wrap on narrow screens
   rather than widen the page */
@media(max-width:600px){
  .pchip{white-space:normal;text-align:left;line-height:1.5;}
  .frow-right{width:100%;justify-content:flex-start;}
}

.flist{display:flex;flex-direction:column;gap:.7rem;}
.frow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);padding:.95rem 1.2rem;}
.litem{border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.litem .frow{border:0;border-radius:0;}
.lrow.openable{cursor:pointer;}
.lrow.openable:hover{background:var(--surface-2);}
.lcaret{transition:transform .18s ease;color:var(--muted);}
.lrow.open .lcaret{transform:rotate(180deg);}
.lbody{padding:0 1.2rem 1.3rem;border-top:1px solid var(--hair);padding-top:1.1rem;}

.prow{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--hair);}
.prow-add{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem;}
.prow-add .btn{grid-column:1 / -1;}

/* programme de formation (onglet Formation) */
.prog-row{display:flex;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--hair);align-items:baseline;}
.prog-row:last-child{border-bottom:0;}
.prog-num{flex:none;width:2rem;font-family:var(--mono);font-size:.72rem;color:var(--faint);white-space:nowrap;}
.prog-desc{font-size:.9rem;color:var(--muted);margin-top:.15rem;}

/* onglet Messages (C4) */
.msg-thread{display:flex;flex-direction:column;gap:.7rem;max-height:55vh;overflow-y:auto;padding:.2rem;}
.msg-row{display:flex;} .msg-row.mine{justify-content:flex-end;}
.msg-bubble{max-width:85%;border:1px solid var(--hair);border-radius:12px;padding:.7rem .9rem;background:var(--surface);font-size:.93rem;}
.msg-row.mine .msg-bubble{background:var(--surface-2);border-color:var(--hair-strong);}
.msg-subject{font-weight:650;margin-bottom:.25rem;}
.msg-meta{font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-top:.45rem;}

/* ===== le planning d'une phase (onglet Formation, 2026-08-30) =====
   proposé → sélectionné → validé : chaque état a son mot et sa forme, jamais seulement une couleur. */
.plan-recap{padding:1.3rem 1.5rem;}
.plan-recap .plan-recap-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 .6rem;}
.plan-recap h2{margin:0;font-size:1.35rem;}
.plan-steps{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 .2rem;}
.plan-step{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:99px;border:1px solid var(--hair-strong);color:var(--faint);}
.plan-step::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--hair-strong);}
.plan-step.done{color:var(--ink);border-color:var(--ink);} .plan-step.done::before{background:var(--crab);}
.plan-step.now{color:var(--ink);background:var(--surface-2);border-color:var(--hair-strong);} .plan-step.now::before{background:var(--ocean);}
.plan-lines{margin:.9rem 0 0;display:flex;flex-direction:column;}
.plan-line{display:flex;align-items:flex-start;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--hair);color:inherit;text-decoration:none;}
.plan-line:hover .pl-what{color:var(--ink);text-decoration:underline;}
.plan-line:first-child{border-top:0;}
.plan-line .pl-what{flex:1;min-width:0;font-weight:550;}
.plan-line .pl-sub{display:block;font-size:.84rem;font-weight:400;color:var(--muted);margin-top:.1rem;}
.plan-line .pl-when{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-align:right;white-space:nowrap;line-height:1.7;}
.plan-line .pl-when.muted{color:var(--faint);}
.plan-total{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:1.5px solid var(--ink);font-weight:700;}
.plan-total .v{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.plan-next{margin:.9rem 0 0;padding:.75rem .9rem;border-left:2px solid var(--crab);background:var(--surface-2);border-radius:0 8px 8px 0;font-size:.95rem;}
.plan-next strong{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--crab);margin-bottom:.25rem;}

.plan-part{padding:1.3rem 1.5rem;margin-top:1rem;}
.plan-part.locked{opacity:.72;}
.plan-part-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;}
.plan-part-h h3{margin:0;font-size:1.15rem;}
.plan-part-h .num{color:var(--faint);font-weight:500;}
.plan-part-h .dur{font-family:var(--mono);font-size:.82rem;color:var(--muted);}
.plan-part-h .pchip{margin-left:auto;}
.plan-part .lede{margin:.55rem 0 .4rem;}
.plan-expect{margin:.4rem 0 .6rem;padding-left:1.2rem;color:var(--muted);font-size:.95rem;}
.plan-expect li{margin:.15rem 0;}
.plan-rule{font-size:.9rem;color:var(--muted);margin:.2rem 0 .8rem;}
.plan-rule strong{color:var(--ink);}
.plan-meter{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.8rem 0 .4rem;font-size:.95rem;}
.plan-meter .pm-bar{flex:1;min-width:8rem;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.plan-meter .pm-bar i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .2s;}
.plan-meter .pm-bar.ok i{background:var(--crab);}
.plan-meter b{font-family:var(--mono);font-weight:600;white-space:nowrap;}
.plan-meter .left{color:var(--muted);white-space:nowrap;}
.plan-sess{display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0;}
.plan-srow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;border:1px solid var(--hair);border-radius:10px;background:var(--surface);padding:.6rem .8rem;}
.plan-srow.confirmed{border-color:var(--hair-strong);}
.plan-srow .sn{font-family:var(--mono);font-size:.7rem;color:var(--faint);flex:none;width:1.6rem;}
.plan-srow .sw{flex:1;min-width:0;font-weight:550;}
.plan-srow .sw small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;}
.plan-srow .sd{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap;}
.plan-srow .sact{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.plan-srow .btn.ghost{padding:.35rem .7rem;font-size:.84rem;min-height:36px;}
.plan-add{margin:.4rem 0 .8rem;border:1px dashed var(--hair-strong);border-radius:10px;padding:.7rem .8rem;}
.plan-add summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:.4rem;}
.plan-add summary::-webkit-details-marker{display:none;}
.plan-add summary::before{content:"+";font-weight:700;color:var(--crab);}
.plan-add-f{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:.5rem;align-items:end;margin-top:.7rem;}
.plan-add-f label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;font-weight:600;color:var(--muted);}
.plan-add-f select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1px solid var(--hair-strong);border-radius:9px;padding:.55rem .6rem;min-height:44px;}
.plan-add-f .btn{min-height:44px;}
@media(max-width:640px){.plan-add-f{grid-template-columns:1fr 1fr;} .plan-add-f .btn{grid-column:1/-1;}}
.plan-grid{margin:.4rem 0 .2rem;}
.plan-grid-hint{font-size:.82rem;color:var(--faint);margin:.35rem 0 0;}
.plan-guide{margin:.5rem 0 0;font-size:.92rem;color:var(--muted);min-height:1.4em;}
.plan-guide.refuse{color:var(--crab);}
.plan-advice{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0 0;padding:.6rem .8rem;border-radius:9px;background:var(--surface-2);font-size:.88rem;color:var(--muted);}
.plan-advice.ok{color:var(--ink);}
.plan-advice svg{flex:none;width:1rem;height:1rem;margin-top:.15rem;color:var(--ocean);}
.plan-advice.warn svg{color:var(--butter);}
.plan-links{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 0;}
.plan-dock{position:sticky;bottom:0;z-index:40;margin-top:1.2rem;}
.plan-dock-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 1.1rem;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.4) blur(8px);
  border:1px solid var(--hair);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.plan-dock-in .pd-txt{flex:1;min-width:12rem;}
.plan-dock-in .pd-txt strong{display:block;}
.plan-dock-in .pd-txt small{color:var(--muted);font-size:.86rem;}
.plan-dock-in .btn.crab{font-size:1.02rem;padding:.8rem 1.6rem;}
.plan-dock-in .btn.crab:disabled{opacity:.5;cursor:not-allowed;}
.plan-confirmed{padding:1.3rem 1.5rem;border-color:var(--crab-weak);}
.plan-confirmed .check{width:2.4rem;height:2.4rem;color:var(--crab);margin:0 0 .6rem;}
.plan-err{color:var(--crab);font-size:.9rem;margin:.5rem 0 0;}
.plan-move{margin-top:.7rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
/* la grille elle-même : jamais de débordement de page ; sur mobile elle défile en interne */
.plan-grid .sgrid{max-width:100%;}
.plan-grid .sgrid-scroll{-webkit-overflow-scrolling:touch;}

/* ===== Accueil : une carte par phase (ce qu'elle est, où elle en est, ce qu'on attend) ===== */
.phase-cards{display:flex;flex-direction:column;gap:1rem;margin-top:1.2rem;}
.phase-card{padding:1.3rem 1.5rem;}
.phase-card-h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;}
.phase-card-h h3{margin:0;font-size:1.15rem;}
.phase-card-h .pchip{margin-left:auto;}
.phase-card .pc-date{font-family:var(--mono);font-size:.82rem;color:var(--muted);}
.phase-card .pc-rows{margin:.7rem 0 0;}
.phase-card .pc-row{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;border-top:1px solid var(--hair);font-size:.95rem;}
.phase-card .pc-row:first-child{border-top:0;}
.phase-card .pc-row .ico{flex:none;width:1.1rem;height:1.1rem;color:var(--muted);}
.phase-card .pc-row .ico.ok{color:var(--crab);}
.phase-card .pc-row .k{flex:1;min-width:0;color:var(--muted);}
.phase-card .pc-row .k strong{color:var(--ink);font-weight:550;}
.phase-card .pc-row .v{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-align:right;white-space:nowrap;}
.phase-card .pc-next{margin-top:.8rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;}
.phase-card .pc-next .lede{margin:0;flex:1;min-width:10rem;font-size:.95rem;}
@media(max-width:600px){.phase-card .pc-row{flex-wrap:wrap;} .phase-card .pc-row .v{width:100%;text-align:left;padding-left:1.8rem;} .plan-line{flex-wrap:wrap;} .plan-line .pl-when{text-align:left;width:100%;white-space:normal;}}
.plan-part-act{margin-top:.8rem;}
.plan-part-act .btn.block{font-size:1rem;}