/* ==========================================================
   RidePaddle — la couche téléphone
   ==========================================================
   Tout ce fichier vit sous 992 px. Sur ordinateur, il ne
   s'applique pas : la version web reste exactement celle
   validée, et rien ici ne peut la casser.

   Trois idées portent la refonte :

     1. la navigation descend sous le pouce. Une barre de cinq
        onglets, toujours visible, remplace le menu qu'il
        fallait ouvrir. Le geste principal — tracer un
        parcours — est le bouton surélevé du milieu ;

     2. rien ne se touche à moins de 44 px. C'est la taille
        d'un doigt : en dessous, on vise, on rate, on
        recommence. Les rangées d'actions deviennent des
        boutons pleine largeur empilés ;

     3. l'écran est petit, donc la hiérarchie doit être
        brutale. Un chiffre énorme, un libellé minuscule,
        et rien entre les deux.

   Les encoches et la barre d'accueil des téléphones récents
   sont gérées par env(safe-area-inset-*) : sans ça, la barre
   d'onglets passe sous la barre d'accueil de l'iPhone.
   ========================================================== */

:root {
    --icone-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    --appbar-h: 56px;
    --onglets-h: 60px;
    --safe-bas: env(safe-area-inset-bottom, 0px);
    --safe-haut: env(safe-area-inset-top, 0px);
}

/* La barre du haut et celle du bas n'existent que sur téléphone. */
.appbar { display: none; }
.onglets { display: none; }

@media (max-width: 991.98px) {

/* ==========================================================
   1. La coquille : barre du haut, barre du bas
   ========================================================== */

/* Le menu de bureau disparaît entièrement : garder les deux
   ferait deux navigations concurrentes sur le même écran. */
.site-navbar { display: none !important; }

.appbar {
    display: flex;
    align-items: center;
    gap: .25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    height: calc(var(--appbar-h) + var(--safe-haut));
    padding: var(--safe-haut) .5rem 0;
    background: var(--blue-deep);
    color: #fff;
    /* Une ombre plutôt qu'un trait : elle dit « cette barre flotte
       au-dessus du contenu qui défile dessous ». */
    box-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}

.appbar__marque {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    padding-left: .5rem;
}

.appbar__titre {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    /* Un titre long est coupé, jamais renvoyé à la ligne : la barre
       doit garder exactement la même hauteur sur tous les écrans. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.appbar__actions {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-left: auto;
    flex-shrink: 0;
}

.appbar__bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.appbar__bouton:active { background: rgba(255, 255, 255, .16); }
.appbar__bouton svg { width: 23px; height: 23px; }

/* Le bouton de thème montre l'état vers lequel on va, pas celui
   où l'on est : en clair on voit une lune (« passer en sombre »). */
.appbar__bouton .icone-lune { display: block; }
.appbar__bouton .icone-soleil { display: none; }
:root[data-theme="sombre"] .appbar__bouton .icone-lune { display: none; }
:root[data-theme="sombre"] .appbar__bouton .icone-soleil { display: block; }

.appbar__pastille {
    position: absolute;
    top: 6px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--blue-deep);
}

/* --- La barre d'onglets ------------------------------------------ */
.onglets {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    height: calc(var(--onglets-h) + var(--safe-bas));
    padding-bottom: var(--safe-bas);
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Le flou laisse deviner le contenu qui passe dessous : la barre
       reste posée sur la page au lieu de la couper en deux. */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.onglets__lien {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.onglets__lien.est-actif { color: var(--blue); }
.onglets__lien:active { color: var(--blue); }

.onglets__icone svg { width: 24px; height: 24px; display: block; }

.onglets__libelle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Un trait fin au-dessus de l'onglet actif : plus lisible qu'une
   simple couleur pour qui distingue mal les teintes. */
.onglets__lien.est-actif::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--blue);
}

/* --- Le bouton central, surélevé --------------------------------- */
.onglets__lien--creer { justify-content: flex-end; padding-bottom: 6px; }
/* Le trait bleu de l'onglet actif traverserait le bouton rond en son
   milieu. La classe .est-actif doit figurer ici aussi : sans elle, la
   règle générale (plus spécifique) l'emporte et le trait réapparaît
   dès qu'on est sur l'écran « Créer ». */
.onglets__lien--creer::before,
.onglets__lien--creer.est-actif::before { content: none !important; }

.onglets__bulle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -22px;
    margin-bottom: 2px;
    border-radius: 50%;
    /* Le bouton reprend le dégradé de la marque : l'orange d'avant
       était le seul élément du site à sortir de la charte. */
    background: linear-gradient(140deg, var(--ride) 0%, var(--ride-encre) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 118, 196, .5);
    border: 3px solid var(--surface);
}
.onglets__bulle svg { width: 26px; height: 26px; }
.onglets__lien--creer.est-actif .onglets__bulle { filter: brightness(.92); }

