@charset "UTF-8";
/* Les deux polices vivent dans public/fonts : le plateau n'a pas toujours
   internet, la page ne doit dependre de personne. Sous-ensemble latin. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/outfit.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/figtree-italic.woff2) format("woff2")}

/* =========================================================================
   WRANGLE — direction artistique « Carnet ».

   Un carnet de bord : pas de cartes, pas d'ombres, pas de verre. Des filets
   fins separent les plans, les jours sont des onglets soulignes, les titres
   en Outfit — la geometrique du logo — prennent la place, les marges respirent. Les couleurs
   Espresso (brun, creme chaude, caramel) portent seules ; le caramel ne sert
   qu'a l'action et au jour en cours. Les cibles restent a 44 px sous le pouce.
   ========================================================================= */
:root{
  --bg:#171110;
  --bg2:#100b0a;
  --surface:#221a17;
  --surface2:#2d221e;
  --surface3:#392b26;
  --line:rgba(246,233,216,.12);      /* le filet */
  --line2:rgba(246,233,216,.28);     /* le trait des contours */
  --txt:#f6e9d8;                    /* creme chaude : le texte, le logo */
  --dim:#b8a08c;
  --dim2:#8e7a69;
  --gris:196,170,146;               /* tan chaud : teintes de structure */
  --acc:#e7b04a;                    /* caramel : ce qui compte */
  --acc-rgb:231,176,74;
  --acc-txt:#2a1a05;
  --g1:#f0c060;--g2:#e7b04a;--g3:#c48b2e;
  --ok:#84cc8e;--ok-rgb:132,204,142;--ok-g1:#9adba2;--ok-g2:#6fbf7a;--ok-txt:#08210e;
  --ng:#e8675e;--ng-rgb:232,103,94;--ng-g1:#f07a70;--ng-g2:#d14e45;--ng-txt:#fff;
  /* les etiquettes du decoupage : une couleur par famille (LIVE, VFX, CG / VAL, TBC, KILLED),
     dans les memes teintes que les etats mais moins saturees : elles se lisent sans crier */
  --tag-vert:#93b898;--tag-rouge:#d2837c;--tag-bleu:#86a5c9;--tag-orange:#d9a066;
  --r:8px;                          /* ce qui reste arrondi : vignettes, boites */
  --rp:999px;                       /* les capsules */
  --nav:62px;                       /* la barre du bas */
  --safe:env(safe-area-inset-bottom,0px);
  --font:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-titre:"Outfit","Figtree","Segoe UI",system-ui,sans-serif;   /* titres, numeros */
  --h-prise:64px;                   /* une prise : deux lignes, jamais plus (voir .prises) */
  --air:10px;                       /* l'air entre les ronds et la barre de defilement */
  --gouttiere:var(--air);           /* + la largeur de la barre, mesuree au demarrage */
  --voile:rgba(23,17,16,.42);
}
/* Plein soleil : le meme cafe au lait, en clair ; le caramel s'assombrit pour rester lisible. */
:root[data-theme=light]{
  color-scheme:light;
  --bg:#efe6da;
  --bg2:#e6dbcc;
  --surface:#faf4ec;
  --surface2:#f1e8dc;
  --surface3:#e7dccd;
  --line:rgba(58,42,32,.14);
  --line2:rgba(58,42,32,.32);
  --txt:#2b211c;
  --dim:#6f5f55;
  --dim2:#8c7b6f;
  --gris:96,76,62;
  --acc:#9a6a14;
  --tag-vert:#5a9266;--tag-rouge:#bf6f68;--tag-bleu:#4f7aa8;--tag-orange:#b5834a;
  --acc-rgb:154,106,20;
  --acc-txt:#fff;
  --ok:#2f8a4a;--ok-rgb:47,138,74;--ok-g1:#4aa866;--ok-g2:#2f8a4a;--ok-txt:#fff;
  --ng:#c2423a;--ng-rgb:194,66,58;--ng-g1:#dc5c53;--ng-g2:#c2423a;--ng-txt:#fff;
  --voile:rgba(239,230,218,.5);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
/* la place de la barre de defilement est reservee, qu elle soit la ou non :
   filtrer la liste ne fait plus glisser le contenu de sa largeur */
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 var(--font);
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit;color:inherit;font-family:inherit}
input,select,textarea{font-size:16px}   /* evite le zoom automatique sur iOS */
button{transition:background .2s,color .2s,border-color .2s,opacity .2s}
.mono{font-family:ui-monospace,Consolas,"SF Mono",monospace}

/* -------- La capsule : la forme que partage tout ce qui se touche --------
   Boutons, etiquettes de filtre, elements captes, prenoms : meme contour fin,
   meme arrondi, meme fond transparent. Les regles qui suivent ne disent plus
   que ce qui les distingue — la hauteur, le texte, la couleur. */
.pill,.filtres,.gens button,.el,.chips-notes button,.capsules .fc,.seg button,.btn,.mini{
  border-radius:var(--rp);border:1px solid var(--line2);background:none;cursor:pointer;
}
/* la plupart sont en texte attenue et en demi-gras ; .btn et .mini s ecartent */
.pill,.filtres,.gens button,.el,.chips-notes button,.capsules .fc,.seg button{ color:var(--dim);font-weight:600 }


/* ------------------------------- Barre haute ------------------------------- */
/* Le logo, la pastille reseau et la roue, sur un filet. */
.top{
  position:sticky;top:0;z-index:30;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 12px;
  display:flex;align-items:center;gap:10px;
}
.top .ttl{flex:1;min-width:0;display:flex;align-items:center}
/* le logo (public/wrangle-logo.svg, par <use>) porte le nom a lui seul ;
   --wrangle-ink lui donne la couleur du texte, sur les deux themes */
/* le logo deborde dans le rembourrage de la barre : sa boite reste a la hauteur
   des boutons ronds (64 - 2 x 10 = 44 px), son dessin gagne moitie plus */
.marque{height:64px;margin:-10px 0;width:auto;flex:none;--wrangle-ink:var(--txt);--wrangle-acc:var(--acc);cursor:pointer;outline:none}
.marque:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}
.ico{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:none;border:1px solid var(--line2);color:var(--txt);font-size:17px;cursor:pointer;
}
.ico svg{display:block}
.ico:hover{background:var(--surface)}
.ico:active{background:var(--surface2)}
@media(max-width:430px){
  .top{gap:8px;padding-left:16px;padding-right:16px}
  /* sur telephone le logo se resserre pour laisser la place aux boutons */
  .marque{height:52px;margin:-6px 0}
  .ico{width:40px;height:40px}
}

/* ------------------------------- Reseau ------------------------------- */
/* la pastille de la barre haute : qui est connecte, ou si l'on travaille seul */
.pill{
  height:44px;padding:0 16px 0 13px;font-size:13px;
  display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--dim2);display:block;flex:none}
/* le texte de la pastille cede avant de pousser ce qu'il y a a cote */
.pill span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* a plusieurs, le point devient une pastille qui compte les connectes :
   « 2 » en vert a cote du prenom, plutot que « · 2 en ligne » en toutes lettres */
.pill i[data-n]{width:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;margin-left:-3px;
  display:grid;place-items:center;font:800 11px/1 var(--font);color:var(--ok-txt);letter-spacing:0}
.pill i[data-n]::after{content:attr(data-n)}
/* Sur telephone la pastille se resserre a la taille des boutons ronds, pour
   laisser la place au logo. Cette regle doit suivre celle du dessus : a
   specificite egale c'est l'ordre qui tranche, et une requete media n'ajoute
   aucune specificite. Posee plus haut, elle ne servait a rien. */
@media(max-width:430px){ .pill{padding:0 12px;font-size:12px;height:40px} }
.pill.ok{color:var(--txt)}
.pill.ok i{background:var(--ok)}
.pill.coupe{color:var(--acc);border-color:rgba(var(--acc-rgb),.5)}
.pill.coupe i{background:var(--acc);animation:clig 1s infinite alternate}
@keyframes clig{from{opacity:1}to{opacity:.25}}
/* l'initiale de la personne qui regarde cette prise ou ce plan */
.qui{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--acc);color:var(--acc);font-size:10px;font-weight:800;
  margin-left:7px;vertical-align:2px;font-style:normal;
}
.url{
  font-family:ui-monospace,Consolas,monospace;font-size:15px;background:none;
  border:1px solid var(--line2);border-radius:var(--r);padding:12px 14px;margin-top:8px;
  word-break:break-all;user-select:all;
}
.ligne small{font-weight:400;color:var(--dim2)}

/* ------------------------------- Filtres ------------------------------- */
.search{
  width:100%;background:none;border:none;border-bottom:1px solid var(--line2);border-radius:0;
  padding:12px 2px;outline:none;color:var(--txt);-webkit-appearance:none;appearance:none;
  font-size:16px;transition:border-color .2s;
}
.search::placeholder{color:var(--dim2)}
.search:focus{border-bottom-color:var(--acc)}

/* Jours et filtres restent sous la barre haute : sur une longue journee,
   changer de jour ne demande plus de remonter toute la liste. */
.fbar{
  position:sticky;top:var(--toph,64px);z-index:20;
  background:var(--bg);border-bottom:1px solid var(--line);
}

/* Les jours : des onglets. Le jour ouvert est en encre, souligne de caramel ;
   une journee bouclee passe en vert. */
/* la rangee est encadree de deux fleches ; ses bords s estompent pour dire
   qu elle continue, et l onglet actif est recentre a chaque changement */
