/*
 * Feuille de style unique de Tessalys.
 * - Marque : deux couleurs dominantes réglables par locataire (--marque, --accent), injectées par la page ;
 *   leurs variantes lisibles (--*-sur : texte posé dessus, --*-texte : couleur utilisable comme texte sur blanc) sont calculées.
 * - Neutres : uniquement des gris.
 * - Sens : rouge, vert, bleu, orange fixes, jamais réglables (retard, validé, hors périmètre, avertissement).
 * - Police : Lato, embarquée (licence SIL OFL), pas de service tiers.
 */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-latin-700-normal.woff2') format('woff2'); }

:root {
    /* Valeurs par défaut, remplacées par le thème du locataire */
    --marque: #1c1c1c; --marque-sur: #ffffff; --marque-texte: #1c1c1c;
    --accent: #9c8a6a; --accent-sur: #1c1c1c; --accent-texte: #6f6143;

    /* Neutres */
    --gris-900: #1c1c1c; --gris-700: #4a4a4a; --gris-600: #6b6b6b; --gris-300: #cfcfcf; --gris-200: #e4e4e4; --gris-100: #f0f0f0; --gris-50: #f7f7f7; --blanc: #ffffff;

    /* Couleurs de sens (fixes) : fond clair + texte foncé */
    --rouge: #a3392b; --rouge-fond: #f6dcd7;
    --vert: #2e7d32; --vert-fond: #dcefdc;
    --bleu: #1f5fa8; --bleu-fond: #dbe8f6;
    --orange: #9a5b00; --orange-fond: #fbe9cc;

    /* Couleurs de la ligne de progression */
    --vert-ligne: #7fc08a; --rouge-ligne: #e5605b; --bleu-ligne: #5b9bd5; --gris-ligne: #e9e9e9;

    --fond-page: #dfdedb; --fond-carte: #f5f4f1;
    --rayon: 16px; --ombre: 0 2px 14px rgba(0, 0, 0, .06);
    --police: Lato, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { font-family: var(--police); font-size: 16px; background: var(--fond-page); color: var(--gris-900); margin: 0; }
main { max-width: 480px; margin: 6vh auto; padding: 0 20px; }
main.large { max-width: 980px; }
h1 { font-weight: 700; letter-spacing: .02em; color: var(--marque-texte); }
h2, h3 { color: var(--marque-texte); }
a { color: var(--accent-texte); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
nav.fil { margin-bottom: 14px; font-size: 15px; }
nav.fil a { text-decoration: none; }
nav.fil a:hover { text-decoration: underline; }

/* Cartes, formulaires */
.carte { background: var(--fond-carte); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
label { display: block; margin: 14px 0 6px; font-size: 15px; }
input:not([type]), input[type=email], input[type=tel], input[type=password], input[type=text], input[type=number], input[type=date], input[type=datetime-local], textarea, select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--gris-300); border-radius: 8px; font-size: 16px; font-family: inherit; background: var(--blanc); color: var(--gris-900);
}
input[type=color] { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--gris-300); border-radius: 8px; background: var(--blanc); }
.case { display: flex; gap: 8px; align-items: center; margin: 14px 0 6px; }
.case input { width: auto; }
.case label { margin: 0; }
.discret { color: var(--gris-600); font-size: 15px; }
.erreur { color: var(--rouge); margin-top: 8px; font-size: 15px; }

