/* ─────────────────────────────────────────────────────────────
   espace.css, l'espace client

   POURQUOI UNE FEUILLE SÉPARÉE plutôt que trois cents lignes ajoutées
   à site.css : les liens vers site.css portent l'empreinte de son
   contenu (?v=af9f9f3f). Y toucher oblige à recalculer l'empreinte et
   à la reposer sur les 37 pages du site, sinon la moitié d'entre elles
   s'affiche avec l'ancienne feuille. L'espace n'a pas à faire courir ce
   risque au site pour un bouton.

   CE FICHIER NE REDÉFINIT AUCUN JETON. Couleurs, polices, bordures au
   crayon et durées viennent de site.css, chargée juste avant.

   ATTENTION AUX NOMS. site.css possède déjà `.porte`, les cartes de
   l'accueil. Une classe `.porte` ici héritait de son `align-items:
   center` et réduisait la photo de la page d'entrée à zéro pixel de
   large. Tout ce fichier est donc préfixé `esp-`, sans exception.

   DESSINÉ D'APRÈS LA PLANCHE DU 05/09/2026 : barre latérale, tableau de
   bord, médias, statistiques, calendrier. Mesuré à 375 px d'abord, sur
   téléphone la barre latérale devient un tiroir qui s'ouvre par `:target`,
   parce qu'une colonne de navigation de 240 px sur un écran qui en fait
   375 ne laisse pas de place au contenu.
   ───────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   LA PORTE
   ══════════════════════════════════════════════ */

.esp-body--porte { min-height: 100svh; display: flex; }

.esp-porte {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100svh;
}

/* Une vraie photo de vigne, jamais un aplat. La porte est le premier
   écran que voit un client : une page de saisie nue ressemble à un
   formulaire administratif, pas à l'entrée de chez soi.
   `width: 100%` est explicite et non hérité, voir l'avertissement en
   tête de fichier sur la collision de noms. */
.esp-porte__image {
    flex: 0 0 34svh;
    width: 100%;
    background: var(--ivoire-dark) url('/assets/photos/moselle-coteaux.jpg') center 42% / cover no-repeat;
    position: relative;
}
.esp-porte__image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 5rem;
    background: linear-gradient(to bottom, transparent, var(--ivoire));
}

.esp-porte__carte {
    flex: 1;
    width: 100%;
    padding: 1.5rem var(--gutter) 2.5rem;
    max-width: 27rem;
    margin-inline: auto;
}

.esp-porte__marque {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--crayon-light);
}
.esp-porte__titre { font-size: 1.9rem; line-height: 1.15; margin: .1rem 0 .5rem; }
.esp-porte__intro {
    color: var(--crayon-light);
    font-size: .95rem;
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

.esp-porte__form { display: grid; gap: .55rem; }
.esp-porte__label { font-family: var(--font-hand); font-size: 1.15rem; color: var(--crayon); }

/* 1.35rem : au-dessous de 16 px, Safari zoome tout seul sur le champ au
   moment de la saisie et laisse la page décalée. */
.esp-porte__champ {
    font-family: var(--font-body);
    font-size: 1.35rem;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
    padding: .85rem 1rem;
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    background: #fff;
    color: var(--charbon);
    width: 100%;
}
.esp-porte__champ::placeholder { color: #b9b0a0; letter-spacing: .18em; }
.esp-porte__champ:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.esp-porte__erreur {
    background: var(--lie-bg);
    border-left: 3px solid var(--lie);
    padding: .7rem .85rem;
    margin-bottom: 1rem;
    font-size: .92rem;
    color: var(--lie);
    border-radius: 0 var(--r-hand-sm) var(--r-hand-sm) 0;
}

/* Le champ d'adresse de la porte. Distinct du champ de code : celui-là
   se lit et se corrige, l'autre se tape en aveugle. */
.esp-porte__ligne {
    width: 100%;
    font-family: var(--font-body);
    /* 16 px minimum : en dessous, Safari zoome sur le champ à la saisie
       et laisse la page décalée. */
    font-size: 1.05rem;
    padding: .8rem .9rem;
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    background: #fff;
    color: var(--charbon);
}
.esp-porte__ligne::placeholder { color: #b9b0a0; }
.esp-porte__ligne:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* Le code passe en second rideau : c'est un secours, pas la voie
   normale. Le laisser à côté du champ d'adresse ferait hésiter, et
   l'hésitation ramène au chemin le moins sûr. */
.esp-porte__secours { margin-top: 1.1rem; }
.esp-porte__secours summary {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    cursor: pointer;
    padding: .5rem 0;
    list-style-position: inside;
}
.esp-porte__secours .esp-porte__form { margin-top: .4rem; }

.esp-porte__aide {
    margin-top: 1.4rem;
    font-size: .85rem;
    color: var(--crayon-light);
    line-height: 1.5;
}
.esp-porte__aide a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 46rem) {
    .esp-porte { flex-direction: row; }
    .esp-porte__image { flex: 1 1 50%; }
    .esp-porte__image::after {
        inset: 0 0 0 auto; width: 5rem; height: auto;
        background: linear-gradient(to right, transparent, var(--ivoire));
    }
    .esp-porte__carte {
        flex: 1 1 50%;
        display: flex; flex-direction: column; justify-content: center;
        padding: 3rem 2.5rem; max-width: 32rem; margin: 0;
    }
    .esp-porte__titre { font-size: 2.4rem; }
}

/* ══════════════════════════════════════════════
   LA COQUE, barre latérale + contenu
   ══════════════════════════════════════════════ */

.esp-app { min-height: 100svh; }

/* ── Téléphone : un panneau qui s'ouvre, pas une barre du bas ──
   La barre façon application a été essayée puis retirée. Deux raisons :
   elle ne tient pas sept rubriques, à 375 px, sept cibles font 50 px de
   large -, et sur les téléphones à barre de geste elle se retrouve à des
   hauteurs différentes selon le modèle, donc jamais tout à fait sous le
   pouce.

   Le panneau s'ouvre par `:target` : une ancre dans l'adresse, une règle
   CSS. Aucun script, si espace.js ne se charge pas, le menu marche
   quand même -, et il se referme tout seul en changeant d'écran puisque
   l'ancre disparaît. Le bouton « retour » du téléphone le referme aussi,
   ce qui est exactement ce que les gens essaient en premier. */

.esp-burger {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem var(--gutter);
    background: var(--ivoire);
    border-bottom: 1px solid var(--ivoire-dark);
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--charbon);
    min-height: 3rem;
}
.esp-burger__traits { display: grid; gap: 4px; }
.esp-burger__traits i {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--charbon);
    border-radius: 2px;
}

