/* ===========================================================================
   POPPY MOVE — Socle visuel de l'espace client
   ---------------------------------------------------------------------------
   Une seule feuille pour les neuf pages. Elle porte :
     1. les jetons de marque (identiques à l'existant, c'est la marque) ;
     2. les jetons dérivés (contraste, surfaces, rythme) ;
     3. les composants communs, tous préfixés « pm- ».

   Le préfixe n'est pas une coquetterie : les pages gardent leur CSS métier,
   qui définit déjà .card, .btn-primary, .back-link… Préfixer garantit que le
   socle ne peut pas leur marcher dessus.

   Cette feuille se charge AVANT le <style> de la page : à spécificité égale,
   la page garde le dernier mot sur son propre contenu.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── Jetons de marque — viennent de /marque.css (charte Onyx et or) ────
       Ces noms-là restent : les quatorze pages les emploient encore. Ils ne
       portent plus de couleur, ils pointent vers les jetons de la maison, et
       suivent donc le thème posé par lib/theme.js. --rose n'a plus rien de
       rose : c'est l'or, et sur crème l'or n'écrit jamais un petit texte —
       --rose-dk (donc --or-texte) est là pour ça. */
    --rose:    var(--or);
    --rose-dk: var(--or-texte);
    --dark:    var(--fond);
    --dark2:   var(--surface);
    --gold:    var(--or);

    --f-d: 'Cormorant Garamond', Georgia, serif;
    --f-b: 'DM Sans', system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-w: 240px;

    /* ── Jetons de thème (bascule en clair) ──────────────────────────────── */
    --text: var(--texte);
    --text-rgb: var(--texte-rgb);

    /* ── Contraste ────────────────────────────────────────────────────────
       .62 est le plancher mesuré pour tenir 4,5:1 dans LES DEUX thèmes
       (le thème clair est le contraignant : texte #171411 sur #F2EBDF).
       Rien d'utile ne descend en dessous. --pm-decor ne sert qu'aux traits
       et aux fonds, jamais à du texte. */
    --pm-texte-2:  rgba(var(--text-rgb), .70);   /* texte secondaire  */
    --pm-texte-3:  rgba(var(--text-rgb), .62);   /* plancher AA       */
    --pm-decor:    rgba(var(--text-rgb), .10);   /* traits, contours  */
    --pm-trait:    rgba(var(--text-rgb), .09);
    --pm-trait-fort: rgba(var(--text-rgb), .17); /* ce qui sépare pour de vrai */
    --pm-surface:  rgba(var(--text-rgb), .03);
    --pm-surface-2:rgba(var(--text-rgb), .06);

    /* Le verre de la barre du bas. Elle flotte au-dessus d'un contenu qui
       défile : un aplat opaque la collerait à la page, un fond translucide
       la décolle. `--pm-verre-opaque` est le repli des navigateurs sans
       backdrop-filter — sans lui, le texte défilerait à travers la barre. */
    --pm-verre:        rgba(33, 31, 28, .76);
    --pm-verre-opaque: #211F1C;
    --pm-ombre-bas:    0 -16px 36px -24px rgba(0, 0, 0, .85);

    /* L'or qui porte du SENS ÉCRIT. Sur onyx l'or plein passe ; sur crème il
       ne tient qu'au-dessus de 24 px. --or-texte est la variante qui tient
       dans les deux encres : tout petit texte doré passe par ici. */
    --pm-rose-texte: var(--or-texte);

    /* ── Rythme et formes ─────────────────────────────────────────────────── */
    --pm-r-sm: 10px;
    --pm-r-md: 14px;
    --pm-r-lg: 18px;
    --pm-r-pill: 60px;

    --pm-e-1: 6px;
    --pm-e-2: 12px;
    --pm-e-3: 18px;
    --pm-e-4: 28px;
    --pm-e-5: 40px;

    --pm-ombre: 0 10px 30px -12px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);

    /* ── Les zones sûres de l'iPhone ──────────────────────────────────────
       Sur un écran à encoche, la barre d'accueil mange le bas de l'écran et
       l'encoche mange le haut. Ces quatre jetons portent la mesure ; les
       règles plus bas s'en servent, et les tests peuvent les forcer pour
       vérifier que la réserve existe vraiment.

       Ils valent 0 partout ailleurs — et ils valent 0 sur l'iPhone AUSSI
       tant que la page ne déclare pas `viewport-fit=cover` dans sa balise
       <meta name="viewport">. Les deux vont ensemble. */
    --pm-sur-haut:   env(safe-area-inset-top, 0px);
    --pm-sur-bas:    env(safe-area-inset-bottom, 0px);
    --pm-sur-gauche: env(safe-area-inset-left, 0px);
    --pm-sur-droite: env(safe-area-inset-right, 0px);
}