/* Boutons : un seul bouton principal par écran, le reste dans des menus */
button, .bouton { display: inline-block; margin-top: 18px; background: var(--accent); color: var(--accent-sur); border: 0; border-radius: 999px; padding: 11px 22px; font-size: 16px; font-family: inherit; cursor: pointer; text-decoration: none; }
button.secondaire { background: var(--blanc); color: var(--gris-900); border: 1px solid var(--gris-300); margin-left: 8px; }
button.danger { background: var(--rouge); color: #fff; }
.petit { margin: 0; padding: 4px 12px; font-size: 13px; }

/* Messages */
.succes { background: var(--vert-fond); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.alerte { background: var(--orange-fond); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }

/* Tableaux */
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.codes { font-family: ui-monospace, monospace; background: var(--gris-50); border-radius: 8px; padding: 12px 16px; line-height: 1.8; }

/* Pastilles et statuts (la couleur ne porte jamais seule le sens : le texte est toujours affiché) */
.pastille { font-size: 13px; background: var(--gris-100); border-radius: 999px; padding: 2px 10px; }
.st-a_faire, .etat-a_jour { background: var(--gris-100); }
.st-en_attente_client, .st-en_attente_validation { background: var(--bleu-fond); }
.st-validee, .st-valide, .etat-avance { background: var(--vert-fond); }
.st-demande_modif, .st-modif_client, .etat-retard { background: var(--rouge-fond); }
.st-en_pause { background: var(--orange-fond); }
.st-en_cours, .st-modifs_en_cours { background: var(--bleu-fond); }
select.selecteur { width: auto; padding: 4px 8px; border: 1px solid var(--gris-300); border-radius: 999px; font-size: 14px; cursor: pointer; }

/* Pointeur de suivi */
.pointeur { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 2px; }
.pointeur div { min-width: 190px; }
.pointeur strong { display: block; font-size: 22px; font-weight: 700; }

/* Fenêtres (pop-up) sur la même page */
dialog { border: 0; border-radius: 14px; padding: 24px; width: min(480px, 92vw); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }

/* Menu à trois points verticaux */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 999px; font-size: 22px; font-weight: 700; color: var(--gris-700); user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--gris-100); }
.menu ul { position: absolute; right: 0; top: 40px; z-index: 20; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--blanc); border: 1px solid var(--gris-200); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .15); }
.menu li a, .menu li button { display: block; width: 100%; margin: 0; padding: 9px 12px; text-align: left; background: none; border: 0; border-radius: 6px; color: var(--gris-900); font-size: 15px; text-decoration: none; cursor: pointer; }
.menu li a:hover, .menu li button:hover { background: var(--gris-100); }
.menu li.danger a, .menu li.danger button { color: var(--rouge); }
.barre { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Choix d'un espace */
ul.espaces { list-style: none; padding: 0; margin: 0; }
ul.espaces li { margin: 10px 0; }
ul.espaces button { width: 100%; text-align: left; background: var(--blanc); color: var(--gris-900); border: 1px solid var(--gris-300); border-radius: var(--rayon); padding: 14px 16px; margin: 0; }

/* Aperçu des réglages de couleur */
.apercu { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.echantillon { display: inline-block; padding: 8px 16px; border-radius: 999px; }

/* Ligne de progression du projet */
.ligne { margin: 8px 0 4px; }
.ligne svg { width: 100%; height: auto; display: block; }
.ligne .l-texte { font-family: var(--police); font-size: 13px; fill: var(--gris-900); }
.ligne .l-rouge { fill: var(--rouge); font-weight: 700; }
.ligne .l-vert { fill: var(--vert); font-weight: 700; }
.ligne figcaption { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; font-size: 14px; }
.legende { display: inline-flex; gap: 6px; align-items: center; }
.l-pastille { display: inline-block; width: 22px; height: 10px; border-radius: 5px; }
.l-pastille-vert { background: var(--vert-ligne); }
.l-pastille-rouge { background: repeating-linear-gradient(45deg, var(--rouge-ligne), var(--rouge-ligne) 3px, #f4a9a6 3px, #f4a9a6 5px); }
.l-pastille-bleu { background: radial-gradient(circle, #fff 1px, var(--bleu-ligne) 2px); background-size: 6px 6px; }
.l-pastille-gris { background: var(--gris-ligne); border: 1px solid var(--gris-300); }

/* Réordonnancement par glisser-déposer (poignée) */
.poignee { cursor: grab; color: var(--gris-500, #8a8a8a); user-select: none; padding-right: 4px; }
.poignee:active { cursor: grabbing; }
.menu li form { margin: 0; }

/* Utilitaires */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blanc); padding: 8px 14px; border-radius: 8px; }
.evitement:focus { top: 12px; }
.titre-page { font-size: 24px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-900); margin: 8px 0 18px; }

/* Gabarit de l'espace : rail de navigation à gauche, contenu à droite, barre du bas sur mobile */
body.avec-menu { display: flex; min-height: 100vh; }
.rail { position: sticky; top: 16px; align-self: flex-start; height: calc(100vh - 32px); margin: 16px 0 16px 16px; width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 9vh, 94px); padding: 22px 0; background: var(--marque); border-radius: 38px; }
.rail-logo { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--fond-carte); color: var(--marque-texte); display: grid; place-items: center; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.rail-lien, .rond { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--marque-sur); text-decoration: none; }
.rail-lien:hover { background: rgba(255, 255, 255, .14); }
.rail-lien svg { width: 26px; height: 26px; }
.rail-lien[aria-current=page] { background: var(--fond-carte); color: var(--marque); }
.rail-bas { margin-top: auto; }
.rond { color: var(--gris-900); }
.rond:hover { background: rgba(0, 0, 0, .08); }
[data-info]::after { content: attr(data-info); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--fond-carte); color: var(--gris-900); padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; }
[data-info]:hover::after, [data-info]:focus-visible::after { opacity: 1; }
.haut-page [data-info]::after { left: auto; right: 0; top: calc(100% + 6px); transform: none; }
.page { flex: 1; min-width: 0; }
.haut-page { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 20px 28px 0; }
body.avec-menu main { max-width: 1100px; margin: 0 auto; padding: 0 28px 40px; }
body.avec-menu main.large { max-width: 1280px; }
.barre-bas { display: none; }
.haut-logo { display: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-sur); place-items: center; font-weight: 700; font-size: 22px; }

@media (max-width: 899px) {
    .rail { display: none; }
    .haut-page { padding: 12px 16px 0; justify-content: flex-end; }
    .haut-logo { display: grid; margin-right: auto; }
    body.avec-menu main { padding: 20px 16px 110px; }
    .barre-bas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: end; background: var(--fond-carte); border-top: 1px solid var(--gris-200); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); }
    .barre-bas a { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--gris-700); text-decoration: none; font-size: 13px; line-height: 1.2; white-space: nowrap; }
    .barre-bas a[aria-current=page] { color: var(--gris-900); font-weight: 700; background: var(--gris-100); }
}

