/* Outil · Clap : seulement ce qui lui est propre (le reste vient de app/kit.css : .champ, .seg, .puces, .bascule, .rond, .pastille).
   Préfixe des classes : cl-

   L'ardoise (.cl-ardoise) est la même dans l'aperçu et en plein écran : toutes ses tailles sont en unités de sa propre boîte
   (cqw, cqh, cqmin), elle se dessine donc pareil à toutes les tailles. Blanc sur noir, le plus lisible de loin ; au clap,
   tout s'inverse. 4 lignes : projet et date ; scène, plan, prise ; les deux noms ; logo au centre et petits réglages.
   Toujours en paysage : le plein écran tourne d'un quart de tour si l'écran est tenu droit. L'aperçu est le plein écran de
   cet écran, dessiné à sa vraie taille puis réduit : aucune différence entre les deux.
   Une taille par rôle (data-role), figée : le CSS donne la taille pleine, outil.js la réduit une fois pour que le texte le
   plus long que le rôle peut recevoir tienne ; elle ne dépend jamais de ce qui est écrit. Les lignes 3 et 4 ont une hauteur
   fixe (15cqmin) et leur contenu est centré en hauteur, comme les numéros.
   Polices : les numéros en Unbounded (le cœur du clap) ; le projet, les noms et les réglages en Poppins, plus étroite :
   à place égale, le texte est plus grand, donc plus lisible de loin. */

/* ---------- L'ardoise ---------- */
.cl-ardoise { container-type: size; width: 100%; height: 100%; background: #000; color: #fff; text-align: left;
  --trait: color-mix(in srgb, currentColor 32%, transparent); }
