/* =============================================================================
   La feuille de style de la plateforme consultant.

   ── POURQUOI UN FICHIER, ET PAS UN BLOC <style> DANS LE GABARIT ────────────
   Le style vivait dans `layouts/app.blade.php` : renvoyé en entier à chaque page, jamais
   mis en cache par le navigateur, et invisible pour qui cherche « où est le style ».
   Ici il est servi statiquement par le serveur web, mis en cache, et il a une adresse.

   ── POURQUOI PAS TAILWIND ──────────────────────────────────────────────────
   Tailwind est déclaré dans `package.json` et dans `resources/css/app.css` mais AUCUNE vue
   ne le charge et `public/build` n'existe pas : il est mort depuis le début. Le brancher
   ajouterait Node et une étape de compilation à la chaîne de déploiement — pour 22 vues dont
   le style tient ici. Une étape de compilation de moins, c'est une panne de déploiement de
   moins le jour où on déploie depuis une machine qu'on n'a pas sous la main.

   ── POURQUOI AUCUNE POLICE EXTERNE ─────────────────────────────────────────
   ⚠ Charger une police depuis un service tiers envoie l'adresse IP de CHAQUE client, à CHAQUE
   page vue, à ce tiers. Sur une plateforme dont l'hébergement fait déjà l'objet d'une
   évaluation au titre de l'article 17 de la Loi 25, c'est une communication de renseignement
   qu'on ajouterait gratuitement, pour une question de goût. Les polices système suffisent.

   ORDRE DU FICHIER : jetons · socle · structure · navigation · contenu · tableaux ·
   formulaires · états · document · téléphone · impression.
   ========================================================================== */

/* ─── 1. Les jetons ────────────────────────────────────────────────────── */

:root {
    color-scheme: light dark;

    --fond: #f6f6f4;
    --carte: #fff;
    --bord: #e3e3e0;          /* sépare des zones : peut rester discret */
    --bord-champ: #8a8a87;    /* borde un élément d'interface : 3,46:1, exigence WCAG 1.4.11 */
    --texte: #1b1b18;
    --doux: #63625f;          /* 6,04:1 sur blanc — l'ancien #706f6c tombait sous le seuil à .75rem */
    --accent: #1b1b18;
    --accent-texte: #fff;

    /* La seule couleur d'identité du produit. Marque, liens, repère de page courante. */
    --marque: #14524c;

    /* Les trois états. Chacun a sa variante sombre : un littéral en dur n'en a pas. */
    --succes: #1e5b2c;
    --succes-fond: #eefaf0;
    --succes-bord: #bcdcc3;
    --attention: #6b4c00;
    --attention-fond: #fff6e0;
    --attention-bord: #e6c77a;
    --alerte: #8c1d1d;
    --alerte-fond: #fdeaea;
    --alerte-bord: #f3c6c6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #131311;
        --carte: #1c1c1a;
        --bord: #2d2d2b;
        --bord-champ: #6b6b68;
        --texte: #ededec;
        --doux: #a9a9a6;
        --accent: #ededec;
        --accent-texte: #1b1b18;

        --marque: #6fbcb2;

        --succes: #adddb8;
        --succes-fond: #16291a;
        --succes-bord: #2c5334;
        --attention: #ffe8a3;
        --attention-fond: #332a10;
        --attention-bord: #5c4a12;
        --alerte: #f5b8b8;      /* le #8c1d1d en dur tombait à 1,88:1 sur fond sombre */
        --alerte-fond: #3a1a1a;
        --alerte-bord: #5c2626;
    }
}

/* ─── 2. Le socle ──────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--fond);
    color: var(--texte);
    /* Les chiffres du produit sont des montants et des heures : ils s'alignent toujours. */
    font-variant-numeric: tabular-nums;
}

