/*
 * L'en-tête et le pied de page du site, pour toutes les pages sauf la landing.
 *
 * Ces règles vivaient dans le <style> intégré de your-journey.html, donc sur
 * une seule page : les pages produit, contact et légales portaient un en-tête
 * réduit et un pied de page d'une ligne. On les a sorties ici pour que le
 * chrome soit le même partout ; le balisage correspondant est écrit une seule
 * fois lui aussi, dans js/site-chrome.js.
 *
 * Les variables (--navy, --cyan, --nav-h…) viennent de la page : du <style>
 * intégré sur your-journey et sur la landing, de css/legal.css ailleurs. Elles
 * portent les mêmes valeurs des deux côtés.
 *
 * `body > header` et non `header` : les pages produit ouvrent leur hero avec un
 * <header class="product-hero"> à l'intérieur de <main>. Un sélecteur nu lui
 * collait le fond navy, la position collante et le z-index de la barre de
 * navigation — et le sous-menu produits passait dessous.
 */

/* ————— en-tête ————— */


/* ---------------------------------------------------------------- bandeau
 * « Plateforme en construction », collé au-dessus du menu.
 *
 * Construit par js/site-chrome.js sur toutes les pages qui portent l'en-tête
 * partagé — donc partout sauf la page d'accueil publicitaire, qui a le sien.
 *
 * Navy plus sombre que le menu, pour se lire comme une couche au-dessus et
 * non comme une deuxième barre. Le cyan y reste rare : le point radar, la
 * ligne de sommets, et le filet du bas qui balaie — celui-ci sert aussi de
 * séparation avec le menu.
 */
.build-note{position:sticky;top:0;z-index:70;overflow:hidden;color:var(--mist,#DEFBFF);
  background:linear-gradient(100deg,#05203F 0%,#0C3260 46%,#05203F 100%)}
.build-note .peaks-band{position:absolute;inset:0;width:100%;height:100%;color:var(--cyan,#1ACDD8);opacity:.16;pointer-events:none}
.build-note .wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:.62rem;padding:.5rem 0 calc(.5rem + 2px)}
.build-note p{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.014em;line-height:1.35;text-wrap:balance}

/* Point radar : un noyau plein, un cercle qui s'ouvre et s'efface. */
.build-note .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--cyan,#1ACDD8);flex:none;box-shadow:0 0 10px rgba(26,205,216,.9)}
.build-note .dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--cyan,#1ACDD8);animation:bandPing 2.8s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes bandPing{0%{transform:scale(.45);opacity:.8}70%,100%{transform:scale(2.2);opacity:0}}

/* Filet du bas : une barre de progression qui n'annonce aucun pourcentage.
   Elle dit « en cours », ce qui est exactement l'information. */
.build-note .sweep{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(26,205,216,.22);overflow:hidden}
.build-note .sweep::before{content:'';position:absolute;top:0;bottom:0;width:26%;
  background:linear-gradient(90deg,transparent,var(--cyan,#1ACDD8),transparent);animation:bandSweep 3.6s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes bandSweep{0%{left:-28%}100%{left:100%}}

@media (max-width:560px){
  .build-note .wrap{gap:.5rem;padding:.45rem 0 calc(.45rem + 2px)}
  .build-note p{font-size:.75rem}
  .build-note .peaks-band{opacity:.09}
}
@media (prefers-reduced-motion:reduce){
  .build-note .dot::after{animation:none;opacity:.3;transform:scale(1.4)}
  .build-note .sweep::before{animation:none;left:0;width:100%;opacity:.45}
}

body > header{position:sticky;top:var(--band-h,0px);z-index:60;background:rgba(10,44,84,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);--nav-h:66px;overflow:visible}
body > header:has(.lang-menu.open){z-index:100}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,2.5vw,2rem);padding:.7rem 0;min-height:var(--nav-h);min-width:0;overflow:visible}
.brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0;min-width:0}
.brand img{height:34px;width:auto}
.brand .fallback{font-weight:800;font-size:1.25rem;color:#fff;letter-spacing:.04em;display:none}
.brand .sub{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.2);padding-left:.85rem;line-height:1}
.brand .sub b{font-size:clamp(.78rem,1.8vw,.96rem);font-weight:700;color:#fff}
.brand .sub span{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);margin-top:4px}
.nav-links{display:flex;gap:clamp(.55rem,1.4vw,1.4rem);margin-left:0;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden;z-index:0}
.nav-links a{font-weight:500;font-size:clamp(.82rem,1.5vw,.95rem);color:rgba(255,255,255,.94);position:relative;padding:.2rem 0;white-space:nowrap;flex-shrink:0}
.nav-links a:hover{color:#fff}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--cyan);transition:right .3s var(--ease)}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:clamp(.35rem,1.5vw,.7rem);flex-shrink:0;margin-left:0;padding-left:0;position:relative;z-index:2}
.nav-backdrop{position:fixed;inset:0;top:calc(var(--band-h,0px) + var(--nav-h,66px));background:rgba(5,18,38,.45);z-index:54;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;pointer-events:none}
.nav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
body.nav-open{overflow:hidden}
.nav-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);flex-shrink:0}
.nav-cta .btn-ghost:hover{border-color:var(--cyan)}
.nav-cta .btn-primary{flex-shrink:0}
.lang-picker{position:relative;flex-shrink:0}
.lang-picker:has(.lang-menu.open){z-index:2}
.lang-trigger{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font);font-size:.82rem;font-weight:600;padding:.5rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:border-color .2s,background .2s;line-height:1;white-space:nowrap;min-height:40px;flex-shrink:0;max-width:100%}
.lang-trigger:hover,.lang-trigger[aria-expanded="true"]{border-color:var(--cyan);background:rgba(26,205,216,.15)}
.lang-trigger .lang-action{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.75)}
.lang-trigger .lang-current{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:#fff;min-width:0}
.lang-trigger .lang-name{overflow:hidden;text-overflow:ellipsis;max-width:7.5rem}
.lang-trigger .flag{font-size:1.05rem;line-height:1;flex-shrink:0}
.lang-trigger .chev{width:14px;height:14px;opacity:.75;transition:transform .2s var(--ease);flex-shrink:0}
.lang-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + .45rem);right:0;min-width:12.5rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:.5rem;z-index:150;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.25rem .55rem .45rem;margin:0}
.lang-opt{display:flex;align-items:center;gap:.55rem;width:100%;font-family:var(--font);font-size:.88rem;font-weight:600;padding:.55rem .7rem;border:0;border-radius:10px;background:transparent;color:var(--navy);cursor:pointer;text-align:left;transition:background .15s;min-height:44px}
.lang-opt:hover{background:var(--mist)}
.lang-opt[aria-selected="true"]{background:rgba(26,205,216,.2);color:var(--navy)}
.lang-opt .flag{font-size:1.1rem;line-height:1}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:.55rem;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);cursor:pointer;flex-direction:column;gap:5px;flex-shrink:0;transition:background .2s,border-color .2s}
.burger:hover{background:rgba(255,255,255,.12)}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Le bouton d'appel de l'en-tête : css/legal.css connaît .btn et .btn-primary,
   pas cette variante-là. */
