/* ===========================================================================
   MOBY 2026 — COQUILLE DU SITE : bandeau, en-tete, navigation, pied de page.
   Reproduit la maquette de reference (Codex/2026-10-05/je/outputs/index.html).
   Chargee par `templates/base.html.twig` sur TOUTES les pages.
   =========================================================================== */

.topline {
  height: 5px;
  background: linear-gradient(90deg, #ff9a50, var(--orange), #ee4b19);
}

/* ---------------------------------------------------------------------------
   EN-TETE
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffffed;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #f2ece6;
}

.nav {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Marque : la maquette reserve un bloc de 112x60 pour le logo, rogne en haut. */
.brand {
  display: flex;
  align-items: center;
  gap: 0;
  width: 112px;
  height: 60px;
  overflow: hidden;
  flex: none;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1.4px;
}
.brand img {
  display: block;
  width: 108px;
  height: 56px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.links {
  display: flex;
  align-items: center;
  gap: 31px;
  color: var(--nav-ink);
  font-size: 14px;
  font-weight: 600;
}
.links a { padding: 10px 2px; }
.links a:hover { color: var(--orange); }
.links a[aria-current="page"] { color: var(--orange); }

/* Bouton de menu telephone.
   ECART ASSUME par rapport a la maquette (documente dans docs/decisions.md) :
   la reference masque purement et simplement la navigation sous 620px, ce qui
   rend "Devenir partenaire" inatteignable au telephone. La regle 7 du CLAUDE.md
   interdit de masquer un contenu essentiel sur mobile : on garde donc un bouton
   de menu, invisible sur ordinateur. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-panel { display: none; }
.nav-panel[data-open="true"] {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.nav-panel a {
  padding: 15px 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--nav-ink);
  border-bottom: 1px solid var(--line);
}
.nav-panel a:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------------------------- */
/* `background`/`color` explicites : sur les pages pas encore refondues, `app.css`
   habille le selecteur d'element `footer` en fond sombre. Sans ces deux lignes, le
   nouveau pied de page y devient illisible (contraste AA, regle 10). */
.footer {
  padding: 45px 0 28px;
  background: var(--white);
  color: var(--ink);
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.foot-links {
  display: flex;
  gap: 23px;
  font-size: 13px;
  color: var(--ink-60);
}
.foot-links a:hover { color: var(--orange); }
.copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: 12px;
  color: var(--ink-40);
  padding-top: 20px;
}
/* Liens legaux ajoutes a la maquette (regles 12.1 et 17B.3). */
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot-legal a { color: var(--ink-40); }
.foot-legal a:hover { color: var(--orange); text-decoration: underline; }

@media (max-width: 900px) {
  .links { gap: 17px; }
}

@media (max-width: 620px) {
  /* Le bouton de menu ajoute (voir plus haut) prend 44px : l'espacement de la
     barre se resserre pour que l'appel a l'action reste sur une seule ligne,
     comme dans la maquette. */
  .nav { height: 68px; gap: var(--sp-2); }
  .brand { width: 96px; height: 54px; }
  .brand img { width: 96px; height: 50px; }
  .links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav > .button {
    min-height: 41px;
    padding: 0 13px;
    font-size: 12px;
    white-space: nowrap;
    gap: 6px;
  }
  .foot-top { align-items: flex-start; flex-direction: column; }
  .foot-links { flex-wrap: wrap; gap: 15px; }
}

/* TRES PETITS ECRANS (iPhone SE 1re generation et assimiles, 320px).
   Trouve en mesurant le 2026-10-05 : la barre du haut debordait de 52px et le site
   defilait horizontalement sur TOUTES les pages (regle 7 — aucun defilement horizontal,
   a aucune largeur). La maquette ne le montre pas : elle tient tout juste a 320px parce
   qu'elle n'a PAS de bouton de menu. C'est donc notre ajout (44px, taille tactile
   minimale non negociable) qui ne rentre plus a cote de l'appel a l'action.

   Ce qui cede ici : la taille du logo et celle du bouton, jamais le texte de l'appel a
   l'action (repris mot pour mot) ni la cible tactile du menu. La fleche decorative,
   deja `aria-hidden`, disparait : elle n'apporte rien et coute 16px.
   Mesure apres correction : 274px utilises pour 286px disponibles. */
@media (max-width: 400px) {
  .nav { gap: 6px; }
  .brand { width: 72px; height: 40px; }
  .brand img { width: 72px; height: 38px; }
  .nav > .button { padding: 0 10px; font-size: 11px; }
  .nav > .button span { display: none; }
}