.jours{display:flex;align-items:center;padding:0 12px}
.fleche{
  flex:none;width:34px;height:34px;margin-top:-2px;background:none;border:1px solid var(--line2);border-radius:50%;
  color:var(--dim);cursor:pointer;display:grid;place-items:center;padding:0;
}
.fleche svg{width:16px;height:16px}
.fleche:hover{color:var(--txt);border-color:var(--txt)}
.fleche:disabled{opacity:.25;cursor:default;border-color:var(--line2);color:var(--dim)}
/* la rangee se cale sur un onglet entier : sans cela elle s arrete n importe ou
   et coupe un nom en deux (« ut » pour « Tout »), ce qui se lit comme un bug.
   `proximity` et non `mandatory` : le doigt garde la main sur un parcours long. */
.chips{display:flex;gap:26px;overflow-x:auto;padding:0 12px;scrollbar-width:none;flex:1;min-width:0;align-self:stretch;
  scroll-snap-type:x proximity;scroll-padding:0 var(--fondu,14px);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  --fondu:14px}
/* Le degrade ne se pose que du cote ou la rangee continue (classes posees par
   `bordsChips`). Un masque fixe des deux cotes rongeait le premier onglet alors
   qu il n y avait rien a gauche : on lisait « ut » au lieu de « Tout ». */
.chips.bord-g{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fondu));
  mask-image:linear-gradient(90deg,transparent,#000 var(--fondu))}
.chips.bord-d{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fondu)),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - var(--fondu)),transparent)}
.chips.bord-g.bord-d{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{
  position:relative;
  flex:none;padding:12px 0 14px;border:none;background:none;cursor:pointer;
  white-space:nowrap;color:var(--dim);font:600 15px var(--font-titre);border-radius:0;
  scroll-snap-align:center;-webkit-tap-highlight-color:transparent;transition:color .15s;
}
/* le doigt doit voir qu il a touche : au plateau on tape sans regarder deux fois */
.chip:active{color:var(--txt)}
/* la rangee se centre entre les fleches quand elle tient ; des marges auto plutot
   que justify-content:center, qui rendrait le debut inatteignable au defilement */
.chip:first-child{margin-left:auto}
.chip:last-child{margin-right:auto}
.chip.on{color:var(--txt);font-weight:700}
.chip.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc)}
/* le point de caramel : le jour que l'on tourne aujourd'hui */
.chip u{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);
  margin-right:7px;vertical-align:2px;
}
.chip.fini{color:var(--ok)}                   /* journee bouclee */
.chip.vide:not(.on){opacity:.35}               /* rien pour la recherche en cours */

/* -------- Les filtres : un bouton au bout des jours, un panneau dessous -------- */
.filtres{
  flex:none;height:36px;margin:-2px 0 0 10px;padding:0 13px 0 11px;
  font:600 13px var(--font);display:inline-flex;align-items:center;gap:7px;
}
.filtres svg{flex:none}
.filtres:hover{color:var(--txt);border-color:var(--txt)}
.filtres.on{color:var(--acc);border-color:var(--acc)}
.filtres.ouvert{background:var(--surface2);color:var(--txt);border-color:var(--line2)}
.filtres b{
  font:700 11px var(--font);color:var(--acc-txt);background:var(--acc);border-radius:var(--rp);
  min-width:18px;height:18px;padding:0 5px;display:inline-grid;place-items:center;
}
.panneau{
  position:absolute;right:calc(var(--marge, 0px) + 12px);top:calc(100% + 6px);z-index:25;
  width:min(400px, calc(100vw - 24px));padding:16px 18px 16px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.ptete{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.ptete b{display:block;font:700 16px/1.2 var(--font-titre)}
.ptete span{display:block;margin-top:2px;font-size:12px;color:var(--dim2)}
.ptete .raz{padding:0;background:none;border:none;cursor:pointer;color:var(--dim);font:500 12.5px var(--font);text-decoration:underline;text-underline-offset:3px}
.panneau h4{margin:0 0 8px;font:700 11px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.panneau .segm + h4{margin-top:18px}
.panneau .gens + h4{margin-top:18px}
/* l'etat : une barre segmentee, un seul choix */
.segm{display:flex;border:1px solid var(--line2);border-radius:var(--rp);overflow:hidden}
.segm button{
  flex:1;min-width:0;height:42px;padding:0 6px;border:none;border-left:1px solid var(--line2);background:none;cursor:pointer;
  color:var(--dim);font:600 13.5px var(--font);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
}
.segm button:first-child{border-left:none}
.segm button b{font:500 12px var(--font);color:var(--dim2);font-variant-numeric:tabular-nums}
.segm button.on{background:var(--acc);color:var(--acc-txt)}
.segm button.on b{color:var(--acc-txt);opacity:.7}
.segm button.off{opacity:.35;cursor:default}
/* qui a saisi : des pastilles qui passent a la ligne, un seul choix.
   Pas .qui : cette classe-la est celle des initiales de presence, que
   majMarqueurs() efface a chaque redessin. */
.gens{display:flex;flex-wrap:wrap;gap:8px}
.gens button{
  height:38px;padding:0 13px;
  font:600 13.5px var(--font);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.gens button:hover{background:var(--surface2)}
.gens button b{font:500 12px var(--font);color:var(--dim2);font-variant-numeric:tabular-nums}
.gens button.on{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)}
.gens button.on b{color:var(--acc-txt);opacity:.7}
/* les marqueurs : des lignes a cocher, cumulables */
.marq{display:flex;flex-direction:column}
.marq button{
  display:flex;align-items:center;gap:12px;height:48px;margin:0 -8px;padding:0 8px;border:none;border-top:1px solid var(--line);
  background:none;color:var(--txt);font:600 14px var(--font);cursor:pointer;text-align:left;border-radius:var(--r);
}
.marq button:first-child{border-top:none}
.marq button:hover{background:var(--surface2)}
.marq button i{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--dim2)}
.marq button i svg{display:block}
.marq button span{flex:1;min-width:0}
.marq button b{font:500 12.5px var(--font);color:var(--dim2);font-variant-numeric:tabular-nums}
.marq button u{width:22px;height:22px;flex:none;border-radius:6px;border:1.5px solid var(--dim2);box-sizing:border-box;transition:background .15s,border-color .15s}
.marq button.on,.marq button.on i,.marq button.on b{color:var(--acc)}
.marq button.on u{background:var(--acc) center/13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%232a1a05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border-color:var(--acc)}
.marq button.off{opacity:.35;cursor:default}
.panneau .voir{width:100%;margin-top:16px;height:44px}
@media(max-width:430px){
  .filtres span{display:none}
  .filtres{padding:0 10px;margin-left:8px}
  /* Sur telephone chaque pixel compte : les fleches se resserrent et les onglets
     se rapprochent, ce qui fait tenir deux jours de plus a l ecran — donc moins
     de defilement pour changer de jour, et moins de noms coupes aux bords. */
  .jours{padding:0 8px}
  /* Trois jours a l ecran, jamais un de plus : chaque onglet prend le tiers de
     la rangee et l actif se cale au milieu (cadrerJour). On a donc toujours la
     veille et le lendemain sous les yeux, et une fleche fait glisser d un jour.
     Plus de nom coupe en deux, donc plus de fondu de bord a poser. */
  .chips{gap:0;padding:0;--fondu:0px}
  .fleche{width:30px;height:30px}
  .fleche svg{width:15px;height:15px}
  /* la zone touchable passe a 48 px de haut sans grossir le texte : on tape
     l onglet du pouce, en marchant, sans viser */
  .chip{
    flex:0 0 33.333%;min-width:0;padding:15px 3px 17px;font-size:14px;
    text-align:center;overflow:hidden;text-overflow:ellipsis;
  }
  /* les marges automatiques centrent la rangee quand elle tient ; ici elle ne
     tient jamais, et elles decaleraient les tiers */
  .chip:first-child{margin-left:0}
  .chip:last-child{margin-right:0}
  /* le trait de l onglet actif se resserre sous le mot plutot que sous le tiers */
  .chip.on::after{left:14px;right:14px}
}

/* la recherche ne donne rien ici, mais donne ailleurs : un pas de cote */
.ailleurs{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--dim);font-size:13.5px;
}
.ailleurs button{margin-left:auto}

/* ------------------------------- Liste ------------------------------- */
main{padding:0 0 calc(var(--nav) + var(--safe) + 96px)}
.list{padding:0 20px}

/* la journee : un titre en gras, comme en tete de page */
.jour{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:30px 0 8px;margin-bottom:0;border-bottom:1px solid var(--line2);
}
.jour b{font:700 23px var(--font-titre);letter-spacing:-.01em;color:var(--acc)}
.jour span{font-size:13.5px;color:var(--dim)}
.jour i{margin-left:auto;font-style:normal;font-size:13.5px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}

.seq{
  padding:16px 0 4px;font:600 15.5px var(--font-titre);letter-spacing:0;
  color:var(--dim);
}
.seq em{font:500 13px var(--font);color:var(--dim2);letter-spacing:0;margin-left:6px}

/* -------- Un plan : une entree du carnet, entre deux filets -------- */
.plan{
  position:relative;margin:0;padding:16px 0 14px;border-radius:0;
  background:none;border:none;border-bottom:1px solid var(--line);
}
.plan.done .pnum{color:var(--ok)}
.plan.done .pnum::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:4px;vertical-align:middle;order:1}
.plan.drop{opacity:.45}
.plan.drop .pnum{text-decoration:line-through}
.plan.pick{padding:12px 0}
#l-pick{padding-top:12px}

.phead{display:flex;gap:12px;cursor:pointer;align-items:flex-start}
/* la vignette, seulement quand le plan en a une : a la hauteur de la ligne de
   titre, a gauche du numero. Sans image, rien : le texte du plan part du bord
   gauche, aligne sur les numeros de prises. */