/* Le crème. Les couleurs, elles, viennent de marque.css : --dark, --text et
   les autres suivent --fond et --texte tout seuls. Ne restent ici que les
   matières qui n'ont pas de jeton — les ombres et le verre de la barre. */
:root[data-theme="light"] {
    --pm-ombre: 0 10px 30px -14px rgba(23, 20, 17, .22), 0 2px 6px -3px rgba(23, 20, 17, .12);
    --pm-verre:        rgba(251, 247, 240, .82);
    --pm-verre-opaque: #FBF7F0;
    --pm-ombre-bas:    0 -16px 36px -26px rgba(23, 20, 17, .55);
}

/* ── Les icônes de la navigation ──────────────────────────────────────────
   Dessinées dans nav.js, au trait des icônes des pages : 24×24, graisse 1,6,
   bouts arrondis, currentColor. La graisse et la couleur vivent ICI, pas dans
   le dessin : l'état actif n'a qu'à les changer. */
.pm-glyphe {
    width: 24px; height: 24px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke-width .22s var(--ease);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--f-b);
    font-size: 16px;
    line-height: 1.6;
    background: var(--dark);
    color: var(--text);
    -webkit-font-smoothing: antialiased;

    /* Le rebond élastique en fin de course montre le fond du navigateur : ça
       trahit une page web au milieu de ce qui doit se tenir comme une app.
       `contain` garde le geste de défilement dans la page. */
    overscroll-behavior-y: contain;
    /* Le voile gris que Safari pose sur ce qu'on touche. */
    -webkit-tap-highlight-color: transparent;

    /* Le contenu se range à l'intérieur des zones sûres. Les barres, elles,
       sont en `position: fixed` : la marge du corps ne les atteint pas, et
       chacune réserve sa propre zone (voir .pm-bottom, .pm-sidenav). */
    padding-top:   var(--pm-sur-haut);
    padding-left:  var(--pm-sur-gauche);
    padding-right: var(--pm-sur-droite);
    /* La barre du bas grandit de la même hauteur : le corps rend la place. */
    padding-bottom: var(--pm-sur-bas);
}

/* ── Surfaces que le navigateur dessine à notre place ─────────────────────
   Sélection, curseur de saisie, anneau de focus, ascenseur : quatre détails
   que personne ne remarque quand ils sont justes, et qui trahissent une page
   assemblée quand ils ne le sont pas. */
::selection { background: rgba(var(--or-rgb), .30); color: var(--text); }
:root { caret-color: var(--rose); scrollbar-color: rgba(var(--text-rgb), .22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--text-rgb), .18);
    border: 3px solid transparent; background-clip: content-box;
    border-radius: var(--pm-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-rgb), .30); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===========================================================================
   1. LA BARRE LATÉRALE (écran large)
   =========================================================================== */

.pm-sidenav {
    width: var(--nav-w);
    min-height: 100svh;
    background: var(--dark2);
    border-right: 1px solid var(--pm-trait);
    display: flex; flex-direction: column;
    /* Fixée à la vitre elle aussi : elle passe sous l'encoche et sous la
       barre d'accueil si elle ne les réserve pas. */
    padding: calc(var(--pm-e-4) + var(--pm-sur-haut)) 0
             calc(var(--pm-e-3) + var(--pm-sur-bas))
             var(--pm-sur-gauche);
    position: fixed; inset: 0 auto 0 0; z-index: 100;
}