/* Le voile : il assombrit la page et, surtout, il donne une cible à
   toucher pour refermer. Sans lui, on ouvre le menu et on cherche
   comment en sortir. */
.esp-voile { display: none; }
.esp-app:has(.esp-nav:target) .esp-voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(44, 44, 44.35);
}

.esp-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(17rem, 82vw);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem .7rem;
    background: #fff;
    border-right: 1.5px solid var(--ivoire-dark);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hors écran ET hors tabulation : un panneau seulement décalé reste
       atteignable au clavier, et le focus part alors dans le vide. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--t-moyen) var(--ease-pose), visibility var(--t-moyen);
}
.esp-nav:target {
    transform: none;
    visibility: visible;
    box-shadow: 0 0 40px rgba(44, 44, 44.22);
}

.esp-nav__marque {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-hand);
    font-size: 1.25rem;
    color: var(--charbon);
    padding: .2rem .5rem .5rem;
}
.esp-nav__marque img { width: 1.6rem; height: auto; flex-shrink: 0; }

.esp-nav__fermer {
    align-self: flex-start;
    font-size: .85rem;
    color: var(--crayon-light);
    padding: .5rem .5rem .9rem;
}

.esp-nav a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--r-hand-btn);
    font-size: .95rem;
    color: var(--crayon);
    min-height: 2.75rem;
}

/* La pastille de l'icône.
   `isolation: isolate` crée un groupe de fondu : le `multiply` de
   `.doodle-img` se calcule alors contre CETTE pastille et rien d'autre.
   Sans ça, sur l'onglet actif, fond lie foncé, le dessin se multipliait
   avec le bordeaux et disparaissait complètement. */
.esp-nav__ic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    isolation: isolate;
}
.esp-nav__ic img { width: 100%; height: auto; }

.esp-nav a.est-actif { background: var(--lie); color: #fff; }
.esp-nav a.est-actif .esp-nav__ic { background: var(--ivoire); }
.esp-nav a[aria-disabled] { opacity: .4; pointer-events: none; }
.esp-nav__bientot {
    margin-left: auto;
    font-family: var(--font-hand);
    font-size: .8rem;
    color: var(--crayon-light);
}

.esp-contenu { padding-bottom: 2rem; }

/* ══════════════════════════════════════════════
   L'EN-TÊTE DE CONTENU
   ══════════════════════════════════════════════ */

.esp-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem var(--gutter) .2rem;
    max-width: 62rem;
    margin-inline: auto;
    flex-wrap: wrap;
}
.esp-tete__mots { flex: 1 1 12rem; min-width: 0; }

.esp-bonjour {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--charbon);
}
.esp-tete__sous {
    font-size: .85rem;
    color: var(--crayon-light);
    margin-top: .1rem;
}

.esp-demo {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: .85rem;
    background: var(--jaune-bg);
    color: #8a6a1a;
    border: 1px dashed var(--jaune);
    border-radius: var(--r-hand-sm);
    padding: 0 .45rem;
    vertical-align: middle;
}

.esp-sortie {
    font-size: .8rem;
    color: var(--crayon-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: .7rem 0 .7rem .75rem;
    flex-shrink: 0;
}

.esp-zone {
    padding: .8rem var(--gutter) 1rem;
    max-width: 62rem;
    margin-inline: auto;
}

.esp-bloc { margin-bottom: 1.5rem; }
.esp-bloc__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}
.esp-bloc h2 { font-size: 1.15rem; line-height: 1.2; }
.esp-bloc__lien { font-size: .82rem; color: var(--vert); text-decoration: underline; text-underline-offset: 3px; }
.esp-sous { font-size: .85rem; color: var(--crayon-light); }

/* ══════════════════════════════════════════════
   L'ACCUEIL
   ══════════════════════════════════════════════

   La page s'ouvre sur UNE DE LEURS PHOTOS. On vend de l'image, et
   l'ancienne version ouvrait sur du texte ; le paradoxe se voyait.

   Le voile n'est pas décoratif : sans lui, une phrase blanche posée sur
   une photo est lisible sur un ciel et illisible sur une vigne. Le
   dégradé garantit le contraste quelle que soit la photo du client, ce
   qu'aucune photo choisie à la main ne peut promettre. */

.esp-couverture {
    position: relative;
    margin: 0 0 1.1rem;
    border-radius: var(--r-hand-sm);
    overflow: hidden;
    background: var(--ivoire-dark);
}
.esp-couverture img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    display: block;
}
.esp-couverture::after {
    content: '';
    position: absolute;
    inset: 30% 0 0 0;
    background: linear-gradient(to bottom, transparent, rgba(28, 24, 22, .78));
}
.esp-couverture__mots {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1rem;
    color: #fff;
}
.esp-couverture__salut {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.esp-couverture__phrase {
    font-size: .95rem;
    line-height: 1.45;
    margin-top: .15rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* ── La carte principale ──
   Ce qu'il y a à faire prend toute la largeur. Quatre tuiles du même
   poids que le contenu utile, c'est quatre fois rien mis en avant. */

.esp-une {
    display: flex;
    gap: .9rem;
    padding: .9rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-left: 4px solid var(--vert);
    border-radius: var(--r-hand-sm);
    margin-bottom: 1.4rem;
}
.esp-une--retard { border-left-color: var(--lie); }

.esp-une__image {
    flex: 0 0 6rem;
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-dark);
}
.esp-une__corps { flex: 1; min-width: 0; }

.esp-une__chapeau {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--vert);
    line-height: 1.2;
}
.esp-une--retard .esp-une__chapeau { color: var(--lie); }
.esp-une__chapeau span { color: var(--crayon-light); font-family: var(--font-body); font-size: .8rem; }
.esp-une__sujet { font-size: 1.2rem; line-height: 1.25; margin: .1rem 0 .15rem; }
.esp-une__meta { font-size: .8rem; color: var(--crayon-light); line-height: 1.4; }

/* ── Le fil du mois ──
   Un compteur « 2 / 14 » informe, il ne valorise pas. Des barres par
   semaine montrent le mois qui avance et surtout l'endroit exact où ça
   a décroché, ce qu'un total ne dira jamais. */

.esp-fil__mot { font-family: var(--font-hand); font-size: 1.05rem; color: var(--crayon-light); }

.esp-fil__legende { margin-bottom: .2rem; }
.esp-fil__barres {
    display: flex;
    align-items: flex-end;
    gap: .45rem;
    padding: .4rem 0 0;
}
.esp-fil__semaine { flex: 1 1 0; min-width: 0; text-align: center; }

/* Une bouteille qui se remplit plutôt qu'une barre. Le niveau s'arrête
   sous le goulot même à 100 % : une bouteille pleine jusqu'au bouchon ne
   ressemble à rien, et le geste qu'on connaît c'est de servir, pas de
   déborder. */
.esp-fil__bouteille {
    display: block;
    width: 100%;
    max-width: 3rem;
    height: auto;
    margin-inline: auto;
    color: var(--charbon);
}
/* L'étiquette et son chiffre sont dessinés DANS la bouteille : un
   « 2/3 » posé dessous oblige à associer deux objets du regard, posé
   dessus il se lit d'un coup. */
.esp-fil__etiquette { fill: var(--ivoire); stroke: var(--charbon); stroke-width: 1.6; }
.esp-fil__compte {
    font-family: var(--font-hand);
    font-size: 11px;
    fill: var(--charbon);
    dominant-baseline: middle;
}
.esp-fil__num { font-family: var(--font-hand); font-size: .95rem; color: var(--crayon-light); line-height: 1.15; margin-top: .3rem; }
.esp-fil__pied { margin-top: .6rem; }

@media (min-width: 46rem) {
    .esp-couverture img { height: 15rem; }
    .esp-couverture__mots { padding: 1.4rem 1.6rem; }
    .esp-couverture__salut { font-size: 2rem; }
    .esp-couverture__phrase { font-size: 1.05rem; }

    .esp-une { padding: 1.2rem; gap: 1.2rem; }
    .esp-une__image { flex-basis: 9rem; width: 9rem; height: 9rem; }
    .esp-une__sujet { font-size: 1.5rem; }

    .esp-fil__bouteille { max-width: 3.6rem; }
}

/* ══════════════════════════════════════════════
   L'ESPACE QUI VIENT D'OUVRIR
   ══════════════════════════════════════════════

   Un espace neuf n'a ni calendrier, ni photos, ni offre renseignée. Il ne
   doit surtout pas afficher des compteurs à zéro et des rangées vides :
   un outil qui a l'air cassé le premier jour ne se rouvre pas.

   Et pas de photo d'emprunt en couverture. Mettre l'image d'un autre
   domaine dans leur espace serait pire que de n'en mettre aucune. */

.esp-bandeau {
    background: var(--vert-bg);
    border-left: 4px solid var(--vert);
    border-radius: var(--r-hand-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}
.esp-bandeau__salut { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.15; }
.esp-bandeau__phrase { font-size: .95rem; line-height: 1.5; color: var(--crayon); margin-top: .15rem; }

.esp-neuf {
    background: #fff;
    border: 1.5px dashed var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: 1.3rem 1.2rem;
    margin-bottom: 1.4rem;
}
.esp-neuf h2 { font-size: 1.3rem; line-height: 1.2; margin-bottom: .5rem; }
.esp-neuf p { font-size: .95rem; line-height: 1.6; }
.esp-neuf p + p { margin-top: .6rem; }
.esp-neuf__suite { color: var(--crayon-light); }
.esp-neuf a { text-decoration: underline; text-underline-offset: 2px; }
.esp-neuf .btn { margin-top: 1rem; text-decoration: none; }

@media (min-width: 46rem) {
    .esp-bandeau { padding: 1.3rem 1.5rem; }
    .esp-bandeau__salut { font-size: 1.9rem; }
    .esp-neuf { padding: 1.8rem 2rem; }
    .esp-neuf h2 { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════
   LE LOGO DU CLIENT
   ══════════════════════════════════════════════

   C'est SON espace. Voir sa marque en haut de page vaut mieux que voir
   la nôtre, qui est déjà dans le menu et dans le pied.

   Pas de `.doodle-img` ici : un logo vient d'un fichier au fond blanc, et
   le blanc pur multiplié mangerait l'ivoire de la page. Les dessins au
   crayon sont sur papier crème, ce n'est pas la même matière. */

.esp-logo {
    max-width: 9.5rem;
    max-height: 3.2rem;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;   /* efface le blanc de la capture, pas plus */
}

@media (min-width: 46rem) {
    .esp-logo { max-width: 13rem; max-height: 4.5rem; }
}

/* ══════════════════════════════════════════════
   LES TUILES DE CHIFFRES
   ══════════════════════════════════════════════

   Deux colonnes sur téléphone. En une seule, quatre tuiles font défiler
   un écran entier avant d'atteindre le contenu utile ; en rail
   horizontal, on ne voit jamais la quatrième. */

.esp-tuiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

a.esp-tuile { color: inherit; }
/* Un chiffre cliquable doit le dire. Le décalage au doigt est le seul
   retour dont dispose un téléphone. */
a.esp-tuile:active { transform: translateY(1px); background: var(--ivoire-warm); }
@media (hover: hover) {
    a.esp-tuile:hover { border-color: var(--crayon-light); }
}
.esp-tuile {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: .7rem .65rem;
}
.esp-tuile__icone {
    flex: 0 0 3.1rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-hand-sm);
    /* Le fondu `multiply` du dessin se calcule contre CETTE pastille et
       rien d'autre : sans l'isolation, il se mélangerait au fond teinté
       de la tuile et le dessin virerait au brun. */
    isolation: isolate;
}
.esp-tuile__icone img { width: 100%; height: auto; }
.esp-tuile__chiffre {
    font-family: var(--font-hand);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--charbon);
}
.esp-tuile__quoi {
    font-size: .72rem;
    color: var(--crayon-light);
    line-height: 1.25;
    margin-top: .15rem;
}

/* Une couleur par nature de chiffre, reprise des jetons du site : le
   vin en lie, la vigne en vert, la lumière en jaune, le reste en bleu. */
.esp-tuile--lie   { border-color: rgba(107,45,62.35); }
.esp-tuile--lie   .esp-tuile__icone { background: var(--lie-bg); color: var(--lie); }
.esp-tuile--vert  { border-color: rgba(90,114,71.35); }
.esp-tuile--vert  .esp-tuile__icone { background: var(--vert-bg); color: var(--vert); }
.esp-tuile--jaune { border-color: rgba(212,168,67.45); }
.esp-tuile--jaune .esp-tuile__icone { background: var(--jaune-bg); color: #8a6a1a; }
.esp-tuile--bleu  { border-color: rgba(61,90,128.35); }
.esp-tuile--bleu  .esp-tuile__icone { background: var(--bleu-bg); color: var(--bleu); }

/* ══════════════════════════════════════════════
   LES DERNIÈRES LIVRAISONS
   ══════════════════════════════════════════════ */

.esp-livraisons { padding-top: 0; }
.esp-livraisons > * { flex: 0 0 42%; max-width: 9.5rem; }

.esp-livraison img {
    width: 100%;
    height: auto;          /* sans ça, width/height des balises figent 400 px */
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-dark);
}
.esp-livraison__nom {
    display: block;
    font-size: .78rem;
    line-height: 1.25;
    margin-top: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esp-livraison__date { display: block; font-size: .7rem; color: var(--crayon-light); }

/* `display: block` n'est pas cosmétique. C'est un <span>, donc en ligne
   par défaut : l'image qu'il contient n'avait aucune largeur de référence
   et retombait sur ses proportions d'origine. Résultat mesuré : des
   vignettes de hauteurs différentes dans une rangée censée être carrée. */
.esp-media-cadre { display: block; position: relative; }
/* La pastille de lecture dit en un coup d'œil ce qui est une vidéo. Sans
   elle, une vignette de vidéo et une photo se ressemblent exactement. */
.esp-media-cadre__type {
    position: absolute;
    left: .3rem;
    bottom: .3rem;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(44,44,44.62);
    color: #fff;
    backdrop-filter: blur(2px);
}
.esp-media-cadre__type svg { width: .8rem; height: .8rem; }

/* ══════════════════════════════════════════════
   LA PROCHAINE PUBLICATION
   ══════════════════════════════════════════════ */

.esp-prochaine {
    display: flex;
    gap: .75rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: .75rem;
}
.esp-prochaine--retard { border-color: var(--lie); border-left-width: 4px; }

.esp-prochaine img {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-dark);
}
.esp-prochaine__corps { flex: 1; min-width: 0; }
.esp-prochaine__sujet { font-size: 1rem; line-height: 1.3; }
.esp-prochaine__meta { font-size: .78rem; color: var(--crayon-light); line-height: 1.45; margin-top: .15rem; }
.esp-prochaine__quand { font-family: var(--font-hand); font-size: 1.05rem; color: var(--charbon); }
.esp-prochaine__retard {
    font-family: var(--font-hand);
    font-size: .95rem;
    color: var(--lie);
    background: var(--lie-bg);
    padding: 0 .4rem;
    border-radius: var(--r-hand-sm);
}
.esp-prochaine .btn { margin-top: .5rem; font-size: 1rem; padding: .4rem .8rem; min-height: 2.5rem; }

/* ══════════════════════════════════════════════
   LES MÉDIAS
   ══════════════════════════════════════════════ */

.esp-filtres {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}
.esp-filtres a {
    font-family: var(--font-hand);
    font-size: 1rem;
    padding: .35rem .75rem;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-btn);
    background: #fff;
    color: var(--crayon);
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
}
.esp-filtres a.est-actif { background: var(--lie); border-color: var(--lie); color: #fff; }

.esp-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}
@media (min-width: 34rem) { .esp-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } }
@media (min-width: 52rem) { .esp-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.esp-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-dark);
}
.esp-media__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    margin-top: .25rem;
}
.esp-media__nom {
    font-size: .68rem;
    color: var(--crayon-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* La flèche de téléchargement fait 16 px ; c'est le lien autour qui
   porte les 40 px de cible. */
.esp-media__prendre {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: -.3rem -.3rem -.3rem 0;
    color: var(--vert);
}
.esp-media__prendre svg { width: 1rem; height: 1rem; }

/* ══════════════════════════════════════════════
   AGIR SUR UNE PUBLICATION
   ══════════════════════════════════════════════

   Ces règles servent partout où une publication s'affiche : la carte
   « prochaine publication » de l'accueil et le détail du jour dans le
   calendrier. Elles ont été perdues une fois en remplaçant le bloc
   calendrier ; elles ont donc leur section à elles, qui ne dépend
   d'aucun écran.

   La case et la légende partagent une ligne : chacune sur la sienne,
   chaque carte grandissait de 40 px pour une information vide neuf fois
   sur dix. Mesuré à 375 px. */

.esp-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; }
/* Les boutons du site font 1.2rem de police et 1.5rem de côtés : deux
   côte à côte débordent d'un écran de 375 px. Réduits, mais toujours
   au-dessus des 44 px qu'un pouce réclame. */
.esp-actions .btn { font-size: 1.02rem; padding: .42rem .8rem; min-height: 2.5rem; }
.btn--fait { background: var(--vert) !important; border-color: var(--vert) !important; color: #fff !important; }

.esp-agir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--ivoire-dark);
}

/* La case fait 18 px, bien en dessous des 44 px qu'un doigt réclame.
   C'est le libellé qui sert de cible : il l'englobe et porte la hauteur.
   Appuyer sur le mot « Publié » coche, comme sur la case. */
.esp-coche {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 2.5rem;
    padding-right: .3rem;
}
.esp-coche input { width: 1.15rem; height: 1.15rem; accent-color: var(--vert); flex-shrink: 0; }

.esp-legende { min-width: 0; }
/* Ouverte, la légende prend la ligne entière : sinon elle s'affiche dans
   la colonne étroite laissée par la case, sur quinze caractères de large. */
.esp-legende[open] { flex: 1 1 100%; order: 2; }
.esp-legende summary {
    font-family: var(--font-hand);
    font-size: 1.02rem;
    color: var(--vert);
    cursor: pointer;
    padding: .5rem 0;      /* 44 px de cible ; à .35rem elle tombait à 39 */
    list-style-position: inside;
    white-space: nowrap;
}
.esp-legende p {
    font-size: .9rem;
    line-height: 1.55;
    padding: .5rem .7rem;
    background: var(--ivoire-warm);
    border-radius: var(--r-hand-sm);
    margin-top: .2rem;
    user-select: text;     /* sélectionnable à la main si la copie est refusée */
}
.esp-legende__mots { color: var(--bleu); font-size: .82rem !important; }

/* Le champ « un mot » n'apparaît qu'une fois la case cochée : toujours
   visible, il ajoutait une ligne par carte pour une information vide
   neuf fois sur dix, et proposait de commenter ce qui n'est pas parti. */
.esp-mot { display: none; }
.esp-detail:has(.esp-coche input:checked) .esp-mot,
.esp-prochaine:has(.esp-coche input:checked) .esp-mot {
    display: block;
    width: 100%;
    margin-top: .4rem;
    font-family: var(--font-body);
    font-size: .85rem;
    padding: .4rem .5rem;
    border: 1px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-warm);
    color: var(--charbon);
}
.esp-mot::placeholder { color: #b0a795; }
.esp-mot:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; background: #fff; }

/* Vide, il ne prend pas de place : sinon chaque carte porte 18 px de
   réserve pour un message qui n'apparaît qu'au moment où l'on coche. */
.esp-retour { font-family: var(--font-hand); font-size: 1rem; color: var(--vert); line-height: 1.2; margin-top: .25rem; }
.esp-retour:empty { display: none; }
.esp-retour--erreur { color: var(--lie); }

/* ══════════════════════════════════════════════
   LE CALENDRIER
   ══════════════════════════════════════════════

   UNE VRAIE GRILLE DE MOIS, Y COMPRIS SUR TÉLÉPHONE.
   La version précédente empilait les semaines en cartes. C'était lisible,
   mais ce n'était pas un calendrier : on ne voyait pas les TROUS, et dans
   un planning éditorial le trou est l'information la plus utile, c'est
   lui qui dit « il ne se passe rien du 10 au 17 ».

   À 375 px, une case fait 47 px. C'est assez pour un numéro et trois
   pastilles de couleur ; ça ne l'est pas pour un titre. On touche le
   jour, le détail s'ouvre dessous, à une vraie adresse. */

.esp-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--ivoire-dark);
    border: 1px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    overflow: hidden;
}

.esp-cal__jour {
    background: var(--ivoire-warm);
    text-align: center;
    padding: .35rem .1rem;
    font-family: var(--font-hand);
    font-size: .95rem;
    color: var(--crayon-light);
}
.esp-cal__jour abbr { text-decoration: none; border: none; }
.esp-cal__jour span { display: none; }     /* le nom entier, sur grand écran */

.esp-cal__case {
    background: #fff;
    min-height: 3.2rem;
    padding: .25rem .15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .22rem;
    color: inherit;
}
.esp-cal__case--hors { background: var(--ivoire-warm); }
.esp-cal__case.est-vide { color: var(--crayon-light); }

.esp-cal__num { font-size: .78rem; color: var(--crayon-light); line-height: 1.1; }
.est-aujourdhui .esp-cal__num {
    color: #fff;
    background: var(--lie);
    border-radius: 50%;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
}
.esp-cal__case.est-ouvert { background: var(--jaune-bg); box-shadow: inset 0 0 0 2px var(--jaune); }
a.esp-cal__case:active { background: var(--vert-bg); }

.esp-cal__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.esp-point {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--crayon-light);
    flex-shrink: 0;
}
.esp-point--instagram { background: var(--lie); }
.esp-point--tiktok    { background: var(--charbon); }
.esp-point--linkedin  { background: var(--bleu); }
.esp-point--stories   { background: var(--jaune); }
/* Publié : la pastille pâlit au lieu de disparaître. Elle disparaîtrait,
   et le mois se viderait à mesure qu'on avance, on perdrait la trace de
   ce qui a été fait, qui est justement ce qu'on veut montrer. */
.esp-point.est-publie { opacity: .28; }

.esp-cal__titres { display: none; }        /* les titres entiers, sur grand écran */

.esp-cal__legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .7rem;
    margin-top: .6rem;
    font-size: .78rem;
    color: var(--crayon-light);
}
.esp-cal__legende .esp-point { margin-right: -.4rem; }
.esp-cal__legende-fin { flex-basis: 100%; }

/* ── Le détail du jour ── */

.esp-detail {
    display: flex;
    gap: .8rem;
    padding: .8rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    margin-bottom: .7rem;
}
.esp-detail--retard { border-color: var(--lie); border-left-width: 4px; }

.esp-detail__vignette {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-dark);
}
.esp-detail__corps { flex: 1; min-width: 0; }
.esp-detail__quand { font-size: .8rem; color: var(--crayon-light); line-height: 1.4; }
.esp-detail__quand b { color: var(--charbon); font-family: var(--font-hand); font-size: 1.05rem; }
.esp-detail__sujet { font-size: 1.05rem; line-height: 1.3; margin: .1rem 0 .2rem; }

/* ══════════════════════════════════════════════
   NOUS ÉCRIRE, ET MES DONNÉES
   ══════════════════════════════════════════════ */

.esp-recu {
    background: var(--vert-bg);
    border-left: 3px solid var(--vert);
    border-radius: 0 var(--r-hand-sm) var(--r-hand-sm) 0;
    padding: .8rem 1rem;
    margin-bottom: .9rem;
    font-size: .95rem;
    color: var(--vert);
}

/* Le piège à robots. `left: -9999px` et non `display: none` : un script
   un peu malin ignore les champs masqués, celui-ci lui paraît normal.
   Il reste hors du parcours au clavier grâce à tabindex="-1". */
.esp-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.esp-ecrire__ligne {
    width: 100%;
    font-family: var(--font-body);
    /* 16 px minimum : en dessous, Safari zoome sur le champ à la saisie
       et laisse la page décalée. */
    font-size: 1rem;
    padding: .55rem .7rem;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-warm);
    color: var(--charbon);
}
.esp-ecrire__ligne:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; background: #fff; }
.esp-ecrire__ligne::placeholder { color: #b0a795; }


.esp-msg {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: .7rem .85rem;
    /* Le message du client est décalé à droite, le nôtre à gauche. C'est
       la convention de toutes les messageries : on sait qui parle sans
       lire le nom. */
    margin-left: 1.5rem;
}
.esp-msg--nous {
    margin-left: 0;
    margin-right: 1.5rem;
    background: var(--vert-bg);
    border-color: rgba(90, 114, 71, .3);
}
.esp-msg__qui {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon);
    line-height: 1.2;
}
.esp-msg__qui span { font-family: var(--font-body); font-size: .72rem; color: var(--crayon-light); margin-left: .3rem; }
.esp-msg__sur { font-size: .75rem; color: var(--bleu); margin-top: .1rem; }
.esp-msg__texte { font-size: .92rem; line-height: 1.55; margin-top: .25rem; }

.esp-ecrire {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: .9rem;
    display: grid;
    gap: .5rem;
    justify-items: start;
}
.esp-ecrire__sur { font-size: .8rem; color: var(--bleu); }
.esp-ecrire__label { font-family: var(--font-hand); font-size: 1.1rem; }
.esp-ecrire__champ {
    width: 100%;
    font-family: var(--font-body);
    /* 16 px minimum : en dessous, Safari zoome tout seul sur le champ au
       moment de la saisie et laisse la page décalée. */
    font-size: 1rem;
    line-height: 1.5;
    padding: .6rem .7rem;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-warm);
    color: var(--charbon);
    resize: vertical;
}
.esp-ecrire__champ:focus-visible { outline: 2px solid var(--jaune); outline-offset: 1px; background: #fff; }

.esp-panneau {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding:1rem;
    margin-bottom: .8rem;
}
.esp-panneau h3 {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    color: var(--lie);
    margin: .9rem 0 .35rem;
    line-height: 1.2;
}
.esp-panneau h3:first-child { margin-top: 0; }
.esp-panneau__texte { font-size: .92rem; line-height: 1.6; }
.esp-panneau__texte + .esp-panneau__texte { margin-top: .5rem; }
.esp-panneau a { text-decoration: underline; text-underline-offset: 2px; }
.esp-panneau .esp-liste { margin-bottom: .3rem; }

@media (min-width: 46rem) {
    .esp-msg { margin-left: 4rem; }
    .esp-msg--nous { margin-right: 4rem; }
    .esp-panneau { padding: 1.3rem 1.5rem; }
}

/* ══════════════════════════════════════════════
   MES DOCUMENTS
   ══════════════════════════════════════════════

   Devis, contrat, factures. Une ligne par document, cliquable sur toute
   sa surface : sur un téléphone, viser une petite flèche de
   téléchargement à côté d'un titre est un geste raté une fois sur trois. */

.esp-docs { display: grid; gap: .55rem; }

.esp-doc {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    color: inherit;
    min-height: 3.5rem;
}
.esp-doc:active { background: var(--ivoire-warm); }

.esp-doc__ic {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.esp-doc__ic img { width: 100%; height: auto; }

.esp-doc__corps { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.esp-doc__genre { font-size: .72rem; color: var(--crayon-light); text-transform: uppercase; letter-spacing: .04em; }
.esp-doc__titre { font-size: 1rem; line-height: 1.25; }
.esp-doc__note { font-size: .78rem; color: var(--crayon-light); }

.esp-doc__prendre {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--vert);
}
.esp-doc__prendre svg { width: 1.15rem; height: 1.15rem; }

@media (min-width: 46rem) {
    .esp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}

/* ══════════════════════════════════════════════
   MON OFFRE
   ══════════════════════════════════════════════ */

.esp-formule {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-left: 4px solid var(--lie);
    border-radius: var(--r-hand-sm);
    padding: .9rem 1rem;
}
.esp-formule__tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
    border-bottom: 1px dashed var(--ivoire-dark);
}
.esp-formule__nom { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.1; color: var(--lie); }
.esp-formule__nom span { color: var(--crayon-light); font-size: 1.1rem; }
.esp-formule__prix { font-size: .85rem; color: var(--crayon-light); margin-top: .1rem; }
.esp-formule__venue { font-size: .78rem; color: var(--crayon-light); line-height: 1.35; text-align: right; }
.esp-formule__venue b { font-family: var(--font-hand); font-size: 1.05rem; color: var(--charbon); }

.esp-formule__titre {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--crayon);
    margin: .6rem 0 .25rem;
}
.esp-liste { display: grid; gap: .3rem; }
.esp-liste li {
    position: relative;
    padding-left: 1.35rem;
    font-size: .9rem;
    line-height: 1.45;
}
/* Une coche verte et une croix lie, dessinées en CSS : deux images de
   plus pour neuf lignes de liste ne se justifient pas. */
.esp-liste--oui li::before {
    content: '';
    position: absolute;
    left: .25rem; top: .5rem;
    width: .5rem; height: .28rem;
    border-left: 2px solid var(--vert);
    border-bottom: 2px solid var(--vert);
    rotate: -45deg;
}
.esp-liste--non li { color: var(--crayon-light); }
.esp-liste--non li::before {
    content: '-';
    position: absolute;
    left: .25rem;
    color: var(--lie);
    font-weight: 700;
}

.esp-options { display: grid; gap: .7rem; }

.esp-option {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: 1rem;
}
.esp-option__ic {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    isolation: isolate;      /* le multiply se calcule contre le blanc de la carte */
    margin-bottom: .3rem;
}
.esp-option__ic img { width: 100%; height: auto; }
.esp-option__titre { font-size: 1.15rem; line-height: 1.2; }
.esp-option__accroche {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--lie);
    line-height: 1.25;
    margin: .1rem 0 .45rem;
}
.esp-option__texte { font-size: .9rem; line-height: 1.55; color: var(--crayon); }
/* L'encadré qui déconseille. C'est lui qui rend la proposition
   crédible, une offre qui ne sait pas dire quand elle est inutile
   se lit comme une réclame et se saute. */
.esp-option__quand {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--crayon-light);
    background: var(--ivoire-warm);
    border-radius: var(--r-hand-sm);
    padding: .55rem .7rem;
    margin: .6rem 0 .8rem;
}
.esp-option__quand b { color: var(--charbon); }

@media (min-width: 46rem) {
    .esp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .esp-formule { padding: 1.2rem 1.4rem; }
    .esp-formule__nom { font-size: 1.9rem; }
}

/* ══════════════════════════════════════════════
   L'ÉCRAN EN ATTENTE
   ══════════════════════════════════════════════

   Mieux vaut une page qui dit ce qu'elle attend qu'un onglet grisé : le
   client comprend que l'écran existe et à quelle condition il s'allume.
   C'est aussi, accessoirement, un argument commercial. */

.esp-attente {
    background: #fff;
    border: 1.5px dashed var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: 1.5rem 1.1rem;
    text-align: center;
}
.esp-attente svg { width: 2.4rem; height: 2.4rem; color: var(--crayon-light); opacity: .5; margin-inline: auto; }
.esp-attente h3 { font-size: 1.1rem; margin: .6rem 0 .35rem; }
.esp-attente p { font-size: .88rem; color: var(--crayon-light); line-height: 1.55; max-width: 26rem; margin-inline: auto; }
.esp-attente .btn { margin-top: .9rem; }

.esp-vide {
    font-size: .95rem;
    color: var(--crayon-light);
    background: var(--vert-bg);
    padding: 1rem;
    border-radius: var(--r-hand-sm);
}

/* ══════════════════════════════════════════════
   LE RENDEZ-VOUS ET LE PIED
   ══════════════════════════════════════════════ */

.esp-rdv {
    text-align: center;
    background: var(--vert-bg);
    border-radius: var(--r-hand-sm);
    padding: 1.4rem 1rem;
    margin-top: 1.5rem;
}
.esp-rdv h2 { margin-bottom: .3rem; font-size: 1.15rem; }
.esp-rdv .btn { margin-top: .8rem; }

.esp-pied {
    text-align: center;
    padding: 1.4rem var(--gutter) 1rem;
    font-size: .78rem;
    color: var(--crayon-light);
    line-height: 1.6;
}
.esp-pied a { text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════
   L'ORDINATEUR, la barre revient à gauche
   ══════════════════════════════════════════════
   C'est la disposition de la planche : colonne de navigation à gauche,
   contenu à droite. Elle ne s'applique qu'à partir de 46rem, là où les
   deux tiennent sans se gêner. */

@media (min-width: 46rem) {
    /* Le tiroir redevient une colonne. Il FAUT annuler ce que la version
       téléphone a posé : sans ces trois lignes, la barre latérale reste
       décalée hors écran et invisible sur ordinateur. */
    /* `.esp-nav .esp-nav__fermer` et non `.esp-nav__fermer` seul : la règle
       `.esp-nav a` qui suit vaut 0-1-1 et l'emportait sur 0-1-0. Le lien
       « Fermer » restait affiché en haut de la colonne, sur un écran où il
       n'y a rien à fermer. */
    .esp-burger, .esp-voile { display: none; }
    .esp-nav .esp-nav__fermer { display: none; }
    .esp-nav { transform: none; visibility: visible; box-shadow: none; }

    .esp-app {
        display: grid;
        grid-template-columns: 14.5rem 1fr;
        align-items: start;
    }

    /* La colonne ne doit pas être un bloc blanc posé sur le papier.
       Sur téléphone elle est blanche parce qu'elle passe PAR-DESSUS la
       page ; sur ordinateur elle est DANS la page, et le blanc pur y
       découpe un rectangle qui ne se fond avec rien. On laisse le papier
       traverser, avec un dégradé qui l'assombrit à peine vers la gauche
       et un filet clair à la place du trait franc. */
    .esp-nav {
        background: linear-gradient(to right, var(--ivoire-warm), rgba(245, 240, 232, 0));
        border-right: 1px solid rgba(44, 44, 44, .07);
        position: sticky;
        inset: 0 auto auto 0;
        top: 0;
        height: 100svh;
        flex-direction: column;
        justify-content: flex-start;
        gap: .15rem;
        padding: 1.2rem .7rem;
        border-top: none;
        border-right: 1.5px solid var(--ivoire-dark);
        box-shadow: none;
        overflow-y: auto;
    }

    .esp-nav__marque {
        display: flex;
        align-items: center;
        gap: .45rem;
        font-family: var(--font-hand);
        font-size: 1.2rem;
        color: var(--charbon);
        padding: 0 .5rem 1.1rem;
    }
    .esp-nav__marque svg { width: 1.4rem; height: 1.4rem; color: var(--lie); }

    .esp-nav a {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .6rem;
        padding: .55rem .7rem;
        font-size: .92rem;
        text-align: left;
        min-height: 2.6rem;
        border-radius: var(--r-hand-btn);
    }
    .esp-nav__ic { width: 2rem; height: 2rem; }
    .esp-nav a.est-actif { background: var(--lie); color: #fff; }
    @media (hover: hover) {
        .esp-nav a:not(.est-actif):not([aria-disabled]):hover { background: rgba(255, 255, 255, .7); }
    }
    /* Fond clair sous l'icône quand la pastille est foncée, sinon le
       dessin, fondu en `multiply`, se noie dans le bordeaux. */
    .esp-nav a.est-actif .esp-nav__ic { background: var(--ivoire); }
    /* Sur grand écran, les entrées à venir se montrent : elles disent ce
       que l'espace deviendra, et il y a la place de les afficher sans
       voler de cible à celles qui marchent. */
    .esp-nav a[aria-disabled] { display: flex; }
    .esp-nav__bientot {
        display: inline;
        margin-left: auto;
        font-family: var(--font-hand);
        font-size: .8rem;
        color: var(--crayon-light);
    }

    .esp-contenu { padding-bottom: 2rem; }
    .esp-tete { padding: 2rem 2rem .3rem; }
    .esp-zone { padding: 1rem 2rem 1.5rem; }
    .esp-bonjour { font-size: 2rem; }
    .esp-bloc h2 { font-size: 1.3rem; }

    .esp-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
    .esp-tuile { padding: .9rem .85rem; }
    .esp-tuile__chiffre { font-size: 1.7rem; }

    /* Le rail devient une rangée : sur grand écran, un rail horizontal
       cache la moitié des livraisons sans raison. */
    .esp-livraisons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        overflow: visible;
        margin-inline: 0;
        padding: 0;
    }
    .esp-livraisons > * { flex: none; max-width: none; }

    /* Le tableau de bord de la planche : livraisons à gauche, prochaine
       publication à droite. */
    .esp-duo {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 1.2rem;
        align-items: start;
    }

    .esp-prochaine img { flex-basis: 6rem; width: 6rem; height: 6rem; }

    /* ── Le calendrier sur grand écran ──
       Mêmes cases, plus hautes : la place permet d'écrire les titres au
       lieu de pastilles, et le nom entier des jours. */
    .esp-cal__jour abbr { display: none; }
    .esp-cal__jour span { display: inline; }
    .esp-cal__case {
        min-height: 6.5rem;
        align-items: stretch;
        padding: .35rem;
        gap: .25rem;
    }
    .esp-cal__num { align-self: flex-start; }
    .esp-cal__points { display: none; }
    .esp-cal__titres { display: grid; gap: .2rem; }
    .esp-cal__titres .esp-puce { font-size: .72rem; padding: .25rem .35rem; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════
   LE PILOTAGE
   ══════════════════════════════════════════════

   Il réutilise la coque de l'espace client : même tiroir sur téléphone,
   même colonne sur ordinateur, mêmes jetons. Entretenir deux chartes
   pour deux publics, c'est en laisser une pourrir.

   Ce qui change, c'est la densité. Le client vient se sentir accompagné,
   nous venons chercher un état en dix secondes. */

.esp-nav__sortie {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .85rem;
    color: var(--crayon-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.esp-fil-ariane { font-size: .78rem; color: var(--crayon-light); margin-bottom: .1rem; }
.esp-fil-ariane a { color: var(--vert); text-decoration: underline; text-underline-offset: 2px; }

/* ── Les cartes de chiffres ── */
.esp-cartes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: 1.4rem;
}
.esp-carte {
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding: .8rem .85rem;
}
.esp-carte--rouge { border-color: rgba(107, 45, 62, .45); background: var(--lie-bg); }
.esp-carte__quoi { font-size: .74rem; color: var(--crayon-light); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.esp-carte__chiffre { font-family: var(--font-hand); font-size: 1.65rem; line-height: 1.1; margin-top: .2rem; }
.esp-carte--rouge .esp-carte__chiffre { color: var(--lie); }
.esp-carte__note { font-size: .74rem; color: var(--crayon-light); margin-top: .1rem; }

/* ── Les alertes, cliquables ──
   Une alerte qui ne mène pas à l'endroit du problème oblige à le
   retrouver soi-même, et on finit par ne plus la lire. */
.esp-alertes { display: grid; gap: .4rem; }
.esp-alerte {
    display: block;
    font-size: .9rem;
    line-height: 1.4;
    padding: .6rem .8rem;
    border-radius: var(--r-hand-sm);
    border-left: 3px solid var(--crayon-light);
    background: #fff;
    color: inherit;
}
a.esp-alerte:active { transform: translateY(1px); }
@media (hover: hover) { a.esp-alerte:hover { filter: brightness(.97); } }
.esp-alerte b { font-family: var(--font-hand); font-size: 1.15rem; margin-right: .18rem; }
.esp-alerte--rouge { border-left-color: var(--lie);     background: var(--lie-bg);   color: var(--lie); }
.esp-alerte--bleu  { border-left-color: var(--bleu);    background: var(--bleu-bg);  color: var(--bleu); }
.esp-alerte--jaune { border-left-color: var(--jaune);   background: var(--jaune-bg); color: #8a6a1a; }
.esp-alerte--vert  { border-left-color: var(--vert);    background: var(--vert-bg);  color: var(--vert); }
.esp-alerte--gris  { border-left-color: var(--crayon-light); color: var(--crayon-light); }

/* ── La liste des maisons ──
   Une ligne cliquable sur toute sa surface. Viser un nom de dix
   caractères au pouce est un geste raté une fois sur trois. */
.esp-liste-clients { display: grid; gap: .5rem; }

.esp-client {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .6rem;
    align-items: center;
    padding: .75rem .9rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    color: inherit;
    min-height: 3.5rem;
}
.esp-client--alerte { border-left: 4px solid var(--lie); }
.esp-client:active { background: var(--ivoire-warm); }
.esp-client__nom { font-size: 1.05rem; line-height: 1.25; }
.esp-client__offre {
    grid-column: 1;
    font-size: .78rem;
    color: var(--crayon-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esp-client__jauge {
    grid-column: 1;
    height: .4rem;
    background: var(--ivoire-warm);
    border: 1px solid var(--ivoire-dark);
    border-radius: 99px;
    overflow: hidden;
    margin-top: .25rem;
}
.esp-client__jauge span { display: block; height: 100%; background: var(--vert); }
.esp-client__chiffres { grid-column: 1; font-size: .78rem; color: var(--crayon-light); margin-top: .15rem; }
.esp-client__chiffres b { color: var(--lie); margin-left: .3rem; }
.esp-client__fleche {
    grid-column: 2;
    grid-row: 1 / -1;
    font-size: 1.6rem;
    color: var(--crayon-light);
    line-height: 1;
}

.esp-pastille {
    font-family: var(--font-body);
    font-size: .68rem;
    color: #fff;
    background: var(--lie);
    border-radius: 99px;
    padding: .1rem .45rem;
    margin-left: .3rem;
    vertical-align: middle;
}
.esp-nav .esp-pastille { margin-left: auto; }

/* ── La saisie du chiffre d'affaires ── */
.esp-saisie {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem .7rem;
    background: #fff;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    padding:1rem;
}
.esp-saisie__champ { display: grid; gap: .2rem; }
.esp-saisie__champ--large { grid-column: 1 / -1; }
.esp-saisie__champ label { font-family: var(--font-hand); font-size: 1.02rem; color: var(--crayon); }
.esp-saisie input, .esp-saisie select {
    font-family: var(--font-body);
    /* 16 px minimum : en dessous, Safari zoome sur le champ à la saisie
       et laisse la page décalée. */
    font-size: 1rem;
    padding: .5rem .6rem;
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    background: var(--ivoire-warm);
    color: var(--charbon);
    width: 100%;
}
.esp-saisie input:focus-visible, .esp-saisie select:focus-visible {
    outline: 2px solid var(--jaune); outline-offset: 1px; background: #fff;
}
.esp-saisie__bouton { grid-column: 1 / -1; }

.esp-retirer {
    color: var(--crayon-light);
    font-size: 1.2rem;
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: var(--r-hand-sm);
}
.esp-retirer:active { background: var(--lie-bg); color: var(--lie); }

/* ── Les tableaux ──
   Ils débordent volontiers sur téléphone : ils défilent dans leur propre
   cadre plutôt que de pousser la page entière. */
.esp-tableau {
    overflow-x: auto;
    border-radius: var(--r-hand-sm);
    border: 1.5px solid var(--ivoire-dark);
    background: #fff;
}
.esp-tableau table { border-collapse: collapse; width: 100%; }
.esp-tableau th, .esp-tableau td { text-align: left; padding: .55rem .7rem; font-size: .87rem; }
.esp-tableau thead th {
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--crayon-light);
    background: var(--ivoire-warm);
    border-bottom: 1px solid var(--ivoire-dark);
    white-space: nowrap;
}
.esp-tableau tbody th { font-weight: 400; color: var(--crayon-light); width: 8rem; }
.esp-tableau tbody tr + tr td, .esp-tableau tbody tr + tr th { border-top: 1px solid var(--ivoire-dark); }
.esp-tableau tbody tr.est-bientot { background: var(--jaune-bg); }
.esp-tableau td em { color: var(--crayon-light); font-style: normal; font-size: .78rem; }
.esp-tableau .est-nombre { text-align: right; white-space: nowrap; }
.esp-tableau a { text-decoration: underline; text-underline-offset: 2px; }
.esp-tableau form { display: inline; }
.esp-manque { color: #b0a795; }

.esp-maison__vide {
    font-size: .88rem;
    color: var(--crayon-light);
    background: var(--ivoire-warm);
    border-radius: var(--r-hand-sm);
    padding: .7rem .85rem;
    margin-bottom: 1rem;
}

@media (min-width: 46rem) {
    .esp-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
    .esp-carte { padding: 1rem; }
    .esp-carte__chiffre { font-size: 2rem; }
    .esp-saisie { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.2rem 1.4rem; }
    .esp-saisie__champ--large { grid-column: span 2; }
    .esp-client { grid-template-columns: 14rem 1fr auto; align-items: center; gap: .2rem 1.2rem; }
    .esp-client__nom { grid-column: 1; grid-row: 1 / -1; }
    .esp-client__offre, .esp-client__jauge, .esp-client__chiffres { grid-column: 2; }
    .esp-client__fleche { grid-column: 3; }
    .esp-tableau tbody th { width: 10rem; }
}