/* ============================================================
   🎨 ROAWAY — FEUILLE DE STYLE UNIQUE
   Site vitrine + espace compte

   L'ADN visuel est celui de l'application mobile, relevé dans son
   code (src/colors.js, DecorFluide.js, ProfilScreen.js) :
   même palette, même police de titre, mêmes masses vertes qui
   dérivent en arrière-plan, mêmes rayons de bordure.

   Mais la MISE EN PAGE est délibérément différente : l'app est une
   colonne verticale au pouce, le site est large et se parcourt à la
   souris. On garde la marque, pas l'interface.
   ============================================================ */

/* ============================================================
   POLICE DE TITRE
   Archivo Black, le fichier exact utilisé par l'app.
   Servie en local : aucune requête vers Google, donc rien à
   déclarer côté RGPD et aucune dépendance externe.
   ============================================================ */
@font-face {
    font-family: 'Titre';
    src: url('../assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap; /* le texte s'affiche tout de suite, la police arrive après */
}

/* ============================================================
   VARIABLES — la palette de src/colors.js, à l'identique
   ============================================================ */
:root {
    --marine: #0A1F3D;
    --vert: #22C55E;
    --vert-clair: #86EFAC;
    --vert-vif: #79DE61;      /* bout du dégradé du logo */
    --blanc: #FFFFFF;
    --gris: #94A3B8;
    --gris-fonce: #475569;
    --erreur: #EF4444;

    /* Le dégradé de la marque, relevé au pixel sur les filets du logo */
    --degrade: linear-gradient(90deg, #06A0B8 0%, #43C289 50%, #85E555 100%);

    /* Surfaces : exactement les valeurs des cartes de l'app */
    --surface: rgba(255, 255, 255, 0.05);
    --surface-forte: rgba(255, 255, 255, 0.08);
    --bord: rgba(255, 255, 255, 0.10);
    --bord-fort: rgba(255, 255, 255, 0.18);

    /* Sélection : le vert translucide des cartes cochées de l'app */
    --vert-doux: rgba(34, 197, 94, 0.15);

    /* Le mouvement de l'app : 620 ms, courbe qui part vite et se pose */
    --duree: 620ms;
    --courbe: cubic-bezier(0.16, 0.84, 0.28, 1);

    --largeur-page: 1120px;
    --rayon: 20px;
    --rayon-petit: 12px;
}

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

html {
    scroll-behavior: smooth;
    /* Les liens d'ancrage ne doivent pas se coincer sous la barre fixe */
    scroll-padding-top: 90px;
}

body {
    background: var(--marine);
    color: var(--blanc);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* les masses de décor dépassent : jamais de barre horizontale */
}

img { max-width: 100%; display: block; }
a { color: var(--vert-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cible du focus clavier : visible, mais dans la teinte de la marque */
:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ============================================================
   TYPOGRAPHIE
   Règle héritée de l'app : Archivo Black UNIQUEMENT sur les titres.
   Elle est trop grasse pour du texte courant — le petit texte reste
   en police système, comme dans ModifierProfilScreen.
   ============================================================ */
.titre {
    font-family: 'Titre', Impact, 'Arial Black', sans-serif;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

.titre-geant { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
.titre-grand { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.titre-moyen { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.titre-petit  { font-size: 1.02rem; }

.vert { color: var(--vert-vif); }

/* Titre rempli par le dégradé du logo. Réservé aux très gros textes :
   sur du petit, le dégradé rend la lecture pâteuse. */
.titre-degrade {
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Sans cela, Safari coupe les jambages des lettres */
    padding-bottom: 0.08em;
}

.chapeau {
    color: var(--gris);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 58ch;
}

.mention {
    color: var(--gris-fonce);
    font-size: 0.82rem;
}

/* ============================================================
   STRUCTURE
   ============================================================ */
.page {
    width: 100%;
    max-width: var(--largeur-page);
    margin: 0 auto;
    padding: 0 22px;
}

.section {
    position: relative;
    padding: clamp(56px, 9vw, 104px) 0;
}

/* Filet de séparation très discret, comme les cartes de l'app */
.section + .section { border-top: 1px solid var(--bord); }

/* ============================================================
   💧 DÉCOR FLUIDE — le portage web de src/components/DecorFluide.js
   ============================================================
   Même principe exactement, sans aucune bibliothèque :
     1. rayons de bordure ASYMÉTRIQUES + rotation continue → la
        silhouette semble se déformer alors qu'on tourne une forme figée ;
     2. masses très peu opaques superposées → les verts s'additionnent,
        plus aucun bord net ;
     3. trois animations de périodes DIFFÉRENTES par masse (dérive,
        rotation, respiration) → le mouvement ne se répète jamais.

   Trois couches imbriquées reproduisent le tableau `transform` de
   React Native, chaque couche portant sa propre durée. Tout est
   composité par le GPU (transform + opacity uniquement) : le décor
   ne coûte rien même pendant qu'un compteur monte.
   ============================================================ */
.decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Le contenu doit passer AU-DESSUS du décor.
   ⚠️ Règle indispensable, et pas seulement esthétique : `.decor` est
   positionné, donc le navigateur le peint APRÈS le texte en flux normal,
   même si ce texte vient plus loin dans le HTML. Sans ce z-index, le
   voile de fondu (opaque sur ses 64 premiers pixels) délaverait le haut
   de chaque bloc.
   On vise tous les enfants directs d'une zone décorée — sections comme
   cartes — et non le seul `.page`. */
[data-decor] > *:not(.decor) { position: relative; z-index: 1; }

.blob-derive {
    position: absolute;
    /* Position et trajectoire sont injectées par js/decor.js sous forme
       de variables CSS : --x1/--y1 (départ) → --x2/--y2 (arrivée). */
    left: var(--cx);
    top: var(--cy);
    width: var(--taille);
    height: var(--taille);
    margin-left: calc(var(--taille) / -2);
    margin-top: calc(var(--taille) / -2);
    animation: deriver var(--duree-derive) linear infinite;
    animation-delay: var(--avance);
}

.blob-rotation {
    width: 100%;
    height: 100%;
    animation: tourner var(--duree-rotation) linear infinite;
    animation-direction: var(--sens);
}

.blob-forme {
    width: 100%;
    height: 100%;
    background: var(--vert);
    opacity: var(--opacite);
    border-radius: var(--r1) var(--r2) var(--r3) var(--r4);
    animation: respirer var(--duree-respiration) linear infinite;
}

/* La course dépasse largement la zone : la masse est hors champ au
   début ET à la fin du cycle, donc la reprise est invisible. C'est ce
   qui donne un mouvement perpétuel dans un seul sens, sans va-et-vient. */
@keyframes deriver {
    from { transform: translate3d(var(--x1), var(--y1), 0); }
    to   { transform: translate3d(var(--x2), var(--y2), 0); }
}

/* 0 → 360° : la boucle ne peut pas se voir */
@keyframes tourner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Gonfle puis revient EXACTEMENT au point de départ. Cinq étapes pour
   approcher une sinusoïde : aucun à-coup quand la boucle repart. */
@keyframes respirer {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.10); }
    50%  { transform: scale(1.18); }
    75%  { transform: scale(1.10); }
    100% { transform: scale(1); }
}

/* ============================================================
   🌫️ FONDU DE BORD
   Une coupe franche donne l'impression d'une forme tranchée par une
   frontière invisible. On superpose donc un dégradé qui part de la
   couleur du fond et s'efface vers le centre.

   ⚠️ PIÈGE (rencontré dans l'app) : `transparent` vaut rgba(0,0,0,0),
   du NOIR transparent. Un dégradé « marine → transparent » traverse
   donc des gris sombres et dessine un halo noir. Il faut dégrader
   vers la MÊME couleur avec une opacité nulle — seul l'alpha varie.
   ============================================================ */
.fondu {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(to bottom, var(--marine), rgba(10, 31, 61, 0)) top    / 100% 64px no-repeat,
        linear-gradient(to top,    var(--marine), rgba(10, 31, 61, 0)) bottom / 100% 64px no-repeat,
        linear-gradient(to right,  var(--marine), rgba(10, 31, 61, 0)) left   / 64px 100% no-repeat,
        linear-gradient(to left,   var(--marine), rgba(10, 31, 61, 0)) right  / 64px 100% no-repeat;
}

/* ============================================================
   🎞️ ENTRÉES DIRIGÉES — le portage du composant Entree de l'app
   Chaque bloc surgit depuis une direction précise. Sur mobile c'était
   au montage de l'écran ; sur le web, au moment où le bloc entre dans
   la fenêtre (js/decor.js s'en charge via IntersectionObserver).
   ============================================================ */
.reveler {
    opacity: 0;
    transition:
        opacity var(--duree) var(--courbe),
        transform var(--duree) var(--courbe);
    transition-delay: var(--retard, 0ms);
}
.reveler[data-depuis='bas']    { transform: translateY(60px); }
.reveler[data-depuis='haut']   { transform: translateY(-60px); }
.reveler[data-depuis='gauche'] { transform: translateX(-70px); }
.reveler[data-depuis='droite'] { transform: translateX(70px); }

.reveler.vu {
    opacity: 1;
    transform: none;
}

/* ============================================================
   BARRE DU HAUT — n'existe pas dans l'app (pas de place au pouce).
   C'est l'élément le plus « web » du site : elle reste collée en haut
   et porte le menu déroulant.
   ============================================================ */
.barre {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 31, 61, 0.82);
    /* Le flou d'arrière-plan n'est pas universel : sans lui la barre
       reste lisible grâce au fond déjà opaque à 82 %. */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bord);
}

.barre-contenu {
    max-width: var(--largeur-page);
    margin: 0 auto;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Le logo complet, comme en haut du profil de l'app */
.barre-logo img {
    width: 122px;
    height: auto;
}

/* Jauge de défilement dans le dégradé de la marque. Purement web :
   sur mobile, la barre de défilement du système suffit. */
.jauge {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--degrade);
    transition: width 90ms linear;
}

/* ============================================================
   MENU DÉROULANT
   Un seul bouton, un seul panneau. Ouvert/fermé porté par l'attribut
   [data-ouvert] sur le conteneur : un seul endroit à basculer en JS.
   ============================================================ */
.menu { position: relative; }

.menu-bouton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1.5px solid var(--bord-fort);
    border-radius: 30px;
    background: var(--surface);
    color: var(--blanc);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, transform 140ms var(--courbe);
}
.menu-bouton:hover { background: var(--surface-forte); border-color: var(--vert); }
/* Reprend le retour tactile de l'app (composant Appuyable) */
.menu-bouton:active { transform: scale(0.96); }

/* Trois traits qui se muent en croix à l'ouverture */
.menu-traits {
    display: block;
    position: relative;
    width: 17px;
    height: 12px;
}
.menu-traits span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--vert);
    transition: transform 260ms var(--courbe), opacity 180ms;
}
.menu-traits span:nth-child(1) { top: 0; }
.menu-traits span:nth-child(2) { top: 5px; }
.menu-traits span:nth-child(3) { top: 10px; }

.menu[data-ouvert='true'] .menu-traits span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu[data-ouvert='true'] .menu-traits span:nth-child(2) { opacity: 0; }
.menu[data-ouvert='true'] .menu-traits span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.menu-panneau {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 232px;
    padding: 8px;
    background: #0E2749;           /* marine éclairci : le panneau se détache du fond */
    border: 1px solid var(--bord-fort);
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);

    /* Fermé : invisible ET hors du parcours clavier */
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 200ms var(--courbe), transform 240ms var(--courbe), visibility 200ms;
}
.menu[data-ouvert='true'] .menu-panneau {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

.menu-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: var(--rayon-petit);
    color: var(--blanc);
    font-size: 0.94rem;
    font-weight: 500;
    transition: background 160ms;
}
.menu-lien:hover { background: var(--surface-forte); text-decoration: none; }

