/* ════════════════════════════════════════════════════════════
   STUDIO — To The Top
   Charte agence (Inter + Cormorant Garamond, fond nuit, bleu #4F7CFF)
   croisee avec les deux references : fond quasi-noir, serif geant
   tres interlettre, micro-typo capitales espacees, zero aplat de
   couleur — ce sont les images qui colorent.
   ════════════════════════════════════════════════════════════ */

:root {
  /* La hauteur de la barre du haut. Tout ce qui est cale dessous la lit :
     la scene, la fiche, le volet de Margaux. Sur un telephone la barre passe
     a deux rangees et cette seule valeur suffit a tout redescendre. */
  --barre-h: 58px;
  --noir:    #07090D;
  --bg:      #0B1018;
  --panel:   #0F1622;
  --panel-2: #131B2A;
  --line:    rgba(255,255,255,.09);
  --border:  #1E2D47;
  --txt:     #ffffff;
  --soft:    rgba(255,255,255,.58);
  --mute:    rgba(255,255,255,.30);
  --faint:   rgba(255,255,255,.14);
  --blue:    #4F7CFF;
  /* les memes composantes, pour les fonds translucides : c est ce qui
     permet au second atelier de tout repeindre en changeant UNE ligne */
  --primaire: 79,124,255;
  --blue-dk: #2855D4;
  --ease:    cubic-bezier(.76,0,.24,1);
  /* le nom est resté, la typo non : plus de serif dans le Studio (17/09/2026) */
  --serif:   'Poppins', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--noir);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                     /* les vues gerent leur propre defilement */
}
img { display: block; max-width: 100%; }

/* ── la barre de defilement ─────────────────────────────────
   Celle de Windows est grise et large : elle jurait avec tout
   le reste. Une seule regle pour toute l'application. */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 10px;
  /* la bordure transparente amincit le curseur sans reduire la zone
     ou l'on peut l'attraper */
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--blue); background-clip: content-box; }
/* les petites listes ont droit a une barre plus fine encore */
.palette-liste, .platine-liste, .carte-liste, .agent-fil {
  scrollbar-color: rgba(255,255,255,.13) transparent;
}
.palette-liste::-webkit-scrollbar,
.platine-liste::-webkit-scrollbar,
.carte-liste::-webkit-scrollbar,
.agent-fil::-webkit-scrollbar { width: 8px; }
.palette-liste::-webkit-scrollbar-thumb,
.platine-liste::-webkit-scrollbar-thumb,
.carte-liste::-webkit-scrollbar-thumb,
.agent-fil::-webkit-scrollbar-thumb { border-width: 2px; }
/* le carrousel n'en montre aucune : il se pilote au clic et au clavier */
.arc-scrubber { scrollbar-width: none; }

/* La regle ci-dessus est une regle d'auteur : elle bat celle du navigateur pour
   l'attribut `hidden`, et une image « cachee » restait donc affichee — le logo
   du projet precedent survivait sur un projet qui n'en a pas. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* la micro-typo des deux references : 10px, capitales, tres espacees */
.micro {
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   CONNEXION
   ════════════════════════════════════════════════════════════ */
.connexion {
  min-height: 100vh; display: grid; place-items: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--primaire),.10) 0%, transparent 70%),
    var(--noir);
}
.connexion-boite { width: 100%; max-width: 380px; text-align: center; }
.connexion-logo { height: 34px; width: auto; margin: 0 auto 2.5rem; opacity: .95; }
.connexion h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: 2.6rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: .6rem;
}
.connexion-sous { color: var(--mute); margin-bottom: 2.5rem; }
.connexion-sous.micro { letter-spacing: .18em; }
.champ { margin-bottom: .8rem; text-align: left; }
.champ label {
  display: block; color: var(--mute); margin-bottom: .45rem;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.champ input {
  width: 100%; padding: .85rem 1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  outline: none; transition: border-color .2s;
}
.champ input:focus { border-color: var(--blue); }
.connexion-btn {
  width: 100%; margin-top: 1.2rem; padding: .95rem;
  background: var(--blue); border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.connexion-btn:hover { background: var(--blue-dk); transform: translateY(-1px); }
.connexion-btn:disabled { opacity: .5; cursor: wait; transform: none; }
.connexion-err {
  margin-top: 1rem; min-height: 1.2em;
  font-size: 12px; color: #ff8080;
}
.connexion-pied { margin-top: 2.5rem; color: var(--faint); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

/* ════════════════════════════════════════════════════════════
   BARRE HAUTE  (commune aux trois vues)
   ════════════════════════════════════════════════════════════ */
.barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--barre-h); display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem;
  background: rgba(7,9,13,.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.marque { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.marque img { height: 20px; width: auto; }
.marque span {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.05rem; letter-spacing: .04em;
}

/* un filet colore sous la barre : elle se detachait mal du fond */
.barre::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--primaire),.55) 24%,
                                     rgba(124,92,255,.42) 58%, transparent 100%);
}

/* — LES SECTIONS — */
/* A cinq onglets — l atelier Conodor — la pastille poussait « Sortir » hors
   de l ecran et coupait les libelles en deux lignes. Elle peut maintenant
   retrecir et defiler ; les libelles, eux, ne se coupent jamais. */
.sections {
  position: relative; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.05); border-radius: 999px;
  border: 1px solid var(--line);
}
/* le curseur glisse d'une section a l'autre au lieu de sauter */
.sections .curseur {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0;
  background: rgba(255,255,255,.10); border-radius: 999px;
  transition: transform .38s var(--ease), width .38s var(--ease);
  pointer-events: none;
}
.sections button {
  position: relative; z-index: 1;
  padding: .45rem 1.15rem; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); transition: color .25s;
}
.sections button:hover { color: var(--soft); }
.sections button.actif { color: var(--txt); }

.barre-fin { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.compteur { color: var(--mute); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.btn-fin {
  padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); transition: border-color .2s, color .2s;
}
.btn-fin:hover { border-color: var(--blue); color: var(--txt); }
/* l'action principale de la section se distingue des boutons de service */
.btn-fin.primaire {
  border-color: rgba(var(--primaire),.5); color: var(--txt);
  background: rgba(var(--primaire),.13);
}
.btn-fin.primaire:hover { background: rgba(var(--primaire),.26); border-color: var(--blue); }

.moi { display: flex; align-items: center; gap: .55rem; }
.pastille {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 4px rgba(255,255,255,.05);
}
.moi-nom {
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft);
}

/* La scene occupe tout sous la barre ET defile : le carrousel tient la hauteur
   pleine, les blocs se decouvrent en descendant. */
.scene {
  position: fixed; inset: var(--barre-h) 0 0 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ════════════════════════════════════════════════════════════
   VUE 2 — « ARC »   (reference Manjesh UI Designer)
   Rangee d'images gauchies sur un cylindre + titre geant tourne.
   Pilotee au clavier, a la molette et au glisser — pas d'autoplay,
   exactement comme la video.
   ════════════════════════════════════════════════════════════ */
.arc {
  position: relative; height: 100%; overflow: hidden;
  background: #131313;
  display: grid; place-items: center;
  cursor: grab;
}

/* Les halos de couleur du fond : ils reprennent la charte du site regarde.
   Poses en absolu, tres flous et peu opaques — c'est une ambiance, pas un
   decor : les captures doivent rester ce qu'on regarde. */
/* Le fond reste UNI : c'est le #131313 de .arc qu'on voit au centre. On ne
   pose que deux lueurs tres douces dans les angles, aux couleurs de charte du
   site regarde.
   Essai precedent abandonne : dessiner la capture en 40x24 puis l'agrandir.
   L'interpolation d'une si petite image donne un rendu pateux et pixelise, et
   surtout elle recouvrait tout le fond. Un degrade CSS, lui, est lisse par
   construction et ne coute rien. */
.arc-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.arc-teinte {
  position: absolute; inset: -20%;
  opacity: 0;
  transition: opacity 1.2s var(--ease), background 1.2s var(--ease);
  animation: derive 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes derive {
  from { transform: translate3d(-1.5%, -1%, 0); }
  to   { transform: translate3d( 1.5%,  1%, 0); }
}
@media (prefers-reduced-motion: reduce) { .arc-teinte { animation: none; } }

.arc-scene, .arc-entete, .arc-scrubber { position: relative; z-index: 1; }
.arc.tire { cursor: grabbing; }

.arc-scene { position: relative; width: 100%; height: clamp(280px, 46vh, 440px); }
.arc-piste { position: absolute; top: 0; left: 50%; height: 100%; }

/* La carte n'est plus qu'un support : tout est peint dans le canvas, courbure
   comprise. Aucune transition CSS ici — l'animation est pilotee image par image
   en JavaScript, puisque la deformation depend de la position de la carte.
   Sa largeur suit le format des captures pour que le site tienne en entier. */
.arc-carte {
  --w: clamp(320px, 44vw, 660px);
  position: absolute; top: 50%; left: 0;
  width: var(--w); margin-left: calc(var(--w) / -2);
  will-change: transform;
}
.arc-toile { display: block; width: 100%; position: relative; z-index: 1; }

/* La page vivante posee sur la carte du centre. Le filtre lui donne la meme
   courbure que le canvas ; elle se pose par-dessus une fois chargee. */
/* La boite decoupe la bande visible et porte la courbure ; l'iframe deborde
   vers le haut pour que l'en-tete du site sorte du cadre. */
/* L'enveloppe decoupe la bande visible — APRES le filtre. */
.arc-vive-enveloppe {
  position: absolute; left: 0; z-index: 2; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease);
}
.arc-vive-enveloppe.la { opacity: 1; }
/* La boite porte la courbure et deborde de la bande : le filtre puise ainsi
   dans du vrai contenu au lieu d'etirer un bord net, qui devenait un escalier. */
.arc-vive-boite {
  position: absolute; left: 0; overflow: hidden;
  filter: url(#courbure);
  /* fondu court : l'animation d'entree du site commence des le chargement,
     un fondu long en mangerait le debut */
  transition: opacity .22s var(--ease);
}
.arc-vive {
  position: absolute; left: 0; border: 0;
  transform-origin: top left;           /* la reduction part du coin */
}
/* le canvas reste dessous : il porte l'image pendant le chargement */
/* La video reste dans la page, mais transparente et derriere le canvas :
   en `display: none` le navigateur ne decode aucune image, et drawImage ne
   recuperait qu'un cadre blanc. */
.arc-carte video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: 0;
}

/* Le nom du projet retenu, en haut de la page — il barrait les images quand
   il etait geant et vertical au milieu. */
.arc-titre {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  pointer-events: none; z-index: 4;
  transition: opacity .35s;
}
/* Le logo du client tient lieu de titre : il l'identifie mieux que son nom.
   Exporte en 220 px de haut pour rester net sur un ecran haute densite. */
.arc-titre-logo {
  height: clamp(48px, 7vh, 92px); width: auto;
  max-width: min(48vw, 540px); object-fit: contain;
}
/* Symbole seul : il est accompagne du nom, donc plus petit et le nom mesure */
.titre-double .arc-titre-logo { height: clamp(38px, 5.2vh, 62px); }
.titre-double .arc-titre-texte { font-size: clamp(1.3rem, 2.6vw, 2.2rem); }
/* Repli pour les projets sans logo : le nom, dans la typo de titre de son
   site — famille et taille sont posees par le script. */
.arc-titre-texte {
  font-family: var(--serif); font-weight: 400;
  font-size: 3.2rem;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; text-align: center;
}
.arc.bouge .arc-titre { opacity: 0; }     /* le titre s'efface pendant le mouvement */

/* le scrubber du bas : les noms, l'actif en blanc net */
.arc-scrubber {
  position: absolute; bottom: 8%; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: flex-start; align-items: center; gap: 1.6rem;
  padding: 0 50%;                       /* n'importe quel nom peut venir au centre */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.arc-scrubber::-webkit-scrollbar { display: none; }
/* Le logo du site plutot que son nom. Les logos sont de formes et de couleurs
   tres diverses : on les eteint en gris pour que la rangee reste calme, et
   seul le projet retenu retrouve ses couleurs. */
.arc-scrubber button {
  font-family: var(--serif); font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255,255,255,.22); transition: color .3s;
  display: flex; align-items: center; flex-shrink: 0;
}
.arc-scrubber button:hover { color: rgba(255,255,255,.6); }
.arc-scrubber button.actif { color: var(--txt); font-weight: 600; }

.arc-scrubber img {
  height: 26px; width: auto; max-width: 130px; object-fit: contain;
  opacity: .3; filter: grayscale(1);
  transition: opacity .35s, filter .35s, transform .35s var(--ease);
}
.arc-scrubber button:hover img { opacity: .6; }
.arc-scrubber button.actif img { opacity: 1; filter: none; transform: scale(1.08); }

.arc-entete {
  position: absolute; top: 1.6rem; left: 2rem; right: 2rem; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.arc-entete .gauche { font-family: var(--serif); font-size: 1.05rem; color: var(--soft); }

/* ════════════════════════════════════════════════════════════
   LES BLOCS SOUS LE CARROUSEL — taches, rendez-vous et appels
   La scene defile : le carrousel occupe la hauteur pleine, et ces
   blocs se decouvrent en descendant.
   ════════════════════════════════════════════════════════════ */
.blocs { background: var(--bg); }
.bloc { padding: 3rem 2.5rem 3.4rem; border-top: 1px solid var(--border); }

.bloc-tete {
  display: flex; align-items: baseline; gap: 1.1rem;
  margin-bottom: 1.7rem; flex-wrap: wrap;
}
/* Les titres de bloc sont en sans : la serif reste pour le nom du client, qui
   est ce qu'on doit lire en premier. */
.bloc-tete h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  letter-spacing: .17em; text-transform: uppercase;
}
.bloc-compte { color: var(--faint); }
.bloc-tete > form, .bloc-tete > .btn-fin { margin-left: auto; }
.bloc-vide { color: var(--faint); font-size: 13px; }

.ajout-ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.ajout-ligne input, .ajout-ligne select {
  padding: .45rem .75rem; color: var(--txt);
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px; outline: none; transition: border-color .2s;
}
.ajout-ligne input[type="text"] { width: 240px; }
.ajout-ligne input[type="date"] { color: var(--soft); color-scheme: dark; font-size: 11.5px; }
.ajout-ligne input:focus, .ajout-ligne select:focus { border-color: var(--blue); }

/* des carres, comme demande */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.carte {
  aspect-ratio: 1 / 1;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem;
  overflow: hidden;
  transition: border-color .25s, transform .3s var(--ease);
}
.carte:hover { border-color: rgba(255,255,255,.22); transform: translateY(-3px); }
.carte-haut { display: flex; align-items: center; gap: .5rem; }
.carte-texte { font-size: 15px; line-height: 1.45; flex: 1; overflow: hidden; }
.carte-info { font-size: 12px; color: var(--soft); }
.carte-bas { display: flex; align-items: center; gap: .5rem; margin-top: auto; }
.carte-date {
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}
/* une tache venue du CRM : discret, mais on sait ou elle se gere aussi */
.carte-crm {
  padding: .1rem .4rem; border-radius: 4px; border: 1px solid var(--border);
  font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--soft);
  text-decoration: none;
}
.carte-crm:hover { border-color: var(--blue); color: var(--txt); }
.carte-suppr {
  margin-left: auto; color: var(--faint);
  font-size: 16px; line-height: 1; transition: color .2s;
}
.carte-suppr:hover { color: #ff8080; }

/* la pastille du projet rattache : son logo, sinon son nom */
.puce-projet {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--soft);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  padding: .22rem .5rem; border-radius: 999px;
}
.puce-projet img { height: 13px; width: auto; opacity: .9; }
.puce-projet.vide { color: var(--faint); }

