/* ============================================================================
   AgroClimat — ESPACE COMPTE (Mon espace, Mon profil, suppression de compte)
   ----------------------------------------------------------------------------
   Feuille propre aux pages de user/ servies par le gabarit user/_layout.php,
   ainsi qu'aux pages d'entrée (connexion, mot de passe oublié, réinitialisation,
   section 11), aux pages légales (user/_legal_layout.php, section 12) et à la
   page publique « Données et API » (api-donnees.php, section 13).
   Elle transpose les maquettes validées par le client le 13 septembre 2026
   (mock-espace / mock-profil, puis mock-accueil / mock-premiere pour Mon
   espace en page d'accueil) : les classes de la maquette portaient le
   préfixe `ac-`, elles portent ici le préfixe `compte-`, et la racine `.ac`
   devient `.compte-page`, posée sur <body> par userPageHead().

   PRÉREQUIS — assets/css/jetons.css doit être liée AVANT cette feuille (c'est
   userPageHead() qui s'en charge). Jetons attendus, définis là-bas :
       --accent, --accent-clair, --sur-accent, --panneau, --panneau-2,
       --trait, --trait-fort, --encre-1, --encre-2, --encre-3, --focus,
       --ombre-douce, --rayon-controle, --rayon-bloc, --rayon-large,
       --rayon-panneau, --rayon-pilule, --espace-2xs … --espace-lg,
       --duree-rapide, --duree-courte, --duree-moyenne, --plan-panneau-doc.
   Jetons AJOUTÉS par cette feuille (section 1, thème sombre compris) :
       --fond-compte, --police-compte, --couleur-danger, --danger-clair,
       --attention-encre, --attention-clair, --accent-survol, --bord-champ,
       --ombre-forte, --plan-toast.

   COULEUR D'INTERACTION : uniquement le vert de la carte (`--accent`), comme
   sur le panneau de filtres. Le bleu #4a89dc n'apparaît nulle part ici ; le
   seul bleu est l'anneau de focus (`--focus`), volontairement distinct de la
   sélection pour rester discernable.

   ACCESSIBILITÉ — ratios mesurés (WCAG 2, sur --panneau #fff sauf mention) :
       --couleur-danger #a63a2b : 6,44:1 (5,48:1 sur --danger-clair)
       --attention-encre #7a5410 : 6,77:1 (6,03:1 sur --attention-clair ;
           la valeur de la maquette, #9a6a12, ne donnait que 4,21:1 → refusée)
       --accent-survol #27593a : 8,15:1 en blanc (la maquette éclaircissait
           au survol, #3d8a5b = 4,21:1 en blanc → refusé ; on assombrit)
       --bord-champ #7f8c83 : 3,51:1 — bordure de champ ≥ 3:1 (1.4.11) ;
           --trait-fort (#c6d0c0, 1,59:1) reste réservé aux filets décoratifs
           et aux bordures de boutons, dont le libellé porte déjà le sens
       --encre-3 #5f6c64 : 5,06:1 sur --fond-compte, 5,24:1 sur --panneau-2
       filet « succès » = --accent (6,34:1) : --couleur-succes (#5cb85c) ne
           donne que 2,48:1, trop pâle pour un filet porteur de sens
   Cibles : boutons ≥ 40 px (44 px sur pointeur grossier), icônes 40/44 px,
   champs ≥ 44 px à 16 px de police (pas de zoom automatique sur iOS).
   Focus : anneau global `:focus-visible` en --focus, décalé de 2 px.

   POINTS DE RUPTURE (les mêmes que style.css ; @media n'accepte pas var()) :
       tablette : max-width: 1024px   (grille de recherches sur 2 colonnes)
       mobile   : max-width: 768px    (une colonne, en-tête sur deux lignes)
   ========================================================================== */


/* ============================================================================
   1. JETONS PROPRES AU COMPTE
   ----------------------------------------------------------------------------
   Ajoutés ici et non dans jetons.css parce que la carte n'en a pas l'usage.
   Même mécanique de thème que jetons.css : opt-in par data-theme, jamais par
   prefers-color-scheme (voir l'explication là-bas).
   ========================================================================== */
:root {
  --fond-compte: #f4f6f2;        /* fond de page, un vert-gris très pâle    */
  --police-compte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --couleur-danger: #a63a2b;     /* suppression, erreurs — 6,44:1           */
  --danger-clair: #fbe9e5;       /* fond des états de danger survolés       */
  --attention-encre: #7a5410;    /* texte des badges « phase 2 » — 6,77:1   */
  --attention-clair: #fbf1dc;    /* fond de ces badges                      */
  --accent-survol: #27593a;      /* bouton principal survolé — 8,15:1       */
  --bord-champ: #7f8c83;         /* bordure de champ de saisie — 3,51:1     */
  --ombre-forte: 0 2px 6px rgba(20, 40, 28, 0.08), 0 18px 40px rgba(20, 40, 28, 0.10);
  --plan-toast: 1300;            /* au-dessus de la doc (1200) et de Leaflet */
}

:root[data-theme="dark"] {
  --fond-compte: #121613;
  --couleur-danger: #e08a7b;     /* 6,38:1 sur --panneau sombre             */
  --danger-clair: #33201c;
  --attention-encre: #d9a94a;    /* 7,67:1 sur --panneau sombre             */
  --attention-clair: #2e2717;
  --accent-survol: #7fd09c;      /* 9,17:1 avec --sur-accent sombre         */
  --bord-champ: #6f7d74;         /* 3,84:1 sur --panneau sombre             */
  --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  --fond-compte: #f4f6f2;
  --couleur-danger: #a63a2b;
  --danger-clair: #fbe9e5;
  --attention-encre: #7a5410;
  --attention-clair: #fbf1dc;
  --accent-survol: #27593a;
  --bord-champ: #7f8c83;
  --ombre-forte: 0 2px 6px rgba(20, 40, 28, 0.08), 0 18px 40px rgba(20, 40, 28, 0.10);
}


/* ============================================================================
   2. BASE ET RESET LÉGER
   ----------------------------------------------------------------------------
   Pas de reset global agressif : seulement ce dont les pages du compte ont
   besoin. Les marges par défaut des titres et paragraphes sont neutralisées
   composant par composant, là où la maquette les fixe.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond-compte);
  color: var(--encre-1);
  font: 16px/1.5 var(--police-compte);
  -webkit-text-size-adjust: 100%;
}

.compte-page {
  font: 16px/1.5 var(--police-compte);
  color: var(--encre-1);
  background: var(--fond-compte);
}

img { max-width: 100%; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-survol); }

button, input, select, textarea { font: inherit; color: inherit; }

/* L'attribut hidden doit gagner même sur un composant qui fixe son display
   (.compte-grille est en grid, un label peut être en inline-flex…) : sans
   !important, la règle de composant, plus tardive, le rendrait inopérant. */
[hidden] { display: none !important; }

/* Texte réservé aux lecteurs d'écran (complément d'un title, qui n'est lu
   ni au clavier ni au tactile) : hors écran, jamais display:none. */
.compte-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Un seul anneau de focus pour toute la feuille : bleu --focus (5,75:1),
   distinct du vert de sélection pour que le clavier se repère. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Lien d'évitement : invisible jusqu'au premier Tab, puis posé en haut à
   gauche par-dessus l'en-tête. */
.compte-evitement {
  position: absolute; left: 8px; top: -100px;
  padding: 10px 14px;
  background: var(--panneau); color: var(--encre-1);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-douce);
  font-weight: 600; text-decoration: none;
  z-index: var(--plan-toast);
}
.compte-evitement:focus { top: 8px; }


/* ============================================================================
   3. EN-TÊTE : logo, navigation, outils
   ========================================================================== */
.compte-entete {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: var(--panneau);
  border-bottom: 1px solid var(--trait);
  position: relative;
}
.compte-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: -.02em;
  color: var(--encre-1); text-decoration: none;
}
.compte-logo:hover { color: var(--encre-1); }
.compte-logo img { width: 52px; height: auto; display: block; }
/* Marque : le nom du site en fort, la signature « un site AgroClimat 2050 »
   dessous en petit — le site n'est pas AgroClimat, il est fait par lui. */
.compte-marque { display: flex; flex-direction: column; line-height: 1.15; }
.compte-marque strong { font-weight: 760; letter-spacing: -.02em; color: var(--encre-1); }
.compte-marque small { font-size: .7rem; font-weight: 500; letter-spacing: 0; color: var(--encre-3); }

.compte-nav { display: flex; gap: 4px; margin-left: 8px; }
.compte-nav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 7px 12px;
  border-radius: var(--rayon-bloc);
  color: var(--encre-2); text-decoration: none;
  font-weight: 600; font-size: .92rem;
}
.compte-nav a:hover { background: var(--panneau-2); color: var(--encre-1); }
/* L'état actif est porté par aria-current="page" (lecteurs d'écran) ; la
   classe .actif reste acceptée pour les gabarits qui ne le posent pas. */
.compte-nav a.actif,
.compte-nav a[aria-current="page"] { background: var(--accent-clair); color: var(--accent); }

.compte-outils { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.compte-outils .compte-btn { white-space: nowrap; }

.compte-lien-carte {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 7px 12px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-bloc);
  background: var(--panneau); color: var(--encre-1);
  text-decoration: none; font-size: .9rem; font-weight: 600;
}
.compte-lien-carte:hover { background: var(--panneau-2); color: var(--encre-1); border-color: var(--bord-champ); }
.compte-lien-carte svg { width: 15px; height: 15px; flex: 0 0 auto; }

.compte-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--trait);
  background: var(--panneau-2);
  font-size: .86rem; font-weight: 600;
  max-width: 220px;
}
.compte-chip > span:not(.compte-avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.compte-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--sur-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  flex: 0 0 auto; overflow: hidden;
}
.compte-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Déconnexion : bouton discret avec icône ; le texte disparaît sur mobile,
   l'aria-label reste. */
.compte-deconnexion svg { width: 16px; height: 16px; }