.onglets__pastille {
    position: absolute;
    top: 4px;
    left: 55%;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* La page doit pouvoir défiler jusqu'au bout sans que la barre
   d'onglets recouvre la dernière ligne. */
body.a-onglets {
    padding-bottom: calc(var(--onglets-h) + var(--safe-bas));
}

/* Les anciennes règles téléphone de style.css calculent des hauteurs
   à partir de --navbar-height. La barre du haut est plus basse que
   l'ancien menu : on aligne la variable plutôt que de réécrire ces
   règles une par une. */
:root, body { --navbar-height: var(--appbar-h); }

/* Le bouton d'envoi collant du formulaire « ajouter un lieu » remonte
   au-dessus des onglets, sinon il se retrouve dessous. */
.add-spot-form .btn[type="submit"] {
    bottom: calc(var(--onglets-h) + var(--safe-bas) + .75rem);
}

/* ==========================================================
   2. Les fondamentaux : lisibilité, cibles, rythme
   ========================================================== */

body {
    font-size: 15px;
    /* Un rebond élastique en fin de page fait croire à un bug quand
       la barre d'onglets est fixe : on le coupe. */
    overscroll-behavior-y: none;
}

/* 16 px minimum sur les champs : en dessous, iOS zoome tout seul
   à la mise au point et la page se retrouve de travers. */
input, select, textarea, .form-control, .form-select {
    font-size: 16px !important;
}
.form-control, .form-select {
    min-height: 48px;
    border-radius: 12px;
    padding-inline: .85rem;
}
textarea.form-control { min-height: 96px; }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.form-text { font-size: .82rem; }

/* Les curseurs (rayon, durée, allure) : une pastille de 14 px se
   rate au doigt. On la double, et la piste s'épaissit avec. */
.form-range { height: 2rem; }
.form-range::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
.form-range::-moz-range-thumb { width: 26px; height: 26px; }
.form-range::-webkit-slider-runnable-track { height: 6px; }
.form-range::-moz-range-track { height: 6px; }

/* Toute case à cocher devient touchable sans viser. */
.form-check { min-height: 34px; padding-left: 2.1rem; }
.form-check-input { width: 1.35rem; height: 1.35rem; margin-left: -2.1rem; margin-top: .1rem; }
.form-check-label { padding-top: .12rem; }

/* Les boutons : hauteur de doigt, coins francs, pas de demi-mesure. */
.btn {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 600;
    padding-inline: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.btn-sm { min-height: 40px; border-radius: 10px; font-size: .88rem; }
.btn-lg { min-height: 54px; font-size: 1.05rem; }

/* Un lien-bouton discret garde sa taille de texte. */
.btn-link { min-height: 0; }

.container, .container-fluid, .container-xxl { padding-inline: 1rem; }

h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.28rem; }
h3, .h3 { font-size: 1.14rem; }
.h4 { font-size: 1.1rem; }
.h5 { font-size: 1rem; }
.h6 { font-size: .94rem; }

/* Les cartes deviennent des cartes d'application : plus rondes,
   moins bordées, séparées par du vide plutôt que par des traits. */
.page-card {
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px var(--ombre);
}

/* Les titres de page : la barre du haut porte déjà le nom de
   l'écran, le répéter juste en dessous vole une ligne sur six.
   On le masque à l'œil, pas aux lecteurs d'écran : un écran sans
   titre de niveau 1 devient impossible à parcourir en aveugle. */
.titre-double {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================
   3. Les rangées d'actions
   ==========================================================
   Sur ordinateur, cinq boutons tiennent sur une ligne. Sur
   téléphone, ils se marchent dessus et finissent à 30 px de
   large. On les empile : deux par ligne, l'action principale
   sur toute la largeur.
   ========================================================== */
.actions-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.actions-mobile > .btn,
.actions-mobile > form,
.actions-mobile > form > .btn { width: 100%; }
.actions-mobile > .actions-mobile__large { grid-column: 1 / -1; }

/* ==========================================================
   4. Écran « Carte » (index)
   ==========================================================
   Sur téléphone, l'accueil est la carte. Le grand bandeau de
   présentation reste utile pour un visiteur qui découvre le
   site, mais il est inutile — et coûteux — pour un membre
   connecté qui vient chercher un spot.
   ========================================================== */
body.mobile-carte .hero { display: none; }

body.mobile-carte .map-page {
    position: fixed;
    top: calc(var(--appbar-h) + var(--safe-haut));
    left: 0;
    right: 0;
    bottom: calc(var(--onglets-h) + var(--safe-bas));
    height: auto;
    margin: 0;
}
body.mobile-carte #map { height: 100%; width: 100%; }
body.mobile-carte .site-footer,
body.mobile-carte .bande-communaute,
body.mobile-carte .bande-contribuer { display: none; }
body.mobile-carte { padding-bottom: 0; overflow: hidden; }

/* Un bloc marqué « sans-mobile » existe pour l'ordinateur seulement :
   sur téléphone il ferait doublon avec la barre d'onglets. */
.sans-mobile { display: none !important; }

/* La recherche flotte sur la carte, façon application de cartes. */
.carte-recherche {
    position: absolute;
    top: .6rem;
    left: .6rem;
    right: .6rem;
    z-index: 500;
}
.carte-recherche .form-control {
    border-radius: 999px;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    padding-left: 1.1rem;
    background: var(--surface);
}

/* Les boutons ronds posés sur la carte (autour de moi, filtres). */
.carte-outils {
    position: absolute;
    right: .6rem;
    bottom: .8rem;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.carte-outil {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--blue-deep);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.carte-outil svg { width: 22px; height: 22px; }
.carte-outil.est-actif { background: var(--blue); color: #fff; }

/* Les boutons + / − de Leaflet ne servent à rien au doigt : on pince
   pour zoomer. Les garder, c'est deux cibles de plus qui recouvrent
   la carte sans rien apporter. */
.leaflet-control-zoom { display: none !important; }

/* L'attribution reste obligatoire, mais discrète et hors du chemin. */
.leaflet-control-attribution {
    font-size: .62rem;
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   5. Les panneaux qui remontent du bas
   ==========================================================
   Un « bottom sheet » : la moitié basse de l'écran, la poignée
   pour l'agrandir, et le contenu qui défile dedans. C'est le
   geste que tout le monde connaît des applications de cartes.
   ========================================================== */
.sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--onglets-h) + var(--safe-bas));
    z-index: 1020;
    max-height: 78vh;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Fermé, seule la poignée dépasse. Sa hauteur réelle est mesurée
       par js/mobile-sheet.js : elle change avec la longueur du texte. */
    transform: translateY(calc(100% - var(--sheet-hauteur-poignee, 62px)));
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.sidebar.est-ouvert { transform: translateY(0); }

.sheet-poignee {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: none;
    background: none;
    padding: 1rem .9rem .7rem;
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
}
/* La barre grise se pose en absolu : centrée sur la feuille, elle ne
   pousse pas le texte et n'entre pas en conflit avec le bouton rond. */
.sheet-poignee__barre {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
}
.sheet-poignee::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: currentColor;
    opacity: .55;
    /* Une loupe dessinée en masque : pas d'image à charger, et elle
       suit la couleur du texte en thème sombre comme en clair. */
    -webkit-mask: var(--icone-loupe) center / contain no-repeat;
    mask: var(--icone-loupe) center / contain no-repeat;
}
/* En thème sombre, la couleur d'origine (--blue-deep) est presque
   noire sur un fond sombre : le texte de la poignée disparaissait. */
.sheet-poignee__texte {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* On s'arrête avant le bouton rond du milieu. */
    max-width: calc(50% + 3.5rem);
}

.sidebar__contenu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 1.25rem;
}

/* ==========================================================
   6. Listes façon application  →  déplacé dans css/style.css
   ==========================================================
   Ces rangées servent aussi sur ORDINATEUR (page Notifications).
   Tant qu'elles vivaient ici, à l'intérieur du média téléphone,
   la page bureau les affichait sans aucun style : liste à puces,
   et un chevron SVG sans dimension qui s'étirait à la taille de
   son conteneur. Le bloc est donc passé dans la feuille
   principale, où il vaut à toutes les largeurs.
   ========================================================== */

/* ==========================================================
   7. Rails horizontaux
   ==========================================================
   Plutôt que de tasser douze pastilles sur trois lignes, on
   les fait défiler sur une seule, avec un arrêt net sur
   chaque élément.
   ========================================================== */
.rail {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .35rem;
    /* Les cartes touchent les bords de l'écran : on annule la marge
       du conteneur pour que le rail « sorte » du cadre. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ==========================================================
   8. Barre d'action collée en bas d'un écran
   ==========================================================
   Pour l'action décisive d'une page (démarrer la sortie,
   enregistrer un lieu) : toujours atteignable, jamais à
   chercher au bout d'un défilement.
   ========================================================== */
.barre-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--onglets-h) + var(--safe-bas));
    z-index: 1025;
    display: flex;
    gap: .5rem;
    padding: .6rem .85rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .1);
}
.barre-action .btn { flex: 1 1 auto; }
.barre-action .btn--secondaire { flex: 0 0 auto; width: 52px; padding: 0; }