/* En-tête de page et cartes de projet */
.barre-titre { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.onglets { display: flex; gap: 20px; }
.onglets a { color: var(--gris-600); text-decoration: none; padding: 4px 0; }
.onglets a[aria-current=page] { color: var(--gris-900); font-weight: 700; border-bottom: 2px solid var(--accent); }
.actions-page { display: flex; gap: 10px; align-items: center; }
.actions-page .bouton, .actions-page button { margin: 0; }
.bouton.contour { background: transparent; color: var(--gris-900); border: 1px solid var(--gris-600); }
.grille-projets { display: flex; flex-direction: column; gap: 14px; }
.projet-carte h2 { margin: 0 0 4px; font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
.projet-carte h2 a { color: var(--gris-900); text-decoration: none; }
.projet-carte h2 a::after { content: ''; position: absolute; inset: 0; }
.projet-carte { position: relative; }
.projet-carte p { margin: 6px 0; }
.texte-retard { color: var(--rouge); font-weight: 700; }
.progression { height: 10px; border-radius: 5px; background: var(--gris-200); overflow: hidden; margin-top: 12px; }
.progression span { display: block; height: 100%; background: var(--vert-ligne); }

/* Page de connexion : deux volets */
body.connexion { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--fond-carte); }
.visuel { background: var(--marque); display: grid; place-items: center; background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .10), transparent 55%), radial-gradient(circle at 80% 90%, var(--accent), transparent 60%); }
.marque-nom { color: var(--marque-sur); font-size: clamp(36px, 6vw, 72px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.formulaire { display: grid; place-items: center; padding: 32px; }
.formulaire-contenu { width: min(420px, 100%); }
.marque-mobile { display: none; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.champ { position: relative; margin: 14px 0; }
.champ > svg:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gris-600); }
.champ input { padding-left: 42px; background: var(--blanc); }
.champ .oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; padding: 8px; background: none; color: var(--gris-600); border-radius: 50%; }
.champ .oeil svg { width: 18px; height: 18px; display: block; }
body.connexion button[type=submit] { text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; }
@media (max-width: 799px) {
    body.connexion { grid-template-columns: 1fr; }
    .visuel { display: none; }
    .marque-mobile { display: block; }
}