/* « Explorer la carte » : seul bouton principal de l'en-tête (la carte est
   l'outil qu'on ouvre depuis l'espace compte, décision du 13 septembre
   2026). Même repli que la déconnexion sous 768 px : icône seule, aria-label
   complet (section 9). */
.compte-explorer svg { width: 16px; height: 16px; }


/* ============================================================================
   4. CORPS, BLOCS ET BOUTONS
   ========================================================================== */
.compte-corps { max-width: 980px; margin: 0 auto; padding: 26px 22px 40px; }

/* Titre de page posé hors carte (supprimer-compte.php) : même graisse que
   le « Bonjour » de Mon espace, un cran plus petit. */
.compte-titre { margin: 0 0 14px; font: 800 1.5rem/1.15 var(--police-compte); letter-spacing: -.02em; }

/* Intitulé de section en capitales espacées (peut être un <h2>). */
.compte-etiquette {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 26px 0 10px;
  font: 700 .7rem/1 var(--police-compte);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--encre-3);
}
.compte-etiquette .cpt {
  font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.compte-carte {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre-douce);
}

.compte-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 14px;
  border: 1px solid transparent; border-radius: var(--rayon-bloc);
  background: none; color: inherit;
  font: 600 .9rem/1.2 var(--police-compte);
  text-decoration: none; cursor: pointer;
  transition: background var(--duree-rapide), color var(--duree-rapide), border-color var(--duree-rapide);
}
.compte-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.compte-btn:disabled,
.compte-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.compte-btn.p { background: var(--accent); color: var(--sur-accent); }
.compte-btn.p:hover { background: var(--accent-survol); color: var(--sur-accent); }
.compte-btn.s { background: var(--panneau); color: var(--encre-1); border-color: var(--trait-fort); }
.compte-btn.s:hover { background: var(--panneau-2); color: var(--encre-1); border-color: var(--bord-champ); }
.compte-btn.q { background: transparent; color: var(--encre-2); padding: 8px 10px; }
.compte-btn.q:hover { background: var(--panneau-2); color: var(--encre-1); }
.compte-btn.d { background: var(--panneau); color: var(--couleur-danger); border-color: var(--couleur-danger); }
.compte-btn.d:hover { background: var(--danger-clair); color: var(--couleur-danger); }

.compte-badge {
  display: inline-block; white-space: nowrap; vertical-align: middle;
  padding: 4px 7px; border-radius: 5px;
  font: 700 .68rem/1 var(--police-compte);
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--attention-clair); color: var(--attention-encre);
}

/* Bouton-icône (renommer, supprimer…) : 40 px de cible, 44 au doigt. */
.compte-icone {
  width: 40px; height: 40px; border-radius: var(--rayon-bloc);
  border: 0; background: transparent; color: var(--encre-3);
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background var(--duree-rapide), color var(--duree-rapide);
}
.compte-icone:hover { background: var(--panneau-2); color: var(--encre-1); }
.compte-icone.sup:hover { background: var(--danger-clair); color: var(--couleur-danger); }
.compte-icone svg { width: 16px; height: 16px; }

/* Sur pointeur grossier (tactile), toutes les cibles montent à 44 px. */
@media (pointer: coarse) {
  .compte-btn, .compte-nav a, .compte-lien-carte, .compte-lieu-bouton,
  .compte-suggestions [role="option"] { min-height: 44px; }
  .compte-icone { width: 44px; height: 44px; }
}


/* ============================================================================
   5. ALERTES ET TOAST
   ----------------------------------------------------------------------------
   Une seule forme : bloc blanc bordé, filet gauche de 4 px dont la couleur
   porte le sens (succès = accent, erreur = danger, info = focus, attention =
   ocre). Le texte reste en --encre-1 : la couleur n'est jamais le seul
   vecteur, le HTML pose role="alert" ou role="status" (userAlerte()).
   ========================================================================== */
.compte-alerte {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  background: var(--panneau); color: var(--encre-1);
  border: 1px solid var(--trait); border-left: 4px solid var(--focus);
  border-radius: var(--rayon-bloc);
  font-size: .93rem;
}
.compte-alerte > * { margin: 0; }
.compte-alerte.succes    { border-left-color: var(--accent); }
.compte-alerte.erreur    { border-left-color: var(--couleur-danger); }
.compte-alerte.info      { border-left-color: var(--focus); }
.compte-alerte.attention { border-left-color: var(--attention-encre); }

/* Toast (compte.js) : bas-droite, même grammaire que l'alerte. Caché par
   opacity + transform pour pouvoir animer ; `visibility` évite qu'il reste
   focusable une fois masqué. */
#compte-toast {
  position: fixed; right: 16px; bottom: 16px;
  z-index: var(--plan-toast);
  max-width: min(380px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 10px 12px 14px;
  background: var(--panneau); color: var(--encre-1);
  border: 1px solid var(--trait); border-left: 4px solid var(--focus);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-douce);
  font-size: .93rem;
  opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity var(--duree-courte), transform var(--duree-courte), visibility 0s var(--duree-courte);
}
#compte-toast.visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
#compte-toast.succes { border-left-color: var(--accent); }
#compte-toast.erreur { border-left-color: var(--couleur-danger); }
#compte-toast.info   { border-left-color: var(--focus); }
#compte-toast .compte-toast-texte { flex: 1 1 auto; padding-top: 2px; }
#compte-toast .compte-icone { margin: -6px -4px -6px 0; }


/* ============================================================================
   6. MON ESPACE : bandeau, blocs du jour, premiers pas, recherches,
      recommandations, domaines
   ----------------------------------------------------------------------------
   Version « page d'accueil » (maquettes mock-accueil et mock-premiere,
   validées le 13 septembre 2026). L'ancienne paire accueil + tuile de
   localisation (.compte-accueil / .compte-bonjour) est remplacée par un
   bandeau ; la localisation se lit dans son sous-titre, où elle est un
   bouton (.compte-lieu-bouton) : menu des lieux du compte, ou lien vers le
   profil s'il n'y en a qu'un.

   Les blocs « Aujourd'hui près de chez vous » (.compte-auj) et « Météo chez
   vous » (.compte-meteo) sont RENDUS par user/_chezmoi.php et user/_meteo.php
   (lots séparés) ; leurs classes sont définies ici, dans la feuille commune,
   pour que la page tienne d'un seul style et que ces fichiers n'embarquent
   aucune règle. Noms figés par le contrat d'assemblage : ne pas renommer.

   Ratios mesurés pour ces blocs (WCAG 2 ; ceux propres au bloc météo —
   badges, nom du jour en accent — sont dans sa sous-section) : --encre-2
   sur --panneau-2 (Tmin) 7,82:1 ; --encre-3 sur --panneau-2 (nom du jour, numéro d'étape, domaine
   « à venir ») 5,24:1 ; --encre-3 sur --panneau (valeur indisponible, notes)
   5,50:1 ; --accent sur --panneau (« Fait ») et --sur-accent sur --accent
   (numéro d'étape faite) 6,34:1 ; --encre-2 sur --fond-compte (sous-titre du
   bandeau) 7,55:1.
   ========================================================================== */

/* Bandeau : titre et sous-titre à gauche ; le bloc de texte prend toute la
   ligne (flex: 1) pour servir de repère au menu de lieu sur mobile (voir
   plus bas). Le sous-titre est une rangée flexible : la date, puis le bouton
   de lieu — les deux s'enroulent quand la place manque. */
.compte-bandeau { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.compte-bandeau > div { min-width: 0; flex: 1 1 auto; position: relative; }
.compte-bandeau h1 { margin: 0; font: 800 1.7rem/1.1 var(--police-compte); letter-spacing: -.02em; overflow-wrap: anywhere; }
.compte-bandeau .sous { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 4px 0 0; color: var(--encre-2); font-size: .95rem; }

/* ── Lieu du bandeau (user/_lieux.php, lieuxBandeau) ────────────────────────
   Demande du client : « en haut à gauche, on clique, en deux secondes on
   passe d'une localisation à l'autre ». Le lieu du sous-titre est une
   pilule cliquable — épingle, nom, chevron — qui ouvre le menu des lieux du
   compte ; avec un seul lieu, la même pilule est un lien vers le profil, le
   chevron remplacé par un crayon ; sans lieu, le lien « Indiquer ma
   localisation ». Pilule et non texte nu : elle doit se voir comme un
   endroit où cliquer. 36 px de haut (44 au doigt), --encre-1 sur --panneau
   (15,58:1) ; ouverte, accent sur accent clair (6,34:1), chevron retourné.

   Le menu (.compte-lieu-menu, role="menu") tombe sous la pilule : une entrée
   par lieu (role="menuitemradio", coche visible sur le lieu courant, nom en
   fort et coordonnées en petit, --encre-3 sur --panneau 5,50:1), un
   séparateur, « Gérer mes lieux ». Entrées de 44 px, survol et focus sur
   --accent-clair comme le menu du compte sur la carte (account.css), anneau
   de focus vers l'intérieur. Fermé = attribut hidden. Sur mobile, le menu
   se cale sur le bloc de texte du bandeau (section 9) et non sur la pilule :
   ancré à une pilule en milieu de ligne, il déborderait à droite. */
.compte-lieu { position: relative; display: inline-flex; max-width: 100%; }
.compte-lieu-bouton {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 10px 4px 8px; max-width: 100%;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-pilule);
  background: var(--panneau); color: var(--encre-1);
  font: 600 .9rem/1.2 var(--police-compte); text-align: left;
  text-decoration: none; cursor: pointer;
  transition: background var(--duree-rapide), color var(--duree-rapide), border-color var(--duree-rapide);
}
.compte-lieu-bouton:hover { background: var(--panneau-2); color: var(--encre-1); border-color: var(--bord-champ); }
.compte-lieu-bouton[aria-expanded="true"] { background: var(--accent-clair); color: var(--accent); border-color: transparent; }
.compte-lieu-bouton svg { width: 15px; height: 15px; flex: 0 0 auto; }
.compte-lieu-bouton .epingle, .compte-lieu-bouton .crayon { color: var(--encre-3); }
.compte-lieu-bouton:hover .epingle, .compte-lieu-bouton:hover .crayon,
.compte-lieu-bouton[aria-expanded="true"] .epingle { color: inherit; }
.compte-lieu-bouton .chevron { transition: transform var(--duree-rapide); }
.compte-lieu-bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.compte-lieu-bouton [data-espace-lieu] { overflow-wrap: anywhere; }