/* La page laisse la place à la barre pour ne rien cacher. */
.avec-barre-action { padding-bottom: 76px; }

/* ==========================================================
   9. Adaptations page par page
   ========================================================== */

/* --- Les tuiles de chiffres --------------------------------------
   Compactes : quatre tuiles hautes de 130 px, c'est un écran entier
   avant d'avoir vu le premier parcours. */
.admin-card { padding: .7rem .6rem !important; border-radius: 14px; }
.admin-card__value { font-size: 1.45rem !important; }
.admin-card__label { font-size: .72rem !important; }

/* --- Mes parcours ------------------------------------------------ */
.carte-parcours { border-radius: 16px; }
.carte-parcours__apercu { height: 130px; }
.carte-parcours__chiffres {
    display: flex;
    gap: 1rem;
    font-size: .92rem;
}
/* Trois rangées : l'action principale seule et pleine largeur, puis
   les secondaires par paires. « Supprimer » finit en bas à droite,
   là où on ne l'atteint pas en visant autre chose. */
.carte-parcours__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .6rem;
}
.carte-parcours__actions > .btn-demarrer { grid-column: 1 / -1; }
.carte-parcours__actions > form { margin: 0; }
.carte-parcours__actions > form > .btn { width: 100%; }

/* --- La page d'un parcours --------------------------------------- */
.vue-parcours__carte { height: 46vh; min-height: 260px; }
/* Deux cases par ligne au doigt : quatre en colonne prenaient un écran
   entier avant même de voir la carte. */
