/* =========================================================================
   LE DOCUMENT EST SOMBRE, ET LE NAVIGATEUR DOIT LE SAVOIR.

   `color-scheme: dark` fait dessiner au navigateur ses propres commandes en
   sombre : icone du selecteur de date, menu d'un <select>, barres de
   defilement. Sans elle il suppose un fond clair, quelle que soit la couleur
   qu'on peint derriere.

   `jetons.css` la pose deja a la racine, mais cinq gabarits d'authentification
   chargent cette feuille SANS jetons.css : connexion, mot de passe oublie,
   reinitialisation, inscription praticien, inscription sur invitation. Ils
   restaient donc en clair, et il fallait rattraper chaque commande une par
   une. On la declare ici aussi : la feuille se suffit a elle-meme.
   ========================================================================= */
:root {
    color-scheme: dark;
}

/* Les variables --portal-* vivent desormais dans jetons.css, ou elles
   pointent sur les jetons semantiques. Les redeclarer ici les ecraserait
   et annulerait la couche. */

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.portal-page {
    margin: 0;
    min-height: 100vh;
    color: var(--portal-text);
    background: var(--portal-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

body.portal-modal-open {
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.portal-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at 50% 38%, rgba(var(--white-rgb), 0.06), transparent 34%),
        linear-gradient(135deg, var(--surface-sombre), rgb(var(--slate-rgb)) 45%, var(--surface-sombre));
    z-index: 0;
}

.portal-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--white-rgb), 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--white-rgb), 0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at center, rgba(var(--black-rgb), 0.75), transparent 68%);
    opacity: 0.32;
}

.portal-orb {
    position: absolute;
    width: 42vw;
    height: 42vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 50%;
    filter: blur(74px);
    opacity: 0.42;
    animation: portalOrbFloat 18s ease-in-out infinite alternate;
}

.portal-orb--one {
    left: -12%;
    top: -14%;
    background: rgba(var(--portal-blue-rgb), 0.42);
}

.portal-orb--two {
    right: -16%;
    top: 12%;
    background: rgba(var(--portal-purple-rgb), 0.36);
    animation-duration: 22s;
}

.portal-orb--three {
    left: 24%;
    bottom: -22%;
    background: rgba(var(--portal-green-rgb), 0.32);
    animation-duration: 24s;
}

.portal-orb--four {
    right: 18%;
    bottom: -18%;
    background: rgba(var(--portal-accent-rgb), 0.26);
    animation-duration: 20s;
}

@keyframes portalOrbFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(5vw, -4vh, 0) scale(1.12);
    }
}

.portal-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 22px clamp(16px, 3vw, 42px);
}

/* =========================================
   Les cinq pages legales
   -----------------------------------------
   Elles portaient toutes un conteneur `.legal-page` qui n'etait style nulle
   part : texte brut au rendu par defaut du navigateur, bord a bord, liens en
   bleu souligne. Un visiteur qui cliquait « Politique de confidentialite »
   depuis une page soignee tombait sur une page qui n'avait pas l'air du meme
   site.

   La regle de couleur s'applique telle quelle : le titre de page n'est pas
   colore, les intitules de section sont en or puisqu'ils annoncent, les liens
   vivent a l'interieur donc en bleu.
   ----------------------------------------- */

.legal-page {
    width: min(820px, 100%);
    margin: 0 auto;
    padding: 30px clamp(20px, 4vw, 38px) 38px;
    border-radius: 18px;
    border: 1px solid var(--portal-border);
    background: var(--portal-panel);
    backdrop-filter: blur(14px);
    color: var(--portal-text);
    /* Un texte juridique se lit en continu : on garde une mesure confortable. */
    line-height: 1.65;
}

.legal-page h1 {
    margin: 0 0 6px;
    font-size: clamp(24px, 3.4vw, 30px);
    line-height: 1.2;
    text-wrap: balance;
}

/* Le chapeau en italique qui suit le titre sur chaque page. */
.legal-page h1 + p em {
    color: var(--portal-muted);
    font-style: italic;
}

.legal-page h2 {
    margin: 30px 0 10px;
    font-size: 17px;
    line-height: 1.35;
    color: rgba(var(--portal-gold-rgb), 0.92);
}

.legal-page p,
.legal-page li {
    font-size: 15px;
    color: var(--portal-muted);
}

.legal-page p {
    margin: 0 0 12px;
}

.legal-page ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.legal-page li {
    margin-bottom: 5px;
}

.legal-page li::marker {
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.7));
}

.legal-page strong {
    color: var(--portal-text);
    font-weight: 600;
}

.legal-page a {
    color: rgba(var(--portal-accent-clair-rgb), 0.95);
    text-decoration: none;
    text-underline-offset: 3px;
}

.legal-page a:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .legal-page {
        padding: 22px 16px 28px;
        border-radius: 16px;
    }

    .legal-page h2 {
        margin-top: 24px;
    }
}

/* Les pages publiques hors landing n'empruntent au portail que son en-tete :
   elles gardent leur propre mise en page en dessous. Sans ce variant, la
   grille en trois rangees et le `min-height: 100vh` du shell poseraient un
   bloc vide d'une hauteur d'ecran sous la marque. */
.portal-shell--header-only {
    display: block;
    min-height: 0;
    padding-bottom: 0;
}

.portal-header,
.portal-footer {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Actions de l'en-tete : le selecteur de langue et la connexion, groupes a
   droite. Le selecteur passe en flux (plus de pastille fixe qui recouvre le
   bouton de connexion). */
.portal-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.portal-header .locale-switcher {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    box-shadow: none;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.portal-brand__mark {
    width: 44px;
    height: 44px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-brand__image {
    display: block;
    /* La marque est carree depuis la version du 07/08 : les deux cotes suivent. */
    width: 40px;
    object-fit: contain;
}

.portal-brand__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/*
 * Le nom en mode LOGO : capitales.
 *
 * Fait en CSS et non dans le fichier de langue, parce que la meme valeur sert
 * ailleurs en narration (« l'acces au Strannik Online »), en titre de page et
 * en etiquette d'accessibilite, ou les capitales seraient fautives. Seul
 * l'affichage change, la valeur reste intacte.
 *
 * Les capitales demandent un peu plus d'interlettrage que le bas-de-casse pour
 * ne pas se tasser.
 */
.portal-brand__name {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.15;
}

.portal-brand__subtitle {
    color: var(--portal-muted);
    line-height: 1.25;
}

.portal-login-link,
.portal-btn,
.portal-cta {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--portal-gold-rgb), 0.36);
    background: linear-gradient(135deg, rgba(var(--portal-gold-rgb), 0.96), rgba(var(--portal-gold-clair-rgb), 0.82));
    color: var(--slate-mid);
    /* Coins arrondis moderes, pas la pilule : le rayon reste constant quelle
       que soit la hauteur du bouton, ce qu'une pilule ne fait pas. */
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(var(--black-rgb), 0.22),
        inset 0 1px 0 rgba(var(--white-rgb), 0.26);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

/* Les trois tailles. Seul le rembourrage et le corps changent.

   Essayee puis abandonnee : la geometrie compacte (12px de corps, 5px 0 de
   rembourrage). Sans rembourrage horizontal, le texte touche les deux bords de
   la pilule. Elle garde donc son air. */
/* Un peu plus grand que les autres actions de la barre : c'est la seule que
   les gens cherchent des yeux en arrivant. */
.portal-login-link {
    padding: 13px 26px;
    font-size: 15px;
}

.portal-btn {
    padding: 13px 26px;
    font-size: 15px;
}

.portal-cta {
    padding: 15px 34px;
    font-size: 16px;
}

.portal-login-link:hover,
.portal-cta:hover,
.portal-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 18px 40px rgba(var(--black-rgb), 0.30),
        0 0 0 4px rgba(var(--portal-gold-rgb), 0.10),
        inset 0 1px 0 rgba(var(--white-rgb), 0.34);
}

.portal-login-link:focus-visible,
.portal-btn:focus-visible,
.portal-direction:focus-visible,
.portal-login-modal__close:focus-visible,
.portal-field input:focus-visible,
.portal-forgot:focus-visible {
    outline: 3px solid rgba(var(--portal-accent-rgb), 0.44);
    outline-offset: 3px;
}

.portal-main {
    display: grid;
    place-items: center;
    padding: 28px 0 24px;
    min-height: 0;
}

/* =========================================
   Большой презентационный слайд внутри hero
   Меняется весь верхний блок, а не маленький экран
   ========================================= */

.portal-hero {
    position: relative;
    width: min(1180px, 100%);
    min-height: min(690px, calc(100vh - 178px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    align-items: stretch;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid var(--portal-border);
    background: rgba(var(--surface-sombre-rgb), 0.34);
    box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.03) inset,
        0 30px 90px rgba(var(--black-rgb), 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: clamp(24px, 4vh, 42px) clamp(18px, 3vw, 38px) clamp(18px, 3vh, 30px);
}

.portal-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 52%, rgba(var(--white-rgb), 0.055), transparent 34%),
        radial-gradient(circle at top right, rgba(var(--portal-blue-rgb),0.10), transparent 42%),
        radial-gradient(circle at bottom left, rgba(var(--portal-accent-rgb),0.08), transparent 46%);
}

.portal-hero__glow {
    position: absolute;
    inset: 46% auto auto 50%;
    width: min(560px, 70vw);
    height: min(560px, 70vw);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--white-rgb), 0.11), rgba(var(--portal-purple-rgb),0.08) 32%, transparent 66%);
    filter: blur(4px);
    opacity: 0.80;
    pointer-events: none;
}