/* Page courante : la pastille verte de l'app, en petit */
.menu-lien[aria-current='page'] {
    background: var(--vert-doux);
    color: var(--vert-clair);
}

.menu-lien .puce-ronde {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vert);
    opacity: 0.4;
}
.menu-lien[aria-current='page'] .puce-ronde { opacity: 1; }

.menu-filet {
    height: 1px;
    margin: 7px 6px;
    background: var(--bord);
}

/* ============================================================
   BOUTONS — la pilule verte de l'app, transposée
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border: none;
    border-radius: 30px;
    background: var(--vert);
    color: var(--marine);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: transform 150ms var(--courbe), box-shadow 220ms, background 200ms, opacity 200ms;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.24);
}
.btn:hover {
    background: var(--vert-clair);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.36);
    text-decoration: none;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-fantome {
    background: transparent;
    color: var(--blanc);
    border: 1.5px solid var(--bord-fort);
    box-shadow: none;
}
.btn-fantome:hover { background: var(--surface-forte); border-color: var(--vert); color: var(--blanc); }

.btn-danger {
    background: transparent;
    color: #FCA5A5;
    border: 1.5px solid rgba(252, 165, 165, 0.4);
    box-shadow: none;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.12); border-color: var(--erreur); color: #FCA5A5; }

.btn-petit { padding: 9px 18px; font-size: 0.88rem; }
.btn-large { width: 100%; }

/* ============================================================
   CARTES — mêmes valeurs que les cartes de l'app
   ============================================================ */
