/* public/styles/entete-pied.css — L'EN-TÊTE ET LE PIED DE PAGE COMMUNS, tels qu'arrêtés dans la page d'accueil
   fournie par Hassen (lot U, accueil_qualimarche.html, 23/09/2026). Structure, couleurs et polices sont celles de
   la charte Système Quali : Bleu Marque #1E5290 en primaire, Orange Signal #F0902A en accent, Encre, Ardoise, Brume.
   Le Vert Conformité #2BB07A est RÉSERVÉ à QualiCRM et n'apparaît nulle part ici. Seules ces valeurs portent la
   couleur ; les autres feuilles n'en redéfinissent aucune pour l'en-tête et le pied. */
:root{
  --qm-bleu-nuit:      #143358;  /* fonds sombres, tuile */
  --qm-bleu-marque:    #1E5290;  /* primaire, boutons, liens */
  --qm-orange-signal:  #F0902A;  /* accent QualiMarché — réservé, usage rare */
  --qm-encre:          #0F1B2D;  /* texte principal */
  --qm-ardoise:        #5B6B7F;  /* texte secondaire */
  --qm-brume:          #EAEEF3;  /* lignes, fonds doux */
  --qm-blanc:          #FFFFFF;

  --qm-fond:           #F7F9FB;
  --qm-surface:        var(--qm-blanc);
  --qm-bordure:        var(--qm-brume);
  --qm-bordure-forte:  #D3DBE4;
  /* Chantier A (3-01, 3-06) : les variantes déjà en service dans les pages métier (veille, anticiper, avis…), posées
     ici une fois pour les feuilles et scripts communs — fond accentué, orange lisible sur fond clair (AA), signal vert. */
  --qm-fond-accent:    #FEF6EC;
  --qm-accent-texte:   #A85B14;  /* l'Orange Signal n'est JAMAIS du texte sur blanc : cette variante le remplace */
  --qm-signal-ok:      #2E7448;
  --qm-signal-ok-fond: #E9F3EC;
  /* E2 n° 111 : les fonds pâles des étiquettes de statut (src/components/StatutDonnee.astro, page fournie du lot W) —
     ici et nulle part ailleurs ; le texte orange de « Estimé » est --qm-accent-texte. */
  --qm-statut-bleu-fond:   #E6EEF8;
  --qm-statut-orange-fond: #FDF1E3;

  --qm-titre: "Poppins", system-ui, sans-serif;
  --qm-corps: "Inter", system-ui, sans-serif;

  --qm-rayon: 4px;
  --qm-largeur: 1200px;
}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:50;
  background:var(--qm-surface);
  border-bottom:1px solid var(--qm-bordure);
  font-family:var(--qm-corps);
}
.entete-inner{
  width:min(calc(100% - 40px),var(--qm-largeur));margin:0 auto;
  min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;
  flex-wrap:wrap; /* connecté, avec les drapeaux d'écran, la partie droite passe à la ligne plutôt que de déborder */
}
/* Lot AH (AH-1) : dès que le menu est affiché (> 900 px), l'en-tête est une GRILLE « marque | menu | partie
   droite » dont la colonne de droite a une largeur RÉSERVÉE (--qm-droite, posée par le serveur selon la
   configuration). Le menu ne bouge pas quand « Se connecter » devient l'adresse e-mail + « Déconnexion »
   (règle de la passe 3 du lot Z), et il ne peut plus recouvrir la marque : les entrées qui ne tiennent pas
   passent dans « Plus », tranche par tranche (classes hors-X / plus-X calculées par le serveur).
   Avant (passe 3) : grille symétrique minmax(0,1fr) auto minmax(0,1fr) — le menu prenait toute sa largeur
   naturelle et écrasait les deux colonnes latérales (marque recouverte, boutons « d… », « D… »). */
@media (min-width:901px){
  .entete-inner{display:grid;grid-template-columns:auto minmax(0,1fr) var(--qm-droite,244px);column-gap:24px;flex-wrap:nowrap}
  .marque{justify-self:start}
  .menu{justify-self:center;min-width:0}
  .entete-droite{justify-self:end;min-width:0;max-width:100%;margin-left:0}
}
/* La partie droite : l'adresse e-mail rétrécit (points de suspension, adresse complète au survol), les
   autres boutons ne rétrécissent JAMAIS — plus de « D… ». */