/* Область динамического слайда занимает только верхнюю строку hero.
   Нижнее меню направлений живёт отдельной строкой и не перекрывается текстом. */
.portal-slide-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: stretch;
    overflow: hidden;
    border-radius: 18px;
    grid-column: 1;
    grid-row: 1;
}

.portal-slide-stage::before,
.portal-slide-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.portal-slide-stage::before {
    z-index: 0;
    background: linear-gradient(
            145deg,
            rgba(var(--white-rgb), 0.040),
            rgba(var(--white-rgb), 0.014)
        ),
        rgba(var(--slate-rgb), 0.10);
}

.portal-slide-stage::after {
    z-index: 0;
    background: radial-gradient(circle at 28% 52%, rgba(var(--portal-green-rgb),0.10), transparent 34%),
        radial-gradient(circle at 72% 48%, rgba(var(--portal-purple-rgb),0.11), transparent 36%),
        radial-gradient(circle at 50% 90%, rgba(var(--portal-accent-rgb),0.06), transparent 42%);
    opacity: 0.95;
}

.portal-slide {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: clamp(14px, 2vh, 22px);

    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: clamp(24px, 4vh, 46px) clamp(12px, 3vw, 42px);
    text-align: center;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--barre-pouce) var(--barre-piste);

    opacity: 0;
    transform: translateY(12px) scale(0.985);
    pointer-events: none;
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.portal-slide::-webkit-scrollbar {
    width: 6px;
}

.portal-slide::-webkit-scrollbar-track {
    background: transparent;
}

.portal-slide::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.18);
}

.portal-slide.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* `.portal-slide h1, .portal-slide__title` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.651 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.portal-slide p {
    max-width: 780px;
}

.portal-text-block {
    order: 2;
    display: grid;
    gap: 20px;
    width: min(760px, 100%);
    color: rgba(var(--white-rgb), 0.78);
    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.62;
    text-shadow: 0 5px 18px rgba(var(--black-rgb), 0.24);
}

.portal-text-block p {
    width: 100%;
    max-width: none;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-shadow: inherit;
}

.landing-cards {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(860px, 100%);
    margin: 10px 0;
}

.landing-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(104, 56, 90, 0.065), rgba(var(--white-rgb), 0.032)),
        rgba(66, 22, 71, 0.035);
    border: 1px solid rgba(var(--white-rgb), 0.12);
    box-shadow: 0 18px 40px rgba(var(--black-rgb), 0.16),
        inset 0 1px 0 rgba(var(--white-rgb), 0.06);
    text-align: left;
}

.landing-card h3 {
    margin: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-card__text {
    display: grid;
    gap: 9px;
}

.landing-card p {
    width: 100%;
    max-width: none;
    margin: 0;
    color: rgba(var(--white-rgb), 0.72);
    font-size: 14px;
    line-height: 1.6;
    text-shadow: none;
}
/* `.portal-slide__prompt` etait declare deux fois. Ce premier bloc
   etait entierement reecrit l.694 : a selecteur et poids egaux,
   la derniere regle ecrite gagne, celle-ci n'imposait donc rien. */

.portal-kicker,
.portal-request-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    color: rgba(var(--white-rgb), 0.80);
    background: rgba(var(--white-rgb), 0.06);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    font-size: 13px;
    line-height: 1.15;
    font-weight: 850;
    box-shadow: 0 10px 26px rgba(var(--black-rgb), 0.14);
}

.portal-request-panel__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--portal-accent-rgb), 0.9);
    box-shadow: 0 0 14px rgba(var(--portal-accent-rgb), 0.42);
}

.portal-slide h1,
.portal-slide__title {
    margin: 0;
    max-width: 920px;
    color: rgba(var(--white-rgb), 0.98);
    /*
     * Taille fluide et non figee.
     *
     * Elle valait 45px a toute largeur. L'ancienne accroche etait courte et y
     * survivait ; la nouvelle tient en six lignes sur un telephone, soit 284px
     * de haut sur un ecran de 812, un tiers de l'ecran pour le seul titre.
     * Corrige a la source plutot que par un cas particulier au point de
     * rupture : la regle vaut a toutes les largeurs, y compris celles qu'on
     * n'a pas testees.
     */
    font-size: clamp(27px, 4.6vw, 45px);
    line-height: 1.08;
    /*
     * Resserrage modere, unique. Le -0.052em d'origine tenait a 45px et serrait
     * trop a 27. Une valeur qui va aux deux bouts vaut mieux qu'un calcul
     * fluide qu'on relit mal : en em et sur une taille elle-meme fluide, il
     * s'inversait et serrait le plus la ou il fallait le moins.
     */
    letter-spacing: -0.03em;
    text-wrap: balance;
    text-shadow: 0 12px 34px rgba(var(--black-rgb), 0.38);
}

.portal-slide__title {
    max-width: 760px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
}

.portal-slide p {
    width: min(760px, 100%);
    margin: 0;
    color: rgba(var(--white-rgb), 0.78);
    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.62;
    text-shadow: 0 5px 18px rgba(var(--black-rgb), 0.24);
}

.portal-slide__prompt {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(760px, 100%);
    margin-top: clamp(18px, 3vh, 30px);
    padding: 0 clamp(8px, 2vw, 20px);
}

/*
 * L'intitule des domaines est une ETIQUETTE, pas un second titre.
 *
 * Il faisait 34px face aux 45px du titre : les deux se disputaient l'oeil, et
 * cette consigne d'interface, posee juste apres l'affirmation d'ouverture,
 * cassait net l'altitude que le titre venait d'etablir. Le chapo, coince entre
 * les deux, passait inapercu alors qu'il porte la substance.
 *
 * Rang d'etiquette : petites capitales espacees, ton discret, aucune ombre
 * portee. L'oeil descend titre, chapo, etiquette, domaines.
 */
.portal-slide__prompt h2 {
    margin: 0;
    color: rgba(var(--portal-gold-rgb), 0.90);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-slide__prompt > p {
    max-width: 600px;
    color: rgba(var(--white-rgb), 0.70);
    font-size: 15px;
    line-height: 1.6;
}

.portal-request-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    max-width: 650px;
}