.carte {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: clamp(20px, 3vw, 30px);
    overflow: hidden;  /* indispensable : le décor interne doit être coupé net */
}

.carte-titre {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.grille {
    display: grid;
    gap: 20px;
}
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ============================================================
   ACCUEIL — bandeau d'ouverture
   Deux colonnes : c'est LA rupture volontaire avec l'app, qui n'a
   jamais qu'une colonne. Le site respire dans la largeur.
   ============================================================ */
.ouverture {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 100px);
}

@media (max-width: 900px) {
    .ouverture { grid-template-columns: 1fr; text-align: left; }
}

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 11px;
    margin-bottom: 22px;
    border: 1px solid rgba(34, 197, 94, 0.32);
    border-radius: 30px;
    background: var(--vert-doux);
    color: var(--vert-clair);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Point qui pulse : signale « c'est vivant » sans un mot de plus */
.pastille-vive {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vert);
    animation: pulser 2.4s ease-in-out infinite;
}
@keyframes pulser {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

.ouverture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* ============================================================
   🎙️ ONDE VOCALE — reprise de src/components/OndeVocale.js
   Les 13 barres du cercle du guide. Ici elles servent d'illustration
   du bandeau d'ouverture, dans un disque bien plus grand.
   ============================================================ */
.disque-onde {
    position: relative;
    aspect-ratio: 1;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.16), rgba(10, 31, 61, 0) 70%);
    display: grid;
    place-items: center;
}