/* Menu du compte (engrenage) */
.menu.compte > summary { width: 44px; height: 44px; line-height: 0; display: grid; place-items: center; color: var(--gris-900); }
.menu.compte > summary svg { width: 24px; height: 24px; }
.barre-bas svg { width: 24px; height: 24px; }

/* Réglages : actions en bas, « rétablir » tout à droite */
.pied-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.pied-actions button { margin: 0; }

/* Page projet : présentation du prototype (en-tête, cartes de tâches à onglets) */
.entete-projet { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 8px; }
.titre-projet { margin: 0 0 6px; font-size: 24px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-900); }
.titre-projet a { color: inherit; text-decoration: none; }
.titre-projet a:hover { text-decoration: underline; }
.rendu-prevu { text-align: right; }
.rendu-prevu span { display: block; letter-spacing: .06em; font-size: 14px; }
.rendu-prevu strong { font-size: 18px; }
.actions-droite { justify-content: flex-end; margin: 14px 0; }
.actions-droite .bouton { margin: 0; }
.infos-projet { margin-bottom: 18px; }
.infos-projet p { margin: 6px 0; }
.titre-section { margin: 26px 0 12px; font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-900); }
.tache { margin-bottom: 14px; }
.tache-tete, .sous-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.tache-tete p { margin: 4px 0; }
.tache > p { margin: 8px 0; }
.tache-nom { font-size: 19px; }
.petit-texte { font-size: 13px; font-weight: 700; margin-left: 6px; }
.tache-actions { display: flex; align-items: center; gap: 6px; }
.tache-actions form { margin: 0; }
.onglets-tache { display: flex; gap: 8px; border-bottom: 1px solid var(--gris-200); margin-top: 14px; }
.onglets-tache button { margin: 0; background: none; color: var(--gris-600); border-radius: 0; padding: 10px 14px; border-bottom: 2px solid transparent; }
.onglets-tache button[aria-selected=true] { color: var(--gris-900); font-weight: 700; border-bottom-color: var(--accent); }
.sous-liste { list-style: none; margin: 0; padding: 0; }
.sous { padding: 12px 4px; border-bottom: 1px solid var(--gris-200); }
.sous:last-child { border-bottom: 0; }
@media (max-width: 899px) { .entete-projet { flex-direction: column; } .rendu-prevu { text-align: left; } }

/* Tâche dépliable : le nom sert de bouton, sans chevron */
.tache-gauche { display: flex; align-items: center; gap: 4px; min-width: 0; }
button.bascule { margin: 0; padding: 6px 4px; background: none; color: var(--gris-900); border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }
button.bascule:hover { background: var(--gris-100); }
.tache-detail { margin-top: 10px; }
.tache-detail p { margin: 6px 0; }
.sous-titre { margin: 18px 0 4px; font-size: 15px; font-weight: 700; color: var(--gris-900); }


/* Journal : ligne « Afficher » + filtre, alignés */
.journal-barre { display: flex; align-items: center; gap: 10px; }
.journal-barre button.bascule { padding: 6px 10px; font-weight: 700; }
.journal-barre select { width: auto; }
.journal table { margin-top: 14px; }
.l-date { font-family: var(--police); font-size: 12px; fill: var(--gris-600); }
.ligne text { paint-order: stroke; stroke: var(--fond-carte); stroke-width: 4px; stroke-linejoin: round; }

/* Mêmes marges intérieures partout dans un bloc : le premier et le dernier élément ne rajoutent aucun espace */
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