.compte-lieu-menu {
  position: absolute; left: 0; top: calc(100% + 6px);
  z-index: 30; /* au-dessus des blocs du jour, sous le toast */
  display: flex; flex-direction: column;
  min-width: 250px; max-width: 340px; padding: 6px;
  background: var(--panneau); color: var(--encre-1);
  border: 1px solid var(--trait); border-radius: var(--rayon-large);
  box-shadow: var(--ombre-forte);
  font: 500 .9rem/1.3 var(--police-compte);
}
.compte-lieu-menu [role="menuitemradio"],
.compte-lieu-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 6px 12px 6px 8px;
  border: 0; border-radius: var(--rayon-bloc); background: none;
  color: var(--encre-1); text-decoration: none; text-align: left; cursor: pointer;
  font: inherit;
  transition: background var(--duree-rapide);
}
.compte-lieu-menu [role="menuitemradio"]:hover,
.compte-lieu-menu [role="menuitem"]:hover { background: var(--accent-clair); color: var(--encre-1); }
.compte-lieu-menu [role="menuitemradio"]:focus-visible,
.compte-lieu-menu [role="menuitem"]:focus-visible { background: var(--accent-clair); outline-offset: -2px; }
.compte-lieu-menu svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* La coche n'est visible que sur le lieu courant, mais garde sa place :
   les noms restent alignés. */
