/* ─────────────────────────────────────────────────────────────────────────
   L'en-tête et la signature — partagés par l'accueil et par les pages.
   Une seule source : le site doit se sentir comme une seule maison, et une
   barre recopiée à deux endroits finit toujours par diverger.
   ───────────────────────────────────────────────────────────────────────── */

/* ── La barre ── */
.barre{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 20px 0;
}
.marque{display:inline-flex;align-items:center;gap:10px;color:var(--sable)}
.marque:hover{text-decoration:none}

/* Le logo : les mêmes vagues que l'accueil, en petit. Elles bougent, donc
   elles disent « vivant » avant que le premier mot soit lu. */
.marque-vagues{display:block;width:32px;height:26px;flex:none}
.marque-vagues svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 2px 7px rgba(34,211,238,.35))}
.marque:hover .marque-vagues svg{filter:drop-shadow(0 3px 10px rgba(34,211,238,.55))}

.marque b{font-size:21px;font-weight:650;letter-spacing:-.022em;line-height:1;white-space:nowrap}
/* Le P et le « AI » portent la même couleur : la marque se lit d'un bloc. */
.marque b i{color:var(--ecume);font-style:normal}
.marque b span{color:var(--ecume);font-weight:500}

.barre-droite{display:flex;align-items:center;gap:8px;flex:none}
.marque{min-width:0}

/* ── Le menu ──
   Un bouton, un panneau. Tout ce que le site contient tient dedans, groupé :
   les régions, le projet, la maison. L'accueil reste vide, et rien n'est
   caché pour autant. */
.menu{position:relative}

/* Le bouton du menu : trois traits, pas de mot, pas de cadre.
   Une seconde pastille à côté de FR/EN alourdissait la barre ; un
   pictogramme seul la laisse respirer. Les largeurs sont décalées — elles
   rappellent les vagues de la marque, deux centimètres plus haut. Ouvert, les
   traits se rejoignent en croix : la sortie se lit sans qu'on l'explique.
   Le mot reste dans aria-label, pour qui écoute la page plutôt que la voir. */
.menu-bouton{
  position:relative; width:34px; height:34px; padding:0; flex:none;
  background:none; border:0; border-radius:50%; cursor:pointer;
  transition:background .2s var(--ease);
}
.menu-bouton:hover,.menu-bouton[aria-expanded="true"]{background:rgba(255,255,255,.07)}
.menu-bouton:focus-visible{outline:2px solid var(--ecume);outline-offset:2px}
.menu-trait{
  position:absolute; left:50%; top:50%; height:1.6px; border-radius:2px;
  background:var(--brume);
  transition:width .26s var(--ease),transform .26s var(--ease),
             opacity .16s var(--ease),background .2s var(--ease);
}
.menu-trait:nth-child(1){width:17px;transform:translate(-50%,-6.5px)}
.menu-trait:nth-child(2){width:12px;transform:translate(-50%,-.8px)}
.menu-trait:nth-child(3){width:15px;transform:translate(-50%,4.9px)}
.menu-bouton:hover .menu-trait{background:var(--sable)}
.menu-bouton[aria-expanded="true"] .menu-trait{background:var(--ecume);width:16px}
.menu-bouton[aria-expanded="true"] .menu-trait:nth-child(1){transform:translate(-50%,-.8px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] .menu-trait:nth-child(2){opacity:0;transform:translate(-50%,-.8px) scaleX(.25)}
.menu-bouton[aria-expanded="true"] .menu-trait:nth-child(3){transform:translate(-50%,-.8px) rotate(-45deg)}

.menu-panneau{
  position:absolute; top:calc(100% + 9px); right:0; z-index:30;
  width:min(268px,calc(100vw - 32px)); padding:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(9,40,54,.86);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--fil-fort); border-radius:18px;
  box-shadow:0 26px 64px rgba(0,8,14,.55);
  animation:menuEntre .2s var(--ease) both;
  max-height:min(74vh,560px); overflow-y:auto; overscroll-behavior:contain;
}
@keyframes menuEntre{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.menu-titre{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brume); opacity:.72; padding:8px 11px 4px; margin:0;
}
.menu-panneau a,.menu-panneau button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  padding:8px 11px; border-radius:11px; color:var(--sable);
  font:400 13.5px/1.35 inherit;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.menu-panneau a:hover,.menu-panneau button:hover,
.menu-panneau a:focus-visible,.menu-panneau button:focus-visible{
  background:rgba(143,227,223,.11); color:#fff; text-decoration:none; outline:none;
}
.menu-panneau.deborde{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
}
.menu-panneau.deborde.au-bout{-webkit-mask-image:none;mask-image:none}
.menu-panneau a[aria-current="page"]{background:rgba(143,227,223,.09);color:var(--ecume)}
.menu-panneau svg{width:13px;height:13px;flex:none;opacity:.55}
.menu-sep{height:1px;background:var(--fil);margin:6px 11px}

/* ── La signature ──
   La marque Kanaky Tech ferme la page, centrée, sous les liens. Elle est
   posée en encre claire sur transparent : le fichier d'origine est une
   marque noire sur fond blanc, qui perçait la palette et s'écrasait en
   bouillie dès qu'on la réduisait. */
.signature{display:flex;justify-content:center;padding:14px 0 4px}
.signature a{display:block;line-height:0;opacity:.5;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.signature a:hover{opacity:.9;transform:translateY(-1px)}
.signature img{width:38px;height:38px;display:block}

@media (max-width:560px){
  .barre{padding:13px 15px 0;gap:10px}
  .marque b{font-size:18.5px}
  .marque-vagues{width:29px;height:24px}
  .menu-panneau{width:min(268px,calc(100vw - 24px))}
}
@media (prefers-reduced-motion:reduce){
  .menu-panneau{animation:none}
}

/* ── Le sélecteur de langue ──
   Sur l'accueil ce sont des boutons qui basculent la page ; sur une page de
   contenu ce sont des liens vers la jumelle, qui vit à une autre adresse.
   Même apparence, deux mécaniques : le visiteur n'a pas à savoir laquelle. */
.langues{display:flex;gap:2px;padding:3px;border:1px solid var(--fil);border-radius:999px;background:rgba(0,0,0,.14)}
.langues button,.langues a{
  display:block; background:none; border:0; cursor:pointer; text-decoration:none;
  color:var(--brume); font:600 11.5px/1 inherit; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px;
  transition:color var(--t-court,.18s) var(--ease),background .18s var(--ease);
}
.langues button.on,.langues a.on{color:#06222e;background:var(--ecume)}
.langues button:not(.on):hover,.langues a:not(.on):hover{color:var(--sable);text-decoration:none}

/* Sur un écran étroit tout rétrécit, mais le mot « Menu » reste : un chevron
   seul ne dit pas ce qu'il ouvre, et ce site s'adresse d'abord à des gens qui
   arrivent par téléphone. */
@media (max-width:400px){
  .marque{gap:8px}
  .marque-vagues{width:26px;height:21px}
  .marque b{font-size:17px}
  .menu-bouton{width:31px;height:31px}
  .langues button,.langues a{padding:5px 8px;font-size:11px}
}