.entete-droite .bouton-sobre,.entete-droite .bouton{flex:0 0 auto}
.entete-droite #qm-auth-cta{flex:0 1 auto;min-width:0}
.entete-droite .compte>summary{max-width:100%}
/* Chantier A (1-16, 3-25) : un cookie de session est présent — le serveur ne sait pas encore s'il est valable. Rien
   n'est montré à la place du compte tant que /me n'a pas répondu : plus de « Se connecter » remplacé par l'adresse
   e-mail une seconde plus tard. La place reste réservée (visibility), le menu ne bouge pas. */
[data-attente]{visibility:hidden}
/* Lot R8 n° 20 : dans l'en-tête, l'attente se DIT — « Chargement… », neutre (ni lien ni bouton), à la même place et à la
   même largeur que l'adresse qui la remplacera ; le lien du pied, lui, reste caché jusqu'à la réponse. */
.entete-droite .compte-attente[data-attente]{visibility:visible;color:var(--qm-ardoise);cursor:default}

/* ---------- « Plus » ---------- */
.menu-plus{position:relative}
.menu-plus>summary{list-style:none;cursor:pointer;color:var(--qm-ardoise);font-size:14px;padding:6px 0;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;position:relative}
.menu-plus>summary::-webkit-details-marker{display:none}
.menu-plus>summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:2px}
.menu-plus>summary:hover,.menu-plus[open]>summary{color:var(--qm-encre)}
.menu-plus-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;background:var(--qm-surface);border:1px solid var(--qm-bordure);border-radius:var(--qm-rayon);box-shadow:0 8px 24px rgba(15,27,45,.12);padding:6px 0;display:flex;flex-direction:column}
.menu-plus-liste a{display:none;padding:9px 16px;color:var(--qm-encre);font-size:14px;text-decoration:none;white-space:nowrap}
.menu-plus-liste a:hover{background:var(--qm-fond)}
.menu-plus-liste a.actif{font-weight:600;color:var(--qm-bleu-marque)}
.menu-plus-liste a.secondaire{display:block}
/* Lot AI (AH-2.3) : « Plus » au-dessus de 900 px, « Menu » en dessous (même élément). Le compte (« Mon profil »,
   « Mon abonnement ») n'est dans cette liste que sous 900 px : au-dessus, il vit dans le menu de l'adresse e-mail. */
.menu-plus .libelle-menu{display:none}
.menu-plus-liste .compte-mobile{display:none}
/* Chantier A (3-13) : sous 900 px, « Menu » porte le compte entier — l'adresse complète et « Déconnexion », avec
   « Mon profil » et « Mon abonnement ». L'en-tête connecté tient sur UNE rangée. */
.menu-plus-liste .compte-adresse{padding:9px 16px 6px;color:var(--qm-ardoise);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;border-top:1px solid var(--qm-bordure);margin-top:6px}
.menu-plus-liste button.compte-mobile{font:inherit;font-size:14px;text-align:left;background:none;border:0;padding:9px 16px;color:var(--qm-encre);cursor:pointer;width:100%}
.menu-plus-liste button.compte-mobile:hover{background:var(--qm-fond)}
/* Lot AI (AH-2.2) : le menu du compte, ouvert depuis l'adresse e-mail. */
.compte{position:relative;min-width:0;flex:0 1 auto}
.compte>summary{list-style:none;cursor:pointer;display:block;line-height:38px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compte>summary::-webkit-details-marker{display:none}
.compte-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:190px;background:var(--qm-surface);border:1px solid var(--qm-bordure);border-radius:var(--qm-rayon);box-shadow:0 8px 24px rgba(15,27,45,.12);padding:6px 0;display:flex;flex-direction:column}
.compte-liste a{padding:9px 16px;color:var(--qm-encre);font-size:14px;text-decoration:none;white-space:nowrap}
.compte-liste a:hover{background:var(--qm-fond)}
/* Lot R8 n° 5 : « Déconnexion » dans le menu du compte, à toutes les largeurs. */
.compte-liste button.compte-deconnexion{font:inherit;font-size:14px;text-align:left;background:none;border:0;border-top:1px solid var(--qm-bordure);margin-top:6px;padding:9px 16px;color:var(--qm-encre);cursor:pointer;width:100%}
.compte-liste button.compte-deconnexion:hover{background:var(--qm-fond)}
/* Tranche par tranche (mêmes bornes que le calcul du serveur, QMLayout.astro) : une entrée « hors-X » quitte
   la ligne et apparaît dans « Plus » (« plus-X ») ; « vide-X » masque « Plus » quand il n'a rien à montrer ;
   « actif-X » le souligne quand la page ouverte est dedans. */