.vig{
  width:84px;height:42px;flex:none;border-radius:4px;
  background:var(--surface2) center/cover no-repeat;
}
.pmain{flex:1;min-width:0}
/* les etiquettes et la pastille « tourne » sont centrees sur le numero,
   pas posees sur sa ligne de base */
/* La ligne de titre fait la hauteur des ronds d'une prise (42px) : le numero,
   sa pastille « tourne », ses etiquettes juste apres, et le rond Moteur seul
   contre le bord droit, dans la colonne des ronds OK / NG des prises. */
.pnum{font:700 22px/1 var(--font-titre);letter-spacing:-.02em;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:42px}
.pnum .ptags{order:2}
.pnum .viser{order:3;margin-left:auto;margin-right:var(--gouttiere)}
/* le plan vise : celui que le Moteur et + Prise vont tourner. Un anneau discret
   sur chaque carte ; en caramel, avec son mot, sur le plan choisi. */
/* le viseur : un rond au trait a icone, le meme que les ronds OK / NG des
   prises, pour que la colonne de droite soit une seule famille. Le mot
   « Moteur » reste pour les lecteurs d'ecran. */
.viser{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid var(--line2);background:none;color:var(--dim2);cursor:pointer}
.viser span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.viser svg{width:20px;height:20px}
.viser:hover{color:var(--txt);border-color:var(--txt)}
/* le plan vise se voit de loin : rouge plein, la couleur du Moteur */
.viser.on{background:var(--ng);color:var(--ng-txt);border-color:var(--ng)}
.viser.on:hover{background:var(--ng-g1);border-color:var(--ng-g1);color:var(--ng-txt)}
/* les etiquettes du decoupage (LIVE, VFX, TBC...) : des micro-capsules au
   trait, la langue des boutons. Elles ne se confondent plus avec la ligne
   des elements captes, en petites capitales juste dessous. */