.portal-request-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: rgba(var(--white-rgb), 0.90);
    background: linear-gradient(135deg, rgba(var(--white-rgb), 0.10), rgba(var(--white-rgb), 0.045));
    border: 1px solid rgba(var(--white-rgb), 0.10);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(var(--black-rgb), 0.16),
        0 0 0 1px rgba(var(--white-rgb), 0.025) inset;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .18s ease,
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.portal-slide.is-active .portal-request-chips span {
    opacity: 1;
    transform: translateY(0);
}

.portal-slide.is-active .portal-request-chips span:nth-child(1) { transition-delay: .02s; }
.portal-slide.is-active .portal-request-chips span:nth-child(2) { transition-delay: .06s; }
.portal-slide.is-active .portal-request-chips span:nth-child(3) { transition-delay: .10s; }
.portal-slide.is-active .portal-request-chips span:nth-child(4) { transition-delay: .14s; }
.portal-slide.is-active .portal-request-chips span:nth-child(5) { transition-delay: .18s; }

.portal-slide__media {
    appearance: none;
    order: 2;
    display: block;
    width: min(680px, 92%);
    height: auto;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: visible;
    background: transparent;
    color: inherit;
    cursor: zoom-in;
    box-shadow: 0 16px 30px rgba(var(--black-rgb), 0.24),
        0 0 0 1px rgba(var(--white-rgb), 0.08);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.portal-slide__media:hover,
.portal-slide__media:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 20px 42px rgba(var(--black-rgb), 0.30),
        0 0 0 1px rgba(var(--white-rgb), 0.14),
        0 0 0 4px rgba(var(--portal-blue-rgb), 0.10);
}

.portal-slide__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: inherit;
    background: rgba(var(--white-rgb), 0.06);
}

.portal-request-panel__eyebrow {
    order: 0;
}

.portal-directions {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    align-self: stretch;
    overflow-y: auto;
    padding: 2px 4px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--barre-pouce) var(--barre-piste);
}

.portal-directions::-webkit-scrollbar {
    width: 8px;
}

.portal-directions::-webkit-scrollbar-track {
    background: transparent;
}

.portal-directions::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--white-rgb), 0.18);
}

.portal-direction {
    --direction-rgb: var(--portal-blue-rgb);
    appearance: none;
    min-width: 0;
    min-height: 53px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--white-rgb), 0.88);
    background: linear-gradient(145deg, rgba(var(--direction-rgb),0.10), rgba(var(--white-rgb), 0.032)),
        rgba(var(--white-rgb), 0.042);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(var(--black-rgb), 0.13),
        0 0 0 1px rgba(var(--white-rgb), 0.018) inset;
    text-align: left;
    cursor: pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.portal-direction.is-hidden {
    display: none;
}

.portal-direction:hover,
.portal-direction:focus,
.portal-direction.is-active {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(var(--direction-rgb),0.18), rgba(var(--white-rgb), 0.050)),
        rgba(var(--white-rgb), 0.060);
    border-color: rgba(var(--direction-rgb), 0.40);
    box-shadow: 0 16px 34px rgba(var(--black-rgb), 0.22),
        0 0 0 1px rgba(var(--direction-rgb),0.12) inset,
        0 0 22px rgba(var(--direction-rgb),0.10);
}

.portal-direction__title {
    display: block;
    min-width: 0;
    color: rgba(var(--white-rgb), 0.96);
    font-weight: 400;
    line-height: 1.22;
}

.portal-direction__title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(var(--direction-rgb), 0.90);
    box-shadow: 0 0 18px rgba(var(--direction-rgb), 0.52);
    vertical-align: 0.08em;
}

.portal-direction__count {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.62));
    background: rgba(var(--white-rgb), 0.052);
    border: 1px solid rgba(var(--white-rgb), 0.055);
    font-size: 12px;
    line-height: 1;
    font-weight: 450;
}

.portal-direction--blue {
    --direction-rgb: var(--portal-blue-rgb);
}

.portal-direction--purple {
    --direction-rgb: var(--portal-purple-rgb);
}

.portal-direction--green {
    --direction-rgb: var(--portal-green-rgb);
}

.portal-direction--gold {
    --direction-rgb: var(--portal-gold-rgb);
}

.portal-direction--red {
    --direction-rgb: var(--portal-red-rgb);
}

/* Совместимость со старыми ключами кнопок, если где-то они ещё используются как CSS-классы. */
.portal-direction--psychology {
    --direction-rgb: var(--portal-purple-rgb);
}

.portal-direction--nutrition {
    --direction-rgb: var(--portal-green-rgb);
}

.portal-direction--recovery,
.portal-direction--changes {
    --direction-rgb: var(--portal-gold-rgb);
}

.portal-direction--bodywork {
    --direction-rgb: var(--portal-blue-rgb);
}

/* =========================================
   Landing sans presentation en base :
   grille des domaines de pratique + appel a l'action.
   Meme langage visuel que .portal-direction, mais cartes
   statiques (non cliquables) et robustes en multilingue
   (grille auto-fit, min-width:0, texte qui s'enroule).
   ========================================= */
/* Landing sans presentation : deux colonnes, liste des domaines a gauche,
   descriptif du domaine selectionne a droite (onglets accessibles). */
.portal-areas2 {
    display: grid;
    grid-template-columns: minmax(206px, 260px) minmax(0, 1fr);
    gap: 16px;
    width: min(940px, 100%);
    margin: clamp(16px, 3vh, 26px) auto 0;
    padding: 0 clamp(8px, 2vw, 20px);
    text-align: left;
    align-items: start;
}

.portal-areas2__list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.portal-area-tab {
    --area-rgb: var(--portal-blue-rgb);
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
    color: rgba(var(--white-rgb), 0.80);
    text-align: left;
    line-height: 1.25;
    overflow-wrap: anywhere;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.portal-area-tab::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(var(--area-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--area-rgb), 0.45);
}

.portal-area-tab:hover {
    color: rgba(var(--white-rgb), 0.95);
    border-color: rgba(var(--area-rgb), 0.34);
    background: rgba(var(--white-rgb), 0.06);
}

.portal-area-tab.is-active {
    color: var(--white);
    border-color: rgba(var(--area-rgb), 0.55);
    background: linear-gradient(145deg, rgba(var(--area-rgb),0.20), rgba(var(--white-rgb), 0.045)),
        rgba(var(--white-rgb), 0.05);
    box-shadow: 0 0 0 1px rgba(var(--area-rgb),0.16) inset,
        0 10px 26px rgba(var(--black-rgb), 0.20);
}

.portal-area-tab:focus-visible {
    outline: 3px solid rgba(var(--area-rgb), 0.44);
    outline-offset: 2px;
}

.portal-areas2__panels {
    min-width: 0;
}

.portal-area-panel {
    --area-rgb: var(--portal-blue-rgb);
    display: none;
    min-width: 0;
    gap: 10px;
    padding: clamp(16px, 2.4vw, 24px);
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.10);
    background: linear-gradient(160deg, rgba(var(--area-rgb),0.10), rgba(var(--white-rgb), 0.02)),
        var(--portal-panel);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.04),
        0 16px 40px rgba(var(--black-rgb), 0.18);
}

.portal-area-panel.is-active {
    display: grid;
}