.compte-lieu-menu .coche { color: var(--accent); visibility: hidden; }
.compte-lieu-menu [aria-checked="true"] .coche { visibility: visible; }
.compte-lieu-menu [aria-checked="true"] .nom { font-weight: 700; color: var(--accent); }
.compte-lieu-menu .crayon { color: var(--encre-3); }
.compte-lieu-menu .txt { display: flex; flex-direction: column; min-width: 0; }
.compte-lieu-menu .nom { font-weight: 600; overflow-wrap: anywhere; }
.compte-lieu-menu small { font-size: .76rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.compte-lieu-menu .sep { display: block; border-top: 1px solid var(--trait); margin: 6px 0; }

/* ── Zones teintées ────────────────────────────────────────────────────────
   Demande du client du 15 septembre 2026 : « des blocs de couleur pour
   mieux séparer les éléments, on est un peu perdu ». Chaque section de Mon
   espace est une zone à fond teinté et bord assorti, dans l'ordre : météo
   (bleu ciel), le jour (le vert d'accent), suivis (ambre), suggestions
   (mauve), domaines (terre). La teinte est UNE variable par zone ; fond et
   bord en sont dérivés par color-mix avec le fond de page, ce qui donne les
   deux thèmes d'un coup (le fond de page change, la teinte se mélange
   dedans). Devant le titre, un point de la teinte pleine : la couleur se
   lit aussi là où le fond est trop pâle pour être nommé.

   Le titre de zone prend la teinte assombrie (60 % de teinte, 40 % d'encre
   forte) : mesuré au plus clair, l'ambre #846926 sur #f6f2e6 fait 5,1:1,
   le bleu #3b6a97 sur #eef3f9 5,3:1 — au-dessus de 4,5:1 pour ce texte de
   .7 rem en capitales grasses. Les cartes blanches (.compte-carte) posées
   dans une zone y gagnent leur relief ; leurs propres ratios ne changent
   pas (fond --panneau inchangé). */
.compte-zone {
  --zone-teinte: var(--accent);
  --zone-fond:  color-mix(in srgb, var(--zone-teinte) 9%, var(--fond-compte));
  --zone-bord:  color-mix(in srgb, var(--zone-teinte) 24%, var(--fond-compte));
  --zone-encre: color-mix(in srgb, var(--zone-teinte) 60%, var(--encre-1));
  margin: 18px 0 0;
  padding: 14px 18px 18px;
  border: 1px solid var(--zone-bord);
  border-radius: 16px;
  background: var(--zone-fond);
}
.compte-zone-meteo    { --zone-teinte: #4a89dc; }
.compte-zone-jour     { --zone-teinte: var(--accent); }
.compte-zone-suivis   { --zone-teinte: #c9962a; }
.compte-zone-reco     { --zone-teinte: #7b5ea7; }
.compte-zone-explorer { --zone-teinte: #9c7a5a; }
/* En sombre, un mélange un peu plus franc pour que la teinte se voie sur le
   fond presque noir. */
:root[data-theme="dark"] .compte-zone {
  --zone-fond: color-mix(in srgb, var(--zone-teinte) 14%, var(--fond-compte));
  --zone-bord: color-mix(in srgb, var(--zone-teinte) 32%, var(--fond-compte));
  --zone-encre: color-mix(in srgb, var(--zone-teinte) 55%, var(--encre-1));
}
/* L'étiquette de zone : collée en haut, dans la teinte, précédée du point. */
.compte-zone > .compte-etiquette { margin: 0 0 10px; color: var(--zone-encre); }
.compte-zone > .compte-etiquette > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.compte-zone > .compte-etiquette > span:first-child::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--zone-teinte);
}
/* Le compteur à droite reste en encre tertiaire : c'est une information,
   pas le titre. */
.compte-zone > .compte-etiquette .cpt { color: var(--encre-3); }
/* Les notes de bas de bloc (suggestions) n'ont pas à ajouter de marge sous la zone. */
.compte-zone > :last-child { margin-bottom: 0; }

/* Invitation d'une zone encore vide (météo sans lieu) : icône sur pastille
   de la teinte, titre, phrase, bouton — sur une ligne, en colonne sur
   mobile (section 9). */
.compte-invite { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.compte-invite .txt { min-width: 0; flex: 1 1 auto; }
.compte-invite .txt b { display: block; font-weight: 700; }
.compte-invite .txt p { margin: 3px 0 0; color: var(--encre-2); font-size: .9rem; line-height: 1.45; }
.compte-invite .compte-btn { flex: 0 0 auto; }
.compte-invite-icone {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--rayon-large);
  background: color-mix(in srgb, var(--zone-teinte) 14%, var(--panneau));
  color: var(--zone-encre);
  display: grid; place-items: center;
}
.compte-invite-icone svg { width: 24px; height: 24px; }

/* Le guide de la zone du jour (pas encore de lieu, ou pas encore
   d'indicateur suivi) : une phrase qui dit à quoi la zone servira, puis les
   trois étapes, dans la même carte. Les étapes y perdent leur propre cadre
   (ce sont des lignes sur fond --panneau-2, pas des cartes dans la carte). */
.compte-guide { padding: 16px 18px 14px; }
.compte-guide-intro { display: flex; align-items: flex-start; gap: 14px; }
.compte-guide-intro .txt { min-width: 0; }
.compte-guide-intro .txt b { display: block; font-weight: 700; font-size: 1.05rem; }
.compte-guide-intro .txt p { margin: 4px 0 0; color: var(--encre-2); font-size: .93rem; line-height: 1.5; max-width: 64ch; }
.compte-guide .compte-etapes { margin-top: 14px; gap: 6px; }
.compte-guide .compte-etapes li { background: var(--panneau-2); border-radius: var(--rayon-large); padding: 10px 14px; }
.compte-guide .compte-etapes .num { background: var(--panneau); }
.compte-guide .compte-etapes .faite .num { background: var(--accent); }

/* ── Aujourd'hui près de chez vous ─────────────────────────────────────────
   Une ligne par recherche sauvegardée : icône du domaine, nom + détail,
   valeur du jour (pastille de la couleur de la légende + libellé), chevron.
   La ligne entière est le lien vers la carte. */
.compte-auj { padding: 4px 6px; }
.compte-auj .ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px;
  border-bottom: 1px solid var(--trait); border-radius: var(--rayon-bloc);
  color: inherit; text-decoration: none;
  transition: background var(--duree-rapide);
}
.compte-auj .ligne:last-of-type { border-bottom: 0; }
.compte-auj .ligne:hover { background: var(--panneau-2); color: inherit; }
.compte-auj .txt { min-width: 0; }
.compte-auj .txt b { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.compte-auj .txt small { display: block; color: var(--encre-3); font-size: .8rem; }
/* La valeur : pastille 14 px de la couleur de la légende (donnée, jamais un
   jeton d'interface — voir jetons.css) cerclée d'un filet pour rester
   visible sur les teintes claires, puis le libellé. */
.compte-auj .compte-val { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.compte-auj .compte-val i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(28, 38, 32, 0.15); }
.compte-auj .chev { color: var(--encre-3); font-size: 1.3rem; line-height: 1; }
.compte-auj .maj { margin: 6px 10px 8px; font-size: .78rem; color: var(--encre-3); }

/* Valeur indisponible (fichier du jour absent, point hors grille) : texte
   tertiaire (5,50:1) et pastille grise — l'absence se lit sans couleur. */
.compte-auj .ligne.indisponible .compte-val { color: var(--encre-3); font-weight: 500; }
.compte-auj .ligne.indisponible .compte-val i { background: var(--trait-fort); }

/* Squelette de chargement : tant que l'API n'a pas répondu, chaque valeur
   est une barre grise qui scintille doucement (le texte de remplissage
   éventuel est rendu transparent, la pastille masquée). Sobre : un seul
   dégradé, pas de pulsation d'opacité ; figé en mouvement réduit (section 8). */
.compte-auj.chargement .compte-val { position: relative; min-width: 88px; color: transparent; }
.compte-auj.chargement .compte-val i { visibility: hidden; }
.compte-auj.chargement .compte-val::after {
  content: ""; position: absolute; inset: 2px 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--panneau-2) 0%, var(--trait) 50%, var(--panneau-2) 100%);
  background-size: 200% 100%;
  animation: compte-scintille 1.4s ease-in-out infinite;
}
@keyframes compte-scintille {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Météo chez vous ───────────────────────────────────────────────────────
   UNE SEULE RANGÉE, pas plus haute qu'une tuile de recherche : le client a
   refusé une première version en colonnes hautes (barres verticales, phrase
   de synthèse) qui prenait trois fois cette place pour dire la même chose.
   Chaque jour : son nom, Tmax en fort et Tmin à côté, la tendance de Tmax
   par rapport à la veille, puis un TRAIT DE PLAGE de 6 px : la portion
   Tmin→Tmax sur une échelle commune aux quatre jours (min des Tmin, max des
   Tmax arrondis à 5 °), colorée par un dégradé selon la température. Un
   badge « Gel possible » ou « Forte chaleur » n'apparaît que s'il s'applique.
   Ce que le JS écrit en style inline, parce que ce sont des DONNÉES : la
   position et la largeur du trait (left et width en %), et les positions des
   arrêts du dégradé ; les COULEURS restent ici, en jetons locaux.
   Ratios mesurés : libellés en --encre-1 / --encre-2 sur --panneau ou
   --panneau-2 (7,82:1 au moins) ; badges 6,96:1 (gel) et 6,30:1 (chaleur),
   en sombre 8,09:1 et 7,10:1 ; « Aujourd'hui » en --accent sur --panneau-2,
   6,04:1. Le trait ne porte aucun texte. */
.compte-meteo {
  --meteo-froid:   #2f6fc4;   /* ≤ 0 °C  : bleu     */
  --meteo-frais:   #62b083;   /* ~10 °C  : vert doux */
  --meteo-doux:    #e9c53f;   /* ~20 °C  : jaune    */
  --meteo-chaud:   #ee8a3a;   /* ~30 °C  : orange   */
  --meteo-brulant: #d23c2c;   /* ≥ 35 °C : rouge    */
  --meteo-gel-encre:     #1f4f8f;
  --meteo-gel-fond:      #e4eefb;
  --meteo-chaleur-encre: #9a2f1f;
  --meteo-chaleur-fond:  #fbe7e2;
  padding: 10px 12px;
}
:root[data-theme="dark"] .compte-meteo {
  --meteo-froid:   #5b95e6;
  --meteo-frais:   #6fc08d;
  --meteo-doux:    #e6c94f;
  --meteo-chaud:   #f0954a;
  --meteo-brulant: #e0584a;
  --meteo-gel-encre:     #9fc4f5;
  --meteo-gel-fond:      #1b2a3d;
  --meteo-chaleur-encre: #f0a08f;
  --meteo-chaleur-fond:  #3a221d;
}

/* En-tête : titre et lieu à gauche (#meteo-titre nomme la section), à droite
   le modèle, l'organisme et l'heure du dernier calcul (« ARPEGE · Météo-France
   · actualisé à 13:20 ») ; la mention « prévision brute, sans scénario » y
   est en infobulle et dans le texte lecteur d'écran, pas en ligne de plus. */
.compte-meteo-entete { flex-wrap: wrap; }
.compte-meteo-entete > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.compte-meteo-lieu { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .8rem; }
.compte-meteo-maj { white-space: nowrap; }

/* La rangée : quatre cases égales ; « Aujourd'hui » sur --panneau-2. */
.compte-meteo .jours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.compte-meteo .jours li { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 9px; border-radius: var(--rayon-bloc); min-width: 0; }
.compte-meteo .jours li.auj { background: var(--panneau-2); }
.compte-meteo .jours li.auj .jour { color: var(--accent); }
.compte-meteo .jour { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Températures sur une ligne : Tmax forte, Tmin à côté, flèche de tendance. */
.compte-meteo .temps { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.compte-meteo .tmax { font-size: 1.2rem; font-weight: 800; color: var(--encre-1); }
.compte-meteo .tmin { font-size: .9rem; font-weight: 600; color: var(--encre-2); }
.compte-meteo .tend { font-size: .75rem; font-weight: 600; color: var(--encre-2); }
.compte-meteo li.sans .tmax { color: var(--encre-3); font-weight: 600; }
.compte-meteo li.sans .tmin { font-size: .74rem; font-weight: 500; color: var(--encre-3); }

/* Trait de plage : le rail gris est l'échelle commune, le segment coloré la
   plage du jour ; positions et dégradé en inline (données). */
.compte-meteo .plage { position: relative; height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; margin-top: 2px; }
.compte-meteo .barre { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 6px; }
.compte-meteo li.sans .plage { visibility: hidden; }

/* Badges, seulement quand ils s'appliquent : une pilule sous le trait. */
.compte-meteo .badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.compte-meteo .badges:empty { display: none; }
.compte-meteo .badge { padding: 2px 7px; border-radius: var(--rayon-pilule); font-size: .66rem; font-weight: 700; line-height: 1.3; }
.compte-meteo .badge.gel     { color: var(--meteo-gel-encre);     background: var(--meteo-gel-fond); }
.compte-meteo .badge.chaleur { color: var(--meteo-chaleur-encre); background: var(--meteo-chaleur-fond); }

/* Erreur : une ligne à la place de la rangée. */
.compte-meteo .source { margin: 4px 0 0; font-size: .8rem; color: var(--encre-3); }

/* Squelette de chargement : les températures sont une barre scintillante. */
.compte-meteo.chargement .temps { position: relative; min-height: 1.3em; }
.compte-meteo.chargement .temps > * { visibility: hidden; }
.compte-meteo.chargement .temps::after {
  content: ""; position: absolute; left: 0; top: .15em; width: 70%; height: 1em; border-radius: 6px;
  background: linear-gradient(90deg, var(--trait) 0%, var(--trait-fort) 50%, var(--trait) 100%);
  background-size: 200% 100%;
  animation: compte-scintille 1.4s ease-in-out infinite;
}

/* ── Premiers pas (première visite) ────────────────────────────────────────
   Trois étapes numérotées, dans le guide de la zone du jour (.compte-guide,
   plus haut). Le numéro passe à l'accent quand l'étape est faite (li.faite) ;
   sinon il reste neutre. */
.compte-etapes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.compte-etapes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.compte-etapes .num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--panneau-2); color: var(--encre-3); border: 1px solid var(--trait-fort);
  display: grid; place-items: center;
  font: 800 1rem var(--police-compte); font-variant-numeric: tabular-nums;
}
.compte-etapes .faite .num { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.compte-etapes .txt { min-width: 0; }
.compte-etapes .txt b { display: block; font-weight: 700; }
.compte-etapes .txt small { display: block; color: var(--encre-2); font-size: .84rem; margin-top: 2px; }
/* Étape faite : la mention « Fait » remplace le bouton, en accent (6,34:1). */
.compte-etapes .fait { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.compte-etapes .fait svg { width: 16px; height: 16px; }

/* ── Explorer d'autres indicateurs ─────────────────────────────────────────
   Les huit domaines de la carte, en tuiles égales (4 colonnes sur mobile,
   section 9). Une tuile ouvre la carte avec ce domaine préchoisi. Un domaine
   sans indicateur disponible est rendu en <span> atténué, pas en lien. */
.compte-domaines { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.compte-domaines > * {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 44px; padding: 10px 6px 8px;
  background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon-large);
  color: var(--encre-1); text-decoration: none;
  font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.25;
  transition: border-color var(--duree-rapide), background var(--duree-rapide);
}
.compte-domaines a:hover { border-color: var(--accent); background: var(--accent-clair); color: var(--encre-1); }
.compte-domaines > * > span { font-size: 20px; line-height: 1; }
.compte-domaines small { font-weight: 500; color: var(--encre-3); font-size: .72rem; font-variant-numeric: tabular-nums; }
.compte-domaines .a-venir { color: var(--encre-3); background: var(--panneau-2); }

/* Grille de recherches sauvegardées : 3 colonnes, 2 sur tablette, 1 sur
   mobile (section 9). */
.compte-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.compte-rech {
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: box-shadow var(--duree-rapide), border-color var(--duree-rapide);
}
.compte-rech:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-forte); }
.compte-rech .haut { display: flex; align-items: center; gap: 10px; min-width: 0; }
.compte-rech .haut > div { min-width: 0; }
.compte-dom {
  width: 40px; height: 40px; border-radius: var(--rayon-large);
  background: var(--accent-clair);
  display: grid; place-items: center; font-size: 20px; flex: 0 0 auto;
}
.compte-rech .nom { font-weight: 700; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
/* Toute la tuile est cliquable : le lien du titre est étendu à la tuile par
   un pseudo-élément, ce qui garde UN seul lien dans l'arbre d'accessibilité
   (un lien qui envelopperait la tuile annoncerait tout son texte). Les
   boutons d'action (.bas .grp) et le voile passent au-dessus par z-index. */
.compte-rech .nom a { color: inherit; text-decoration: none; }
.compte-rech .nom a::after { content: ""; position: absolute; inset: 0; }
/* L'anneau de focus entoure toute la tuile, pas seulement le mot du titre
   (navigateurs sans :has() : l'anneau reste sur le titre, ce qui suffit). */
@supports selector(:has(a)) {
  .compte-rech .nom a:focus-visible { outline: none; }
  .compte-rech:has(.nom a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
}
.compte-rech .ind { margin: 0; font-size: .84rem; color: var(--encre-2); line-height: 1.35; }

.compte-puces { display: flex; gap: 6px; flex-wrap: wrap; }
.compte-puce {
  padding: 5px 8px; border-radius: var(--rayon-pilule);
  background: var(--panneau-2); border: 1px solid var(--trait); color: var(--encre-2);
  font: 600 .74rem/1 var(--police-compte); white-space: nowrap;
}
.compte-puce.j { background: var(--accent-clair); border-color: transparent; color: var(--accent); }

.compte-rech .bas {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--trait);
}
.compte-rech .quand { font-size: .78rem; color: var(--encre-3); }
.compte-rech .bas .grp { display: flex; gap: 2px; position: relative; z-index: 1; }

/* Retrait d'une tuile supprimée : fondu court, puis mon-espace.js l'enlève
   du DOM (transition coupée en mouvement réduit, section 8). */
.compte-rech.retrait { opacity: 0; transform: scale(.96); transition: opacity var(--duree-courte) ease, transform var(--duree-courte) ease; }

/* Tuile « fantôme » : invitation à créer une recherche depuis la carte. */
.compte-rech.fantome {
  border-style: dashed; box-shadow: none; background: transparent;
  align-items: center; justify-content: center; text-align: center;
  color: var(--encre-3); text-decoration: none; min-height: 150px;
}
.compte-rech.fantome:hover { background: var(--panneau); color: var(--encre-3); }
.compte-rech.fantome .compte-dom { background: var(--panneau); border: 1px dashed var(--bord-champ); color: var(--accent); }
.compte-rech.fantome p { margin: 0; font-size: .86rem; max-width: 22ch; }
.compte-rech.fantome strong { color: var(--encre-1); }

/* Confirmation EN PLACE (compteConfirmer) : un voile presque opaque couvre
   la tuile, question + deux boutons. Repli rgba avant color-mix pour les
   navigateurs anciens ; le contenu dessous est rendu inerte par le script. */
.compte-rech.confirm .voile {
  position: absolute; inset: 0; border-radius: var(--rayon-panneau);
  background: rgba(255, 255, 255, 0.94);
  background: color-mix(in srgb, var(--panneau) 94%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; text-align: center; font-size: .9rem;
  z-index: 2; /* au-dessus du lien couvrant et des boutons d'action */
}
.compte-rech.confirm .voile p { margin: 0; }
.compte-rech.confirm .voile .grp { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* État vide (aucune recherche) : une tuile fantôme pleine largeur, présente
   dans le HTML même quand il y a des recherches (attribut hidden) pour
   apparaître sans rechargement après la suppression de la dernière. */
.compte-vide {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  border-style: dashed; box-shadow: none;
}
.compte-vide svg { width: 36px; height: 36px; flex: 0 0 auto; color: var(--accent); }
.compte-vide p { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--encre-2); font-size: .93rem; }
.compte-vide .compte-btn { flex: 0 0 auto; }

/* Renommage EN PLACE (mon-espace.js) : le titre laisse la place à un petit
   formulaire — champ prérempli, « Enregistrer », « Annuler » — dans la même
   case, à droite de l'icône du domaine. Masquer le titre emporte avec lui le
   lien couvrant (.nom a::after) : tant qu'on édite, un clic dans la tuile
   n'ouvre plus la carte, et la tuile ne se soulève plus au survol, puisqu'elle
   n'est plus cliquable. */
.compte-rech.renommage .nom { display: none; }
.compte-rech.renommage:hover { border-color: var(--trait); box-shadow: var(--ombre-douce); }
/* La case du titre se dimensionne sur son contenu ; un champ n'en a pas de
   naturel : elle prend toute la largeur restante le temps de l'édition. */
.compte-rech.renommage .haut > div { flex: 1 1 auto; }
.compte-rech.renommage .renommer { display: grid; gap: 8px; }
.compte-rech.renommage .renommer .grp { display: flex; gap: 8px; flex-wrap: wrap; }
/* Même dessin que les champs du profil (.compte-champ input, section 7) : 16 px
   de police (pas de zoom iOS), 44 px de haut, bordure --bord-champ (3,51:1),
   focus et erreur par la couleur de bordure. */
.compte-rech .renommer-champ {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--bord-champ); border-radius: var(--rayon-bloc);
  background: var(--panneau); color: var(--encre-1);
  font: inherit; font-size: 16px;
}
.compte-rech .renommer-champ:focus-visible { border-color: var(--focus); }
.compte-rech .renommer-champ[aria-invalid="true"] { border-color: var(--couleur-danger); }
.compte-rech .renommer-champ:disabled { background: var(--panneau-2); color: var(--encre-3); }

/* ── Épingler et ordonner (phase 4, mon-espace.js) ─────────────────────────
   Trois choses nouvelles dans la tuile : le bouton punaise (.epi, dans le
   groupe d'actions du bas), le badge « Épinglée » (première pilule) et la
   poignée de déplacement (.compte-poignee, en haut à droite). La poignée est
   un .compte-icone : même cible (40 px, 44 au doigt, section 4), même survol.
   Elle passe au-dessus du lien couvrant (.nom a::after) par le même
   z-index que le groupe d'actions, sans quoi le clic ouvrirait la carte. */
.compte-rech .compte-poignee {
  position: relative; z-index: 1;
  margin-left: auto; align-self: flex-start; flex: 0 0 auto;
  cursor: grab;
  /* Sans cela, le doigt qui glisse ferait défiler la page au lieu de
     déplacer la tuile : la poignée revendique tous les gestes (Pointer
     Events) ; le reste de la tuile continue de défiler normalement. Ni
     sélection ni menu contextuel iOS à l'appui long, pour la même raison. */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.compte-rech .compte-poignee:active { cursor: grabbing; }

/* Punaise enfoncée (aria-pressed) : le corps se remplit et prend l'accent
   (6,34:1) — l'état se lit à la forme, pas seulement à la couleur. */
.compte-icone.epi[aria-pressed="true"] { color: var(--accent); }
.compte-icone.epi[aria-pressed="true"] svg path:first-child { fill: currentColor; }
.compte-icone.epi:hover { background: var(--accent-clair); color: var(--accent); }

/* Tuile épinglée : bordure en accent clair, doublée d'un halo de 2 px de la
   même teinte — seule, la bordure de 1 px (#e6f0e8) serait indiscernable du
   filet ordinaire (#dfe5da). Le survol garde le halo, l'ombre s'y ajoute. */
.compte-rech.epinglee { border-color: var(--accent-clair); box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre-douce); }
.compte-rech.epinglee:hover { border-color: var(--accent-clair); box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre-forte); }

/* Badge « Épinglée » : la pilule d'échéance (accent sur accent clair, 6,34:1),
   avec la punaise en miniature. */
.compte-badge-epingle { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-clair); border-color: transparent; color: var(--accent); }
.compte-badge-epingle svg { width: 11px; height: 11px; }
.compte-badge-epingle svg path:first-child { fill: currentColor; }

/* Glisser-déposer (mon-espace.js). La tuile saisie (.glisse) sort du flux —
   position fixe, elle suit le pointeur — et un gabarit vide (.glisse-place,
   tirets) tient sa place dans la grille et se déplace à mesure : c'est
   l'aperçu de la position d'arrivée. La tuile n'est PAS déplacée dans le DOM
   pendant le geste (elle le sera à la dépose) : la poignée garde ainsi la
   capture du pointeur, qu'un retrait du document lui ferait perdre.
   Taille, hauteur du gabarit et translation sont des DONNÉES posées en ligne
   par le script (mesures de la tuile et du pointeur). La tuile saisie
   n'attrape aucun événement, pour qu'elementFromPoint() voie la grille
   sous elle. */
.compte-rech.glisse {
  position: fixed; top: 0; left: 0; margin: 0;
  z-index: var(--plan-toast);
  pointer-events: none;
  box-shadow: var(--ombre-forte); border-color: var(--trait-fort);
  transition: none;
}
.compte-rech.glisse-place { border-style: dashed; border-color: var(--accent); box-shadow: none; background: var(--panneau-2); }
/* Pendant le geste : curseur « saisi » partout, aucune sélection de texte au
   passage du pointeur, et les tuiles ne se soulèvent pas au survol — la
   seule qui bouge est celle qu'on tient. */
.compte-grille.glisse-en-cours { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.compte-grille.glisse-en-cours .compte-rech:hover { border-color: var(--trait); box-shadow: var(--ombre-douce); }
.compte-grille.glisse-en-cours .compte-rech.epinglee:hover { border-color: var(--accent-clair); box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre-douce); }

/* ── Vous pourriez suivre (recommandations, user/_reco.php) ─────────────────
   Au plus quatre tuiles égales, entre « Mes recherches » et « Explorer
   d'autres indicateurs » : icône du domaine et nom de l'indicateur, la
   RAISON de la suggestion (une ligne tertiaire, 5,50:1, précédée d'une
   petite icône décorative : étiquette = domaine suivi, calendrier = saison,
   silhouettes = suivi par les autres), puis « Voir sur la carte » — le seul
   lien de la tuile, poussé en bas (margin-top: auto) pour que les boutons
   s'alignent d'une tuile à l'autre quels que soient les noms. Une <ul> sans
   puces : quatre suggestions sont une liste. 4 colonnes, 2 sur tablette,
   1 sur mobile où le bouton prend toute la largeur (section 9). */
.compte-reco-entete { flex-wrap: wrap; } /* le sous-titre passe à la ligne plutôt que d'écraser le titre */
.compte-reco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.compte-reco-tuile { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.compte-reco-tuile .haut { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.compte-reco-tuile .nom { margin: 0; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.compte-reco-raison { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; line-height: 1.35; color: var(--encre-3); }
.compte-reco-raison svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
.compte-reco-tuile .compte-btn { margin-top: auto; align-self: flex-start; }
/* Note sous la grille : rappel que la sauvegarde se fait depuis la carte. */
.compte-reco-note { margin: 8px 0 0; font-size: .78rem; color: var(--encre-3); }


/* ============================================================================
   7. MON PROFIL : résumé, sections, formulaires
   ========================================================================== */
.compte-profil { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }

.compte-resume {
  padding: 20px 18px;
  position: sticky; top: 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.compte-resume .compte-avatar { width: 68px; height: 68px; font-size: 1.5rem; margin-bottom: 4px; }
.compte-resume .nomc { margin: 0; font: 700 1.05rem/1.2 var(--police-compte); }
.compte-resume .mail { margin: 0; font-size: .84rem; color: var(--encre-2); word-break: break-all; }
.compte-resume .faits {
  list-style: none; margin: 10px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--trait); width: 100%;
  font-size: .82rem; color: var(--encre-3);
  display: grid; gap: 4px; text-align: left;
}
.compte-resume .faits li { display: flex; justify-content: space-between; gap: 8px; }
.compte-resume .faits b { color: var(--encre-1); font-weight: 600; }

/* Sommaire des sections (ancres) ; masqué sur mobile où tout défile. */
.compte-sommaire { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; display: grid; gap: 2px; text-align: left; }
.compte-sommaire a {
  display: block; padding: 7px 10px; border-radius: 7px;
  color: var(--encre-2); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.compte-sommaire a:hover { background: var(--panneau-2); color: var(--encre-1); }
.compte-sommaire a.actif,
.compte-sommaire a[aria-current] { background: var(--accent-clair); color: var(--accent); }

.compte-sections { display: grid; gap: 14px; }
.compte-section { padding: 18px 20px 16px; scroll-margin-top: 14px; }
.compte-section > header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.compte-section h2 { margin: 0; font: 700 1.08rem/1.2 var(--police-compte); }
.compte-section > header p { margin: 0; font-size: .84rem; color: var(--encre-3); }

/* Champs : deux colonnes, `.large` occupe toute la ligne. 16 px de police
   minimum (iOS zoome en dessous) et 44 px de hauteur. */
.compte-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compte-champ { display: grid; gap: 5px; align-content: start; }
.compte-champ.large { grid-column: 1 / -1; }
.compte-champ label { font-size: .82rem; font-weight: 600; color: var(--encre-2); }
.compte-champ input,
.compte-champ select,
.compte-champ textarea {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--bord-champ); border-radius: var(--rayon-bloc);
  background: var(--panneau); color: var(--encre-1);
  font: inherit; font-size: 16px;
}
.compte-champ textarea { min-height: 96px; resize: vertical; }
.compte-champ input:focus-visible,
.compte-champ select:focus-visible,
.compte-champ textarea:focus-visible { border-color: var(--focus); }
.compte-champ input:disabled,
.compte-champ select:disabled,
.compte-champ textarea:disabled,
.compte-champ input[readonly] { background: var(--panneau-2); color: var(--encre-3); }
.compte-champ input[aria-invalid="true"],
.compte-champ select[aria-invalid="true"],
.compte-champ textarea[aria-invalid="true"] { border-color: var(--couleur-danger); }
.compte-champ .aide { font-size: .8rem; color: var(--encre-3); }
.compte-champ .erreur { font-size: .8rem; color: var(--couleur-danger); font-weight: 600; }

.compte-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Identité : avatar + bouton de changement de photo. */
.compte-idt { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.compte-idt .compte-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
.compte-idt small { display: block; color: var(--encre-3); font-size: .78rem; margin-top: 3px; }

/* Segments (choix de langue) : enfants = <span>, <button> ou <label>. */
.compte-segment { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--bord-champ); border-radius: var(--rayon-bloc); overflow: hidden; }
.compte-segment > * {
  min-height: 40px; padding: 7px 14px;
  display: inline-flex; align-items: center;
  font-size: .88rem; font-weight: 600; color: var(--encre-2);
  background: var(--panneau); border: 0; border-right: 1px solid var(--bord-champ);
  cursor: pointer;
}
.compte-segment > *:last-child { border-right: 0; }
.compte-segment > *:hover { background: var(--panneau-2); color: var(--encre-1); }
.compte-segment > .on,
.compte-segment > [aria-pressed="true"],
.compte-segment > [aria-checked="true"] { background: var(--accent-clair); color: var(--accent); }
.compte-segment > :focus-visible { outline-offset: -2px; }
/* Radios natifs enveloppés par les <label> du segment (profil.php, langue) :
   masqués visuellement mais toujours focusables, cochables au clavier et
   annoncés — jamais display:none. Le rond natif devant « FR » n'est pas dans
   la maquette ; c'est le <label> qui porte l'état (.on) et l'anneau de focus
   (:focus-within), le radio n'ayant plus de surface. position: relative sur
   le label garde le radio absolu dans sa boîte : sinon, au focus, le
   navigateur ferait défiler la page vers l'endroit où il se trouve. */
.compte-segment > label { position: relative; }
.compte-segment input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* L'anneau ne s'allume qu'au clavier : :focus-within resterait allumé après
   un clic souris (le radio garde le focus). :has() est dans une règle à
   part : un sélecteur inconnu invaliderait toute la liste qui le contient. */
.compte-segment > label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.compte-segment > label:has(input:checked) { background: var(--accent-clair); color: var(--accent); }
@supports not selector(:has(a)) {
  .compte-segment > label:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
}

/* Ligne « intitulé + commande » (préférences, sécurité). */
.compte-inter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.compte-inter:first-of-type { border-top: 0; }
.compte-inter .txt b { display: block; font-weight: 600; }
.compte-inter .txt span { font-size: .82rem; color: var(--encre-3); }

/* Case à cocher enveloppée par son libellé (<label class="compte-case">,
   confirmation de suppression) : la ligne entière est la cible, 44 px de
   haut ; la case, 20 px, prend l'accent. Hors de .compte-champ, dont la
   règle « input pleine largeur, 44 px » est faite pour les champs texte. */
.compte-case { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .93rem; line-height: 1.4; }
.compte-case input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }

/* Interrupteur : <button role="switch" aria-checked> de préférence. Éteint =
   gris de champ (3,51:1), allumé = accent. Le ::before invisible étend la
   cible tactile à 44 px sans changer le dessin. */
.compte-bascule {
  width: 42px; height: 24px; border-radius: var(--rayon-pilule);
  background: var(--bord-champ); border: 0; padding: 0;
  position: relative; flex: 0 0 auto; cursor: pointer;
  transition: background var(--duree-rapide);
}
.compte-bascule::before { content: ""; position: absolute; inset: -10px; }
.compte-bascule::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panneau);
  transition: left var(--duree-rapide);
}
.compte-bascule.on,
.compte-bascule[aria-checked="true"] { background: var(--accent); }
.compte-bascule.on::after,
.compte-bascule[aria-checked="true"]::after { left: 21px; background: var(--sur-accent); }

/* Localisation : conteneur de la carte Leaflet (ou du quadrillage de
   substitution avant chargement), repère, aide et bouton de géolocalisation.
   Les surcouches passent au-dessus des contrôles Leaflet (z-index 1000). */
.compte-map {
  height: 240px; border-radius: 9px; border: 1px solid var(--trait);
  position: relative; overflow: hidden; margin-bottom: 12px;
  background-color: var(--panneau-2);
  background-image: linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 28px 28px;
}
.compte-map .rep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--accent); pointer-events: none; }
.compte-map .rep svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.compte-map .aide {
  position: absolute; left: 10px; bottom: 10px; z-index: 1001;
  padding: 4px 8px; border-radius: var(--rayon-controle);
  font-size: .78rem; color: var(--encre-1);
  background: rgba(255, 255, 255, 0.9);
  background: color-mix(in srgb, var(--panneau) 90%, transparent);
}
.compte-map .geo { position: absolute; right: 10px; top: 10px; z-index: 1001; }