/* Deux anneaux qui s'élargissent en s'effaçant : l'écho du son */
.disque-onde::before,
.disque-onde::after {
    content: '';
    position: absolute;
    inset: 12%;
    border: 1.5px solid rgba(34, 197, 94, 0.22);
    border-radius: 50%;
    animation: onde-echo 3.6s ease-out infinite;
}
.disque-onde::after { animation-delay: 1.8s; }

@keyframes onde-echo {
    0%   { transform: scale(0.72); opacity: 0; }
    22%  { opacity: 0.9; }
    100% { transform: scale(1.22); opacity: 0; }
}

.onde {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 96px;
}

.onde span {
    width: 6px;
    min-height: 8px;
    border-radius: 3px;
    background: var(--vert);
    /* Hauteur et rythme tirés au sort par js/decor.js : les barres ne
       montent jamais en rang, comme dans l'app. */
    animation: barre-onde var(--rythme) ease-in-out infinite alternate;
    animation-delay: var(--decalage);
    transform-origin: center;
}

@keyframes barre-onde {
    from { height: 10px;  opacity: 0.45; }
    to   { height: var(--haut); opacity: 1; }
}

/* ============================================================
   COMPTEURS — les chiffres animés de l'écran « Wrapped »
   ============================================================ */
.bande-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(18px, 3vw, 36px);
    text-align: center;
}

.chiffre {
    font-family: 'Titre', Impact, sans-serif;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1;
    color: var(--vert-vif);
    /* Les chiffres gardent une largeur fixe : le nombre ne tremble
       plus pendant qu'il monte. */
    font-variant-numeric: tabular-nums;
}

.chiffre-legende {
    margin-top: 8px;
    color: var(--gris);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

/* ============================================================
   ÉTAPES numérotées
   ============================================================ */
.etape-numero {
    font-family: 'Titre', Impact, sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    background: var(--degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

/* ============================================================
   FORMULAIRES — espace compte
   ============================================================ */
.champ-groupe { margin-bottom: 16px; }

.champ-label {
    display: block;
    margin-bottom: 7px;
    color: var(--gris);
    font-size: 0.84rem;
    font-weight: 600;
}

.champ {
    width: 100%;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid var(--bord);
    border-radius: var(--rayon-petit);
    color: var(--blanc);
    font: inherit;
    font-size: 0.98rem;
    transition: border-color 180ms, background 180ms;
}
.champ::placeholder { color: var(--gris-fonce); }
.champ:focus {
    outline: none;
    border-color: var(--vert);
    background: rgba(255, 255, 255, 0.09);
}
.champ:disabled { color: var(--gris); cursor: not-allowed; }

.champ-aide {
    margin-top: 6px;
    color: var(--gris-fonce);
    font-size: 0.78rem;
}

/* Onglets Connexion / Inscription */
.onglets {
    display: flex;
    gap: 6px;
    padding: 5px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 30px;
}

.onglet {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: var(--gris);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.onglet[aria-selected='true'] {
    background: var(--vert);
    color: var(--marine);
}

/* Messages d'état */
.message {
    padding: 12px 15px;
    margin-bottom: 16px;
    border-radius: var(--rayon-petit);
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.message[hidden] { display: none; }
.message-erreur {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #FCA5A5;
}
.message-succes {
    background: var(--vert-doux);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--vert-clair);
}

/* ============================================================
   PROFIL — identité
   ============================================================ */
.identite {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* L'anneau dégradé autour de l'avatar, comme dans l'app */
.avatar-anneau {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    padding: 3px;
    background: var(--degrade);
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #123156;
    display: grid;
    place-items: center;
    font-family: 'Titre', Impact, sans-serif;
    font-size: 2rem;
    color: var(--vert-clair);
    border: 3px solid var(--marine);
}

/* ============================================================
   PUCES — centres d'intérêt (les cartes cochables de l'onboarding)
   ============================================================ */
.puces {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--bord);
    border-radius: 30px;
    background: var(--surface);
    color: var(--gris);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms, border-color 180ms, color 180ms, transform 130ms var(--courbe);
}
.puce:hover { border-color: var(--bord-fort); color: var(--blanc); }
.puce:active { transform: scale(0.96); }

.puce[aria-pressed='true'] {
    background: var(--vert-doux);
    border-color: var(--vert);
    color: var(--blanc);
    font-weight: 600;
}

/* Puce de lecture seule (aperçu, pas de clic) */
.puce-fixe { cursor: default; }
.puce-fixe:hover { border-color: var(--bord); color: var(--gris); }

/* Réglage d'importance 1→5, visible seulement si la puce est cochée */
.niveau {
    display: flex;
    gap: 5px;
    align-items: center;
}
.niveau-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--bord);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gris);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.niveau-btn[aria-pressed='true'] {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--marine);
}

.compteur-selection {
    margin-top: 14px;
    color: var(--gris);
    font-size: 0.86rem;
}
.compteur-selection.insuffisant { color: #FCA5A5; font-weight: 700; }

/* ============================================================
   LISTES — favoris et résultats de recherche
   ============================================================ */
.liste { display: flex; flex-direction: column; gap: 9px; }

.ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-petit);
    text-align: left;
    color: var(--blanc);
    font: inherit;
    width: 100%;
    cursor: pointer;
    transition: background 160ms, border-color 160ms;
}
.ligne:hover { background: var(--surface-forte); border-color: var(--bord-fort); }
.ligne[aria-pressed='true'] { background: var(--vert-doux); border-color: var(--vert); }

/* Variante non cliquable (liste des favoris déjà enregistrés) */
.ligne-fixe { cursor: default; }
.ligne-fixe:hover { background: var(--surface); border-color: var(--bord); }

.ligne-corps { flex: 1; min-width: 0; }

.ligne-nom {
    font-weight: 600;
    font-size: 0.96rem;
    /* Un nom de lieu très long ne doit pas casser la ligne */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ligne-lieu {
    color: var(--gris);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Croix de retrait */
.ligne-retirer {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gris);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms, color 160ms;
}
.ligne-retirer:hover { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; }

.vide {
    padding: 26px 18px;
    text-align: center;
    color: var(--gris-fonce);
    font-size: 0.9rem;
    border: 1px dashed var(--bord);
    border-radius: var(--rayon-petit);
}

/* Ligne d'actions en bas de carte */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.rangee {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.rangee > * { flex: 1 1 190px; }

/* Zone défilante pour les longues listes de lieux */
.zone-defilante {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
    /* Barre de défilement dans la teinte du site plutôt que celle
       du système, qui jure sur fond marine. */
    scrollbar-width: thin;
    scrollbar-color: var(--gris-fonce) transparent;
}
.zone-defilante::-webkit-scrollbar { width: 8px; }
.zone-defilante::-webkit-scrollbar-track { background: transparent; }
.zone-defilante::-webkit-scrollbar-thumb {
    background: var(--gris-fonce);
    border-radius: 4px;
}

/* ============================================================
   PIED DE PAGE + contact
   ============================================================ */
.pied {
    position: relative;
    border-top: 1px solid var(--bord);
    padding: clamp(40px, 6vw, 68px) 0 26px;
}

.pied-grille {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 34px;
    margin-bottom: 34px;
}
@media (max-width: 760px) {
    .pied-grille { grid-template-columns: 1fr; gap: 26px; }
}

.pied-titre {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--gris-fonce);
    margin-bottom: 13px;
}

.pied-liste { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pied-liste a, .pied-liste span { color: var(--gris); font-size: 0.92rem; }
.pied-liste a:hover { color: var(--vert-clair); }

.pied-bas {
    padding-top: 22px;
    border-top: 1px solid var(--bord);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    color: var(--gris-fonce);
    font-size: 0.8rem;
}

/* Fiches de contact */
.contact-carte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    transition: border-color 200ms, transform 200ms var(--courbe), background 200ms;
}
.contact-carte:hover {
    border-color: var(--vert);
    background: var(--surface-forte);
    transform: translateY(-3px);
    text-decoration: none;
}

.contact-rond {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--vert-doux);
    border: 1px solid rgba(34, 197, 94, 0.3);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.contact-valeur { color: var(--blanc); font-weight: 600; }
.contact-quoi { color: var(--gris); font-size: 0.82rem; }

/* ============================================================
   🎨 ICÔNES
   Le jeu de tracés est défini une fois par page (bloc <svg class="sprite">
   en haut du <body>) et appelé par <svg class="ico"><use href="#ico-x"/></svg>.

   Style relevé au trait près sur les icônes de l'application
   (assets/icones/etoile.png, cible.png, son.png) : contour seul, pas de
   remplissage, épaisseur constante, extrémités et angles arrondis.

   `stroke: currentColor` est le point clé : chaque icône prend la couleur
   du texte qui l'entoure — verte dans une liste, blanche dans un titre.
   Un PNG, lui, resterait figé dans sa teinte d'origine.
   ============================================================ */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ico {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Aligne l'icône sur l'œil du texte plutôt que sur la ligne de base */
    vertical-align: -0.18em;
}

/* Icône de tête de rubrique : plus grande et toujours verte */
.ico-titre {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--vert);
    stroke-width: 1.6;
}

/* Icône en tête de ligne de liste */
.ico-liste {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--vert);
    margin-right: 2px;
}

/* Liste à icônes (« Dans l'application » / « Sur ce site ») */
.liste-icones {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.liste-icones li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--gris);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.centre { text-align: center; }
.centre .chapeau { margin-left: auto; margin-right: auto; }
.pile { display: flex; flex-direction: column; gap: 14px; }
.espace-haut { margin-top: 26px; }
[hidden] { display: none !important; }

/* Lu par les lecteurs d'écran, invisible à l'œil */
.pour-lecteur {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ♿ MOUVEMENT RÉDUIT
   Certaines personnes ont un réglage système « réduire les
   animations » — souvent pour éviter des nausées. Le décor est
   alors figé, mais reste visible : le site ne perd pas son identité.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveler { opacity: 1; transform: none; }
}