.portal-area-panel__title {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.portal-area-panel__focus {
    margin: 0;
    font-size: 13.5px;
    color: rgba(var(--white-rgb), 0.72);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.portal-area-panel__desc {
    margin: 0;
    font-size: 14.5px;
    color: rgba(var(--white-rgb), 0.86);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Une teinte par domaine, sept en tout. Le variant `gold` a disparu : il
   peignait la pastille du fitness avec l'accent de marque exact. */
.portal-area-tab--blue,   .portal-area-panel--blue   { --area-rgb: var(--portal-blue-rgb); }
.portal-area-tab--purple, .portal-area-panel--purple { --area-rgb: var(--portal-purple-rgb); }
.portal-area-tab--green,  .portal-area-panel--green  { --area-rgb: var(--portal-green-rgb); }
.portal-area-tab--red,    .portal-area-panel--red    { --area-rgb: var(--portal-red-rgb); }
.portal-area-tab--orange, .portal-area-panel--orange { --area-rgb: var(--portal-orange-rgb); }
.portal-area-tab--rose,   .portal-area-panel--rose   { --area-rgb: var(--portal-rose-rgb); }
.portal-area-tab--anis,   .portal-area-panel--anis   { --area-rgb: var(--portal-anis-rgb); }

/* ===== L'ecran d'accueil du hero =====
   Il n'appartient a aucun domaine, donc il ne prend aucune des sept teintes :
   c'est l'or de la marque qui le porte. La difference se voit sans qu'on ait a
   l'expliquer, et le premier clic sur un domaine fait entrer la couleur. */

.portal-area-panel--intro {
    --area-rgb: var(--portal-gold-rgb);
}

.portal-intro-choisir {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--portal-gold-rgb), 0.86);
    font-size: 14px;
}

.portal-areas__cta {
    display: grid;
    justify-items: center;
    gap: 9px;
    width: 100%;
    margin-top: clamp(20px, 3.4vh, 30px);
    padding: 0 clamp(8px, 2vw, 20px);
}

.portal-cta:focus-visible {
    outline: 3px solid rgba(var(--portal-gold-rgb), 0.44);
    outline-offset: 3px;
}

.portal-cta:active {
    transform: translateY(0);
}

.portal-cta__hint {
    margin: 0;
    max-width: 46ch;
    text-align: center;
    color: var(--portal-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .portal-areas2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================
   Hero sans presentation en base : on sort la scene du mode
   carrousel (absolu, hauteur fixe, contenu centre qui deborde)
   pour un vrai flux normal, une seule colonne. Corrige la
   superposition cartes/texte et laisse la page grandir.
   Ne s'applique qu'a la landing vide : le carrousel est intact.
   ========================================= */
.portal-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    /* Le hero grandit pour contenir le texte, donc overflow:hidden ne coupe
       rien du contenu ; il re-clippe juste les halos decoratifs (::before,
       glow) aux coins arrondis, sinon ils depassent en haut-droite / bas-gauche. */
    overflow: hidden;
}

.portal-hero .portal-slide-stage {
    overflow: visible;
}

.portal-hero .portal-slide {
    position: static;
    inset: auto;
    height: auto;
    min-height: 0;
    opacity: 1;
    transform: none;
    overflow: visible;
    justify-content: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}

.portal-hero .portal-slide > h1 {
    max-width: 820px;
}

.portal-hero .portal-slide > p {
    max-width: 720px;
}

.portal-direction--sleep {
    --direction-rgb: var(--portal-red-rgb);
}

.portal-direction__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 1px;
    padding: 4px 8px;
    border-radius: 999px;
    color: rgba(var(--white-rgb), 0.68);
    background: rgba(var(--direction-rgb), 0.10);
    border: 1px solid rgba(var(--direction-rgb), 0.16);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}

.portal-direction__hint--pin::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: rgba(var(--direction-rgb), 0.92);
    box-shadow: 0 0 12px rgba(var(--direction-rgb), 0.42);
}

.portal-direction__hint-selected {
    display: none;
}

.portal-direction:hover .portal-direction__hint,
.portal-direction:focus .portal-direction__hint,
.portal-direction.is-active .portal-direction__hint {
    color: rgba(var(--white-rgb), 0.90);
    background: rgba(var(--direction-rgb), 0.18);
    border-color: rgba(var(--direction-rgb), 0.28);
}

.portal-direction.is-selected {
    border-color: rgba(var(--direction-rgb), 0.46);
    background: linear-gradient(145deg, rgba(var(--direction-rgb),0.19), rgba(var(--white-rgb), 0.052)),
        rgba(var(--white-rgb), 0.065);
    box-shadow: 0 16px 34px rgba(var(--black-rgb), 0.20),
        0 0 0 1px rgba(var(--direction-rgb),0.15) inset,
        0 0 22px rgba(var(--direction-rgb),0.12);
}

.portal-direction.is-selected .portal-direction__hint {
    color: rgba(var(--portal-gold-clair-rgb), 0.96);
    background: rgba(var(--portal-accent-rgb), 0.12);
    border-color: rgba(var(--portal-accent-rgb), 0.24);
}

.portal-direction.is-selected .portal-direction__hint--pin::before {
    background: rgba(var(--portal-accent-rgb), 0.95);
    box-shadow: 0 0 14px rgba(var(--portal-accent-rgb), 0.44);
}

.portal-direction.is-selected .portal-direction__hint-default {
    display: none;
}

.portal-direction.is-selected .portal-direction__hint-selected {
    display: inline;
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
    .portal-direction__hint {
        display: none;
    }
}

.portal-action-hint {
    order: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: min(620px, 100%);
    margin-top: 4px;
    padding: 9px 13px;
    border-radius: 999px;
    color: rgba(var(--portal-gold-clair-rgb), 0.96);
    background: rgba(var(--portal-accent-rgb), 0.10);
    border: 1px solid rgba(var(--portal-accent-rgb), 0.20);
    font-size: 13px;
    line-height: 1.35;

}

.portal-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
    font-size: 13px;
    line-height: 1.45;
}

.portal-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 16px;
}

.portal-footer a {
    text-underline-offset: 3px;
}

.portal-footer a:hover {
    color: rgba(var(--white-rgb), 0.88);
    text-decoration: underline;
}
/* CES 7 REGLES ETAIENT DECLAREES DEUX FOIS.

   Ce premier jeu etait entierement reecrit plus bas (l.1441).
   A selecteur et poids egaux, la derniere ecrite gagne : rien de ce qui
   vivait ici ne s'appliquait, et le lire donnait une fausse idee de ce
   que l'ecran fait.

     `.portal-login-modal`
     `.portal-login-modal[hidden]`
     `.portal-login-modal.is-open`
     `.portal-login-modal__backdrop`
     `.portal-login-modal__inner`
     `.portal-login-modal__inner::before`
     `.portal-login-modal__inner > *` */
.portal-login-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 14px;
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.portal-login-modal[hidden] {
    display: none;
}

.portal-login-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.portal-login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--black-rgb), 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.portal-login-modal__inner {
    position: relative;
    z-index: 1;
    width: min(450px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: auto;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 18px;
    padding: 24px;
    color: var(--white);
    background: rgba(var(--slate-mid-rgb), 0.96);
    box-shadow: 0 30px 100px rgba(var(--black-rgb), 0.44);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.portal-login-modal__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at top right, rgba(var(--portal-accent-rgb),0.12), transparent 40%),
        radial-gradient(circle at bottom left, rgba(var(--portal-blue-rgb),0.10), transparent 44%);
    pointer-events: none;
}

.portal-login-modal__inner > * {
    position: relative;
    z-index: 1;
}

/* La croix est DESSINEE, pas ecrite.
 *
 * Le bouton centrait bien la boite de son texte (mesure : 0,5 px d'ecart),
 * mais l'oeil du caractere « × » ne coincide pas avec cette boite : il se pose
 * sur la hauteur d'x, donc au-dessus du milieu, et le decalage depend de la
 * police du systeme. Le compenser par une valeur fixe marcherait sur une
 * machine et pas sur la suivante.
 *
 * Deux barres croisees se placent au centre geometrique du bouton, quelle que
 * soit la police. Le caractere reste dans le HTML mais ne s'affiche plus ; le
 * bouton porte de toute facon son `aria-label`, donc rien ne se perd pour qui
 * l'ecoute. */
.portal-login-modal__close {
    appearance: none;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    color: var(--white);
    background: rgba(var(--white-rgb), 0.08);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, transform .18s ease;
}

.portal-login-modal__close::before,
.portal-login-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
}

/* Les deux composantes sont declarees ENSEMBLE : une transformation ecrite en
   second effacerait la premiere, et la barre partirait du coin. */
.portal-login-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.portal-login-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.portal-login-modal__close:hover {
    background: rgba(var(--white-rgb), 0.13);
    transform: translateY(-1px);
}

.portal-login-modal__head {
    padding-right: 38px;
    margin-bottom: 18px;
}

.portal-login-modal__kicker {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(var(--white-rgb), 0.78);
    background: rgba(var(--white-rgb), 0.06);
    border: 1px solid rgba(var(--white-rgb), 0.08);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.portal-login-modal h2 {
    margin: 0;
    color: rgba(var(--white-rgb), 0.98);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.portal-login-modal p {
    margin: 8px 0 0;
    color: rgba(var(--white-rgb), 0.68);
    line-height: 1.55;
}

.portal-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
}

.portal-alert--success {
    color: rgba(var(--couleur-succes-doux-rgb), 0.96);
    background: rgba(var(--share-bright-rgb), 0.13);
    border: 1px solid rgba(var(--share-bright-rgb), 0.22);
}

.portal-alert--error {
    color: rgba(var(--couleur-danger-doux-rgb), 0.98);
    background: rgba(var(--red-rgb), 0.13);
    border: 1px solid rgba(var(--red-rgb), 0.24);
}

.portal-login-form {
    display: grid;
    gap: 13px;
}

.portal-field {
    display: grid;
    gap: 7px;
}

.portal-field label,
.portal-checkbox {
    color: rgba(var(--white-rgb), 0.78);
    font-size: 14px;
    line-height: 1.35;
}

/* UN CHAMP DOIT SE VOIR AVANT D'ETRE REMPLI.
 *
 * Mesure sur le formulaire de demande d'acces : la bordure ressortait a 2,28
 * de contraste contre la carte, et le fond du champ a 1,64. La norme demande
 * 3,0 pour la limite d'un controle (WCAG 1.4.11), et pour une bonne raison :
 * en dessous, on ne voit plus ou l'on peut ecrire, on le devine.
 *
 * Detail qui disait tout : le seul champ du formulaire qui passait le seuil
 * etait le piege anti-robot, celui qu'aucun humain n'est cense voir.
 *
 * La bordure passe donc a 0,24 (environ 3,6 de contraste) et le fond se creuse
 * legerement : un champ se lit comme un creux dans la carte, pas comme une
 * zone de la meme couleur qu'elle. */
.portal-field input {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(var(--white-rgb), 0.24);
    background: rgba(var(--black-rgb), 0.34);
    color: var(--white);
    padding: 9px 12px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.portal-field input:focus {
    border-color: rgba(var(--portal-accent-rgb), 0.44);
    background: rgba(var(--white-rgb), 0.08);
    box-shadow: 0 0 0 4px rgba(var(--portal-accent-rgb), 0.10);
}

.portal-checkbox {
    display: flex;
    /* Un consentement tient sur trois lignes : centrer la case verticalement
       la posait au milieu du paragraphe, loin de la premiere ligne qu'elle
       qualifie. Elle s'aligne donc en haut, decalee pour tomber sur la
       hauteur de la premiere ligne. */
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.portal-checkbox input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: rgb(var(--portal-gold-rgb));
}

/* Les liens des consentements et des encadres sortaient en bleu puis violet,
   soulignes : les couleurs par defaut du navigateur au milieu d'une page qui
   a les siennes. C'est du lien dans un contenant, donc bleu de la palette. */
.portal-checkbox a,
.portal-access__note a,
.portal-access__fine a {
    color: rgba(var(--portal-accent-clair-rgb), 0.95);
    text-decoration: none;
    text-underline-offset: 3px;
}

.portal-checkbox a:hover,
.portal-access__note a:hover,
.portal-access__fine a:hover {
    text-decoration: underline;
}

.portal-btn--full {
    width: 100%;
}

.portal-forgot {
    width: fit-content;
    margin: 0 auto;
    color: rgba(var(--white-rgb), 0.68);
    text-decoration: none;
    font-size: 14px;
    text-underline-offset: 3px;
}

.portal-forgot:hover {
    color: rgba(var(--white-rgb), 0.92);
    text-decoration: underline;
}

/* La demande d'acces se lit apres le formulaire, pas a sa place : elle est
   plus discrete que « mot de passe oublie », qui reste l'action attendue ici. */
.portal-login-demande {
    margin: 4px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(var(--white-rgb), 0.52);
}

.portal-login-demande a {
    color: rgba(var(--portal-gold-rgb), 0.92);
    text-decoration: none;
    text-underline-offset: 3px;
}

.portal-login-demande a:hover {
    text-decoration: underline;
}

/* Le lien de repli colle au bouton quand il suit un formulaire : la grille
   du formulaire ne l'espace pas, il est en dehors. */
.portal-access__form + .portal-forgot {
    display: block;
    margin-top: 16px;
}

.portal-image-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    margin: auto;
    padding: 0;
    border: 0;
    color: var(--white);
    background: transparent;
    overflow: visible;
}

.portal-image-modal:not([open]) {
    display: none;
}

.portal-image-modal::backdrop {
    background: rgba(var(--black-rgb), 0.76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.portal-image-modal__inner {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 28px);
    display: block;
    padding: 14px;
    border-radius: 18px;
    background: rgba(var(--ink-900-rgb), 0.96);
    border: 1px solid rgba(var(--white-rgb), 0.12);
    box-shadow: 0 30px 100px rgba(var(--black-rgb), 0.50);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--barre-pouce) var(--barre-piste);
}

.portal-image-modal__inner::-webkit-scrollbar {
    width: 10px;
}

.portal-image-modal__inner::-webkit-scrollbar-track {
    background: transparent;
}

.portal-image-modal__inner::-webkit-scrollbar-thumb {
    background: rgba(var(--white-rgb), 0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.portal-image-modal__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
    border-radius: 16px;
    object-fit: contain;
    background: rgba(var(--white-rgb), 0.04);
}

.portal-image-modal__caption {
    margin-top: 10px;
    color: rgba(var(--white-rgb), 0.74);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.portal-image-modal__close {
    appearance: none;
    position: sticky;
    top: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-bottom: -38px;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 12px;
    color: var(--white);
    background: rgba(var(--black-rgb), 0.72);
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-image-modal__close:hover {
    background: rgba(var(--black-rgb), 0.88);
}

@media (max-width: 1040px) {
    .portal-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(390px, auto) auto;
    }

    .portal-slide-stage {
        grid-column: 1;
        grid-row: 1;
    }

    .portal-directions {
        grid-column: 1;
        grid-row: 2;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .portal-shell {
        padding: 16px;
    }

    .portal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .portal-header__actions {
        width: 100%;
        justify-content: center;
    }

    /*
     * Le sous-titre de marque RESTE visible sur mobile.
     *
     * Il etait masque du temps ou il disait « Plateforme experte pour la
     * consultation », une ligne sans enjeu. Il porte desormais le nom de
     * categorie, la chaine la plus identitaire de la page, et le premier
     * contact se fait souvent sur telephone. Vingt et un caracteres a 13px
     * tiennent sans peine dans 375px.
     */
    .portal-brand__subtitle {
        font-size: 12px;
    }

    .portal-brand__mark {
        width: 40px;
        height: 40px;
        flex-basis: 42px;
        border-radius: 14px;
    }

    .portal-brand__image {
        width: 32px;
        height: 32px;
    }

    .portal-main {
        padding: 22px 0;
    }

    .portal-hero {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(360px, auto) auto;
        gap: 16px;
        border-radius: 18px;
        padding: 24px 14px 14px;
    }

    .portal-slide-stage {
        min-height: 360px;
        border-radius: 18px;
    }

    .portal-slide {
        padding: 22px 14px;
    }

    .portal-slide h1 {
        letter-spacing: -0.04em;
    }

    .portal-slide__prompt {
        margin-top: 16px;
    }

    .portal-slide__media {
        width: min(360px, 92%);
        height: auto;
    }

    .portal-request-chips {
        gap: 7px;
    }

    .portal-request-chips span {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 13px;
    }

    .portal-directions {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .portal-direction {
        min-height: 64px;
        border-radius: 16px;
        padding: 12px 13px;
    }

    .portal-footer {
        flex-direction: column;
        padding-top: 4px;
    }

    .portal-footer__links {
        justify-content: flex-start;
    }

    .portal-login-modal__inner {
        padding: 22px 18px 18px;
    }

    /* На мобильных экран растягивается по содержимому,
   а не превращается во внутренний скролл-блок */
    .portal-slide-stage {
        min-height: auto;
        overflow: visible;
    }

    .portal-slide {
        position: relative;
        inset: auto;
        display: none;
        width: 100%;
        min-height: auto;
        overflow: visible;
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    .portal-slide.is-active {
        display: flex;
        pointer-events: auto;
    }

    .portal-slide::-webkit-scrollbar {
        display: none;
    }

    .landing-cards {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .landing-card {
        padding: 15px;
    }    
}

@media (max-width: 420px) {
    .portal-shell {
        padding: 12px;
    }

    .portal-brand__name {
        font-size: 15px;
    }

    .portal-hero {
        border-radius: 18px;
    }

    .portal-kicker {
        font-size: 12px;
    }

    /*
     * `portal-slide__prompt h2` n'est plus ici : c'est devenu une etiquette de
     * 13px, qui n'a pas a retrecir sur mobile et qui deviendrait illisible.
     */
    .portal-slide__title {
        font-size: 21px;
    }

    .portal-login-modal {
        width: calc(100vw - 18px);
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================
   Promo partner registration page
   ========================================= */

.portal-register-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.portal-register-main {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: 28px 0 24px;
}

.portal-register-card {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
    gap: clamp(18px, 3vw, 30px);
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid var(--portal-border);
    background: rgba(var(--surface-sombre-rgb), 0.42);
    box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.03) inset,
        0 30px 90px rgba(var(--black-rgb), 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: clamp(20px, 3.5vw, 34px);
}

.portal-register-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 16%, rgba(var(--portal-accent-rgb),0.12), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(var(--portal-blue-rgb),0.10), transparent 38%),
        radial-gradient(circle at 50% 100%, rgba(var(--portal-green-rgb),0.08), transparent 44%);
}

.portal-register-card > * {
    position: relative;
    z-index: 1;
}

.portal-register-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    padding: clamp(6px, 2vw, 14px);
}

.portal-register-card__info h1 {
    margin: 0;
    color: rgba(var(--white-rgb), 0.98);
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.052em;
    text-shadow: 0 12px 34px rgba(var(--black-rgb), 0.38);
}

.portal-register-card__info p {
    margin: 0;
    color: rgba(var(--white-rgb), 0.76);
    font-size: 17px;
    line-height: 1.6;
}

.portal-register-steps {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.portal-register-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
}

.portal-register-step span {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--portal-accent-rgb), 0.18);
    color: rgba(var(--white-rgb), 0.94);
    font-weight: 900;
}

.portal-register-step p {
    margin: 0;
    color: rgba(var(--white-rgb), 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.portal-register-card__form-wrap {
    min-width: 0;
    padding: clamp(18px, 3vw, 24px);
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.10);
    background: rgba(var(--slate-mid-rgb), 0.74);
    box-shadow: 0 20px 56px rgba(var(--black-rgb), 0.24),
        inset 0 1px 0 rgba(var(--white-rgb), 0.08);
}

.portal-register-form {
    gap: 15px;
}

.portal-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.portal-field select {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(var(--white-rgb), 0.24);
    background: rgba(var(--black-rgb), 0.34);
    color: var(--white);
    padding: 9px 12px;
    outline: none;
    color-scheme: dark;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.portal-field select:focus {
    border-color: rgba(var(--portal-accent-rgb), 0.44);
    background: rgba(var(--white-rgb), 0.08);
    box-shadow: 0 0 0 4px rgba(var(--portal-accent-rgb), 0.10);
}

.portal-field select option {
    background: var(--slate-mid);
    color: var(--ink-50);
}

/* ===== Indicatif et numero : ce qui change sur la vitrine =====

   La mecanique du composant est dans `champ-telephone.css`, chargee juste
   avant celle-ci. Il ne reste ici que les quatre valeurs qui different,
   parce que l'apercu se pose PAR-DESSUS un champ et doit s'aligner sur les
   champs de cette page : `.portal-field input` a 12 px de retrait et ecrit
   en `--white`, la ou l'application a 14 px et `--ink-200`. */
.champ-telephone {
    --champ-tel-retrait: 12px;
    --champ-tel-encre: var(--white);
    --champ-tel-fleche: rgba(var(--white-rgb), 0.6);
    --champ-tel-option-encre: var(--ink-50);
    --champ-tel-fleche-droite: 12px;
    /* `.portal-field input` est en 16 px a toutes les largeurs. */
    --champ-tel-taille: 16px;
}

.portal-register-consents {
    display: grid;
    gap: 11px;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
}

.portal-register-checkbox {
    align-items: flex-start;
    width: 100%;
}

.portal-register-checkbox input {
    margin-top: 2px;
    flex: 0 0 16px;
}

.portal-register-checkbox span {
    color: rgba(var(--white-rgb), 0.76);
    font-size: 13px;
    line-height: 1.45;
}

.portal-register-checkbox a,
.portal-register-note a {
    color: rgba(var(--portal-gold-clair-rgb), 0.96);
    text-underline-offset: 3px;
}

.portal-register-note {
    margin: 0;
    color: rgba(var(--white-rgb), 0.60);
    font-size: 12px;
    line-height: 1.45;
}

.portal-alert ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

@media (max-width: 980px) {
    .portal-register-card {
        grid-template-columns: 1fr;
    }

    .portal-register-card__info {
        text-align: center;
        align-items: center;
    }

    .portal-register-steps {
        width: min(620px, 100%);
    }
}

@media (max-width: 640px) {
    .portal-register-main {
        padding: 22px 0;
    }

    .portal-register-card {
        border-radius: 18px;
        padding: 14px;
    }

    .portal-register-card__form-wrap {
        border-radius: 18px;
        padding: 18px;
    }

    .portal-register-grid {
        grid-template-columns: 1fr;
    }

    .portal-register-card__info h1 {
        font-size: 32px;
    }
}

/* ------------------------------------------------------------------ *
 *  Demande d'acces praticien (section #access de la landing)
 *
 *  Reutilise .portal-field, .portal-checkbox, .portal-alert et .portal-btn
 *  deja definis plus haut : seuls la mise en page de la section, le
 *  textarea et les messages d'erreur par champ manquaient.
 * ------------------------------------------------------------------ */

.portal-access {
    padding: 64px 20px 24px;
}

.portal-access__inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 18px;
    border: 1px solid var(--portal-border);
    background: var(--portal-panel);
    backdrop-filter: blur(14px);
}

.portal-access__head {
    margin-bottom: 22px;
}

.portal-access__kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    color: rgba(var(--portal-gold-rgb), 0.9);
    margin-bottom: 8px;
}

/* Le `h1` etait absent du selecteur : les deux pages d'inscription en
   posaient un et heritaient donc de la taille par defaut du navigateur. */
.portal-access__head h1,
.portal-access__head h2 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.25;
    color: var(--portal-text);
}

.portal-access__head p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 15px;
    line-height: 1.55;
}

.portal-access__form {
    display: grid;
    gap: 14px;
}

/* Le bloc du referent est encadre : c'est la question qui conditionne tout
   le reste, elle ne doit pas se lire comme un champ parmi les autres. */
.portal-access__referral {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.26);
    background: rgba(var(--portal-accent-rgb), 0.06);
}

/* Ce bloc a son propre fond, plus clair que la carte : la bordure de champ
   commune y ressortait a 2,89 quand les autres etaient a 3,55. Une meme valeur
   ne donne pas le meme contraste sur deux fonds differents, c'est le contraste
   qu'on vise, pas la valeur. Selecteur en balise + classe, sinon la regle
   generale des champs l'emporte. */
.portal-access__referral input[type="text"],
.portal-access__referral input {
    border-color: rgba(var(--white-rgb), 0.34);
}

.portal-access__referral legend {
    padding: 0 6px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.92));
}

.portal-access__referral small {
    color: rgba(var(--white-rgb), 0.52);
    font-size: 12.5px;
    line-height: 1.4;
}

.portal-access__form textarea {
    width: 100%;
    min-height: 96px;
    border-radius: 12px;
    border: 1px solid rgba(var(--white-rgb), 0.24);
    background: rgba(var(--black-rgb), 0.34);
    color: var(--white);
    padding: 10px 12px;
    font: inherit;
    outline: none;
    resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.portal-access__form textarea:focus {
    border-color: rgba(var(--portal-accent-rgb), 0.55);
    background: rgba(var(--white-rgb), 0.09);
    box-shadow: 0 0 0 3px rgba(var(--portal-accent-rgb), 0.14);
}

.portal-error {
    color: rgba(var(--couleur-danger-doux-rgb), 0.96);
    font-size: 13px;
    line-height: 1.4;
}

/* Champ neutralise quand le candidat declare n'avoir aucun referent. */
.portal-field input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .portal-access {
        padding: 44px 14px 18px;
    }

    .portal-access__inner {
        padding: 20px;
    }

    .portal-access__head h1,
    .portal-access__head h2 {
        font-size: 22px;
    }

    .portal-access__note {
        padding: 14px;
    }
}

/* Deux blocs .portal-access qui se suivent : on retire le double espacement. */
.portal-access--tight {
    padding-top: 0;
}

