/* ==========================================================================
   Écran devis — consultation, acceptation, signature (1f)
   --------------------------------------------------------------------------
   Mobile d'abord (base 390 px), desktop en grille 1.3fr / 1fr à partir de
   900 px, conformément au handoff.
   ========================================================================== */

.devis {
    display: grid;
    gap: var(--sp-20);
    margin-top: var(--sp-15);
}

/* ---- Carte devis --------------------------------------------------------- */
.devis__carte {
    /* La carte hérite de `.card` : fond blanc, bordure 1 px, radius 11. */
    padding: 0;
    overflow: hidden;
}

.devis__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-11);
    padding: var(--sp-18) var(--sp-15);
    border-block-end: 1px solid var(--c-border);
}

.devis__titre {
    margin: 0;
    font-size: var(--fs-h2);
}

.devis__meta {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
    line-height: 1.5;
}

/* Lien de téléchargement : cible tactile de 44 px sans bouton visible, par
   un padding négatif compensé — il doit rester discret dans l'en-tête. */
.devis__pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    min-block-size: var(--tap-min);
    padding-inline: var(--sp-4);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.devis__pdf:hover {
    color: var(--c-orange);
}

/* ---- Lignes -------------------------------------------------------------- */
.devis__lignes {
    inline-size: 100%;
    border-collapse: collapse;
    /* Le handoff donne 13 px. Remonté au corps de texte (16 px mobile) :
       ce sont des MONTANTS, la donnée que le client relit avant de
       s'engager, et la règle d'accessibilité du projet impose 16 px sur
       mobile pour le contenu. Écart assumé, cf. note dans tokens.css. */
    font-size: var(--fs-body);
}

.devis__lignes th,
.devis__lignes td {
    padding: var(--sp-11) var(--sp-15);
    text-align: start;
    vertical-align: top;
}

.devis__lignes thead th {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-label);
    border-block-end: 1px solid var(--c-border);
}

.devis__lignes tbody td {
    color: var(--c-body);
    border-block-end: 1px solid var(--c-border);
}

.devis__montant-col {
    text-align: end;
    /* Les chiffres s'alignent verticalement : sans chasse fixe, un « 1 » plus
       étroit décale la colonne et rend la lecture des totaux pénible. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Totaux -------------------------------------------------------------- */
.devis__total th {
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--c-meta);
}

.devis__total td {
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.devis__total th,
.devis__total td {
    padding-block: var(--sp-6);
}

/* Le TTC est le montant qui engage : filet de séparation, corps plus grand,
   couleur de titre. C'est celui que l'œil doit trouver en premier. */
.devis__total--ttc th,
.devis__total--ttc td {
    padding-block: var(--sp-11) var(--sp-18);
    font-size: 17px;
    font-weight: 700;
    color: var(--c-heading);
    border-block-start: 1.5px solid var(--c-blue);
}

/* ---- Colonne d'action ---------------------------------------------------- */
.devis__action {
    display: grid;
    gap: var(--sp-15);
    align-content: start;
}

.devis__signature .card__titre {
    margin-block-end: var(--sp-11);
}

.devis__champ {
    margin-block-start: var(--sp-13);
}

.devis__consigne {
    margin: var(--sp-18) 0 var(--sp-9);
    font-size: var(--fs-meta);
    color: var(--c-body);
}

/* ---- Pad de signature ---------------------------------------------------- *
 * `touch-action: none` est INDISPENSABLE : sans lui, le geste de tracé est
 * interprété comme un défilement et la page bouge au lieu de dessiner.       */
.devis__pad {
    inline-size: 100%;
    block-size: 120px;
    background: #fafafa;
    border: 1.5px dashed #999999;
    border-radius: var(--r-9);
    touch-action: none;
    cursor: crosshair;
}

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

.devis__alternative {
    margin: var(--sp-9) 0 0;
    font-size: var(--fs-small);
    color: var(--c-meta);
    line-height: 1.5;
}

.devis__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-9);
    margin-block-start: var(--sp-15);
}

.devis__boutons .btn {
    flex: 1 1 140px;
}

/* Message d'aide tant que les deux conditions ne sont pas réunies. Orange
   d'accent, et non le rouge d'alerte : rien n'a échoué, il manque une étape. */
.devis__aide {
    margin: var(--sp-11) 0 0;
    font-size: var(--fs-label);
    color: var(--c-orange);
    line-height: 1.45;
}

.devis__aide:empty,
.devis__aide[hidden] {
    display: none;
}

/* ---- Confirmation -------------------------------------------------------- */
.devis__confirmation {
    max-inline-size: none;
}

/* Fond blanc sous la signature : un tracé noir sur le vert de l'encart
   passerait pour un élément de décor plutôt que pour un document. */
.devis__signature-image {
    display: block;
    max-inline-size: 220px;
    max-block-size: 90px;
    margin-block-start: var(--sp-13);
    padding: var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-green);
    border-radius: var(--r-8);
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
    /* Grille 1.3fr / 1fr : le devis domine, l'action accompagne. */
    .devis {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--sp-24);
        align-items: start;
    }

    .devis__entete,
    .devis__lignes th,
    .devis__lignes td {
        padding-inline: var(--sp-24);
    }

    /* Le handoff place « Télécharger le PDF » en haut à DROITE de la carte.
       Sans `nowrap`, la ligne de méta — plus longue que la moitié de la
       carte — pousse le lien à la ligne suivante. `min-inline-size: 0`
       autorise le bloc de gauche à se réduire au lieu d'imposer sa largeur
       intrinsèque, ce qui est le comportement par défaut d'un élément flex. */
    .devis__entete {
        flex-wrap: nowrap;
    }

    .devis__entete > div:first-child {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .devis__pdf {
        flex: none;
    }

    /* Le handoff demande ~90 px de haut sur desktop : la souris trace plus
       petit que le doigt, et la colonne d'action est plus étroite. */
    .devis__pad {
        block-size: 90px;
    }
}