/* Barre d'avancement compacte (liste des projets) */
.ligne.compacte { margin: 10px 0 0; }
.ligne.compacte svg { height: 34px; }

/* Listes en tableau : en-tête grisé, lignes séparées */
.carte.liste { padding: 0; overflow: hidden; }
.carte.liste table { border-collapse: collapse; }
.carte.liste th { background: var(--gris-100); font-weight: 400; color: var(--gris-700); padding: 18px 28px; }
.carte.liste td { padding: 18px 28px; border-bottom: 0; }
.carte.liste tbody tr + tr td { border-top: 6px solid var(--gris-100); }

/* Résultat figé d'un projet clôturé */
.recap-grille { display: flex; gap: 32px; flex-wrap: wrap; margin: 12px 0; }
.recap-grille div { min-width: 140px; }
.recap-grille span { display: block; }
.recap-grille strong { font-size: 20px; }

.ligne-titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 26px 0 12px; }
.ligne-titre .titre-section { margin: 0; }
.ligne-titre .bouton { margin: 0; }

.menu.cloche > summary { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gris-900); }
.menu.cloche > summary svg { width: 24px; height: 24px; }
.point-rouge { position: absolute; top: 8px; right: 9px; width: 11px; height: 11px; border-radius: 50%; background: #d23b3b; border: 2px solid var(--fond-page); }
.liste-alertes { min-width: 320px; max-height: 60vh; overflow: auto; }
.liste-alertes li { padding: 8px 12px; }
.liste-alertes li.non-lue { font-weight: 700; }
.liste-alertes a { text-decoration: none; display: block; }
.liste-alertes .discret { font-weight: 400; font-size: 13px; }

.chrono-bouton { width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--gris-300); background: var(--blanc); color: var(--gris-900); font-size: 12px; line-height: 1; cursor: pointer; }
.chrono-bouton:hover { background: var(--gris-100); }
.chrono-bouton.actif { background: #d23b3b; border-color: #d23b3b; color: #fff; }
.chrono-chip { position: fixed; top: 20px; right: 84px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 14px; background: var(--gris-900); color: #fff; border-radius: 999px; font-size: 14px; }
.chrono-chip a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; max-width: 320px; }
.chrono-chip .chrono-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.chrono-chip .chrono-temps { font-variant-numeric: tabular-nums; font-weight: 700; }
.chrono-chip button { width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 50%; border: 0; background: #d23b3b; color: #fff; font-size: 11px; cursor: pointer; }
.chrono-point { width: 9px; height: 9px; border-radius: 50%; background: #d23b3b; animation: clignote 1.4s infinite; }
@keyframes clignote { 50% { opacity: .25; } }
@media (max-width: 899px) { .chrono-chip { top: 58px; right: 10px; } }
dialog.large { width: min(900px, 94vw); }
.ligne-temps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ligne-temps input { width: auto; }

.detail-grille { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 10px 24px; margin: 10px 0 4px; font-size: 14px; }
.detail-grille span { white-space: normal; }
@media (max-width: 899px) { .detail-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tâches internes */
.barre-internes { margin-top: 0; margin-bottom: 32px; }
.astuce-mobile { display: none; }
.barre-internes .onglets { display: flex; gap: 20px; }
.icone-bouton { width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--gris-300); background: transparent; color: var(--gris-900); display: grid; place-items: center; cursor: pointer; }
.icone-bouton:hover { background: var(--gris-100); }
.groupe { margin-bottom: 26px; }
.groupe-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 400; color: var(--gris-900); }
.point-cat { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tache-interne { background: var(--fond-carte); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ombre); margin-bottom: 10px; }
.tache-interne.glissee { opacity: .45; }
.ti-tete { display: flex; align-items: flex-start; gap: 10px; }
.ti-coche { margin: 3px 0 0; }
.ti-coche input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.ti-titre { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border: 0; color: var(--gris-900); text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ti-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--gris-600); }
.ti-meta:empty { display: none; }
.alerte-charge { color: #b4452f; font-weight: 700; }
.ti-detail { margin: 8px 0 0 28px; }
.ti-detail p { margin: 4px 0; }
.ti-details { white-space: pre-wrap; }
.ti-sous { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 8px 10px; border-left: 2px solid var(--gris-200); margin-top: 8px; }
.ti-sous-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tache-interne.faite > .ti-tete .ti-titre strong, .ti-sous.faite strong { text-decoration: line-through; }
.tache-interne.faite, .ti-sous.faite { opacity: .55; }
.tableau-internes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.colonne { background: rgba(0, 0, 0, .04); border-radius: 18px; padding: 14px; min-height: 120px; }
.depot { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 18px; }
.liste-categories { list-style: none; margin: 10px 0; padding: 0; }
.liste-categories li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-200); cursor: grab; }
.liste-categories .cat-nom { flex: 1; }
.liste-categories form { margin: 0; }
.liste-categories .poignee { cursor: grab; color: var(--gris-600); }
.ligne-categorie { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0; }
.ligne-categorie > div { flex: 1; min-width: 140px; }
.ligne-categorie button { margin: 0; }
.capture-mobile { display: none; }
dialog.feuille { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; }
@media (max-width: 899px) {
    .capture-mobile { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); display: grid; place-items: center; width: 104px; height: 47px; margin: 0; padding: 4px 0 0; border: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--fond-carte); color: var(--gris-900); box-shadow: 0 -5px 12px rgba(0, 0, 0, .08); }
    .tableau-internes { grid-auto-columns: 85%; }
}