.vue-parcours__chiffres { grid-template-columns: 1fr 1fr; gap: .5rem; }
.vue-parcours__chiffre { padding: .6rem .4rem; }
.vue-parcours__valeur { font-size: 1.35rem; }
.vue-parcours__libelle { font-size: .7rem; }

/* Les actions du parcours passent en barre collée en bas. */
.vue-parcours__actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--onglets-h) + var(--safe-bas));
    z-index: 1025;
    display: flex;
    flex-wrap: nowrap !important;
    gap: .5rem;
    padding: .6rem .85rem calc(.6rem + 22px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .1);
}
.vue-parcours__actions > .btn { flex: 1 1 0; }
/* Le bouton rond surélevé de la barre d'onglets mord sur cette
   barre : on lui laisse la place, et les boutons restent entiers. */
.vue-parcours__actions > .btn:not(.btn-demarrer) { flex: 0 0 auto; }

/* --- Fiche d'un lieu --------------------------------------------- */
.fiche-entete { border-radius: 0 0 20px 20px; }
.lieu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lieu-actions > .actions-mobile__large { grid-column: 1 / -1; }

/* Les tableaux de fiche deviennent des paires libellé / valeur
   empilées : à 390 px, deux colonnes rendent l'adresse illisible. */
.table-fiche, .table-fiche tbody, .table-fiche tr, .table-fiche th, .table-fiche td {
    display: block;
    width: 100%;
}
.table-fiche tr {
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
}
.table-fiche tr:last-child { border-bottom: none; }
.table-fiche th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    padding: 0 0 .15rem;
    border: none;
}
.table-fiche td { padding: 0; border: none; font-size: .95rem; }