.pm-marque {
    font-family: var(--f-d); font-size: 1rem; font-weight: 600;
    color: var(--text); letter-spacing: .02em;
    padding: 0 20px var(--pm-e-3);
    border-bottom: 1px solid var(--pm-trait);
    margin-bottom: var(--pm-e-2);
}
.pm-marque span { color: var(--pm-rose-texte); }
/* L'emblème de la maison, en deux encres : marque.css cache celle qui n'est pas
   celle du thème. Il a pris la place de la fleur de l'ancienne identité — et
   sur écran large, c'est la seule marque visible : la barre du haut, elle,
   cache son logo. */
.pm-embleme { width: 34px; height: 27px; vertical-align: -6px; object-fit: contain; margin-right: 4px; }
.pm-marque small {
    display: block; margin-top: 4px;
    font-family: var(--f-b); font-size: .8125rem; font-weight: 400;
    letter-spacing: .04em; color: var(--pm-texte-3);
}

.pm-dests { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.pm-dest {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: var(--pm-r-sm);
    font-size: .9375rem; font-weight: 400; letter-spacing: .01em;
    color: var(--pm-texte-2);
    text-decoration: none;
    transition: color .18s, background .18s;
}
.pm-dest:hover { color: var(--text); background: rgba(var(--text-rgb), .05); }
.pm-dest .pm-glyphe { width: 21px; height: 21px; }

/* L'état actif tient sur trois signaux, jamais sur la seule couleur :
   un rail plein, un fond, et un poids de texte. */
.pm-dest[aria-current] {
    color: var(--text); font-weight: 500;
    background: rgba(var(--or-rgb), .13);
}
.pm-dest[aria-current]::before {
    content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--rose);
}
.pm-dest[aria-current] .pm-glyphe { stroke-width: 2.1; color: var(--pm-rose-texte); }

/* Les entrées d'une destination : révélées sous la destination active. */
.pm-sous { display: flex; flex-direction: column; margin: 2px 0 var(--pm-e-1) 33px; }
.pm-sous a {
    padding: 7px 12px 7px 10px;
    border-left: 1px solid var(--pm-decor);
    font-size: .875rem; color: var(--pm-texte-3); text-decoration: none;
    transition: color .18s, border-color .18s;
}
.pm-sous a:hover { color: var(--text); border-left-color: var(--rose); }
.pm-sous a[aria-current] {
    color: var(--text); font-weight: 500; border-left-color: var(--rose);
}

.pm-sidenav-bas {
    margin-top: auto; padding: var(--pm-e-3) 20px 0;
    border-top: 1px solid var(--pm-trait);
}
.pm-deconnexion {
    width: 100%;
    background: none; border: 1px solid var(--pm-decor);
    border-radius: var(--pm-r-pill); padding: 9px 14px;
    font-family: var(--f-b); font-size: .875rem; color: var(--pm-texte-2);
    cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.pm-deconnexion:hover { border-color: var(--rose); color: var(--text); background: rgba(var(--or-rgb), .10); }

/* ── Quitter un espace produit ───────────────────────────────────────────────
   Le geste n'est pas « fermer cette page » mais « quitter Poppy Nutrition et
   revenir à Poppy » : il se dit en toutes lettres (revue d'Albane, 30/09). La
   croix l'accompagne comme signe, elle ne le remplace pas. */
.pm-quitter {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 9px 15px;
    border: 1px solid var(--pm-decor); border-radius: var(--pm-r-pill);
    font-family: var(--f-b); font-size: .875rem; color: var(--pm-texte-2);
    text-decoration: none; transition: border-color .2s, color .2s, background .2s;
}
.pm-quitter:hover { border-color: var(--rose); color: var(--text); background: rgba(var(--or-rgb), .10); }
.pm-quitter:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pm-quitter-signe { font-size: .95rem; line-height: 1; }
/* Dans la barre latérale, il prend toute la largeur comme la déconnexion. */
.pm-sidenav-bas .pm-quitter { width: 100%; justify-content: center; }
/* En haut, sur téléphone, il reste court : le nom de l'espace est déjà à
   gauche, le répéter mangerait la largeur. */
.pm-quitter--haut { padding: 8px 13px; font-size: .84rem; }
.pm-espace-nom {
    font-family: var(--f-d); font-size: 1.02rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sur écran large, la barre latérale nomme déjà l'espace. */
@media (min-width: 801px) {
    .pm-topbar--espace .pm-espace-nom { display: none; }
}

/* ===========================================================================
   2. LA BARRE DU BAS (mobile) — cinq destinations, pas huit
   =========================================================================== */

/* La barre est collée au bas de l'écran, donc au bas de la VITRE : sur un
   iPhone, la barre d'accueil passe par-dessus. Elle réserve cette hauteur en
   bas, et les encoches latérales en paysage.

   Elle porte trois choses qu'un aplat gris ne portait pas : une assise (le
   verre, le trait du haut, l'ombre portée vers le contenu), une séparation
   entre les cinq parties, et une réponse au doigt. */
.pm-bottom {
    display: none;
    position: fixed; inset: auto 0 0 0; z-index: 200;
    background: var(--pm-verre-opaque);
    border-top: 1px solid var(--pm-trait-fort);
    box-shadow: var(--pm-ombre-bas);
    padding: 8px var(--pm-sur-droite) max(6px, var(--pm-sur-bas)) var(--pm-sur-gauche);
}

/* Le contenu défile SOUS la barre : le flou la décolle de la page au lieu de
   l'y coller. Le repli plus haut reste opaque — sans backdrop-filter, un fond
   translucide laisserait le texte passer au travers. */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .pm-bottom {
        background: var(--pm-verre);
        -webkit-backdrop-filter: blur(22px) saturate(1.6);
        backdrop-filter: blur(22px) saturate(1.6);
    }
}

.pm-bottom-liste {
    display: grid; grid-template-columns: repeat(5, 1fr);
    max-width: 560px; margin: 0 auto;
}

.pm-bnav {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    min-height: 50px; padding: 7px 2px 6px;
    color: var(--pm-texte-3); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease), transform .13s var(--ease);
}
.pm-bnav-nom {
    font-size: .75rem; font-weight: 500; line-height: 1.15;
    letter-spacing: .005em; text-align: center;
}

