/* En-tete et pied v6, pour les pages restees en v5.
 *
 * Pourquoi ce fichier. Les pages v5 chargent styles.css, qui declare `header`
 * et `footer` NUS. Le markup v6 pose dessus en heriterait : `header {
 * position:absolute }` casserait l'en-tete collant. Les regles ci-dessous
 * portent donc la classe (`header.fp-top`, 0,1,1 contre 0,0,1) et ce fichier se
 * charge APRES styles.css.
 *
 * Aucune definition propre ici : le CSS vient de fp_entete.py et de la home, a
 * l'identique, MEDIA QUERIES COMPRISES. Une troisieme copie de l'en-tete serait
 * une troisieme chose a maintenir.
 */

header.fp-top{position:sticky;top:0;z-index:20;background:var(--ds-bg);border-bottom:1px solid var(--ds-border)}
.fp-top__in{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);
  min-height:64px;max-width:var(--ds-container);margin-inline:auto;padding-inline:var(--ds-gutter)}
@media (min-width:768px){.fp-top__in{padding-inline:var(--ds-gutter-wide)}}
.fp-brand{display:flex;align-items:center;gap:var(--ds-space-2);text-decoration:none;color:var(--ds-text)}
.fp-brand svg{width:24px;height:24px;display:block;color:var(--ds-link)}
.fp-brand span{font-family:var(--ds-font-heading);font-size:var(--ds-text-h4);font-weight:var(--ds-weight-medium)}
.fp-nav{display:flex;align-items:center;gap:var(--ds-space-5)}
/* Le :not(.ds-btn) est obligatoire : sans lui, cette regle ecrase la couleur de
   texte du bouton principal, qui tombait a 3,87:1 sur son propre fond. */
.fp-nav a:not(.ds-btn){font-family:var(--ds-font-mono);font-size:var(--ds-text-mini);
  letter-spacing:var(--ds-tracking-label);text-transform:uppercase;
  color:var(--ds-text-secondary);text-decoration:none}
.fp-nav a:not(.ds-btn):hover{color:var(--ds-text)}
.fp-nav__links{display:flex;align-items:center;gap:var(--ds-space-5)}
.fp-nav__lang{border:1px solid var(--ds-border);border-radius:var(--ds-radius-pill);
  padding:5px 11px;line-height:1}
.fp-nav__lang:hover{border-color:var(--ds-text)}
.fp-nav__toggle{display:none;background:none;border:0;padding:0;cursor:pointer;color:var(--ds-text)}
/* Le parent est obligatoire dans ces trois selecteurs. Sans lui la regle de
   dimension .fp-nav__toggle svg (0,1,1) l'emporte sur .fp-nav__ico-close (0,1,0)
   et repose display:block : les barres ET la croix s'affichaient cote a cote,
   menu ferme. Vu a la capture, pas au code. */
.fp-nav__toggle .fp-nav__ico-close{display:none}
.fp-nav[data-open="true"] .fp-nav__ico-open{display:none}
.fp-nav[data-open="true"] .fp-nav__ico-close{display:block}
@media (max-width:767px){
  .fp-nav__toggle{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-inline-end:-8px}
  .fp-nav__toggle svg{width:20px;height:20px}
  .fp-nav__links{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--ds-bg);
    border-bottom:1px solid var(--ds-border);box-shadow:var(--ds-shadow-overlay);
    padding:var(--ds-space-2) var(--ds-gutter) var(--ds-space-4)}
  .fp-nav[data-open="true"] .fp-nav__links{display:flex}
  .fp-nav__links > a{padding-block:var(--ds-space-3)}
  /* Specificite volontaire : sans le parent, la regle de rang au-dessus gagne
     (0,1,1 contre 0,1,0) et gonfle la pastille en rond de 80px. */
  .fp-nav__links > .fp-nav__lang{margin-top:var(--ds-space-2);
    padding:9px 14px;align-self:flex-start}
}

/* Pied */
footer.fp-foot{background:var(--ds-bg-alt);border-top:1px solid var(--ds-border);
  padding-block:var(--ds-space-12) var(--ds-space-8)}
.fp-foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-8)}
@media (min-width:980px){.fp-foot__cols{grid-template-columns:1.4fr repeat(4,1fr)}}
.fp-foot__col h4{font-family:var(--ds-font-mono);font-size:var(--ds-text-micro);
  letter-spacing:var(--ds-tracking-label);text-transform:uppercase;color:var(--ds-text-muted);
  font-weight:var(--ds-weight-regular);margin-bottom:var(--ds-space-3)}
.fp-foot__col a{display:block;font-size:var(--ds-text-ui);color:var(--ds-text-secondary);
  text-decoration:none;padding-block:var(--ds-space-1)}
.fp-foot__col a:hover{color:var(--ds-text)}
.fp-foot__bottom{margin-top:var(--ds-space-10);padding-top:var(--ds-space-4);
  border-top:1px solid var(--ds-border);display:flex;flex-wrap:wrap;gap:var(--ds-space-4);
  justify-content:space-between;font-size:var(--ds-text-caption);color:var(--ds-text-muted)}

/* Neutralise ce que styles.css impose aux balises nues et qui deborderait sur
   le markup v6. Cible la classe, jamais la balise. */
header.fp-top{position:sticky;top:0;left:auto;right:auto;backdrop-filter:none;
  -webkit-backdrop-filter:none}
footer.fp-foot{border-top:1px solid var(--ds-border);padding:0}
footer.fp-foot .ds-container{padding-block:var(--ds-space-12) var(--ds-space-8)}
header.fp-top .fp-brand span{font-family:var(--ds-font-heading);letter-spacing:0}

/* styles.css pose un `* { padding:0 }`. Dans la couche fp-v5 il bat `.ds-container`
   de la couche ds-layout, et le pied se collait au bord gauche : logo a 0 px la
   ou la home le pose a 168 px. Les regles ci-dessous sont HORS COUCHE, donc
   au-dessus de tout, et ne visent que le pied. */
footer.fp-foot .ds-container{max-width:var(--ds-container);margin-inline:auto;
  padding-inline:var(--ds-gutter)}
@media (min-width:768px){footer.fp-foot .ds-container{padding-inline:var(--ds-gutter-wide)}}