@media (min-width:1401px){
  .menu>a.hors-a{display:none}
  .menu-plus-liste a.plus-a{display:block}
  .menu-plus.vide-a{display:none}
  .menu-plus.actif-a>summary{color:var(--qm-encre);font-weight:600;border-bottom:2px solid var(--qm-bleu-marque)}
}
@media (min-width:1240px) and (max-width:1400px){
  .menu>a.hors-b{display:none}
  .menu-plus-liste a.plus-b{display:block}
  .menu-plus.vide-b{display:none}
  .menu-plus.actif-b>summary{color:var(--qm-encre);font-weight:600;border-bottom:2px solid var(--qm-bleu-marque)}
}
@media (min-width:1100px) and (max-width:1239.98px){
  .menu>a.hors-c{display:none}
  .menu-plus-liste a.plus-c{display:block}
  .menu-plus.vide-c{display:none}
  .menu-plus.actif-c>summary{color:var(--qm-encre);font-weight:600;border-bottom:2px solid var(--qm-bleu-marque)}
}
@media (min-width:901px) and (max-width:1099.98px){
  .menu>a.hors-d{display:none}
  .menu-plus-liste a.plus-d{display:block}
  .menu-plus.vide-d{display:none}
  .menu-plus.actif-d>summary{color:var(--qm-encre);font-weight:600;border-bottom:2px solid var(--qm-bleu-marque)}
}
.entete-droite{margin-left:auto}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--qm-encre)}
.marque img{height:38px;width:auto;display:block}
/* Tant que le lockup horizontal QualiMarché n'existe pas en fichier (la charte n'a que le vertical ; CLAUDE.md § 8 : ne pas
   en fabriquer un), la marque est le symbole officiel (public/marque/symbole.png) suivi du nom en Poppins — un signe
   provisoire, pas un lockup. */
.marque-nom{font-family:var(--qm-titre);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--qm-encre);line-height:1}
.marque-sous{font-size:14px;color:var(--qm-ardoise);font-weight:500} /* lot R8 (D-R8-3) : 14 px, minuscules */
.pied .marque img{height:32px}
.menu{display:flex;align-items:center;gap:16px} /* AH-1 : 16 px partout (le calcul des tranches en dépend) */
/* Une entrée ne se coupe jamais sur deux lignes : connecté, avec les drapeaux d'écran, le menu compte jusqu'à sept entrées.
   Chantier A (1-01) : « .menu > a », les entrées de la LIGNE seulement. Écrit « .menu a », la règle (même spécificité,
   plus bas dans la feuille) rendait aussi les liens du panneau « Plus » visibles — les huit entrées y apparaissaient,
   centrées et grises, dont cinq déjà dans la ligne. Le panneau garde ses propres règles (.menu-plus-liste a). */
.menu>a{text-decoration:none;color:var(--qm-ardoise);font-size:14px;padding:6px 0;position:relative;white-space:nowrap;display:inline-flex;flex-direction:column;align-items:center}
/* Passe 3 (§ 5) : l'entrée ACTIVE passe en graisse 600 et s'élargissait de 1 à 4 px — le menu centré se
   redistribuait d'une page à l'autre (mesuré). Chaque entrée réserve la largeur de sa version grasse :
   un doublon invisible en ::after, à hauteur nulle, porte le même texte en 600. Écart mesuré : 0 px. */