/* Cinq parties, cinq colonnes, et un filet qui le dit. Il ne touche ni le
   haut ni le bas de la barre : un trait plein ferait tableau. */
.pm-bnav + .pm-bnav::after {
    content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: var(--pm-trait-fort);
}

/* La capsule de l'onglet : transparente au repos, elle porte l'état actif,
   la pression, et l'onde du doigt — découpée à ses propres bords. */
.pm-bnav-fond {
    position: absolute; inset: 2px 5px; z-index: -1;
    border-radius: 15px; overflow: hidden;
    background: transparent;
    transition: background .22s var(--ease);
}

/* L'onde part du point touché : nav.js pose ses coordonnées avant de
   déclencher l'animation. */
.pm-bnav-fond::after {
    content: ''; position: absolute;
    left: var(--pm-onde-x, 50%); top: var(--pm-onde-y, 50%);
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: currentColor;
    opacity: 0; pointer-events: none;
}
.pm-bnav[data-onde] .pm-bnav-fond::after { animation: pm-onde .55s var(--ease); }
@keyframes pm-onde {
    from { opacity: .38; transform: scale(1); }
    to   { opacity: 0;   transform: scale(9); }
}

/* La destination où l'on est se lit à un mètre : capsule teintée, encre rose,
   trait plus gras dans l'icône, texte plus lourd, et le rail au ras du bord
   haut de la barre. Cinq signaux, jamais la seule couleur. */
.pm-bnav[aria-current] { color: var(--pm-rose-texte); }
.pm-bnav[aria-current] .pm-bnav-nom { font-weight: 600; }
.pm-bnav[aria-current] .pm-bnav-fond { background: rgba(var(--or-rgb), .16); }
.pm-bnav[aria-current] .pm-glyphe { stroke-width: 2.2; }
.pm-bnav[aria-current]::before {
    content: ''; position: absolute; top: -8px; left: 50%;
    width: 30px; height: 3px; margin-left: -15px;
    border-radius: 0 0 3px 3px; background: var(--rose);
    box-shadow: 0 4px 14px -3px rgba(var(--or-rgb), .9);
}