/*
 * ⭐ UNE SEULE RÈGLE DE FOCUS, POUR TOUT CE QUI SE FOCALISE.
 * Le focus n'était déclaré que sur les champs : liens de menu, boutons et liens de tableau
 * retombaient sur l'anneau par défaut du navigateur, qui disparaît sur certains fonds.
 * Naviguer au clavier sans savoir où on est, ce n'est pas naviguer.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--texte);
    outline-offset: 2px;
    border-radius: .2rem;
}

/* Le lien d'évitement : hors écran jusqu'à ce qu'on le focalise au clavier. */
.evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: .6rem 1rem;
    background: var(--carte);
    border: 1px solid var(--bord-champ);
    border-radius: 0 0 .4rem 0;
    color: var(--texte);
    text-decoration: none;
    font-weight: 600;
}
.evitement:focus-visible { left: 0; }

/* Visible d'un lecteur d'écran, invisible à l'œil. */
.pour-lecteur {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── 3. La structure ──────────────────────────────────────────────────── */

.cadre {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    min-height: 100vh;
}

main {
    padding: 2rem 2.25rem 4rem;
    max-width: 64rem;
    min-width: 0;   /* sans quoi une grille refuse de laisser rétrécir son contenu */
}

h1 {
    margin: 0 0 .3rem;
    font-size: 1.45rem;
    letter-spacing: -.01em;
}

.sous {
    margin: 0 0 1.9rem;
    color: var(--doux);
    font-size: .875rem;
    max-width: 46rem;
}

/* ─── 4. La navigation ─────────────────────────────────────────────────── */

nav {
    background: var(--carte);
    border-right: 1px solid var(--bord);
    padding: 1.35rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

nav .marque {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--marque);
}

nav .profil {
    font-size: .6875rem;
    color: var(--doux);
    margin-bottom: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/*
 * Les onze liens étaient à plat. Un titre de groupe tous les trois ou quatre liens suffit
 * à transformer une liste en plan : on s'engage, on livre, on encaisse, on écoute.
 * Les groupes viennent du CATALOGUE, pas d'une liste écrite ici.
 */
nav .groupe {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--doux);
    margin: 1.15rem 0 .35rem .6rem;
}
nav .groupe:first-of-type { margin-top: .3rem; }

nav a {
    display: block;
    padding: .48rem .6rem;
    border-radius: .35rem;
    color: inherit;
    text-decoration: none;
    font-size: .875rem;
    border-left: 2px solid transparent;
}
nav a:hover { background: var(--fond); }

nav a[aria-current="page"] {
    background: var(--fond);
    border-left-color: var(--marque);
    font-weight: 600;
}

nav .pied {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--bord);
}

nav button {
    width: 100%;
    padding: .48rem .6rem;
    font: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--doux);
}
nav button:hover { background: var(--fond); color: var(--texte); }

/* ─── 5. Le contenu ────────────────────────────────────────────────────── */

.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: .6rem;
    padding: 1.25rem;
    margin-bottom: 1.35rem;
    min-width: 0;
}

/*
 * ⭐ L'ÉCHELLE TYPOGRAPHIQUE TENAIT DANS UN FACTEUR 1,07.
 * Le corps est à 15 px et `.carte h2` était à 16 px : un titre de section ne se distinguait
 * pas d'une phrase. Une page où rien ne hiérarchise se relit deux fois.
 *
 * Le titre de carte devient une ÉTIQUETTE de section — le traitement que la feuille employait
 * déjà pour les en-têtes de colonne, et qui marche pour la même raison : il s'efface pour que
 * le contenu porte le poids. L'écart utile n'est pas « plus gros », c'est « d'une autre
 * nature ». Rien à inventer, le dispositif existait et ne servait qu'une fois.
 */
.carte h2 {
    margin: 0 0 1.1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bord);
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--doux);
}

a.lien { color: var(--marque); }
a.lien:hover { text-decoration-thickness: 2px; }

