/* ==========================================================================
   Fit & Swim — header
   Ton CSS d'origine, à l'identique, plus la zone compte.

   Le « tronc commun » (police, tokens, .btn, .fs-logo) est inclus ici parce
   qu'il vivait dans ton widget HTML : en le remplaçant par le shortcode, tu
   l'aurais perdu. S'il existe déjà par ailleurs, la redéfinition est
   strictement identique — inoffensive.
   ========================================================================== */

@font-face{
  font-family:'Ideal Gothic';
  src:url('/wp-content/uploads/fonts/IdealGothicBold.woff2') format('woff2'),
      url('/wp-content/uploads/fonts/IdealGothicBold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  --navy:#023C4F; --navy-d:#02293A; --navy-l:#33586A;
  --cream:#F1F5E8; --cream-d:#DCE4D2;
  --sand:#EDCE7A; --sand-d:#E4BF57; --sand-txt:#8A6D1F;
  --sage:#A3BCB9; --sage-d:#C4D2CE;
  --muted:#5C7683;
  --disp:'Ideal Gothic',Anton,'Archivo Black',sans-serif;
  --body:Arial,Helvetica,system-ui,sans-serif;
}
.fs .btn{
  font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:15px; padding:16px 30px; border-radius:10px; border:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; color:var(--navy); background:var(--sand); text-decoration:none;
  transition:transform .18s ease,background .18s ease; position:relative; overflow:hidden;
}
.fs .btn:hover{ background:var(--sand-d); transform:translateY(-2px); color:var(--navy); }
.fs .btn:active{ background:#D9B14A; transform:translateY(0); }
.fs .btn:focus-visible{ outline:3px solid var(--cream); outline-offset:2px; }

.fs-logo{
  display:block;
  -webkit-mask:var(--logo) no-repeat center / contain;
          mask:var(--logo) no-repeat center / contain;
  background-color:currentColor;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.fs-hdr{ position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 0;
  color:var(--cream); transition:background .35s ease, padding .35s ease; }
.fs-hdr.scrolled{ background:var(--navy); padding:10px 0; border-bottom:1px solid rgba(241,245,232,.1); }
.fs-hdrw{ padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
#fs-hdr .fs-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream); }
.fs-hlogo{ width:46px; height:34px; flex:none; opacity:0; transition:opacity .3s; }
.fs-hlogo.on{ opacity:1; }
#fs-hdr .fs-hname{ font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:19px; letter-spacing:.06em; color:var(--cream); }
.fs-hnav{ display:flex; align-items:center; gap:24px; }
#fs-hdr .fs-hnav a{ color:var(--cream); font-family:var(--body); font-size:14.5px;
  font-weight:700; opacity:.85; text-decoration:none; transition:opacity .2s,color .2s; }
#fs-hdr .fs-hnav a:hover{ opacity:1; color:var(--sand); }
.fs-hright{ display:flex; align-items:center; gap:14px; }
.fs-hbtn{ padding:12px 22px; font-size:13.5px; }

/* ── Zone compte ──────────────────────────────────────────────────────── */
#fs-hdr .fs-hlogin{ color:var(--cream); font-family:var(--body); font-size:14.5px;
  font-weight:700; opacity:.85; text-decoration:none; }
#fs-hdr .fs-hlogin:hover{ opacity:1; color:var(--sand); }

.fs-acc{ position:relative; }
/* Scopé sous #fs-hdr (1,1,0) : le kit Elementor style tous les <button> et
   leur colle un fond sable. Sans ça, l'avatar disparaît dans un carré jaune. */
#fs-hdr .fs-accbtn{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:none !important; border:0; padding:4px 6px; border-radius:22px;
  color:var(--cream); font-family:var(--body); transition:background .2s;
}
#fs-hdr .fs-accbtn:hover{ background:rgba(241,245,232,.1) !important; }
#fs-hdr .fs-accbtn:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }
.fs-avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--sand); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:13px; letter-spacing:.04em;
}
.fs-accname{ font-size:14px; font-weight:700; }
.fs-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.7; transition:transform .2s; }
#fs-accbtn[aria-expanded="true"] .fs-caret{ transform:rotate(180deg); }

.fs-accmenu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:210px;
  background:#fff; border-radius:12px; padding:8px;
  box-shadow:0 12px 34px rgba(2,41,58,.24); z-index:60;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; transform:translateY(-6px); transition:opacity .18s, transform .18s;
}
.fs-accmenu.open{ opacity:1; transform:translateY(0); }
#fs-hdr .fs-accmenu a{
  color:var(--navy); font-family:var(--body); font-size:14px; font-weight:700;
  text-decoration:none; padding:10px 12px; border-radius:8px; opacity:1;
}
#fs-hdr .fs-accmenu a:hover{ background:var(--cream); color:var(--navy); }
#fs-hdr .fs-accmenu .fs-accout{ border-top:1px solid var(--cream-d); margin-top:4px;
  padding-top:12px; border-radius:0 0 8px 8px; color:var(--muted); }
#fs-hdr .fs-accmenu .fs-accout:hover{ color:#B14E36; background:#F5E4DE; }

/* ── Burger ───────────────────────────────────────────────────────────── */
#fs-hdr .fs-burger{ display:none; background:none !important; border:0; cursor:pointer; padding:0;
  width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; border-radius:8px; }
#fs-hdr .fs-burger span{ display:block; width:24px; height:2.5px; background:var(--cream);
  border-radius:2px; transition:transform .25s, opacity .25s; }
#fs-hdr .fs-burger:hover span{ background:var(--sand); }
#fs-hdr .fs-burger:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }
#fs-hdr .fs-burger.on .fs-b1{ transform:translateY(8.5px) rotate(45deg); }
#fs-hdr .fs-burger.on .fs-b2{ opacity:0; }
#fs-hdr .fs-burger.on .fs-b3{ transform:translateY(-8.5px) rotate(-45deg); }

/* ── Menu mobile ──────────────────────────────────────────────────────── */
.fs-mmenu{ position:fixed; inset:0; background:var(--navy); z-index:45;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:20px; padding:0 28px; opacity:0; pointer-events:none; transition:opacity .3s; }
.fs-mmenu.open{ opacity:1; pointer-events:auto; }
#fs-mmenu a{ color:var(--cream); font-family:var(--disp); font-weight:700;
  text-transform:uppercase; font-size:34px; text-decoration:none; }
#fs-mmenu a:hover{ color:var(--sand); }
#fs-mmenu .fs-msmall{ font-size:20px; opacity:.75; }
.fs-msep{ display:block; width:56px; height:2px; background:rgba(241,245,232,.22); }
.fs-mcta{ font-size:15px !important; margin-top:8px; }

@media(max-width:1180px){
  .fs-hnav{ display:none; }
  /* #fs-hdr .fs-hbtn (1,1,0) et NON .fs-hbtn (0,1,0) : sinon `.fs .btn` (0,2,0)
     l'emporte, le bouton reste affiché à côté du burger, et comme il est
     magnétique il vient le recouvrir. */
  #fs-hdr .fs-hbtn{ display:none; }
  #fs-hdr .fs-burger{ display:flex; }
  .fs-accname{ display:none; }   /* on garde l'avatar seul : il reste cliquable */
}
@media(max-width:900px){
  .fs-hdrw{ padding:0 20px; }
  #fs-mmenu a{ font-size:28px; }
}
@media(prefers-reduced-motion:reduce){
  .fs-hdr,#fs-hdr .fs-burger span,.fs-mmenu,.fs-accmenu{ transition:none !important; }
  .fs-hlogo{ opacity:1 !important; }
}