/* ---------------------------------------------------------------------------
   Point S - Inspection vehicule
   Interface pensee pour tablette en atelier : cibles tactiles larges,
   contrastes eleves (lumiere du jour, mains sales, gants).
   --------------------------------------------------------------------------- */

:root {
    --bleu:        #0b3d91;
    --bleu-clair:  #1b56c4;
    --jaune:       #ffcc00;
    --encre:       #16181d;
    --gris-1:      #f5f6f8;
    --gris-2:      #e3e6eb;
    --gris-3:      #9aa1ad;
    --gris-4:      #5b6472;
    --vert:        #16a34a;
    --ambre:       #f59e0b;
    --rouge:       #dc2626;
    --rayon:       12px;
    --ombre:       0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    --tactile:     52px;   /* hauteur minimale d'une cible tactile */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--encre);
    background: var(--gris-1);
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--bleu); }

/* --- Bandeau de nouvelle version ---------------------------------------- */

.bandeau-version {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .7rem 3rem .7rem 1rem;
    background: var(--jaune);
    color: #3b2f00;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .18);
    animation: descend .3s ease-out;
}

.bandeau-version[hidden] { display: none; }

.bandeau-version .btn-petit {
    background: #3b2f00;
    color: var(--jaune);
    border: 0;
    flex-shrink: 0;
}