/* L'encadre d'explication pose avant le formulaire : ce qui se passe apres
   l'inscription, ou la marche a suivre quand le code est introuvable. C'est
   du contenu de carte, donc l'accent y est bleu. */
.portal-access__note {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.22);
    background: rgba(var(--portal-accent-rgb), 0.06);
}

.portal-access__note-title {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(var(--portal-accent-clair-rgb), 0.95);
}

.portal-access__note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--portal-muted);
}

.portal-access__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: portal-etape;
    display: grid;
    gap: 12px;
}

.portal-access__steps li {
    counter-increment: portal-etape;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px 12px;
    align-items: baseline;
}

.portal-access__steps li::before {
    content: counter(portal-etape);
    grid-row: span 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.35);
    color: rgba(var(--portal-accent-clair-rgb), 0.95);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.portal-access__steps strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--portal-text);
}

.portal-access__steps span {
    font-size: 13px;
    line-height: 1.55;
    color: var(--portal-muted);
}

/* La mention legale sous les consentements : lisible, jamais dominante. */
.portal-access__fine {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--portal-muted);
}

.portal-access__form select {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(var(--white-rgb), 0.24);
    background: rgba(var(--black-rgb), 0.34);
    color: var(--white);
    padding: 9px 12px;
    font: inherit;
    outline: none;
}

/* =========================================
   Introduction a la technologie
   -----------------------------------------
   Quatre blocs autonomes, poses entre les domaines de pratique et le point de
   connexion. Ils portent le role provisoire de la page : tant que le site de
   presentation de la technologie n'existe pas, strannik.online est le seul
   point europeen et doit introduire, pas seulement donner acces.

   Ecrits pour partir d'un bloc : chaque `.portal-intro__block` se suffit a
   lui-meme, aucun n'herite de la mise en page d'un autre.
   ========================================= */

.portal-intro {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 4vw, 48px);
    display: grid;
    gap: clamp(40px, 6vw, 80px);
}

.portal-intro__block {
    display: grid;
    gap: 18px;
}

.portal-intro__title {
    margin: 0;
    font-size: clamp(22px, 3.1vw, 32px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--portal-text);
}

.portal-intro__subtitle {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--portal-gold-rgb), 0.88);
}

.portal-intro__lead {
    margin: 0;
    max-width: 68ch;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.62;
    color: var(--portal-muted);
}

.portal-intro__note {
    margin: 4px 0 0;
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(var(--white-rgb), 0.52);
}

/* --- Le deroulement du test ---------------------------------------------
   Les rangs sont numerotes parce que l'ordre porte une information : les
   quinze secondes precedent le filtre, qui precede la restitution. Sans cet
   enchainement le test ne veut rien dire. */

.portal-steps {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    counter-reset: portal-step;
}

.portal-step {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: clamp(16px, 2.2vw, 22px);
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.10);
    background: linear-gradient(160deg, rgba(var(--portal-accent-rgb), 0.08), rgba(var(--white-rgb), 0.02)),
        var(--portal-panel);
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.04);
}

.portal-step__rank {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.46);
    background: rgba(var(--portal-accent-rgb), 0.08);
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.94));
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.portal-step__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--portal-text);
}

.portal-step__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--portal-muted);
}

/* --- Les quatre fonctions ----------------------------------------------- */

.portal-functions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.portal-function {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--white-rgb), 0.08);
    background: rgba(var(--white-rgb), 0.04);
}

.portal-function__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.94));
}

.portal-function__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--portal-muted);
}

/* --- Les huit composantes de la synthese -------------------------------- */

.portal-output {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.portal-output__item {
    position: relative;
    padding: 12px 14px 12px 30px;
    border-radius: 12px;
    background: rgba(var(--white-rgb), 0.02);
    font-size: 15px;
    line-height: 1.5;
    color: var(--portal-muted);
}

.portal-output__item::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--portal-accent-rgb), 0.85);
}

/* --- Le cadre -----------------------------------------------------------
   Deux colonnes, sans code couleur d'alerte : ce n'est pas un avertissement,
   c'est un perimetre. La distinction se fait par la bordure d'appui. */

.portal-frame {
    margin: 6px 0 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.portal-frame__column {
    padding: clamp(16px, 2.2vw, 22px);
    border-radius: 18px;
    border: 1px solid rgba(var(--white-rgb), 0.10);
    background: var(--portal-panel);
}

.portal-frame__column--is-not {
    border-left: 3px solid rgba(var(--white-rgb), 0.24);
}

.portal-frame__column--is {
    border-left: 3px solid rgba(var(--portal-accent-rgb), 0.62);
}

.portal-frame__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--portal-text);
}

.portal-frame__column ul {
    margin: 0;
    padding: 0 0 0 18px;
    display: grid;
    gap: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--portal-muted);
}

/* --- Les chiffres du service -------------------------------------------- */

.portal-figures {
    margin: 6px 0 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.portal-figure {
    display: grid;
    gap: 4px;
    padding: clamp(16px, 2.2vw, 22px);
    border-radius: 16px;
    border: 1px solid rgba(var(--portal-accent-rgb), 0.20);
    background: linear-gradient(160deg, rgba(var(--portal-accent-rgb), 0.07), rgba(var(--white-rgb), 0.02));
    text-align: center;
}

.portal-figure__number {
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.96));
}

.portal-figure__label {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--portal-muted);
}

@media (prefers-reduced-motion: reduce) {
    .portal-intro * {
        transition: none !important;
    }
}

