/* ==========================================================================
   ETALL — Mise en page : navbar, menu déroulant, pied de page
   ========================================================================== */

/* --- Barre de navigation -------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--plan-navbar);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow var(--transition-douce), background-color var(--transition-douce);
}

.navbar[data-defile="true"] {
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--ombre-carte);
}

/* La navbar est fixe : on décale le contenu de la page d'autant */
body { padding-top: var(--hauteur-navbar); }

.navbar__interieur {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  height: var(--hauteur-navbar);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* La barre est plus large que le texte des pages. Deux raisons : le menu à
   cinq entrées plus les deux logos ne tenaient plus dans 1200 px — il ne
   restait que 4 px de marge, avant même d'ajouter le logo ECL — et sur un
   grand écran cette largeur supplémentaire est de la place perdue. Le texte
   des pages, lui, reste à 1200 px : au-delà, les lignes deviennent trop
   longues à lire. */
@media (min-width: 1200px) {
  .navbar__interieur { max-width: 1400px; }
}

/* --- Logo + nom de l'école ------------------------------------------------ */

.marque {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-right: auto;
  text-decoration: none;
  color: var(--bleu-profond);
}

.marque__sceau {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: transform var(--transition-douce);
}

.marque:hover .marque__sceau { transform: rotate(-8deg) scale(1.06); }

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.marque__nom {
  font-size: 1rem;
  font-weight: var(--graisse-forte);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* En dessous de 380 px, on garde le sceau seul pour ne rien faire déborder */
@media (max-width: 379px) {
  .marque__texte { display: none; }
}

@media (min-width: 1200px) {
  .marque__sceau { width: 52px; height: 52px; }
  .marque__nom { font-size: 1.0625rem; }
}

/* --- Menu principal ------------------------------------------------------- */

.menu { display: none; }

@media (min-width: 1200px) {
  .menu { display: block; }

  .menu__liste {
    display: flex;
    align-items: center;
    gap: var(--e-1);
  }
}

.menu__item { position: relative; }

.menu__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--rayon-sm);
  color: var(--encre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-rapide), background-color var(--transition-rapide);
}

.menu__lien:hover { color: var(--bleu-primaire); }

/* Soulignement qui glisse depuis la gauche (chapitre 7) */
.menu__lien::after {
  content: "";
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--bleu-primaire);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-douce);
}

.menu__lien:hover::after,
.menu__lien[aria-current="page"]::after { transform: scaleX(1); }

.menu__lien[aria-current="page"] {
  color: var(--bleu-primaire);
  font-weight: var(--graisse-forte);
}

svg.menu__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--transition-douce);
}

/* Six entrées de menu (avec « Nos Projets ») plus les boutons de langue ne
   tiennent pas entre 1200 et 1350 px avec l'espacement normal : en allemand,
   le dernier bouton de langue sortait de l'écran. Sur cette plage seulement,
   les liens se resserrent. */
@media (min-width: 1200px) and (max-width: 1349px) {
  .menu__lien { padding-inline: var(--e-2); }
  .menu__lien::after { left: var(--e-2); right: var(--e-2); }
  .navbar__interieur { gap: var(--e-2); }
  .marque__sceau { width: 44px; height: 44px; }
  .bouton.navbar__action { padding-inline: var(--e-3); }
}

.menu__lien[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

/* --- Panneau déroulant « Nos services » ---------------------------------- */

.deroulant {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 288px;
  padding: var(--e-2);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-levee);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition: opacity var(--transition-douce),
              transform var(--transition-douce),
              visibility var(--transition-douce);
}

.menu__item[data-ouvert="true"] .deroulant {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Zone tampon invisible : évite que le panneau se referme entre le lien
   et le panneau quand on descend la souris. */
.deroulant::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.deroulant__lien {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--rayon-sm);
  color: var(--encre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  transition: background-color var(--transition-rapide),
              color var(--transition-rapide),
              padding-left var(--transition-rapide);
}

.deroulant__lien:hover,
.deroulant__lien:focus-visible {
  background: var(--bleu-brume);
  color: var(--bleu-primaire);
  padding-left: var(--e-4);
}

.deroulant__lien[aria-current="page"] {
  background: var(--bleu-clair);
  color: var(--bleu-profond);
  font-weight: var(--graisse-forte);
}

.deroulant__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--rayon-sm);
  background: var(--bleu-clair);
  color: var(--bleu-primaire);
}
.deroulant__icone svg { width: 19px; height: 19px; }

