/* ==========================================================================
   Renot — feuille de style
   Charte IRIS reprise d'INITIO et de Factot : bleu nuit (--nuit), orange (--orange), police Inter
   auto-hébergée (licence SIL OFL : fonts/Inter-LICENSE.txt). Maquette validée le 06/11/2026.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
    /* Marque */
    --nuit: #050c35;
    --nuit-survol: #17215e;
    --nuit-pale: #eef0f8;
    --orange: #ff9015;
    --orange-pale: #fff1de;
    --orange-texte: #8a4300;

    /* Neutres */
    --texte: #1e2343;
    --discret: #5d627a;
    --bord: #e3e6ef;
    --bord-fort: #d3d8e3;
    --bord-leger: #eef0f5;
    --carte: #ffffff;
    --fond: #f4f5f9;
    --fond-tableau: #f9fafc;

    /* États */
    --vert: #1e6b34;
    --vert-pale: #e8f5ec;
    --rouge: #b42318;
    --rouge-pale: #fdecec;
    --gris: #475069;
    --gris-pale: #eceef4;

    --rayon: 10px;
    --rayon-carte: 12px;
    --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--nuit); }
a:hover { color: var(--nuit-survol); }

h1, h2, h3 { color: var(--nuit); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

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

/* --- Cadre : barre latérale + contenu (la barre passe au-dessus sur un téléphone) ------------------------- */

.cadre { display: flex; flex-wrap: wrap; min-height: 100vh; }

.barre {
    flex: 1 1 232px;
    background: var(--nuit);
    color: #fff;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: #fff; text-decoration: none; }
.marque:hover { color: #fff; }
.marque-nom { display: block; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.marque-sous-titre { display: block; font-size: 12px; color: #aeb4cc; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titre {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #aeb4cc; padding: 0 12px 6px;
}
.nav-lien {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
    border-radius: 8px; color: #d5d9e8; text-decoration: none;
}
.nav-lien:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-lien svg { flex: 0 0 auto; }
.nav-lien[aria-current="page"] { background: rgba(255, 255, 255, 0.10); color: #fff; font-weight: 600; }
.nav-lien[aria-current="page"] svg { stroke: var(--orange); }

.barre-compte {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    padding: 14px 8px 4px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.avatar {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px; background: var(--nuit-survol); color: #fff;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.barre-compte-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.barre-compte-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-compte-role { font-size: 12px; color: #aeb4cc; }
.bouton-icone-barre {
    width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #d5d9e8;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bouton-icone-barre:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

.contenu {
    flex: 999 1 560px; min-width: 0; padding: 28px 32px 40px;
    display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 640px) {
    .contenu { padding: 20px 16px 32px; }
}

.entete-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.entete-page p { margin: 2px 0 0; color: var(--discret); }

/* --- Cartes, tableaux, pastilles --------------------------------------------------------------------- */

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-carte); }
.carte-entete {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--bord-leger);
}
.carte-corps { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.carte-corps p { margin: 0; }

.defilement { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
    text-align: left; color: var(--discret); font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 10px 12px; background: var(--fond-tableau);
}
.tableau td { padding: 12px; border-top: 1px solid var(--bord-leger); vertical-align: top; }
.tableau th:first-child, .tableau td:first-child { padding-left: 20px; }
.tableau th:last-child, .tableau td:last-child { padding-right: 20px; }
.tableau .discret, .discret { color: var(--discret); }
.petit { font-size: 12px; }

.pastille {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    white-space: nowrap;
}
.pastille-nuit { background: var(--nuit-pale); color: var(--nuit); }
.pastille-vert { background: var(--vert-pale); color: var(--vert); }
.pastille-orange { background: var(--orange-pale); color: var(--orange-texte); }
.pastille-rouge { background: var(--rouge-pale); color: var(--rouge); }
.pastille-gris { background: var(--gris-pale); color: var(--gris); }

/* --- Boutons et formulaires ------------------------------------------------------------------------- */

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    padding: 0 16px; border-radius: var(--rayon); border: 1px solid var(--bord-fort); background: var(--carte);
    color: var(--nuit); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bouton:hover { border-color: var(--nuit); color: var(--nuit); }
.bouton:focus-visible, .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible,
.case:focus-within, .nav-lien:focus-visible {
    outline: 3px solid rgba(255, 144, 21, 0.45); outline-offset: 2px;
}
/* Action principale de la page : orange, texte bleu nuit (le blanc sur orange ne se lit pas assez) */
.bouton-principal { background: var(--orange); border-color: var(--orange); font-weight: 700; }
.bouton-principal:hover { background: #f07f00; border-color: #f07f00; }
.bouton-sombre { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.bouton-sombre:hover { background: var(--nuit-survol); color: #fff; }
.bouton-large { width: 100%; }
.bouton-petit { min-height: 36px; padding: 0 12px; font-size: 13px; }
.bouton-danger { border-color: #e7a7a2; color: var(--rouge); }
.bouton-danger:hover { border-color: var(--rouge); color: var(--rouge); background: var(--rouge-pale); }

.formulaire-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 600; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="number"], .champ input[type="date"],
.champ select, .champ textarea {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-fort); border-radius: 8px;
    font: inherit; color: var(--texte); background: #fff;
}
.champ textarea { min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.champ-case { flex-direction: row; align-items: center; gap: 10px; }
.champ-case-aide { align-items: flex-start; }
.champ-case-aide > div { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.groupe-cases { border: 0; margin: 0; padding: 0; min-width: 0; }
.groupe-cases legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.case {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--bord-fort); background: #fff; font-weight: 500; cursor: pointer;
}
.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--nuit); }
.case:has(input:checked) { border-color: var(--nuit); background: var(--nuit-pale); }
.champ-case input { width: 20px; height: 20px; margin: 0; accent-color: var(--nuit); }
.champ-case label { font-weight: 500; }
.erreur { color: var(--rouge); font-size: 13px; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* --- Messages ---------------------------------------------------------------------------------------- */

.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 12px 16px; border-radius: var(--rayon-carte); border: 1px solid var(--bord); background: #fff; }
.message-success { background: var(--vert-pale); border-color: #a8d8b4; color: #1e4d2b; }
.message-error { background: var(--rouge-pale); border-color: #f2b8b5; color: #7a1a12; }
.message-info, .message-warning { background: var(--orange-pale); border-color: #f5c58a; color: #5c2e00; }

/* --- Page de connexion ------------------------------------------------------------------------------- */

.page-connexion {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
    background: var(--nuit);
}
.carte-connexion {
    width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 32px 28px;
    display: flex; flex-direction: column; gap: 20px;
}
.carte-connexion .marque { color: var(--nuit); padding: 0; }
.carte-connexion .marque-sous-titre { color: var(--discret); }
.boutons-connexion { display: flex; flex-direction: column; gap: 10px; }
.encart-dev {
    border: 1px dashed #b9bfd0; border-radius: var(--rayon-carte); padding: 14px 16px; background: #fafbfd;
    display: flex; flex-direction: column; gap: 10px;
}
.encart-dev .pastille { align-self: flex-start; }

/* --- Référentiel ------------------------------------------------------------------------------------- */

.entete-actions { display: inline-flex; align-items: center; gap: 12px; }
.carte-corps-separe { border-top: 1px solid var(--bord-leger); }
.tableau-referentiel .numero { width: 56px; font-variant-numeric: tabular-nums; color: var(--discret); }
.tableau-referentiel .consigne { display: block; margin-top: 2px; }
.services-etape { display: flex; flex-wrap: wrap; gap: 4px; }
.ligne-retiree td, .ligne-retiree a { color: var(--discret); }

/* Sur téléphone : l'étape sur toute la largeur, puis services, ticket et dates sur une seconde ligne */
@media (max-width: 640px) {
    .tableau-referentiel thead { display: none; }
    .tableau-referentiel, .tableau-referentiel tbody { display: block; }
    .tableau-referentiel tr {
        display: grid; grid-template-columns: 40px auto auto 1fr; column-gap: 10px; row-gap: 6px;
        padding: 12px 16px; border-top: 1px solid var(--bord-leger);
    }
    .tableau-referentiel td, .tableau-referentiel th:first-child, .tableau-referentiel td:first-child,
    .tableau-referentiel td:last-child { padding: 0; border-top: 0; }
    .tableau-referentiel td.numero { grid-row: 1 / span 2; width: auto; }
    .tableau-referentiel td.etape { grid-column: 2 / -1; }
    .tableau-referentiel td.ticket .discret { display: none; }
    .tableau-referentiel td.dates { color: var(--discret); font-size: 12px; align-self: center; }
    .tableau-referentiel tr.ligne-phase { display: block; padding: 0; }
    .tableau-referentiel .ligne-phase th { display: block; padding: 8px 16px; }
}

/* --- Rénovations ------------------------------------------------------------------------------------- */

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bloc { display: block; }
.sans-retour { white-space: nowrap; }
.fil { margin: 0 0 4px; font-size: 13px; color: var(--discret); }
.fil a { color: var(--discret); }
.titre-avec-pastille { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.titre-avec-pastille .pastille { font-size: 13px; }

.onglets { display: flex; flex-wrap: wrap; gap: 4px; }
.onglet {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px;
    color: var(--discret); font-weight: 600; text-decoration: none;
}
.onglet:hover { background: var(--fond); color: var(--nuit); }
.onglet[aria-current="page"] { background: var(--nuit-pale); color: var(--nuit); }
.recherche { display: flex; gap: 8px; flex: 1 1 260px; justify-content: flex-end; }
.recherche input {
    min-height: 36px; padding: 0 12px; border: 1px solid var(--bord-fort); border-radius: 8px; font: inherit;
    color: var(--texte); background: #fff; width: 100%; max-width: 280px; min-width: 0;
}
.recherche input:focus-visible { outline: 3px solid rgba(255, 144, 21, 0.45); outline-offset: 2px; }

.avancement { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avancement progress {
    width: 72px; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--gris-pale);
    -webkit-appearance: none; appearance: none;
}
.avancement progress::-webkit-progress-bar { background: var(--gris-pale); border-radius: 999px; }
.avancement progress::-webkit-progress-value { background: var(--orange); border-radius: 999px; }
.avancement progress::-moz-progress-bar { background: var(--orange); border-radius: 999px; }

.dates-client { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.date-client { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.date-client-titre { color: var(--discret); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.date-client strong { font-size: 15px; color: var(--nuit); }
.date-client strong.discret { color: var(--discret); }
.echeance { text-transform: none; letter-spacing: 0; color: var(--orange-texte); }
.echeance.discret { color: var(--discret); }
.date-client .deplacee { align-self: flex-start; margin-top: 2px; }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historique li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--bord-leger); }
.historique li:first-child { border-top: 0; padding-top: 0; }
.historique-motif { font-size: 13px; }
.revue-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.revue-etapes li { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bord-leger); }
.entete-actions form { margin: 0; }
.infos-renovation { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.infos-renovation dt { color: var(--discret); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.infos-renovation dd { margin: 2px 0 0; }
.notes { white-space: normal; }
.ligne-phase th {
    text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--nuit); background: var(--nuit-pale);
    border-top: 1px solid var(--bord-leger);
}

/* --- Checklist ---------------------------------------------------------------------------------------- */

.tableau-checklist .case-cellule { width: 44px; padding-right: 0; }
.tableau-checklist .numero { width: 40px; font-variant-numeric: tabular-nums; color: var(--discret); }
.tableau-checklist .numero-mobile { display: none; }
.tableau-checklist .dates { white-space: nowrap; }
.case-etape {
    width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--bord-fort); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0;
}
.case-etape:hover { border-color: var(--nuit); }
.case-etape:focus-visible { outline: 3px solid rgba(255, 144, 21, 0.45); outline-offset: 2px; }
.case-etape[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); }
.ligne-faite td.etape > a { color: var(--discret); }
.tableau-checklist tr:target td { background: var(--orange-pale); }

@media (max-width: 640px) {
    .tableau-checklist thead { display: none; }
    .tableau-checklist, .tableau-checklist tbody { display: block; }
    .tableau-checklist tr {
        display: grid; grid-template-columns: 38px auto auto 1fr; column-gap: 10px; row-gap: 6px;
        padding: 12px 16px; border-top: 1px solid var(--bord-leger); align-items: center;
    }
    .tableau-checklist td, .tableau-checklist td:first-child, .tableau-checklist td:last-child { padding: 0; border-top: 0; }
    .tableau-checklist td.case-cellule { grid-row: 1 / span 2; width: auto; align-self: start; }
    .tableau-checklist td.numero { display: none; }
    .tableau-checklist .numero-mobile { display: inline; }
    .tableau-checklist td.etape { grid-column: 2 / -1; }
    .tableau-checklist td.ticket .discret { display: none; }
    .tableau-checklist td.dates { font-size: 12px; }
    .tableau-checklist tr.ligne-phase { display: block; padding: 0; }
    .tableau-checklist .ligne-phase th { display: block; padding: 8px 16px; }
}

/* --- Reprise des Excel ------------------------------------------------------------------------------ */

.commande {
    margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--fond); border: 1px solid var(--bord);
    font-size: 12px; white-space: pre-wrap; word-break: break-all;
}
.bilan-reprise { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.remarques { margin: 0; padding-left: 16px; font-size: 12px; color: var(--orange-texte); min-width: 220px; }
.champ input[type="file"] { font: inherit; }

/* --- Accueil ----------------------------------------------------------------------------------------- */

.etapes-a-venir { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }