/* =========================================================
   Accueil - « Ce que ça fait » : une planche avant / après par usage.
   EXTENSION de la charte CastorDev, à valider par Thomas : une passe
   de 3 s au plus par planche, 480 ms par geste, 12 px de déplacement,
   ni opacité ni boucle ; l'état final est le style par défaut (sans JS,
   mouvement réduit, impression). Pictogrammes au trait de 2 px : viseur
   (01), onde (02), semaines (04). papier-2 = ce qui arrive du dehors ;
   gris -> encre = lu. Dans ce fichier, les animations n'existent que
   sous .md-anim (celle du hero vit sous .fd-joue, dans home.css).
   Le ventre surligne deux choses sur l'accueil, en plus du survol des
   boutons et d'un lien, à valider par Thomas : dans les planches, ce
   qu'il faut relire avant de valider (dans la 01 et la 03, le doute
   est aussi dit en toutes lettres : « à relire », « à vérifier ») ;
   dans le hero, la phrase à retenir (« une fois », surlignée une seule
   fois par visite, fin de la partie HERO de home.css). Là, gris ->
   encre ne veut pas dire « lu » : on n'écrit jamais en gris sur le
   ventre. Les deux disent « posez l'œil ici ». À la taille de texte
   par défaut et jusqu'à 390 px de large, ils ne sont jamais à l'écran
   ensemble ; avec un texte plus petit, sur un grand téléphone, une
   tablette ou un ordinateur, ils peuvent l'être.
   Le fil d'encre de l'accueil (trait.css, trait.js), lui, suit le
   défilement, à valider par Thomas : un seul fil par page, 2 px, encre
   (sur-bande sur la bande), un trait sur le filet qui ouvre chaque
   Entrée et sur celui de l'appel final, jamais sous un texte ni un
   bouton ; il entre par un bout et ressort par l'autre (seules
   l'ouverture du prix et la descente dans le bouton principal restent) ;
   il avance et recule avec le défilement, ne part jamais seul ;
   transform seul, un seul morceau en mouvement à la fois ; rien ne
   bouge tant que « une fois » est à l'écran. Mouvement réduit, couleurs
   forcées : pas de fil.
   ========================================================= */

/* ---------- LA LISTE : des Entrées, comme une notice ---------- */
.md-usages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
}

.md-usage {
    min-width: 0;
    padding: 1.75rem 0 2rem;
    border-top: 1px solid var(--filet);
}

/* ferme le bloc : les deux dernières Entrées portent le filet du bas */
.md-usage:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--filet);
}

/* index, titre, planche, texte, lien alignés d'une colonne à l'autre */
@supports (grid-template-rows: subgrid) {
    .md-usage {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        align-content: start;
    }
}

.md-index {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: var(--encre-2);
    margin-bottom: .9rem;
}

.md-ex {
    color: var(--gris);
}

.md-usage h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.md-texte {
    font-size: var(--text-base);
    color: var(--gris);
    margin: 0;
    max-width: 46ch;
}

.md-lien {
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: .5rem;
    font-weight: 500;
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--fourrure);
    text-decoration-thickness: var(--epaisseur-trait);
}

.md-lien:hover {
    color: var(--fourrure-texte);
}

/* ---------- LA PLANCHE ---------- */
.md-planche {
    --courbe: cubic-bezier(.2, 0, 0, 1);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1.5rem;
    row-gap: 1.25rem;
    margin: 0 -2px 1.5rem;   /* 2 px de chaque côté : le ventre déborde du texte sans être rogné */
    padding: 0 2px;
    overflow-x: clip;
    color: var(--encre);
}

/* l'après passe sous l'avant quand il n'a plus ses 19,5rem */
.md-avant {
    flex: 1 1 12rem;
}

.md-apres {
    flex: 999 1 19.5rem;
    min-width: 0;
}

/* le style global des paragraphes (marge, gris) ne s'applique pas ici */
.md-planche p {
    margin: 0;
    color: inherit;
}

.md-planche .md-lib {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: .5rem;
}

/* ---------- CE QUI ARRIVE DU DEHORS : papier-2, sans contour ---------- */
.md-objet {
    position: relative;
    background: var(--papier-2);
    padding: .75rem;
}

.md-planche .md-objet-titre {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre-2);
    margin-bottom: .5rem;
}

.md-planche .md-l {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: .04em;
    line-height: 1.6;
    color: var(--encre);
}

.md-planche .md-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: var(--encre-2);
}

.md-planche .md-mail-tete {
    font-size: var(--text-sm);
    color: var(--encre-2);
}

.md-planche .md-mail-corps,
.md-planche .md-constat {
    font-size: var(--text-sm);
    line-height: 1.45;
    margin-top: .5rem;
    overflow-wrap: anywhere;
}

.md-planche .md-mail-corps {
    color: var(--gris);
}

.md-planche .md-mail-corps [data-a="lit"],
.md-planche .md-constat {
    color: var(--encre);
}

/* Pictogramme 01 : le viseur, quatre coins d'équerre au trait de 2 px */
.md-viseur {
    position: absolute;
    inset: 6px;
    pointer-events: none;
}

.md-viseur i {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid var(--trait);
}

.md-viseur i:nth-child(1) { top: 0;    left: 0;  border-top-width: 2px;    border-left-width: 2px;  --x: -6px; --y: -6px; }
.md-viseur i:nth-child(2) { top: 0;    right: 0; border-top-width: 2px;    border-right-width: 2px; --x: 6px;  --y: -6px; }
.md-viseur i:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px;  --x: -6px; --y: 6px; }
.md-viseur i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; --x: 6px;  --y: 6px; }

/* Pictogramme 02 : l'onde du vocal, barres de 2 px */
.md-onde {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 2.25rem;
    margin-top: .5rem;
}

.md-onde i {
    flex: none;
    display: block;
    width: 2px;
    height: var(--h);
    background: var(--encre);
}

/* Pictogramme 04 : les semaines qui passent, un trait de 2 px chacune */
.md-piste {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: .5rem;
    margin-top: .375rem;
}

.md-piste span {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: var(--gris);
}

.md-piste i {
    display: block;
    height: 2px;
    background: var(--encre);
    transform-origin: left;
}

/* ---------- CE QUE LE BUREAU REÇOIT : un bloc ouvert par un trait de 2 px ---------- */
.md-bloc {
    position: relative;
    isolation: isolate;
    padding-top: calc(2px + .5rem);
}

.md-bloc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--trait);
    transform-origin: left;
}

.md-planche .md-legende {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: var(--encre-2);
    padding-bottom: .5rem;
}

/* 01 : une ligne de tableau */
.md-rang {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) 2.25rem 4.75rem;   /* « Gravier 6/10 » tient sur une ligne dès 360 px */
    column-gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--filet);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: .04em;
}

.md-rang > span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.md-rang--tete {
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre-2);
    border-bottom-color: var(--encre);
}

.md-rang--ancien {
    color: var(--gris);
}

/* 02 et 03 : une fiche */
.md-fiche {
    margin: 0;
}

.md-champ {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--filet);
}

.md-champ dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris);
    padding-top: 2px;
}

.md-champ dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--encre);
    overflow-wrap: anywhere;
}

/* 04 : le devis qui remonte, la relance rédigée */
.md-planche .md-donnee {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: .04em;
    color: var(--encre);
    padding-bottom: .5rem;
}

.md-planche .md-relance p {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--encre-2);
}

/* Le ventre : une seule valeur à relire par planche */
.md-planche mark {
    display: inline-block;
    max-width: 100%;
    position: relative;
    z-index: 0;
    padding: 0 2px;
    margin: 0 -2px;
    background: none;
    color: var(--sur-ventre);
}

.md-planche mark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ventre);
    transform-origin: left;
}

/* Le doute : ce que la machine n'a pas su lire, dit franchement */
.md-planche .md-doute {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--encre-2);
    margin-top: .5rem;
}