.compte-coord { grid-template-columns: 2fr 1fr 1fr; }

/* Autocomplétion du champ « Ville / lieu » (profil.js, section 8, Photon).
   .compte-auto enveloppe le champ (profil.php) et sert d'ancre : la liste
   .compte-suggestions (<ul role="listbox">, créée par le script) tombe sous
   lui, à sa largeur ; fermée = attribut hidden. z-index 5 suffit : la liste
   ne recouvre que ce qui est SOUS le champ (latitude, longitude, boutons,
   section suivante), rien n'y est positionné ; la carte Leaflet (contrôles
   à 1000, surcouches à 1001) est au-dessus dans le flux et ne la croise
   jamais. Aucun ancêtre (.compte-champ, .compte-champs, .compte-section,
   .compte-carte, .compte-profil) ne pose de z-index, d'opacité ni de
   transform : pas de contexte d'empilement qui la ferait passer sous un
   voisin. Dessin repris du menu de lieu (section 6) : option active
   (aria-selected, suivie par aria-activedescendant) en accent sur accent
   clair (6,34:1), survol sur --panneau-2 ; détail en --encre-3 (5,50:1 sur
   --panneau) ; « Aucun lieu trouvé » (aria-disabled) en italique, sans
   survol. Hauteur au doigt (44 px) dans le bloc pointer: coarse, section 4 ;
   le thème sombre est couvert par les jetons. */