/* --- Bouton WhatsApp de la navbar ---------------------------------------- */

/* Le bouton porte deux classes : .bouton et .navbar__action. Or .bouton
   déclare « display: inline-flex » dans components.css, chargé APRÈS ce
   fichier. À poids égal, c'est la dernière règle lue qui gagne : écrite
   « .navbar__action », la règle ci-dessous était donc ignorée, et le bouton
   restait affiché sur téléphone — où il poussait le bouton du menu hors de
   l'écran. En nommant les deux classes, cette règle pèse plus lourd et ne
   dépend plus de l'ordre des fichiers. */
.bouton.navbar__action { display: none; }

@media (min-width: 700px) {
  .bouton.navbar__action { display: inline-flex; }
}

/* Tant que le menu horizontal n'est pas affiché, le bouton reste compact */
@media (max-width: 1199px) {
  .navbar__action { padding-inline: var(--e-4); font-size: var(--t-sm); }
}

/* Le libellé complet « Nous écrire sur WhatsApp » (règle 5) n'apparaît qu'à
   partir de 1400 px : avec cinq entrées de menu, c'est la largeur à partir
   de laquelle il tient sans serrer le reste. En dessous, le bouton affiche
   « Nous contacter » — son libellé complet reste annoncé aux lecteurs
   d'écran par aria-label. */
.navbar__action .action-long { display: none; }

@media (min-width: 1400px) {
  .navbar__action .action-long { display: inline; }
  .navbar__action .action-court { display: none; }
}

/* --- Bouton hamburger ----------------------------------------------------- */

.hamburger {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--rayon-sm);
  background: var(--bleu-clair);
  color: var(--bleu-profond);
  transition: background-color var(--transition-rapide);
}

.hamburger:hover { background: var(--bordure); }

@media (min-width: 1200px) { .hamburger { display: none; } }

.hamburger__barres {
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color var(--transition-rapide);
}

.hamburger__barres::before,
.hamburger__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition-douce), top var(--transition-douce);
}

.hamburger__barres::before { top: -7px; }
.hamburger__barres::after  { top: 7px; }

.hamburger[aria-expanded="true"] .hamburger__barres { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__barres::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__barres::after  { top: 0; transform: rotate(-45deg); }

/* --- Menu mobile ---------------------------------------------------------- */

/* Hauteur du menu mobile : le piège des navigateurs de téléphone.
   Ancré par « bottom: 0 », un élément fixe vise le bas de l'écran BARRE
   D'ADRESSE MASQUÉE. Tant que cette barre est affichée — c'est-à-dire la
   plupart du temps — le fond du menu se retrouve dessous, hors de vue :
   on ne peut plus atteindre les dernières entrées, donc plus accéder aux
   pages correspondantes. En paysage, le téléphone masque sa barre, et le
   menu redevient complet : d'où l'impression qu'il faut tourner l'écran.
   L'unité dvh, elle, suit la hauteur RÉELLEMENT visible. La ligne en vh
   au-dessus sert de repli pour les navigateurs plus anciens. */
.menu-mobile {
  position: fixed;
  top: var(--hauteur-navbar);
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(100vh - var(--hauteur-navbar));
  height: calc(100dvh - var(--hauteur-navbar));
  z-index: calc(var(--plan-navbar) - 1);
  overflow-y: auto;
  /* Le défilement s'arrête au bout du menu au lieu d'entraîner la page */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e-4) var(--marge-laterale) calc(var(--e-8) + env(safe-area-inset-bottom));
  background: var(--blanc);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--transition-douce),
              transform var(--transition-douce),
              visibility var(--transition-douce);
}

.menu-mobile[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1200px) { .menu-mobile { display: none; } }

.menu-mobile__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: 56px;
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--bordure);
  color: var(--encre);
  font-size: var(--t-md);
  font-weight: var(--graisse-moyenne);
  text-align: left;
  text-decoration: none;
}

.menu-mobile__lien[aria-current="page"] {
  color: var(--bleu-primaire);
  font-weight: var(--graisse-forte);
}

.menu-mobile__lien .menu__chevron { width: 18px; height: 18px; color: var(--bleu-primaire); }
.menu-mobile__lien[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

/* Sous-panneau : il descend en dépliant sa hauteur */
.menu-mobile__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-douce);
}

.menu-mobile__panneau[data-ouvert="true"] { grid-template-rows: 1fr; }