.carte-coche {
  margin-left: auto; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid var(--mute);
  display: grid; place-items: center; font-size: 11px; color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.carte-coche:hover { border-color: var(--blue); }

/* une echeance depassee doit sauter aux yeux */
.carte-tache.retard { border-color: rgba(255,128,128,.45); }
.carte-tache.retard .carte-date { color: #ff8080; }
.carte-tache.aujourdhui .carte-date { color: var(--blue); }
.carte-tache.faite { opacity: .45; }
.carte-tache.faite .carte-texte { text-decoration: line-through; }
.carte-tache.faite .carte-coche { background: var(--blue); border-color: var(--blue); color: #fff; }

.badge-genre {
  flex-shrink: 0;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .24rem .55rem; border-radius: 4px;
  background: rgba(var(--primaire),.16); color: var(--blue);
}
.carte-rdv { cursor: pointer; }
.genre-appel .badge-genre { background: rgba(74,222,128,.15); color: #4ade80; }
.genre-autre .badge-genre { background: rgba(255,255,255,.08); color: var(--soft); }

/* ════════════════════════════════════════════════════════════
   AGENDA — six semaines pleines, pour que la mise en page ne saute
   pas d'un mois a l'autre. Rail de l'annee a gauche comme dans le
   carrousel, et colonne « Prochainement » a droite : la grille seule
   laissait un grand vide et se lisait comme un tableur.
   ════════════════════════════════════════════════════════════ */
.agenda {
  position: relative; height: 100%;
  display: flex;
  padding: 1.6rem 2rem 1.4rem;
  background: var(--bg);
  overflow: hidden;
}

/* un peu de profondeur, comme sous le carrousel */
.agenda-halos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.agenda-halos .halo { position: absolute; border-radius: 50%; }
.halo-a {
  width: 54%; height: 66%; left: -12%; top: -16%; opacity: .17;
  background: radial-gradient(circle at 50% 50%, #4F7CFF 0%, transparent 70%);
}
.halo-b {
  width: 48%; height: 60%; right: -10%; bottom: -18%; opacity: .14;
  background: radial-gradient(circle at 50% 50%, #7c5cff 0%, transparent 70%);
}

/* le rail de l'annee, tourne — le meme geste que la categorie du carrousel */
.agenda-rail {
  position: relative; z-index: 1;
  flex-shrink: 0; width: 46px;
  display: flex; align-items: center; justify-content: center;
}
.agenda-rail .annee {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300;
  letter-spacing: .3em; color: var(--faint);
}

.agenda-corps {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}

.agenda-tete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem; }
.agenda-mois {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: .06em; line-height: 1;
}
/* le mois porte le regard, l'annee est au rail : pas de redite */
.agenda-mois em { font-style: normal; text-transform: capitalize; }

.agenda-fleche {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 1.2rem; color: var(--soft);
  transition: border-color .2s, color .2s, background .2s;
}
.agenda-fleche:hover { border-color: var(--blue); color: var(--txt); background: rgba(var(--primaire),.10); }
.agenda-aujourdhui { margin-left: auto; }

/* la grille a gauche, ce qui arrive a droite */
.agenda-plan {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.6rem;
}
.agenda-cal { display: flex; flex-direction: column; min-height: 0; }

.agenda-entete {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding-bottom: .55rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.agenda-entete span {
  font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--mute); padding-left: .6rem;
}

/* le fond du conteneur fait office de filets entre les cases */
.agenda-grille {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.agenda-case {
  position: relative;
  background: var(--panel);
  padding: .5rem .55rem;
  display: flex; flex-direction: column; gap: 3px;
  overflow: hidden; cursor: pointer;
  transition: background .2s;
}
.agenda-case:hover { background: var(--panel-2); }
.agenda-case.weekend { background: rgba(11,16,24,.72); }
.agenda-case.weekend:hover { background: var(--panel); }
.agenda-case.hors { background: rgba(11,16,24,.4); }
.agenda-case.hors .agenda-num { color: rgba(255,255,255,.10); }

/* un « + » discret n'apparait qu'au survol : il dit que la case s'ajoute */
.agenda-case::after {
  content: '+';
  position: absolute; right: .5rem; top: .35rem;
  color: var(--faint); font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .2s;
}
.agenda-case:hover::after { opacity: 1; }

.agenda-num {
  font-family: var(--serif); font-size: 1.15rem; line-height: 1;
  color: var(--soft); flex-shrink: 0;
}

/* aujourd'hui : une lueur douce plutot qu'une pastille rapportee */
.agenda-case.aujourdhui {
  background:
    radial-gradient(ellipse 90% 70% at 30% 0%, rgba(var(--primaire),.20) 0%, transparent 70%),
    var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(var(--primaire),.45);
}
.agenda-case.aujourdhui .agenda-num { color: var(--txt); font-weight: 600; }

/* l'evenement porte la couleur de charte de son projet */
.agenda-evt {
  --c: #4F7CFF;
  display: flex; align-items: baseline; gap: .35rem;
  text-align: left; width: 100%;
  font-size: 11px; line-height: 1.3;
  padding: .22rem .4rem; border-radius: 3px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border-left: 2px solid var(--c);
  color: var(--txt);
  overflow: hidden;
  transition: background .2s;
}
.agenda-evt:hover { background: color-mix(in srgb, var(--c) 34%, transparent); }
.agenda-evt b { font-weight: 600; color: var(--c); flex-shrink: 0; font-size: 10px; }
.agenda-evt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ce qui arrive ── */
.agenda-suite { display: flex; flex-direction: column; min-height: 0; }
.suite-titre { color: var(--soft); margin-bottom: .9rem; }
.suite-liste { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; min-height: 0; }
.suite-vide { color: var(--faint); font-size: 12px; }

.suite-item {
  --c: #4F7CFF;
  text-align: left; display: flex; flex-direction: column; gap: .18rem;
  padding: .6rem .7rem .6rem .85rem;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 2px solid var(--c); border-radius: 6px;
  transition: border-color .2s, transform .25s var(--ease);
}
.suite-item:hover { border-color: var(--faint); border-left-color: var(--c); transform: translateX(2px); }
.suite-quand {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c);
}
.suite-titre-evt { font-size: 13px; color: var(--txt); }
.suite-info { font-size: 11px; color: var(--mute); }

.agenda-pied { color: var(--faint); margin-top: .8rem; line-height: 1.7; }
.agenda-pied + .agenda-pied { margin-top: .1rem; }

/* ── le volet Google Agenda, au pied de la colonne ──────────── */
.google {
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
}
.google-titre {
  color: var(--mute); letter-spacing: .16em; text-transform: uppercase;
}
.google-mot { font-size: 11px; color: var(--soft); line-height: 1.6; }
.google-souci { color: #FF8B7B; }
/* l'adresse du robot est faite pour etre copiee : jamais coupee, selectionnable */
.google-robot {
  display: block; width: 100%; box-sizing: border-box;
  padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 5px;
  background: rgba(255,255,255,.03); color: var(--txt);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 10.5px; line-height: 1.5; word-break: break-all; user-select: all;
}
.google-cle {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: .5rem .55rem; border: 1px solid var(--border); border-radius: 5px;
  background: rgba(255,255,255,.03); color: var(--txt);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 10.5px;
}
.google-cle:focus { outline: none; border-color: var(--blue); }
.google-choix {
  width: 100%; box-sizing: border-box;
  padding: .45rem .5rem; border: 1px solid var(--border); border-radius: 5px;
  background: var(--panel); color: var(--txt); font-size: 12px;
}
.google-choix:focus { outline: none; border-color: var(--blue); }
.google .btn-fin:disabled { opacity: .4; cursor: default; }
.google .btn-fin:disabled:hover { border-color: var(--border); color: var(--soft); }

/* ════════════════════════════════════════════════════════════
   MODALE — detail et edition d'un projet
   ════════════════════════════════════════════════════════════ */
.modale {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 2rem;
  background: rgba(3,5,8,.82); backdrop-filter: blur(10px);
}
.modale[hidden] { display: none; }
.modale-boite {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 2rem;
}
.modale-boite h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.8rem;
  letter-spacing: .08em; margin-bottom: 1.5rem;
}
.modale-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.modale-grille .large { grid-column: 1 / -1; }
.modale-actions { display: flex; gap: .7rem; margin-top: 1.6rem; }
.modale-actions .grandir { margin-left: auto; }
.btn-plein {
  padding: .7rem 1.4rem; background: var(--blue); border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s;
}
.btn-plein:hover { background: var(--blue-dk); }
.btn-vide {
  padding: .7rem 1.4rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--soft); transition: border-color .2s, color .2s;
}
.btn-vide:hover { border-color: var(--faint); color: var(--txt); }
.btn-danger { color: #ff8080; }
.btn-danger:hover { border-color: #ff8080; color: #ff8080; }
.champ textarea { width: 100%; min-height: 92px; resize: vertical;
  padding: .8rem 1rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; outline: none; font-size: 13px; line-height: 1.6; }
.champ select, .modale .champ input {
  width: 100%; padding: .8rem 1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; outline: none; font-size: 13px;
}
.champ select:focus, .modale .champ input:focus, .champ textarea:focus { border-color: var(--blue); }

/* ════════════════════════════════════════════════════════════
   LA FICHE PROJET
   Reprend la mecanique des maquettes du site de l'agence
   (classes .pd-*) : l'ordinateur a gauche porte la video du site
   par-dessus sa capture, le telephone a droite fait defiler la
   sienne. Le volet de droite porte le recap et les acces.
   ════════════════════════════════════════════════════════════ */
.fiche {
  position: fixed; inset: var(--barre-h) 0 0 0; z-index: 70;
  overflow-y: auto; overflow-x: hidden;
  background: var(--noir);
}
.fiche[hidden] { display: none; }

.fiche-fond { position: fixed; inset: var(--barre-h) 0 0 0; pointer-events: none; overflow: hidden; }
.fiche-teinte {
  position: absolute; inset: -20%; opacity: 0;
  transition: opacity 1.2s var(--ease), background 1.2s var(--ease);
}

/* Plus de croix ronde flottant au-dessus du projet : Geffry n'en voulait
   plus. On ferme par Echap, ou en cliquant dans le vide autour du contenu.
   Un mot discret le rappelle en bas de l'ecran, et s'efface. */
.fiche-echap {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 4; padding: .3rem .8rem; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(9,11,15,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--mute); pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.fiche-echap.la { opacity: 1; }

/* La sortie de la fiche. Toujours là, toujours au même endroit : c'est le
   seul repère quand on regarde un site en plein écran. */
.fiche-fermer {
  position: fixed; top: 1rem; right: 1rem; z-index: 6;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: rgba(9, 11, 15, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--txt); font: 300 22px/1 'Inter', system-ui, sans-serif;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.fiche-fermer:hover {
  background: rgba(9, 11, 15, .92);
  border-color: rgba(var(--primaire), .55);
  transform: scale(1.06);
}
@media (max-width: 700px) {
  .fiche-fermer { top: .6rem; right: .6rem; width: 44px; height: 44px; }
}

/* ── le haut : appareils a gauche, volet a droite ── */
.fiche-haut {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem;
  align-items: center;
  padding: 2.4rem 2.5rem 3rem;
  min-height: min(74vh, 640px);
}

.pd-stage { display: flex; align-items: center; justify-content: center; }
.pd-devices { position: relative; width: min(97%, 860px); aspect-ratio: 4 / 3; }

.pd-laptop { position: absolute; left: 0; top: 50%; width: 85%; z-index: 2; transform: translateY(-50%); }
.pd-laptop-scr {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 6px solid #0f1520; border-radius: 14px 14px 0 0; background: #0b1119;
  box-shadow: 0 46px 90px rgba(0,0,0,.62);
}
.pd-desk { display: block; width: 100%; height: auto; }
/* la video se pose par-dessus la capture et s'y fond */
.pd-deskvid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .5s ease;
}
.pd-deskvid.is-on { opacity: 1; }
.pd-laptop-base {
  position: relative; display: block; width: 118%; height: 17px; margin-left: -9%;
  background: linear-gradient(#242f43, #121a27);
  border-radius: 0 0 15px 15px; box-shadow: 0 16px 26px rgba(0,0,0,.5);
}
.pd-laptop-base::after {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 11%; height: 5px; border-radius: 0 0 7px 7px; background: #0b1119;
}

/* Projet sans site a capturer : une plaque sobre plutot que deux ecrans noirs. */
.pd-vide {
  display: grid; place-items: center; gap: .9rem;
  width: min(97%, 860px); aspect-ratio: 4 / 3;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), transparent 60%);
}
.pd-vide[hidden] { display: none; }
.pd-vide-sigle {
  font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: .1em; color: rgba(255,255,255,.16); line-height: 1;
}
.pd-vide-mot { color: var(--mute); font-size: 13px; }

.pd-phone { position: absolute; right: -1%; top: 50%; width: 22%; z-index: 3; transform: translateY(-42%); }
.pd-phone-scr {
  aspect-ratio: 9 / 19; overflow: hidden;
  border: 6px solid #171f2c; border-radius: 32px; background: #0b1119;
  box-shadow: 0 34px 66px rgba(0,0,0,.62);
}
/* la capture du telephone est la page ENTIERE : elle defile doucement */
.pd-mob { display: block; width: 100%; height: auto; animation: pdScroll 22s ease-in-out infinite; }
@keyframes pdScroll {
  0%, 7%    { transform: translateY(0); }
  50%       { transform: translateY(var(--pd-shift, -60%)); }
  93%, 100% { transform: translateY(0); }
}

/* arrivee des appareils, rejouee a chaque ouverture */
.fiche.arrive .pd-laptop { animation: pdArrive .85s cubic-bezier(.16,1,.3,1) both; }
.fiche.arrive .pd-phone  { animation: pdArrivePhone .95s cubic-bezier(.16,1,.3,1) .12s both; }
@keyframes pdArrive {
  from { opacity: 0; transform: translateY(-50%) translateX(90px) scale(.9); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
@keyframes pdArrivePhone {
  from { opacity: 0; transform: translateY(-42%) translateX(150px) scale(.86); }
  to   { opacity: 1; transform: translateY(-42%) translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pd-mob { animation: none; }
  .fiche.arrive .pd-laptop, .fiche.arrive .pd-phone { animation: none; }
}

/* ── le volet ── */
.fiche-volet { display: flex; flex-direction: column; gap: .9rem; }
.fiche-logo { height: 54px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: .2rem; }
.fiche-nom {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05;
  letter-spacing: .06em; text-transform: uppercase;
}
.fiche-client { color: var(--mute); }
.fiche-desc { font-size: 13.5px; line-height: 1.75; color: var(--soft); }

.fiche-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .4rem; }
.fiche-actions > * { flex: 1 1 auto; text-align: center; }
.fiche-actions .btn-plein { padding: .6rem 1rem; border-radius: 6px; font-size: 11px; }

.fiche-recap { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.fiche-recap label { color: var(--soft); }
.fiche-recap textarea {
  min-height: 150px; resize: vertical; padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; line-height: 1.7; color: var(--txt); outline: none;
  transition: border-color .2s;
}
.fiche-recap textarea:focus { border-color: var(--blue); }
.fiche-recap .btn-fin { align-self: flex-start; }

/* ── actualiser (à la place du lanceur de logiciels) ────── */
#actualiser[data-en-cours] { opacity: .6; pointer-events: none; }

/* ── aller n'importe ou ─────────────────────────────────── */
.palette {
  position: fixed; inset: 0; z-index: 96;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 1rem 2rem;
  background: rgba(3,5,8,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.palette-boite {
  width: min(620px, 100%); overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(16,20,27,.97);
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  animation: paletteArrive .18s var(--ease) both;
}
@keyframes paletteArrive { from { opacity: 0; transform: translateY(-10px); } }
.palette-champ {
  width: 100%; padding: 1.05rem 1.2rem; font-size: 16px; color: var(--txt);
  background: none; border: none; border-bottom: 1px solid var(--border); outline: none;
}
.palette-champ::placeholder { color: var(--faint); }
.palette-liste { max-height: min(48vh, 420px); overflow-y: auto; padding: .4rem; }
.palette-choix {
  display: flex; align-items: baseline; gap: .7rem; width: 100%; text-align: left;
  padding: .55rem .8rem; border-radius: 8px;
}
.palette-choix.vise { background: rgba(var(--primaire),.16); }
.palette-genre {
  flex: none; min-width: 78px; color: var(--faint);
}
.palette-choix.vise .palette-genre { color: var(--blue); }
.palette-nom {
  flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-sous { flex: none; color: var(--faint); }
.palette-vide { color: var(--faint); font-size: 13px; padding: 1rem; text-align: center; }
.palette-pied {
  padding: .6rem 1.2rem; border-top: 1px solid var(--border); color: var(--faint);
}
.palette-pied b { color: var(--soft); font-weight: 600; }

/* ── aujourd'hui ────────────────────────────────────────────
   Le premier ecran. Il repond a une seule question : je fais
   quoi maintenant. Repris le 17/09/2026 : il ne montrait que le
   retard et le jour meme — la veille de trois taches importantes,
   il disait « rien de date ». */
.scene-jour { overflow-y: auto; }
.jour { max-width: 1500px; margin: 0 auto; padding: clamp(2rem, 4.5vw, 4rem) 2.5rem 6rem; }
.jour-tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.jour-tete-mots { min-width: 0; }
.jour-quand { color: var(--faint); }
.jour-salut {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.05;
  margin: .5rem 0 .7rem;
}
.jour-resume { color: var(--soft); font-size: 14px; }

/* le prochain geste */
.jour-prochain {
  position: relative; overflow: hidden; flex: 0 1 420px; min-width: 250px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  padding: .95rem 1.2rem 1rem 1.3rem; border-radius: 14px; text-align: left;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--primaire),.16), rgba(var(--primaire),.03) 62%), var(--panel);
  transition: border-color .2s, transform .25s var(--ease);
}
.jour-prochain::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue);
}
.jour-prochain:hover { border-color: var(--blue); transform: translateY(-2px); }
.jour-prochain.est-retard {
  background: linear-gradient(135deg, rgba(229,72,77,.16), rgba(229,72,77,.03) 62%), var(--panel);
}
.jour-prochain.est-retard::before { background: #e5484d; }
.jp-sur { color: var(--blue); }
.jour-prochain.est-retard .jp-sur { color: #ff8a8f; }
.jp-nom { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--txt); }
.jp-detail { font-size: 12.5px; color: var(--soft); }

/* la semaine */
.jour-semaine {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.js-jour {
  display: flex; flex-direction: column; min-width: 0; min-height: 136px;
  padding: .7rem .55rem .6rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.js-jour.auj {
  border-color: rgba(var(--primaire),.55);
  background: linear-gradient(180deg, rgba(var(--primaire),.13), transparent 72%), var(--panel);
}
.js-jour.weekend { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.js-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  padding: 0 .2rem .5rem;
}
.js-tete span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.js-jour.auj .js-tete span { color: var(--blue); }
.js-tete b { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1; color: var(--txt); }
.js-jour.libre .js-tete b { color: var(--mute); }
.js-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.js-item {
  display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0;
  padding: .32rem .42rem; border-radius: 6px; text-align: left;
  font-size: 11.5px; color: var(--soft); background: rgba(255,255,255,.035);
  transition: background .15s, color .15s;
}
.js-item:hover { background: rgba(255,255,255,.085); color: var(--txt); }
.js-item span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js-item i {
  flex: none; font-style: normal; font-size: 10px; font-weight: 600;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.js-rdv.genre-appel i { color: #6ee7a8; }
.js-carre { width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid var(--mute); }
.js-tache.prio-haute .js-carre { border-color: #f59e0b; }
.js-tache.prio-urgente .js-carre { border-color: #e5484d; background: rgba(229,72,77,.3); }
.js-plus { font-size: 10.5px; color: var(--mute); padding: .15rem .42rem; cursor: pointer; }
.js-plus:hover { color: var(--txt); }
.js-libre { font-size: 11px; color: var(--faint); padding: .15rem .25rem; }

/* les trois colonnes */
.jour-grille {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.jour-bloc { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.jour-titre {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
  padding-bottom: .7rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.jour-titre-lien {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute); transition: color .2s;
}
.jour-titre-lien:hover { color: var(--txt); }
.jour-sous { display: flex; align-items: center; gap: .45rem; color: var(--faint); margin: .9rem 0 .3rem; }
.jour-sous span { color: var(--faint); letter-spacing: .05em; }
.jour-sous.tard { color: #ff8095; }

/* les taches, en version compacte */
.jour-bloc-taches .tk-ligne {
  grid-template-columns: 30px minmax(0, 1fr); border-top: 0; border-radius: 9px;
  padding: .5rem .55rem .5rem .45rem;
}
.jour-bloc-taches .tk-ligne::before { top: 9px; bottom: 9px; border-radius: 3px; }
.jour-bloc-taches .tk-coche { width: 19px; height: 19px; margin-top: 0; }
.jour-bloc-taches .tk-meta { margin-top: .22rem; }
.jour-ajout {
  display: flex; align-items: center; gap: .4rem; margin-top: .8rem;
  padding: .2rem .25rem .2rem .7rem; border-radius: 10px;
  border: 1px dashed var(--border); transition: border-color .2s;
}
.jour-ajout:focus-within { border-style: solid; border-color: rgba(var(--primaire),.55); }
.jour-ajout input {
  flex: 1; min-width: 0; padding: .45rem 0; border: 0; outline: none;
  background: transparent; color: var(--txt); font-size: 13px;
}
.jour-ajout input::placeholder { color: var(--mute); }
.jour-ajout-quand { display: inline-flex; gap: 2px; flex: none; }
.jour-ajout-quand button {
  padding: .3rem .55rem; border-radius: 7px; font-size: 11px; color: var(--mute);
  transition: background .15s, color .15s;
}
.jour-ajout-quand button:hover { color: var(--txt); }
.jour-ajout-quand button.ici { background: rgba(var(--primaire),.18); color: var(--txt); }

.jour-ligne {
  display: flex; align-items: baseline; gap: .7rem; width: 100%; text-align: left;
  padding: .6rem .7rem; border-radius: 8px; border: 1px solid transparent;
  transition: background .18s, border-color .18s, transform .22s var(--ease);
}
.jour-ligne:hover {
  background: rgba(255,255,255,.045); border-color: var(--border);
  transform: translateX(3px);
}
.jour-heure {
  flex: none; min-width: 52px; color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.jour-ligne.genre-appel .jour-heure { color: #6ee7a8; }
.jour-l-nom {
  flex: 1; font-size: 13.5px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
}
.jour-l-projet { flex: none; color: var(--faint); }

/* Un vide qui propose quelque chose plutot qu'une phrase grise. */
.jour-rien {
  color: var(--faint); font-size: 13px; line-height: 1.7;
  padding: .6rem .7rem;
}
.jour-rien-b {
  display: block; margin-top: .5rem; padding: .35rem .7rem;
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--mute); font-size: 12px;
  transition: border-color .2s, color .2s;
}
.jour-rien-b:hover { border-color: var(--blue); color: var(--txt); }

/* ── ce qui est sur l'etabli ── */
.jour-chantier { margin-top: clamp(2.4rem, 5vw, 4rem); }
.jour-compte {
  margin-left: .1rem; padding: .1rem .45rem; border-radius: 20px;
  border: 1px solid var(--border); color: var(--soft); font-size: 10px; letter-spacing: .04em;
}
.chantier-rangee {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .8rem; margin-top: 1rem;
}
.chantier-carte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1rem 1.05rem; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  transition: border-color .25s, transform .3s var(--ease);
}
/* un filet aux couleurs du client, discret */
.chantier-carte::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c); opacity: .55;
}
.chantier-carte:hover { border-color: var(--blue); transform: translateY(-3px); }
.chantier-carte img { height: 20px; width: auto; max-width: 110px; object-fit: contain; }
.chantier-sigle {
  font-family: var(--serif); font-size: 17px; color: var(--mute); line-height: 1;
}
.chantier-nom { font-size: 13.5px; }
.chantier-etat { color: var(--faint); }
.chantier-taches { font-size: 11px; font-weight: 600; color: var(--blue); }

/* ── les deux autres ateliers ── */
.jour-ateliers { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.jour-ateliers-rangee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: .8rem; margin-top: 1rem;
}
.jour-atelier {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .75rem 1.1rem .75rem .75rem; border-radius: 14px; text-align: left;
  border: 1px solid var(--border); background: var(--panel);
  transition: border-color .2s, transform .25s var(--ease);
}
.jour-atelier:hover { border-color: var(--mm); transform: translateY(-2px); }
.ja-mots { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ja-mots b { color: var(--txt); }
.ja-ligne {
  font-size: 12.5px; color: var(--soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ja-fleche { color: var(--mute); font-size: 18px; transition: transform .2s, color .2s; }
.jour-atelier:hover .ja-fleche { color: var(--mm); transform: translateX(3px); }

.jour-pied {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem;
  border-top: 1px solid var(--border); color: var(--faint);
}

.jour-attente { align-items: center; }
.jour-pastille {
  flex: none; min-width: 22px; padding: .1rem .4rem; border-radius: 20px;
  background: rgba(var(--primaire),.16); color: var(--blue);
  font-size: 11px; font-weight: 600; text-align: center;
}

/* ── la platine ─────────────────────────────────────────────
   En bas a gauche, repliee sur une barre. Toutes les commandes
   sont dessinees : l'element <audio> ne se montre jamais. */
.platine {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 75;
  width: min(340px, calc(100vw - 2rem));
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(12,15,20,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
#platine-audio { display: none; }

.platine-barre {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .8rem; text-align: left;
}
.platine-barre:hover { background: rgba(255,255,255,.03); }

/* Le disque tourne quand ca joue — c'est tout ce qu'il faut pour qu'on
   comprenne l'etat sans lire. */
.platine-disque, .platine-pochette {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(from 0deg, #1a1f2a, #2b3444, #1a1f2a, #262f3d, #1a1f2a);
  border: 1px solid var(--border);
}
.platine-disque { width: 30px; height: 30px; }
.platine-pochette { width: 62px; height: 62px; }
.platine-disque, .platine-pochette { position: relative; overflow: hidden; }
/* La vraie pochette quand le fichier en porte une ; sinon le disque grave. */
.platine-disque img, .platine-pochette img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.platine-disque img[hidden], .platine-pochette img[hidden] { display: none; }
.platine-disque > span, .platine-pochette > span {
  position: relative; z-index: 1;
  display: block; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--noir);
}
/* le trou du disque s'efface quand une pochette s'affiche */
.platine-disque:has(img:not([hidden])) > span,
.platine-pochette:has(img:not([hidden])) > span { display: none; }
.platine-disque > span { width: 7px; height: 7px; }
.platine-pochette > span { width: 13px; height: 13px; }
.platine.tourne .platine-disque, .platine.tourne .platine-pochette {
  animation: platineTourne 4s linear infinite;
}
@keyframes platineTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .platine.tourne .platine-disque, .platine.tourne .platine-pochette { animation: none; }
}

.platine-dit { flex: 1; min-width: 0; }
.platine-titre {
  display: block; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.platine-sous {
  display: block; color: var(--mute); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.platine-chevron { color: var(--mute); font-size: 11px; }

.platine-volet { padding: .2rem .8rem .8rem; }
.platine-volet[hidden] { display: none; }
.platine-haut { display: flex; align-items: center; gap: .8rem; padding: .6rem 0 .9rem; }
.platine-quoi { min-width: 0; }
.platine-quoi .platine-titre { font-size: 14px; }

.platine-ligne { display: flex; align-items: center; gap: .55rem; }
.platine-temps { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 30px; }
.platine-rail {
  position: relative; flex: 1; height: 16px; cursor: pointer;
  display: flex; align-items: center; touch-action: none;
}
.platine-rail::before {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  border-radius: 2px; background: rgba(255,255,255,.12);
}
.platine-charge, .platine-lu {
  position: absolute; left: 0; height: 3px; border-radius: 2px;
}
.platine-charge { background: rgba(255,255,255,.18); }
.platine-lu { background: var(--blue); }
.platine-tete {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: translateX(-50%);
  opacity: 0; transition: opacity .2s;
}
.platine-rail:hover .platine-tete { opacity: 1; }

.platine-commandes {
  display: flex; align-items: center; gap: .3rem; margin: .5rem 0 .8rem;
}
.platine-b {
  min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 7px;
  color: var(--mute); font-size: 11px; line-height: 1;
  transition: color .2s, background .2s;
}
.platine-b:hover { color: var(--txt); background: rgba(255,255,255,.06); }
.platine-b.actif { color: var(--blue); }
.platine-jouer {
  min-width: 38px; height: 38px; font-size: 13px;
  border: 1px solid var(--border); color: var(--txt);
}
.platine-jouer:hover { border-color: var(--blue); }
.platine-son { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.platine-son input[type=range] {
  width: 62px; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.14); border-radius: 2px; outline: none;
}
.platine-son input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--soft); cursor: pointer;
}
.platine-son input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border: none; border-radius: 50%;
  background: var(--soft); cursor: pointer;
}

.platine-tete-liste { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.platine-filtre {
  flex: 1; padding: .35rem .55rem; font-size: 12px; color: var(--txt);
  background: var(--noir); border: 1px solid var(--border); border-radius: 6px;
  outline: none; transition: border-color .2s;
}
.platine-filtre:focus { border-color: var(--blue); }
.platine-compte { color: var(--faint); white-space: nowrap; }

.platine-liste {
  max-height: 210px; overflow-y: auto; list-style: none;
  margin: 0 -.3rem; padding: 0 .3rem;
}
.platine-piste {
  padding: .38rem .5rem; border-radius: 6px; cursor: pointer;
  transition: background .15s;
}
.platine-piste:hover { background: rgba(255,255,255,.05); }
.platine-piste.joue { background: rgba(var(--primaire),.14); }
.platine-piste.joue .platine-p-titre { color: var(--blue); }
.platine-p-titre {
  display: block; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.platine-p-art {
  display: block; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.platine-vide { color: var(--faint); font-size: 12px; padding: .5rem; }
.platine-dossier {
  color: var(--faint); margin-top: .6rem; word-break: break-all; line-height: 1.5;
}

@media (max-width: 620px) {
  .platine { left: .6rem; right: .6rem; bottom: .6rem; width: auto; }
  .platine-liste { max-height: 160px; }
}

/* ── l'assistant ────────────────────────────────────────────
   Un volet a droite plutot qu'une fenetre : on continue de voir
   ses projets pendant qu'on lui dicte. */
.agent {
  position: fixed; top: var(--barre-h); right: 0; bottom: 0; z-index: 80;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
  animation: agentArrive .3s var(--ease) both;
}
@keyframes agentArrive { from { transform: translateX(24px); opacity: 0; } }

.agent-tete {
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
}
/* Elle a un prenom : il se lit, il ne s'epelle pas en capitales espacees. */
.agent-tete h2 {
  font-family: var(--serif); font-weight: 500; font-size: 21px;
  letter-spacing: .01em; text-transform: none; line-height: 1;
}
.agent-tete > div { flex: 1; min-width: 0; }
/* « ton assistante » se lit, ne se crie pas : pas de capitales ici. */
.agent-etat { color: var(--mute); margin-top: .22rem; font-size: 11px; letter-spacing: .01em; }
.agent-etat-souci { color: #FF8B7B; }
.agent-fermer {
  width: 30px; height: 30px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
  border: 1px solid var(--border); color: var(--soft);
}
.agent-fermer:hover { border-color: var(--blue); color: var(--txt); }

.agent-fil {
  flex: 1; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.bulle {
  max-width: 92%; padding: .65rem .85rem; border-radius: 10px;
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.bulle-moi {
  align-self: flex-end; background: var(--blue); color: #fff;
  border-bottom-right-radius: 3px;
}
.bulle-assistant {
  align-self: flex-start; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-bottom-left-radius: 3px;
}
.bulle-erreur { border-color: #7a3040; color: #ffb3bf; }
.bulle-attente { color: var(--faint); animation: respire 1.3s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .35; } }

/* Ce qu'il fait pendant qu'il reflechit : discret, mais on le voit agir. */
.agent-etape {
  align-self: flex-start; color: var(--mute);
  padding-left: 1.1rem; position: relative;
}
.agent-etape::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}

/* ── le mode vocal ───────────────────────────────────────────
   Plus de bulles : une matiere qui vit au rythme de la voix,
   et des sous-titres pour ce qui se dit. */
.vocal {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.4rem 1.2rem 1.8rem;
}
.vocal[hidden] { display: none; }
.vocal-toile {
  width: 100%; flex: 1; min-height: 180px; max-height: 340px; display: block;
}
.vocal-etat {
  color: var(--mute); letter-spacing: .2em; text-transform: uppercase;
  animation: vocalRespire 2.4s ease-in-out infinite;
}
@keyframes vocalRespire { 50% { opacity: .45; } }
.vocal-soustitre {
  min-height: 4.6em; max-height: 9em; overflow-y: auto;
  text-align: center; font-size: 15px; line-height: 1.6; color: var(--txt);
  text-wrap: balance;
}
.vocal-soustitre:empty::before {
  content: 'Parlez.'; color: var(--faint);
}
.vocal-sortir { align-self: center; }
/* en vocal, le champ de saisie s'efface : on ne tape plus */
.agent.en-vocal .agent-saisie { display: none; }

/* ── la voix ── */
.agent-b {
  width: 30px; height: 30px; border-radius: 8px; font-size: 13px; line-height: 1;
  color: var(--faint); transition: color .2s, background .2s;
}
.agent-b:hover { background: rgba(255,255,255,.06); color: var(--soft); }
.agent-b[aria-pressed="true"] { color: var(--blue); background: rgba(var(--primaire),.14); }

/* le reglage de la voix, sous le haut-parleur */
.agent-voix-boite { position: relative; }
.voix-volet {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 5;
  width: 250px; padding: .8rem;
  display: flex; flex-direction: column; gap: .7rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(16,20,27,.98);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.voix-volet[hidden] { display: none; }
.voix-ligne { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 12.5px; }
.voix-ligne input { width: 15px; height: 15px; accent-color: var(--blue); }
.voix-champ { display: flex; flex-direction: column; gap: .3rem; }
.voix-champ span { color: var(--faint); }
.voix-champ b { color: var(--soft); font-weight: 600; }
.voix-volet select {
  padding: .35rem .5rem; font-size: 12px; color: var(--txt);
  background: var(--noir); border: 1px solid var(--border); border-radius: 6px;
  outline: none;
}
.voix-volet select:disabled { color: var(--faint); }
.voix-volet input[type=range] {
  width: 100%; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.14); border-radius: 2px; outline: none;
}
.voix-volet input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--soft); cursor: pointer;
}
.voix-note { color: var(--faint); line-height: 1.5; }

.agent-boutons { display: flex; flex-direction: column; gap: .45rem; }

/* ── « Parler » ──────────────────────────────────────────────
   C'est le geste principal du volet : il doit se voir. Avant,
   c'etait un emoji de 14 px dans un rectangle gris — on ne
   devinait pas que le mode vocal etait la. */
.agent-parler {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: .55rem;
  padding: .62rem .8rem; border-radius: 10px;
  border: 1px solid rgba(var(--primaire),.45);
  background: rgba(var(--primaire),.10); color: var(--txt);
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
}
.agent-parler:hover { background: rgba(var(--primaire),.22); border-color: var(--blue); }
/* le raccourci se range a droite, en retrait : present sans encombrer */
.parler-touche {
  margin-left: auto; color: var(--mute);
  font-size: 9px; letter-spacing: .1em; text-transform: none;
}
.parler-icone {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* le corps du micro est plein, les arcs sont des traits */
.parler-icone > path:first-child { fill: currentColor; stroke: none; }
.parler-mot { position: relative; z-index: 1; }

/* Pendant qu'elle ecoute : le bouton passe au rouge et une onde le traverse. */
.agent-parler[aria-pressed="true"] {
  border-color: #e0556a; color: #ff9aab; background: rgba(224,85,106,.14);
}
.parler-halo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(224,85,106,.55), transparent 62%);
}
.agent-parler[aria-pressed="true"] .parler-halo {
  opacity: 1; animation: parlerOnde 1.6s ease-in-out infinite;
}
@keyframes parlerOnde { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .agent-parler[aria-pressed="true"] .parler-halo { animation: none; }
}
/* pendant qu'il ecoute, le champ respire */
.agent.ecoute .agent-saisie textarea {
  border-color: #e0556a; animation: ecouteRespire 1.4s ease-in-out infinite;
}
@keyframes ecouteRespire { 50% { border-color: rgba(224,85,106,.35); } }

/* ── un brouillon de message ── */
.brouillon {
  align-self: stretch; padding: .8rem .9rem; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,.035);
}
.brouillon-tete { color: var(--faint); margin-bottom: .5rem; }
.brouillon-objet { font-size: 13.5px; font-weight: 600; margin-bottom: .4rem; }
.brouillon-texte {
  font-size: 13px; line-height: 1.75; color: var(--soft);
  white-space: pre-wrap; word-break: break-word;
}
.brouillon-bas { display: flex; gap: .45rem; margin-top: .7rem; }

.agent-saisie {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
}
.agent-ligne { display: flex; gap: .5rem; }
.agent-saisie textarea {
  flex: 1; resize: none; padding: .6rem .7rem; min-height: 56px;
  background: var(--noir); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; line-height: 1.6; color: var(--txt); outline: none;
  transition: border-color .2s;
}
.agent-saisie textarea:focus { border-color: var(--blue); }
.agent-saisie .btn-plein { align-self: stretch; padding: 0 1rem; }

@media (max-width: 620px) {
  .agent { width: 100vw; }
}

/* ── la carte des clients ── */
/* La carte occupe toute la section ; la liste des clients se pose par-dessus,
   dans un petit encadre a droite. */
.carte-boite { position: relative; }
.carte-scene {
  aspect-ratio: 21 / 9; min-height: 380px; max-height: 620px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.03), transparent 55%), var(--panel);
  overflow: hidden;
}
/* Un <svg> pose dans du HTML ne rogne pas toujours ce qui deborde de son
   viewBox : sans cette ligne, toute la region restait dessinee autour du
   cadre qu'on venait de calculer. */
.carte-fond { display: block; width: 100%; height: 100%; overflow: hidden; }
.deps .dep {
  fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.13); stroke-width: .7;
}
.deps .dep__n {
  fill: rgba(255,255,255,.22); font-size: 7px; font-family: var(--sans);
  letter-spacing: .1em; text-transform: uppercase; text-anchor: middle;
}
.carte-pt { cursor: pointer; }
.pt-halo { fill: var(--blue); opacity: 0; transition: opacity .25s; }
.pt-rond {
  fill: var(--blue); stroke: var(--noir); stroke-width: 1.4;
  transition: fill .2s, r .2s var(--ease);
}
.pt-nom {
  fill: var(--soft); font-size: 6.5px; font-family: var(--sans); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; text-anchor: middle;
  paint-order: stroke; stroke: var(--noir); stroke-width: 2.4; stroke-linejoin: round;
}
.pt-n {
  fill: #fff; font-size: 6px; font-family: var(--sans); font-weight: 700;
  text-anchor: middle; pointer-events: none;
}
.carte-pt:hover .pt-halo, .carte-pt.actif .pt-halo { opacity: .17; }
.carte-pt.actif .pt-rond { fill: #fff; }
.carte-pt.actif .pt-nom { fill: var(--txt); }
/* Etiquette effacee faute de place : elle revient des qu'on vise la ville. */
.pt-nom.efface { opacity: 0; transition: opacity .2s; }
.carte-pt:hover .pt-nom.efface, .carte-pt.actif .pt-nom.efface { opacity: 1; }

.carte-liste {
  position: absolute; top: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  width: min(290px, 34%); overflow-y: auto;
  display: flex; flex-direction: column; gap: .45rem;
  padding: .9rem; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(9,11,15,.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.carte-lieu {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--mute);
  margin-bottom: .3rem;
}
.carte-projet {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(18,22,30,.9); transition: border-color .2s, transform .25s var(--ease);
}
.carte-projet:hover { border-color: var(--blue); transform: translateX(3px); }
.carte-projet img { height: 16px; width: auto; max-width: 60px; object-fit: contain; }
.carte-sigle {
  font-family: var(--serif); font-size: 13px; color: var(--mute);
  min-width: 24px; text-align: center;
}
.carte-projet-nom { flex: 1; font-size: 13px; }
.carte-projet-etat { color: var(--faint); }
.carte-sans { color: var(--faint); line-height: 1.7; margin-top: .5rem; }

@media (max-width: 760px) {
  /* trop etroit pour un encadre pose dessus : la liste repasse dessous */
  .carte-scene { aspect-ratio: 4 / 3; min-height: 300px; }
  .carte-liste {
    position: static; width: auto; margin-top: .8rem; max-height: none;
    background: var(--panel);
  }
}

/* ── le mode presentation ───────────────────────────────────
   Devant un client : plein ecran, un projet, rien de l'atelier. */
body.presentation .barre,
body.presentation .platine,
body.presentation .agent,
body.presentation .fiche-echap,
body.presentation .fiche-fermer,
body.presentation #fiche-editer,
body.presentation #fiche-ouvrir,
body.presentation #fiche-local,
body.presentation #fiche-presenter,
body.presentation .fiche-recap textarea,
body.presentation #fiche-recap-enr,
body.presentation #fiche-ajout-rdv,
body.presentation .galerie-filtre { display: none !important; }

/* le recap se LIT devant le client ; vide, tout le bloc s'efface */
.fiche-recap-lu { display: none; }
body.presentation .fiche-recap-lu {
  display: block; font-size: 13.5px; line-height: 1.8; color: var(--soft);
  white-space: pre-wrap;
}
body.presentation .fiche.sans-recap .fiche-recap { display: none; }

body.presentation .fiche { inset: 0; }
body.presentation .fiche-fond { inset: 0; }
body.presentation .fiche-haut { min-height: min(82vh, 780px); padding-top: 4.5rem; }
body.presentation .pd-devices { width: min(100%, 1080px); }
body.presentation .fiche-nom { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
body.presentation .fiche-volet { gap: 1.1rem; }
/* on garde « voir le site » : c'est ce qu'on montre */
body.presentation .fiche-actions .btn-plein { flex: 0 1 auto; }

.presentation-barre {
  position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .45rem; border-radius: 30px;
  border: 1px solid var(--border); background: rgba(9,11,15,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: .25; transition: opacity .3s var(--ease);
}
.presentation-barre:hover { opacity: 1; }
.presentation-barre[hidden] { display: none; }
.presentation-barre button {
  min-width: 32px; height: 30px; border-radius: 20px;
  color: var(--soft); font-size: 1.1rem; line-height: 1;
  transition: background .2s, color .2s;
}
.presentation-barre button:hover { background: rgba(255,255,255,.08); color: var(--txt); }
.presentation-rang { color: var(--mute); font-variant-numeric: tabular-nums; }
.presentation-sortir {
  font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase;
  padding: 0 .8rem; color: var(--mute) !important;
}

/* le bouton de sauvegarde s'allume quand ca fait trop longtemps */
#sauvegarder.alerte { border-color: #7a5a30; color: #f0c48a; }

/* ── a modifier : une capture et un mot ── */
.retouche-depot {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1rem; margin-bottom: 1.6rem;
}
.depot-zone {
  position: relative; display: grid; place-items: center; cursor: pointer;
  min-height: 168px; padding: 1rem; overflow: hidden;
  border: 1px dashed var(--border); border-radius: 10px; background: var(--panel);
  transition: border-color .2s, background .2s;
}
.depot-zone:hover, .depot-zone:focus-visible, .depot-zone.survol {
  border-color: var(--blue); background: rgba(var(--primaire),.05); outline: none;
}
.depot-mot { max-width: 260px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.depot-mot b { color: var(--soft); font-weight: 600; }
.depot-apercu { max-width: 100%; max-height: 220px; width: auto; border-radius: 6px; }
.depot-vider {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; line-height: 1;
  border: 1px solid var(--border); background: rgba(9,11,15,.85); color: var(--soft);
}
.depot-vider:hover { border-color: var(--blue); color: var(--txt); }
.depot-cote { display: flex; flex-direction: column; gap: .6rem; }
.depot-cote textarea {
  flex: 1; min-height: 120px; resize: vertical; padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; line-height: 1.7; color: var(--txt); outline: none;
  transition: border-color .2s;
}
.depot-cote textarea:focus { border-color: var(--blue); }
.depot-cote .btn-plein { align-self: flex-start; padding: .6rem 1.4rem; }

/* La carte d'une modification s'etire : la consigne doit se lire en entier,
   c'est tout l'interet. Les autres cartes gardent leur format carre. */
.carte-retouche { display: flex; flex-direction: column; gap: .55rem; aspect-ratio: auto; }
.carte-retouche .carte-texte { flex: none; overflow: visible; font-size: 13.5px; line-height: 1.6; }
.carte-retouche.est-faite { opacity: .5; }
.carte-retouche.est-faite .carte-texte { text-decoration: line-through; }
.retouche-vue {
  display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0;
  border: 1px solid var(--border); border-radius: 7px; background: var(--noir);
  transition: border-color .2s;
}
.retouche-vue:hover { border-color: var(--blue); }
.retouche-vue img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.retouche-etat {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.retouche-etat input { accent-color: var(--blue); width: 14px; height: 14px; }

/* ── la galerie du dossier, rangee par sous-dossier ── */
.galerie-filtre {
  margin-left: auto; width: min(280px, 46vw);
  padding: .42rem .7rem; font-size: 12px; color: var(--txt);
  background: var(--panel); border: 1px solid var(--border); border-radius: 7px;
  outline: none; transition: border-color .2s;
}
.galerie-filtre:focus { border-color: var(--blue); }
.fiche-galerie { display: flex; flex-direction: column; gap: .9rem; }
.galerie-nom {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .3rem 0; color: var(--mute); text-align: left;
  transition: color .2s;
}
.galerie-nom:hover { color: var(--txt); }
.galerie-nom::after { content: ''; flex: 1; height: 1px; background: var(--border); order: 2; }
.galerie-fleche { transition: transform .2s var(--ease); display: inline-block; }
.galerie-groupe.ouvert .galerie-fleche { transform: rotate(90deg); }
.galerie-n {
  order: 3; color: var(--soft);
  padding: .1rem .45rem; border: 1px solid var(--border); border-radius: 20px;
}
.galerie-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem;
  margin-top: .5rem;
}
.galerie-groupe:not(.ouvert) .galerie-grille { display: none; }
.galerie-grille button {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  transition: border-color .2s, transform .25s var(--ease);
}
.galerie-grille button:hover { border-color: var(--blue); transform: translateY(-3px); }
.fiche-galerie img { width: 100%; height: 100%; object-fit: cover; }

/* ── la visionneuse ── */
.loupe {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 3.5rem 4.5rem 4rem;
  background: rgba(3,5,8,.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.loupe-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.loupe-fermer {
  position: absolute; top: 1.1rem; right: 1.4rem;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  border: 1px solid var(--border); background: rgba(9,11,15,.7); color: var(--soft);
}
.loupe-fermer:hover { border-color: var(--blue); color: var(--txt); }
.loupe-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 76px; border-radius: 8px; font-size: 2rem; line-height: 1;
  border: 1px solid var(--border); background: rgba(9,11,15,.6); color: var(--soft);
  transition: border-color .2s, color .2s;
}
.loupe-fleche:hover { border-color: var(--blue); color: var(--txt); }
.loupe-fleche.gauche { left: .9rem; }
.loupe-fleche.droite { right: .9rem; }
.loupe-nom {
  position: absolute; bottom: 1.2rem; left: 0; right: 0;
  text-align: center; color: var(--mute);
}

@media (max-width: 720px) {
  .retouche-depot { grid-template-columns: 1fr; }
  .loupe { padding: 3.5rem 1rem 3rem; }
  .loupe-fleche { width: 38px; height: 58px; font-size: 1.5rem; }
}

@media (max-width: 1080px) {
  .fiche-haut { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.6rem 1.2rem 2rem; }
  .pd-devices { width: 100%; }
  .fiche-volet { max-width: 640px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE  (le hub s'ouvre aussi au telephone, via le tunnel)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .barre { gap: .8rem; padding: 0 .9rem; }
  /* le MOT seulement : « .marque span » cachait aussi tous les <span> du menu
     des ateliers, qui s'ouvrait vide sur le téléphone */
  #marque-mot, .compteur { display: none; }
  .arc-carte { --w: 300px; }
  .arc-entete { left: 1rem; right: 1rem; }
  .modale-grille { grid-template-columns: 1fr; }
}

/* on respecte le reglage systeme : pas d'animation imposee */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* une case a cocher dans le formulaire projet */
.champ-coche { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.champ-coche input { width: 15px; height: 15px; accent-color: var(--blue); }
.champ-coche span { font-size: 13px; color: var(--soft); }

/* ── les deux portes : le CRM et YouTube ────────────────────────
   Collées l'une à l'autre : ce sont deux sorties, pas deux actions du
   Studio. Le lien CRM doit ressembler exactement à un bouton — sans ça,
   l'ancre garde son soulignement et sa hauteur de ligne. */
.portes { display: flex; gap: .35rem; flex: 0 0 auto; }
.btn-fin { white-space: nowrap; }
.barre-fin > * { flex: 0 0 auto; }
a.btn-fin.porte { display: inline-flex; align-items: center; text-decoration: none; }
.btn-fin.porte { padding: .45rem .7rem; }
#aller-youtube { display: inline-grid; place-items: center; padding: .34rem .6rem; }
#aller-youtube svg { width: 20px; height: 20px; fill: currentColor; display: block; }
/* la pointe reste de la couleur du fond, comme sur le vrai sigle */
#aller-youtube svg .pointe { fill: var(--bg); }
#aller-youtube:hover { border-color: #ff2f2f; color: #ff4d4d; }
/* lu par les lecteurs d'écran, invisible à l'œil */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   LE TELEPHONE — la barre du haut sur deux rangees

   Sur 390 px, les huit boutons de droite et les onglets ne tiennent pas
   sur une ligne : la barre faisait 837 px de large et tout ce qui
   depassait etait simplement HORS DE L'ECRAN, sans barre de defilement
   pour aller le chercher. Sortir, Margaux et le CRM etaient injoignables
   depuis le telephone.

   Deux rangees : les actions en haut avec le logo, les onglets dessous
   sur toute la largeur. Et on retire ce qui n'a aucun sens la-bas — le
   plein ecran et la sauvegarde se font autrement (Actualiser, lui, reste :
   c'est au telephone qu'on n'a pas de touche F5).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --barre-h: 106px; }
  .barre {
    height: auto; min-height: var(--barre-h);
    flex-wrap: wrap; align-content: center;
    gap: .55rem .7rem; padding: .5rem .8rem;
  }
  .marque { order: 1; }
  .barre-fin { order: 2; gap: .38rem; }
  /* les onglets prennent leur propre rangee, et defilent s'il en faut plus */
  .sections {
    order: 3; flex: 1 0 100%; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .sections::-webkit-scrollbar { display: none; }

  #sauvegarder, #plein-ecran, #outils, .compteur, .moi-nom { display: none; }
  .barre-fin .btn-fin {
    padding: .36rem .56rem; font-size: 9px; letter-spacing: .08em;
  }
  #aller-youtube { padding: .28rem .46rem; }
  #aller-youtube svg { width: 17px; height: 17px; }
  .pastille { width: 24px; height: 24px; font-size: 9px; }

  /* Le nom du projet poussait le titre du rendez-vous a un caractere par
     ligne (« Es... C... H... »). Il passe dessous, aligne sur l'heure. */
  .jour-ligne { flex-wrap: wrap; row-gap: .1rem; }
  .jour-l-nom { flex: 1 1 60%; min-width: 0; }
  .jour-l-projet { flex: 1 0 100%; padding-left: 52px; font-size: 11px; }
}

/* Sous 430 px, le logo ne tient plus sur la meme rangee que les actions : la
   barre passe a trois rangees. Mesure : 122 px. Sans ca, le haut de la scene
   passe SOUS la barre — 16 px de contenu recouvert, invisible tant qu'on ne
   compare pas les deux hauteurs. */
@media (max-width: 429px) {
  :root { --barre-h: 124px; }
}

/* ════════════════════════════════════════════════════════════
   FICHE PROJET ENRICHIE — contexte, infos, journal
   Tout en variables : le panneau suit le theme des deux ateliers.
   ════════════════════════════════════════════════════════════ */
.fiche-infos{display:flex;flex-direction:column;gap:1.15rem;margin:.1rem 0 1.4rem}
.fi-t{color:var(--mute);letter-spacing:.16em;text-transform:uppercase;font-size:10px;margin:0 0 .55rem}
.fi-faits,.fi-liste{margin:0;display:flex;flex-direction:column;gap:.42rem}
.fi-faits>div,.fi-liste>div{display:grid;grid-template-columns:8.5rem 1fr;gap:.7rem;align-items:baseline}
.fi-faits dt,.fi-liste dt{color:var(--mute);font-size:12px;margin:0}
.fi-faits dd,.fi-liste dd{color:var(--txt);font-size:13px;margin:0;line-height:1.4}
.fi-liste a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.fi-liste a:hover{border-bottom-color:currentColor}
.fi-sep{color:var(--faint)}
.fi-brief{color:var(--soft);font-size:12.5px;line-height:1.55;margin:.5rem 0 0;
  padding-left:.8rem;border-left:2px solid var(--border)}
.fi-journal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fi-journal li{display:grid;grid-template-columns:6.5rem 1fr;gap:.7rem;font-size:12.5px}
.fi-journal time{color:var(--blue);font-variant-numeric:tabular-nums}
.fi-journal span{color:var(--soft);line-height:1.4}
@media (max-width:640px){
  .fi-faits>div,.fi-liste>div,.fi-journal li{grid-template-columns:1fr;gap:.15rem}
}

/* ════════════════════════════════════════════════════════════
   SANTÉ DES SITES LIVRÉS
   ════════════════════════════════════════════════════════════ */
/* ── la santé des sites (repris le 17/09/2026) ──
   Tous les projets, rangés par état : ce qui ne va pas en premier. */
.sante { max-width: 1240px; margin: 0 auto; padding: clamp(2rem, 4.5vw, 3.6rem) 2.5rem 6rem; }
.sante-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.sante-sur { color: var(--mute); }
.sante-titre {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: .45rem 0 .6rem;
}
.sante-sous { color: var(--soft); font-size: 14px; line-height: 1.6; max-width: 62ch; }
.sante-actions { display: flex; align-items: center; gap: .8rem; flex: none; }
.sante-quand { color: var(--mute); }
.sante-bilan { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.sante-pastille {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--soft); font-size: 12.5px;
}
.sante-pastille b { color: var(--txt); font-weight: 700; }
.sante-pastille i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.sante-groupe + .sante-groupe { margin-top: 2rem; }
.sante-groupe-titre {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem;
  margin-bottom: .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
.sante-groupe-titre b { color: var(--soft); font-weight: 600; letter-spacing: .04em; }
.sante-groupe-titre em {
  font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); font-size: 12px;
}
.sante-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .7rem; }
.sante-carte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  gap: .75rem; padding: .9rem 1rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border);
  transition: border-color .2s;
}
.sante-carte:hover { border-color: rgba(255,255,255,.18); }
.sante-dot {
  width: 11px; height: 11px; margin-top: .3rem; border-radius: 50%; background: var(--mute);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mute) 18%, transparent);
}
.sante-corps { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.sante-nom { color: var(--txt); font-weight: 600; font-size: 14px; }
.sante-dom { color: var(--soft); font-size: 12.5px; overflow-wrap: anywhere; }
.sante-dom:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
.sante-detail { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.sante-travail {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem;
  margin-top: .35rem; padding-top: .4rem; border-top: 1px solid var(--line);
  color: var(--mute); font-size: 12px;
}
.sante-travail a { color: var(--soft); }
.sante-travail a:hover { color: var(--txt); }
.sante-travail i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.sante-fiche {
  padding: .25rem .5rem; border-radius: 7px; border: 1px solid transparent;
  color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.sante-carte:hover .sante-fiche, .sante-fiche:focus-visible { opacity: 1; }
.sante-fiche:hover { color: var(--txt); border-color: var(--border); }
.sante-charge { color: var(--mute); padding: 1.2rem 0; }

/* les couleurs des états */
.etat-ok .sante-dot, .etat-ok > i, .sante-pastille.etat-ok i { background: #39b877; box-shadow: 0 0 0 4px rgba(57,184,119,.16); }
.etat-lent .sante-dot, .etat-lent > i, .sante-pastille.etat-lent i { background: #e3a53a; box-shadow: 0 0 0 4px rgba(227,165,58,.16); }
.etat-erreur .sante-dot, .etat-erreur > i, .sante-pastille.etat-erreur i { background: #f08a3c; box-shadow: 0 0 0 4px rgba(240,138,60,.18); }
.etat-ancien .sante-dot, .etat-ancien > i, .sante-pastille.etat-ancien i { background: #5b8def; box-shadow: 0 0 0 4px rgba(91,141,239,.16); }
.etat-ko .sante-dot, .etat-ko > i, .sante-pastille.etat-ko i { background: #e0554e; box-shadow: 0 0 0 4px rgba(224,85,78,.18); }
.etat-absent .sante-dot, .sante-pastille.etat-absent i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); }
.sante-pastille i { box-shadow: none !important; }
.sante-travail > i { box-shadow: none; }
.groupe-ko .sante-carte { border-color: rgba(224,85,78,.45); }
.groupe-erreur .sante-carte { border-color: rgba(240,138,60,.4); }
.groupe-absent .sante-carte { background: color-mix(in srgb, var(--panel) 55%, transparent); }
@media (max-width: 700px) {
  .sante { padding: 1.6rem 1rem 5rem; }
  .sante-tete { flex-direction: column; align-items: stretch; gap: 1rem; }
  .sante-fiche { opacity: 1; }
}
.sante-charge{color:var(--mute);padding:1.2rem 0;grid-column:1/-1}

/* En PRÉSENTATION (devant le client), on garde le contexte du projet — ce qu'il
   est — mais on cache l'interne : le journal, l'hébergement, le contact, le
   brief de départ. Le client voit le travail, pas la cuisine. */
body.presentation .fi-interne { display: none !important; }
body.presentation .fi-faits dd { font-size: 14px; }
body.presentation .fi-t { font-size: 11px; letter-spacing: .2em; }
body.presentation .fiche-infos { margin-top: .4rem; }

/* ── LE MENU DES ATELIERS ───────────────────────────────────────
   À deux, le logo était un interrupteur. À trois, il ouvre un choix.
   Refait le 17/09/2026 : chaque atelier s'y présente comme on le
   retrouvera — une tuile à ses couleurs (même vu depuis un autre
   atelier), son nom dans SA typo, ce qu'il contient, et une ligne
   vivante : ce qui t'y attend. Le menu vit ici, pas dans un fichier
   d'atelier : il s'affiche dans les trois.

   Les sélecteurs passent par #marque-menu : `.marque span` (plus haut)
   et `body.espace-gw .marque span` (geffways.css) habillent TOUS les
   <span> du logo en serif italique — ceux du menu compris. */
.marque-menu {
  position: absolute; top: calc(100% + .6rem); left: -.5rem; z-index: 120;
  width: 348px; max-width: calc(100vw - 1.2rem); padding: .4rem;
  border-radius: 16px; border: 1px solid var(--border);
  /* opaque : la barre porte déjà un backdrop-filter, et un flou imbriqué dans
     un autre ne s'applique pas — le titre de la page transparaissait */
  background: var(--panel);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  transform-origin: 1.4rem 0;
  animation: menu-vient .22s cubic-bezier(.22,1,.32,1);
}
@keyframes menu-vient {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
}
#marque-menu span, #marque-menu kbd {
  font-family: var(--sans); font-style: normal; font-weight: 500;
  letter-spacing: 0; font-size: 12px; line-height: 1.35;
}
#marque-menu .mm-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem .6rem .55rem;
}
#marque-menu .mm-tete span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute);
}
#marque-menu kbd {
  font-size: 10px; color: var(--mute); white-space: nowrap;
  padding: .1rem .4rem; border-radius: 5px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
#marque-menu .mm-choix {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: .85rem; width: 100%; min-height: 0;
  padding: .55rem .6rem; border-radius: 12px; text-align: left;
  color: var(--soft); transition: background .16s;
}
#marque-menu .mm-choix + .mm-choix { margin-top: 2px; }
#marque-menu .mm-choix:hover { background: rgba(255,255,255,.055); }
#marque-menu .mm-choix:focus-visible {
  outline: none; background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mm) 60%, transparent);
}
#marque-menu .mm-choix.ici { background: color-mix(in srgb, var(--mm) 11%, transparent); }
#marque-menu .mm-choix.ici::before {
  content: ''; position: absolute; left: -.28rem; top: 24%; bottom: 24%; width: 3px;
  border-radius: 3px; background: var(--mm);
}

/* la tuile : l'univers de l'atelier en miniature, quel que soit celui où l'on est */
.mm-tuile {
  position: relative; display: grid; place-items: center; flex: none;
  width: 64px; height: 46px; border-radius: 11px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mm) 36%, transparent);
}
.mm-tuile img {
  position: relative; display: block; width: auto; height: auto;
  max-width: 44px; max-height: 28px; object-fit: contain;
}
.mm-tuile-studio   { background: radial-gradient(120% 110% at 18% 0%, rgba(79,124,255,.45), transparent 62%), #0B1018; }
.mm-tuile-geffways { background: radial-gradient(120% 110% at 18% 0%, rgba(201,119,58,.48), transparent 62%), #150e09; }
.mm-tuile-conodor  { background: radial-gradient(120% 110% at 18% 0%, rgba(43,217,210,.36), transparent 62%), #04141A; }
.mm-tuile-conodor img { max-width: 52px; }
/* le madras signe la tuile de Conodor, comme il signe sa barre */
.mm-tuile-conodor::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: url('/assets/img/madras-bande.svg') repeat-x; background-size: auto 3px;
}

#marque-menu .mm-mots { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
/* chaque nom dans la typo de son atelier */
.mm-nom-studio, #marque-menu .mm-nom-studio {
  font-family: 'Poppins', 'Inter', sans-serif; font-style: normal;
  font-weight: 600; font-size: 15.5px; line-height: 1.15; letter-spacing: -.01em;
}
.mm-nom-geffways, #marque-menu .mm-nom-geffways {
  font-family: 'Syne', 'Mulish', sans-serif; font-style: normal;
  font-weight: 700; font-size: 15.5px; line-height: 1.15; letter-spacing: -.01em;
}
.mm-nom-conodor, #marque-menu .mm-nom-conodor {
  font-family: 'Bebas Neue', 'Montserrat', sans-serif; font-style: normal;
  font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: .05em;
}
#marque-menu .mm-nom { color: var(--txt); }
#marque-menu .mm-quoi {
  color: var(--mute); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#marque-menu .mm-pouls {
  color: color-mix(in srgb, var(--mm) 78%, #fff); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#marque-menu .mm-fin { align-self: start; padding-top: .15rem; }
#marque-menu .mm-ici {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mm) 80%, #fff);
}
#marque-menu .mm-ici::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm) 24%, transparent);
}

.sections::-webkit-scrollbar { display: none; }

/* ── QUAND IL Y A CINQ ONGLETS ──────────────────────────────────
   L'atelier Conodor en a cinq. La pastille peut défiler, mais réduite à
   47 px elle ne montre plus qu'un bout de mot : défiler n'est pas une
   réponse quand il ne reste rien à voir. On récupère la place là où elle
   ne coûte rien — les écarts, puis les boutons qui ont un raccourci. */
@media (max-width: 1560px) {
  .barre { gap: clamp(.7rem, 1.6vw, 1.5rem); }
  .barre-fin { gap: clamp(.45rem, .9vw, 1rem); }
  .sections button { padding: .45rem .75rem; letter-spacing: .12em; }
}
@media (max-width: 1300px) {
  /* Sauvegarder a Ctrl+S, le plein écran a F11 : on les retire de la barre
     avant de rogner sur les onglets, qui n'ont pas de raccourci. */
  #sauvegarder, #plein-ecran { display: none; }
  /* et le compteur : « 4 au groupe » suffisait a pousser « Sortir » dehors */
  .compteur { display: none; }
}

/* ── LES OUTILS DE SERVICE ──────────────────────────────────────
   À trois ateliers — celui de Conodor a cinq onglets — la barre n'avait
   plus la place de porter Sauvegarder et le plein écran en clair. Ils
   passent derrière un « ··· » : ce sont des gestes rares, et ils ont
   tous les deux un raccourci. */
.outils { position: relative; flex: 0 0 auto; }
#outils-b { padding: .45rem .7rem; letter-spacing: .1em; line-height: 1; }
.outils-volet {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 120;
  min-width: 190px; padding: .3rem;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 24px 44px -16px rgba(0,0,0,.72);
  animation: menu-vient .18s var(--ease);
}
/* Dans le volet, les boutons redeviennent des lignes de menu : la pastille
   arrondie n'a plus de sens quand ils sont empilés. */
.outils-volet .btn-fin {
  width: 100%; text-align: left; border: 0; border-radius: 7px;
  padding: .5rem .6rem;
}
.outils-volet .btn-fin:hover { background: rgba(var(--primaire),.14); color: var(--txt); }

/* ════════════════════════════════════════════════════════════
   LE RESPONSIVE, REPRIS À LA MESURE

   Relevé sur huit largeurs, trois ateliers, douze écrans. Ce qui
   suit corrige ce qui débordait vraiment — pas ce qui en avait l'air.
   ════════════════════════════════════════════════════════════ */

/* Une grille dont la colonne minimale est FIXE déborde dès que l'écran est
   plus étroit qu'elle : à 360 px, `minmax(330px, 1fr)` impose 330 px dans
   290 px de place. `min(…, 100%)` la laisse rétrécir. */
.gw-chantiers { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.cnd-groupe   { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.cnd-grille   { grid-template-columns: repeat(auto-fit,  minmax(min(190px, 100%), 1fr)); }

@media (max-width: 900px) {
  /* L'agenda tenait sur deux colonnes dont une FIXE de 260 px : la colonne
     de droite passe dessous plutôt que de pousser tout le reste dehors. */
  .agenda-plan { grid-template-columns: 1fr; }
  .agenda-tete { flex-wrap: wrap; row-gap: .5rem; }

  /* Au doigt, pas à la souris : un bouton de 26 px se rate une fois sur
     trois. On ne touche qu'à la hauteur — la largeur, elle, est comptée. */
  .sections button,
  .barre-fin .btn-fin,
  .marque-menu button {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .marque-menu button { justify-content: flex-start; }
  .cx-opt { min-height: 42px; }
}

/* Sous 400 px, la rangée d'actions faisait 356 px de large dans 360 : neuf
   pixels de trop, et « Sortir » sortait. La pastille des initiales part —
   c'est son téléphone, il sait qui il est. */
@media (max-width: 400px) {
  .pastille { display: none; }
  .barre-fin { gap: .3rem; }
  .barre-fin .btn-fin { padding: .34rem .5rem; }
}

/* Les cibles tactiles, suite : tout ce qui se clique, pas seulement la barre.
   Le logo (26 px), « Aujourd'hui », « Tout le fil », les liens du chantier et
   la coche des tâches se rataient une fois sur trois au doigt. */
@media (max-width: 900px) {
  .btn-fin, .marque-bascule, .gw-lien,
  .carte-coche, .cnd-actions button, .vs-actions button {
    min-height: 40px;
  }
  .carte-coche { min-width: 40px; }
  /* Un bouton devenu haut doit rester centré sur son texte. */
  .btn-fin, .carte-coche {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .gw-lien { min-height: 40px; }
}

/* ── L'AGENDA AU TÉLÉPHONE ──────────────────────────────────────
   Sept colonnes dans 390 px font des cases de 50 px : la pastille d'un
   événement y tombait à 21 × 7 px — illisible, et intouchable au doigt.
   Le mois devient donc une LISTE des jours qui portent quelque chose,
   comme le fait n'importe quel calendrier de téléphone.

   `:has()` fait le tri : on ne peut pas dire « la case est vide » autrement
   en CSS, et c'est ce qui évite de lister trente-et-un jours dont trois
   comptent. Pour ajouter un jour sans événement, il y a « + Événement »
   dans la barre — c'est d'ailleurs ce qu'on fait sur un téléphone. */
@media (max-width: 820px) {
  .agenda-entete { display: none; }
  .agenda-grille {
    display: flex; flex-direction: column; gap: 2px;
    grid-auto-rows: auto; flex: none;
  }
  .agenda-case { display: none; }
  .agenda-case:has(.agenda-evt) {
    display: grid; grid-template-columns: 46px 1fr;
    align-items: start; gap: .7rem;
    padding: .55rem .7rem; min-height: 48px;
  }
  .agenda-case.hors { display: none !important; }
  .agenda-case::after { display: none; }        /* le « + » du survol */
  .agenda-num {
    font-size: 1.35rem; padding-top: .15rem;
    color: var(--txt); text-align: center;
  }
  .agenda-case.aujourdhui .agenda-num { color: var(--blue); }
  /* les événements du jour s'empilent dans la seconde colonne */
  .agenda-case:has(.agenda-evt) > .agenda-evt {
    grid-column: 2; min-height: 38px; align-items: center;
    font-size: 12.5px; padding: .4rem .55rem;
  }
  .agenda-case:has(.agenda-evt) > .agenda-evt + .agenda-evt { margin-top: 3px; }
}

/* Les croix qui suppriment — une tâche, une entrée du fil — faisaient
   11 × 16 px : au doigt, on la rate
   ou on la touche sans le vouloir — et c'est une suppression. */
@media (max-width: 900px) {
  .carte-suppr, .gw-entree-sup {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Sur téléphone, la colonne « Prochainement » passe sous le calendrier : elle
   n'a plus de hauteur à elle, donc plus de raison de défiler dans un cadre. */
@media (max-width: 820px) {
  .suite-liste { overflow: visible; max-height: none; }
  /* et le pied ne dit plus vrai : les jours vides ne sont plus listés */
  .agenda-pied { display: none; }
}

/* ════════════════════════════════════════════════════════════
   L'ÉCRAN RÉSEAUX — ce qui est sorti

   Une carte par publication, la plus récente en haut. Elle montre ce
   qu'on republie : les visuels, le film, le PDF, et le texte tel quel
   avec son bouton Copier. Rien ne s'écrit ici — les posts vivent dans
   leur dossier daté, le Studio ne fait que les relire.
   ════════════════════════════════════════════════════════════ */
.pub { max-width: 1120px; margin: 0 auto; padding: 2.6rem 2.2rem 4rem; }
.pub-tete { margin-bottom: 2.2rem; }
.pub-jour { color: var(--mute); }
.pub-titre {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.04;
  letter-spacing: -.01em; margin-top: .5rem;
}
.pub-titre em { font-style: italic; color: rgb(var(--primaire)); }
.pub-sous { color: var(--soft); margin-top: .7rem; max-width: 58ch; line-height: 1.65; }
.pub-vide { color: var(--mute); padding: 2rem 0; }

.pub-carte {
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--panel); padding: 1.6rem 1.6rem 1.4rem;
  margin-bottom: 1.6rem;
}
.pub-carte-tete { margin-bottom: 1.2rem; }
.pub-date { color: var(--mute); }
.pub-nom {
  font-family: var(--serif); font-weight: 400; font-size: 1.45rem;
  line-height: 1.2; margin: .3rem 0 .8rem;
}
.pub-portes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* les visuels : une rangée qui défile, pas une grille qui pousse la
   carte sur trois écrans de haut */
.pub-visuels {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: thin;
}
.pub-vignette {
  flex: 0 0 auto; padding: 0; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: var(--panel-2); line-height: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pub-vignette:hover { border-color: rgba(var(--primaire), .55); transform: translateY(-2px); }
.pub-vignette img { height: 132px; width: auto; display: block; }

/* Le film est en 1080 x 1350 : debout. Sans plafond de hauteur il
   prenait tout l'écran à lui seul. */
.pub-film { margin-top: 1.1rem; }
.pub-film video {
  max-height: 420px; max-width: 100%; border-radius: 12px;
  background: #000; display: block;
}
.pub-fichiers { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.pub-fichiers a { color: var(--mute); text-decoration: none; }
.pub-fichiers a:hover { color: var(--txt); text-decoration: underline; }

.pub-textes {
  display: grid; gap: .8rem; margin-top: 1.3rem;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Le film est debout : seul sur sa ligne il laissait les deux tiers de la
   carte vides. Au-dessus de 1040 px il passe à gauche, et les textes se
   rangent à côté de lui. En dessous, tout reprend sa pile. */
@media (min-width: 1040px) {
  .pub-bas.avec-film {
    display: grid; gap: 1.2rem; align-items: start; margin-top: 1.1rem;
    /* La colonne est FIXE. En `auto` elle prenait la largeur du bloc, et
       ce bloc contient les noms de fichiers : deux liens côte à côte
       faisaient 629 px pour une vidéo qui en fait 330. */
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  }
  .pub-bas.avec-film .pub-fichiers { flex-direction: column; gap: .3rem; }
  .pub-bas.avec-film .pub-film,
  .pub-bas.avec-film .pub-textes { margin-top: 0; }
  .pub-bas.avec-film .pub-textes {
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  }
}
.pub-texte {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel-2); padding: .9rem 1rem 1rem;
}
.pub-texte-tete { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.pub-texte-tete .pub-copier { margin-left: auto; }
.pub-reseau {
  padding: .22rem .6rem; border-radius: 20px;
  font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--blue);
}
.pub-linkedin { background: #0A66C2; }
.pub-instagram { background: #C13584; }
.pub-facebook { background: #1877F2; }
.pub-format { color: var(--mute); }
.pub-reglage { color: var(--mute); white-space: pre-wrap; margin-bottom: .6rem; }
.pub-corps {
  white-space: pre-wrap; line-height: 1.6; color: var(--txt);
  font-size: 14.5px; max-height: 20em; overflow-y: auto;
}

.pub-notes { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.pub-notes summary {
  cursor: pointer; color: var(--soft); font-size: 13px; list-style: none;
}
.pub-notes summary::-webkit-details-marker { display: none; }
.pub-notes summary::before { content: '\203A  '; color: var(--mute); }
.pub-notes[open] summary::before { content: '\2039  '; }
.pub-notes pre {
  white-space: pre-wrap; margin-top: .8rem; color: var(--soft);
  font: 400 12.5px/1.65 'Inter', system-ui, sans-serif;
  max-height: 24em; overflow-y: auto;
}

@media (max-width: 700px) {
  .pub { padding: 1.6rem 1rem 3rem; }
  .pub-carte { padding: 1.1rem 1rem 1rem; border-radius: 14px; }
  .pub-vignette img { height: 104px; }
  .pub-film video { max-height: 320px; }
}

/* ════════════════════════════════════════════════════════════
   17/09/2026 — LE MENU DES ATELIERS, L'ONGLET TÂCHES, LE BANDEAU
   « ANNULER », L'ÉCRAN DU MATIN
   Posé en fin de fichier : un @media placé avant les règles de base
   serait annulé par elles.
   ════════════════════════════════════════════════════════════ */

/* ── le logo qui ouvre le menu ──
   Un chevron dit que c'est un menu. Il remplace la pastille « Changer
   d'atelier » qui apparaissait au survol EN MÊME TEMPS que l'infobulle du
   navigateur : deux étiquettes l'une sur l'autre. */
.marque-chevron {
  width: 11px; height: 11px; flex: none; margin-left: .05rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--mute); transition: transform .25s var(--ease), color .2s;
}
.marque-bascule:hover .marque-chevron,
.marque-bascule[aria-expanded="true"] .marque-chevron { color: var(--txt); }
.marque-bascule[aria-expanded="true"] .marque-chevron { transform: rotate(180deg); }
.marque-bascule:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
/* Conodor : le logo EST le mot. « CONODOR Conodor » se lisait deux fois. */
.marque-bascule.logo-mot #marque-mot { display: none; }
.marque-vers { display: none; }

/* ── le nombre sur l'onglet Tâches ── */
.sections button[data-badge]::after {
  content: attr(data-badge);
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  margin-left: .45rem; padding: 0 .3rem; border-radius: 999px; vertical-align: 1px;
  background: rgba(var(--primaire),.24); color: var(--txt);
  font-size: 9px; font-weight: 700; letter-spacing: 0;
}
.sections button.badge-retard[data-badge]::after { background: #e5484d; color: #fff; }

/* ── le bandeau « Annuler » ── */
.bandeaux {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 150; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: max-content; max-width: calc(100vw - 2rem); pointer-events: none;
}
.bandeau {
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: 1rem; max-width: 100%;
  padding: .65rem .7rem .65rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, #000);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.85);
  color: var(--txt); font-size: 13px;
  animation: bandeau-vient .32s cubic-bezier(.22,1,.32,1);
}
.bandeau.part { animation: bandeau-part .26s ease-in forwards; }
.bandeau-mot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeau-b {
  flex: none; padding: .38rem .8rem; border-radius: 8px;
  border: 1px solid rgba(var(--primaire),.5); background: rgba(var(--primaire),.15);
  color: var(--txt); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background .15s;
}
.bandeau-b:hover { background: rgba(var(--primaire),.3); }
.bandeau-temps {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--blue); opacity: .7; transform-origin: left;
  animation: bandeau-temps var(--duree, 5s) linear forwards;
}
@keyframes bandeau-temps { to { transform: scaleX(0); } }
@keyframes bandeau-vient { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes bandeau-part { to { opacity: 0; transform: translateY(8px); } }

/* ════════════════════════════════════════════════════════════
   L'ONGLET TÂCHES
   ════════════════════════════════════════════════════════════ */
.tk { max-width: 1320px; margin: 0 auto; padding: clamp(2rem, 4.5vw, 3.6rem) 2.5rem 6rem; }
.tk-tete { margin-bottom: 1.8rem; }
.tk-sur { color: var(--mute); }
.tk-titre {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.02; margin: .45rem 0 .6rem;
}
.tk-titre em { font-style: italic; color: var(--blue); }
.tk-resume { color: var(--soft); font-size: 14px; }

/* — ajouter — */
.tk-ajout {
  margin-bottom: 2rem; padding: .5rem .6rem .7rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel);
  transition: border-color .2s, box-shadow .2s;
}
.tk-ajout:focus-within { border-color: rgba(var(--primaire),.55); box-shadow: 0 0 0 4px rgba(var(--primaire),.08); }
.tk-ajout-haut { display: flex; align-items: center; gap: .6rem; }
.tk-ajout-plus {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--blue); font-size: 22px; font-weight: 300; line-height: 1;
}
.tk-ajout-haut input {
  flex: 1; min-width: 0; padding: .65rem .2rem; border: 0; outline: none;
  background: transparent; color: var(--txt); font-size: 16px;
}
.tk-ajout-haut input::placeholder { color: var(--mute); }
.tk-ajout-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: .35rem; padding: .55rem .2rem 0 2.6rem; border-top: 1px solid var(--line);
}
.tk-choix {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 2px;
  border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.tk-choix button {
  padding: .34rem .7rem; border-radius: 7px; white-space: nowrap;
  font-size: 11.5px; color: var(--soft); transition: background .15s, color .15s;
}
.tk-choix button:hover { color: var(--txt); background: rgba(255,255,255,.05); }
.tk-choix button.ici { color: var(--txt); background: rgba(var(--primaire),.22); }
.tk-choix button[data-v="haute"].ici { background: rgba(245,158,11,.22); }
.tk-choix button[data-v="urgente"].ici { background: rgba(229,72,77,.26); }
.tk-choix input[type="date"] {
  padding: .3rem .45rem; border: 0; outline: none; background: transparent;
  color: var(--soft); font-size: 11.5px; color-scheme: dark;
}
.tk-ajout-bas select {
  max-width: 220px; padding: .4rem .6rem; border-radius: 8px; outline: none;
  border: 1px solid var(--line); background: var(--noir); color: var(--soft); font-size: 11.5px;
}

/* — la liste et son encart — */
.tk-plan { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.4rem; align-items: start; }
.tk-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1rem; margin-bottom: 1.3rem;
}
.tk-filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.tk-filtres button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .75rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--soft); font-size: 12px; transition: border-color .15s, color .15s, background .15s;
}
.tk-filtres button b { font-size: 10.5px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.tk-filtres button:hover { border-color: var(--border); color: var(--txt); }
.tk-filtres button.ici { background: var(--txt); border-color: var(--txt); color: var(--noir); }
.tk-filtres button.ici b { color: color-mix(in srgb, var(--noir) 60%, transparent); }
.tk-filtres button.alerte:not(.ici) b { color: #ff8a8f; }
.tk-outils { display: flex; gap: .45rem; }
.tk-outils input, .tk-outils select {
  padding: .42rem .7rem; border-radius: 8px; outline: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt); font-size: 12px;
}
.tk-outils input { width: 170px; }
.tk-outils input:focus, .tk-outils select:focus { border-color: var(--blue); }

.tk-groupe + .tk-groupe { margin-top: 1.6rem; }
.tk-groupe-titre {
  display: flex; align-items: center; gap: .5rem; padding: 0 0 .55rem .2rem;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.tk-groupe-titre span { font-weight: 600; letter-spacing: .04em; color: var(--faint); }
.tk-g-retard .tk-groupe-titre { color: #ff8a8f; }
.tk-g-jour .tk-groupe-titre { color: var(--blue); }
.tk-groupe-corps {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.tk-g-faites .tk-groupe-corps { background: transparent; }

/* — une tâche — */
.tk-ligne {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start; gap: .2rem .7rem; padding: .8rem .9rem .8rem .75rem;
  border-top: 1px solid var(--line); transition: background .15s;
}
.tk-ligne:first-child { border-top: 0; }
.tk-ligne:hover { background: rgba(255,255,255,.025); }
.tk-ligne::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.tk-ligne.prio-haute::before { background: #f59e0b; }
.tk-ligne.prio-urgente::before { background: #e5484d; }
.tk-coche {
  width: 22px; height: 22px; margin: 1px 0 0 4px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--mute);
  transition: border-color .2s, background .2s, transform .2s;
}
.tk-coche svg {
  width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .3s ease .05s;
}
.tk-coche:hover { border-color: var(--blue); background: rgba(var(--primaire),.12); }
.tk-ligne.faite .tk-coche, .tk-ligne.se-coche .tk-coche { background: var(--blue); border-color: var(--blue); }
.tk-ligne.faite .tk-coche svg, .tk-ligne.se-coche .tk-coche svg { stroke-dashoffset: 0; }
.tk-ligne.se-coche .tk-coche { transform: scale(1.12); }
.tk-ligne.se-decoche .tk-coche { background: transparent; border-color: var(--mute); }
.tk-ligne.se-decoche .tk-coche svg { stroke-dashoffset: 16; }
.tk-corps { min-width: 0; }
.tk-texte { font-size: 14.5px; line-height: 1.45; color: var(--txt); cursor: text; overflow-wrap: anywhere; }
.tk-ligne.compact .tk-texte { font-size: 13.5px; cursor: pointer; }
.tk-ligne.compact .tk-texte:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mute); }
.tk-ligne.faite .tk-texte, .tk-ligne.se-coche .tk-texte {
  color: var(--mute); text-decoration: line-through; text-decoration-color: var(--mute);
}
.tk-note {
  margin-top: .2rem; color: var(--soft); font-size: 12.5px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin-top: .45rem; }
.tk-meta:empty { display: none; }
.tk-quand { font-size: 11.5px; color: var(--soft); }
.tk-ligne.retard .tk-quand { color: #ff8a8f; }
.tk-prio {
  padding: .14rem .45rem; border-radius: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.prio-haute .tk-prio { color: #fbbf24; background: rgba(245,158,11,.13); }
.prio-urgente .tk-prio { color: #ff8a8f; background: rgba(229,72,77,.16); }
.prio-basse .tk-prio { color: var(--mute); background: rgba(255,255,255,.05); }
.tk-projet { cursor: pointer; transition: border-color .15s, color .15s; }
.tk-projet:hover { border-color: var(--blue); color: var(--txt); }
.tk-statut { font-size: 11px; color: var(--mute); font-style: italic; }
.tk-actions { display: flex; gap: .2rem; opacity: 0; transition: opacity .15s; }
.tk-ligne:hover .tk-actions, .tk-ligne:focus-within .tk-actions { opacity: 1; }
.tk-b { padding: .3rem .55rem; border-radius: 7px; font-size: 11px; color: var(--mute); }
.tk-b:hover { color: var(--txt); background: rgba(255,255,255,.06); }
.tk-suppr { padding: .12rem .5rem; font-size: 17px; line-height: 1.2; }
.tk-suppr:hover { color: #ff8a8f; background: rgba(229,72,77,.12); }
.tk-ligne.edition { background: rgba(var(--primaire),.05); }
.tk-ligne.edition .tk-actions { display: none; }
.tk-ligne.eclaire { animation: tk-eclaire 1.7s ease; }
@keyframes tk-eclaire { 0%, 35% { background: rgba(var(--primaire),.18); } 100% { background: transparent; } }

/* — modifier sur place — */
.tk-edit { display: flex; flex-direction: column; gap: .5rem; }
.tk-edit input[name="texte"], .tk-edit textarea {
  width: 100%; padding: .5rem .65rem; border-radius: 8px; outline: none;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt);
  font-family: var(--sans); font-size: 14px;
}
.tk-edit textarea { min-height: 58px; resize: vertical; font-size: 12.5px; line-height: 1.55; }
.tk-edit input:focus, .tk-edit textarea:focus, .tk-edit select:focus { border-color: var(--blue); }
.tk-edit-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.tk-edit-ligne label { display: flex; flex-direction: column; gap: .22rem; }
.tk-edit-ligne label span {
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.tk-edit-ligne input, .tk-edit-ligne select {
  max-width: 200px; padding: .38rem .55rem; border-radius: 7px; outline: none;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt);
  font-size: 12px; color-scheme: dark;
}
.tk-edit-espace { flex: 1; }
.tk-edit-crm { font-size: 11.5px; line-height: 1.5; color: var(--mute); }

.tk-voir-faites {
  width: 100%; margin-top: 1.2rem; padding: .55rem .9rem; border-radius: 9px;
  border: 1px dashed var(--border); color: var(--mute); font-size: 12px;
  transition: color .15s, border-color .15s;
}
.tk-voir-faites:hover { color: var(--txt); border-color: var(--blue); }
.tk-voir-faites + .tk-groupe { margin-top: 1rem; }
.tk-vide { padding: 1.4rem .2rem; color: var(--mute); font-size: 13.5px; }

.tk-cote { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.tk-encart { padding: .9rem .9rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.tk-encart-titre {
  margin-bottom: .6rem; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.tk-par-projet { display: flex; flex-direction: column; gap: 2px; }
.tk-par-projet button {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: .55rem;
  padding: .42rem .45rem; border-radius: 8px; text-align: left; color: var(--soft); font-size: 12.5px;
  transition: background .15s, color .15s;
}
.tk-par-projet button:hover { background: rgba(255,255,255,.04); color: var(--txt); }
.tk-par-projet button.ici { background: rgba(var(--primaire),.15); color: var(--txt); }
.tk-pp-logo { display: grid; place-items: center; height: 20px; }
.tk-pp-logo img { max-width: 42px; max-height: 18px; object-fit: contain; }
.tk-pp-logo i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--mute); }
.tk-pp-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-par-projet b { font-size: 12px; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.tk-pp-retard {
  min-width: 18px; padding: 0 .3rem; border-radius: 999px; text-align: center;
  background: rgba(229,72,77,.18); color: #ff8a8f; font-size: 10px; font-weight: 700;
}
.tk-crm-mot { margin-bottom: .8rem; color: var(--soft); font-size: 12.5px; line-height: 1.6; }
.tk-crm-mot b { color: var(--txt); }
.tk-crm-mot i { font-style: normal; color: var(--txt); }
.tk-encart .btn-fin { display: inline-block; }

/* ── la barre à six onglets ──
   To The Top a gagné l'onglet Tâches (et sa pastille). Mesuré de 1280 à 1600 px :
   les onglets se rognaient jusqu'à 115 px et « Sortir » sortait de l'écran à
   1366. On reprend la place là où elle ne sert à rien : le prénom (la pastille
   des initiales reste), le compteur, puis le mot à côté du logo. */
@media (max-width: 1600px) {
  .moi-nom { display: none; }
}
@media (max-width: 1480px) {
  .compteur { display: none; }
}
@media (max-width: 1400px) and (min-width: 701px) {
  #marque-mot { display: none; }
}

/* ── les écrans étroits ── */
@media (max-width: 1180px) {
  .jour-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jour-bloc-taches { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  /* minmax(0, …) : une colonne `1fr` prend la largeur minimale de son contenu,
     et le champ de recherche + la liste des projets la poussaient hors écran */
  .tk-plan { grid-template-columns: minmax(0, 1fr); }
  .tk-cote { position: static; flex-direction: row; flex-wrap: wrap; }
  .tk-encart { flex: 1 1 280px; }
}
@media (max-width: 1000px) {
  /* sept colonnes de 110 px : on fait défiler la semaine plutôt que de l'écraser */
  .jour-semaine {
    grid-template-columns: repeat(7, minmax(132px, 1fr)); overflow-x: auto;
    padding-bottom: .5rem; scroll-snap-type: x proximity;
  }
  .js-jour { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .jour { padding-left: 1rem; padding-right: 1rem; }
  .jour-tete { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .jour-prochain { flex-basis: auto; min-width: 0; }
  .jour-grille { grid-template-columns: 1fr; }
  .jour-atelier { grid-template-columns: 56px minmax(0, 1fr); }
  .ja-fleche { display: none; }
}
@media (max-width: 700px) {
  .tk { padding: 1.6rem 1rem 5rem; }
  .tk-ajout-bas { padding-left: .2rem; }
  .tk-outils { width: 100%; min-width: 0; }
  .tk-outils input { flex: 1 1 0; width: auto; min-width: 0; }
  .tk-outils select { flex: 0 1 45%; min-width: 0; }
  .tk-ligne { grid-template-columns: 30px minmax(0, 1fr); }
  .tk-actions { grid-column: 2; opacity: 1; }
  /* sous 16 px, iOS zoome sur le champ et la page semble déborder */
  .tk input, .tk select, .tk textarea, .jour-ajout input { font-size: 16px; }
  .bandeaux { bottom: 5.2rem; }
  /* pas de touche Alt sur un téléphone */
  #marque-menu .mm-fin kbd { display: none; }
}

/* ════════════════════════════════════════════════════════════
   17/09/2026 — PLUS DE SERIF (« je préfère sans serif »)
   La variable s'appelle toujours --serif (trente règles s'en servent), mais
   chez To The Top elle vaut maintenant Poppins, la typo sans serif du site de
   l'agence. Les règles de titre écrivaient « font-weight: 300 » à côté : c'est
   élégant en Cormorant, maigre en Poppins. On repose les graisses ici, pour
   l'atelier To The Top seulement — Geff-Ways (Syne) et Conodor (Bebas Neue)
   ont les leurs.
   ════════════════════════════════════════════════════════════ */
body:not(.espace-gw):not(.espace-conodor) :is(.jour-salut, .tk-titre, .pub-titre, .fiche-nom,
  .arc-titre-texte, .agenda-mois, .modale-boite h2, .agent-tete h2, .sante-titre, .pub-nom, .vs-nom) {
  font-weight: 600; letter-spacing: -.02em;
}
body:not(.espace-gw):not(.espace-conodor) :is(.agenda-rail .annee, .arc-scrubber button,
  .arc-entete .gauche, .agenda-num, .js-tete b) {
  font-weight: 500; letter-spacing: -.01em;
}
body:not(.espace-gw):not(.espace-conodor) :is(.pd-vide-sigle, .chantier-sigle, .carte-sigle) {
  font-weight: 700; letter-spacing: -.02em;
}
/* pas d'italique fabriqué : Poppins n'est chargée qu'en romain */
body:not(.espace-gw):not(.espace-conodor) :is(.tk-titre em, .pub-titre em, .marque-bascule > span) {
  font-style: normal;
}
body.connexion:not(.espace-gw):not(.espace-conodor) h1 { font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   17/09/2026 — MARGAUX : LES NOTES POUR LE CRM ET LES RAPPORTS
   ════════════════════════════════════════════════════════════ */
.carte-note-crm, .carte-rapport { border-color: color-mix(in srgb, var(--blue) 38%, var(--border)); }
.carte-note-crm .brouillon-tete, .carte-rapport .brouillon-tete { color: var(--blue); }
.carte-note-crm .brouillon-objet, .carte-rapport .brouillon-objet { color: var(--txt); }
.carte-note-crm.compacte { padding: .6rem .8rem; }
.note-crm-statut { margin-top: .45rem; color: var(--soft); }
/* une phrase, pas une étiquette : ni capitales ni interlettrage */
.note-crm-etat {
  margin-top: .55rem; color: var(--soft);
  font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none;
}
.note-crm-etat.fait { color: #39b877; }
.note-crm-etat.souci { color: #f08a3c; }
.carte-rapport .brouillon-bas a { text-decoration: none; }
.brouillon-bas { flex-wrap: wrap; }

/* dans l'onglet Tâches : une note préparée, pas encore dans le CRM */
.tk-crm-attente {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  cursor: pointer; transition: background .15s, color .15s;
}
.tk-crm-attente::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk-crm-attente:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--txt); }
.tk-crm-attente:disabled { cursor: default; opacity: .85; }
.tk-crm-attente.fait { color: #39b877; border-color: rgba(57,184,119,.4); background: rgba(57,184,119,.1); }
/* prête, en attente que Claude la passe : rien à cliquer */
.tk-crm-attente.prete { cursor: default; color: var(--soft); background: transparent; border-style: dashed; border-color: var(--border); }

/* ════════════════════════════════════════════════════════════
   17/09/2026 — LE BILAN DE LA JOURNÉE, LA MISE À JOUR AVEC LE CRM
   ════════════════════════════════════════════════════════════ */
.jour-bilan {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap;
  margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 12%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
}
.jour-bilan:empty { display: none; }
.jb-mots { min-width: 0; flex: 1 1 360px; }
.jb-titre { color: var(--blue); margin-bottom: .35rem; }
.jb-texte { color: var(--soft); font-size: 14px; line-height: 1.6; max-width: 90ch; }
.jour-bilan.pret .jb-texte { color: var(--txt); }
.jb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.jour-bilan.se-fait .jb-titre::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .55rem; border-radius: 50%;
  background: var(--blue); vertical-align: middle; animation: jbPouls 1.2s ease-in-out infinite;
}
@keyframes jbPouls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .jour-bilan.se-fait .jb-titre::after { animation: none; } }

/* la feuille */
.bilan-voile {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: start center;
  padding: clamp(1rem, 5vh, 3.5rem) 1rem; overflow-y: auto;
  background: rgba(4, 7, 12, .72); backdrop-filter: blur(6px);
}
.bilan-feuille {
  width: min(860px, 100%); padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 18px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.bf-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bf-quand { color: var(--mute); }
.bf-titre { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; margin-top: .3rem; }
.bf-fermer { font-size: 26px; line-height: 1; color: var(--mute); padding: .2rem .5rem; border-radius: 8px; }
.bf-fermer:hover { color: var(--txt); background: rgba(255,255,255,.06); }
.bf-bref { margin: 1rem 0 .9rem; font-size: 16px; line-height: 1.65; color: var(--txt); max-width: 70ch; }
.bf-chiffres { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.bf-chiffres span {
  padding: .3rem .7rem; border-radius: 999px; font-size: 12.5px; color: var(--soft);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.bf-chiffres b { color: var(--txt); font-weight: 700; }
.bf-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: .8rem; }
.bf-projet, .bf-bloc { padding: .95rem 1.05rem; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.bf-bloc { margin-top: .8rem; }
.bf-projet h3, .bf-bloc h3 {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem;
  font-size: 14.5px; font-weight: 600; color: var(--txt);
}
.bf-projet h3 img { height: 20px; width: auto; max-width: 64px; object-fit: contain; }
.bf-liste { margin: 0; padding: 0; list-style: none; }
.bf-liste li { position: relative; padding: .22rem 0 .22rem 1.1rem; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.bf-liste li::before { content: ''; position: absolute; left: .1rem; top: .78rem; width: 6px; height: 6px; border-radius: 50%; background: #39b877; }
.bf-liste.suivre li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); }
.bf-sous { margin: .55rem 0 .2rem; color: var(--mute); }
.bf-pied { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.4rem; flex-wrap: wrap; }
@media (max-width: 700px) {
  .jour-bilan { padding: .9rem 1rem; }
  .bilan-voile { padding: .6rem; }
}

/* onglet Tâches : le bouton de mise à jour avec le CRM */
.tk-crm-maj { width: 100%; margin-bottom: .55rem; }
.tk-crm-synchro { margin: 0 0 .8rem; color: var(--mute); font-size: 12px; line-height: 1.55; letter-spacing: 0; text-transform: none; }
.tk-crm-synchro .attend { color: var(--soft); }
.tk-crm-synchro i { font-style: normal; color: var(--txt); }

/* ════════════════════════════════════════════════════════════
   LES MAILS (17/09/2026)
   L'onglet Mails, les notifications en haut à droite, et les demandes du
   site dans la fiche d'un projet. Les couleurs de genre : une demande de
   site en bleu, un client en vert, ce qui n'est pas rangé en orange.
   ════════════════════════════════════════════════════════════ */
.mails { --genre: var(--mute); }
.mails .sante-actions { flex-wrap: wrap; justify-content: flex-end; }
.mails-etat { margin-bottom: 1.4rem; }
.mails-mot { color: var(--soft); font-size: 13.5px; line-height: 1.6; }
.mails-souci { color: #f0a15a; }
.mails-relie { display: flex; align-items: center; gap: .6rem; color: var(--soft); font-size: 13.5px; }
.mails-relie b { color: var(--txt); font-weight: 600; }
.mails-relie i { width: 9px; height: 9px; border-radius: 50%; background: #39b877; flex: none; }
.mails-relie i.souci { background: #f08a3c; }
.mails-relier {
  max-width: 760px; padding: 1.3rem 1.4rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel);
}
.mails-relier-titre { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-bottom: .8rem; }
.mails-etapes { display: grid; gap: .9rem; margin: 0 0 1rem 1.2rem; color: var(--soft); font-size: 13.5px; line-height: 1.6; }
.mails-etapes b { color: var(--txt); font-weight: 600; }
.mails-etapes li.fait { color: var(--mute); }
.mails-etapes button { display: block; margin-top: .55rem; }
.mails-ok { color: #39b877; font-weight: 600; margin-left: .3rem; }

/* Repris le 17/09/2026 au soir : à gauche on choisit (vue, projet, personne, un
   mot), à droite une ligne par mail qui se déplie. */
.mails-cadre { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
.mails-cote {
  position: sticky; top: calc(var(--barre-h) + 16px);
  display: flex; flex-direction: column; gap: 1.2rem;
  max-height: calc(100vh - var(--barre-h) - 32px); overflow-y: auto; padding: 0 .3rem 1rem 0;
}
.mails-cherche input {
  width: 100%; padding: .62rem .8rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt); font: inherit; font-size: 13.5px;
}
.mails-cherche input:focus { outline: none; border-color: var(--blue); }
.mails-bloc { display: flex; flex-direction: column; }
.mails-bloc-titre { color: var(--mute); margin: 0 0 .35rem .55rem; }
.mails-bloc-liste { display: flex; flex-direction: column; gap: .05rem; }
.mails-choix {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  padding: .42rem .55rem; border-radius: 8px; border: 0; background: transparent;
  color: var(--soft); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.mails-choix span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mails-choix b { color: var(--mute); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.mails-choix:hover { background: var(--panel); color: var(--txt); }
.mails-choix.ici { background: rgba(var(--primaire), .18); color: var(--txt); }
.mails-choix.ici b { color: var(--txt); }
.mails-plus { align-self: flex-start; margin: .25rem 0 0 .55rem; border: 0; background: none; color: var(--blue); font: inherit; font-size: 12.5px; cursor: pointer; }
.mails-plus:hover { text-decoration: underline; text-underline-offset: 3px; }
.mails-choix-mobile { display: none; }

.mails-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 2rem; margin-bottom: .6rem; }
.mails-nb { color: var(--soft); font-size: 13px; margin-right: .35rem; }
.mails-nb b { color: var(--txt); }
.mails-actif {
  display: inline-flex; align-items: center; gap: .35rem; padding: .26rem .65rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--txt); font: inherit; font-size: 12.5px; cursor: pointer;
}
.mails-actif i { font-style: normal; color: var(--mute); }
.mails-actif:hover { border-color: var(--blue); }
.mails-actif:hover i { color: var(--txt); }
.mails-actif.tout { border-style: dashed; color: var(--soft); }

.mails-jour + .mails-jour { margin-top: 1.3rem; }
.mails-jour-titre {
  display: flex; align-items: baseline; gap: .5rem; padding: 0 .5rem .45rem; margin-bottom: .15rem;
  border-bottom: 1px solid var(--line); color: var(--mute);
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.mails-jour-titre b { color: var(--soft); letter-spacing: .04em; }

.mail { --genre: var(--mute); border-bottom: 1px solid var(--line); }
.mail.genre-demande, .notif-mail.genre-demande, .fm-carte.genre-demande { --genre: #4F7CFF; }
.mail.genre-client, .mail.genre-prospect, .notif-mail.genre-client, .fm-carte.genre-client { --genre: #39b877; }
.mail.genre-banque, .notif-mail.genre-banque { --genre: #c9a44c; }
.mail.pas-range, .notif-mail.pas-range { --genre: #f08a3c; }
.mail.genre-pub, .mail.genre-notification, .mail.genre-compte, .mail.genre-fournisseur { --genre: var(--faint); }
.mail-ligne {
  display: grid; grid-template-columns: 9px minmax(7rem, 12rem) minmax(0, 1fr) auto 4.4rem;
  align-items: center; gap: .8rem; padding: .6rem .5rem; border-radius: 8px; cursor: pointer;
}
.mail-ligne:hover { background: var(--panel); }
.mail-ligne:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mail.ouvert .mail-ligne { background: var(--panel-2); border-radius: 8px 8px 0 0; }
.mail.eclaire .mail-ligne { animation: mail-eclaire 1.8s var(--ease); }
@keyframes mail-eclaire { 0%, 40% { background: rgba(var(--primaire), .25); } }
.mail-point { width: 9px; height: 9px; border-radius: 50%; background: var(--genre); }
.mail-qui {
  justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: none; padding: 0; color: var(--txt); font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.mail-qui:hover { color: var(--blue); }
.mail-resume { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); font-size: 13.5px; }
.mail-resume b { color: var(--txt); font-weight: 500; }
.mail-resume span { color: var(--mute); }
.mail-projet {
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--soft); font: inherit; font-size: 12px; cursor: pointer;
}
.mail-projet:hover { color: var(--txt); border-color: var(--blue); }
.mail-quand { color: var(--mute); font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail.pas-range .mail-quand { color: #f0a15a; }
.mail-detail {
  display: flex; flex-direction: column; gap: .45rem; margin-bottom: .6rem;
  padding: .5rem 1rem 1rem 2.2rem; border-radius: 0 0 8px 8px; background: var(--panel-2);
}
.mail-de { color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
.mail-de b { color: var(--txt); font-weight: 600; }
.mail-de span { color: var(--mute); }
.mail-sujet { color: var(--txt); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.mail-texte {
  max-height: 28rem; overflow-y: auto; padding: .75rem .9rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--noir); color: var(--txt);
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mail-texte.charge { color: var(--mute); }
.mail-coord { color: var(--soft); font-size: 13.5px; overflow-wrap: anywhere; }
.mail-coord a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.mail-coord a:hover { color: var(--txt); }
.mail-message { color: var(--txt); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.mail-autres { display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: var(--mute); font-size: 12.5px; }
.mail-autres b { color: var(--soft); font-weight: 600; margin-right: .25rem; }
.mail-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin-top: .35rem; }
.mail-genre { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--genre); }
.mail-dossier { color: var(--soft); font-size: 12.5px; overflow-wrap: anywhere; }
.mail.pas-range .mail-dossier { color: #f0a15a; }
.mail-espace { flex: 1; }
.mail-rangement {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--line);
}
.mail-choix {
  min-width: min(22rem, 100%); padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt); font-size: 13px;
}
.mail-toujours { display: inline-flex; align-items: center; gap: .4rem; color: var(--soft); font-size: 12.5px; }
.mail-toujours b { color: var(--txt); font-weight: 600; overflow-wrap: anywhere; }
.mails-encore { display: block; margin: 1.2rem auto 0; }

/* les notifications, en haut à droite, sous la barre */
.notifs-mail {
  position: fixed; top: calc(var(--barre-h) + 14px); right: 16px; z-index: 95;
  display: flex; flex-direction: column; gap: .55rem; width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.notif-mail {
  pointer-events: auto; position: relative; overflow: hidden;
  padding: .8rem .95rem .7rem 1.05rem; border-radius: 12px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  animation: notif-arrive .35s var(--ease);
  transition: opacity .25s, transform .25s;
}
.notif-mail::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--genre, var(--blue)); }
.notif-mail.part { opacity: 0; transform: translateX(12px); }
@keyframes notif-arrive { from { opacity: 0; transform: translateY(-8px); } }
.nm-tete { color: var(--genre, var(--soft)); margin-bottom: .25rem; }
.nm-de { color: var(--txt); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.nm-sujet { color: var(--soft); font-size: 13px; line-height: 1.45; margin-top: .1rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nm-bas { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; }
.nm-voir, .nm-gmail {
  padding: .28rem .65rem; border-radius: 7px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--soft); text-decoration: none;
}
.nm-voir { color: var(--txt); border-color: rgba(var(--primaire), .55); }
.nm-voir:hover, .nm-gmail:hover { color: var(--txt); background: var(--panel-2); }
.nm-fermer { margin-left: auto; border: 0; background: none; color: var(--mute); font-size: 18px; cursor: pointer; line-height: 1; }
.nm-fermer:hover { color: var(--txt); }

/* dans la fiche d'un projet */
.fiche-mails { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.fm-carte {
  display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); border-left: 3px solid var(--genre, var(--mute));
}
.fm-carte .btn-fin { align-self: flex-start; margin-top: .45rem; }
.fm-quand { color: var(--mute); }
.fm-nom { color: var(--txt); font-weight: 600; font-size: 15px; }
.fm-vide { color: var(--mute); font-size: 13px; }
/* devant un client (présentation), ses demandes et ses mails ne se montrent pas */
body.presentation #fiche-bloc-mails { display: none !important; }

@media (max-width: 900px) {
  .mails .sante-actions { justify-content: flex-start; }
  .mails-cadre { grid-template-columns: 1fr; gap: 1rem; }
  .mails-cote { position: static; max-height: none; overflow: visible; padding: 0; gap: .6rem; }
  .mails-bloc-titre, .mails-bloc-liste { display: none; }
  .mails-choix-mobile {
    display: block; width: 100%; padding: .58rem .7rem; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); color: var(--txt); font: inherit; font-size: 14px;
  }
  .mail-ligne {
    grid-template-columns: 9px minmax(0, 1fr) auto;
    grid-template-areas: "point qui quand" "point resume resume";
    row-gap: .15rem;
  }
  .mail-point { grid-area: point; align-self: start; margin-top: .4rem; }
  .mail-qui { grid-area: qui; }
  .mail-quand { grid-area: quand; }
  .mail-resume { grid-area: resume; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mail-projet, .mail-ligne > span:empty { display: none; }
  .mail-detail { padding-left: 1rem; }
}

/* ── L'ARRIVÉE SUR UN ÉCRAN (17/09/2026) ─────────────────────
   Geffry : « une animation quand on arrive sur l'écran pour la première fois,
   pas d'apparition brute ». Les blocs montent en cascade, la PREMIÈRE fois
   qu'on ouvre l'écran dans la visite (voir ECRANS_VUS dans app.js) — ensuite
   plus rien, une animation qui se rejoue vingt fois par heure devient une gêne.

   Chaque atelier a son geste : To The Top monte (« jusqu'au sommet »),
   Geff-Ways arrive par la gauche (le chemin), Conodor se pose.

   Deux règles de sûreté :
   — l'état NORMAL est visible ; l'animation ne fait qu'ajouter une arrivée.
     Si elle ne part pas, rien ne disparaît (le piège des blocs à révélation) ;
   — un bloc qui contient un canvas ne bouge pas : le carrousel et les courbes
     se mesurent au pixel juste après le rendu, et une transformation en cours
     leur ferait lire de fausses positions. */
@keyframes ecran-monte  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ecran-glisse { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes ecran-pose   { from { opacity: 0; transform: scale(.97); }       to { opacity: 1; transform: none; } }

#scene.arrive > *,
#scene.arrive > :only-child > * {
  animation: ecran-monte .5s cubic-bezier(.22, .61, .36, 1) both;
}
body.espace-gw #scene.arrive > *,
body.espace-gw #scene.arrive > :only-child > * { animation-name: ecran-glisse; }
body.espace-conodor #scene.arrive > *,
body.espace-conodor #scene.arrive > :only-child > * { animation-name: ecran-pose; }

#scene.arrive > :nth-child(2),
#scene.arrive > :only-child > :nth-child(2) { animation-delay: .07s; }
#scene.arrive > :nth-child(3),
#scene.arrive > :only-child > :nth-child(3) { animation-delay: .14s; }
#scene.arrive > :nth-child(4),
#scene.arrive > :only-child > :nth-child(4) { animation-delay: .2s; }
#scene.arrive > :nth-child(5),
#scene.arrive > :only-child > :nth-child(5) { animation-delay: .26s; }
#scene.arrive > :nth-child(6),
#scene.arrive > :only-child > :nth-child(6) { animation-delay: .31s; }
#scene.arrive > :nth-child(n + 7),
#scene.arrive > :only-child > :nth-child(n + 7) { animation-delay: .36s; }

/* la page d'un écran ne s'anime pas elle-même : ce sont ses blocs qui arrivent */
#scene.arrive > :only-child { animation: none; }
/* ce qui se mesure ne bouge pas */
#scene.arrive > :has(canvas),
#scene.arrive > :only-child > :has(canvas) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #scene.arrive > *,
  #scene.arrive > :only-child > * { animation: none; }
}

/* ── LE TEMPS PASSÉ (17/09/2026) ─────────────────────────────
   Dans le volet de la fiche : le total, le chrono, et les dernières lignes. */
.fiche-temps {
  margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.ft-tete { display: flex; align-items: baseline; gap: .6rem; }
.ft-tete .micro { color: var(--mute); }
.ft-tete b { margin-left: auto; font-family: var(--serif); font-size: 1.35rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.ft-mois { margin: .15rem 0 .7rem; font-size: 12px; color: var(--soft); }
.ft-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ft-actions button {
  padding: .38rem .7rem; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
}
.ft-actions button:hover { color: var(--txt); border-color: var(--blue); }
.ft-actions button.ft-tourne { background: var(--blue); border-color: var(--blue); color: var(--noir); font-weight: 600; }
.ft-lignes { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ft-lignes li { display: flex; align-items: center; gap: .5rem; font-size: 12.5px; color: var(--soft); }
.ft-lignes b { color: var(--txt); font-variant-numeric: tabular-nums; }
.ft-quand { min-width: 4.6rem; color: var(--mute); }
.ft-note { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-rien { color: var(--mute); }
.ft-oter { margin-left: auto; border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 15px; line-height: 1; }
.ft-oter:hover { color: var(--txt); }
/* en présentation devant un client, le temps passé ne regarde personne */
body.presentation .fiche-temps { display: none; }

/* la pastille : un chrono qu'on oublie ne vaut rien. En bas à DROITE : à
   gauche il y a la platine, et elle grandit quand on ouvre sa liste. */
.chrono-pastille {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  border-radius: 999px; border: 1px solid var(--blue); background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13px;
}
.chrono-pastille[hidden] { display: none; }
.chrono-point { width: 8px; height: 8px; border-radius: 999px; background: var(--blue); animation: chrono-bat 2s ease-in-out infinite; }
@keyframes chrono-bat { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.chrono-pastille b { color: var(--txt); }
.chrono-pastille #chrono-duree { color: var(--blue); font-variant-numeric: tabular-nums; }
.chrono-pastille button {
  border: 0; background: none; color: var(--soft); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline;
}
.chrono-pastille button:hover { color: var(--txt); }
body.presentation .chrono-pastille { display: none; }
.notif-temps .nm-sujet { margin: 0; }
@media (prefers-reduced-motion: reduce) { .chrono-point { animation: none; } }

/* ── LA PRÉSENTATION D'UN PROJET (17/09/2026) ─────────────────
   La fenêtre où l'on relit ce que le film et le PDF vont raconter. */
.modale-pres { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; background: rgba(4, 6, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modale-pres[hidden] { display: none; }
.pres-boite {
  width: min(680px, 100%); max-height: 88vh; overflow: auto; padding: 1.4rem 1.5rem 1.2rem;
  border-radius: 16px; border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.pres-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.pres-tete h2 { margin: 0; font-size: 1.15rem; }
.pres-fermer { margin-left: auto; border: 0; background: none; color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer; }
.pres-fermer:hover { color: var(--txt); }
.pres-etat { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px; font-size: 13px; line-height: 1.5;
  color: var(--soft); background: var(--panel-2); border-left: 3px solid var(--border); }
.pres-etat.cours { border-left-color: var(--blue); color: var(--txt); }
.pres-etat.prete { border-left-color: #16A34A; color: var(--txt); }
.pres-etat.ratee { border-left-color: #D97706; color: var(--txt); }
.pres-manque { margin: 0 0 .9rem; font-size: 12.5px; color: #D97706; }
.pres-form { display: flex; flex-direction: column; gap: .85rem; }
.pres-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.pres-form .champ { display: flex; flex-direction: column; gap: .3rem; }
.pres-form .champ > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pres-form input, .pres-form textarea {
  width: 100%; padding: .5rem .7rem; border-radius: 9px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border); background: var(--noir); color: var(--txt); resize: vertical;
}
.pres-form input:focus, .pres-form textarea:focus { outline: none; border-color: var(--blue); }
.pres-bloc { border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.pres-bloc legend { padding: 0 .4rem; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pres-atout { display: grid; grid-template-columns: 7rem 1fr; gap: .45rem; }
.pres-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .3rem; }
.pres-espace { flex: 1; }
.pres-actions .btn-plein[disabled] { opacity: .55; cursor: default; }
#fiche-presentation.pres-tourne { border-color: var(--blue); color: var(--blue); }
@media (max-width: 620px) { .pres-duo { grid-template-columns: 1fr; } }

/* ── LE BROUILLON PRÉPARÉ (17/09/2026) ───────────────────────
   Margaux écrit la réponse, Gmail la garde en brouillon, et la ligne du mail
   le dit. Rien n'est jamais envoyé par le Studio. */
.mail-puce-brouillon {
  padding: .1rem .45rem; border-radius: 999px; font-size: 10.5px; letter-spacing: .04em;
  border: 1px solid var(--blue); color: var(--blue);
}
.mail-brouillon { border-color: var(--blue) !important; color: var(--blue) !important; }

/* La fenêtre de préparation n'a rien à faire devant un client (17/09/2026) */
body.presentation #fiche-presentation { display: none; }
.vs-actions .vs-presentation[disabled] { opacity: .55; cursor: default; }

/* ── LE NIVEAU D'UN ÉVÉNEMENT (17/09/2026) ───────────────────
   Geffry : « rajoute des statuts urgent, important, normal, faible sur
   l'agenda ». Un liseré à gauche dit le niveau d'un coup d'œil ; « normal »
   ne crie pas, « faible » s'efface un peu. */
:root {
  --prio-urgent: #e5484d;
  --prio-important: #f5a524;
  --prio-normal: var(--blue);
  --prio-faible: var(--mute);
}
.carte-rdv.prio-urgent,
.jour-ligne.prio-urgent { border-left: 4px solid var(--prio-urgent); }
.carte-rdv.prio-important,
.jour-ligne.prio-important { border-left: 4px solid var(--prio-important); }
.carte-rdv.prio-normal,
.jour-ligne.prio-normal { border-left: 4px solid var(--prio-normal); }
.carte-rdv.prio-faible,
.jour-ligne.prio-faible { border-left: 4px solid var(--prio-faible); opacity: .82; }

/* dans la grille du jour, une pastille colorée devant l'heure */
.js-rdv::before {
  content: ''; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 999px; margin-right: .35rem; vertical-align: middle;
  background: var(--prio-normal);
}
.js-rdv.prio-urgent::before { background: var(--prio-urgent); }
.js-rdv.prio-important::before { background: var(--prio-important); }
.js-rdv.prio-faible::before { background: var(--prio-faible); }

/* ── AGENDA : le filtre par atelier, et les sorties Conodor (18/09/2026) ──
   Geffry : « filtrer Geff-Ways / Conodor / To The Top, et mettre les sorties
   et les entraînements sur l'agenda ». */
.agenda-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.agenda-filtre {
  padding: .32rem .8rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); background: transparent; color: var(--soft);
}
.agenda-filtre:hover { color: var(--txt); border-color: var(--blue); }
.agenda-filtre.ici { background: var(--txt); border-color: var(--txt); color: var(--noir); }
/* une sortie porte l'accent turquoise de Conodor et un petit repère à gauche */
.agenda-evt.est-sortie { border-left: 3px solid #2BD9D2; }
.suite-item.est-sortie { border-left: 3px solid #2BD9D2; }
.js-rdv.est-sortie::before { background: #2BD9D2; }
.js-rdv.est-sortie { border-left: 2px solid #2BD9D2; }

/* ── BIGGUYS : le « Claude classique » (18/09/2026) ──────────
   Même panneau que Margaux, un accent distinct (violet), et une saisie
   sobre. Les demandes qu'il dépose s'affichent en carte. */
/* le panneau réutilise la mise en page de Margaux (.agent), avec un accent violet */
#bigguys { display: flex; flex-direction: column; }
#bigguys .agent-tete h2 { font-family: var(--serif); }
#ouvrir-bigguys { border-color: rgba(124,92,255,.5); }
#bigguys.bg-survol { outline: 2px dashed #7c5cff; outline-offset: -6px; }
/* la saisie : figée par ID pour qu'aucune règle héritée ne la fasse flotter */
#bigguys-form {
  position: static; flex: 0 0 auto; display: flex; align-items: flex-end; gap: .5rem;
  padding: .8rem 1rem 1rem; border-top: 1px solid var(--border); background: var(--panel);
}
#bigguys-champ {
  flex: 1 1 auto; width: 100%; resize: none; max-height: 160px; min-height: 40px;
  padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--noir); color: var(--txt); font: inherit; font-size: 13.5px; line-height: 1.5;
}
#bigguys-champ:focus { outline: none; border-color: #7c5cff; }
#bigguys-joindre {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; font-size: 16px;
}
#bigguys-joindre:hover { border-color: #7c5cff; }
#bigguys-envoyer {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: #7c5cff; color: #fff; font-size: 18px; line-height: 1; border: 0;
}
#bigguys-envoyer:disabled { opacity: .5; cursor: default; }
.bg-jointes { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 1rem 0; }
.bg-jointe { position: relative; }
.bg-jointe img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.bg-jointe button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 999px;
  border: 0; background: #000; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.bg-bulle-images { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.bg-bulle-images img { max-width: 120px; max-height: 120px; border-radius: 8px; display: block; }
.bg-demande {
  align-self: stretch; display: flex; flex-direction: column; gap: .25rem;
  padding: .7rem .85rem; border-radius: 10px; border: 1px solid rgba(124,92,255,.5);
  background: rgba(124,92,255,.08);
}
.bg-demande-mot { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7c5cff; }
.bg-demande b { font-size: 13.5px; }
.bg-demande .micro { color: var(--soft); }

/* l'encart clé de BigGuys, et son survol de dépôt d'image */
.bg-cle { display: flex; flex-direction: column; gap: .4rem; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid rgba(124,92,255,.5); background: rgba(124,92,255,.08); }
.bg-cle-ligne { display: flex; gap: .4rem; }
.bg-cle-ligne input { flex: 1; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--noir); color: var(--txt); font: inherit; font-size: 12.5px; }
.bg-cle-ligne input:focus { outline: none; border-color: #7c5cff; }
.bg-cle-souci { color: #FF8B7B; }

/* ── LE POP-UP D'UN MEMBRE À UN AUTRE (18/09/2026) ───────────── */
.popup-fond {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(4,6,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: popupArrive .2s ease both;
}
.popup-fond.part { opacity: 0; transition: opacity .2s; }
@keyframes popupArrive { from { opacity: 0; } }
.popup-boite {
  width: min(420px, 100%); padding: 1.6rem 1.5rem 1.3rem; border-radius: 16px; text-align: center;
  border: 1px solid var(--blue); background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: popupMonte .25s var(--ease, ease) both;
}
@keyframes popupMonte { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.popup-texte { margin: 0 0 1.2rem; font-size: 16px; line-height: 1.5; color: var(--txt); white-space: pre-wrap; }
.popup-ok { min-width: 8rem; }

/* ── LA BARRE À SEPT ONGLETS (19/09/2026) ─────────────────────────
   Mesuré de 1024 à 1920 px sur une copie témoin : l'ancien code rognait
   DÉJÀ les onglets de To The Top et de Conodor sous 1600 px (575 px
   d'onglets dans 472 à 1440). Avec « Le matériel » et « Le bilan », on
   reprend la place là où elle ne coûte rien, dans cet ordre :
   — des onglets plus serrés (la majuscule espacée prenait un tiers) ;
   — « Ouvrir… » devient une icône (même bouton, même menu) ;
   — Margaux et BigGuys serrent leurs lettres ;
   Et s'il en manque encore, la pastille le DIT : un fondu à droite, et la
   molette la fait défiler (direct.js). */
/* (seulement au-dessus de 900 px : le téléphone a déjà ses propres réglages,
   mesurés à part — les toucher y repoussait « Sortir » hors de l'écran) */
@media (max-width: 1760px) and (min-width: 901px) {
  .sections button { padding: .45rem .62rem; letter-spacing: .07em; }
}
/* Actualiser devient une icône dès que la barre se resserre — au
   téléphone compris : c'est là qu'on n'a pas de touche F5. */
@media (max-width: 1500px) {
  #actualiser { width: 34px; height: 30px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
  #actualiser::before {
    content: ''; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A6 6 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A6 6 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 1500px) and (min-width: 901px) {
  #ouvrir-agent, #ouvrir-bigguys { padding-left: .6rem; padding-right: .6rem; letter-spacing: .08em; }
  .sections button { padding: .45rem .55rem; letter-spacing: .05em; }
}
/* Conodor a les libellés les plus longs (« Communication », « Le matériel ») :
   il prend le réglage serré plus tôt, et un cran de plus sous 1400 px. */
@media (max-width: 1660px) and (min-width: 901px) {
  body.espace-conodor #actualiser { width: 34px; height: 30px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
  body.espace-conodor #actualiser::before {
    content: ''; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A6 6 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A6 6 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.espace-conodor #ouvrir-agent, body.espace-conodor #ouvrir-bigguys { padding-left: .6rem; padding-right: .6rem; letter-spacing: .08em; }
  body.espace-conodor .sections button { padding: .45rem .55rem; letter-spacing: .05em; }
}
@media (max-width: 1400px) and (min-width: 901px) {
  body.espace-conodor .sections button { padding: .45rem .42rem; letter-spacing: .02em; }
  body.espace-conodor .barre-fin { gap: .4rem; }
}
/* le reste de la pastille existe : on le montre au lieu de le couper net */
.sections.deborde { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
                            mask: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.sections.deborde.au-bout { -webkit-mask: linear-gradient(90deg, transparent, #000 34px);
                                    mask: linear-gradient(90deg, transparent, #000 34px); }

/* ── un classeur joint à BigGuys (20/09/2026) ────────────────
   Une capture se montre ; un tableur, non : on affiche son nom, son
   format et son poids, comme une pièce jointe de messagerie. */
.bg-jointe-fichier { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: auto; height: auto; padding: .4rem .55rem; max-width: 190px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.bg-jointe-fichier b { font-size: 12px; color: var(--txt); max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bg-jointe-fichier i { font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--mute); }
.bg-jointe-fichier button { position: absolute; top: -6px; right: -6px; }

/* ── Les droits (27/09/2026) ─────────────────────────────────────
   Un compte apporteur consulte un projet sans le modifier : on retire de la
   fiche tout ce qui écrit. Le serveur le refuserait de toute façon. */
#fiche.lecture-seule #fiche-editer,
#fiche.lecture-seule #fiche-local,
#fiche.lecture-seule #fiche-ouvrir,
#fiche.lecture-seule #fiche-temps,
#fiche.lecture-seule #fiche-ajout-rdv,
#fiche.lecture-seule #fiche-recap-enr,
#fiche.lecture-seule #fiche-bloc-mails,
#fiche.lecture-seule #fiche-bloc-accueil,
#fiche.lecture-seule .bloc:has(#fiche-retouches) { display: none !important; }
#fiche.lecture-seule #fiche-recap-texte { pointer-events: none; opacity: .75; }

/* le choix de l'apporteur dans le formulaire de projet (admins) */
#f-acces .f-acces-titre { margin: .9rem 0 .35rem; }
#f-acces .f-acces-liste { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
#f-acces .f-acces-choix { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem;
  text-transform: none; letter-spacing: normal; font-weight: 400; color: inherit; cursor: pointer; }
#f-acces .f-acces-choix input { width: auto; margin: 0; }
/* le lecteur de musique lit un dossier du PC : aux admins (27/09/2026) */
body.compte-limite #platine { display: none !important; }