.compte-auto { position: relative; }
.compte-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  list-style: none; margin: 0; padding: 4px;
  max-height: 320px; overflow-y: auto;
  background: var(--panneau); color: var(--encre-1);
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-large);
  box-shadow: var(--ombre-douce);
  font: 500 .92rem/1.3 var(--police-compte);
}
.compte-suggestions [role="option"] {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 8px 12px; border-radius: var(--rayon-bloc);
  cursor: pointer;
}
.compte-suggestions [role="option"]:hover { background: var(--panneau-2); }
.compte-suggestions [role="option"][aria-selected="true"] { background: var(--accent-clair); }
.compte-suggestions [role="option"][aria-selected="true"] b { color: var(--accent); }
.compte-suggestions b { font-weight: 600; overflow-wrap: anywhere; }
.compte-suggestions small { font-size: .78rem; color: var(--encre-3); }
.compte-suggestions [aria-disabled="true"] { color: var(--encre-3); font-style: italic; cursor: default; }
.compte-suggestions [aria-disabled="true"]:hover { background: none; }

/* Zone de danger : bordure teintée, titre en couleur de danger. */
.compte-danger { border-color: var(--couleur-danger); }
.compte-danger h2 { color: var(--couleur-danger); }
.compte-danger p { font-size: .88rem; color: var(--encre-2); margin: 0 0 12px; max-width: 60ch; }

/* ── Lieux (phase 5 : plusieurs localisations par compte) ──────────────────
   Rendu par user/_lieux.php. Le choix du lieu sur Mon espace est le bouton
   de lieu du bandeau (.compte-lieu-bouton / .compte-lieu-menu, section 6,
   « Lieu du bandeau ») : les anciennes puces .compte-lieux-choix sous le
   bandeau ont disparu avec lui. Reste ici :

   .compte-lieux — Mon profil, section Localisation, au-dessus de la carte :
      l'en-tête (« Mes lieux », compteur « 3 lieux sur 5 », « Ajouter un
      lieu »), puis une ligne par lieu — nom et coordonnées, pastille « Par
      défaut », actions (« Définir par défaut », « Modifier », corbeille).
      La ligne en cours de modification (li.edition) est sur --panneau-2
      avec un filet gauche en accent : elle répond à l'intitulé du formulaire
      (.compte-lieux-mode) juste au-dessus de la carte. La suppression se
      confirme EN PLACE (compteConfirmer) : le voile est celui des tuiles de
      Mon espace, redessiné ici parce que la règle d'origine est scopée à
      .compte-rech. La liste est une <ul> sans puces : ce sont des lieux, pas
      des phrases. */
