/* Atelier Too Be Web — style commun (repris de la maquette validée le 17/10/2026, 03_maquettes/Main.dc.html).
   Clair façon Apple, aucun fond noir, jaune Too Be Web en touches.
   TOUTES les tailles de texte et graisses passent par les variables ci-dessous (un seul endroit à changer).
   Les tailles sont en rem : elles suivent la « taille du texte » choisie par chaque utilisateur. */

:root {
  /* Couleurs */
  --texte: #1D1D1F;
  --texte-doux: #6E6E73; /* gris minimum autorisé (contraste 5,1:1 sur blanc, 4,7:1 sur #F5F5F7) */
  --fond: #FFFFFF;
  --fond-lateral: #F5F5F7;
  --fond-leger: #FAFAFC;
  --survol: #F0F0F2;
  --survol-fort: #E8E8ED;
  --bordure: rgba(0, 0, 0, .08);
  --bordure-legere: rgba(0, 0, 0, .06);
  --separateur: rgba(0, 0, 0, .05);
  --accent: #FDC629;
  --accent-survol: #F5BB12;
  --focus: #0071E3;
  --erreur-fond: rgba(255, 59, 48, .1);
  --erreur-texte: #A1271F;
  --a-connecter: #FF9F0A;
  --ombre-carte: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
  --ombre-flottante: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .12);

  /* Tailles de texte (16 px = 1 rem à la taille « Normale ») */
  --t-xs: .6875rem;   /* 11 px */
  --t-s: .75rem;      /* 12 px */
  --t-m: .8125rem;    /* 13 px */
  --t-l: .875rem;     /* 14 px */
  --t-xl: .9375rem;   /* 15 px */
  --t-titre-groupe: 1.0625rem; /* 17 px */
  --t-titre-section: 1.5rem;   /* 24 px */
  --t-titre-page: 1.875rem;    /* 30 px */

  /* Graisses (réglage « Normale » par défaut) */
  --g-texte: 400;
  --g-libelle: 500;
  --g-titre: 600;
  --g-petit: 400; /* petits textes gris : jamais en dessous de 400 */

  --police: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', sans-serif;
}

/* Taille du texte choisie par l'utilisateur (Petite, Normale, Grande, Très grande) */
html[data-taille="90"] { font-size: 90%; }
html[data-taille="100"] { font-size: 100%; }
html[data-taille="112"] { font-size: 112%; }
html[data-taille="125"] { font-size: 125%; }

/* Graisse choisie par l'utilisateur (Fine, Normale, Appuyée). Titres : 600 au plus. */
html[data-graisse="300"] { --g-texte: 300; --g-libelle: 400; --g-titre: 500; --g-petit: 400; }
html[data-graisse="400"] { --g-texte: 400; --g-libelle: 500; --g-titre: 600; --g-petit: 400; }
html[data-graisse="500"] { --g-texte: 500; --g-libelle: 600; --g-titre: 600; --g-petit: 500; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-l);
  font-weight: var(--g-texte);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
a { color: var(--texte); }
a:hover { color: #000000; }
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

svg.icone { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Marque TBW ---------- */
.marque { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 1.875rem; height: 1.875rem; border-radius: 8px; flex: none;
  background: var(--accent); color: var(--texte);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--t-xs); letter-spacing: -.02em;
}
.marque-texte { display: flex; flex-direction: column; }
.marque-nom { font-weight: var(--g-titre); font-size: var(--t-l); letter-spacing: -.01em; }
.marque-sous { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); }

/* ---------- Boutons ---------- */
.bouton-principal {
  border: 0; border-radius: 99px; padding: 8px 16px;
  background: var(--accent); color: var(--texte);
  font-size: var(--t-m); font-weight: var(--g-titre);
}
.bouton-principal:hover { background: var(--accent-survol); }
.bouton-principal:disabled { opacity: .6; cursor: progress; }
.bouton-discret {
  border: 0; border-radius: 99px; padding: 8px 15px;
  background: var(--survol); font-size: var(--t-m); font-weight: var(--g-libelle);
}
.bouton-discret:hover { background: var(--survol-fort); }
.bouton-discret[aria-expanded="true"] { background: var(--survol-fort); }
.bouton-icone {
  border: 0; background: transparent; color: var(--texte-doux); border-radius: 8px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-size: var(--t-l);
}
.bouton-icone:hover { background: var(--survol); color: var(--texte); }
.bouton-lien {
  border: 0; background: transparent; padding: 0; color: var(--focus);
  font-size: inherit; font-weight: var(--g-libelle); text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: var(--t-m); font-weight: var(--g-libelle); }
.champ input, .champ select {
  border: 1px solid transparent; background: var(--fond-lateral);
  border-radius: 9px; padding: 10px 12px; font-size: var(--t-xl); width: 100%;
}
.champ input:hover, .champ select:hover { background: var(--survol); }

/* Saisie « en place » (titres, noms, cellules) */
.saisie {
  border: 0; background: transparent; border-radius: 7px; padding: 6px 8px;
  width: 100%; min-width: 0;
}
.saisie:hover:not(:read-only) { background: var(--fond-lateral); }
.saisie:read-only { cursor: default; }