/* --- Messagerie --------------------------------------------------
   Une vraie conversation plein écran : la liste et le fil ne
   cohabitent pas, on passe de l'un à l'autre. */
.messagerie { display: block; }
.messagerie__liste { display: block; border: none; }
.messagerie__fil { display: none; }
.messagerie.est-ouverte .messagerie__liste { display: none; }
.messagerie.est-ouverte .messagerie__fil { display: flex; flex-direction: column; }

/* Conversation ouverte : tout ce qui n'est pas le fil s'efface.
   Le rappel sur la confidentialité a sa place sur la liste des
   conversations, pas au-dessus de chaque échange. */
body.mobile-conversation .note-vie-privee,
body.mobile-conversation .messagerie-trouver,
body.mobile-conversation .site-footer { display: none; }

body.mobile-conversation .container { padding-top: 0 !important; }

/* Le fil occupe la hauteur restante, le champ de saisie reste en bas
   sans qu'on ait à faire défiler pour le trouver. */
body.mobile-conversation .messagerie__fil {
    height: calc(100dvh - var(--appbar-h) - var(--safe-haut)
                 - var(--onglets-h) - var(--safe-bas) - 1.5rem);
}
body.mobile-conversation .messagerie__fil { max-height: none; }
body.mobile-conversation .fil__messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Le bouton « ← » du fil fait doublon avec la flèche de la barre du haut. */
body.mobile-conversation .fil__entete .d-lg-none { display: none !important; }

/* --- Paramètres --------------------------------------------------
   Le menu latéral devient un rail d'onglets qui défile. */