.md-doute::before {
    content: "— ";
    color: var(--fourrure-texte);
}

/* L'état : un carré de 10 px cerclé du trait, puis le mot */
.md-planche .md-etat {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--encre-2);
    margin-top: .75rem;
}

.md-carre {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border: 2px solid var(--trait);
    background: var(--tasse);
}

.md-carre--vide {
    background: var(--papier);
}

.md-mot {
    color: var(--tasse-texte);
    font-weight: 500;
}

.md-mot--attente {
    color: var(--encre);
}

/* ---------- LE MOUVEMENT : data-a = le geste, --t (en ligne) = son départ ---------- */
[data-a] {
    --t: 0ms;   /* empêche l'héritage du départ du parent */
    --d: 200ms;
}

@keyframes md-lit     { from { color: var(--gris); } }
@keyframes md-ecoute  { from { background-color: var(--gris); } }
@keyframes md-arrive  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes md-echelle { from { transform: scaleX(0); } }
@keyframes md-coupe   { from, to { visibility: hidden; } }
@keyframes md-tasse   { from { background-color: var(--papier); } }
@keyframes md-serre   { from { transform: translate(var(--x), var(--y)); } }
@keyframes md-remonte { from { visibility: hidden; transform: translateY(12px); } to { visibility: visible; transform: none; } }

.md-anim [data-a="lit"]            { animation: md-lit 120ms linear var(--t) both; }
.md-anim [data-a="ecoute"]         { animation: md-ecoute 120ms linear var(--t) both; }
.md-anim [data-a="arrive"]         { animation: md-arrive var(--d) var(--courbe) var(--t) backwards; }
.md-anim [data-a="releve"]::before { animation: md-echelle 320ms var(--courbe) var(--t) both; }
.md-anim [data-a="trace"]::before  { animation: md-echelle 480ms var(--courbe) var(--t) both; }
.md-anim [data-a="etire"]          { animation: md-echelle 300ms linear var(--t) both; }
.md-anim [data-a="coupe"]          { animation: md-coupe 0s linear var(--t) backwards; }
.md-anim [data-a="tasse"]          { animation: md-tasse 120ms linear var(--t) both; }
.md-anim [data-a="serre"] i        { animation: md-serre 240ms var(--courbe) var(--t) both; }
.md-anim [data-a="remonte"]        { animation: md-remonte 240ms var(--courbe) var(--t) both; }

/* En attente, la planche reste figée sur son départ ; .md-joue la lance. */
.md-anim:not(.md-joue),
.md-anim:not(.md-joue) *,
.md-anim:not(.md-joue) *::before,
.md-anim:not(.md-joue) *::after {
    animation-play-state: paused !important;
}

@media print, (prefers-reduced-motion: reduce) {
    .md-planche *,
    .md-planche *::before,
    .md-planche *::after {
        animation: none !important;
    }
}

/* Contraste élevé : garder le ventre lisible et les traits visibles */
@media (forced-colors: active) {
    .md-planche mark {
        forced-color-adjust: none;
    }

    .md-onde i,
    .md-piste i,
    .md-bloc::before,
    .md-carre {
        forced-color-adjust: none;
        background-color: CanvasText;
    }

    .md-carre {
        border-color: CanvasText;
    }

    .md-carre--vide {
        background-color: Canvas;
    }

    .md-anim [data-a="releve"]::before {
        animation: none;
    }
}

/* ---------- TÉLÉPHONE ---------- */
@media (max-width: 860px) {
    .md-usages {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .md-usage {
        padding: 1.25rem 0 1.5rem;
    }

    .md-usage:nth-last-child(2) {
        border-bottom: 0;
    }

    .md-index {
        margin-bottom: .5rem;
    }

    .md-usage h3 {
        margin-bottom: .5rem;
    }

    .md-planche {
        row-gap: .75rem;
        margin-bottom: 1rem;
    }

    .specialties h2 {
        margin-bottom: 2.5rem;
    }
}