/* =============================================================
   FINITION DE LA PLATEFORME — le niveau du studio, étendu au reste
   (plan validé le 22/10 : https://claude.ai/artifact/9fcCtzxuxzf7EtbkxQcqdt).
   Chargée juste après design.css, AVANT le <style> de chaque page : une
   règle de page à spécificité égale garde donc la main. Les jetons
   (--m-*, --flotte, --rc-carte/-ligne/-ctrl/-mini) vivent dans
   design.css ; ici, seulement les composants qui s'en servent.

   La règle maison reste la loi : ce qui est POSÉ porte le double filet,
   ce qui FLOTTE porte une ombre, jamais les deux. La matière (voile,
   reflet de 1 px, filet de 1 px) se met DEDANS, sous le double filet.

   Étape 1 (socle) : pastilles, bascules, boutons, titres.
   ============================================================= */

/* --- pastilles d'état : 20 px, rayon 6, posées (comme « in use » du studio) --- */
.u-tag{
  height:20px; padding:0 7px; border-radius:6px; line-height:1; white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--m-reflet), inset 0 0 0 1px var(--m-filet);
}

/* --- bascule : une capsule posée, l'option choisie en relief --- */
.u-toggle{ padding:3px; border-radius:var(--rc-ctrl); box-shadow:inset 0 0 0 1px var(--m-filet); }
.u-toggle button{ height:30px; padding:0 12px; border-radius:7px; font-size:13px; }
.u-toggle button[aria-pressed="true"]{ box-shadow:inset 0 1px 0 var(--m-reflet), var(--toggle-lift); }

/* --- boutons : rayon de contrôle (≈ 25 % de la hauteur), matière sur le neutre,
   reflet et halo sur le plein (le « Créer la vidéo » du studio) --- */
.u-btn{ border-radius:var(--rc-ctrl); }
.u-btn--soft{ box-shadow:var(--m-pose); }
.u-btn--solid{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 28px -14px color-mix(in srgb, var(--accent-uni) 80%, transparent); }
.u-btn--sm{ height:28px; padding:0 10px; border-radius:var(--rc-mini); font-size:12.5px; }

/* --- titres : 24 px partout (ils allaient de 26 à 32 selon la page),
   sous-titre à 13 ; « body » pour passer devant le <style> de la page --- */
body .hello h1, body .geste h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; }
body .hello p{ font-size:13px; }
body .geste__sous{ font-size:13px; }

/* --- titre de section : 11 px, capitales espacées --- */
.t-label{ font-size:11px; font-weight:600; letter-spacing:.07em; }

/* =============================================================
   ÉTAPE 2 — tableau de bord, calendrier, grille.
   Objectif : les visuels d'abord, l'interface s'efface. Les vignettes
   prennent le filet clair du studio, le numéro et l'état passent en
   pastilles de verre posées sur l'image, les boutons du mois forment une
   capsule. Les règles visent grille-accueil.js (CSS injecté plus tard dans
   la page) et calendrier.html : « body » leur passe devant.
   ============================================================= */
/* le verre posé sur une image : même recette pour toutes les pastilles */
body .cal-mason__n, body .cal-mason__etq, body .cal-mason__cli, body .cal-mason__play, body .cal-vid{
  background:rgba(12,12,14,.8); color:#fff; -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* titre du mois : titre de section, 11 px en capitales */
body .gr-title__date{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }

/* liste · filtre · mois : une capsule posée (36 px), boutons fantômes de 30 */
body .gr-navs, body .cal-navs{ gap:2px; padding:3px; border-radius:12px; background:var(--panel); box-shadow:var(--m-pose); }
body .gr-nav, body .cal-nav{ width:30px; height:30px; border:0; border-radius:9px; background:transparent; }
body .gr-nav:hover, body .cal-nav:hover{ background:var(--surface-2); }
body .gr-nav svg, body .cal-nav svg{ width:16px; height:16px; }
body .gr-nav--filtre.is-actif::after{ top:5px; right:5px; width:6px; height:6px; }

/* vignettes : rayon 14, filet clair et reflet dessinés PAR-DESSUS l'image */
body .cal-mason__c{ border-radius:var(--rc-ligne); box-shadow:0 1px 0 rgba(0,0,0,.35); }
body .cal-mason__c::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07); }
/* numéro (26) et pastilles (20) centrés sur la même ligne */
body .cal-mason__n{ font-size:11.5px; }
body .cal-mason__etq, body .cal-mason__cli{ top:11px; height:20px; padding:0 8px; border-radius:6px; display:inline-flex; align-items:center; line-height:1; }
body .cal-mason__play{ width:28px; height:28px; }
body .cal-mason__lab{ margin:7px 2px 0; font-size:12px; color:var(--ink-2); }

/* calendrier : cases posées au rayon 10, matière dans les cases vides,
   filet clair sur les images ; l'anneau d'état garde sa couleur */
body .cal-cell{ border-radius:var(--rc-ctrl); background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .cal-cell.img{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
body .cal-cell--vide{ background:transparent; box-shadow:none; }
body .cal-cell[class*="ring-"]::after{ border-radius:var(--rc-ctrl); }
body .cal-vid{ width:20px; height:20px; }
@media (min-width:860px){
  /* au bureau, le jour d'une case illustrée devient une pastille de verre de 20 px */
  body .cal-cell.img .cal-cell__n{ top:6px; right:6px; min-width:20px; height:20px; padding:0 6px; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center; font-size:11px; text-shadow:none;
    background:rgba(12,12,14,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
  body .cal-cell.img .cal-vid{ top:auto; bottom:6px; }
}
body .cal-leg__p{ border-radius:4px; box-shadow:inset 0 0 0 1px var(--m-filet); }

/* état vide : le message, l'action, et l'image d'origine dessous (le client l'a
   préférée à la scène Matière du calendrier, 22/10) */
body .gr-vide--scene{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:520px; margin:12px auto 0; }
body .gr-vide--scene .gr-vide__msg{ display:flex; flex-direction:column; align-items:center; margin-top:24px; padding:0 16px; position:relative; z-index:1; }
body .gr-vide--scene .gr-vide__t{ font-size:15px; font-weight:700; }
body .gr-vide--scene .gr-vide__s{ font-size:12px; margin-top:4px; max-width:440px; }
body .gr-vide__btn{ margin-top:14px; height:36px; padding:0 16px; font-size:13px; text-decoration:none; }

/* téléphone : la grille reste à 6 px du bord (l'image d'abord), le titre du
   mois et la capsule s'alignent sur la gouttière de 16 px des autres pages */
@media (max-width:859px){
  body .apercu-carte-dash .gr-head{ padding:0 10px; }
}

/* =============================================================
   ÉTAPE 3 — publication (index.html).
   Objectif : lire le post tel qu'il paraîtra. La carte LinkedIn, le profil
   et les suggestions imitent LinkedIn : ils ne bougent pas. Seul le cadre
   Cohook se pose : la barre des dates, le dépôt de visuels, le bloc d'état
   et d'actions, le choix du visuel. index.html charge cette feuille en
   dernier ; « body » garde quand même la main sur ses règles à id.
   ============================================================= */
/* barre des dates : une capsule posée (rayon 18), le jour choisi en relief */
body .datebar{ background:var(--panel); border-radius:18px; padding:4px 10px; gap:10px; box-shadow:var(--m-pose); }
body .datebar .day{ border-radius:var(--rc-ctrl); padding:6px 4px; }
body .datebar .day.active{ width:52px; padding:8px 6px; border-radius:14px; background:var(--surface-2); box-shadow:inset 0 1px 0 var(--m-reflet), 0 1px 2px rgba(0,0,0,.25); }
:root[data-theme="clair"] body .datebar{ background:color-mix(in srgb, var(--ink) 4%, var(--panel)); }
:root[data-theme="clair"] body .datebar .day.active{ background:var(--panel); box-shadow:0 1px 2px rgba(20,20,30,.12), inset 0 0 0 1px rgba(0,0,0,.04); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]) body .datebar{ background:color-mix(in srgb, var(--ink) 4%, var(--panel)); }
  :root:not([data-theme="sombre"]) body .datebar .day.active{ background:var(--panel); box-shadow:0 1px 2px rgba(20,20,30,.12), inset 0 0 0 1px rgba(0,0,0,.04); }
}
body .nav-arrow{ width:36px; height:36px; border-radius:var(--rc-ctrl); }
body .nav-arrow:hover{ background:var(--surface); }

/* dépôt de visuels : double filet gardé (aside .depot), matière dedans */
body .depot{ background:var(--m-voile), var(--card, var(--panel)); box-shadow:var(--m-pose); }
body .depot__t{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .depot__c{ border-radius:var(--rc-mini); }
body .depot__c::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
body .depot__n{ top:4px; left:4px; height:16px; padding:0 5px; display:inline-flex; align-items:center; border-radius:5px;
  background:rgba(12,12,14,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
body .depot__x{ top:4px; right:4px; width:16px; height:16px; background:rgba(12,12,14,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
body .depot__add{ height:34px; padding:0 10px; border-radius:var(--rc-ctrl); font-size:12px; }

/* état et actions : le bloc posé avec matière, l'étiquette en pastille de
   20 px, la rangée d'actions creusée, une seule hauteur de bouton (36) */
body #etatBar.etat{ border-radius:20px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); padding:12px 6px 6px; }
body .etat__tag{ height:20px; padding:0 8px 0 7px; border-radius:6px; font-size:11.5px; gap:6px; }
body .etat__actions{ border-radius:14px; box-shadow:var(--m-creux); gap:10px; }
body #etatBar .u-toggle-solo{ height:36px; padding:0 14px; border-radius:var(--rc-ctrl); font-size:13px; gap:7px;
  box-shadow:var(--m-pose), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
body #etatBar .u-toggle-solo[aria-pressed="true"]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 28px -14px color-mix(in srgb, var(--accent-uni) 80%, transparent); }

/* choix du visuel et téléchargement : une capsule de 36 et un bouton de 36 */
body .visual-toggle{ padding:3px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--m-filet); }
body .visual-toggle .vt-thumb{ top:3px; left:4px; /* le script déplace de offsetLeft − 4 */ height:calc(100% - 6px); border-radius:9px; box-shadow:inset 0 1px 0 var(--m-reflet), var(--toggle-lift); }
body .visual-toggle .vt-opt{ height:30px; padding:0 18px; border-radius:9px; font-size:13px; }
body .visual-toggle .vt-check{ top:-2px; right:2px; }
body .vt-dl{ width:36px; height:36px; border-radius:var(--rc-ctrl); box-shadow:inset 0 0 0 1px var(--m-filet); }
body .vt-dl svg{ width:17px; height:17px; }

/* =============================================================
   ÉTAPE 4 — idées et actus.
   Objectif : lire un sujet, puis le rédiger d'un geste. Les actus gardent
   leur double carte (convention du 28/07) avec la matière dedans ; les
   idées déposées deviennent des cartes posées ; les états vides passent
   sur les scènes Matière (actus, idées), dessinées en CSS au-dessus du
   message existant — les textes et leur traduction ne changent pas.
   ============================================================= */
/* actus : la double carte, posée */
body .sj{ border-radius:20px; padding:6px 6px 10px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .sj__inner{ border-radius:var(--rc-ligne); padding:16px 18px; box-shadow:var(--m-pose); }
body .sj__t{ font-size:16px; letter-spacing:-.01em; }
body .sj__angle{ font-size:13px; }
body .sj__pq{ font-size:12px; }
body .sj__foot{ margin-top:10px; padding:0 10px; }
body .sj__meta{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .sj__sugg{ height:28px; padding:0 12px; border-radius:var(--rc-mini); box-shadow:var(--m-pose); }
body .sj__src{ width:28px; height:28px; border-radius:var(--rc-mini); box-shadow:var(--m-pose); }
@media (min-width:860px){
  /* l'aide « pourquoi » tient sur une ligne au bureau ; la carte entière ouvre le lecteur */
  body .sj__pq{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:859px){
  body .sj__pq{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* idées déposées : cartes posées au rayon 16, une rangée de 28 en tête */
body .depot__btn{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .idee{ border-radius:16px; padding:14px 16px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .idee__top{ min-height:28px; }
body .idee__when{ font-size:12px; }
body .idee__del{ width:28px; height:28px; border-radius:var(--rc-mini); }
body .idee__relance, body .idee__lien{ height:28px; padding:0 10px; border-radius:var(--rc-mini); display:inline-flex; align-items:center; box-shadow:var(--m-pose); }
body .idee__relance{ border:0; font:600 12.5px/1 'Manrope', sans-serif; }  /* sa règle d'origine (« font:… inherit ») est invalide : le navigateur l'ignorait */
body .idee__media, body .idee__medias img, body .idee__medias video{ border-radius:var(--rc-mini); border:0; box-shadow:0 0 0 1px var(--m-filet); }
body .idee__echec{ border-radius:var(--rc-mini); }

/* états vides : la scène au-dessus du message, fondue dans la page */
body main > #empty.empty, body .depot__volet > #empty.empty{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:520px; margin:12px auto 0; padding:0 16px; background:none; box-shadow:none;
  font-size:13px; font-weight:500; line-height:1.45; color:var(--ink-2);
}
body main > #empty.empty::before, body .depot__volet > #empty.empty::before{
  content:''; display:block; width:100%; aspect-ratio:16 / 9; border-radius:18px;
  background:center / cover no-repeat url(/assets/plateforme/illus/actus.webp);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%); mask-image:radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%);
}
body .depot__volet > #empty.empty::before{ background-image:url(/assets/plateforme/illus/idees.webp); }
body main > #empty.empty[hidden], body .depot__volet > #empty.empty[hidden]{ display:none; }
@media (max-width:719px){
  /* téléphone : la pile de photos en tête de Créer fait déjà l'illustration */
  body .depot__volet > #empty.empty::before{ display:none; }
  body .depot__volet > #empty.empty{ padding:20px 16px; }
}

/* =============================================================
   ÉTAPE 5 — création (ecrire.html).
   Objectif : écrire sans distraction, enregistrer d'un geste. Les blocs se
   posent (rayon 24, matière), les champs se creusent (on voit où écrire),
   les bascules passent en capsule, et la barre d'actions, qui flotte en bas,
   devient du verre avec son ombre — sans double filet, puisqu'elle flotte.
   ============================================================= */
body section.bloc{ border-radius:var(--rc-carte); padding:20px 22px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .lab{ font-size:11px; font-weight:600; letter-spacing:.07em; }
/* champs creusés, au rayon 12 (≈ 25 % d'un champ de 48) */
/* (le fond d'origine reste : plus sombre que lui, le champ se perdait dans le bloc) */
body .saisie, body .zone{ border-radius:12px; box-shadow:var(--m-creux); }
body .saisie:focus, body .zone:focus{ box-shadow:var(--m-creux), 0 0 0 3px color-mix(in srgb, var(--accent-uni) 28%, transparent); }
/* langues : la capsule des bascules (30 px), l'option choisie en relief */
body .langs{ padding:3px; border-radius:var(--rc-ctrl); box-shadow:inset 0 0 0 1px var(--m-filet); }
body .langs button{ height:30px; padding:0 12px; border-radius:7px; }
body .langs button[aria-pressed="true"]{ box-shadow:inset 0 1px 0 var(--m-reflet), var(--toggle-lift); }
/* réseaux : puces de 30, posées */
body .rx-puce{ height:30px; padding:0 12px; border-radius:var(--rc-mini); border:0; box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px; }
body .rx-puce[aria-pressed="true"]{ box-shadow:inset 0 1px 0 var(--m-reflet), inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); }
/* visuels : vignettes au rayon 10 avec filet, rang en verre, ajout à 10 */
body .vis__c{ border-radius:var(--rc-ctrl); }
body .vis__c::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07); }
body .vis__n{ height:20px; padding:0 7px; display:inline-flex; align-items:center; border-radius:6px; background:rgba(12,12,14,.8);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
body .ajout{ border-radius:var(--rc-ctrl); border-width:1.5px; border-color:color-mix(in srgb, var(--ink) 34%, transparent); }
body .vid-prep{ border:0; border-radius:var(--rc-ligne); box-shadow:var(--m-pose); }
/* la barre d'actions flotte : verre, reflet, ombre ; une hauteur (36) */
body .actions{ border-radius:20px; padding:10px; background:var(--m-verre); -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:inset 0 1px 0 var(--m-reflet), inset 0 0 0 1px var(--m-filet), var(--flotte); }
body .actions .u-btn, body .actions button{ height:36px; padding:0 14px; font-size:13px; }

/* =============================================================
   ÉTAPE 6 — profil et paramètres (profil.html, parametres.html).
   Objectif : régler vite, sans relire deux fois. Cartes au rayon 24
   (avant 32) avec matière, lignes de réglage d'au moins 64 px, une seule
   hauteur de contrôle (36), aides de 12 px sur une ligne au bureau (le
   texte entier en infobulle, parametres.html), champs creusés au rayon 12.
   ============================================================= */
body .card:not(.profile):not(.suggest):not(.ad):not(#postCard){ border-radius:var(--rc-carte); background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .rg{ min-height:64px; }
body .rg__t{ font-size:13.5px; }
body .rg__s{ font-size:12px; }
body .rg .u-btn:not(.u-btn--sm){ height:36px; padding:0 14px; font-size:12.5px; }
@media (min-width:860px){
  body .rg__s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal; }
}
body .rg__li{ border-radius:var(--rc-ctrl); }
body .rx-ligne{ border-radius:var(--rc-ligne); box-shadow:var(--m-pose); }
body .rx-ligne img{ border-radius:var(--rc-mini); }

/* profil : champs creusés, libellés de 11, avatar et bannière posés */
body .champ label{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .champ input, body .champ textarea{ border-radius:12px; box-shadow:var(--m-creux); }
body .champ input:focus, body .champ textarea:focus{ box-shadow:var(--m-creux), 0 0 0 3px color-mix(in srgb, var(--accent-uni) 28%, transparent); }
body .champ__aide{ font-size:12px; }
body .who__av{ box-shadow:0 0 0 1px var(--m-filet), 0 0 0 4px color-mix(in srgb, var(--ink) 5%, transparent); }
body .ban{ border-radius:var(--rc-ligne); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
/* bannière vide : la scène « publication » de la série Matière plutôt qu'un aplat */
body #banApercu:not([style*="url"]){ background:#0b1f2a center / cover no-repeat url(/assets/plateforme/illus/publication.webp); }
body .ctx{ border-radius:var(--rc-ligne); }
body .bk-coul{ border:0; border-radius:12px; box-shadow:var(--m-pose); }
body .bk-preview{ border-radius:var(--rc-ligne); }

/* =============================================================
   ÉTAPE 7 — admin (Mes clients, fiche client, plateforme, équipe,
   templates). Objectif : traiter vingt publications sans chercher un
   bouton. Dense et aligné : une hauteur par ligne (actions 28, pastilles
   20), chiffres tabulaires, capsules. Pas d'illustration dans les listes.
   Le double filet des clients « à traiter » et des cartes de la plateforme
   et de l'équipe reste tel quel : la matière se met dessous.
   ============================================================= */
/* Mes clients : les chiffres en attente, posés, en tabulaires */
body .todo__card{ border-radius:18px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .todo__n{ border-radius:12px; box-shadow:var(--m-pose); font-variant-numeric:tabular-nums; }
body .todo__l{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .cli{ border-radius:16px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .cli__av{ box-shadow:0 0 0 1px var(--m-filet); }
body .add{ border-width:1.5px; border-color:color-mix(in srgb, var(--ink) 34%, transparent); border-radius:var(--rc-ligne); }
/* le mini-calendrier du rail */
body .mc{ border-radius:var(--rc-carte); background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .mc__pop{ outline:0; box-shadow:inset 0 1px 0 var(--m-reflet), inset 0 0 0 1px var(--m-filet), var(--flotte); }

/* fiche client : onglets en capsule, lignes de post posées à une hauteur */
body .ftabs{ padding:3px; gap:2px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--m-filet); }
body .ftab{ height:30px; padding:0 10px; border-radius:9px; font-size:12.5px; }
body .ftab--on{ box-shadow:inset 0 1px 0 var(--m-reflet), var(--toggle-lift); }
body .fiche__profil{ height:32px; padding:0 12px; font-size:12.5px; }
body .post{ border-radius:var(--rc-ligne); padding:8px 12px 8px 8px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); min-height:60px; }
body .post__vis{ width:44px; height:44px; border-radius:var(--rc-mini); box-shadow:0 0 0 1px var(--m-filet); }
body .post__act{ gap:6px; }
body .post__act .u-btn{ height:28px; padding:0 10px; border-radius:var(--rc-mini); font-size:12px; }
body .post__act .post__supp{ width:28px; padding:0; }
body .post__d{ font-size:13px; }
@media (min-width:720px){ body .post{ grid-template-columns:44px 1fr auto; } }
body .fiche .empty, body .vide{ border-radius:var(--rc-ligne); }

/* plateforme et équipe : doubles cartes avec matière, chiffres tabulaires */
body .orgc{ border-radius:var(--rc-carte); background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .orgc__stat, body .som .kpi{ border-radius:16px; }
body .som .kpi{ background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .orgc__stat__in, body .som .kpi__n{ border-radius:12px; box-shadow:var(--m-pose); font-variant-numeric:tabular-nums; }
body .orgc__stat span, body .som .kpi__l, body .dc__t{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .dc{ border-radius:var(--rc-ligne); }
body .dc__in{ border-radius:var(--rc-ctrl); box-shadow:var(--m-pose); }
body .mini{ height:28px; padding:0 10px; border-radius:var(--rc-mini); box-shadow:var(--m-pose); font-size:12px; }
body .eq-field label{ font-size:11px; font-weight:600; letter-spacing:.07em; }
body .eq-field input, body .inv input{ border-radius:12px; box-shadow:var(--m-creux); }
body .eq-av{ box-shadow:0 0 0 1px var(--m-filet); }
body .eq-res__lien{ border-radius:var(--rc-ligne); box-shadow:var(--m-creux); }

/* templates : cartes posées au rayon 18, puces de 20, actions de 28 ; l'éditeur flotte */
body .tpl{ border-radius:18px; background:var(--m-voile), var(--panel); box-shadow:var(--m-pose); }
body .chip{ height:20px; padding:0 7px; display:inline-flex; align-items:center; border-radius:6px; }
body .tpl__act button{ height:28px; border-radius:var(--rc-mini); box-shadow:var(--m-pose); }
body .ed{ border-radius:var(--rc-carte); box-shadow:inset 0 1px 0 var(--m-reflet), inset 0 0 0 1px var(--m-filet), var(--flotte); }

/* =============================================================
   ÉTAPE 8 — connexion, inscription, mot de passe, invitation.
   Objectif : donner envie d'entrer, en confiance. Le visuel « Stay
   consistent » ne bouge pas. Le formulaire reste posé DIRECTEMENT sur le
   fond, sans cadre ni panneau autour (demande du client, 22/10) ; seule
   une ambiance est permise ici : un halo bleu Cohook derrière lui, tiré de
   la marque et non d'une vidéo. Boutons à 44, champs creusés.
   ============================================================= */
body .geste{ position:relative; isolation:isolate; }
body .geste::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 48%, color-mix(in srgb, var(--accent-uni) 16%, transparent), transparent 70%); }
body .oauth, body .entrer{ height:44px; padding:0 16px; border-radius:11px; }
body .oauth{ border:0; box-shadow:var(--m-pose), inset 0 0 0 1px var(--edge); }
body .oauth--google, body .entrer{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 28px -12px color-mix(in srgb, var(--accent-uni) 80%, transparent); }
body .geste .champ input{ height:44px; border-radius:11px; }
body .oeil{ border-radius:var(--rc-mini); }
body .geste .u-toggle{ width:100%; }
body .geste .u-toggle button{ flex:1; }