/* Le contenu, dans un bloc intérieur : ainsi ses marges et ses hauteurs (en cq) se rapportent bien à l'ardoise, pas à la fenêtre */
.cl-contenu { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding: max(4.5cqmin, 44px) 5cqmin 4.5cqmin; }   /* en haut : la place du petit bouton fermer */
.cl-ardoise b { font-weight: inherit; }
/* Les libellés : tous de la même taille */
.cl-lib { display: block; font: 500 max(8px, 2.5cqmin)/1.3 var(--mono); letter-spacing: .12em; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1. Le projet et la date */
.cl-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 4cqw; min-width: 0; padding-bottom: 2.4cqmin; border-bottom: max(1px, .35cqmin) solid var(--trait); }
.cl-projet { flex: 1; min-width: 0; padding-right: .06em; font: 700 7.4cqmin/1.15 var(--corps); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.cl-projet.vide { opacity: .3; }
.cl-date { flex: none; font: 600 max(10px, 3.8cqmin)/1 var(--corps); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 2. Scène, plan, prise : le cœur du clap ; une boîte de la hauteur pleine (une valeur réduite reste centrée, les libellés alignés) */
.cl-nums { --gros: min(22cqw, 40cqh); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; min-height: 0; }
.cl-num { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; padding: 0 1.2cqw; }
.cl-num + .cl-num { border-left: max(1px, .35cqmin) solid var(--trait); }
.cl-tete { display: flex; align-items: center; gap: 1.6cqmin; min-width: 0; }
.cl-num b { display: flex; align-items: center; justify-content: center; max-width: 100%; height: var(--gros); padding: 0 .06em;
  font: 700 var(--gros)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
/* Les petits − / + de chaque numéro (en plein écran seulement) */
.cl-pm { display: inline-flex; gap: 1cqmin; }
.cl-pm button { width: max(26px, 4.4cqmin); height: max(26px, 4.4cqmin); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--trait); opacity: .7; touch-action: manipulation; }
.cl-pm button:hover { opacity: 1; }
.cl-pm svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* 3. Les deux noms : des cases fixes, Nom 1 (40 %), le signe sans son (20 %), Nom 2 (40 %) ; les noms alignés à gauche et à droite,
   le signe centré (en largeur et en hauteur). Une taille pour les deux noms. */
.cl-noms { height: 15cqmin; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 20fr) minmax(0, 40fr); align-items: center; min-height: 0;
  border-top: max(1px, .35cqmin) solid var(--trait); }
.cl-nom { min-width: 0; }
.cl-nom.droite { text-align: right; }
.cl-nom b { display: block; padding-right: .06em; font: 600 5.8cqmin/1.15 var(--corps); letter-spacing: 0; white-space: nowrap; overflow: hidden; }
.cl-sans-son { min-width: 0; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqmin; }
.cl-sans-son svg { width: 5.4cqmin; height: 5.4cqmin; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-sans-son .cl-lib { max-width: 100%; opacity: .8; letter-spacing: .06em; }

/* 4. Des cases fixes : Cam (16 %), Carte (16 %), le logo (36 %), Cadence (16 %), Décor (16 %) ; tout centré.
   Une taille pour tous les petits réglages (le « A » de la caméra = « INT · JOUR » = « 25 i/s »). */
.cl-l4 { height: 15cqmin; display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 16fr) minmax(0, 36fr) minmax(0, 16fr) minmax(0, 16fr); align-items: center; min-height: 0;
  border-top: max(1px, .35cqmin) solid var(--trait); }
.cl-case { min-width: 0; text-align: center; padding: 0 1cqw; }
.cl-case b { display: block; padding: 0 .03em; font: 600 4.4cqmin/1.2 var(--corps); letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.cl-logo-case { display: grid; place-items: center; min-width: 0; }
.cl-logo { width: 10cqmin; height: 10cqmin; display: grid; place-items: center; }
.cl-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-logo-bu { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* ---------- Dans l'outil : l'aperçu (on le touche pour passer en plein écran), le bouton, le formulaire ---------- */
.cl .outil-fixe { align-items: center; }
.cl-bloc { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cl-apercu { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #000;
  box-shadow: inset 0 0 0 1px var(--filet); transition: box-shadow .25s var(--courbe); }
.cl-apercu:hover { box-shadow: inset 0 0 0 1px var(--papier); }
.cl-apercu:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.cl-apercu .cl-ardoise { pointer-events: none; }
/* L'aperçu est l'ardoise du plein écran à sa vraie taille (outil.js, cadrerApercu), réduite d'un bloc */
.cl-echelle { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.cl-astuce-form { margin: -4px 0 0; text-align: center; }

.cl-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--libelle) 12px; }
.cl-pas { display: flex; justify-content: center; gap: 8px; }
.cl-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cl .seg button { min-width: 0; }
.cl-note { margin: 6px 0 0; }
.cl .champ > span i { color: var(--texte2); font-variant-numeric: tabular-nums; }   /* les compteurs de caractères, discrets */
/* Cadence « Autre » : le champ s'ouvre sous les puces */
.cl-cadence-libre { margin-top: var(--dans-groupe); }
.cl-cadence-libre[hidden] { display: none; }
/* Les deux noms : une ligne chacun, le titre (libre) puis le nom, et le compteur du nom */
.cl-noms-form { display: flex; flex-direction: column; gap: 10px; }
.cl-nom-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; gap: 10px; }
.cl-nom-ligne .cl-titre { color: var(--texte2); }
.cl-nom-ligne .cl-titre:focus { color: var(--papier); }
.cl-reste { min-width: 5ch; font: var(--repere); font-style: normal; letter-spacing: .1em; color: var(--texte2); text-align: right; font-variant-numeric: tabular-nums; }
.cl-logo-reglage { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cl-logo-vue { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 8px; border-radius: 12px; background: #000; color: #fff;
  box-shadow: inset 0 0 0 1px var(--filet); }
.cl-logo-vue img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-logo-reglage .pastille[hidden] { display: none; }

/* ---------- Le plein écran : l'ardoise prend tout ; en haut à droite, fermer ; l'astuce s'efface après 2,5 s ---------- */
.cl-ecran { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #000; color: #fff;
  opacity: 0; transition: opacity .25s var(--courbe); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.cl-ecran.visible { opacity: 1; }
/* Le contenu, toujours en paysage. Écran tenu droit : il prend la largeur pour hauteur et tourne d'un quart de tour
   (le haut de l'ardoise vers la droite de l'écran) ; les marges de sécurité (encoche, barre d'accueil) tournent avec lui */
.cl-tourne { --marge-haut: env(safe-area-inset-top); --marge-droite: env(safe-area-inset-right);
  position: absolute; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
@media (orientation: portrait) {
  .cl-tourne { inset: auto; top: 50%; left: 50%; width: 100vh; width: 100dvh; height: 100vw; translate: -50% -50%; rotate: 90deg;
    padding: env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top);
    --marge-haut: env(safe-area-inset-right); --marge-droite: env(safe-area-inset-bottom); }
}
.cl-ecran.sans-son { cursor: default; }
/* En option : les bandes d'un vrai clap, tout en haut, d'un bord à l'autre : une bande fine (7 % de la hauteur), des
   séparations en biais (environ 60°, « / »). Les motifs se calent sur la largeur de la bande (en %), pas sur une taille fixe :
   - Old school : les mêmes 8 segments que la version couleur, un sur deux blanc (noir, blanc, noir…), dans la couleur du texte
     (elles s'inversent au clap) ;
   - Couleur : la barre des claps récents, chaque couleur UNE fois, de gauche à droite : gris foncé, vert, jaune, bleu,
     rouge, blanc, gris clair, gris foncé (8 segments égaux).
   Le projet garde la place du bouton fermer (posé sur la bande, sur un rond noir) : 60 px au moins sous le haut. */
.cl-bandes { height: 0; }                                          /* toujours là (sa ligne de la grille), vide sans l'option */
.cl-ardoise.bandes .cl-contenu { padding-top: 0; }
.cl-ardoise.bandes .cl-bandes { height: 7cqmin; margin: 0 -5cqmin max(3.5cqmin, calc(44px - 7cqmin)); }
.cl-ardoise[data-bandes="classique"] .cl-bandes { background: repeating-linear-gradient(118deg, transparent 0 12.5%, currentColor 12.5% 25%); }
.cl-ardoise[data-bandes="couleur"] .cl-bandes { background: linear-gradient(118deg,
  #3b3e43 0 12.5%, #3f9a5b 12.5% 25%, #ebb73c 25% 37.5%, #2d6cb5 37.5% 50%,
  #d1433a 50% 62.5%, #f1f1ee 62.5% 75%, #a8aaad 75% 87.5%, #3b3e43 87.5% 100%); }
.cl-astuce { position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0; font: var(--valeur); letter-spacing: .06em;
  opacity: .5; white-space: nowrap; pointer-events: none; transition: opacity .8s var(--courbe); }
.cl-ecran.calme .cl-astuce, .cl-ecran.sans-son .cl-astuce { opacity: 0; }
.cl-ecran .rond { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
/* Fermer : petit et discret, tout en haut à droite de l'ardoise (dans ses marges de sécurité, qui tournent avec elle) ;
   sa propre croix, dessinée à sa taille, bien centrée */
.cl-fermer { position: absolute; top: calc(var(--marge-haut) + 6px); right: calc(var(--marge-droite) + 6px); width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-tap-highlight-color: transparent; transition: color .2s var(--courbe); }
.cl-fermer:hover { color: #fff; }
.cl-fermer svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Le clap : tout s'inverse, les boutons s'effacent (l'écran entier flashe) */
.cl-ecran.flash, .cl-ecran.flash .cl-ardoise { background: #fff; color: #000; }
.cl-ecran.flash .cl-fermer, .cl-ecran.flash .cl-pm, .cl-ecran.flash .cl-astuce { visibility: hidden; }
/* Ardoise ouverte : tout ce qui pourrait dépasser du calque (sous la barre d'accueil et la barre d'état de l'iPhone, en webapp)
   est noir aussi, jamais le fond brun de l'app : le fond de la page passe au noir, et le calque peint du noir tout autour de lui.
   Le calque lui-même garde la hauteur VISIBLE de l'écran (dvh) : plus grand (lvh), le bord de l'ardoise sortait de l'écran. */
html.cl-ouvert, html.cl-ouvert body { overflow: hidden; background: #000; }
.cl-ecran { box-shadow: 0 0 0 100vmax #000; }
.cl-ecran.flash { box-shadow: 0 0 0 100vmax #fff; }
@media (prefers-reduced-motion: reduce) { .cl-ecran, .cl-astuce { transition: none; } }