/* ---------- Page de connexion ---------- */
.page-connexion {
  min-height: 100vh; background: var(--fond-lateral);
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.carte-connexion {
  width: 100%; max-width: 380px; background: var(--fond);
  border-radius: 16px; padding: 28px 28px 30px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; gap: 22px;
}
.carte-connexion h1 { margin: 0; font-size: var(--t-titre-section); font-weight: var(--g-titre); letter-spacing: -.02em; }
.formulaire-connexion { display: flex; flex-direction: column; gap: 16px; }
.formulaire-connexion .bouton-principal { margin-top: 4px; padding: 11px 18px; font-size: var(--t-l); }
.message-erreur {
  margin: 0; padding: 10px 12px; border-radius: 9px; font-size: var(--t-m);
  background: var(--erreur-fond); color: var(--erreur-texte);
}
/* Deuxième étape (double authentification, 1e-4) */
.aide-connexion { margin: 0; font-size: var(--t-m); color: var(--texte-doux); }
#code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; }
.liens-connexion { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.liens-connexion .bouton-lien { min-height: 44px; }

/* ---------- Mise en page de l'application ---------- */
.mise-en-page { min-height: 100vh; display: flex; flex-wrap: wrap; }

.barre-laterale {
  flex: 1 1 232px; max-width: 100%; background: var(--fond-lateral);
  border-right: 1px solid var(--bordure-legere); padding: 22px 12px;
  display: flex; flex-direction: column; gap: 22px;
}
.barre-laterale .marque { padding: 0 8px; }
.marque .marque-texte { flex: 1 1 auto; min-width: 0; }
.bouton-repli, .bouton-recherche-rail, .initiales-tableau { display: none; }
.icone-tableau { display: inline-flex; }

/* ---------- Largeurs d'écran ----------
   Ordinateur (≥ 1200 px) : barre latérale complète, fixe.
   Tablette (768–1199 px) : idem, repliable en colonne d'icônes (bouton « Replier », choix mémorisé).
   Téléphone (< 768 px)  : barre latérale en tiroir (bouton ☰), tâches en cartes. */

/* Ordinateur et tablette : la barre latérale reste visible pendant qu'on fait défiler le tableau
   (l'avatar, donc Apparence et Se déconnecter, toujours à portée de main). */
@media (min-width: 768px) {
  .barre-laterale { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: 0 0 232px; }
  /* Bande grise + bordure peintes sur toute la hauteur de la page, même très longue. */
  .mise-en-page {
    background: linear-gradient(to right, var(--fond-lateral) 231px, var(--bordure-legere) 231px, var(--bordure-legere) 232px, transparent 232px), var(--fond);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .bouton-repli { display: inline-flex; }
  /* Colonne d'icônes */
  .barre-repliee .barre-laterale { flex: 0 0 68px; width: 68px; padding: 16px 10px; align-items: center; gap: 18px; }
  .mise-en-page.barre-repliee {
    background: linear-gradient(to right, var(--fond-lateral) 67px, var(--bordure-legere) 67px, var(--bordure-legere) 68px, transparent 68px), var(--fond);
  }
  .barre-repliee .barre-laterale .marque { flex-direction: column; padding: 0; gap: 12px; }
  .barre-repliee .marque-texte,
  .barre-repliee .barre-laterale .recherche,
  .barre-repliee .rubrique-titre,
  .barre-repliee [data-rubrique="connexions"],
  .barre-repliee .lien-nav .externe,
  .barre-repliee .icone-tableau,
  .barre-repliee .pastille-tableau,
  .barre-repliee .bouton-utilisateur .nom,
  .barre-repliee .bouton-utilisateur > svg { display: none; }
  .barre-repliee .bouton-recherche-rail { display: inline-flex; }
  .barre-repliee .initiales-tableau { display: inline-flex; }
  .barre-repliee .rubrique { align-items: center; width: 100%; }
  .barre-repliee .rubrique.fermee .rubrique-contenu { display: flex; }
  .barre-repliee .rubrique-contenu { align-items: center; }
  .barre-repliee .lien-nav { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  /* Le nom reste lisible par les lecteurs d'écran (et en info-bulle) */
  .barre-repliee .lien-nav .libelle {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .barre-repliee .bouton-repli svg { transform: scaleX(-1); }
  .barre-repliee .bouton-utilisateur { justify-content: center; padding: 6px 0; width: 44px; }
}

/* ---------- Téléphone : barre du haut, tiroir, voile ---------- */
.barre-haut { display: none; }
.voile { position: fixed; inset: 0; z-index: 35; background: rgba(29, 29, 31, .32); }
@media (max-width: 767px) {
  .barre-haut {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    padding: 6px 12px; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--bordure-legere);
  }
  .titre-barre-haut {
    flex: 1 1 auto; min-width: 0; font-size: var(--t-xl); font-weight: var(--g-titre);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mise-en-page { display: block; }
  .barre-laterale {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(320px, 86vw); max-width: none;
    overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .tiroir-ouvert .barre-laterale { transform: none; visibility: visible; transition: transform .22s ease; }
  body.tiroir-ouvert { overflow: hidden; }
  .contenu { padding: 20px 16px 40px; }
  .titre-page { font-size: var(--t-titre-section); }
}
@media (prefers-reduced-motion: reduce) {
  .barre-laterale, .tiroir-ouvert .barre-laterale { transition: none; }
}
.recherche {
  display: flex; align-items: center; gap: 8px; background: var(--survol-fort);
  border-radius: 9px; padding: 0 10px; margin: 0 4px; color: var(--texte-doux);
}
.recherche input { border: 0; background: transparent; padding: 8px 0; font-size: var(--t-m); width: 100%; color: var(--texte); }
.recherche input:focus-visible { outline: none; }
.recherche:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.rubrique { display: flex; flex-direction: column; gap: 2px; }
.rubrique-titre { margin: 0; font-size: var(--t-xs); font-weight: var(--g-titre); color: var(--texte-doux); padding: 0 0 2px; }
.rubrique-contenu { display: flex; flex-direction: column; gap: 2px; }
.rubrique.fermee .rubrique-contenu { display: none; }
/* Titre de section = bouton de l'accordéon */
.rubrique-bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; background: transparent; border-radius: 8px; padding: 4px 10px;
  font-size: var(--t-xs); font-weight: var(--g-titre); color: var(--texte-doux); text-align: left;
}
.rubrique-bouton:hover { background: rgba(0, 0, 0, .04); color: var(--texte); }
.rubrique-bouton svg { transition: transform .15s ease; }
.rubrique-bouton[aria-expanded="false"] svg { transform: rotate(-90deg); }
.initiales-tableau {
  width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center;
  background: var(--survol-fort); font-size: var(--t-xs); font-weight: var(--g-titre);
}
.lien-nav[aria-current="page"] .initiales-tableau { background: var(--accent); }
.lien-nav {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  font-size: var(--t-m); text-decoration: none; color: var(--texte);
  border: 0; background: transparent; width: 100%; text-align: left;
}
.lien-nav:hover { background: rgba(0, 0, 0, .04); color: var(--texte); }
.lien-nav[aria-current="page"] { background: rgba(0, 0, 0, .07); font-weight: var(--g-libelle); }
.lien-nav .libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-nav.secondaire { color: var(--texte-doux); }
.lien-nav .externe { color: var(--texte-doux); font-size: var(--t-s); }
.lien-nav.inactif { color: var(--texte-doux); cursor: default; }
.lien-nav.inactif:hover { background: transparent; }
.nouveau-tableau { display: flex; gap: 6px; padding: 2px 4px; }
.nouveau-tableau input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--bordure); background: var(--fond);
  border-radius: 8px; padding: 6px 8px; font-size: var(--t-m);
}

.connexion-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: var(--t-m); }
.connexion-ligne .point { width: 7px; height: 7px; border-radius: 99px; background: var(--a-connecter); flex: none; }
.connexion-ligne .nom { flex: 1 1 auto; min-width: 0; }
.connexion-ligne .etat { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); white-space: nowrap; }

.utilisateur { margin-top: auto; position: relative; }
.bouton-utilisateur {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px;
  border: 0; background: transparent; border-radius: 10px; text-align: left;
}
.bouton-utilisateur:hover, .bouton-utilisateur[aria-expanded="true"] { background: rgba(0, 0, 0, .05); }
.bouton-utilisateur .nom { flex: 1 1 auto; font-size: var(--t-m); font-weight: var(--g-libelle); }
.avatar {
  --couleur: #C7C7CC;
  width: 1.625rem; height: 1.625rem; border-radius: 99px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: var(--g-titre); color: var(--texte);
  background: var(--teinte, var(--survol-fort));
}
.avatar.vide { background: var(--survol-fort); color: var(--texte-doux); }

.contenu { flex: 999 1 560px; min-width: 0; padding: 30px 40px 56px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- En-tête du tableau ---------- */
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.entete-titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.entete-titre label, .surtitre { font-size: var(--t-m); color: var(--texte-doux); font-weight: var(--g-petit); }
.titre-page {
  font-weight: var(--g-titre); font-size: var(--t-titre-page); letter-spacing: -.025em;
  padding: 2px 6px; margin-left: -6px; max-width: 100%; width: 22.5rem;
}
h1.titre-page { margin: 0; padding: 0; margin-left: 0; width: auto; }
.resume { font-size: var(--t-m); color: var(--texte-doux); font-weight: var(--g-petit); }
.entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.onglets { display: flex; background: var(--survol); border-radius: 9px; padding: 2px; }
.onglets button {
  border: 0; padding: 6px 14px; border-radius: 7px; font-size: var(--t-m); font-weight: var(--g-libelle);
  background: transparent; color: var(--texte);
}
.onglets button[aria-selected="true"], .onglets button[aria-pressed="true"] { background: var(--fond); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* Témoin « En direct » (sous le titre du tableau) */
.temoin-direct { display: inline-flex; align-items: center; gap: 6px; }
.temoin-direct::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #C7C7CC; flex: none; }
.temoin-direct[data-etat="ok"]::before { background: #34C759; }
.temoin-direct[data-etat="coupe"]::before, .temoin-direct[data-etat="attente"]::before { background: var(--a-connecter); }
.temoin-direct[data-etat="attente"] { color: var(--texte); }

/* ---------- Vue Kanban (d'après la maquette) ---------- */
.kanban { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.choix-colonne-kanban { display: flex; align-items: center; gap: 10px; font-size: var(--t-m); color: var(--texte-doux); }
.choix-colonne-kanban select { border: 1px solid var(--bordure); border-radius: 8px; padding: 6px 8px; background: var(--fond); color: var(--texte); }
/* Les colonnes défilent DANS leur zone, jamais la page entière */
.kanban-colonnes { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
/* Fondu sur le bord quand il reste des colonnes de ce côté */
.kanban-colonnes.ombre-droite {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.kanban-colonnes.ombre-gauche {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}
.kanban-colonnes.ombre-gauche.ombre-droite {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.colonne-kanban {
  --couleur: #C7C7CC;
  flex: 1 1 0; min-width: 13rem; background: var(--fond-lateral); border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.colonne-kanban-entete { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.colonne-kanban-entete .point-couleur { width: 8px; height: 8px; }
.colonne-kanban-entete h2 { flex: 1 1 auto; margin: 0; font-size: var(--t-m); font-weight: var(--g-titre); }
.cartes-kanban { display: flex; flex-direction: column; gap: 10px; min-height: 3rem; }
.cartes-kanban:empty::before {
  content: "Aucune tâche"; display: block; padding: 14px 8px; text-align: center;
  font-size: var(--t-s); color: var(--texte-doux); border: 1px dashed rgba(0, 0, 0, .12); border-radius: 12px;
}
.carte-kanban {
  background: var(--fond); border-radius: 12px; padding: 8px 8px 10px 6px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .04);
}
.carte-kanban.ligne-choisie, .carte-kanban.ligne-fantome { background: var(--fond-leger); }
.carte-kanban-haut { display: flex; align-items: flex-start; gap: 2px; padding-left: 8px; }
.carte-kanban-bas { display: flex; align-items: center; gap: 2px; }
/* Titre : 3 lignes au plus dans une carte (plus étroite qu'une ligne de table), « … » au-delà, titre complet au survol.
   Pas de marge intérieure en bas : elle laisserait apparaître le haut de la ligne suivante (marge extérieure à la place). */
.carte-kanban-titre {
  flex: 1 1 auto; min-width: 0; padding: 6px 2px 0; margin-bottom: 6px; font-size: var(--t-l); font-weight: var(--g-libelle); line-height: 1.35;
  overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.carte-kanban-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 8px; font-size: var(--t-s); color: var(--texte-doux); }
.carte-kanban-groupe { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.carte-kanban-groupe .point-couleur { width: 6px; height: 6px; }
.carte-kanban-date { color: var(--texte); }
.carte-kanban .avatar { margin-left: auto; }
.carte-kanban-bas .pastille { margin-left: 2px; }
.carte-kanban-bas:not(:has(.poignee)) .pastille { margin-left: 8px; }
/* Tablette : colonnes plus larges (les titres gardent le nom du client), on fait défiler s'il le faut */
@media (min-width: 768px) and (max-width: 1199px) {
  .colonne-kanban { min-width: 15.5rem; }
}

/* Téléphone : une colonne ≈ la largeur de l'écran, on passe à la suivante d'un glissement du doigt */
@media (max-width: 767px) {
  .kanban-colonnes { scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; }
  .colonne-kanban { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; }
}
.onglets button[aria-disabled="true"] { color: var(--texte-doux); cursor: not-allowed; }

/* ---------- Panneaux (statuts, nouvelle colonne) ---------- */
.panneau {
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .06); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.panneau-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.panneau h2 { margin: 0; font-size: var(--t-xl); font-weight: var(--g-titre); letter-spacing: -.01em; }
.panneau .aide { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); }
.liste-statuts { display: flex; flex-direction: column; }
.ligne-statut { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--separateur); flex-wrap: wrap; }
.ligne-statut .saisie { flex: 1 1 10rem; font-size: var(--t-l); }
.choix-couleur {
  width: 28px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 99px; flex: none;
}
.choix-couleur::-webkit-color-swatch-wrapper { padding: 0; }
.choix-couleur::-webkit-color-swatch { border: 0; border-radius: 99px; }
.choix-couleur::-moz-color-swatch { border: 0; border-radius: 99px; }
.confirmation {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--fond-lateral); border-radius: 10px; padding: 10px 12px; font-size: var(--t-m);
}
.confirmation select { border: 1px solid var(--bordure); border-radius: 8px; padding: 6px 8px; background: var(--fond); }
.ajouter-ligne {
  border: 0; background: transparent; padding: 12px 16px; font-size: var(--t-m); color: var(--texte-doux);
  text-align: left; width: 100%; display: flex; align-items: center; gap: 8px; font-weight: var(--g-texte);
}
.ajouter-ligne:hover { color: var(--texte); background: var(--fond-leger); }
.panneau .ajouter-ligne { padding: 6px 0; }
.formulaire-colonne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.formulaire-colonne .champ { flex: 1 1 12rem; }

/* ---------- Pastilles (statuts, « à connecter ») ---------- */
.pastille {
  --couleur: #C7C7CC;
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px;
  padding: 0 8px 0 11px; border-radius: 99px; max-width: 100%;
  background: var(--teinte, var(--fond-lateral));
  font-size: var(--t-m); font-weight: var(--g-libelle); white-space: nowrap;
}
.pastille .point, .point-couleur {
  width: 7px; height: 7px; border-radius: 99px; background: var(--couleur); flex: none;
}
.pastille select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font-size: var(--t-m); font-weight: var(--g-libelle); color: var(--texte);
  cursor: pointer; padding: 0 16px 0 0; max-width: 100%; min-width: 0;
}
.pastille select:disabled { cursor: default; padding-right: 0; }
.pastille .chevron { position: absolute; right: 9px; color: var(--texte-doux); font-size: 9px; pointer-events: none; }
.pastille.apercu { height: 26px; font-size: var(--t-s); padding: 0 10px; }
.pastille.a-connecter { height: 26px; padding: 0 10px; font-size: var(--t-s); color: var(--texte-doux); background: var(--fond-lateral); }
.pastille.a-connecter .point { background: #C7C7CC; }

/* ---------- Groupes et table ---------- */
.groupes { display: flex; flex-direction: column; gap: 30px; }
.groupe { display: flex; flex-direction: column; gap: 8px; }
.groupe-entete { display: flex; align-items: center; gap: 6px; }
.groupe-entete .point-couleur { width: 9px; height: 9px; }
.nom-groupe { font-weight: var(--g-titre); font-size: var(--t-titre-groupe); letter-spacing: -.01em; width: 26rem; max-width: 100%; }
h2.nom-groupe { margin: 0; padding: 6px 8px; width: auto; }
/* Nom de groupe modifiable : passe à la ligne si la place manque (tablette), jamais coupé */
textarea.nom-groupe { flex: 0 1 26rem; min-width: 8rem; padding: 6px 8px; line-height: 1.25; }
.compte { font-size: var(--t-m); color: var(--texte-doux); white-space: nowrap; font-weight: var(--g-petit); }
.replier svg { transition: transform .15s ease; }
.replier[aria-expanded="false"] svg { transform: rotate(-90deg); }

.carte-table { background: var(--fond); border: 1px solid rgba(0, 0, 0, .07); border-radius: 14px; overflow: hidden; }
/* La table défile DANS sa carte ; « position: relative » garde aussi les éléments masqués (libellés pour
   lecteurs d'écran, champs de date) à l'intérieur, sinon ils feraient déborder toute la page. */
.defilement { overflow-x: auto; position: relative; }
.table { min-width: var(--largeur-min, 0); position: relative; }
.ligne { display: grid; grid-template-columns: var(--grille); align-items: stretch; font-size: var(--t-l); }
.ligne > .cellule { border-bottom: 1px solid var(--separateur); display: flex; align-items: center; padding: 8px 10px; min-width: 0; }
.ligne-entete > .cellule { border-bottom: 1px solid var(--bordure-legere); padding: 4px 4px; font-size: var(--t-s); font-weight: var(--g-libelle); color: var(--texte-doux); gap: 0; }
.ligne-entete > .cellule > .saisie { padding: 6px 4px; }
.ligne-entete > .cellule:first-child { padding: 10px 16px; }
.ligne-entete .saisie { font-size: var(--t-s); font-weight: var(--g-libelle); color: var(--texte-doux); }
.ligne-entete .nom-colonne { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Colonne « Tâche » collée à gauche et colonne « ⋯ » collée à droite : toujours visibles quand
   la table défile (tablette, texte agrandi). Une ombre légère montre qu'il y a d'autres colonnes. */
.ligne > .cellule:first-child, .ligne > .cellule:last-child { position: sticky; z-index: 1; background: var(--fond); }
.ligne > .cellule:first-child { left: 0; }
.ligne > .cellule:last-child { right: 0; }
.ligne > .cellule:first-child, .ligne > .cellule:last-child { transition: box-shadow .15s ease; }
.defilement.ombre-gauche .ligne > .cellule:first-child { box-shadow: 8px 0 10px -8px rgba(0, 0, 0, .22); }
.defilement.ombre-droite .ligne > .cellule:last-child { box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .22); }
.ligne.ligne-choisie > .cellule, .ligne.ligne-fantome > .cellule { background: var(--fond-lateral); }
.cellule-titre { gap: 4px; }
/* Titre de tâche (vue Table) : 2 lignes au plus, « … » au-delà ; en entier pendant la modification */
.titre-cellule { position: relative; flex: 1 1 auto; min-width: 0; align-self: center; }
/* Champ et aperçu : exactement la même police, sinon ils ne passent pas à la ligne au même endroit */
.titre-cellule textarea.saisie, .titre-apercu { font-size: var(--t-m); line-height: 1.35; font-weight: var(--g-texte); }
.titre-cellule textarea.saisie { max-height: calc(2 * 1.35em + 20px); }
.titre-cellule:focus-within textarea.saisie { max-height: none; }
.titre-apercu {
  /* Le masquage s'arrête au bord de la marge intérieure : avec une marge du bas, le haut de la 3e ligne
     s'y afficherait. On met donc un BORD de la couleur du fond à la place (il recouvre ce qui dépasse). */
  position: absolute; top: 0; left: 0; right: 0; min-height: 100%; padding: 10px 8px 0; border-bottom: 10px solid var(--fond);
  border-radius: 7px; pointer-events: none; background: var(--fond); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.titre-cellule:hover .titre-apercu { background: var(--fond-lateral); border-bottom-color: var(--fond-lateral); }
.titre-cellule:focus-within .titre-apercu { display: none; }
.cellule-titre .saisie { font-size: var(--t-l); }
.cellule-actions { justify-content: center; padding: 0 !important; }
.poignee {
  border: 0; background: transparent; color: #AEAEB2; border-radius: 6px; width: 22px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: grab; touch-action: none;
}
.poignee:hover { color: var(--texte-doux); background: var(--survol); }
.ligne-fantome { opacity: .4; background: var(--fond-lateral); }
.ligne-choisie { background: var(--fond-leger); }
.lignes:empty::before {
  content: "Aucune tâche dans ce groupe."; display: block; padding: 12px 16px;
  font-size: var(--t-m); color: var(--texte-doux);
}
.masquee { display: none !important; }

/* Cellules selon le type */
.cellule .saisie { font-size: var(--t-m); }
.personne { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; max-width: 100%; min-width: 0; }
.personne select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-size: var(--t-m);
  font-weight: var(--g-texte); padding: 0 16px 0 0; cursor: pointer; min-width: 0; max-width: 100%;
}
.personne select:disabled { cursor: default; }
.personne .chevron { position: absolute; right: 1px; color: var(--texte-doux); font-size: 9px; pointer-events: none; }
.cellule-date { position: relative; width: 100%; }
.bouton-utilisateur > svg { color: var(--texte-doux); }
.bouton-date {
  border: 0; background: transparent; border-radius: 7px; padding: 6px 8px; font-size: var(--t-m);
  text-align: left; width: 100%; color: var(--texte);
}
.bouton-date:hover:not(:disabled) { background: var(--fond-lateral); }
.bouton-date.vide { color: #AEAEB2; }

/* ---------- Menus flottants et panneau Apparence ---------- */
.menu {
  position: fixed; z-index: 50; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); background: var(--fond);
  border-radius: 14px; padding: 6px; box-shadow: var(--ombre-flottante);
  display: flex; flex-direction: column;
}
.menu button {
  border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 9px;
  font-size: var(--t-l); display: flex; align-items: center; gap: 10px;
}
.menu button:hover, .menu button:focus-visible { background: var(--fond-lateral); outline: none; }
.menu .separateur { height: 1px; background: var(--separateur); margin: 4px 6px; }
.menu .titre-menu { font-size: var(--t-xs); font-weight: var(--g-titre); color: var(--texte-doux); padding: 8px 12px 4px; }
.menu .danger { color: var(--erreur-texte); }
.palette { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.palette button { width: 26px; height: 26px; border-radius: 99px; padding: 0; background: var(--couleur); border: 2px solid transparent; }
.palette button[aria-pressed="true"] { border-color: var(--texte); }

.apparence { width: min(320px, calc(100vw - 16px)); padding: 16px; gap: 14px; }
.apparence h2 { margin: 0; font-size: var(--t-xl); font-weight: var(--g-titre); }
.apparence fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.apparence legend { font-size: var(--t-m); font-weight: var(--g-libelle); padding: 0; margin-bottom: 8px; }
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--survol); border-radius: 10px; padding: 3px; gap: 2px; }
.segments label {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 7px 4px; border-radius: 8px; font-size: var(--t-s); cursor: pointer; min-height: 32px;
}
.segments input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segments label:has(input:checked) { background: var(--fond); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-weight: var(--g-libelle); }
.segments label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.apparence .apercu-texte { font-size: var(--t-m); color: var(--texte-doux); margin: 0; font-weight: var(--g-petit); }

/* ---------- Archives ---------- */
.liste-archives { background: var(--fond); border: 1px solid rgba(0, 0, 0, .07); border-radius: 14px; overflow: hidden; }
.archive {
  /* Largeurs identiques pour toutes les lignes (chaque ligne est sa propre grille) */
  display: grid; grid-template-columns: 5.5rem minmax(8rem, 2fr) minmax(7rem, 1.5fr) 9.5rem 8rem;
  gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--separateur); font-size: var(--t-m);
}
.archive:last-child { border-bottom: 0; }
.archive.entete-archives { font-size: var(--t-s); font-weight: var(--g-libelle); color: var(--texte-doux); background: var(--fond-leger); }
.archive .type { font-size: var(--t-s); color: var(--texte-doux); }
.archive .nom { font-weight: var(--g-libelle); overflow-wrap: anywhere; }
.archive .contexte, .archive .quand { color: var(--texte-doux); font-weight: var(--g-petit); overflow-wrap: anywhere; }
.archive .quand span { display: block; }
.archive .bouton-discret { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Restaurer / Supprimer définitivement (propriétaire seul, 1e-3) : l'un sous l'autre, alignés à droite ;
   colonne d'actions plus large seulement quand la page contient des boutons de suppression */
.actions-archive { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.liste-archives.avec-suppression .archive { grid-template-columns: 5.5rem minmax(8rem, 2fr) minmax(7rem, 1.5fr) 9.5rem 12.5rem; }
.archive .bouton-supprimer { color: var(--erreur-texte); }
.archive .bouton-supprimer:hover { background: #FFF1F0; }
/* Fenêtre de suppression définitive */
.dialogue-suppression { width: min(480px, calc(100vw - 32px)); }
.dialogue .avertissement-irreversible {
  margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: #FFF1F0; color: var(--erreur-texte); font-size: var(--t-m);
}
.dialogue .liste-efface { margin: 0 0 4px; padding-left: 20px; font-size: var(--t-m); color: var(--texte); }
.dialogue .nom-a-retaper { font-size: var(--t-m); color: var(--texte); font-weight: var(--g-libelle); overflow-wrap: anywhere; user-select: all; }
.bouton-danger:disabled { background: #E8A3AA; cursor: not-allowed; }
.vide-message { padding: 24px 16px; color: var(--texte-doux); font-size: var(--t-m); margin: 0; }

/* ---------- Annonces (« Annuler », erreurs) ---------- */
.annonces { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.annonce {
  display: flex; align-items: center; gap: 14px; background: var(--fond); color: var(--texte);
  border-radius: 12px; padding: 10px 12px 10px 16px; box-shadow: var(--ombre-flottante); font-size: var(--t-l);
}
.annonce.erreur { background: #FFF1F0; color: var(--erreur-texte); }
.annonce .bouton-principal { padding: 6px 14px; }

/* ---------- Tablette et écrans tactiles : cibles plus grandes ---------- */
/* ---------- Cartes de tâches (téléphone) ---------- */
.corps-cartes { display: flex; flex-direction: column; gap: 10px; }
.cartes { display: flex; flex-direction: column; gap: 10px; }
.carte-tache {
  background: var(--fond); border: 1px solid rgba(0, 0, 0, .07); border-radius: 14px;
  padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px;
}
.carte-haut { display: flex; align-items: flex-start; gap: 2px; }
.carte-haut .saisie { flex: 1 1 auto; font-size: var(--t-l); font-weight: var(--g-libelle); }
/* Titre sur plusieurs lignes : le champ grandit avec le texte */
textarea.saisie { display: block; resize: none; overflow: hidden; line-height: 1.35; font-family: inherit; padding: 10px 8px; }
@media (max-width: 767px) {
  /* Nom de groupe : passe à la ligne plutôt que d'être coupé (sélecteur plus précis que la règle de base) */
  .groupe-bascule .nom-groupe-texte { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
.carte-champs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 6px; }
.carte-champs .cellule-date { width: auto; }
.autres-champs {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--texte-doux); font-size: var(--t-m); padding: 6px; border-radius: 8px;
}
.autres-champs:hover { background: var(--fond-lateral); color: var(--texte); }
.autres-champs svg { transition: transform .15s ease; }
.autres-champs[aria-expanded="false"] svg { transform: rotate(-90deg); }
.carte-details { margin: 0; padding: 0 6px; display: flex; flex-direction: column; gap: 6px; }
.carte-detail { display: grid; grid-template-columns: minmax(6rem, 35%) 1fr; align-items: center; gap: 8px; }
.carte-detail dt { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); }
.carte-detail dd { margin: 0; min-width: 0; }
.cartes:empty::before {
  content: "Aucune tâche dans ce groupe."; display: block; padding: 12px 16px;
  font-size: var(--t-m); color: var(--texte-doux);
}
.carte-tache.ligne-choisie, .carte-tache.ligne-fantome { background: var(--fond-lateral); }
/* En-tête de groupe (téléphone) : tout l'en-tête replie / déplie le groupe */
.groupe-bascule {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent;
  border-radius: 10px; padding: 6px 8px; text-align: left; color: var(--texte);
}
.groupe-bascule:hover { background: var(--fond-lateral); }
.groupe-bascule svg { flex: none; color: var(--texte-doux); transition: transform .15s ease; }
.groupe-bascule[aria-expanded="false"] svg { transform: rotate(-90deg); }
.groupe-titres { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nom-groupe-texte {
  min-width: 0; font-weight: var(--g-titre); font-size: var(--t-titre-groupe); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Fenêtre de confirmation (dans l'appli, jamais celle du navigateur) ---------- */
.dialogue {
  border: 0; border-radius: 16px; padding: 22px 22px 18px; width: min(420px, calc(100vw - 32px));
  box-shadow: var(--ombre-flottante); color: var(--texte); background: var(--fond);
}
.dialogue::backdrop { background: rgba(29, 29, 31, .32); }
.dialogue h2 { margin: 0 0 8px; font-size: var(--t-xl); font-weight: var(--g-titre); }
.dialogue p { margin: 0 0 6px; font-size: var(--t-l); color: var(--texte-doux); }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* Rouge foncé : contraste 5,2:1 avec le texte blanc */
.bouton-danger {
  border: 0; border-radius: 99px; padding: 8px 16px; background: #D70015; color: #FFFFFF;
  font-size: var(--t-m); font-weight: var(--g-titre);
}
.bouton-danger:hover { background: #B80012; }

/* ---------- Fenêtre « Envoyer par e-mail » (1d-2) ---------- */
.dialogue-email { width: min(480px, calc(100vw - 32px)); }
.formulaire-email, .formulaire-fenetre { display: flex; flex-direction: column; gap: 6px; }
.formulaire-email h2, .formulaire-fenetre h2 { margin-bottom: 0; }
.dialogue .dialogue-sous-titre { margin: 0 0 6px; color: var(--texte-doux); font-size: var(--t-m); overflow-wrap: anywhere; }
.formulaire-email label, .formulaire-fenetre label { margin-top: 8px; font-size: var(--t-m); font-weight: var(--g-titre); }
.formulaire-fenetre input[type="text"],
.formulaire-email select, .formulaire-fenetre select {
  border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 12px; background: var(--fond);
  width: 100%; min-height: 44px; font-size: var(--t-l); color: var(--texte);
}
.formulaire-email .aide, .formulaire-fenetre .aide { margin: 0; font-size: var(--t-s); color: var(--texte-doux); }
.formulaire-fenetre .case-a-cocher {
  display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--g-texte);
}
.formulaire-fenetre .case-a-cocher input { width: 20px; height: 20px; margin: 0; accent-color: #0071E3; }
#email-compteur { align-self: flex-end; }
.dialogue .dialogue-erreur { margin: 4px 0 0; color: #D70015; font-size: var(--t-m); }
.dialogue-erreur:empty { display: none; }
.bouton-envoi-email, .formulaire-email .bouton-principal { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Lien « Fiche › » (vue Table, cartes téléphone) ---------- */
.ouvrir-fiche {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 5px 6px 5px 9px; border-radius: 99px;
  background: var(--fond-lateral); color: var(--texte-doux); font-size: var(--t-s); text-decoration: none;
}
.ouvrir-fiche:hover { background: var(--survol-fort); color: var(--texte); }
.carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte-pied .ouvrir-fiche { margin-left: auto; }
a.carte-kanban-titre { color: var(--texte); text-decoration: none; }
a.carte-kanban-titre:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Fiche tâche (d'après 03_maquettes/Projet.dc.html) ---------- */
.contenu[data-vue="fiche"] { background: var(--fond-lateral); }
.fiche-entete .entete-titre { flex: 1 1 26rem; }
.retour { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-m); color: var(--texte-doux); text-decoration: none; align-self: flex-start; }
.retour:hover { color: var(--texte); }
.fiche-entete textarea.titre-page { width: 100%; padding: 2px 6px; line-height: 1.2; }
.fiche-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fiche-corps { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.fiche-blocs { flex: 999 1 34rem; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fiche-vide {
  border: 1.5px dashed #C7C7CC; border-radius: 16px; padding: 40px; text-align: center;
  color: var(--texte-doux); font-size: var(--t-l); margin: 0;
}
.fiche-proprietes { flex: 1 1 17rem; min-width: 0; gap: 12px; }
.propriete { display: flex; flex-direction: column; gap: 4px; }
.propriete-libelle { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); }
.propriete-valeur { min-width: 0; }
.choix-groupe { border: 1px solid var(--bordure); border-radius: 9px; padding: 8px 10px; background: var(--fond); width: 100%; }
@media (min-width: 1200px) {
  .fiche-proprietes { position: sticky; top: 16px; }
}
@media (max-width: 1199px) {
  /* Tablette et téléphone : une colonne, les Propriétés juste sous l'en-tête */
  .fiche-proprietes { order: -1; flex-basis: 100%; }
}

.bloc {
  background: var(--fond); border-radius: 16px; box-shadow: var(--ombre-carte);
  padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.bloc-entete { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bloc-titres { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.bloc-type { font-size: var(--t-s); color: var(--texte-doux); padding-left: 2px; font-weight: var(--g-petit); }
.bloc-titre { font-weight: var(--g-titre); font-size: var(--t-titre-groupe); letter-spacing: -.01em; padding: 2px 6px; margin-left: -6px; }
h2.bloc-titre { margin: 0 0 0 -6px; }
.badge-client {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  background: rgba(253, 198, 41, .3); color: #5A4300; font-size: var(--t-s); font-weight: var(--g-libelle); white-space: nowrap;
}
.badge-client::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--accent); }
.bloc-note_client { box-shadow: var(--ombre-carte), inset 3px 0 0 var(--accent); }
.zone-texte {
  border: 0; background: var(--fond-lateral); border-radius: 10px; padding: 10px 12px; width: 100%;
  font-size: var(--t-l); line-height: 1.45; resize: vertical; min-height: 3rem;
}
.zone-texte:read-only { resize: none; }
.bloc-pied { display: flex; justify-content: flex-end; min-height: 1.2em; }
.sauvegarde, .progression, .qui-quand { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-petit); }
.bloc-a-connecter p { margin: 0 0 10px; background: var(--fond-lateral); border-radius: 12px; padding: 14px 16px; font-size: var(--t-m); color: #3A3A3C; }
.boutons-a-connecter { display: flex; flex-wrap: wrap; gap: 8px; }
.boutons-a-connecter button:disabled { opacity: .55; }

.liste-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.element-checklist, .champ-libre {
  display: flex; align-items: center; gap: 4px; padding: 2px 0; border-top: 1px solid var(--separateur); flex-wrap: wrap;
}
.element-checklist .libelle-ligne { flex: 1 1 10rem; min-width: 0; }
.element-checklist.fait .libelle-ligne { color: var(--texte-doux); text-decoration: line-through; }
.zone-case { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; flex: none; }
.case { width: 18px; height: 18px; margin: 0; accent-color: #34C759; cursor: pointer; }
.champ-libre .libelle-ligne { flex: 0 1 12rem; min-width: 6rem; color: var(--texte-doux); }
.champ-libre .valeur-champ { flex: 1 1 10rem; }
.formulaire-ajout { display: flex; gap: 8px; padding-top: 8px; }
.champ-ajout { flex: 1 1 auto; min-width: 0; border: 1px solid var(--bordure); border-radius: 9px; padding: 8px 10px; background: var(--fond); }

.commentaires { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.commentaire { display: flex; gap: 10px; align-items: flex-start; }
.commentaire-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.commentaire-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--t-m); }
.commentaire-entete strong { font-weight: var(--g-libelle); }
.commentaire-texte { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; font-size: var(--t-l); }
.commentaire-actions { display: flex; gap: 14px; font-size: var(--t-s); }
.formulaire-commentaire { display: flex; gap: 8px; align-items: flex-end; padding-top: 6px; flex-wrap: wrap; }
.formulaire-commentaire .zone-texte { flex: 1 1 16rem; }
.contenu-commentaires { display: flex; flex-direction: column; gap: 12px; }
.contenu-commentaires .aide { margin: 0; font-size: var(--t-m); color: var(--texte-doux); }

.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historique li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--separateur);
  font-size: var(--t-m); overflow-wrap: break-word;
}
.historique li:first-child { border-top: 0; }
.historique strong { font-weight: var(--g-libelle); }
.contenu-historique { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.contenu-historique .historique { align-self: stretch; }
/* Titres de blocs et libellés de lignes : passent à la ligne au lieu d'être coupés */
textarea.bloc-titre { padding: 2px 6px; line-height: 1.25; }
textarea.libelle-ligne { padding: 8px; }

.menu .element-catalogue { flex-direction: column; align-items: flex-start; gap: 1px; }
.menu .element-catalogue:disabled { opacity: .5; cursor: default; }
.catalogue-nom { font-weight: var(--g-libelle); font-size: var(--t-l); }
.catalogue-description { font-size: var(--t-s); color: var(--texte-doux); }

@media (max-width: 767px) {
  .bloc { padding: 14px 14px 16px; }
  .historique li { grid-template-columns: 1fr; gap: 2px; }
  /* En-tête de bloc : titre et boutons ↑ ↓ ✕ sur la même ligne ; le badge « Visible par le client » dessous */
  /* Titre sur toute la largeur restante (jamais coupé au milieu d'un mot) ; ↑ ↓ ✕ sur la ligne suivante, à droite */
  .bloc-titres { flex: 1 1 calc(100% - 52px); }
  .badge-client { order: 3; }
  .bloc-actions { order: 4; flex-basis: 100%; justify-content: flex-end; margin-top: -4px; }
  .bloc-entete { row-gap: 6px; }
  /* Checklist : poignée, case, libellé, ✕ sur une ligne ; « qui · quand » dessous */
  .element-checklist .libelle-ligne { flex: 1 1 0; }
  .element-checklist .qui-quand { order: 5; flex-basis: 100%; padding-left: 92px; }
  /* Champs libres : nom et ✕ sur une ligne, valeur dessous sur toute la largeur */
  .champ-libre { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .champ-libre .libelle-ligne { grid-column: 2; grid-row: 1; min-width: 0; }
  .champ-libre .poignee { grid-column: 1; grid-row: 1; }
  .champ-libre .bouton-icone { grid-column: 3; grid-row: 1; }
  .champ-libre .valeur-champ { grid-column: 2 / 4; grid-row: 2; }
}

/* ---------- Écrans tactiles : toute zone à toucher fait au moins 44 × 44 px ---------- */
@media (pointer: coarse) {
  .bouton-icone { width: 44px; height: 44px; }
  .poignee { width: 44px; height: 44px; }
  .lien-nav, .rubrique-bouton, .bouton-utilisateur, .menu button, .autres-champs, .groupe-bascule,
  .bouton-discret, .bouton-principal, .onglets button, .ajouter-ligne, .bouton-date, .segments label { min-height: 44px; }
  .lien-nav { padding: 0 10px; }
  .menu button { padding: 0 14px; }
  .pastille { height: 44px; }
  .personne { height: 44px; }
  .personne select, .pastille select { min-height: 44px; min-width: 44px; }
  .saisie { min-height: 44px; }
  .bouton-discret, .bouton-principal { padding: 0 16px; }
  .onglets button { padding: 0 16px; }
  .recherche input { min-height: 44px; padding: 0; }
  .choix-couleur { width: 44px; height: 44px; }
  .palette button { width: 44px; height: 44px; }
  .nouveau-tableau input { min-height: 44px; }
  .confirmation select, .choix-colonne-kanban select { min-height: 44px; }
  .champ input, .champ select { min-height: 44px; }
  .autres-champs { padding: 0 8px; }
  .ouvrir-fiche, .retour, .bouton-lien, .zone-case, .champ-ajout, .choix-groupe, a.carte-kanban-titre, .bouton-danger { min-height: 44px; }
  .zone-case { width: 44px; }
  .ouvrir-fiche { min-width: 44px; justify-content: center; }
  .bouton-lien { padding: 0 6px; }
}

/* ---------- Téléphone : Archives en liste ---------- */
@media (max-width: 767px) {
  .archive { grid-template-columns: 1fr auto; row-gap: 2px; }
  .archive > :nth-child(-n+4) { grid-column: 1; }
  .archive > :last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .entete-archives { display: none !important; }
}
/* Page du propriétaire (boutons de suppression) : même présentation en liste jusqu'à 1199 px (tablette comprise),
   sinon la colonne d'actions élargie ne tient pas à côté de la barre latérale */
@media (max-width: 1199px) {
  .liste-archives.avec-suppression .archive { grid-template-columns: 1fr auto; row-gap: 2px; }
  .liste-archives.avec-suppression .archive > :nth-child(-n+4) { grid-column: 1; }
  .liste-archives.avec-suppression .archive > :last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .liste-archives.avec-suppression .entete-archives { display: none !important; }
  /* Avec « Supprimer définitivement » : les deux boutons passent sous les informations */
  .liste-archives.avec-suppression .archive > .actions-archive:has(.bouton-supprimer) {
    grid-column: 1 / -1; grid-row: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 6px;
  }
}

/* ---------- Étape 1d-3 : modèles de projet et disposition des blocs ---------- */
/* Sous chaque groupe : « Ajouter une tâche » à gauche + « Depuis un modèle… » à droite (demande de Jo, 18/10) :
   chaque bouton a la largeur de son texte, 44 px de haut ; l'espace entre les deux n'est pas cliquable */
.ajouts-tache { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 6px; }
.ajouts-tache .ajouter-ligne { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 12px; border-radius: 10px; }
/* Téléphone : s'il passe à la ligne, « Depuis un modèle… » reste à droite */
.ajouts-tache .ajouter-modele { margin-left: auto; }
/* Poignée ⠿ d'un bloc de la fiche */
.poignee-bloc { margin-left: -10px; }
.bloc-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bloc-actions:empty { display: none; }
/* Menu : élément à cocher (interrupteur) */
.menu .coche { display: inline-block; width: 1em; text-align: center; font-weight: var(--g-titre); color: #0071E3; }
/* En-tête de la fiche : disposition figée / « Ma disposition » */
.indicateur-disposition { display: inline-flex; align-items: center; gap: 4px; }
.indicateur-disposition .icone { width: 14px; height: 14px; }
/* Page Modèles */
.aide-modeles {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--fond-lateral);
  font-size: var(--t-m); color: var(--texte-doux); max-width: 70rem;
}
.liste-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 16px; }
.carte-modele {
  background: var(--fond); border-radius: 16px; box-shadow: var(--ombre-carte);
  padding: 18px 22px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.carte-modele-haut { display: flex; align-items: flex-start; gap: 8px; }
.carte-modele-nom { flex: 1; margin: 0; font-size: var(--t-titre-groupe); font-weight: var(--g-titre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.badge-cadenas {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px;
  background: var(--fond-lateral); color: var(--texte); font-size: var(--t-s); font-weight: var(--g-libelle); white-space: nowrap;
}
.badge-cadenas .icone { width: 14px; height: 14px; }
.carte-modele-description { margin: 0; font-size: var(--t-m); color: var(--texte); }
.carte-modele-titre { margin: 0; font-size: var(--t-m); overflow-wrap: anywhere; }
.libelle-discret { color: var(--texte-doux); }
.resume-blocs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.resume-blocs li { padding: 4px 10px; border-radius: 99px; background: var(--fond-lateral); font-size: var(--t-s); }
.contenu-modele summary { cursor: pointer; font-size: var(--t-m); font-weight: var(--g-libelle); color: #0071E3; padding: 6px 0; }
.contenu-modele-bloc h3 { margin: 12px 0 4px; font-size: var(--t-m); font-weight: var(--g-titre); }
.contenu-modele-bloc ol, .contenu-modele-bloc ul { margin: 0; padding-left: 1.4em; font-size: var(--t-m); }
.contenu-modele-bloc li { margin: 2px 0; }
.contenu-modele-texte { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFF9E6; font-size: var(--t-m); }
.carte-modele-pied { margin: 4px 0 0; font-size: var(--t-s); color: var(--texte-doux); }
@media (pointer: coarse) {
  .contenu-modele summary { min-height: 44px; display: flex; align-items: center; }
  /* Titre de bloc (44 px de haut au doigt) : texte centré, à la hauteur de la poignée ⠿ */
  textarea.bloc-titre { padding-top: 9px; padding-bottom: 9px; }
}

/* ---------- Étape 1e-1 : Réglages (Mon compte, Utilisateurs, Droits) ---------- */
.liste-reglages { display: flex; flex-direction: column; gap: 16px; max-width: 56rem; }
.carte-reglage {
  background: var(--fond); border-radius: 16px; box-shadow: var(--ombre-carte);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.carte-reglage h2 { margin: 0; font-size: var(--t-titre-groupe); font-weight: var(--g-titre); letter-spacing: -.01em; }
.carte-reglage h3 { margin: 14px 0 0; font-size: var(--t-l); font-weight: var(--g-titre); }
.entete-reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.entete-reglage .bouton-principal { display: inline-flex; align-items: center; gap: 4px; }
.aide-reglage { margin: 0; font-size: var(--t-m); color: var(--texte-doux); }
/* Boutons à leur taille (pas étirés sur toute la largeur de la carte) */
.carte-reglage > button { align-self: flex-start; }
.compte-ligne, .compte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compte-texte { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; }
.compte-email { font-size: var(--t-s); color: var(--texte-doux); overflow-wrap: anywhere; }
.badges-compte { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge-compte {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
  background: var(--fond-lateral); font-size: var(--t-s); font-weight: var(--g-libelle); white-space: nowrap;
}
.badge-proprietaire { background: rgba(253, 198, 41, .3); color: #5A4300; }
.badge-inactif { background: #FFE5E7; color: #A1000F; }
.liste-comptes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste-comptes .compte { padding: 10px 0; border-top: 1px solid var(--separateur); }
.liste-comptes .compte.inactif .compte-texte { opacity: .6; }
.formulaire-reglage { display: flex; flex-direction: column; gap: 6px; max-width: 26rem; }
.formulaire-reglage label { margin-top: 6px; font-size: var(--t-m); font-weight: var(--g-libelle); }
.formulaire-reglage input, .formulaire-fenetre input[type="email"] {
  border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 12px; background: var(--fond);
  width: 100%; min-height: 44px; font-size: var(--t-l); color: var(--texte);
}
.actions-reglage { display: flex; gap: 8px; margin-top: 6px; }
/* Mot de passe provisoire : grand, lisible, à dicter */
.mot-de-passe-provisoire {
  display: block; margin: 8px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--fond-lateral);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.35rem; letter-spacing: .08em; text-align: center;
  overflow-wrap: anywhere; user-select: all;
}
.dialogue-provisoire, .dialogue-droits { width: min(520px, calc(100vw - 32px)); }
.liste-droits { display: flex; flex-direction: column; max-height: min(60vh, 32rem); overflow-y: auto; margin-top: 6px; }
.ligne-droit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--separateur);
}
.libelle-droit { flex: 1 1 14rem; font-size: var(--t-m); }
.formulaire-fenetre .ligne-droit label { margin-top: 0; font-weight: var(--g-texte); }
.formulaire-fenetre .ligne-droit select {
  border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px; background: var(--fond);
  min-height: 44px; font-size: var(--t-m); color: var(--texte); width: auto; flex: 0 0 auto; min-width: 11rem;
}
/* Écran « Choisis ton mot de passe » : rien d'autre à l'écran */
.ecran-mot-de-passe .barre-laterale, .ecran-mot-de-passe .barre-haut { display: none; }
.ecran-mot-de-passe .contenu { display: flex; justify-content: center; padding-top: 8vh; }
.carte-mot-de-passe { width: min(30rem, 100%); }
.carte-mot-de-passe h1 { margin: 6px 0 0; font-size: var(--t-xl); }
.carte-mot-de-passe .bouton-lien { align-self: flex-start; min-height: 44px; }

/* ---------- Étape 1e-4 : double authentification ---------- */
.dialogue-double-auth { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.etapes-double-auth { display: flex; flex-direction: column; gap: 8px; }
.etapes-double-auth .formulaire-reglage { max-width: none; }
.etape-titre { margin: 8px 0 0; font-size: var(--t-l); font-weight: var(--g-titre); color: var(--texte); }
/* Clé et codes : grands, lisibles, sélectionnables d'un coup */
.cle-totp {
  display: block; padding: 12px 14px; border-radius: 12px; background: var(--fond-lateral);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; letter-spacing: .06em; text-align: center;
  overflow-wrap: anywhere; user-select: all;
}
.codes-secours {
  margin: 4px 0; padding: 12px 14px 12px 36px; border-radius: 12px; background: var(--fond-lateral);
  /* 2 colonnes si la place le permet, sinon 1 ; un code n'est jamais coupé en deux lignes */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 6px 24px; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; user-select: all;
}
.champ-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; }
.etapes-double-auth .case-a-cocher, .carte-reglage .case-a-cocher {
  display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-m);
}
.etapes-double-auth .case-a-cocher input { width: 20px; height: 20px; margin: 0; accent-color: #0071E3; }
.actions-double-auth { flex-wrap: wrap; }

/* ---------- Étape 1e-2 : e-mails automatiques, Outils, Historique complet ---------- */
.case-reglage { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-top: 10px; font-size: var(--t-m); }
.case-reglage input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #0071E3; }
.lien-bouton { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--texte); }
.icone-lien { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--fond-lateral); }
.filtres-historique {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; padding: 14px 16px;
  background: var(--fond); border-radius: 14px; box-shadow: var(--ombre-carte);
}
.filtre { display: flex; flex-direction: column; gap: 4px; min-width: 9rem; }
.filtre label { font-size: var(--t-s); color: var(--texte-doux); font-weight: var(--g-libelle); }
.filtre select, .filtre input {
  border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px; background: var(--fond);
  min-height: 44px; font-size: var(--t-m); color: var(--texte);
}
.filtre-actions { flex-direction: row; align-items: center; gap: 8px; }
.liste-historique { list-style: none; margin: 0 0 12px; padding: 0; background: var(--fond); border-radius: 14px; box-shadow: var(--ombre-carte); }
.ligne-historique {
  display: grid; grid-template-columns: 13rem 1fr minmax(0, 16rem); gap: 12px; align-items: baseline;
  padding: 10px 16px; border-top: 1px solid var(--separateur); font-size: var(--t-m);
}
.ligne-historique:first-child { border-top: 0; }
.ligne-historique time { color: var(--texte-doux); font-size: var(--t-s); }
.historique-phrase { overflow-wrap: anywhere; }
.historique-ou { font-size: var(--t-s); color: #0071E3; overflow-wrap: anywhere; }
span.historique-ou { color: var(--texte-doux); }
@media (max-width: 899px) {
  .ligne-historique { grid-template-columns: 1fr; gap: 2px; }
}
/* Téléphone : filtres sur deux colonnes, même largeur pour tous ; boutons sur toute la ligne */
@media (max-width: 767px) {
  .filtres-historique { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .filtre { min-width: 0; }
  .filtre select, .filtre input { width: 100%; min-width: 0; }
  .filtre-actions { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  a.historique-ou { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Couleurs légères (18/10, variante B choisie par Jo) : liseré + en-têtes teintés ≈ 6 % ---------- */
/* Nom du groupe : couleur du groupe assombrie (45 % couleur / 55 % #1D1D1F) → contraste ≥ 5,3:1 sur blanc pour les
   8 couleurs de la palette, et au moins 4,5:1 sur l'en-tête teinté. */
.groupe { border-left: 4px solid var(--couleur-groupe, transparent); padding-left: 12px; border-radius: 2px; }
.groupe :is(.nom-groupe, .nom-groupe-texte) { color: color-mix(in srgb, var(--couleur-groupe, #1D1D1F) 45%, #1D1D1F); }
.groupe-entete { background: color-mix(in srgb, var(--couleur-groupe, transparent) 6%, var(--fond)); border-radius: 10px; padding: 4px 8px; }
.colonne-kanban { border-top: 3px solid var(--couleur, transparent); }
.colonne-kanban-entete { background: color-mix(in srgb, var(--couleur, transparent) 6%, var(--fond)); border-radius: 8px; padding: 6px 8px; }
.fiche-entete { border-top: 3px solid var(--couleur-groupe, transparent); padding-top: 12px; }

/* Couleur par tableau (migration 009) : pastille dans la barre latérale, fin trait sous le titre du tableau ouvert. */
.pastille-tableau { width: 10px; height: 10px; border-radius: 99px; background: var(--couleur, #FDC629); flex: none; margin: 0 3px; }
.trait-tableau { display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--couleur-tableau, #FDC629); margin: 2px 0 6px; }