/*
 * ⭐ LES NOMBRES SONT LA CHARGE UTILE DE CE PRODUIT.
 * Un total d'heures, un montant, un taux de rattachement : ils pesaient exactement autant
 * qu'une étiquette de colonne. Une page où rien ne ressort est une page qu'on relit deux fois.
 */
.chiffre {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
.chiffre.grand { font-size: 1.6rem; font-weight: 600; }
.chiffre.doux { color: var(--doux); font-weight: 500; }

/* L'aide sous un champ, et la légende sous un chiffre. */
.aide {
    display: block;
    font-size: .75rem;
    color: var(--doux);
    margin-top: .2rem;
}

/* ─── 6. Les tableaux ──────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

th, td {
    text-align: left;
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--bord);
}

th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--doux);
    font-weight: 600;
}

th[scope="row"] {
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    color: var(--texte);
}

td.nombre, th.nombre { text-align: right; }
tr:last-child td { border-bottom: 0; }

caption {
    text-align: left;
    font-size: .75rem;
    color: var(--doux);
    padding-bottom: .5rem;
}

/*
 * Un état vide qui ne dit pas quoi faire est un défaut, pas un détail.
 * Le gabarit à suivre est celui de l'écran des comparables : dire POURQUOI c'est vide.
 */
.vide {
    padding: 1.6rem .5rem;
    color: var(--doux);
    font-size: .875rem;
}

/* ─── 7. Les formulaires ───────────────────────────────────────────────── */

/*
 * ⚠ DÉQUALIFIÉE. La règle s'écrivait `form.ligne`, donc six `<div class="ligne">` — dans le
 * bilan et les deux écrans d'estimation — ne recevaient AUCUNE mise en page : les champs
 * s'empilaient verticalement au lieu de se ranger en ligne. Une classe qui ne s'applique que
 * sur un élément précis est un piège : celui qui la réutilise ailleurs ne voit rien se passer
 * et cherche l'erreur dans son balisage.
 */
.ligne {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    align-items: flex-end;
}
.ligne > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--doux);
}

input, select, textarea {
    padding: .45rem .55rem;
    font: inherit;
    font-size: .875rem;
    color: inherit;
    background: var(--carte);
    border: 1px solid var(--bord-champ);   /* 3,46:1 — l'ancien --bord était à 1,29:1 */
    border-radius: .35rem;
    max-width: 100%;
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--alerte);
    border-width: 2px;
}

/*
 * Le champ de montant. Le symbole est DANS le champ, pas dans l'étiquette.
 * L'écran disait « Montant ferme ($) » au-dessus d'un champ qui attendait des cents :
 * taper 12000 en pensant 12 000 $ écrivait 120,00 $ sur un document contractuel.
 * L'unité doit être là où l'œil se pose au moment de taper.
 */
.champ-montant {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bord-champ);
    border-radius: .35rem;
    background: var(--carte);
    max-width: 12rem;
}
.champ-montant:focus-within { outline: 2px solid var(--texte); outline-offset: 2px; }
.champ-montant > span {
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    color: var(--doux);
    font-size: .875rem;
    border-right: 1px solid var(--bord);
    background: var(--fond);
    border-radius: .3rem 0 0 .3rem;
}
.champ-montant > input {
    border: 0;
    background: transparent;
    border-radius: 0 .3rem .3rem 0;
    width: 100%;
    text-align: right;
}
.champ-montant > input:focus-visible { outline: none; }

button.action {
    padding: .5rem .95rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--accent);
    border-radius: .35rem;
    background: var(--accent);
    color: var(--accent-texte);
}
button.action:hover { opacity: .9; }

/*
 * ⭐ DEUX NIVEAUX, PAS TROIS.
 * « Enregistrer le brouillon » (réversible) et « Figer et envoyer » (irréversible, visible
 * du client, non annulable) portaient exactement le même bouton. La différence doit se lire
 * comme une différence de NATURE, pas d'urgence : donc un contour plein plutôt qu'une
 * couleur d'alarme. On ne crie pas, on distingue.
 */
