/* ==========================================================================
   Espace client — écran 1e
   ========================================================================== */

/* Pas de barre d'action fixe ici : le padding qu'elle impose au corps de page
   n'a plus lieu d'être. */
body.espace-client {
    padding-bottom: 0;
}

.ec__barre {
    background: var(--c-blue);
    color: #ffffff;
}

.ec__barre-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-9) var(--sp-15);
    padding-block: var(--sp-13);
}

.ec__titre {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 700;
}

.ec__compte {
    display: flex;
    align-items: center;
    gap: var(--sp-13);
    margin-left: auto;
    font-size: var(--fs-meta);
}

.ec__bonjour {
    color: var(--c-on-blue);
}

.ec__deconnexion {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: var(--tap-min);
    color: #ffffff;
    text-decoration: underline;
}

.ec__contenu {
    padding-block: var(--sp-24) var(--sp-34);
}

/* ---- Alertes ------------------------------------------------------------ */
.alerte {
    margin: 0 0 var(--sp-15);
    padding: var(--sp-13) var(--sp-15);
    border-radius: var(--r-10);
    font-size: var(--fs-meta);
}

.alerte--succes {
    background: var(--c-green-bg);
    border: 1.5px solid var(--c-green);
    color: #1c5c3e;
}

.alerte--avertissement {
    background: var(--c-orange-bg);
    border: 1.5px solid var(--c-orange);
    color: #8a4b1e;
}

/* ---- Cartes d'authentification ------------------------------------------ */
.ec__carte-auth {
    max-inline-size: 420px;
    margin-inline: auto;
}

.ec__liens {
    margin-top: var(--sp-18);
    font-size: var(--fs-meta);
    text-align: center;
}

.ec__liens a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    text-decoration: underline;
}

/* ---- Liste des demandes -------------------------------------------------- */
.ec__demandes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-15);
    margin: var(--sp-20) 0 0;
    padding: 0;
    list-style: none;
}

.ec__demande {
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 1.5px solid var(--c-blue);
    border-radius: var(--r-11);
}

/* Dossier clos : bordure neutre, pour qu'il ne concurrence pas visuellement
   les demandes en cours, qui sont celles qui appellent une action. */
.ec__demande--close {
    border-color: var(--c-border);
}

.ec__demande-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-11);
    flex-wrap: wrap;
}

.ec__demande-titre {
    margin: 0;
    font-size: var(--fs-card-title);
}

/*
   Cible tactile pleine hauteur sur le titre.

   Volontairement PAS un « lien étendu » couvrant toute la carte : celle-ci
   contient la frise de suivi, qui défile horizontalement au doigt. Une
   surcouche cliquable intercepterait ce geste et rendrait la frise
   immobile sur mobile — exactement là où elle en a le plus besoin.
*/
.ec__demande-titre a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--c-heading);
    text-decoration: none;
}

.ec__demande-titre a:hover {
    color: var(--c-blue);
    text-decoration: underline;
}

.ec__demande-meta {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-label);
    color: var(--c-meta);
}

.ec__urgent {
    margin-left: var(--sp-6);
    padding: 2px var(--sp-8);
    background: var(--c-alert-bg);
    border-radius: var(--r-pill);
    color: var(--c-alert);
    font-weight: 700;
}

.ec__description {
    margin: var(--sp-11) 0 0;
    color: var(--c-body);
    line-height: 1.6;
    white-space: pre-line;
}

.ec__note {
    margin: var(--sp-11) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.ec__compteur {
    margin-left: var(--sp-6);
    padding: 2px var(--sp-8);
    background: var(--c-blue-bg);
    border-radius: var(--r-pill);
    color: var(--c-blue);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
}

.ec__ajout-photos {
    margin-top: var(--sp-13);
}

/* ---- Encart « Devis à signer » ------------------------------------------- *
 * Orange d'accent sur fond #FFF7F0 : c'est une action attendue, pas une
 * alerte. Le rouge reste réservé aux urgences.                               */
.ec__devis-encart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-11);
    margin-top: var(--sp-15);
    padding: var(--sp-13) var(--sp-15);
    background: var(--c-orange-bg);
    border: 1px solid var(--c-orange);
    border-radius: var(--r-10);
}

.ec__devis-titre {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--c-heading);
}

.ec__devis-montant {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Liste des devis d'une demande --------------------------------------- */
.ec__devis-liste {
    display: grid;
    gap: var(--sp-9);
    margin: var(--sp-11) 0 0;
    padding: 0;
    list-style: none;
}

.ec__devis-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-9);
    font-size: var(--fs-body);
}

/* Les 44 px portent sur le LIEN, pas sur la ligne qui le contient : c'est le
   lien qu'on vise du doigt, et une ligne haute autour d'une cible basse ne
   rattrape rien. */
.ec__devis-ligne a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font-weight: 600;
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ec__devis-ligne a:hover {
    color: var(--c-orange);
}

.ec__devis-ligne-montant {
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}

.ec__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin-top: var(--sp-24);
}

/* ---- Liste vide ---------------------------------------------------------- */
.ec__vide {
    margin-top: var(--sp-20);
    padding: var(--sp-24);
    background: var(--c-surface);
    border: 1px dashed var(--c-border-field);
    border-radius: var(--r-12);
    text-align: center;
}

.ec__vide-titre {
    margin: 0 0 var(--sp-9);
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-heading);
}

.ec__vide p {
    margin: 0 auto var(--sp-18);
    max-inline-size: 46ch;
    color: var(--c-muted);
}

/* ==========================================================================
   Frise de suivi
   --------------------------------------------------------------------------
   Le conteneur défile horizontalement sur mobile : six étapes n'entrent pas
   dans 390 px sans devenir illisibles. Il est focusable, sans quoi la frise
   serait inatteignable au clavier.
   ========================================================================== */
.timeline-scroll {
    margin-top: var(--sp-15);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.timeline-scroll:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.timeline {
    display: flex;
    align-items: flex-start;
    min-inline-size: 460px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline__etape {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    text-align: center;
}

/* Connecteur : tracé APRÈS chaque étape sauf la dernière, et coloré selon
   l'état de l'étape qu'il quitte. */
.timeline__etape::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--c-border-field);
}

.timeline__etape:last-child::after {
    display: none;
}

.timeline__etape--faite::after {
    background: var(--c-green);
}

.timeline__pastille {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 999px;
    background: var(--c-surface);
    border: 2px solid var(--c-border-field);
    color: #ffffff;
}

.timeline__etape--faite .timeline__pastille {
    background: var(--c-green);
    border-color: var(--c-green);
}

.timeline__etape--courante .timeline__pastille {
    background: var(--c-orange);
    border-color: var(--c-orange);
}

.timeline__libelle {
    font-size: var(--fs-label);
    color: var(--c-meta);
    line-height: 1.25;
}

.timeline__etape--faite .timeline__libelle {
    color: var(--c-body);
}

.timeline__etape--courante .timeline__libelle {
    color: var(--c-heading);
    font-weight: 700;
}

@media (min-width: 768px) {
    .timeline {
        min-inline-size: 0;
    }

    .ec__actions {
        flex-direction: row;
    }
}