.cat-edition { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.cat-edition input { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; }
.cat-edition select { width: auto; margin: 0; padding: 6px 8px; }
.liste-categories li { cursor: default; }

/* Mobile : présentation du prototype (en-tête logo + engrenage + cloche, boutons sur une ligne, menus en feuille du bas) */
@media (max-width: 899px) {
    .titre-page { font-size: 22px; margin: 18px 0 18px; }
    .barre-internes { margin-bottom: 14px; }
    .astuce-mobile { display: block; margin: 0 0 26px; }
    .barre-internes { flex-wrap: nowrap; justify-content: flex-start; }
    .barre-internes .onglets.onglets-vues { display: none; }
    .barre-internes .actions-page { flex-wrap: nowrap; }
    .haut-page .menu.compte { order: 1; }
    .haut-page .menu.cloche { order: 2; }
    .barre-internes .bouton { white-space: nowrap; padding: 12px 22px; }
    .tache-interne details.menu > ul { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; min-width: 0; margin: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); z-index: 60; }
    .tache-interne details.menu li button { padding: 18px 12px; font-size: 18px; border-bottom: 1px solid var(--gris-200); border-radius: 0; }
    .tache-interne details.menu li:last-child button { border-bottom: 0; }
    .ti-coche input { width: 24px; height: 24px; }
    .tache-interne { padding: 16px; }
    .menu .liste-alertes { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-height: 70vh; overflow: auto; }
    /* Connexion : champs soulignés, titre plus grand */
    body.connexion .formulaire { place-items: center start; padding: 24px; }
    body.connexion .marque-mobile { font-size: 24px; margin: 0 0 56px; }
    body.connexion .titre-page { font-size: 38px; margin-bottom: 28px; }
    body.connexion .champ input { background: transparent; border: 0; border-bottom: 1px solid var(--gris-300); border-radius: 0; padding-top: 16px; padding-bottom: 16px; }
    body.connexion .champ input:focus { border-bottom-color: var(--accent); outline: 0; box-shadow: 0 1px 0 var(--accent); }
}

.rail-logo.a-logo, .haut-logo.a-logo { background: var(--fond-carte); overflow: hidden; }
.rail-logo.a-logo img, .haut-logo.a-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Réglages : onglets épurés */
.onglets.onglets-reglages { gap: 30px; border-bottom: 1px solid var(--gris-200); margin: 4px 0 24px; overflow-x: auto; scrollbar-width: none; }
.onglets-reglages a { padding: 12px 0; white-space: nowrap; color: var(--gris-600); border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: .02em; }
.onglets-reglages a:hover { color: var(--gris-900); text-decoration: none; }
.onglets-reglages a[aria-current=page] { color: var(--gris-900); font-weight: 700; border-bottom-color: var(--accent); }