button.action.engage {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--texte);
}
button.action.engage:hover { background: var(--accent); color: var(--accent-texte); opacity: 1; }

button.action[disabled],
button.action[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
}

/*
 * Une action qui ne se corrige pas — clôturer un mandat, verrouiller une prise — ne se met
 * pas dans une phrase grise à côté de trois liens de navigation. Elle vit dans son propre
 * bloc, avec sa conséquence écrite juste à côté d'elle. Et surtout : PAS DE ROUGE. Le rouge
 * dit « attention, danger » ; ici il s'agit d'une décision normale et assumée, qu'il faut
 * simplement prendre en sachant qu'on ne reviendra pas dessus.
 */
.irreversible {
    border-top: 1px solid var(--bord);
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.irreversible .aide { margin: 0; max-width: 32rem; }

button.discret {
    padding: .4rem .7rem;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    border: 1px solid var(--bord-champ);
    border-radius: .35rem;
    background: transparent;
    color: var(--texte);
}

/* ─── 8. Les états : avis et étiquettes ────────────────────────────────── */

.avis {
    padding: .75rem .9rem;
    border-radius: .45rem;
    font-size: .8125rem;
    border: 1px solid var(--bord);
    background: var(--fond);
    margin-bottom: 1.35rem;
}
.avis strong { font-weight: 650; }

.avis.succes    { border-color: var(--succes-bord);    background: var(--succes-fond);    color: var(--succes); }
.avis.attention { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention); }
.avis.erreur    { border-color: var(--alerte-bord);    background: var(--alerte-fond);    color: var(--alerte); }

.avis a { color: inherit; }

/*
 * L'étiquette est l'indicateur d'état universel du produit. Elle existait, avec une bordure
 * à 1,29:1 qui la faisait lire comme du texte gris plutôt que comme une pastille.
 *
 * ⚠ AUCUN ÉTAT N'EST SIGNALÉ PAR LA COULEUR SEULE. Le mot reste dans l'étiquette — « en
 * retard », « envoyée », « brouillon ». La couleur confirme, elle n'informe jamais toute
 * seule : environ 8 % des hommes ne la distinguent pas.
 */
.etiquette {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 1rem;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .01em;
    border: 1px solid var(--bord-champ);
    color: var(--doux);
    background: var(--carte);
    white-space: nowrap;
}
.etiquette.calme     { border-color: var(--bord);          color: var(--doux); }
.etiquette.actif     { border-color: var(--succes-bord);   background: var(--succes-fond);    color: var(--succes); }
.etiquette.attention { border-color: var(--attention-bord); background: var(--attention-fond); color: var(--attention); }
.etiquette.alerte    { border-color: var(--alerte-bord);   background: var(--alerte-fond);    color: var(--alerte); }

/* Un écart favorable et un écart défavorable, distingués autrement que par la couleur. */
.ecart::before { font-weight: 700; margin-right: .2rem; }
.ecart.favorable   { color: var(--succes); }
.ecart.favorable::before   { content: "▲"; }
.ecart.defavorable { color: var(--alerte); }
.ecart.defavorable::before { content: "▼"; }

/* ─── 9. Le document rendu ─────────────────────────────────────────────── */

/* Une offre doit se lire comme un document, pas comme une page d'application. */
.document { max-width: 44rem; }
.document h1 { font-size: 1.3rem;  margin: 1.7rem 0 .5rem; }
.document h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.document h3 { font-size: .95rem;  margin: 1.25rem 0 .4rem; }
.document p, .document li { line-height: 1.65; }
.document blockquote {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-left: 3px solid var(--marque);
    background: var(--fond);
    border-radius: 0 .35rem .35rem 0;
}
.document table { margin: 1rem 0; }
.document hr { border: 0; border-top: 1px solid var(--bord); margin: 1.85rem 0; }
.document code { font-size: .875em; }

