/*
 * 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=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 */
.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: 28px; font-weight: 700; letter-spacing: .04em; 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; }

@media (max-width: 899px) {
    .rail, .haut-page { display: none; }
    body.avec-menu main { padding: 20px 16px 110px; }
    .barre-bas { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around; align-items: center; 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, .barre-bas summary { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 8px; border-radius: 12px; color: var(--gris-700); text-decoration: none; font-size: 13px; line-height: 1.2; width: auto; height: auto; }
    .barre-bas a[aria-current=page] { color: var(--gris-900); font-weight: 700; background: var(--gris-100); }
    .barre-bas .menu > summary { font-size: 13px; font-weight: 400; }
    .barre-bas .menu ul { top: auto; bottom: 64px; }
}

/* 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: 20px; text-transform: uppercase; letter-spacing: .03em; }
.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: 28px; font-weight: 700; letter-spacing: .04em; 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: 22px; }
.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: 20px; text-transform: uppercase; letter-spacing: .04em; 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: 14px 0 4px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-700); }


/* 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; }