/* Le bandeau commun au guide, à Solutions et au studio (04/11/2026).
   La mise en page du guide, le logo animé du studio, et les mêmes mesures partout :
   d'une page à l'autre, le logo, le menu et les boutons ne bougent pas d'un pixel.
   Toutes les règles sont préfixées « bandeau- » et ses couleurs lui sont propres,
   pour ne dépendre d'aucune page. Le comportement est dans bandeau.js. */
@property --bandeau-tour{syntax:"<angle>";inherits:false;initial-value:0deg}

.bandeau{
  --b-texte:#080a12;--b-gris:#6b7282;--b-pale:#9aa3b2;--b-trait:#e7e9ee;--b-trait-fort:#d8dce6;
  --b-fond-2:#f2f3f6;--b-voile:rgba(255,255,255,.74);--b-cap:#5968ff;--b-elan:#46e1c3;--b-lueur:rgba(89,104,255,.24);
  --b-titre:"Space Grotesk",system-ui,sans-serif;--b-sans:"Inter",system-ui,sans-serif;--b-mono:"JetBrains Mono",ui-monospace,monospace;
  --b-ease:cubic-bezier(.16,1,.3,1);
  position:relative;z-index:50;box-sizing:border-box;display:flex;align-items:center;gap:12px;
  height:72px;padding:0 clamp(16px,3.4vw,40px);
  font-family:var(--b-sans);font-size:14px;line-height:1.4;color:var(--b-texte);text-align:left;
}
/* Les remises à zéro sont dans :where(), sans poids : elles ne passent jamais devant les règles du bandeau */
:where(.bandeau) *,:where(.bandeau) *::before,:where(.bandeau) *::after{box-sizing:border-box}
:where(.bandeau) a{color:inherit;text-decoration:none}
:where(.bandeau) button{font:inherit;color:inherit;margin:0}
:where(.bandeau) p{margin:0}
:where(.bandeau) :focus-visible{outline:2px solid var(--b-cap);outline-offset:2px}

/* Sur les pages du site, il reste en haut quand on descend, posé sur un voile blanc ;
   un trait apparaît dessous dès qu'on a quitté le haut de la page. */
.bandeau-site{position:sticky;top:0;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.bandeau-site.est-descendu{border-bottom-color:var(--b-trait)}

/* Le logo animé. Le dessin a 13 unités de marge à gauche : on la reprend, pour que l'œil touche la marge de la page. */
.bandeau-marque{display:flex;align-items:center;flex:none;border-radius:12px;margin-left:-6px}
.bandeau-marque img{display:block;width:170px;height:44px;max-width:none}

.bandeau-menu{display:flex;gap:2px;margin-left:28px;margin-right:auto;min-width:0}
.bandeau-menu a{font-size:14px;color:var(--b-gris);padding:8px 12px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.bandeau-menu a:hover,.bandeau-menu a:focus-visible,.bandeau-menu a[aria-current]{color:var(--b-texte);background:var(--b-fond-2)}
.bandeau-menu a:focus-visible{outline-offset:0}

/* Les boutons vont à droite ; le menu garde sa place à 28 px du logo (les deux marges « auto » se partagent le vide) */
.bandeau-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.bandeau-lien{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:999px;border:1px solid transparent;background:none;cursor:pointer;
  font-family:var(--b-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--b-gris);white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s}
.bandeau-lien:hover,.bandeau-lien[aria-expanded="true"]{color:var(--b-texte);border-color:var(--b-trait-fort);background:var(--b-voile)}
.bandeau-lien svg{width:15px;height:15px;flex:none}
.bandeau-court{display:none}

/* Le lien phare (« Explorer le site » sur le guide, « Contact » sur le site) : un reflet traverse
   le texte de temps en temps ; au survol, un contour dégradé tourne et la flèche s'envole puis revient. */
.bandeau-phare{position:relative;isolation:isolate}
.bandeau-phare::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--bandeau-tour),var(--b-cap),var(--b-elan) 22%,transparent 38%,transparent 62%,var(--b-elan) 80%,var(--b-cap));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s}
.bandeau-phare:hover,.bandeau-phare:focus-visible{border-color:transparent;box-shadow:0 10px 28px -14px var(--b-lueur);outline:none}
.bandeau-phare:hover::before,.bandeau-phare:focus-visible::before{opacity:1;animation:bandeauTour 2.6s linear infinite}
.bandeau-reflet{background:linear-gradient(100deg,var(--b-gris) 0 34%,var(--b-cap) 43%,var(--b-elan) 50%,var(--b-cap) 57%,var(--b-gris) 66% 100%);
  background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bandeauReflet 5s ease-in-out 1.6s infinite}