/* Pièces jointes des tâches internes */
.pieces { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.piece { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.piece-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; background: rgba(0, 0, 0, .08); }
.piece-vocal { flex: 1 1 100%; padding-right: 12px; }
.piece-vocal audio { height: 36px; flex: 1; min-width: 0; max-width: 100%; }
.piece-lien { display: flex; flex-direction: column; max-width: 220px; padding: 8px 12px; background: rgba(0, 0, 0, .05); border-radius: 12px; color: var(--gris-900); }
.piece-lien span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece form { position: absolute; top: -8px; right: -8px; margin: 0; }
.piece-suppr { width: 22px; height: 22px; padding: 0; margin: 0; border-radius: 50%; background: var(--gris-900); color: #fff; font-size: 14px; line-height: 22px; text-align: center; }
.envoi-etat { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 70; background: var(--gris-900); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 15px; }
.vocal-temps { font-size: 34px; text-align: center; margin: 10px 0; letter-spacing: .04em; }
#vocal-ecoute { width: 100%; margin: 8px 0; }
.capture-tete { display: flex; justify-content: space-between; align-items: center; }
.capture-x { width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
.capture-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.capture-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 16px 6px; border-radius: 16px; background: var(--gris-100); color: var(--gris-900); font-weight: 700; }
.capture-actions button.actif { background: var(--rouge); color: #fff; }
.capture-fichiers { list-style: none; margin: 8px 0; padding: 0; }
.capture-fichiers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: 15px; }
.capture-fichiers button { margin: 0; padding: 2px 10px; }
#capture-terminer { width: 100%; margin-top: 14px; padding: 16px; font-size: 18px; }
#capture-titre { margin-bottom: 10px; }
.journal-verif { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0 0 14px; }
.journal-verif label { flex: 1 1 100%; margin: 0; }
.journal-verif input { flex: 1 1 220px; margin: 0; font-family: ui-monospace, Menlo, monospace; }
.journal-verif button { margin: 0; }

.carte.console table { min-width: 980px; }
.carte.console th, .carte.console td { padding: 14px 16px; vertical-align: top; }
.carte.console form { margin: 0; }
.carte.console .case { display: block; margin: 0 0 6px; white-space: nowrap; }
.carte.console .case input { width: auto; margin: 0 6px 0 0; }
.carte.console button { margin-top: 8px; }
.carte.console .ligne-form { margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 14px 0; }
fieldset legend { padding: 0; margin-bottom: 6px; }
fieldset .case { display: block; margin: 0 0 8px; }
fieldset .case input { width: auto; margin-right: 8px; }

/* Console : liste des locataires dépliables */
.locataires { padding: 0; overflow: visible; }
.loc-entete, .loc-ligne > summary { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(140px, 2fr) minmax(110px, 1fr) 80px 80px; gap: 16px; align-items: center; padding: 16px 64px 16px 24px; }
.loc-entete { background: var(--gris-100); color: var(--gris-700); border-radius: var(--rayon) var(--rayon) 0 0; }
.loc { position: relative; border-top: 6px solid var(--gris-100); }
.loc:first-of-type { border-top: 0; }
.loc-ligne > summary { cursor: pointer; list-style: none; }
.loc-ligne > summary::-webkit-details-marker { display: none; }
.loc-ligne > summary strong { padding-left: 0; }
.loc-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 4px 64px 22px 24px; }
.loc-detail h4 { margin: 0 0 4px; font-size: 14px; font-weight: 400; color: var(--gris-700); }
.loc-detail p { margin: 0; }
.loc .menu { position: absolute; right: 16px; top: 10px; }
.carte.console .loc .case, dialog .case { display: block; margin: 0 0 8px; white-space: normal; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) {
    .loc-entete { display: none; }
    .loc-ligne > summary { grid-template-columns: 1fr 1fr; }
    .duo { grid-template-columns: 1fr; }
}