/* Le doigt s'enfonce : l'onglet recule, la capsule s'allume. */
.pm-bnav:active { transform: scale(.93); }
.pm-bnav:active .pm-bnav-fond { background: rgba(var(--text-rgb), .10); }
.pm-bnav[aria-current]:active .pm-bnav-fond { background: rgba(var(--or-rgb), .28); }
.pm-bnav:focus-visible { border-radius: 16px; outline-offset: -2px; }

/* ===========================================================================
   3. LA BARRE DU HAUT — retour, thème, sortie
   =========================================================================== */

.pm-topbar {
    display: flex; align-items: center; gap: var(--pm-e-2);
    padding: 0 0 var(--pm-e-1);
    min-height: 40px;
}
.pm-topbar-espace { flex: 1; }

/* La marque, sur téléphone. Sur écran large la barre latérale la porte déjà en
   toutes lettres : la redoubler ici ferait deux logos pour une seule page. */
.pm-logo {
    display: none;
    width: 36px; height: 28px; flex: none;
    object-fit: contain;
}

.pm-outil {
    width: 40px; height: 40px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--pm-decor); background: var(--dark2);
    color: var(--text); font-size: 1.05rem; line-height: 1;
    cursor: pointer; transition: transform .15s var(--ease), border-color .2s;
}
.pm-outil:hover { transform: scale(1.06); border-color: var(--rose); }

/* La barre de retour nomme toujours sa destination : « ← Mon espace
   coaching », jamais « ← Retour ». */
.pm-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 11px;
    border: 1px solid var(--pm-decor); border-radius: var(--pm-r-pill);
    background: var(--pm-surface);
    font-size: .9375rem; color: var(--pm-texte-2); text-decoration: none;
    transition: color .2s, border-color .2s, background .2s, gap .2s var(--ease);
}
.pm-back:hover { color: var(--text); border-color: rgba(var(--or-rgb), .45); background: rgba(var(--or-rgb), .08); gap: 11px; }
.pm-back .pm-fleche { font-size: 1rem; line-height: 1; }

/* ===========================================================================
   4. LE TITRE DE PAGE — la destination, reprise en toutes lettres
   =========================================================================== */

.pm-head { margin: var(--pm-e-2) 0 var(--pm-e-4); }
.pm-titre {
    font-family: var(--f-d);
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
    font-weight: 300; line-height: 1.08; letter-spacing: -.01em;
    color: var(--text);
    animation: pm-monte .55s var(--ease) both;
}
.pm-titre em { font-style: italic; color: var(--pm-rose-texte); }
.pm-sous-titre {
    max-width: 62ch;
    margin-top: var(--pm-e-1);
    font-size: 1rem; color: var(--pm-texte-2);
    animation: pm-monte .55s var(--ease) .06s both;
}
@keyframes pm-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* La signature d'Albane, sous le contenu. C'est elle qui parle du premier au
   dernier écran ; on le rappelle une fois, à la fin, de sa main. Ni pied de
   page, ni bloc de mentions. */
.pm-signature {
    margin-top: var(--pm-e-5);
    padding-top: var(--pm-e-4);
    text-align: center;
}
.pm-signature-trait {
    display: block; width: 52px; height: 2px; border-radius: 2px;
    margin: 0 auto var(--pm-e-3);
    background: var(--rose);
    opacity: .85;
}
.pm-signature-mot { font-size: .9375rem; color: var(--pm-texte-3); }
.pm-signature-nom {
    margin-top: 3px;
    font-family: var(--f-d); font-style: italic; font-weight: 400;
    font-size: 1.65rem; line-height: 1.25; letter-spacing: .01em;
    color: var(--text);
}

/* ===========================================================================
   5. COMPOSANTS COMMUNS
   =========================================================================== */

.pm-carte {
    background: var(--pm-surface);
    border: 1px solid var(--pm-trait);
    border-radius: var(--pm-r-lg);
    padding: var(--pm-e-4);
}
.pm-carte + .pm-carte { margin-top: var(--pm-e-3); }
.pm-carte h2, .pm-carte h3 {
    font-family: var(--f-d); font-weight: 300; letter-spacing: -.005em;
    color: var(--text);
}
.pm-carte h2 { font-size: 1.5rem; margin-bottom: var(--pm-e-2); }
.pm-carte h3 { font-size: 1.25rem; margin-bottom: var(--pm-e-2); }