/* Un trou non comblé ne part jamais en silence — ni à l'écran, ni sur le papier. */
mark.trou {
    background: var(--attention-fond);
    color: var(--attention);
    border: 1px solid var(--attention-bord);
    padding: .05rem .3rem;
    border-radius: .25rem;
    font-size: .875em;
    font-weight: 650;
}

/* ─── 10. Le téléphone ─────────────────────────────────────────────────── */

@media (max-width: 48rem) {
    /*
     * La barre latérale devenait un bloc de onze liens empilés : environ 567 px de menu
     * avant le premier mot de contenu. Elle devient une bande horizontale défilante.
     * Aucun JavaScript — le produit n'en a aucun, et c'est une qualité à préserver.
     */
    .cadre {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;   /* sinon la nav se partage la hauteur à parts égales */
    }

    nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: center;
        gap: .35rem;
        padding: .6rem .75rem;
        border-right: 0;
        border-bottom: 1px solid var(--bord);
        -webkit-overflow-scrolling: touch;
    }
    nav .marque { white-space: nowrap; margin-right: .5rem; }
    nav .profil, nav .groupe { display: none; }   /* les groupes ne se lisent pas en bande */
    nav a {
        white-space: nowrap;
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: .3rem .3rem 0 0;
        padding: .6rem .7rem;          /* cible tactile : ~42 px de haut */
    }
    nav a[aria-current="page"] { border-bottom-color: var(--marque); }
    nav .pied { margin: 0 0 0 auto; padding: 0 0 0 .5rem; border: 0; }
    nav button { width: auto; white-space: nowrap; padding: .6rem .7rem; }

    main { padding: 1.25rem 1rem 3rem; }

    /*
     * Un tableau plus large que l'écran faisait défiler la PAGE entière, nav comprise.
     * Le défilement redevient contenu dans la carte.
     */
    .carte { overflow-x: auto; padding: 1rem; }

    /* Les min-width posés en style en ligne débordent la largeur d'un téléphone. */
    form.ligne > div, .ligne > div { min-width: 0 !important; width: 100%; }
    .champ-montant { max-width: 100%; }
}

/*
 * ⭐ LE ZOOM AUTOMATIQUE D'iOS.
 * Un champ sous 16 px déclenche un zoom à la mise au point, et iOS ne dézoome pas ensuite.
 * Le client le rencontre à la seconde exacte où il choisit son mot de passe.
 * La requête porte sur le POINTEUR, pas sur la largeur : un ordinateur en fenêtre étroite
 * garde ses champs à leur taille.
 */
@media (hover: none) and (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
    nav a, button { min-height: 44px; display: flex; align-items: center; }
    nav a { display: inline-flex; }
}

/* ─── 11. L'impression ─────────────────────────────────────────────────── */