.compte-lieux { margin-bottom: 14px; border: 1px solid var(--trait); border-radius: var(--rayon-bloc); }
.compte-lieux .entete {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--trait);
}
.compte-lieux .entete b { font-weight: 700; }
.compte-lieux .entete .cpt { font-size: .8rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.compte-lieux .entete .compte-btn { margin-left: auto; }
.compte-lieux .vide { margin: 0; padding: 12px 14px; font-size: .86rem; color: var(--encre-3); }
.compte-lieux ul { list-style: none; margin: 0; padding: 0; }
.compte-lieux li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px;
  min-height: 56px; padding: 6px 8px 6px 14px;
  border-top: 1px solid var(--trait);
  transition: background var(--duree-rapide);
}
.compte-lieux li:first-child { border-top: 0; }
.compte-lieux li.edition { background: var(--panneau-2); box-shadow: inset 3px 0 0 var(--accent); }
.compte-lieux .txt { min-width: 0; }
.compte-lieux .txt b { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.compte-lieux .txt small { display: block; font-size: .78rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.compte-lieux .grp { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.compte-lieux[aria-busy="true"] .grp { opacity: .55; pointer-events: none; }
/* Confirmation en place (compteConfirmer) : même voile que .compte-rech.confirm. */
.compte-lieux li.confirm .voile {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  background: color-mix(in srgb, var(--panneau) 94%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; text-align: center; font-size: .9rem;
}
.compte-lieux li.confirm .voile p { margin: 0; }
.compte-lieux li.confirm .voile .grp { flex-wrap: nowrap; gap: 8px; }

/* Intitulé du formulaire de carte : dit quel lieu on édite (« Lieu par
   défaut », « Nouveau lieu », « Modification de « Mâcon » ») ; en mode
   ajout ou modification, il prend l'accent (6,34:1) pour répondre à la ligne
   marquée dans la liste. */
.compte-lieux-mode { margin: 0 0 8px; font-size: .84rem; font-weight: 600; color: var(--encre-2); }
.compte-lieux.edition + .compte-lieux-mode { color: var(--accent); }


/* ============================================================================
   8. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #compte-toast, .compte-rech, .compte-rech.retrait, .compte-btn, .compte-icone, .compte-bascule, .compte-bascule::after,
  .compte-auj .ligne, .compte-domaines > *, .compte-lieu-bouton, .compte-lieu-bouton .chevron,
  .compte-lieu-menu [role="menuitemradio"], .compte-lieu-menu [role="menuitem"], .compte-lieux li { transition: none; }
  /* Le squelette de chargement reste, mais immobile. */
  .compte-auj.chargement .compte-val::after,
  .compte-meteo.chargement .temps::after { animation: none; background: var(--trait); }
  /* Les barres de température apparaissent sans pousser. */
}


/* ============================================================================
   9. RESPONSIVE
   ----------------------------------------------------------------------------
   La maquette utilisait des @container parce qu'elle vivait dans un cadre ;
   les pages réelles occupent la fenêtre, donc @media, aux points de rupture
   de style.css.
   ========================================================================== */
@media (max-width: 1024px) {
  .compte-grille, .compte-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .compte-marque small { display: none; }
  /* En-tête sur deux lignes : logo + outils, puis la navigation en segments
     pleine largeur. Le prénom de la puce et les libellés des liens d'outils
     disparaissent (icônes et aria-label suffisent). */
  .compte-entete { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .compte-nav { order: 3; flex: 1 0 100%; margin: 0; background: var(--panneau-2); border-radius: 9px; padding: 3px; }
  .compte-nav a { flex: 1; justify-content: center; text-align: center; }
  .compte-lien-carte span,
  .compte-explorer span,
  .compte-deconnexion span { display: none; }
  .compte-lien-carte, .compte-explorer, .compte-deconnexion { min-width: 44px; }
  .compte-explorer { padding-left: 12px; padding-right: 12px; }
  .compte-chip > span:not(.compte-avatar) { display: none; }
  .compte-chip { padding: 3px; }
  .compte-corps { padding: 16px 14px 32px; }

  .compte-grille, .compte-reco, .compte-profil, .compte-champs, .compte-coord { grid-template-columns: 1fr; }
  .compte-reco-tuile .compte-btn { align-self: stretch; width: 100%; }
  .compte-bandeau h1 { font-size: 1.45rem; }
  /* Le bloc du jour perd son chevron et passe sur deux lignes : icône et
     texte, puis la valeur SOUS le texte. Sur 390 px, une valeur longue
     (« Indisponible aujourd'hui ») en colonne écrasait le nom sur cinq lignes. */
  .compte-auj .ligne { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 10px 6px; }
  .compte-auj .chev { display: none; }
  .compte-auj .compte-val { grid-column: 2; justify-self: start; white-space: normal; font-size: .88rem; }
  /* Météo : les quatre colonnes tiennent sur 360 px (barres fines, libellés
     .8 rem) ; le nom du jour quitte les capitales espacées — « AUJOURD'HUI »
     ferait 83 px, plus que la colonne (74 px) — pour une casse normale à
     .75 rem (70 px). Sous 320 px, la liste défile horizontalement, un cran
     par colonne (un débordement à gauche serait sinon coupé). */
  .compte-meteo { padding: 8px; }
  .compte-meteo .jours { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .compte-meteo .jours li { padding: 6px 6px 8px; }
  .compte-meteo .jour { font-size: .62rem; letter-spacing: .04em; }
  .compte-meteo .temps { flex-wrap: wrap; gap: 4px; }
  .compte-meteo .tmax { font-size: 1.05rem; }
  .compte-meteo .tmin { font-size: .8rem; }
  .compte-meteo .badge { font-size: .6rem; padding: 2px 5px; }
  /* La flèche de tendance passait à la ligne dans une case de 80 px : elle
     reste dans le texte lecteur d'écran, on la masque à l'écran. */
  .compte-meteo .tend { display: none; }
  .compte-domaines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Zones : moins de rembourrage, coins un cran plus serrés. L'invitation
     passe en colonne, son bouton prend la largeur. */
  .compte-zone { padding: 12px 12px 14px; border-radius: 14px; margin-top: 14px; }
  .compte-invite, .compte-vide { flex-direction: column; align-items: flex-start; padding: 14px; }
  .compte-invite .compte-btn, .compte-vide .compte-btn { width: 100%; }
  .compte-guide { padding: 14px 12px 12px; }
  /* Étapes : le bouton passe sous le texte, aligné avec lui. */
  .compte-etapes li { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .compte-etapes li > .compte-btn,
  .compte-etapes li > .fait { grid-column: 2; justify-self: start; }
  .compte-pied { flex-direction: column; }
  .compte-pied .compte-btn { width: 100%; }
  .compte-resume { position: static; }
  .compte-sommaire { display: none; }
  .compte-inter { flex-wrap: wrap; }
  .compte-map { height: 220px; }
  /* Menu de lieu : calé sur le bloc de texte du bandeau (position:
     relative, section 6) et non sur la pilule — la pilule peut se trouver
     en milieu de ligne, le menu déborderait à droite ; il occupe alors au
     plus la largeur du bloc. */
  .compte-lieu { position: static; }
  .compte-lieu-menu { max-width: 100%; min-width: min(250px, 100%); }
  /* Lieux : sur mobile, la ligne passe sur deux rangées — nom et pastille,
     puis les actions alignées à gauche sous le texte. */
  .compte-lieux li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px 6px 14px; }
  .compte-lieux .grp { grid-column: 1 / -1; justify-content: flex-start; }
  .compte-lieux .entete .compte-btn { margin-left: 0; flex: 1 0 100%; }
  #compte-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}


/* ============================================================================
   11. PAGES D'ENTRÉE — connexion.php, mot-de-passe-oublie.php,
       reinitialisation.php
   ----------------------------------------------------------------------------
   Ces pages n'ont pas d'en-tête : une seule carte (.compte-carte) centrée
   dans la fenêtre, logo et titre en tête, lien « Retour à la carte » dessous.
   <body class="compte-page compte-entree">. Champs, boutons, alertes et lien
   « Carte » viennent des sections précédentes ; ici, uniquement ce qui est
   propre à cette mise en page.
   ========================================================================== */
body.compte-entree {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.compte-entree-carte { width: 100%; max-width: 440px; padding: 28px 28px 24px; }

.compte-entree-marque { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 20px; text-align: center; }
.compte-entree-marque a { display: block; border-radius: var(--rayon-bloc); }
.compte-entree-marque img { width: 64px; height: auto; display: block; }
.compte-entree-marque h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; color: var(--encre-1); }

/* Onglets Connexion / Inscription : même dessin que la navigation mobile de
   l'en-tête (rail --panneau-2, onglet actif en carte blanche, 6,34:1). L'état
   actif est porté par aria-current="page" ; la classe .actif le double. */
.compte-entree-onglets { display: flex; gap: 4px; margin: 0 0 18px; padding: 3px; background: var(--panneau-2); border: 1px solid var(--trait); border-radius: var(--rayon-bloc); }
.compte-entree-onglets a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 12px; border-radius: var(--rayon-controle);
  color: var(--encre-2); font-weight: 600; text-decoration: none;
}
.compte-entree-onglets a.actif,
.compte-entree-onglets a[aria-current="page"] { background: var(--panneau); color: var(--accent); box-shadow: var(--ombre-douce); }

.compte-entree-lede { margin: 0 0 18px; color: var(--encre-2); text-align: center; font-size: .95rem; }
.compte-entree-aide { margin: 0; font-size: .82rem; color: var(--encre-3); }

/* Case à cocher + libellé : la ligne entière fait 44 px de haut (cible
   tactile, le libellé est relié par for/id), la case prend l'accent. */
.compte-entree-case { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0; }
.compte-entree-case input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.compte-entree-case label { font-size: .92rem; line-height: 1.4; color: var(--encre-1); }
.compte-entree-case a { color: var(--accent); }

/* Bloc Google : la case CGU est un prérequis visible AVANT le bouton, qui
   reste inactif (aria-disabled, dont l'opacité vient de .compte-btn, plus la
   classe .inactif) tant qu'elle n'est pas cochée ; on neutralise seulement
   le survol de l'état inactif. */
.compte-entree-google { display: grid; gap: 10px; margin: 0; }
.compte-entree-google .compte-entree-case { margin: 0; }
.compte-entree-google .compte-btn { width: 100%; min-height: 44px; }
.compte-entree-google .compte-btn.inactif:hover { background: var(--panneau); border-color: var(--trait-fort); }
.compte-entree-google svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Séparateur « ou » entre Google et le formulaire classique. */
.compte-entree-ou { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.compte-entree-ou::before, .compte-entree-ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }

.compte-entree form .compte-btn.p { width: 100%; min-height: 44px; margin-top: 16px; }

/* Liens secondaires (mot de passe oublié, retour à la connexion…). */
.compte-entree-liens { margin: 12px 0 0; text-align: center; font-size: .92rem; }
.compte-entree-liens a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: var(--rayon-controle); color: var(--accent); font-weight: 600; text-decoration: none; }
.compte-entree-liens a:hover { text-decoration: underline; }

.compte-entree-retour { margin: 18px 0 0; }
.compte-entree-retour .compte-lien-carte { min-height: 44px; padding: 8px 16px; }

@media (max-width: 768px) {
  body.compte-entree { padding: 16px 12px; justify-content: flex-start; }
  .compte-entree-carte { padding: 22px 18px 20px; }
  /* Sous la carte, la place ne manque pas : on annule le repli « flèche
     seule » que la section 9 applique au lien « Carte » de l'en-tête. */
  .compte-entree-retour .compte-lien-carte span { display: inline; }
}


/* ============================================================================
   12. PAGES LÉGALES — user/_legal_layout.php (cgu, confidentialite,
       mentions-legales)
   ----------------------------------------------------------------------------
   En-tête du compte réduit (logo + lien « Carte », pas de session), puis
   <main class="compte-corps compte-lecture"> : colonne de lecture d'environ
   72 caractères (plus le rembourrage de la carte), rythme des titres et des
   paragraphes, pied avec les trois pages légales.
   ========================================================================== */
.compte-lecture { max-width: calc(72ch + 64px); }
.compte-lecture-carte { padding: 28px 32px 32px; }
.compte-lecture h1 { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; }
.compte-lecture h2 { margin: 26px 0 8px; font-size: 1.12rem; line-height: 1.25; }
.compte-lecture p, .compte-lecture ul, .compte-lecture ol { margin: 0 0 12px; }
.compte-lecture ul, .compte-lecture ol { padding-left: 22px; }
.compte-lecture li { margin-bottom: 6px; }
.compte-lecture .meta { font-size: .88rem; color: var(--encre-3); margin-bottom: 22px; }

/* Pied : les trois pages légales, la page courante marquée aria-current. */
.compte-lecture-pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 18px 0 0; font-size: .88rem; }
.compte-lecture-pied a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--rayon-controle); color: var(--encre-2); font-weight: 600; text-decoration: none; }
.compte-lecture-pied a:hover { color: var(--encre-1); background: var(--panneau-2); }
.compte-lecture-pied a[aria-current="page"] { color: var(--accent); background: var(--accent-clair); }

.compte-lecture-retour { display: flex; justify-content: center; margin: 10px 0 0; }
.compte-lecture-retour .compte-lien-carte { min-height: 44px; padding: 8px 16px; }

@media (max-width: 768px) {
  .compte-lecture-carte { padding: 20px 16px 24px; }
  /* En pied de page, libellé complet du lien « Retour à la carte » ;
     l'en-tête, lui, garde la flèche seule (section 9). */
  .compte-lecture-retour .compte-lien-carte span { display: inline; }
}


/* ============================================================================
   13. PAGE DONNÉES ET API — api-donnees.php (gabarit user/_legal_layout.php)
   ----------------------------------------------------------------------------
   Page publique qui présente l'API REST et porte le formulaire de contact.
   Elle vit dans la colonne de lecture des pages légales (.compte-lecture,
   section 12) : les titres, paragraphes et le pied viennent de là. Ici,
   uniquement ses composants propres, tous préfixés compte-api-* et portés par
   la racine .compte-api : cette racine sert aussi à battre les règles de
   liste de .compte-lecture (`.compte-lecture ul` fait (0,1,1), une classe
   seule ferait (0,1,0) et perdrait).

   Réemploi : .compte-btn (actions), .compte-puce (publics), .compte-champs /
   .compte-champ / .compte-case / .compte-pied / .compte-alerte (formulaire),
   .compte-sr (mentions « nouvel onglet »).

   Ratios (WCAG 2) : --encre-2 sur --panneau (accroche, textes secondaires)
   8,21:1 ; --encre-3 sur --panneau-2 (en-tête du tableau) 5,24:1 et sur
   --panneau (« Non », aide) 5,50:1 ; --accent sur --accent-clair (numéro
   d'étape) ≥ 5,8:1 — même paire que l'entrée active de .compte-nav.
   ========================================================================== */

/* Accroche : un cran au-dessus du corps de texte, chiffres en fort. */
.compte-api-accroche { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.55; color: var(--encre-2); }
.compte-api-accroche strong { color: var(--encre-1); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Les deux actions de tête : demander un accès (principal), lire la
   documentation (secondaire). En colonne pleine largeur sur mobile. */
.compte-api-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }

/* « Ce que vous pouvez obtenir » : une tuile par famille de données —
   intitulé, phrase, puis les chemins d'API en <code>. Liste sans puce ni
   retrait (les règles de .compte-lecture sont battues par la racine). */
.compte-api .compte-api-puces { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.compte-api .compte-api-puces li {
  display: grid; gap: 6px; margin: 0; padding: 12px 14px;
  background: var(--panneau-2); border: 1px solid var(--trait); border-radius: var(--rayon-bloc);
}
.compte-api .compte-api-puces b { font-weight: 700; }
.compte-api .compte-api-puces p { margin: 0; font-size: .93rem; color: var(--encre-2); }
.compte-api-chemins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* Chemins d'API : monospace, en pastille bordée ; une pastille ne se coupe
   pas, c'est la rangée qui passe à la ligne. Vaut aussi pour le <code> du
   lien « Essayer ». */
.compte-api code {
  display: inline-block; padding: 3px 7px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8rem; line-height: 1.4; white-space: nowrap;
  background: var(--panneau); border: 1px solid var(--trait-fort); color: var(--encre-1);
}

/* « Pour qui » : les publics en pilules (.compte-puce, section 6), sans
   retrait de liste. Corps un peu plus grand que la pilule de tuile, qui est
   faite pour un mot. */
.compte-api .compte-api-publics { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.compte-api .compte-api-publics li { margin: 0; font-size: .84rem; padding: 7px 10px; }

/* « Comment ça marche » : trois étapes numérotées par un compteur CSS (la
   liste garde sa sémantique <ol>, le numéro est dessiné, pas dans le texte). */
.compte-api .compte-api-etapes { list-style: none; counter-reset: etape; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.compte-api .compte-api-etapes li {
  counter-increment: etape;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start;
  margin: 0;
}
.compte-api .compte-api-etapes li::before {
  content: counter(etape);
  grid-row: 1 / span 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-clair); color: var(--accent);
  display: grid; place-items: center;
  font: 800 .95rem/1 var(--police-compte); font-variant-numeric: tabular-nums;
}
.compte-api .compte-api-etapes b { font-weight: 700; line-height: 1.3; padding-top: 5px; }
.compte-api .compte-api-etapes span { font-size: .92rem; color: var(--encre-2); }

/* Tableau des formules : dans une région défilante (overflow-x) pour que la
   page ne déborde jamais ; focusable (tabindex="0" dans le HTML) pour être
   défilée au clavier, d'où l'anneau de focus. Largeur minimale : six
   colonnes ne tiennent pas sous 560 px sans devenir illisibles. */
/* « Non » en tertiaire : le mot porte le sens, la couleur ne fait que l'atténuer. */

/* Liens vers la documentation et l'essai en direct. */
.compte-api .compte-api-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 8px; }
.compte-api .compte-api-liens a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; font-weight: 600; }

/* Formulaire : la case de consentement sous les champs ; son message
   d'erreur (hors .compte-champ) reprend le style de .compte-champ .erreur. */
.compte-api-form { margin-top: 4px; }
.compte-api-form .compte-case { margin-top: 10px; }
.compte-api .compte-api-erreur { margin: 0; font-size: .8rem; color: var(--couleur-danger); font-weight: 600; }
.compte-api .compte-champ label .aide { font-weight: 500; }

/* Pot de miel : hors écran, jamais display:none (certains robots sautent les
   champs ainsi masqués) — même technique que sur connexion.php, en classe. */
.compte-api-piege { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Widget ALTCHA : élément personnalisé, en ligne par défaut. */
.compte-api altcha-widget { display: block; margin-top: 14px; }

/* Pied : l'adresse en clair pour qui préfère écrire. */
.compte-api-pied { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--trait); font-size: .93rem; color: var(--encre-2); }

@media (max-width: 768px) {
  .compte-api-actions .compte-btn { flex: 1 1 100%; min-height: 44px; }
  .compte-api-accroche { font-size: 1rem; }
  .compte-api .compte-api-puces li { padding: 11px 12px; }
  .compte-api .compte-api-liens { flex-direction: column; gap: 2px; }
}

/* Sur pointeur grossier, les liens de texte montent à 44 px comme les
   autres cibles de la feuille (section 3). */
@media (pointer: coarse) {
  .compte-api .compte-api-liens a { min-height: 44px; }
}