.btn-referral{padding:.65rem .95rem;font-size:clamp(.72rem,1.05vw,.84rem);line-height:1;flex-shrink:0}
/* L'icône ne sert qu'en pastille, sous 760 px. */
.btn-referral > svg{display:none}
/*
 * Le soulignement saute partout ; la couleur, elle, se traite au cas par cas.
 * Dans le pied de page les liens héritent du blanc cassé du bloc — sans quoi
 * ils tombent au bleu par défaut du navigateur, illisible sur le navy. Dans le
 * menu, au contraire, `color: inherit` serait plus spécifique que `.nav-links a`
 * et ramènerait les entrées au navy du corps de page.
 */
body > header .brand,
body > header .nav-links a,
body > footer a{text-decoration:none}
body > header .brand,
body > footer a{color:inherit}
body > footer a:hover{color:#fff}

/* ————— pied de page ————— */

body > footer{background:var(--navy);color:rgba(255,255,255,.78);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.2rem}
/* Sans cela, un mot long — une adresse e-mail — impose sa largeur à sa
   colonne, et la grille déborde au lieu de se replier. */
.foot-grid > *{min-width:0}
.foot-col a,.foot-col p,.foot-brand p{overflow-wrap:anywhere}
.foot-brand img{height:40px;margin-bottom:1rem}
.foot-brand .fallback{font-weight:800;font-size:1.4rem;color:#fff;display:none;margin-bottom:1rem}
.foot-brand p{font-size:.92rem;max-width:32ch;font-weight:400}
.foot-col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin:0 0 1rem;font-weight:700}
.foot-col a,.foot-col p{display:block;font-size:.93rem;margin-bottom:.6rem;transition:color .2s;font-weight:400}
/* 23 px de haut au naturel : un pixel sous le minimum de 24 px. */
.foot-col > a{min-height:28px;display:flex;align-items:center;margin-bottom:.35rem}
.foot-col a:hover{color:#fff}
.socials{display:flex;gap:.7rem;margin-top:.4rem}
.socials a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;margin:0}
.socials a:hover{background:rgba(255,255,255,.12)}
.socials svg{width:16px;height:16px;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.55)}
.yj-foot-legal{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;flex-basis:100%;order:3;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.yj-foot-legal a,.yj-foot-legal button{color:rgba(255,255,255,.62);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:28px;display:inline-flex;align-items:center}
.yj-foot-legal a:hover,.yj-foot-legal button:hover{color:var(--cyan)}

/* ————— le pied de page se replie ————— */

/*
 * Quatre colonnes de 1.4fr 1fr 1fr 1.2fr tenaient sur un écran large et sur
 * aucun autre. À 390 px chacune faisait 105 px : la marque tombait sur huit
 * lignes, « Waves Horizontal » se coupait en deux, et la quatrième colonne
 * — adresse, e-mail, réseaux — passait hors écran. Trois paliers suffisent.
 */

/* Tablette : la marque prend toute la largeur, les trois autres se rangent
   deux par deux dessous. */
@media (max-width: 1080px) {
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.8rem}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{max-width:60ch}
}