.reglages { display: block; }
.reglages__menu {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    margin-inline: -1rem;
    padding: 0 1rem .6rem;
    border: none;
    scrollbar-width: none;
}
.reglages__menu::-webkit-scrollbar { display: none; }
.reglages__lien {
    flex: 0 0 auto;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.reglages__lien.est-actif { background: var(--blue); color: #fff; }

/* Un rail sur téléphone, une simple ligne qui revient à la ligne
   sur ordinateur : même balisage, deux comportements. */
.rail-mobile {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: .3rem;
}
.rail-mobile::-webkit-scrollbar { display: none; }
.rail-mobile > * { flex: 0 0 auto; }

/* Les grandes respirations verticales du bureau sont un luxe qu'un
   écran de 844 px ne peut pas se payer. */
main .py-5 { padding-top: 1rem !important; padding-bottom: 1.25rem !important; }
main .py-4 { padding-top: .85rem !important; padding-bottom: 1rem !important; }
.page-card.p-4 { padding: 1rem !important; }

/* --- Profil ------------------------------------------------------ */
/* La carte d'identité tient sur une ligne : avatar à gauche, pseudo
   et grade à droite. Empilés, ils prenaient la moitié de l'écran. */
.profil-carte__haut { flex-wrap: nowrap !important; align-items: flex-start !important; }
.profil-carte__haut > .avatar { width: 64px !important; height: 64px !important; }
.profil-carte__haut .progress { height: 6px; }

.profil-banniere { height: 120px; }
.profil-entete__corps { margin-top: -38px; padding: 1rem !important; }
.profil-entete__corps > .avatar { width: 76px !important; height: 76px !important; }
.profil-entete__corps > .flex-fill,
.profil-entete__corps > .text-end { margin-top: 0; width: 100%; }

/* Les statistiques du profil : quatre cases carrées, deux par ligne. */
.stats-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* --- Défis et badges ---------------------------------------------
   Le mur de badges est le morceau qui souffrait le plus : soixante-
   cinq cases avec chacune deux lignes d'explication, c'était six
   écrans de défilement. Sur téléphone, chaque case garde son icône
   et son titre ; l'explication apparaît à la pression, dans la bulle. */
.mur-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem .4rem;
}
.badge-case { font-size: .72rem; }
.badge-case__aide { display: none; }
.badge-case__titre {
    font-size: .72rem;
    line-height: 1.2;
    /* Deux lignes au maximum : au-delà, les cases d'une même rangée
       ne s'alignent plus et la grille part en escalier. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Le badge tient sur 54 px au doigt. On règle la TAILLE DU BLOC, pas
   celle des images qu'il contient : le cadre est posé en absolu sur
   l'ensemble, et lui imposer une largeur fixe le décrochait dans le
   coin haut-gauche — c'est ce qui décalait les cadres sur téléphone. */
.badge-case .badge-icone {
    --badge-taille: 54px;
}

/* La bulle d'explication : au doigt, elle doit rester dans l'écran.
   Fixée en bas, pleine largeur, elle ne peut plus déborder — c'est
   ce débordement qui faisait défiler toute la page latéralement. */
.badge-case[data-bulle]::after {
    position: fixed;
    bottom: calc(var(--onglets-h) + var(--safe-bas) + .6rem);
    left: .8rem;
    right: .8rem;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    text-align: center;
    z-index: 1040;
}
.badge-case[data-bulle]::before { content: none; }

/* --- Le chronomètre ---------------------------------------------- */
.chrono {
    position: fixed;
    left: .6rem;
    right: .6rem;
    bottom: calc(var(--onglets-h) + var(--safe-bas) + .6rem);
    z-index: 1028;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.chrono__valeur { font-size: 2rem; }

/* La fenêtre du chrono en modal : plein écran, chiffres énormes. */
#modal-chrono .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
#modal-chrono .modal-content { min-height: 100vh; border-radius: 0; border: none; }
#modal-chrono .chrono__valeur { font-size: 2.4rem; }

/* --- Le créateur de parcours -------------------------------------
   La feuille principale gère déjà l'essentiel du créateur sur
   téléphone (carte plein écran, barre flottante en bas). Trois
   choses restent à corriger ici :

     1. la hauteur, qui comptait l'ancienne barre de navigation ;
     2. la barre du bas, qui doit remonter au-dessus des onglets ;
     3. la recherche de lieu, qui vivait dans la colonne masquée —
        sans elle, impossible de se placer ailleurs qu'au doigt.
        Elle revient en carte flottante posée sur la carte. */
.createur {
    height: calc(100dvh - var(--appbar-h) - var(--safe-haut)
                 - var(--onglets-h) - var(--safe-bas));
}

.createur__barre {
    /* Assez haut pour que le bouton rond surélevé des onglets ne
       morde pas sur la rangée « Enregistrer ». */
    bottom: 1.9rem;
    z-index: 1000;
}

/* La colonne redevient visible, mais réduite à sa première section. */
.createur__panneau {
    display: block;
    position: absolute;
    top: .6rem;
    left: .6rem;
    right: .6rem;
    z-index: 1000;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
}
.createur__entete { display: none; }
.createur__corps { padding: 0; overflow: visible; }

/* Bloc 1 : la recherche, en carte posée sur la carte. */
.createur__corps > .createur__bloc:first-child {
    background: var(--surface);
    border: none;
    border-radius: 14px;
    padding: .5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
    margin: 0;
}
.createur__corps > .createur__bloc:first-child .form-label { display: none; }
.createur__corps > .createur__bloc:first-child .input-group { margin-bottom: .4rem !important; }

/* Blocs 2 et 4 : chiffres, allure, enregistrement. La barre du bas
   et sa fenêtre font déjà exactement ça. */
.createur__corps > .createur__bloc:nth-child(2),
.createur__corps > .createur__bloc--fin { display: none; }

/* Bloc 3 : ses boutons sont dans la barre, mais la liste des parkings
   qu'il contient doit rester visible. « display: contents » efface le
   bloc sans effacer ses enfants. */
.createur__corps > .createur__bloc:nth-child(3) { display: contents; }
.createur__corps > .createur__bloc:nth-child(3) > .d-grid { display: none !important; }

#cp-parkings-resultat {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: 12.8rem;
    z-index: 1000;
    max-height: 30vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .7rem .8rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
    margin: 0 !important;
}

/* La consigne posée sur la carte descend sous la carte de recherche,
   sinon elle la recouvre. */
.createur__consigne { top: 9.4rem; }

/* --- Le pied de page --------------------------------------------- */
/* Ramassé : sur téléphone il ne sert qu'aux mentions légales, la
   navigation étant déjà en bas de l'écran. */
.site-footer { padding-bottom: 1.5rem !important; }
.site-footer__liens { font-size: .88rem; }

/* --- Modales ------------------------------------------------------
   Une modale sur téléphone monte du bas et occupe ce qu'il lui
   faut, plutôt que de flotter au milieu de l'écran. */
.modal-dialog-centered { align-items: flex-end; min-height: 100%; margin: 0; }
.modal-dialog-centered .modal-content {
    border-radius: 20px 20px 0 0;
    border: none;
    padding-bottom: var(--safe-bas);
}
.modal-header { padding: 1rem 1.1rem .5rem; }
.modal-body { padding: .5rem 1.1rem 1rem; }
.modal-footer { padding: .5rem 1.1rem 1rem; gap: .5rem; }
.modal-footer > .btn { flex: 1 1 auto; margin: 0; }

/* --- Tableaux génériques ------------------------------------------
   Ceux qu'on n'a pas transformés défilent latéralement plutôt que
   de faire déborder la page entière. */
.table-responsive-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

}   /* fin @media téléphone */

/* ==========================================================
   Très petits écrans (moins de 360 px)
   ========================================================== */
@media (max-width: 359.98px) {
    .onglets__libelle { font-size: .6rem; }
    .onglets__bulle { width: 46px; height: 46px; }
    h1, .h1 { font-size: 1.32rem; }
    .actions-mobile { grid-template-columns: 1fr; }
    .mur-badges { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================
   Blocs réservés au téléphone
   ==========================================================
   L'inverse de « sans-mobile » : ces blocs n'existent que sous
   992 px. Déclaré hors de la requête média pour que la règle
   par défaut, sur ordinateur, soit bien « caché ».
   ========================================================== */
.sans-bureau { display: none; }

@media (max-width: 991.98px) {
    .sans-bureau { display: block; }
    /* Un bouton reste un bouton : « block » écraserait son alignement
       interne (icône + texte centrés). */
    a.btn.sans-bureau, button.sans-bureau { display: inline-flex; }
}

/* La marque dans la barre du haut : le signe, puis le mot. */
.appbar__marque { display: inline-flex; align-items: center; gap: .45rem; }
.appbar__signe { height: 22px; width: auto; }

/* --- Le bandeau « sortie en cours » -------------------------------
   Au-dessus de la barre d'onglets, jamais dessous : posé plus bas, il
   serait à moitié caché par elle sur la plupart des téléphones. */
.sortie-bandeau {
    left: .6rem;
    right: .6rem;
    max-width: none;
    transform: none;
    bottom: calc(var(--onglets-h) + var(--safe-bas) + .6rem);
}

/* Une sortie en cours ET le panneau du chronomètre ne coexistent
   jamais : le JavaScript retire le bandeau dès que la page affiche son
   propre compteur. Cette règle n'est là qu'en ceinture — le temps que
   le JavaScript se charge, on ne veut pas les voir empilés. */
body.chrono-en-cours .sortie-bandeau { display: none; }

/* La barre d'onglets occupe déjà le bas : le bandeau s'ajoute
   par-dessus, et le contenu doit reculer d'autant. */
body.a-sortie-en-cours { padding-bottom: 0; }
body.a-sortie-en-cours main { padding-bottom: calc(var(--onglets-h) + var(--safe-bas) + 4.25rem); }