.ptags{position:relative;display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
/* chaque etiquette a sa couleur : ce qu'elle est (LIVE, VFX, CG), ce qu'elle devient (TBC, VAL, KILLED) */
.ptag.t-vert,.capsules .fc.on.t-vert{color:var(--tag-vert);border-color:var(--tag-vert)}
.ptag.t-rouge,.capsules .fc.on.t-rouge{color:var(--tag-rouge);border-color:var(--tag-rouge)}
.ptag.t-bleu,.capsules .fc.on.t-bleu{color:var(--tag-bleu);border-color:var(--tag-bleu)}
.ptag.t-orange,.capsules .fc.on.t-orange{color:var(--tag-orange);border-color:var(--tag-orange)}
/* l'etiquette est une pastille pleine, teintee de sa couleur, sans trait :
   elle se lit d'un coup d'oeil et ne se confond plus avec les ronds a cote */
.ptag.t-vert{background:color-mix(in srgb, var(--tag-vert) 18%, transparent);border-color:transparent}
.ptag.t-rouge{background:color-mix(in srgb, var(--tag-rouge) 18%, transparent);border-color:transparent}
.ptag.t-bleu{background:color-mix(in srgb, var(--tag-bleu) 18%, transparent);border-color:transparent}
.ptag.t-orange{background:color-mix(in srgb, var(--tag-orange) 20%, transparent);border-color:transparent}
/* chaque etiquette a sa couleur : ce qu'elle est (LIVE, VFX, CG), ce qu'elle devient (TBC, VAL, KILLED) */
.ptag{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;
  border:1px solid transparent;background:var(--surface2);
  font:700 10px/1 var(--font);letter-spacing:.06em;color:var(--dim);text-transform:uppercase;
}
button.ptag{appearance:none;cursor:pointer;font-family:inherit}
button.ptag:hover,button.ptag.on{filter:brightness(1.25)}
.ptag.vide{background:none;border:1px dashed var(--line2);color:var(--dim2);opacity:.7}
/* le petit menu sous la puce : les etiquettes de sa famille */
.menu.puce{position:fixed;left:auto;right:auto;top:auto;z-index:70;width:max-content;min-width:118px;padding:4px 0}
.menu.puce button{height:36px;padding:0 14px;font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;gap:12px}
.menu.puce button.on::after{border-color:currentColor}
.menu.puce button.t-vert{color:var(--tag-vert)} .menu.puce button.t-rouge{color:var(--tag-rouge)}
.menu.puce button.t-bleu{color:var(--tag-bleu)} .menu.puce button.t-orange{color:var(--tag-orange)}
/* la description du plan : c'est ce qu'on lit en premier sur le plateau */
/* la description : deux lignes au plus, en gris ; la fiche dit le reste */
/* Le texte d'un plan s'arrete avant la colonne des ronds, comme la ligne d'une
   prise s'arrete avant les siens : le rond Moteur garde son air, et le bord
   droit du texte est le meme d'un bout a l'autre de la carte. */
.pdesc,.pctx,.pelem{padding-right:calc(var(--gouttiere) + 54px)}
.pdesc{font-size:14px;line-height:1.4;color:var(--dim);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* le contexte technique : lisible, pas relegue en gris minuscule */
/* le contexte du plan parle la langue de la ligne de details d'une prise :
   meme corps, meme gris, meme separateur, une seule ligne */
.pctx{margin-top:4px;font-size:12px;color:var(--dim2);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pctx span{white-space:nowrap}
/* le point mediant est colle au mot precedent par une espace insecable :
   il ne peut donc jamais se retrouver seul en debut de ligne */
.pctx span:not(:last-child)::after{content:" ·";margin-right:5px;opacity:.6}
.pctx b{color:var(--dim);font-weight:600}
/* les elements captes pour la post */
.pelem{margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--dim2);display:flex;flex-wrap:wrap;gap:1px 0}
.pelem span{white-space:nowrap}
.pelem em{font-style:normal;color:var(--ok)}
.pelem span:not(:last-child)::after{content:" ·";margin-right:6px;opacity:.5}

/* -------- Les prises d'un plan : des lignes pointillees sous le plan -------- */
.prises{margin-top:12px}
/* Toutes les prises font la meme hauteur : deux lignes, jamais plus. La note
   suit le nom du clip, reperes et valeurs tiennent sur la seconde ; ce qui ne
   rentre pas finit en points de suspension, la fiche dit le reste. */
/* au-dela de cinq prises la liste defile dans sa propre fenetre : un plan a
   vingt prises ne repousse plus les suivants hors de l'ecran. Cinq lignes
   tout rond, et le defilement s'arrete sur le haut d'une prise : aucune
   n'est jamais coupee. */
/* La barre de defilement prend de la place a droite de la liste qui defile, et
   d'elle seule : les ronds d'une prise se decaleraient d'un plan a l'autre, et
   le rond Moteur, lui, resterait au bord. On reserve donc partout la meme
   gouttiere — un pouce d'air plus la largeur de la barre, mesuree au demarrage
   par mesurerGouttiere() — pour que tous les ronds tombent dans une seule
   colonne, du haut de la carte au bas de la liste. */
.prises{padding-right:var(--gouttiere)}
.prises.defile{max-height:calc(5 * var(--h-prise));overflow-y:auto;padding-right:var(--air);
  scroll-snap-type:y mandatory;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.prises.defile .prise{scroll-snap-align:start}
.prise{display:flex;gap:12px;align-items:center;height:var(--h-prise);box-sizing:border-box;
  padding:9px 0;cursor:pointer;border-top:1px dotted var(--line2)}
.prise:active{opacity:.6}
.tn{
  width:26px;flex:none;font:700 15px var(--font-titre);color:var(--dim2);
  font-variant-numeric:tabular-nums;line-height:1;
}
.prise.ok .tn{color:var(--ok)}
.prise.ng .tn{color:var(--ng)}
.tbody{flex:1;min-width:0}
.trow{display:flex;align-items:baseline;gap:8px}
.clip{
  font-family:ui-monospace,Consolas,"SF Mono",monospace;font-size:13.5px;font-weight:600;
  color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.clip.vide{font-family:inherit;font-style:italic;font-weight:400;color:var(--dim2);font-size:13px}
.tstat{margin-left:auto;flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--dim2)}
.prise.ok .tstat{color:var(--ok)}
.prise.ng .tstat{color:var(--ng)}
.tmeta{font-size:12px;color:var(--dim2);margin-top:1px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta span:not(:last-child)::after{content:" ·";margin-right:5px;opacity:.6}
.tmeta b{color:var(--dim);font-weight:600}
/* la note, a la suite du clip : elle garde au moins un tiers de la ligne */
.tnote{flex:1 1 0;min-width:35%;font-size:12.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip.vide + .tnote{min-width:60%}   /* pas encore de clip : la note passe devant */

/* OK / NG / etoile a portee de pouce sans ouvrir la fiche : sur le plateau
   on marque la prise tout de suite, on la detaille plus tard. Des cercles
   au trait ; celui qui est coche se remplit. */
/* les actions d'une prise : trois ronds au trait, une icone dedans (etoile,
   coche, croix) ; le rond choisi se remplit de sa couleur */
.tact{display:flex;gap:6px;flex:none;align-self:center}
.tact button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);
  background:none;color:var(--dim2);cursor:pointer;padding:0;display:grid;place-items:center;
}
.tact button svg{width:18px;height:18px}
.tact button:hover{color:var(--txt);border-color:var(--txt)}
.tact button:active{background:var(--surface2)}
.tact .kp.on{color:var(--acc-txt);background:var(--acc);border-color:var(--acc)}
.tact .kp.on svg{fill:currentColor}
.tact .ok.on{background:var(--ok);color:var(--ok-txt);border-color:var(--ok)}
.tact .ng.on{background:var(--ng);color:var(--ng-txt);border-color:var(--ng)}
.tact .on svg{stroke-width:2.4}

/* la prise qui vient d etre ajoutee se signale brievement */
@keyframes neuve{from{background:rgba(var(--acc-rgb),.16)}to{background:transparent}}
.prise.neuve{animation:neuve 1.4s ease-out}

/* ajouter : un simple mot en caramel, pas de boite */
.addtake{
  display:block;width:auto;margin:6px 0 0;padding:8px 0;background:none;
  border:none;color:var(--acc);font-size:14px;font-weight:600;cursor:pointer;text-align:left;
}
.addtake:hover{text-decoration:underline;text-underline-offset:3px}
.addtake:active{opacity:.6}

.addplan{
  display:block;width:100%;margin:6px 0 10px;padding:16px 0;background:none;
  border:none;border-bottom:1px solid var(--line);color:var(--acc);
  font-size:14.5px;font-weight:600;cursor:pointer;text-align:left;
}
.addplan:hover{text-decoration:underline;text-underline-offset:3px}
.addplan:active{opacity:.6}

.empty{padding:60px 20px;text-align:center;color:var(--dim2);font-size:15px;line-height:1.7}

/* ------------------------------- Menu bas ------------------------------- */
/* Une barre sur un filet ; l'onglet ouvert est souligne de caramel. */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;gap:36px;
  padding:0 20px calc(var(--safe) + 0px);
  background:var(--bg);border-top:1px solid var(--line);
}
nav button{
  flex:none;background:none;border:none;padding:0;color:var(--dim);cursor:pointer;
  font-size:14.5px;font-weight:600;height:var(--nav);border-radius:0;position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
nav button.on{color:var(--txt)}
nav button.on::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc)}
nav button i{display:none}

/* Les deux boutons flottants forment une pile : un seul point d'ancrage, un
   seul ecart, donc le meme bord droit quelle que soit la largeur du Moteur.
   Le conteneur laisse passer les clics : seul le creux a cote du petit bouton
   serait sinon un trou mort au-dessus de la liste. */
.fabs{
  position:fixed;right:20px;bottom:calc(var(--nav) + var(--safe) + 18px);z-index:44;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;
}
.fabs > button{pointer-events:auto}

/* le bouton Moteur : rouge, comme le declencheur d'une camera et comme
   l'anneau du plan qui tourne ; l'oeil de l'anneau y est repris */
.fab{
  height:52px;padding:0 22px;border-radius:var(--rp);border:none;
  background:var(--ng);color:var(--ng-txt);
  font-weight:700;font-size:15px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
.fab:hover{background:var(--ng-g1)}
.fab:active{background:var(--ng-g2)}
.fab em{font-style:normal;font-weight:600;opacity:.7;font-size:12.5px}
/* ca tourne : une onde s'eloigne du bouton, lentement, toujours dans le meme
   sens, et le carre remplace l'oeil. Pas de va-et-vient : il ne clignote pas.
   C'est a cela, et au mot, qu'on distingue « ca tourne » de « prêt a tourner ». */
.fab.rec{
  background:var(--ng);color:var(--ng-txt);
  animation:rec 1.8s ease-out infinite;
}
.fab.rec:hover{background:var(--ng-g1)}
.fab.rec em{opacity:.9;font-variant-numeric:tabular-nums}
@keyframes rec{
  from{box-shadow:0 0 0 0 rgba(var(--ng-rgb),.55)}
  to{box-shadow:0 0 0 16px rgba(var(--ng-rgb),0)}
}
.fab2{
  height:44px;padding:0 18px;border-radius:var(--rp);border:1px solid var(--line2);
  background:var(--bg);color:var(--txt);font-weight:600;font-size:13.5px;cursor:pointer;
}
.fab2:hover{background:var(--surface)}
.fab2:active{background:var(--surface2)}

/* ------------------------------- Preparation ------------------------------- */
/* la saisie du decoupage : une carte par plan ; l'image a la hauteur du bloc,
   les champs sur une grille commune a toutes les cartes, les actions a droite */
.ptitre{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0 6px}
.ptitre b{display:block;font:700 23px var(--font-titre);letter-spacing:-.01em;color:var(--acc)}
.ptitre span{font-size:13.5px;color:var(--dim)}
.pnote{margin:0 0 4px;font-size:13.5px;color:var(--dim);line-height:1.5;max-width:78ch}
.prow{
  display:grid;grid-template-columns:176px minmax(0,1fr) auto;gap:0 20px;align-items:start;
  margin:0 0 14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.pchamps{min-width:0;display:flex;flex-direction:column;gap:12px}
.pcote{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pcote .ptags{margin:0}
.pl{display:grid;gap:0 14px;align-items:end}
.pl1{grid-template-columns:68px 62px minmax(0,1.4fr) 78px minmax(0,1fr)}
.pl2{grid-template-columns:minmax(0,1fr) 176px 104px 60px 64px}   /* le cadrage peut en porter plusieurs */
.pl3{grid-template-columns:minmax(0,1fr)}
.pl3 .spec.col{padding:0}
.pc{display:flex;flex-direction:column;gap:2px;min-width:0;position:relative}
.pc span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);font-weight:700;white-space:nowrap}
.pc input,.pc textarea{
  width:100%;min-width:0;background:none;border:none;border-bottom:1px solid var(--line2);outline:none;
  color:var(--txt);padding:6px 0 5px;font-size:15px;
}
.pc textarea{resize:none;line-height:1.45;overflow:hidden}
.pc input:focus,.pc textarea:focus{border-bottom-color:var(--acc);color:var(--acc)}
.pc input::placeholder,.pc textarea::placeholder{color:var(--dim2);opacity:.5}
.pc .deroul{position:absolute;right:0;bottom:4px;width:28px;height:28px;margin:0}
.pc .deroul svg{width:13px;height:13px}
.pc:has(.deroul) input{padding-right:32px}
.pc .menu{right:auto;min-width:200px}
.w-num input{font:700 22px/1.1 var(--font-titre);padding:2px 0 5px}
.w-ord input{font:700 17px/1.2 var(--font-titre);color:var(--acc);font-variant-numeric:tabular-nums;padding:4px 0 5px}
/* l'image du plan : une vignette 16:9, la sienne ou celle du decoupage */
.pimg{position:relative;width:176px;height:99px}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px;background:var(--surface2);cursor:pointer}
.pvide{
  position:absolute;inset:0;width:100%;height:100%;border:1px dashed var(--line2);border-radius:4px;background:none;color:var(--dim2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0;
  font:700 10px var(--font);letter-spacing:.1em;text-transform:uppercase;
}
.pvide svg{width:22px;height:22px}
.pvide:hover{color:var(--txt);border-color:var(--txt)}
.pimg-x{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface3);color:var(--dim);display:grid;place-items:center;cursor:pointer;
}
.pimg-x svg{width:11px;height:11px}
.pimg-x:hover{color:var(--ng);border-color:var(--ng)}
/* les actions : Fiche et suppression, en haut a droite, a hauteur de la premiere ligne */
.pactions{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:112px;padding-top:14px}
.pbtns{display:flex;gap:8px;align-items:center}
.pdel,.pfiche{
  flex:none;border:1px solid var(--line2);background:none;color:var(--dim);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.pdel{width:34px;height:34px;border-radius:50%;padding:0;color:var(--dim2)}
.pdel svg{width:14px;height:14px}
.pdel:hover{color:var(--ng);border-color:var(--ng)}
.pfiche{height:34px;padding:0 8px 0 14px;border-radius:var(--rp);gap:2px;font:600 12.5px var(--font)}
.pfiche svg{width:14px;height:14px}
.pfiche:hover{color:var(--txt);border-color:var(--txt)}
#l-prep .addplan{margin:4px 0 22px}
.ptitre .pbtns{gap:10px}
/* le mode Ordonner : la carte entiere se saisit ; un trait caramel marque ou elle va tomber */
.prow.ordo{cursor:grab;border-style:dashed;border-color:var(--line2)}
.prow.ordo .pchamps,.prow.ordo .pcote{pointer-events:none;opacity:.75}
.prow.ordo:active{cursor:grabbing}
.prow.tire{opacity:.35}
.prow.av{box-shadow:0 -3px 0 0 var(--acc)}
.prow.ap{box-shadow:0 3px 0 0 var(--acc)}
.pmove{color:var(--dim)}
.pmove:hover{color:var(--txt);border-color:var(--txt)}
#l-prep .jour{margin-bottom:16px}
@media(max-width:1200px){
  .pl1{grid-template-columns:68px 62px minmax(0,1fr) 78px}
  .pl1 .w-lieu{grid-column:1 / -1}
  .pl2{grid-template-columns:minmax(0,1fr) 124px 96px 56px 60px}
}
@media(max-width:560px){
  .prow{grid-template-columns:1fr;gap:12px;padding:14px;margin-bottom:12px}
  .pcote{width:100%}
  .pimg{width:100%;height:auto;aspect-ratio:16/9}
  .pl{gap:0 10px}
  .pl1{grid-template-columns:64px 60px 1fr}
  .pl1 .w-flex,.pl1 .w-lieu{grid-column:1 / -1}
  .pl2{grid-template-columns:1fr 1fr 56px 60px}
  .pl2 .w-desc{grid-column:1 / -1}
  .pactions{flex-direction:row;justify-content:flex-end;align-items:center;min-width:0;padding-top:0}
}

/* ------------------------------- Croquis ------------------------------- */
/* dans la fiche : l'apercu, ou une feuille a prendre */
/* l'apercu prend toute la largeur de la fiche, centre ; un croquis en hauteur est borne pour ne pas tout pousser */
.croq-cadre{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.croq-cadre.vide{width:100%}
.croq-cadre>canvas{display:block;width:auto;max-width:100%;max-height:480px;border-radius:4px;background:#fff;cursor:pointer}
/* les gestes du croquis : trois pictos ronds poses en haut a droite de l'image,
   sur un fond plein pour rester lisibles sur le blanc du plan */
.croq-outils{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.croq-outils button{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--bg);border:1px solid var(--line2);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.croq-outils button:hover{border-color:var(--txt)}
.croq-outils button:active{background:var(--surface2)}
.croq-outils button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-txt)}
.croq-outils button.d{color:var(--ng)}
.croq-outils button.d:hover{border-color:var(--ng)}
.croq-vide{
  width:100%;height:120px;border:1px dashed var(--line2);border-radius:4px;background:none;color:var(--dim2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;
}
.croq-vide svg{width:22px;height:22px}
.croq-vide:hover{color:var(--txt);border-color:var(--txt)}
/* « Changer le plan du decor » : une vignette par decor, celle du croquis cerclee de caramel */
.fonds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.fond{
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 8px;overflow:hidden;text-align:left;cursor:pointer;
  background:none;border:1px solid var(--line2);border-radius:8px;color:var(--txt);
}
.fond:hover{border-color:var(--txt)}
.fond.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.fond img,.fond-vide{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff}
.fond-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;color:var(--dim2);
  border-bottom:1px dashed var(--line2);font:700 10px var(--font);letter-spacing:.1em;text-transform:uppercase;
}
.fond-vide svg{width:20px;height:20px}
.fond-vide em{font-style:normal}
.fond b{padding:8px 10px 0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fond i{padding:0 10px;font-style:normal;font-size:11.5px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fond.on i{color:var(--acc)}
.fond-autre{
  grid-column:1/-1;justify-self:start;padding:4px 0;background:none;border:none;color:var(--acc);
  font-size:13px;font-weight:600;cursor:pointer;text-align:left;
}
.fond-autre:hover{text-decoration:underline;text-underline-offset:3px}
/* l'editeur : plein ecran, le canevas au centre, les outils en bas */
.voile-dessin{
  position:fixed;inset:0;z-index:95;background:var(--bg);
  display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;
}
.voile-dessin > .dtete,.voile-dessin > .doutils,.voile-dessin > .dconseil{grid-column:1 / -1}
/* la palette d'objets : une colonne a gauche, un pictogramme et un mot par objet */
.dpal{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-right:1px solid var(--line2);overflow-y:auto;min-height:0}
.dpal h4{margin:0 4px 8px;font:700 11px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.dobj{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r);border:1px solid transparent;
  background:none;color:var(--dim);font:600 13.5px var(--font);cursor:pointer;text-align:left;
}
.dobj svg{flex:none;color:var(--dim2)}
.dobj:hover{color:var(--txt);background:var(--surface)}
.dobj:hover svg{color:var(--txt)}
.dobj.on{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)}
.dobj.on svg{color:var(--acc-txt)}
.doutils .btn.sm svg{width:15px;height:15px;margin-right:5px}
@media(max-width:900px){
  .voile-dessin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto}
  /* sur telephone : le canevas d'abord, la bande d'objets sous lui, puis les outils */
  .voile-dessin > .dzone{grid-row:2}
  .voile-dessin > .dpal{grid-row:3}
  .voile-dessin > .doutils{grid-row:4}
  .voile-dessin > .dconseil{grid-row:5}
  .dpal{flex-direction:row;gap:6px;padding:8px 12px;border-right:none;border-top:1px solid var(--line2);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .dpal::-webkit-scrollbar{display:none}
  .dpal h4{display:none}
  .dobj{flex:none;flex-direction:column;gap:3px;height:auto;padding:6px 8px;font-size:10.5px;min-width:58px;justify-content:center;text-align:center}
}
.dtete{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;border-bottom:1px solid var(--line2)}
.dtitre{flex:1;min-width:0}
.dtitre b{display:block;font:700 17px/1.2 var(--font-titre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtitre span{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* la zone defile quand le croquis est zoome ; centre tant qu'il tient */
.dzone{min-height:0;min-width:0;display:flex;padding:12px;background:var(--surface);touch-action:none;overflow:auto;overscroll-behavior:contain}
#croquis{display:block;flex:none;margin:auto;background:#fff;border-radius:4px;box-shadow:0 12px 34px rgba(0,0,0,.45);touch-action:none;cursor:crosshair}
.dzone.main #croquis{cursor:grab}
.dzone.main #croquis:active{cursor:grabbing}
.dzoomb{display:flex;align-items:center;gap:4px;margin-right:6px}
.dzoomb .ico{width:36px;height:36px;font-size:18px;font-weight:600}
.dzoom{height:36px;min-width:64px;padding:0 10px;border-radius:var(--rp);border:1px solid var(--line2);background:none;color:var(--dim);font:600 12.5px var(--font);cursor:pointer;font-variant-numeric:tabular-nums}
.dzoom:hover{color:var(--txt);border-color:var(--txt)}
@media(max-width:560px){ .dzoomb .dzoom{min-width:0;padding:0 8px} .dzoomb{gap:2px} }
.doutils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px 8px;border-top:1px solid var(--line2)}
.dcoul{width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.dcoul.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--txt)}
.dlarg{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:none;display:grid;place-items:center;cursor:pointer;padding:0;color:var(--dim)}
.dlarg i{display:block;border-radius:50%;background:currentColor}
.dlarg.on{border-color:var(--acc);color:var(--acc)}
.dsep{width:1px;height:26px;background:var(--line2);margin:0 4px}
.doutils .btn.sm{height:36px;padding:0 12px}
.dconseil{min-height:18px;padding:0 16px calc(8px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--dim);text-align:center}
.dconseil:empty{display:none}
@media(max-width:430px){
  .dtete{gap:8px;padding-left:12px;padding-right:12px}
  .dtete .btn.sm{padding:0 10px;font-size:12px}
}

/* ------------------------------- Feuille ------------------------------- */
/* la fiche recouvre la liste et s arrete au-dessus de la barre du bas :
   celle-ci reste atteignable en permanence, meme une fiche ouverte */
.sheet{position:fixed;top:0;left:0;right:0;bottom:calc(var(--nav) + var(--safe));
  z-index:60;background:var(--bg);display:none;flex-direction:column;
  border-bottom:1px solid var(--line)}
.sheet.on{display:flex}
.voile-fiche{
  display:none;position:fixed;top:0;left:0;right:0;bottom:calc(var(--nav) + var(--safe));z-index:59;
  background:var(--voile);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:pointer;
}
.shead{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  border-bottom:1px solid var(--line2);
}
.shead h2{margin:0;font:700 21px/1.2 var(--font-titre);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shead p{margin:1px 0 0;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:32px}


.sec{padding:22px 20px}
.sec+.sec{border-top:1px solid var(--line)}
.sec h3{
  margin:0 0 12px;font:700 15.5px var(--font-titre);letter-spacing:0;
  color:var(--dim);
}
/* un titre de section avec son compte a droite (les prises d'un plan) */
.sec-tete{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sec-tete h3{margin:0;flex:none}
.sec-tete .res{flex:1;min-width:0;font-size:12.5px;color:var(--dim);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-tete .res span:not(:last-child)::after{content:" ·";margin-right:5px;color:var(--dim2);font-weight:400}
.sec-tete .res .ok{color:var(--ok);font-weight:600}
.sec-tete .res .ng{color:var(--ng);font-weight:600}
.sec-tete .res .kp{color:var(--acc);font-weight:600}
.lead{font-size:15.5px;line-height:1.55;white-space:pre-line}
/* les passages et dialogues du decoupage, dans la fiche seulement */
.passages{white-space:pre-line;font-size:14.5px;line-height:1.55;color:var(--txt)}
.note{font-size:13px;color:var(--dim);line-height:1.6;margin-top:12px}
.note b{color:var(--dim2);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:3px}

/* -------- Fiche technique : des lignes entre filets, etiquette a gauche -------- */
.specs{
  display:flex;flex-direction:column;padding:0;border-radius:0;
  background:none;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
}
.spec{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);min-height:48px;position:relative}
.spec:first-child{border-top:none}
.spec>label{
  width:108px;flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim2);font-weight:700;line-height:1.3;padding:6px 0;
}
.spec>input,.spec>select,.spec>textarea{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);
  padding:12px 0;font-size:15px;
}
.spec>input::placeholder,.spec>textarea::placeholder{color:var(--dim2);opacity:.5}
.spec>input:focus,.spec>select:focus,.spec>textarea:focus{color:var(--acc)}
.spec>select{appearance:none;cursor:pointer}
.spec.col{flex-direction:column;align-items:stretch;gap:0;padding:12px 0}
.spec.col>label{width:auto;padding:0 0 6px}
.spec.col>textarea{padding:0;min-height:66px;resize:vertical;line-height:1.55;font-size:14.5px}
/* un texte libre en ligne : une ligne au repos, il grandit avec ce qu'on ecrit
   (autoHauteur) ; l'etiquette et le bouton restent cales sur la premiere ligne */
.spec.auto{align-items:flex-start}
.spec.auto>label{padding-top:17px}
.spec>textarea.auto{resize:none;overflow:hidden;line-height:1.5;font-size:15px;display:block}
.spec.auto>.mini{margin:7px 0 0 0}
/* ecran etroit : le bouton descend sous l'etiquette, le texte garde toute sa largeur */
@media(max-width:560px){
  .spec.auto.bouton{min-height:78px}
  .spec.auto.bouton>.mini{position:absolute;left:0;top:40px;margin:0;height:30px;padding:0 11px;font-size:12px}
}
/* des lignes a la suite d'autre chose (les capsules des elements) : pas de filet du haut */
.specs.suite{margin-top:12px;border-top:none}
/* la plage horaire : deux poignees sur un meme rail, la part choisie en caramel,
   les heures ecrites dessous. Les poignees seules recoivent le doigt. */
.plage{position:relative;height:58px;margin:6px 0 2px}
.plage .rail{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line2)}
.plage .rail i{position:absolute;top:0;height:100%;border-radius:2px;background:var(--acc)}
.plage input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;background:none;
  appearance:none;-webkit-appearance:none;pointer-events:none}
.plage input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent}
.plage input[type=range]::-moz-range-track{height:4px;background:transparent}
.plage input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;
  margin-top:-10px;border-radius:50%;background:var(--acc);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--acc);cursor:pointer}