/* Téléphone : une seule colonne. Un pied de page en deux colonnes de 150 px
   ne se lit pas mieux qu'en quatre. */
@media (max-width: 620px) {
  .foot-grid{grid-template-columns:1fr;gap:1.9rem}
  .foot-brand p{max-width:none}
  .foot-col h4{margin-bottom:.5rem}
  .foot-bottom{margin-top:2rem;padding-top:1.2rem;flex-direction:column;gap:.6rem;align-items:flex-start}
}

/* ————— le menu passe en tiroir quand la barre ne tient plus ————— */

@media (max-width: 1400px) {
  .nav{justify-content:flex-start}
  .nav-links{display:none;margin:0;overflow:visible}
  .nav-links.open{display:flex;position:fixed;left:0;right:0;top:calc(var(--band-h,0px) + var(--nav-h));padding:1rem 4vw 1.25rem;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg);z-index:55;max-height:calc(100dvh - var(--band-h,0px) - var(--nav-h));overflow-y:auto;-webkit-overflow-scrolling:touch;flex:unset;transition:opacity .25s,transform .25s,visibility .25s}
  .nav-links a{padding:.9rem 0;font-size:1rem;min-height:48px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .nav-cta{margin-left:auto;padding-left:0}
  .burger{display:flex}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{font-size:.88rem;padding:.65rem 1rem}
  .lang-trigger{font-size:.78rem;padding:.45rem .65rem}
  .lang-menu.open{position:fixed;top:calc(var(--band-h,0px) + var(--nav-h) + 6px);right:4vw;left:auto}
}

@media (min-width: 1401px) and (max-width: 1580px) {
  .nav-links{gap:clamp(.4rem,.9vw,.85rem)}
  .nav-links a{font-size:clamp(.74rem,1vw,.84rem)}
  .nav-cta .btn-ghost{display:none}
  .lang-trigger{font-size:.78rem;padding:.45rem .6rem}
  .lang-trigger .lang-name{max-width:4.75rem}
}

/*
 * De 761 à 960 px, la barre ne tenait plus : marque 223 px + langue 125 px +
 * CTA 405 px + hamburger 44 px pour 707 px utiles, et le hamburger sortait de
 * l'écran — le menu devenait inatteignable. On rend la place en retirant le
 * décoratif : le sous-titre de la marque, puis le nom de la langue.
 */
@media (max-width: 960px) {
  .brand .sub{display:none}
  .brand{max-width:none}
  .lang-trigger .lang-action{display:none}
  .lang-trigger .lang-name{display:none}
}

@media (max-width: 880px) {
  .brand .sub span{display:none}
  .lang-trigger .lang-action{display:none}
}

@media (max-width: 760px) {
  .nav-cta .btn-primary:not(.btn-referral) span{display:none}
  .nav-cta .btn-primary:not(.btn-referral){padding:0;border-radius:50%;width:46px;height:46px;justify-content:center}
  .nav-cta .btn-primary:not(.btn-referral) svg{margin:0}
  .nav-cta .btn-primary.btn-referral{padding:0;border-radius:50%;width:46px;height:46px;
    min-height:46px;justify-content:center;flex-shrink:0}
  .nav-cta .btn-primary.btn-referral span{display:none}
  .nav-cta .btn-primary.btn-referral > svg{display:block;margin:0;width:20px;height:20px}
  .lang-trigger .lang-name{display:none}
}

/*
 * Au doigt, le pied de page était une colonne de liens hauts de 25 px collés
 * les uns aux autres — et les mentions légales, 22 px, sous le minimum de
 * 24 px demandé par WCAG 2.5.8. On ne change ni la taille du texte ni le
 * rythme visuel : on rend la zone tactile, avec du padding.
 */
@media (max-width: 760px) {
  .foot-col > a{margin-bottom:0;min-height:44px;display:flex;align-items:center}
  .foot-col p{margin-bottom:.5rem}
  .socials{gap:.5rem}
  .socials a{width:44px;height:44px;display:grid;place-items:center;margin:0}
  .socials svg{width:18px;height:18px}
  .yj-foot-legal{gap:.2rem .9rem}
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-backdrop, .burger span { transition: none; }
}