.bandeau-version .btn-petit:hover { background: #1f1900; }

.fermer-bandeau {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #3b2f00;
    cursor: pointer;
    opacity: .6;
    padding: 0 .4rem;
}

.fermer-bandeau:hover { opacity: 1; }

/* Le bandeau est en position fixe : on decale l'entete, elle aussi collante. */
body.avec-bandeau .entete { top: 52px; }
body.avec-bandeau .etapes-fil { top: 108px; }

@keyframes descend {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@media (max-width: 640px) {
    .bandeau-version { font-size: .88rem; gap: .6rem; padding: .6rem 2.4rem .6rem .8rem; }
    body.avec-bandeau .entete { top: 76px; }
}

/* --- Entete ------------------------------------------------------------- */

.entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
    background: var(--bleu);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}

.marque {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.logo {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--jaune);
    color: var(--bleu);
    font-weight: 800;
}

/* Logo officiel fourni par le centre : hauteur contrainte, largeur libre,
   fond blanc car les logos de marque sont concus sur fond clair. */
.logo-image {
    height: 34px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 3px 6px;
}

/* Ecran de connexion : le logo est l'element identitaire principal. */
.logo-login {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin: 0 auto .75rem;
    display: block;
}

.nav { display: flex; gap: .25rem; margin-left: auto; }

.nav a {
    color: #fff;
    text-decoration: none;
    padding: .55rem .9rem;
    border-radius: 999px;
    opacity: .85;
}

.nav a.actif, .nav a:hover { background: rgba(255, 255, 255, .16); opacity: 1; }

.utilisateur {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
    opacity: .95;
}

/* --- Structure ---------------------------------------------------------- */

.contenu { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

.carte {
    background: #fff;
    border: 1px solid var(--gris-2);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.entete-page h1 { margin: 0; }
.pousse-droite { margin-left: auto; }

.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Même précaution que pour .point : un contenu large ne doit jamais élargir sa
   colonne au point de faire défiler la page. */
.grille > * { min-width: 0; }

/* --- Boutons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tactile);
    padding: .7rem 1.25rem;
    border: 0;
    border-radius: var(--rayon);
    background: var(--bleu);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.btn:hover { background: var(--bleu-clair); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-secondaire { background: #fff; color: var(--bleu); border: 2px solid var(--gris-2); }
.btn-secondaire:hover { background: var(--gris-1); }
.btn-fantome { background: transparent; border: 1px solid rgba(255,255,255,.5); min-height: 38px; padding: .35rem .8rem; font-size: .85rem; }
.btn-fantome:hover { background: rgba(255,255,255,.16); }
.btn-succes { background: var(--vert); }
.btn-succes:hover { background: #12833c; }
.btn-danger { background: var(--rouge); }
.btn-bloc { width: 100%; }

/* --- Formulaires -------------------------------------------------------- */

.champ { margin-bottom: 1rem; }

.champ label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .35rem;
    color: var(--gris-4);
}

.champ input, .champ select, .champ textarea {
    width: 100%;
    min-height: var(--tactile);
    padding: .7rem .85rem;
    font-size: 1.05rem;
    font-family: inherit;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    background: #fff;
}

.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none;
    border-color: var(--bleu);
}

.champ textarea { min-height: 90px; resize: vertical; }

.champ-immat input {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.aide { font-size: .82rem; color: var(--gris-4); margin-top: .3rem; }

/* --- Etiquettes d'etat -------------------------------------------------- */

.etiquette {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--gris-2);
    color: var(--gris-4);
}

.etiquette-inspection        { background: #dbeafe; color: #1e40af; }
.etiquette-devis_selectionne { background: #ede9fe; color: #5b21b6; }
.etiquette-or_signe          { background: #dcfce7; color: #166534; }
.etiquette-en_cours          { background: #fef3c7; color: #92400e; }
.etiquette-termine           { background: var(--gris-2); color: var(--gris-4); }

/* --- Tour du vehicule (grille de photos) -------------------------------- */

.grille-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .9rem;
}

.case-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--gris-3);
    border-radius: var(--rayon);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    padding: .5rem;
    transition: border-color .15s, background .15s;
}

.case-photo:hover { border-color: var(--bleu); background: #f8faff; }

.case-photo.remplie { border-style: solid; border-color: var(--vert); }
.case-photo.requise:not(.remplie) { border-color: var(--ambre); background: #fffbeb; }

.case-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-photo .libelle {
    position: relative;
    z-index: 1;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gris-4);
}

.case-photo.remplie .libelle {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    padding: .35rem;
    font-size: .78rem;
}

.case-photo .icone { position: relative; z-index: 1; font-size: 1.6rem; color: var(--gris-3); }

.badge-requis {
    position: absolute;
    top: .4rem; right: .4rem;
    z-index: 2;
    background: var(--ambre);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .45rem;
    border-radius: 999px;
}

.case-photo.remplie .badge-requis { background: var(--vert); }

/* --- Inspection guidee -------------------------------------------------- */

.etapes-fil { padding: .8rem 1rem; position: sticky; top: 56px; z-index: 15; }

.fil { display: flex; gap: .35rem; flex-wrap: wrap; }

.pastille {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gris-2);
    background: #fff;
    color: var(--gris-4);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s;
}

.pastille.faite    { background: var(--vert); border-color: var(--vert); color: #fff; }
.pastille.courante { background: var(--bleu); border-color: var(--bleu); color: #fff; transform: scale(1.15); }
.pastille.a-venir  { opacity: .5; cursor: not-allowed; }

.carte-etape { padding: 1.4rem; }

.etape-titre { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.etape-titre h2 { margin: 0; font-size: 1.5rem; }

.compteur-etape {
    background: var(--bleu);
    color: #fff;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.consigne {
    font-size: 1.1rem;
    color: var(--gris-4);
    margin: 0 0 1.2rem;
    padding-left: .9rem;
    border-left: 4px solid var(--jaune);
}

.zone-etape {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.colonne-schema { display: flex; justify-content: center; }

.schema { width: 100%; max-width: 220px; height: auto; }

.schema-absent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 200px;
    width: 100%;
    border: 2px dashed var(--gris-2);
    border-radius: var(--rayon);
    color: var(--gris-4);
}

.schema-absent span { font-size: 2.6rem; }

.cadre-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    background: var(--gris-1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cadre-photo img { width: 100%; height: 100%; object-fit: contain; background: #10131a; }

/* Viseur en direct. object-fit: cover remplit le cadre sans déformer : le
   cliché final reprend l'image entière du capteur, un peu plus large que ce
   que montre le viseur — jamais moins. */
.flux-camera {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #10131a;
}

/* Une photo est affichée : le viseur passe dessous. */
.cadre-photo.photo-affichee .flux-camera { display: none; }

/* Repère de cadrage : discret, il aide à centrer le véhicule sans masquer
   la scène. */
.cadre-photo:not(.photo-affichee) .flux-camera + .cadre-vide { display: none; }

.cadre-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--gris-3);
    font-weight: 600;
}

.icone-appareil { font-size: 3rem; }

.voile-envoi {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-weight: 600;
    color: var(--bleu);
}

.tourniquet {
    width: 38px;
    height: 38px;
    border: 4px solid var(--gris-2);
    border-top-color: var(--bleu);
    border-radius: 50%;
    animation: tourne .8s linear infinite;
}

@keyframes tourne { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
    .zone-etape { grid-template-columns: 1fr; }
    .colonne-schema { order: 2; }
    .schema { max-width: 170px; }
    .etapes-fil { top: 0; }
}

/* --- Tableaux ----------------------------------------------------------- */

.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { padding: .8rem .6rem; text-align: left; border-bottom: 1px solid var(--gris-2); }
.tableau th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-4); }
.tableau tbody tr:hover { background: var(--gris-1); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.enveloppe-tableau { overflow-x: auto; }

/* --- Points de controle ------------------------------------------------- */

.point {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid var(--gris-2);
    border-radius: var(--rayon);
    margin-bottom: .6rem;
    background: #fff;
}

/* Un enfant de grille refuse par défaut de descendre sous la largeur de son
   contenu. Sans ceci, un libellé long élargit la ligne, puis la carte, puis la
   page entière - et la tablette se met à défiler horizontalement. */
.point > * { min-width: 0; }

.point-libelle { font-weight: 600; overflow-wrap: anywhere; }

.etats { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Sur tablette, les trois états ne tiennent plus à côté du libellé : la
   colonne 'auto' se dimensionne sur son contenu, qui ne se replie pas. On
   passe alors en pleine largeur, les boutons sous le libellé. */
@media (max-width: 860px) {
    .point { grid-template-columns: 1fr; align-items: stretch; }
    .etats { justify-content: flex-start; }
    .etat-btn { flex: 1 1 auto; }
}

.etat-btn {
    min-height: 44px;
    padding: .5rem .8rem;
    border: 2px solid var(--gris-2);
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gris-4);
    cursor: pointer;
}

.etat-btn[data-etat="ok"].actif           { background: var(--vert);  border-color: var(--vert);  color: #fff; }
.etat-btn[data-etat="a_surveiller"].actif { background: var(--ambre); border-color: var(--ambre); color: #fff; }
.etat-btn[data-etat="a_remplacer"].actif  { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.mesure { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.mesure input { max-width: 110px; min-height: 44px; padding: .4rem .6rem; border: 2px solid var(--gris-2); border-radius: 8px; font-size: 1rem; }

.barre-progression { height: 10px; background: var(--gris-2); border-radius: 999px; overflow: hidden; }
.barre-progression > div { height: 100%; background: var(--vert); transition: width .25s; }

/* --- Compteur de temps d'intervention ------------------------------------
   Chiffres tabulaires : sans cela la largeur saute à chaque seconde. */

.chrono {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--gris-1);
    border: 1px solid var(--gris-2);
    font-size: .85rem;
    font-weight: 700;
    color: var(--gris-4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chrono::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gris-3);
}

.chrono-actif {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.chrono-actif::before { background: var(--bleu); animation: pulsation 2s ease-in-out infinite; }

@keyframes pulsation { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
    .chrono-actif::before { animation: none; }
}

/* --- Signature ---------------------------------------------------------- */

.zone-signature {
    border: 2px dashed var(--gris-3);
    border-radius: var(--rayon);
    background: #fff;
    touch-action: none;   /* indispensable : sinon le geste scrolle la page */
}

.zone-signature canvas { display: block; width: 100%; height: 220px; border-radius: var(--rayon); }

/* --- Connexion ---------------------------------------------------------- */

.page-login { max-width: 380px; margin: 8vh auto; }

.pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; }

.pave button {
    min-height: 64px;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    background: #fff;
    cursor: pointer;
}

.pave button:active { background: var(--gris-1); }

.affichage-pin {
    text-align: center;
    font-size: 2rem;
    letter-spacing: .5em;
    padding: .8rem;
    min-height: 64px;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    background: #fff;
}

/* --- Planning du jour ---------------------------------------------------- */

.carte-planning { border-left: 4px solid var(--jaune); }
.carte-planning[hidden] { display: none; }

/* --- Contrôle de complétude de facturation ------------------------------- */

.carte-controle {
    border-left: 4px solid var(--jaune);
    animation: monte .35s ease-out;
}

.alerte-controle {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--rayon);
}

.alerte-controle .alerte-corps { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.alerte-controle strong { color: #92400e; }
.alerte-controle .btn { flex-shrink: 0; }

/* Alerte écartée : conservée à l'écran pour que le technicien voie ce qu'il a
   traité, mais visuellement neutralisée. */
.alerte-controle.ecartee {
    background: var(--gris-1);
    border-color: var(--gris-2);
    opacity: .55;
}
.alerte-controle.ecartee strong { color: var(--gris-4); text-decoration: line-through; }

.total-controle {
    text-align: right;
    font-weight: 700;
    color: #92400e;
    margin: .5rem 0 0;
}

/* --- Interrupteur de paramètre -------------------------------------------
   Le sélecteur est doublé à dessein. « .champ label » plus haut impose
   display:block et l'emporte sur « .interrupteur » seul, plus faible : le
   label cessait d'être un conteneur flex, les <span> retombaient en
   display:inline, la piste perdait sa largeur, et seule la pastille -
   positionnée en absolu - restait visible, par-dessus le libellé. */

.interrupteur,
.champ label.interrupteur {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .9rem 1rem;
    margin-bottom: 0;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    cursor: pointer;
    user-select: none;
    background: #fff;
    font-size: 1rem;
    font-weight: 400;
    color: inherit;
}

/* Mêmes voisins encombrants : « .champ input » impose une hauteur minimale,
   un rembourrage et une bordure qu'il faut neutraliser ici. */
.interrupteur input,
.champ .interrupteur input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
}

.interrupteur-piste {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: var(--gris-3);
    transition: background .15s;
    margin-top: .15rem;
}

.interrupteur-piste::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.interrupteur input:checked + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .interrupteur-piste { outline: 2px solid var(--bleu); outline-offset: 2px; }

.interrupteur-texte { display: flex; flex-direction: column; gap: .2rem; }
.interrupteur-texte strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.interrupteur-texte small { font-size: .85rem; color: var(--gris-4); line-height: 1.4; }
.interrupteur:has(input:checked) { border-color: var(--vert); background: #f6fdf8; }

/* --- Parcours d'un dossier, avec les envois au client --------------------
   Colonne verticale : les étapes s'enchaînent, et les envois se posent là où
   ils partent réellement. Le trait relie les puces, pas les blocs, sinon il
   se disloque dès qu'une étape porte une option. */

.recap-envois {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 1.4rem;
    padding: .75rem 1rem;
    border-radius: var(--rayon);
    background: var(--gris-1);
    border: 1px solid var(--gris-2);
}

.recap-envois strong { font-size: 1.05rem; }

.parcours { list-style: none; margin: 0; padding: 0; }

.parcours-etape {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 0 1.4rem;
}

.parcours-etape:last-child { padding-bottom: 0; }

/* Le trait vertical s'arrête à la dernière puce. */
.parcours-etape:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--gris-2);
}

.parcours-puce {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gris-4);
    background: #fff;
    border: 2px solid var(--gris-2);
}

.parcours-accueil  .parcours-puce { border-color: #93c5fd; color: #1e40af; }
.parcours-client   .parcours-puce { border-color: #c4b5fd; color: #5b21b6; }
.parcours-atelier  .parcours-puce { border-color: #fcd34d; color: #92400e; }
.parcours-attente  .parcours-puce { border-color: var(--gris-2); color: var(--gris-3); }

.parcours-corps { flex: 1; min-width: 0; padding-top: .3rem; }
.parcours-titre  { font-weight: 700; }
.parcours-detail { font-size: .88rem; color: var(--gris-4); margin-top: .1rem; }

.parcours-etape.etape-active .parcours-puce {
    border-color: var(--vert);
    color: var(--vert);
}

/* --- Bloc d'envoi rattaché à une étape ---------------------------------- */

.envoi {
    margin-top: .7rem;
    padding: .2rem;
    border-radius: var(--rayon);
    border: 2px dashed var(--gris-2);
    background: var(--gris-1);
    transition: border-color .15s, background .15s;
}

.envoi-actif { border-style: solid; border-color: var(--vert); background: #f6fdf8; }

/* L'interrupteur vit ici dans un bloc déjà encadré : on lui retire son propre
   cadre pour ne pas empiler deux bordures. */
.envoi .interrupteur-envoi,
.champ .envoi label.interrupteur-envoi {
    border: 0;
    background: transparent;
    padding: .7rem .8rem;
}

.envoi-apercu {
    margin: 0 .8rem .7rem;
    padding: .6rem .75rem;
    border-radius: var(--rayon);
    background: #fff;
    border: 1px solid var(--gris-2);
}

.envoi-etiquette {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris-3);
    margin-bottom: .25rem;
}

.envoi-apercu p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--gris-4);
    overflow-wrap: anywhere;
}

.envoi-fille {
    margin: 0 .8rem .2rem;
    border-top: 1px solid var(--gris-2);
    transition: opacity .15s;
}

/* Option sans effet tant que l'envoi parent est éteint : grisée, mais laissée
   cliquable - on doit pouvoir la préparer avant d'activer le parent. */
.fille-inerte { opacity: .45; }

/* --- Statistiques -------------------------------------------------------- */

.onglets-compacts a { padding: .4rem .7rem; font-size: .85rem; }

.chiffre { display: flex; flex-direction: column; gap: .1rem; }

.chiffre-valeur {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bleu);
    font-variant-numeric: tabular-nums;
}

.chiffre-libelle { font-weight: 600; }

.mesure-temps { display: flex; flex-direction: column; gap: .15rem; }
.mesure-temps strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* Histogramme en CSS : trente rectangles ne justifient pas d'embarquer une
   bibliothèque de graphiques plus lourde que l'application elle-même. */
.histogramme {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: .5rem 0;
}

.histo-colonne { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }

.histo-barre {
    width: 100%;
    background: var(--bleu);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: background .15s;
}

.histo-colonne:hover .histo-barre { background: #1e40af; }

/* Jour sans activité : une trace, pas un vide. Un creux invisible se lit comme
   une donnée manquante. */
.histo-vide { background: var(--gris-2); }

.histo-legende {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--gris-4);
}

.repartition {
    display: flex;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--gris-2);
    margin: .8rem 0 .7rem;
}

.repartition-part { transition: flex-grow .2s; }
.repartition-ok           { background: var(--vert); }
.repartition-a_surveiller { background: var(--ambre); }
.repartition-a_remplacer  { background: var(--rouge); }

.repartition-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .88rem;
    color: var(--gris-4);
}

.puce {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .35rem;
}

.puce-ok           { background: var(--vert); }
.puce-a_surveiller { background: var(--ambre); }
.puce-a_remplacer  { background: var(--rouge); }

/* --- Témoins de service (Fiche Expert) ---------------------------------- */

.temoins { display: flex; gap: .5rem; flex-wrap: wrap; }

.temoin {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    border: 2px solid var(--gris-2);
    border-radius: var(--rayon);
    cursor: pointer;
    user-select: none;
    background: #fff;
    /* Cible tactile confortable : ces cases se cochent avec des gants. */
    min-height: 48px;
}

.temoin input { width: 20px; height: 20px; margin: 0; }
.temoin:has(input:checked) { border-color: #d97706; background: #fffbeb; color: #92400e; font-weight: 600; }

/* Points de relevé : pas d'état à choisir, seulement une valeur. */
.etats-releve { display: flex; align-items: center; justify-content: flex-end; }

/* --- Saisie HT / TTC ----------------------------------------------------- */

.bascule-tva { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.bascule-tva .btn { min-width: 62px; }
.bascule-tva select { width: auto; min-width: 120px; }

.bascule-tva .actif,
.selecteur-jour .actif {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

.totaux-devis {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--gris-2);
    flex-wrap: wrap;
}

.totaux-devis > div { text-align: right; display: flex; flex-direction: column; }
.totaux-devis strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.totaux-devis .total-ttc strong { font-size: 1.5rem; color: var(--bleu); }

.selecteur-jour { display: flex; gap: .3rem; flex-wrap: wrap; }
.selecteur-jour .actif {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

/* Véhicule qui attend depuis plus de 4 heures sur le parc : c'est le signal
   qu'un chef d'atelier doit voir sans le chercher. */
.attente-longue { color: var(--rouge); font-weight: 600; }

.etiquette-au_parking  { background: #fef3c7; color: #92400e; }
.etiquette-en_atelier  { background: #dbeafe; color: #1e40af; }
/* À contrôler : la seule étape qui attend une action de l'accueil. Elle doit
   se repérer d'un coup d'oeil dans la liste. */
.etiquette-a_controler { background: #ede9fe; color: #5b21b6; font-weight: 700; }
.etiquette-termine     { background: #dcfce7; color: #166534; }
/* Rendu au client : le dossier est clos, il n'appelle plus aucun geste. Gris
   volontairement effacé, pour qu'il ne dispute pas l'attention aux véhicules
   encore sur le parc. */
.etiquette-remis       { background: var(--gris-2); color: var(--gris-4); }

/* Rendez-vous dont le véhicule est déjà pris en charge chez nous : présent pour
   le contexte, mais il ne doit pas attirer l'oeil autant qu'un client encore
   attendu. Critère factuel : un dossier existe. */
tr.rdv-traite { opacity: .55; }

/* --- Onglets (parametres) ----------------------------------------------- */

.onglets {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--gris-2);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.onglets a {
    padding: .7rem 1.2rem;
    color: var(--gris-4);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}

.onglets a:hover { color: var(--bleu); }
.onglets a.actif { color: var(--bleu); border-bottom-color: var(--bleu); }

.entete-carte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.entete-carte h2 { margin: 0; }

.champ.pleine-largeur { grid-column: 1 / -1; }

.requis { color: var(--rouge); margin-left: .15rem; }

.apercu-nom {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bleu);
    padding: 1rem 1.25rem;
    background: var(--gris-1);
    border-radius: var(--rayon);
    border-left: 4px solid var(--jaune);
}

/* --- Invite d'installation (PWA) ---------------------------------------- */

.bandeau-install {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 520px;
    margin: 0 auto;
    padding: .9rem 2.5rem .9rem 1rem;
    background: #fff;
    border-radius: var(--rayon);
    box-shadow: 0 8px 30px rgba(16, 24, 40, .25);
    border: 1px solid var(--gris-2);
    animation: monte .3s ease-out;
}

.bandeau-install[hidden] { display: none; }
.bandeau-install img { width: 44px; height: 44px; flex-shrink: 0; }
.bandeau-install div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.bandeau-install strong { font-size: .95rem; }
.bandeau-install span { font-size: .8rem; color: var(--gris-4); }
.bandeau-install .btn-petit { flex-shrink: 0; }

@keyframes monte {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* --- Administration des comptes ----------------------------------------- */

.btn-petit { min-height: 40px; padding: .4rem .8rem; font-size: .85rem; }
.btn-petit.danger { color: var(--rouge); border-color: #f5c2c2; }
.btn-petit.danger:hover { background: #fef2f2; }

.actions-compte { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* Ligne de dossier : action principale a gauche, suppression a droite et
   visuellement en retrait, pour qu'elle ne soit pas cliquee par reflexe. */
.actions-dossier {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.etiquette-role-admin      { background: #ede9fe; color: #5b21b6; }
.etiquette-role-reception  { background: #dbeafe; color: #1e40af; }
.etiquette-role-technicien { background: #fef3c7; color: #92400e; }

.fond-modale {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 200;
}

.modale {
    background: #fff;
    border-radius: var(--rayon);
    padding: 1.5rem;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.modale h2 { margin-bottom: 1rem; }

.actions-modale { display: flex; gap: .75rem; margin-top: 1.25rem; }
.actions-modale .btn { flex: 1; }

.code-affiche {
    text-align: center;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: .35em;
    padding: 1.2rem;
    margin: 1rem 0;
    background: var(--gris-1);
    border: 2px dashed var(--gris-3);
    border-radius: var(--rayon);
    font-variant-numeric: tabular-nums;
    /* Selectionnable : l'administrateur doit pouvoir le copier. */
    user-select: all;
}

/* --- Divers ------------------------------------------------------------- */

.alerte {
    padding: .85rem 1rem;
    border-radius: var(--rayon);
    border-left: 4px solid;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.alerte-info    { background: #eff6ff; border-color: var(--bleu);  color: #1e3a8a; }
.alerte-warning { background: #fffbeb; border-color: var(--ambre); color: #78350f; }
.alerte-erreur  { background: #fef2f2; border-color: var(--rouge); color: #7f1d1d; }
.alerte-succes  { background: #f0fdf4; border-color: var(--vert);  color: #14532d; }

.vide { text-align: center; padding: 3rem 1rem; color: var(--gris-4); }

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(150%);
    background: var(--encre);
    color: #fff;
    padding: .9rem 1.4rem;
    border-radius: var(--rayon);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: transform .25s;
    z-index: 100;
    max-width: 90vw;
}

.toast.visible { transform: translateX(-50%) translateY(0); }
.toast.erreur  { background: var(--rouge); }
.toast.succes  { background: var(--vert); }

.barre-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #fff;
    border-top: 1px solid var(--gris-2);
    margin: 1rem -1rem -4rem;
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .08);
}

.barre-actions .btn { flex: 1; }

@media (max-width: 640px) {
    .entete { flex-wrap: wrap; }
    .utilisateur { width: 100%; justify-content: space-between; }
    .point { grid-template-columns: 1fr; }
}

@media print {
    .entete, .barre-actions, .toast, .btn { display: none !important; }
    body { background: #fff; }
    .carte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}