.menu-mobile__panneau > div { overflow: hidden; }

.menu-mobile__sous-lien {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 52px;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  color: var(--encre-douce);
  font-size: var(--t-base);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  border-bottom: 1px solid var(--bleu-brume);
}

.menu-mobile__sous-lien[aria-current="page"] { color: var(--bleu-primaire); }

.menu-mobile__action { margin-top: var(--e-6); }
.menu-mobile__action .bouton { width: 100%; }

/* --- Pied de page --------------------------------------------------------- */

.pied {
  background: linear-gradient(160deg, var(--bleu-profond) 0%, var(--bleu-nuit) 100%);
  color: rgba(255, 255, 255, .82);
}

.pied__haut {
  display: grid;
  gap: var(--e-7);
  padding-block: var(--e-8) var(--e-7);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .pied__haut { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 900px) {
  .pied__haut { grid-template-columns: 1.6fr 1fr 1.2fr; }
}

.pied__marque {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.pied__sceau {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: contain;
  /* Le sceau est bleu : sur fond bleu foncé, on le passe en blanc */
  filter: brightness(0) invert(1);
}

.pied__nom {
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  color: var(--blanc);
  line-height: 1.2;
}

.pied__accroche {
  max-width: 42ch;
  font-size: var(--t-sm);
  line-height: 1.6;
}

.pied__titre {
  margin-bottom: var(--e-4);
  font-size: var(--t-sm);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blanc);
}

.pied__liens li + li { margin-top: var(--e-1); }

.pied__lien {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--transition-rapide), transform var(--transition-rapide);
}

.pied__lien:hover {
  color: var(--blanc);
  transform: translateX(4px);
}

.pied__coordonnees li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding-block: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.pied__coordonnees svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: rgba(255, 255, 255, .55);
}

/* --- Réseaux sociaux ------------------------------------------------------ */

.reseaux {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.reseau {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--blanc);
  transition: background-color var(--transition-rapide),
              transform var(--transition-rapide);
}

.reseau svg { width: 21px; height: 21px; }

.reseau:hover {
  background: var(--blanc);
  color: var(--bleu-profond);
  transform: translateY(-3px);
}

/* En attendant de recevoir les adresses des comptes */
.reseau[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Boutons de langue ----------------------------------------------------
   Deux lettres, une pastille par langue proposée. Ils apparaissent à partir
   de 1200 px, c'est-à-dire exactement quand le menu complet remplace le
   bouton hamburger. En dessous, les langues sont dans le menu déroulant. Le
   seuil doit rester collé à celui du menu : à 1300 px, il existait une bande
   de largeurs où ni l'un ni l'autre ne les affichait.

   Le rembourrage horizontal est serré exprès. Avec trois langues, la barre
   porte deux pastilles au lieu d'une, et à 1200 px la place restante se
   compte en dizaines de pixels. */
.bascule-langue {
  display: none;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: var(--e-2) var(--e-2);
  border-radius: var(--rayon-pilule);
  color: var(--encre);
  font-size: var(--t-sm);
  font-weight: var(--graisse-forte);
  text-decoration: none;
  letter-spacing: .02em;
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}

/* La pastille de la langue courante n'existe pas : on ne propose que les
   autres. Une bordure discrète sépare donc simplement les deux voisines. */
.bascule-langue + .bascule-langue { margin-left: 2px; }

.bascule-langue svg { width: 18px; height: 18px; color: var(--bleu-primaire); }
.bascule-langue:hover { background: var(--bleu-clair); color: var(--bleu-profond); }

@media (min-width: 1200px) { .bascule-langue { display: inline-flex; } }

/* --- Partenaires ----------------------------------------------------------
   Bandeau en bas de page, à la place habituelle des logos de partenaires.
   Le fond du pied est bleu foncé : le logo est posé sur une pastille claire
   pour rester lisible, comme le font les sites qui affichent des logos
   fournis par des tiers. */
.partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3) var(--e-5);
  padding-block: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.partenaires__mention {
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.partenaire {
  display: grid;
  place-items: center;
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  border-radius: var(--rayon-md);
  transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.partenaire:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.partenaire img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.pied__bas {
  /* Réserve la place de l'icône WhatsApp flottante : elle ne doit
     recouvrir aucun contenu, même tout en bas de page (chapitre 8). */
  padding-bottom: calc(var(--e-5) + 76px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .62);
}