.pm-etiquette {
    font-size: .75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--pm-texte-3);
}

.pm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rose); color: var(--sur-or); border: none;
    border-radius: var(--pm-r-pill); padding: 13px 26px;
    font-family: var(--f-b); font-size: 1rem; font-weight: 500; letter-spacing: .02em;
    /* Un bouton qui est un lien restait souligné : la pastille dorée portait
       un trait sous son mot. `.pm-btn-2` l'éteignait déjà, et nutrition.html
       le rattrapait dans son coin — c'était un trou du socle, pas de la page. */
    cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 20px -8px rgba(var(--or-rgb), .75);
    transition: background .2s, transform .15s var(--ease), box-shadow .2s;
}
.pm-btn:hover { background: var(--texte); color: var(--fond); transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(var(--or-rgb), .8); }
.pm-btn:active { transform: none; }
.pm-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.pm-btn-2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--pm-surface); color: var(--text);
    border: 1px solid var(--pm-decor); border-radius: var(--pm-r-pill);
    padding: 12px 24px;
    font-family: var(--f-b); font-size: 1rem; font-weight: 400;
    cursor: pointer; text-decoration: none;
    transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.pm-btn-2:hover { border-color: rgba(var(--or-rgb), .45); background: rgba(var(--or-rgb), .08); transform: translateY(-1px); }

/* Champ : le libellé est toujours visible, jamais un simple placeholder. */
.pm-champ { display: flex; flex-direction: column; gap: 7px; }
.pm-champ > span {
    font-size: .9375rem; font-weight: 500; color: var(--pm-texte-2);
}
.pm-champ input, .pm-champ select, .pm-champ textarea {
    background: rgba(var(--text-rgb), .06);
    border: 1.5px solid var(--pm-decor);
    border-radius: var(--pm-r-sm); padding: 13px 14px;
    font-family: var(--f-b); font-size: 1rem; color: var(--text);
    transition: border-color .2s, background .2s; outline: none;
}
.pm-champ input:focus, .pm-champ select:focus, .pm-champ textarea:focus {
    border-color: var(--rose); background: rgba(var(--or-rgb), .09);
}
.pm-champ ::placeholder { color: var(--pm-texte-3); }
.pm-aide { font-size: .875rem; color: var(--pm-texte-3); }

.pm-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--pm-r-pill); padding: 5px 13px;
    font-size: .875rem; font-weight: 500;
    border: 1px solid transparent;
}
.pm-badge-rose { background: var(--pm-surface-2); border-color: var(--pm-trait-fort); color: var(--text); }
.pm-badge-or   { background: rgba(var(--or-rgb), .14); border-color: rgba(var(--or-rgb), .34); color: var(--or-texte); }

/* État vide : jamais une porte close. On dit ce qui manque et ce qu'on peut
   faire à la place. */
.pm-vide {
    border: 1px dashed var(--pm-decor); border-radius: var(--pm-r-lg);
    padding: var(--pm-e-5) var(--pm-e-4); text-align: center;
}
.pm-vide-emoji { font-size: 2rem; line-height: 1; margin-bottom: var(--pm-e-2); }
.pm-vide p { font-size: 1rem; color: var(--pm-texte-2); max-width: 46ch; margin: 0 auto; }
/* Deux phrases, et elles respirent : sans ça elles se collaient l'une à
   l'autre et se lisaient comme un paragraphe. */
.pm-vide p + p { margin-top: var(--pm-e-2); }
.pm-vide .pm-btn, .pm-vide .pm-btn-2 { margin-top: var(--pm-e-3); }

/* ── Les portes ──────────────────────────────────────────────────────────────
   Une porte mène quelque part : un espace produit, une page. Une ligne, une
   icône dessinée, un chevron. C'est le motif de « Mes espaces », et celui
   qu'une autre page reprendra le jour où elle listera des destinations — il
   vit donc ici, pas dans une page.

   Toute la ligne est cliquable, et fait au moins 56 px de haut : une cliente
   la vise d'un pouce, sur un téléphone, entre deux choses. */