.menu>a::after{content:attr(data-texte);font-weight:600;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.menu>a:hover{color:var(--qm-encre)}
.menu>a.actif{color:var(--qm-encre);font-weight:600;border-bottom:2px solid var(--qm-bleu-marque)}
.menu .pastille{
  position:absolute;top:-6px;right:-14px;display:none;
  background:var(--qm-orange-signal);color:var(--qm-encre);border-radius:999px;
  font-size:14px;font-weight:700;padding:1px 6px;line-height:1.4; /* 3-17 (lot E1) : 12 → 14 px */
}
.entete-droite{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* Connecté, le bouton porte l'adresse e-mail du compte : coupée avec des points de suspension plutôt que de pousser
   l'en-tête hors de l'écran. */
.entete-droite .bouton-sobre{display:inline-block;line-height:38px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;
  background:var(--qm-bleu-marque);color:var(--qm-blanc);
  border:1px solid var(--qm-bleu-marque);border-radius:var(--qm-rayon);
  font-family:var(--qm-corps);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.bouton:hover{background:var(--qm-bleu-nuit);border-color:var(--qm-bleu-nuit)}
.bouton-sobre{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  background:var(--qm-surface);color:var(--qm-encre);
  border:1px solid var(--qm-bordure-forte);border-radius:var(--qm-rayon);
  font-family:var(--qm-corps);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;
}
.bouton-sobre:hover{background:var(--qm-fond)}

/* ---------- Pied de page ---------- */
/* Chantier A (3-17) : corps du pied à 14 px (charte : corps ≥ 14 px) ; seuls les titres en capitales espacées
   restent à 12 px (tolérance des surtitres). */
.pied{background:var(--qm-surface);border-top:1px solid var(--qm-bordure);font-family:var(--qm-corps);color:var(--qm-encre);flex-shrink:0}
.pied-inner{width:min(calc(100% - 40px),var(--qm-largeur));margin:0 auto;padding:40px 0 26px}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:26px;border-bottom:1px solid var(--qm-bordure)}
.pied h4{font-family:var(--qm-corps);font-size:14px;font-weight:600;color:var(--qm-ardoise);margin:0 0 12px} /* lot R8 (D-R8-3) */
.pied a{display:block;color:var(--qm-ardoise);font-size:14px;text-decoration:none;padding:3px 0}
.pied a:hover{color:var(--qm-encre)}
.pied a.marque{display:flex}
.pied-texte{font-size:14px;color:var(--qm-ardoise);max-width:460px;margin:10px 0 14px}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.source{font-size:14px;font-weight:600;padding:3px 9px;background:var(--qm-fond);border:1px solid var(--qm-bordure);border-radius:var(--qm-rayon);color:var(--qm-ardoise)}
.pied-bas{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-top:18px;font-size:14px;color:var(--qm-ardoise)}

@media (max-width:1400px){
  .marque-sous{display:none}
  .menu{gap:16px}
  .entete-droite .bouton-sobre{max-width:200px}
}
@media (max-width:900px){
  /* Lot AI (AH-2.3) : le menu ne disparaît plus — seules les entrées en ligne se cachent ; « Plus » devient
     « Menu » et montre toutes les entrées (et le compte une fois connecté). */
  .menu>a{display:none}
  .menu-plus{display:block}
  .menu-plus .libelle-plus{display:none}
  .menu-plus .libelle-menu{display:inline}
  .menu-plus>summary{color:var(--qm-encre);font-weight:600;border:1px solid var(--qm-bordure-forte);border-radius:var(--qm-rayon);padding:8px 14px;min-height:40px}
  .menu-plus-liste{max-width:calc(100vw - 32px)} /* ouvert vers la gauche depuis le bouton (right:0), jamais hors écran */
  .menu-plus-liste a,.menu-plus-liste .compte-mobile{display:block}
  .pied-grille{grid-template-columns:1fr}
  /* Lot AH (AH-1) : sous 900 px, la partie droite passe à la ligne et ses boutons aussi, au lieu de
     déborder de l'écran (mesuré : 537 px de large à 390 px avec « Lancer une analyse »). */
  .entete-droite{flex-wrap:wrap;max-width:100%;min-width:0}
  /* Chantier A (3-13) : UNE rangée — la marque à gauche, « Menu » puis « Se connecter » (visiteur) ou l'adresse
     (connecté, coupée) à droite. « Déconnexion » quitte l'en-tête pour « Menu » (classe compte-mobile). Le menu de
     l'adresse reste : le doublon « Mon profil / Mon abonnement » avec « Menu » est voulu (1-09, lot AI). */
  .entete-inner{column-gap:8px;position:relative}
  .menu{margin-left:auto}
  /* « Menu » n'est plus au bord droit : son panneau s'aligne sur le bord droit de l'en-tête, jamais hors écran. */
  .menu-plus{position:static}
  .menu-plus-liste{top:calc(100% + 1px)}
  .entete-droite{margin-left:0}
  .entete-droite .deconnexion{display:none}
  /* 1-16 : la place du compte est la même avant et après /me — « Menu » ne bouge pas à l'arrivée de l'adresse. */
  .entete-droite .compte>summary,.entete-droite [data-attente]{width:200px;max-width:200px}
}
/* 3-16 : à la fin de la page, « Haut de page » se pose sur ce blanc, jamais sur le texte du pied — tant que la marge
   latérale (écran − 1 200 px) / 2 est plus étroite que la pastille (44 px + 12 px), soit sous 1 320 px d'écran. */
@media (max-width:1320px){
  .pied-inner{padding-bottom:76px}
}
/* Chantier A (3-13) : à 390 px, marque + « Menu » + « Se connecter » tiennent sur une rangée (mesuré au navigateur,
   polices hébergées). La gouttière suit celle des pages (16 px sous 520 px, qm.css). */
@media (max-width:520px){
  .entete-inner,.pied-inner{width:calc(100% - 32px)}
  .marque{gap:8px}
  .entete .marque img{height:32px}
  .entete .marque-nom{font-size:17px}
  .menu-plus>summary{padding:8px 10px}
  .entete-droite .bouton-sobre{padding:0 12px}
  /* l'adresse prend la place de « Se connecter » (même largeur : pas de saut à l'arrivée de /me), complète au survol
     et dans « Menu » */
  .entete-droite .compte>summary,.entete-droite [data-attente]{width:113px;max-width:113px}
}

/* ---------- Lot AI, étape 3 : lecture des pages longues ---------- */
/* AH-4.1 : « Haut de page », bleu de la charte (jamais orange), au-dessus de la zone basse du téléphone.
   Chantier A (3-16) : une PASTILLE ronde de 44 px, la flèche seule — le libellé « Haut de page » reste le nom du bouton
   pour les lecteurs d'écran et au survol (title). Le bouton de 140 px cachait le tiers droit des actions principales
   (« Recevoir les alertes », le prix de l'accueil, les blocs de carte) à 390 px. L'en-tête est de nouveau collant
   partout (3-12) : la navigation ne dépend plus de ce bouton. */
.qm-haut-de-page{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:45;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--qm-bleu-marque);color:var(--qm-blanc);border:none;border-radius:50%;font:600 20px/1 var(--qm-corps);box-shadow:0 4px 14px rgba(15,27,45,.18);cursor:pointer;opacity:.92}
.qm-haut-de-page:hover{background:var(--qm-bleu-nuit);opacity:1}
.qm-haut-de-page:focus-visible{outline:3px solid var(--qm-bleu-nuit);outline-offset:2px;opacity:1}
.qm-haut-de-page[hidden]{display:none}
/* Texte lu par les lecteurs d'écran, invisible à l'écran (le libellé de la pastille « Haut de page »). */
.qm-lecteur-seul{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Chantier A (1-12, 3-06) : l'invitation à se connecter, UNE par page ---------- */
/* Posée par public/scripts/qmApi.js en tête du contenu quand une requête répond 401 — et seulement si la page n'a pas
   déjà sa propre invitation. Aux couleurs de la charte (fond accentué, filet orange) ; plus de bandeau ambre collé
   au-dessus de l'en-tête, qui le recouvrait à 390 px. */
.qm-invitation-connexion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 20px;padding:14px 18px;background:var(--qm-fond-accent);border:1px solid var(--qm-bordure);border-left:3px solid var(--qm-orange-signal);border-radius:var(--qm-rayon);color:var(--qm-encre);font:400 15px/1.5 var(--qm-corps)}
.qm-invitation-connexion[hidden]{display:none}
.qm-invitation-connexion p{margin:0;flex:1 1 260px}
.qm-invitation-connexion .qm-invitation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.qm-invitation-connexion .qm-invitation-lien{color:var(--qm-bleu-marque);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- Chantier A (1-10) : « Vous êtes déjà connecté » sur les pages de connexion et d'inscription ---------- */
.qm-deja-connecte p{margin:0 0 12px}
.qm-deja-connecte .qm-deja-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
/* Une ancre ne passe jamais sous l'en-tête collant (sa hauteur réelle : qmLecture.js). */
[id]{scroll-margin-top:calc(var(--qm-hauteur-entete, 68px) + 12px)}
/* AH-4.2 : sommaire d'ancres en tête des pages légales. */
.qm-sommaire-ancres{margin:0 0 24px;padding:14px 18px;border:1px solid var(--qm-bordure);border-left:3px solid var(--qm-bleu-marque);border-radius:var(--qm-rayon);background:var(--qm-fond)}
.qm-sommaire-titre{margin:0 0 6px;font:700 14px/1.4 var(--qm-corps);color:var(--qm-ardoise)} /* lot R8 (D-R8-3) */
.qm-sommaire-ancres ol{margin:0;padding-left:20px;columns:2 260px;column-gap:28px}
.qm-sommaire-ancres li{margin:2px 0;break-inside:avoid}
.qm-sommaire-ancres a{color:var(--qm-bleu-marque);text-decoration:none}
.qm-sommaire-ancres a:hover{text-decoration:underline}