.plage input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--acc);
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--acc);cursor:pointer}
.plage b{position:absolute;left:0;top:34px;font:700 15px var(--font-titre);font-variant-numeric:tabular-nums;color:var(--txt)}
/* une case a cocher sur une ligne de saisie : la case, puis ce qu'elle veut dire */
.spec .case{flex:1;display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;
  font:500 14.5px var(--font);color:var(--txt);text-transform:none;letter-spacing:0}
.spec .case input{width:20px;height:20px;margin:0;accent-color:var(--acc);flex:none}
/* plusieurs choix courts sur une meme rangee, chacun sa colonne quand la place le permet */
.spec.rang{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 28px;align-items:start;padding:0}
.spec.rang > .spec{border-top:none;min-height:0}
.duo{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.duo input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);padding:12px 0;font-size:15px}
.duo input::placeholder{color:var(--dim2);opacity:.5}
.duo input:focus{color:var(--acc)}
.duo em{font-style:normal;color:var(--dim2);flex:none}
/* les listes deroulantes qui restent (synchro, int/ext…) : leur menu prend nos couleurs */
select option{background:var(--surface);color:var(--txt)}

/* -------- Menu deroulant : un bouton rond au bout du champ, la liste dans nos couleurs -------- */
.deroul{
  flex:none;width:36px;height:36px;margin-left:2px;border-radius:50%;border:1px solid var(--line2);background:none;
  color:var(--dim);display:grid;place-items:center;cursor:pointer;padding:0;
}
.deroul svg{transition:transform .15s}
.deroul.on{background:var(--surface2);color:var(--txt);border-color:var(--line2)}
.deroul.on svg{transform:rotate(180deg)}
.menu{
  position:absolute;left:0;right:0;top:100%;z-index:6;margin-top:-1px;padding:6px 0;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 16px 40px rgba(0,0,0,.45);max-height:290px;overflow-y:auto;
}
.menu.haut{top:auto;bottom:100%;margin:0 0 -1px}
.menu button{
  display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 16px;
  border:none;background:none;color:var(--txt);font-size:14.5px;text-align:left;cursor:pointer;
}
.menu button:hover{background:var(--surface2)}
.menu button.on{color:var(--acc);font-weight:700}
.menu button.on::after{content:"";width:7px;height:12px;margin-right:4px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)}
.menu .vide{padding:10px 16px;color:var(--dim2);font-size:13px}
/* le calendrier : un mois a la fois, sous son champ, cale a droite */
.menu.calendrier{left:auto;right:0;width:308px;max-height:none;overflow:visible;padding:10px 12px 8px}
.calendrier .ctete{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.calendrier .ctete b{font:700 15px var(--font-titre);letter-spacing:-.01em}
.calendrier .ctete .ico{width:38px;height:38px;flex:none}
.calendrier .cjours{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.calendrier .cjours span{font:700 10px var(--font);letter-spacing:.08em;color:var(--dim2);text-align:center;padding:6px 0}
.calendrier .cjours button.j{display:block;width:100%;height:38px;padding:0;border:none;background:none;border-radius:var(--rp);
  font:600 13.5px var(--font);font-variant-numeric:tabular-nums;color:var(--txt);text-align:center;cursor:pointer}
.calendrier .j.hors{color:var(--dim2);opacity:.5}
.calendrier .j.auj{box-shadow:inset 0 0 0 1px var(--line2)}
.calendrier .j.entre,.calendrier .j.borne{background:rgba(var(--acc-rgb),.14);border-radius:0}
.calendrier .cjours button.j:hover{background:var(--surface2)}
.calendrier .cjours button.j.on,.calendrier .cjours button.j.on:hover{background:var(--acc);color:var(--acc-txt);border-radius:var(--rp)}
.calendrier .j.on::after{content:none}
.calendrier .cpied{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.calendrier .cpied button{width:auto;height:36px;padding:0 6px;color:var(--acc);font:600 13px var(--font)}

/* un choix court (focale, mouvement, int/ext…) : des capsules, la choisie en caramel */
.capsules{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 4px}
.capsules .fc{
  height:38px;min-width:56px;padding:0 13px;font-size:13.5px;font-variant-numeric:tabular-nums;
}
.capsules .fc.on{border-color:var(--acc);color:var(--acc);font-weight:700}
.capsules .fc.plus{min-width:38px;padding:0;color:var(--dim2);font-size:19px;line-height:1}
.capsules .fc:active{background:var(--surface2)}
.capsules .sep{width:1px;align-self:stretch;margin:4px 6px;background:var(--line2)}
/* le filet et ses cases (Figuration) passent a la ligne ensemble, jamais l'un sans l'autre */
.capsules .cases{display:inline-flex;align-items:center;gap:inherit}
/* -------- Le contexte du plan : il se lit d'abord, il se saisit ensuite --------
   Une ligne par champ, l'etiquette et la valeur en clair ; un appui deplie les
   choix en tuiles alignees sur une grille (un seul champ ouvert a la fois). */
.champs{border-top:1px solid var(--line2)}
.champ{border-bottom:1px solid var(--line)}
.champ-tete{
  display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:6px 0;cursor:pointer;text-align:left;
  background:none;border:none;color:var(--txt);-webkit-tap-highlight-color:transparent;
}
.champ-nom{width:108px;flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);font-weight:700;line-height:1.3}
.champ-val{flex:1;min-width:0;font-size:15.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.champ-val.vide{color:var(--dim2);font-weight:400}
.champ-tete i{
  flex:none;width:8px;height:8px;margin:-4px 6px 0 0;transform:rotate(45deg);transition:transform .15s,margin .15s;
  border-right:1.5px solid var(--dim2);border-bottom:1.5px solid var(--dim2);
}
.champ-tete:hover .champ-nom{color:var(--dim)}
.champ.ouvert .champ-tete i{transform:rotate(-135deg);margin:4px 6px 0 0}
.champ.ouvert .champ-nom{color:var(--acc)}
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:2px 0 16px}
.tuiles.courtes{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.tuiles.pictos{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.tuile{
  min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--line2);background:none;cursor:pointer;
  color:var(--txt);font-size:14px;font-weight:600;line-height:1.25;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.tuiles.pictos .tuile{min-height:70px;color:var(--dim)}
.tuiles.pictos .tuile span{color:var(--txt)}
.tuile:hover{border-color:var(--txt)}
.tuile:active{background:var(--surface2)}
.tuile.on,.tuiles.pictos .tuile.on,.tuiles.pictos .tuile.on span{background:var(--acc);border-color:var(--acc);color:var(--acc-txt)}
.tuile.case{border-style:dashed}
.tuile.case.on{border-style:solid}
.tuile.plus,.tuile.fin{border-color:transparent;color:var(--acc);font-weight:700}
.tuile.plus:hover,.tuile.fin:hover{border-color:var(--acc)}
.tuile-saisie{grid-column:1/-1;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--acc);padding:0 0 2px}
.tuile-saisie input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);padding:10px 0;font-size:15px}
.tuile-saisie input::placeholder{color:var(--dim2);opacity:.6}
.champs + .specs.suite{margin-top:0}
.specs + .champs{border-top:none}   /* a la suite de lignes de saisie : un seul filet entre les deux */
/* « Comme le plan 04 » : l'ambiance du plan d'avant, en un appui */
.comme{
  display:flex;align-items:baseline;gap:10px;width:100%;margin:0 0 10px;padding:9px 14px;cursor:pointer;text-align:left;
  background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.45);border-radius:var(--r);color:var(--acc);
}
.comme b{flex:none;font-size:13.5px;font-weight:700}
.comme span{min-width:0;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comme:hover{background:rgba(var(--acc-rgb),.16)}
.comme:active{opacity:.7}
.bandeau .ptags:empty{display:none}

/* -------- Boutons de choix : des capsules au trait, la cochee se remplit -------- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{ flex:1;min-width:64px;height:44px;padding:0 10px;font-size:13.5px }
.seg button.on{color:var(--txt);border-color:var(--txt);font-weight:700}
.seg button.on.g{background:var(--ok);color:var(--ok-txt);border-color:var(--ok)}
.seg button.on.r{background:var(--ng);color:var(--ng-txt);border-color:var(--ng)}
.seg button.on.a{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)}

.star{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;height:46px;padding:0 18px;cursor:pointer;
  background:none;border:1px solid var(--line2);border-radius:var(--rp);
  font-weight:600;font-size:14px;color:var(--dim);text-align:left;
}
.star.on{color:var(--acc-txt);background:var(--acc);border-color:var(--acc)}
.star em{font-style:normal;font-size:17px;line-height:1}

/* -------- Elements captes : des capsules au trait -------- */
.elems{display:flex;flex-wrap:wrap;gap:8px}
.el{ height:42px;padding:0 16px;font-size:13.5px }
.el.on{border-color:var(--txt);color:var(--txt)}
.el.on.v{background:var(--ok);color:var(--ok-txt);border-color:var(--ok)}

/* -------- Boutons : au trait, caramel plein pour l'action principale -------- */
.btn{ height:46px;padding:0 20px;color:var(--txt);font-weight:600;font-size:14px }
.btn:hover{background:var(--surface)}
.btn:active{background:var(--surface2)}
.btn.p{background:var(--acc);color:var(--acc-txt);font-weight:700;border-color:var(--acc)}
.btn.p:hover{background:var(--g1);border-color:var(--g1)}
.btn.w{width:100%}
.btn.d{color:var(--ng);border-color:rgba(var(--ng-rgb),.55)}
.btn.d:hover{background:rgba(var(--ng-rgb),.1)}
.btn.sm{height:38px;padding:0 14px;font-size:13px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.rec-row{margin-top:12px}
.btn.rec{background:var(--ng);color:var(--ng-txt);border-color:var(--ng);width:100%;display:flex;
  justify-content:center;gap:10px;align-items:center}
/* le Moteur de la fiche : le meme rouge et le meme oeil que le bouton flottant */
.btn.moteur{background:var(--ng);color:var(--ng-txt);border-color:var(--ng);
  display:flex;justify-content:center;gap:8px;align-items:center}
.btn.moteur:hover{background:var(--ng-g1);border-color:var(--ng-g1)}
.btn.rec em{font-style:normal;font-variant-numeric:tabular-nums;opacity:.9}

/* ------------------------------- Prise ------------------------------- */
.chips-notes{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.chips-notes button{ height:36px;padding:0 13px;font-size:12.5px }
.chips-notes button.on{color:var(--acc);border-color:var(--acc)}
.mini{
  flex:none;height:34px;padding:0 13px;margin-left:6px;
  color:var(--txt);font-size:12.5px;font-weight:700;
}
.mini:active{background:var(--surface2)}

/* ------------------------------- Fiche de prise ------------------------------- */
/* en-tete : d'une prise a l'autre du meme plan */
.snav{display:flex;gap:8px;flex:none}
.snav .ico{width:40px;height:40px;color:var(--dim)}
.snav .ico:disabled{opacity:.28;cursor:default;background:none}
.snav svg{display:block}

/* le plan, en une ligne qui mene a sa fiche */
.fplan{
  display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;cursor:pointer;
}
.fplan:active{background:var(--surface)}
.fplan img,.fplan .fvide{width:84px;height:47px;flex:none;border-radius:4px;object-fit:cover;background:var(--surface2)}
.fplan .ftxt{flex:1;min-width:0}
.fplan .fdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.4}
.fplan .fctx{display:block;margin-top:3px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fplan .pelem{display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fplan > i{
  flex:none;width:9px;height:9px;margin-right:4px;transform:rotate(-45deg);
  border-right:1.5px solid var(--dim2);border-bottom:1.5px solid var(--dim2);
}

/* la fiche du plan : image et texte en bandeau, l'image s'agrandit au doigt */
.bandeau{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line)}
.bandeau img{width:132px;height:74px;flex:none;border-radius:4px;object-fit:cover;background:var(--surface2);cursor:zoom-in}
.bandeau .btxt{flex:1;min-width:0}
.bandeau .ptags{margin:0 0 8px}
.bandeau .lead{font-size:14.5px;line-height:1.5}
.bandeau .note{margin-top:8px}
.btn:disabled{opacity:.4;cursor:default}

/* le verdict : OK et NG en grand sous le pouce, les trois autres en dessous */
.seg.verdict{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.seg.verdict button{min-width:0;padding:0 6px;grid-column:span 2;height:40px;font-size:13px}
.seg.verdict button[data-st="OK"],.seg.verdict button[data-st="NG"]{
  grid-column:span 3;height:58px;font:700 19px var(--font-titre);letter-spacing:.03em;
}

/* le clip : le nom en grand, le suivant a portee de pouce */
.clip-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.clip-ligne label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);font-weight:700}
.clip-ligne .mini{margin:0;height:36px;padding:0 12px 0 11px;color:var(--dim)}
.clip-ligne .mini b{color:var(--txt);margin-left:6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clip>input{
  display:block;width:100%;background:none;border:none;outline:none;color:var(--txt);
  padding:4px 0 8px;border-bottom:1px solid var(--line2);
  font:600 23px/1.25 var(--font-titre);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.clip>input::placeholder{color:var(--dim2);opacity:.5}
.clip>input:focus{color:var(--acc);border-bottom-color:var(--acc)}

/* les sections repliees : titre, valeurs en un coup d'oeil, chevron */
.det{border-top:1px solid var(--line)}
.det summary{
  list-style:none;display:flex;align-items:center;gap:12px;padding:15px 20px;min-height:56px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.det summary::-webkit-details-marker{display:none}
.det summary h3{margin:0;flex:none;font:700 15.5px var(--font-titre);color:var(--dim)}
.det .res{flex:1;min-width:0;font-size:12.5px;color:var(--dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det .res:empty::before{content:"—";color:var(--dim2)}
.det summary i{
  flex:none;width:8px;height:8px;margin:-4px 4px 0 0;transform:rotate(45deg);transition:transform .15s,margin .15s;
  border-right:1.5px solid var(--dim2);border-bottom:1.5px solid var(--dim2);
}
.det[open] summary i{transform:rotate(-135deg);margin:4px 4px 0 0}
.det[open] summary h3{color:var(--txt)}
.det-corps{padding:0 20px 22px}

/* le pied de fiche : le chrono et la prise suivante restent sous le pouce */
.sfoot{flex:none;display:flex;gap:10px;padding:12px 20px;border-top:1px solid var(--line2);background:var(--bg)}
.sfoot .rec-row{margin:0;flex:1;display:flex;min-width:0}
.sfoot .rec-row:empty{display:none}
.sfoot .rec-row .btn{flex:1;padding:0 12px}
.sfoot > .btn{flex:1;padding:0 12px;white-space:nowrap}

/* ------------------------------- Rapport ------------------------------- */
/* les chiffres en grand, en serif, chacun sur son filet */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;margin-bottom:28px;border-top:1px solid var(--line2)}
.kpi{
  background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:14px 2px 12px;
}
.kpi .v{font:700 36px/1 var(--font-titre);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .v small{font-size:16px;font-weight:500;color:var(--dim2)}
.kpi .l{font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.12em;
  margin-top:6px;font-weight:700}

.bloc{margin-bottom:30px}
/* le rapprochement des saisies : les sources en capsules, puis les ecarts plan par plan */
.rsources{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.rsource{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;border-radius:var(--rp);
  border:1px solid var(--line2);font:600 13.5px var(--font);color:var(--txt)}
.rsource.ici{padding-right:14px;border-color:var(--acc);color:var(--acc)}
.rsource em{font-style:normal;font-weight:500;font-size:12px;color:var(--dim2)}
.rsource button{width:28px;height:28px;border:none;border-radius:50%;background:none;color:var(--dim);font-size:18px;cursor:pointer}
.rsource button:hover{background:var(--surface2);color:var(--txt)}
.rresume{margin:12px 0 4px;font:700 14px var(--font-titre);color:var(--txt)}
.rplan{margin-top:14px}
.rplan > b{display:block;font:700 15px var(--font-titre);color:var(--txt);padding-bottom:4px;border-bottom:1px solid var(--line)}
.rplan > b em{font-style:normal;font:500 12.5px var(--font);color:var(--dim2);margin-left:8px}
/* au-dela de cinq lignes, une liste du rapport defile dans sa propre fenetre,
   comme les prises d'un plan : la page reste courte, rien n'est perdu */
.cinq{max-height:216px;overflow-y:auto;overscroll-behavior:contain;padding-right:10px;
  scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cinq > .alert,.cinq > .ligne{scroll-snap-align:start}
.bloc h3{margin:0 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line2);font:700 15.5px var(--font-titre);letter-spacing:0;color:var(--dim)}
.alert{display:flex;gap:12px;padding:11px 2px;font-size:13.5px;line-height:1.5;align-items:flex-start;
  border-bottom:1px solid var(--line);color:var(--dim)}
.alert i{font-style:normal;flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--dim2);font-size:0}
.alert.r i{background:var(--ng)}
.alert.o i{background:var(--acc)}
.alert.g i{background:var(--ok)}
.alert b{color:var(--txt);font-weight:700}
.ligne{display:flex;align-items:center;gap:12px;padding:10px 2px;font-size:13.5px;
  border-bottom:1px solid var(--line)}
.ligne span{flex:1;color:var(--dim)}
.ligne b{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.jauge{flex:none;width:76px;height:2px;background:var(--line2);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--acc)}

/* discret : sur un plateau sombre, un bandeau blanc plein ecran eblouit */
/* le message passe en haut, sous la barre d'en-tete : il ne recouvre ni les
   boutons d'une fiche ni le pied ou l'on vient d'appuyer */
.toast{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 80px);left:50%;
  width:max-content;max-width:calc(100vw - 40px);
  background:var(--surface3);color:var(--txt);border:1px solid var(--line2);border-radius:var(--rp);padding:13px 20px;
  font-size:13.5px;font-weight:600;z-index:80;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;transform:translate(-50%,-8px);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.toast.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.toast button{
  flex:none;background:var(--acc);border:none;color:var(--acc-txt);
  border-radius:var(--rp);height:32px;padding:0 13px;font-size:12.5px;font-weight:800;cursor:pointer;letter-spacing:.02em;
}

/* ------------------------------- Voiles ------------------------------- */
.voile{position:fixed;inset:0;z-index:90;background:rgba(16,11,10,.72);display:flex;
  align-items:center;justify-content:center;padding:20px}
.boite{
  width:min(440px,100%);padding:26px 24px;border-radius:var(--r);
  background:var(--bg);border:1px solid var(--line2);
}
.boite h2{margin:0 0 8px;font:700 23px/1.2 var(--font-titre);letter-spacing:-.015em}
.boite p{margin:0 0 18px;color:var(--dim);font-size:13.5px;line-height:1.55}
/* l'equipe : un prenom par capsule, assez large pour le pouce sur le plateau */
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.choix .btn{width:100%;text-align:center}
#voile-photo{cursor:zoom-out}
#voile-photo img{max-width:100%;max-height:100%;border-radius:var(--r)}
/* la boite de dialogue (confirmer, saisir, prevenir) : la meme boite que le
   choix du prenom, au-dessus de tout, croquis compris ; elle glisse en place */
.dlg{z-index:100;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .15s}
.dlg.on{opacity:1}
.dlg .boite{background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(10px);transition:transform .15s}
.dlg.on .boite{transform:none}
.dlg .boite h2{font-size:20px;line-height:1.3}
.dlg .boite p{margin-bottom:0;color:var(--txt);opacity:.8}
.dlg .boite h2 + p{margin-top:-2px}
.dlg-champ{
  display:block;width:100%;box-sizing:border-box;margin-top:16px;height:46px;padding:0 14px;
  border-radius:var(--r);border:1px solid var(--line2);background:var(--surface2);color:var(--txt);
  font:500 16px var(--font);outline:none;
}
.dlg-champ:focus{border-color:var(--acc)}
.dlg-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
.dlg-btns .btn{min-width:112px}
@media(max-width:430px){
  .dlg{align-items:flex-end;padding:0}
  .dlg .boite{width:100%;border-radius:var(--r) var(--r) 0 0;border-bottom:none;padding-bottom:calc(22px + var(--safe))}
  .dlg-btns .btn{flex:1;min-width:0}
}

/* ------------------------------- Grand ecran ------------------------------- */
/* ------------------------------- Selon l'appareil -------------------------------
   Telephone : tout en pleine largeur, la barre du bas sous le pouce.
   Tablette (760 px et plus) : la liste prend une colonne centree, la fiche
   vient en regard a droite, le reste se floute derriere elle.
   Bureau (1100 px et plus) : plus rien ne flotte au bas de l'ecran, les
   onglets et les actions montent dans la barre haute, alignes sur la colonne. */
@media(min-width:760px){
  :root{--col:min(1200px, 100% - 64px);--marge:max(20px, (100% - var(--col)) / 2)}
  .list,.jours,.sub,.sec{max-width:var(--col);margin-left:auto;margin-right:auto}
  .top{padding-left:var(--marge);padding-right:var(--marge)}
  .sheet{top:0;bottom:calc(var(--nav) + var(--safe));left:auto;right:0;
    width:min(620px,100%);border-left:1px solid var(--line2)}
  .sheet.on + .voile-fiche{display:block}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .fabs{right:calc(var(--marge) + 20px)}
  /* a droite, dans la colonne de la fiche */
  .toast{left:auto;right:max(24px, var(--marge));width:340px;max-width:none;transform:translateY(-8px)}
  .toast.on{transform:none}
}
@media(min-width:1100px){
  :root{--nav:0px;--cote:224px}
  /* la barre haute devient une colonne a gauche : logo en haut, reseau et reglages en bas */
  .top{position:fixed;top:0;left:0;bottom:0;width:var(--cote);z-index:46;
    display:grid;grid-template-columns:1fr 44px;grid-template-rows:1fr auto;align-items:end;gap:10px;
    padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 22px;border-bottom:none;border-right:1px solid var(--line)}
  /* Le dessin du logo ne remplit pas sa boite : seize pixels de vide au-dessus
     du mot. On les reprend, pour qu'il commence a la hauteur du rembourrage
     comme le bord gauche, et les onglets remontent d'autant : le bloc du haut
     garde son air, mais plus haut dans la colonne. */
  .top .ttl{grid-column:1 / -1;align-self:start;display:block;margin-top:-16px}
  .marque{height:60px;margin:0 0 0 -4px;display:block}
  /* en bas : la pastille reseau et la roue cote a cote */
  /* la pastille tient dans sa colonne, quoi qu'elle dise : elle raccourcit
     son texte avant de pousser la roue */
  #pres{width:100%;min-width:0;justify-content:flex-start}
  /* les onglets, sous le logo */
  nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 92px);left:0;right:auto;bottom:auto;width:var(--cote);z-index:47;
    flex-direction:column;align-items:stretch;gap:4px;padding:0 12px;background:none;border:none;justify-content:flex-start}
  nav button{height:46px;justify-content:flex-start;padding:0 14px;border-radius:var(--r);font-size:15.5px}
  nav button.on{background:var(--surface)}
  nav button.on::after{top:11px;bottom:11px;left:0;right:auto;width:3px;height:auto;border-radius:2px}
  main{margin-left:var(--cote);padding-bottom:120px}
  .fbar{top:0}
  /* Moteur et + Prise : en bas a droite de l'ecran */
  .fabs{right:28px;bottom:28px}
  .toast{right:28px}
}
@media print{
  nav,.top,.fbar,.sheet,.fabs,.voile,.addplan,.addtake,.btns,.noprint{display:none!important}
  body{background:#fff;color:#000;background-image:none}
  .plan,.kpi,.specs{border-color:#ccc;background:#fff}
  .prises.defile,.cinq{max-height:none!important;overflow:visible}
  .jour b{color:#000}
  main{padding:0}
}

/* ------------------- Fiche de transmission a la post ------------------- */
/* Ce document n'est pas pour nous : il part au montage et aux VFX. Il ne
   vit qu'a l'impression, en noir sur blanc, et chaque plan tient d'un seul
   tenant pour qu'aucun ne soit coupe en deux pages. */
#post{display:none}
@media print{
  @page{margin:14mm 13mm}
  body.impr-post .view{display:none!important}
  body.impr-post #post{display:block}
  #post{font:10pt/1.45 var(--font);color:#000}
  #post h1{font-size:17pt;font-weight:800;margin:0;letter-spacing:-.01em}
  #post .psous{font-size:9.5pt;color:#444;margin:3pt 0 0}
  #post .pchiffres{display:flex;gap:16pt;flex-wrap:wrap;margin:10pt 0 0;
    border-top:.75pt solid #bbb;border-bottom:.75pt solid #bbb;padding:6pt 0;font-size:9.5pt;color:#333}
  #post .pchiffres b{font-size:12pt;font-weight:800;color:#000;margin-right:3pt}
  #post h2{font-size:8.5pt;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
    border-bottom:1.2pt solid #000;padding-bottom:3pt;margin:20pt 0 9pt;break-after:avoid}
  #post .pvide{font-size:9.5pt;color:#666;font-style:italic}

  /* les tableaux : le montage se lit en lignes */
  #post table{width:100%;border-collapse:collapse;font-size:9pt}
  #post th{text-align:left;font-size:7.5pt;text-transform:uppercase;letter-spacing:.1em;
    color:#555;font-weight:700;padding:0 6pt 4pt 0;border-bottom:.75pt solid #999}
  #post td{padding:4pt 6pt 4pt 0;border-bottom:.5pt solid #ddd;vertical-align:top}
  #post td.mono{font-family:ui-monospace,Consolas,monospace;font-weight:700;white-space:nowrap}
  #post tr{break-inside:avoid}

  /* un plan = un bloc insecable */
  #post .pplan{break-inside:avoid;padding:9pt 0;border-bottom:.5pt solid #ddd}
  #post .ptete{display:flex;gap:9pt;align-items:flex-start}
  #post .pvig{width:104pt;height:58pt;object-fit:cover;border:.5pt solid #bbb;flex:none}
  #post .pno{font-size:12pt;font-weight:800;letter-spacing:-.01em}
  #post .pno span{font-size:7pt;font-weight:700;letter-spacing:.1em;border:.5pt solid #888;
    padding:1pt 3pt;margin-left:5pt;vertical-align:2pt;color:#444}
  #post .pdes{margin-top:2pt}
  #post .pmet{font-size:8.5pt;color:#555;margin-top:2pt}
  #post .pgarde{margin-top:7pt;padding:5pt 7pt;background:#f1f1f1;border-left:2.5pt solid #000;font-size:9.5pt}
  #post .pgarde b{font-family:ui-monospace,Consolas,monospace;font-size:10pt}
  #post .pgarde i{font-style:normal;color:#555}
  #post .pnote{color:#333;margin-top:2pt;font-size:9pt}
  #post .pcols{display:flex;gap:18pt;margin-top:7pt}
  #post .pcols > div{flex:1}
  #post h4{font-size:7pt;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
    color:#666;margin:0 0 2pt}
  #post .pel span{display:inline-block;border:.5pt solid #666;padding:1pt 4pt;margin:0 3pt 3pt 0;font-size:8pt}
  #post .pel span.v{background:#000;color:#fff;border-color:#000}
  #post .prel{font-size:8.5pt;color:#222}
  #post .prel em{font-style:normal;color:#666}
  #post .pautres{margin-top:6pt;font-size:8.5pt;color:#555}
  #post .ppied{margin-top:16pt;padding-top:6pt;border-top:.75pt solid #bbb;font-size:8pt;color:#777}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
:focus-visible{outline:2px solid rgba(var(--acc-rgb),.8);outline-offset:2px}