/* --- Intitule de section ------------------------------------------------
   Chaque bloc de l'introduction s'annonce par son intitule, avant son titre.
   Il donne le rythme de la page et permet de reperer une section sans la lire.
   Meme rang que l'etiquette des domaines : 13px, capitales espacees, accent. */

.portal-eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--portal-gold-rgb), 0.90);
}

.portal-intro__block > .portal-eyebrow + .portal-intro__title {
    margin-top: -6px;
}

/* Les traits de la neuro-regulation portent une phrase et non un fragment :
   ils ont besoin d'un peu plus d'air que les quatre observables du protocole. */
.portal-functions--large .portal-function {
    padding: 16px 18px;
    gap: 6px;
}

.portal-functions--large .portal-function__name {
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.94));
}

/* --- Pied de page --------------------------------------------------------
   Il portait une ligne et trois liens colles a droite. Il donne maintenant les
   trois choses qu'on y cherche : qui c'est, comment joindre, ou sont les
   mentions. Quatre colonnes qui se replient une a une. */

.portal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(20px, 4vw, 56px) clamp(24px, 5vw, 72px);
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: clamp(22px, 3vw, 32px);
    border-top: 1px solid rgba(var(--white-rgb), 0.08);
    color: rgba(var(--white-rgb), var(--voile-mention, 0.58));
    font-size: 13px;
    line-height: 1.5;
}

.portal-footer__identity {
    display: grid;
    gap: 2px;
    align-content: start;
}

.portal-footer__name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--white-rgb), 0.92);
}

.portal-footer__tag {
    color: var(--portal-muted);
}

.portal-footer__column {
    display: grid;
    gap: 6px;
    align-content: start;
}

.portal-footer__label {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--portal-gold-rgb), 0.86);
}

.portal-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition, 180ms) ease, border-color var(--transition, 180ms) ease;
    justify-self: start;
}

.portal-footer a:hover,
.portal-footer a:focus-visible {
    color: rgba(var(--white-rgb), 0.92);
    border-bottom-color: rgba(var(--portal-accent-rgb), 0.6);
}

/* La mention legale prend toute la largeur, sous les trois colonnes. */
.portal-footer__legal {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(var(--white-rgb), 0.06);
    font-size: 12px;
    color: rgba(var(--white-rgb), var(--voile-mention-basse, 0.42));
}

@media (max-width: 760px) {
    .portal-footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* --- Filet de securite sur les liens --------------------------------------
   Le lien de consentement du formulaire tombait sur le bleu par defaut du
   navigateur, rgb(0,0,238), soit un contraste de l'ordre de 1,5:1 sur notre
   fond sombre : illisible. Aucune regle ne couvrait les liens sans classe.

   Corrige a la source plutot que sur ce lien : tout lien du portail qui ne
   porte pas de classe prend l'accent. Les liens deja stylises (pied de page,
   boutons) ont leur propre regle et ne sont pas touches. */

.portal-page a:not([class]) {
    color: var(--texte-accent, rgba(var(--portal-accent-rgb), 0.92));
    text-decoration-color: rgba(var(--portal-accent-rgb), 0.45);
    text-underline-offset: 2px;
}

.portal-page a:not([class]):hover,
.portal-page a:not([class]):focus-visible {
    color: rgb(var(--portal-accent-clair-rgb));
    text-decoration-color: rgba(var(--portal-accent-clair-rgb), 0.7);
}

/* Le pied de page reprend la main.
   Le filet ci-dessus vise les liens sans classe, or ceux du pied n'en portent
   pas non plus : ils etaient tous passes en cyan vif, ce qui rend un pied
   bruyant. Meme specificite, place apres, la regle l'emporte. Le lien reste
   discret et ne s'eclaire qu'au survol. */

.portal-footer a:not([class]) {
    color: inherit;
    text-decoration: none;
}

.portal-footer a:not([class]):hover,
.portal-footer a:not([class]):focus-visible {
    color: rgba(var(--white-rgb), 0.92);
}

/* --- Cible tactile ---------------------------------------------------------
   Sur ecran tactile, un bouton se touche au doigt : 44px de haut au minimum.
   Pose sur les trois d'un coup, pour que la regle tienne aussi pour ceux
   qu'on ajoutera. */

@media (pointer: coarse) {
    .portal-login-link,
    .portal-btn,
    .portal-cta {
        min-height: 42px;
    }
}

/* Les coordonnees du pied : l'intitule a gauche, la valeur a droite.
   Un e-mail, un numero et un pseudo alignes sans etiquette laissent deviner
   lequel est lequel, surtout le pseudo Telegram. */

.portal-footer__contacts {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    align-items: baseline;
}

.portal-footer__contacts dt {
    color: rgba(var(--white-rgb), 0.40);
    font-size: 12px;
}

.portal-footer__contacts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Le selecteur de date natif.

   PLUS D'INVERSION ICI. Elle datait du temps ou le document ne declarait pas
   `color-scheme: dark` : l'icone arrivait noire, et on la retournait. Depuis
   que la declaration existe, le navigateur la dessine DEJA en clair, et
   l'inversion la repeignait en noir. Invisible a nouveau, pour la raison
   inverse : deux corrections justes chacune a sa date, fausses ensemble.

   Ne restent que l'opacite, qui range une commande secondaire, et le curseur,
   qui dit qu'on peut cliquer. */
.portal-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .65;
    cursor: pointer;
}

.portal-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ======================================================================
   LA MARQUE EN AVANT
   ======================================================================
   38 px de logo et 16 px de nom : la marque etait la, mais elle ne se voyait
   pas. Sur une page dont le titre fait 97 px de haut, elle passait pour une
   mention legale.

   Elle prend la meme dimension que dans l'espace personnel : c'est la meme
   marque, elle doit se reconnaitre d'un ecran a l'autre.
   ====================================================================== */
.portal-brand__mark {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.portal-brand__image {
    width: 48px;
    height: 48px;
}

.portal-brand__name {
    font-size: 20px;
    letter-spacing: 0.08em;
}

.portal-brand__subtitle {
    font-size: 13.5px;
}

/* En dessous de la tablette, la marque reste lisible sans manger la ligne. */
@media (max-width: 640px) {
    .portal-brand__mark {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .portal-brand__image {
        width: 40px;
        height: 40px;
    }

    .portal-brand__name {
        font-size: 17px;
    }
}

/* =========================================================================
   « Physio-Psycho Scanner » en MONOSPACE.

   Ce n'est pas un slogan, c'est la designation de l'instrument. En romaine il
   se lisait comme une accroche ; en monospace espacee il rejoint la famille
   des etiquettes techniques du produit et dit ce qu'il est : un appareil de
   mesure. Meme traitement sur toutes les pages publiques, le bandeau est
   partage.
   ========================================================================= */
.portal-brand__subtitle {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: rgba(var(--white-rgb), var(--voile-mention, 0.55));
}

/* La page ne defile plus derriere la fenetre de connexion. Sans cela, un geste
   de molette fait glisser la vitrine sous la fenetre ouverte et on perd sa
   place en la refermant. */
body.has-modal-open {
    overflow: hidden;
}

/* =========================================================================
   LE BANDEAU DES PAGES LEGALES SANS TRADUCTION.

   Ambre, comme tout ce qui previent sans interdire : le document se lit, il
   dit simplement dans quelle langue et pourquoi. Ni rouge, qui annoncerait une
   erreur, ni bleu, qui se lirait comme une action.
   ========================================================================= */
.legal-repli {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(var(--amber-bright-rgb), 0.34);
    border-left-width: 3px;
    background: rgba(var(--amber-bright-rgb), 0.08);
    color: var(--ink-200);
}

.legal-repli strong {
    display: block;
    margin-bottom: 4px;
}

.legal-repli p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.5;
    color: rgba(var(--ink-200-rgb), 0.82);
}