@media print {
    nav, .action, form, .avis, .evitement { display: none !important; }
    body { background: #fff; color: #000; }
    main { padding: 0; max-width: none; }
    .cadre { display: block; }
    .carte { border: 0; padding: 0; background: transparent; overflow: visible; }
    /* La couleur disparaît à l'impression : le trou garde un contour pour rester visible. */
    mark.trou { background: #fff; color: #000; border: 1px solid #000; }
    .etiquette { border-color: #000; color: #000; background: transparent; }
    a { color: #000; }
}

/* ─── 12. Les pages autonomes (connexion, invitation) ──────────────────── */

/*
 * Connexion et invitation vivent hors du gabarit : elles n'ont pas de menu, et la seconde est
 * vue par quelqu'un qui n'a pas encore de compte. Elles portaient chacune leur propre bloc de
 * style — quarante lignes dupliquées qui ont DÉRIVÉ : la page d'invitation avait perdu la
 * variante sombre de son bloc d'erreur et sa règle de focus. Deux pages jumelles doivent
 * partager la même feuille, sinon l'une vieillit sans que personne ne la regarde.
 */
body.page-seule {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.page-seule .carte {
    width: min(100%, 25rem);
    padding: 2rem;
    margin: 0;
    border-radius: .75rem;
}

.page-seule h1 { font-size: 1.2rem; margin: 0 0 .3rem; }
.page-seule .sous { margin: 0 0 1.5rem; }

.page-seule label { display: block; margin-bottom: .35rem; font-size: .8125rem; }
.page-seule input[type=email],
.page-seule input[type=password],
.page-seule input[type=text] {
    width: 100%;
    padding: .55rem .7rem;
    margin-bottom: .3rem;
}
.page-seule .aide { margin: 0 0 1rem; }
.page-seule .memoire {
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 0 1.25rem; font-size: .875rem;
}
.page-seule .memoire input { margin: 0; width: auto; }
.page-seule .memoire label { margin: 0; font-weight: 400; font-size: .875rem; color: var(--texte); }
.page-seule button.action { width: 100%; padding: .65rem; }

/* Qui invite, pour quel projet : le client doit le lire avant de taper un mot de passe. */
.page-seule .qui {
    margin: 0 0 1.4rem;
    padding: .85rem .9rem;
    border-radius: .45rem;
    background: var(--fond);
    border: 1px solid var(--bord);
    font-size: .875rem;
    line-height: 1.5;
}
.page-seule .qui strong { font-weight: 650; }

/* ─── 13. L'offre côté client : un document, pas une carte ─────────────── */

/*
 * Le seul objet contractuel de la page du client pesait autant qu'un tableau d'étapes.
 * Un document se reconnaît à trois choses : un en-tête qui le nomme et le date, un corps en
 * serif à une mesure de lecture, et une conclusion — ici le montant — séparée par un filet.
 * La même famille de caractères que la version imprimable : ce que le client lit à l'écran
 * est ce qu'il déposera sur la table de son conseil.
 */
.offre-client { max-width: 46rem; }

.offre-client .offre-entete {
    border-bottom: 2px solid var(--texte);
    padding-bottom: .8rem;
    margin-bottom: 1.4rem;
}
.offre-client .offre-entete h3 {
    margin: 0 0 .3rem;
    font: 600 1.4rem/1.25 Georgia, "Times New Roman", serif;
    letter-spacing: -.01em;
}
.offre-client .offre-meta { margin: 0; color: var(--doux); font-size: .8125rem; }

.offre-client .document {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    line-height: 1.7;
}
.offre-client .document h1,
.offre-client .document h2,
.offre-client .document h3 { font-family: Georgia, "Times New Roman", serif; }

.offre-client .offre-montant {
    margin: 1.6rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bord);
    font-size: 1.1rem;
}

@media (max-width: 48rem) {
    .offre-client .document { font-size: .95rem; }
    .offre-client .offre-entete h3 { font-size: 1.2rem; }
}

/* ─── 14. Le tableau de suivi : le relief vient du fond ────────────────── */

/*
 * Colonne et carte portaient la même boîte — deux rectangles identiques imbriqués. La colonne
 * prend le fond de page et perd sa bordure ; les cartes gardent la leur. Le relief vient du
 * contraste des fonds, jamais d'une ombre portée. Et une colonne vide garde une hauteur : sinon
 * la ligne de base du tableau s'affaisse là où il n'y a rien.
 */
.tableau-colonnes {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}
.tableau-colonne {
    flex: 1;
    min-width: 17rem;
    background: var(--fond);
    border-radius: .6rem;
    padding: .9rem;
}
.tableau-colonne h2 { margin-bottom: .8rem; }
.tableau-carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: .45rem;
    padding: .6rem .7rem;
    margin-bottom: .6rem;
}
.tableau-colonne .vide { min-height: 5rem; display: flex; align-items: center; padding: .5rem; }