.bandeau-phare:hover .bandeau-reflet,.bandeau-phare:focus-visible .bandeau-reflet{animation:none;background:none;color:var(--b-texte)}
.bandeau-fleche{position:relative;display:inline-block;width:1.1em;height:1.1em;overflow:hidden;line-height:1}
.bandeau-fleche i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;transition:transform .4s var(--b-ease)}
.bandeau-fleche i + i{transform:translate(-120%,120%);color:var(--b-cap)}
.bandeau-phare:hover .bandeau-fleche i:first-child,.bandeau-phare:focus-visible .bandeau-fleche i:first-child{transform:translate(120%,-120%)}
.bandeau-phare:hover .bandeau-fleche i + i,.bandeau-phare:focus-visible .bandeau-fleche i + i{transform:none}

/* Les volets : « Se connecter » (les espaces des services) et « Menu » (les entrées du site, sous 1024 px).
   « Se connecter » a 330 px de large (300 avant le 04/11/2026) : « vos projets avec le studio », le sous-titre de
   Mon espace, y tient sur une ligne à côté de son étiquette. */
.bandeau-pli{position:relative}
.bandeau-plus{display:none}
.bandeau-volet{position:absolute;right:0;top:calc(100% + 8px);width:330px;padding:8px;border-radius:18px;background:#fff;
  border:1px solid var(--b-trait);box-shadow:0 24px 60px -30px rgba(8,10,18,.28);transform-origin:top right;animation:bandeauVolet .22s var(--b-ease)}
.bandeau-volet[hidden]{display:none}
.bandeau-plus .bandeau-volet{width:240px}
.bandeau-titre{font-family:var(--b-mono);font-size:10px;letter-spacing:.16em;color:var(--b-pale);padding:8px 10px 6px}
.bandeau-ligne{display:block;padding:11px 12px;border-radius:12px;font-family:var(--b-titre);font-size:16px;letter-spacing:-.01em}
.bandeau-ligne:hover,.bandeau-ligne:focus-visible{background:var(--b-fond-2);outline:none}
.bandeau-ligne[aria-current]{color:var(--b-cap)}
.bandeau-ligne-sep{margin-top:4px;border-top:1px solid var(--b-trait);border-radius:0 0 12px 12px}
.bandeau-service{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;transition:background .15s}
.bandeau-service:hover,.bandeau-service:focus-visible{background:var(--b-fond-2);outline:none}
.bandeau-service strong{display:block;font-family:var(--b-titre);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.bandeau-service small{display:block;font-family:var(--b-mono);font-size:10.5px;color:var(--b-pale)}
.bandeau-icone{display:block;width:34px;height:34px;border-radius:10px;overflow:hidden}
.bandeau-icone svg{display:block;width:100%;height:100%}
/* Mon espace, annoncé avant son ouverture : une ligne qui ne mène nulle part, donc sans survol, et son symbole en gris */
.bandeau-a-venir{cursor:default}
.bandeau-a-venir.bandeau-service:hover{background:none}
.bandeau-a-venir .bandeau-icone{background:var(--b-fond-2);color:var(--b-gris)}
.bandeau-va{font-size:13px;color:var(--b-pale)}
.bandeau-etiquette{font-family:var(--b-mono);font-size:9px;letter-spacing:.12em;padding:3px 7px;border-radius:999px;border:1px solid var(--b-trait-fort);color:var(--b-gris)}
.bandeau-pied{padding:8px 10px 4px;font-size:11px;line-height:1.45;color:var(--b-pale)}
.bandeau-pied a{color:var(--b-gris);text-decoration:underline;text-underline-offset:2px}

@keyframes bandeauVolet{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes bandeauReflet{0%,42%{background-position:100% 0}100%{background-position:0 0}}
@keyframes bandeauTour{to{--bandeau-tour:360deg}}

/* Sous 1024 px, le menu tient dans le volet « Menu ». Avec Arcade (04/11/2026), l'en-tête complet du site demande
   902 px plus ses marges, soit 972 px à 1024 px : il reste 38 px de jeu, barre de défilement comprise. */
@media (max-width:1023px){
  .bandeau-menu{display:none}
  .bandeau-plus{display:block}
}
/* Sur téléphone : un bandeau plus bas, des boutons réduits à leur icône ou à un mot */
@media (max-width:640px){
  .bandeau{height:62px;padding:0 16px;gap:8px}
  .bandeau-actions{gap:4px}
  .bandeau-marque img{width:139px;height:36px}
  .bandeau-marque{margin-left:-5px}
  .bandeau-lien{height:34px;padding:0 10px}
  .bandeau-long{display:none}
  .bandeau-court{display:inline}
  .bandeau-pli{position:static}
  .bandeau-volet,.bandeau-plus .bandeau-volet{left:12px;right:12px;width:auto;top:calc(100% - 4px)}
}
/* Très petit écran : sur le site, « Contact » passe dans le volet « Menu », où il figure déjà */
@media (max-width:359px){
  .bandeau-site .bandeau-phare{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bandeau-reflet{animation:none;background:none;color:var(--b-gris)}
  .bandeau-phare:hover::before,.bandeau-phare:focus-visible::before{animation:none}
  .bandeau-volet{animation:none}
}