.pm-portes {
    border: 1px solid var(--pm-trait); border-radius: var(--pm-r-lg);
    background: var(--pm-surface); overflow: hidden;
}
.pm-portes > * + * { border-top: 1px solid var(--pm-trait); }

.pm-porte {
    display: flex; align-items: center; gap: var(--pm-e-2);
    min-height: 56px; padding: var(--pm-e-2) var(--pm-e-3);
    color: var(--text); text-decoration: none;
    transition: background .18s var(--ease);
}
.pm-porte:hover { background: var(--pm-surface-2); }
.pm-porte:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* Même trait que les icônes de la barre : 1,6, bouts et angles arrondis,
   aucune couleur en dur. Le dessin vient du jeu posé par nav.js. */
.pm-porte .pm-ico {
    flex: none; width: 22px; height: 22px;
    color: var(--pm-rose-texte);
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* `min-width: 0` : sans lui le nom refuse de se couper et pousse le chevron
   hors de l'écran sur un 375. */
.pm-porte-dit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-porte-nom { font-size: 1rem; color: var(--text); }
.pm-porte-suite { font-size: .85rem; color: var(--pm-texte-2); }
.pm-porte-fleche { flex: none; color: var(--pm-texte-2); font-size: 1.15rem; line-height: 1; }

/* Le temps d'une lecture. Ni « rien », ni une liste : on dit qu'on regarde. */
.pm-attente { color: var(--pm-texte-2); font-size: 1rem; }

/* Message d'erreur : ce qui s'est passé, pourquoi, quoi faire. */
/* [hidden] est une simple regle d'agent utilisateur : n'importe quelle
   declaration de display d'une feuille de site la bat. Sans ce garde-fou,
   toute page qui pose `hidden` sur un composant du socle affiche quand meme
   une bande vide — constate sur compteur.html, ou deux bandeaux d'erreur
   fantomes s'affichaient. La correction appartient au socle : sinon chaque
   page devra la repayer. */
[hidden] { display: none !important; }

.pm-erreur {
    display: flex; gap: 11px;
    border-radius: var(--pm-r-md); padding: 13px 16px;
    background: var(--surface-2); border: 1px solid var(--texte);
    font-size: 1rem; color: var(--texte);
}
.pm-erreur::before { content: "⚠"; content: "⚠" / ""; font-weight: 600; flex: none; }
.pm-erreur strong { font-weight: 600; }
.pm-info {
    display: flex; gap: 11px;
    border-radius: var(--pm-r-md); padding: 13px 16px;
    background: rgba(var(--or-rgb), .10); border: 1px solid rgba(var(--or-rgb), .30);
    font-size: 1rem; color: var(--text);
}

/* ===========================================================================
   6. BASCULE LARGE / MOBILE
   =========================================================================== */

/* Sur écran large la déconnexion vit dans la barre latérale : inutile de la
   redoubler en haut. */
.pm-sortie-mobile { display: none; }

@media (max-width: 800px) {
    .pm-sidenav { display: none; }
    .pm-bottom  { display: block; }
    .pm-sortie-mobile { display: flex; }
    .pm-logo { display: block; }
    .pm-head { margin-top: var(--pm-e-1); }
    .pm-carte { padding: var(--pm-e-3); }
    .pm-signature { margin-top: var(--pm-e-4); padding-top: var(--pm-e-3); }
}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    /* La barre du bas ne bouge plus : ni enfoncement, ni onde de pression.
       La vibration se coupe dans nav.js, qui lit la même préférence. */
    .pm-bnav:active { transform: none; }
    .pm-bnav-fond::after { display: none; }
}

/* La mention de sante d'Albane. Elle ne se replie JAMAIS : une mention qu'il
   faut deplier ne protege personne. Presente sans etre criarde — ni clause en
   petits caracteres, ni bandeau a accepter. */
.pm-mention-sante {
    margin: 26px 0 0; padding: 16px 18px;
    border-radius: var(--pm-r-md);
    border: 1px solid rgba(var(--text-rgb), .14);
    background: rgba(var(--text-rgb), .035);
}
.pm-mention-sante h3 {
    margin: 0 0 8px; font-size: .76rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--or-texte);
}
.pm-mention-sante p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--pm-texte-2); }
.pm-mention-sante p + p { margin-top: 8px; }