/* ---------------------------------------------------------------------------
   site.css — navigation and footer shared by every page of the site.
   Layout comes from the "Kit site v2" (8 sept. 2026); colours and type follow
   the Funding Horizons brandbook: Cinzel for headings, Montserrat for text.
   Every selector is namespaced (fhnav / fh-foot / fh-shell) so it can be loaded
   next to page.css and next to the pages that carry their own inline styles.
--------------------------------------------------------------------------- */

:root{
  --fh-nuit:#081D33; --fh-nuit-2:#0c2742; --fh-nuit-deep:#050f1c;
  --fh-rg:#E6B08C; --fh-rg-soft:#F0C9AE; --fh-rg-deep:#C98A6B; --fh-rg-text:#A9663F;
  --fh-or:#D4AF37; --fh-beige:#F4F1ED; --fh-txt-mut:#b89e8e;
  --fh-cinzel:'Cinzel',Georgia,serif;
  --fh-mont:'Montserrat','SF Pro Display',-apple-system,sans-serif;
}

.fh-shell{max-width:1240px;margin:0 auto;padding:0 32px}

/* ---- Header -------------------------------------------------------------
   Logo, direct line and call-to-action on the first row; the main navigation
   on the second. Both are fixed together, so `body.fh-fixed-hd` carries the
   offset instead of every page inventing its own. Below 1080px the second row
   becomes the burger panel (see the navigation block), which is why the tel and
   the button move into it there: one set of links, never two.
------------------------------------------------------------------------- */

.hd{position:fixed;top:0;left:0;right:0;z-index:90;
  transition:.5s cubic-bezier(.16,1,.3,1);
  background:rgba(5,15,28,0);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hd.is-scrolled{background:rgba(5,15,28,.93)}
.hd-in{max-width:1340px;margin:0 auto;padding:0 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;height:104px;
  transition:height .5s cubic-bezier(.16,1,.3,1)}
.hd.is-scrolled .hd-in{height:76px}
.hd-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.hd-logo img{height:52px;width:auto;display:block;transition:height .5s cubic-bezier(.16,1,.3,1)}
.hd.is-scrolled .hd-logo img{height:44px}
.hd-right{display:flex;align-items:center;gap:26px;min-width:0}
.hd-tel{font-size:13px;color:rgba(236,223,214,.85);font-weight:400;text-decoration:none;
  white-space:nowrap;transition:.25s}
.hd-tel:hover{color:var(--fh-rg)}
.hd-cta{display:inline-block;flex:0 0 auto;white-space:nowrap;text-decoration:none;
  font-family:var(--fh-mont);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 26px;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,#F0C9AE 0%,#E6B08C 45%,#C98A6B 100%);
  color:var(--fh-nuit);border:1px solid transparent;transition:.25s}
.hd-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(230,176,140,.6)}

#fh-burger{display:none;width:44px;height:44px;background:transparent;
  border:1px solid rgba(230,176,140,.4);border-radius:12px;color:var(--fh-rg);
  cursor:pointer;padding:0;align-items:center;justify-content:center;flex:0 0 auto}

/* Pages whose content starts under the fixed header rather than behind it.
   Their first screen is light, so the header is opaque from the top: on a beige
   ground a transparent bar leaves the logo and the direct line unreadable. */
body.fh-fixed-hd{padding-top:156px}
body.fh-fixed-hd .hd{background:rgba(5,15,28,.93);border-bottom:1px solid rgba(230,176,140,.2)}

@media(max-width:1560px){.hd-in{max-width:1400px;padding:0 28px}}
@media(max-width:1080px){
  #fh-burger{display:flex}
  .hd-in,.hd.is-scrolled .hd-in{height:60px;padding:0 12px 0 16px}
  .hd-logo img,.hd.is-scrolled .hd-logo img{height:36px}
  .hd{background:rgba(5,15,28,.93);border-bottom:1px solid rgba(230,176,140,.2)}
  .hd-right{display:none}
  body.fh-fixed-hd{padding-top:60px}
  /* Tel and call-to-action follow the links into the panel. */
  .fhnav .navcta{padding:14px}
  .fhnav .navcta a{display:block;text-align:center;padding:13px 20px;border-radius:12px;
    background:linear-gradient(135deg,#F0C9AE 0%,#E6B08C 45%,#C98A6B 100%);
    color:var(--fh-nuit);font-weight:600;font-size:13px;letter-spacing:.08em;
    text-transform:uppercase}
  .fhnav .navtel a{color:rgba(236,223,214,.9);font-size:14px}
}
@media(min-width:1081px){.fhnav .navcta,.fhnav .navtel{display:none}}

/* ---- Main navigation ---------------------------------------------------- */

.fhnav{background:var(--fh-nuit-2);border-top:1px solid rgba(230,176,140,.25);
  border-bottom:1px solid rgba(230,176,140,.25);font-family:var(--fh-mont);
  position:relative;z-index:50}
.fhnav ul{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;max-width:1180px}
.fhnav li{position:relative}
.fhnav a{display:block;color:#f3ede6;text-decoration:none;font-size:13px;
  font-weight:500;letter-spacing:.04em;padding:14px 16px;white-space:nowrap}
.fhnav li>a:hover,.fhnav li:hover>a,.fhnav li:focus-within>a{color:var(--fh-rg)}
.fhnav li.has>a::after{content:" ▾";font-size:10px;opacity:.7}
.fhnav a[aria-current]{color:var(--fh-rg)}
.fhnav .sub{display:none;position:absolute;left:0;top:100%;background:#fff;
  min-width:250px;border:1px solid rgba(230,176,140,.35);border-radius:0 0 10px 10px;
  box-shadow:0 18px 40px -20px rgba(8,29,51,.5);padding:8px 0}
.fhnav li:hover>.sub,.fhnav li:focus-within>.sub{display:block}
.fhnav .sub a{color:var(--fh-nuit);font-weight:500;padding:10px 18px;white-space:normal}
.fhnav .sub a:hover{background:#FBF5EF;color:var(--fh-rg-text)}
.fhnav .sub .grp{display:block;padding:10px 18px 4px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fh-rg-text);font-weight:700}
.fhnav .sub .sep{height:1px;background:rgba(230,176,140,.3);margin:6px 12px}

/* The last entries are the first to lose their breathing room. */
@media(max-width:1180px){.fhnav a{padding:13px 11px;font-size:12.5px}}

/* Below the burger threshold the bar becomes the burger panel itself, so the
   site keeps a single set of links instead of two that can drift apart.
   Sub-menus open with their parent: hover does not exist on touch. */
@media(max-width:1080px){
  /* Anchored to the header rather than to a hard-coded 60px: the homepage keeps
     its own header heights, and the panel follows whatever they are. */
  .fhnav{position:absolute;top:100%;right:10px;left:10px;max-height:calc(100vh - 120px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* Solid, not blurred: the panel sits inside a header that already carries a
       backdrop-filter, and a nested one stops the background painting at all
       (see docs/pieges.md). */
    background:#0a2138;
    border:1px solid rgba(230,176,140,.22);border-radius:18px;
    box-shadow:0 30px 60px -12px rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transform:translateY(-12px);
    transition:.35s cubic-bezier(.16,1,.3,1);z-index:95}
  body.fh-menu-open .fhnav{opacity:1;pointer-events:auto;transform:translateY(0)}
  .fhnav ul{flex-direction:column;align-items:stretch;padding:10px 6px}
  .fhnav a{padding:11px 14px;font-size:14px}
  .fhnav li.has>a::after{content:""}
  .fhnav .sub{display:block;position:static;background:transparent;border:0;
    box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .fhnav .sub a{color:rgba(243,237,230,.78);font-size:13px;padding:8px 14px}
  .fhnav .sub a:hover{background:transparent;color:var(--fh-rg)}
  .fhnav .sub .grp{padding:8px 14px 2px}
}

/* ---- Footer ------------------------------------------------------------- */

.fh-foot{background:var(--fh-nuit-deep);color:var(--fh-txt-mut);padding:60px 0 30px;
  font-family:var(--fh-mont);font-weight:300;line-height:1.7;
  border-top:1px solid rgba(230,176,140,.14)}
.fh-foot .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.15fr 1.1fr;
  gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(230,176,140,.18)}
.fh-foot h4{font-family:var(--fh-cinzel);color:var(--fh-rg);font-size:14px;
  letter-spacing:.1em;margin-bottom:18px;font-weight:600}
.fh-foot a{display:block;color:var(--fh-txt-mut);font-size:14px;margin-bottom:11px;
  text-decoration:none;transition:.2s}
.fh-foot a:hover{color:var(--fh-rg)}
.fh-foot .foot-logo img{height:78px;width:auto;margin-bottom:14px}
.fh-foot .foot-logo p{font-size:13.5px;max-width:280px}
/* Ligne réseaux sociaux du pied de page. Les glyphes sont en SVG inline :
   le site ne charge rien d'externe hors Google Fonts, et une police d'icônes
   ouvrirait une origine tierce pour quatre pictogrammes. */
.fh-foot .foot-soc{display:flex;gap:12px;margin-top:18px}
.fh-foot .foot-soc a{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:0;border-radius:50%;color:var(--fh-rg);
  border:1px solid rgba(230,176,140,.28)}
.fh-foot .foot-soc a:hover{background:var(--fh-rg);color:var(--fh-nuit-deep);
  border-color:var(--fh-rg)}

.fh-foot .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px;padding-top:24px;font-size:12.5px}
.fh-foot .foot-bottom a{display:inline;margin:0}

@media(max-width:1024px){.fh-foot .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .fh-shell{padding:0 20px}
  .fh-foot .foot-grid{grid-template-columns:1fr}
}

/* ---- Emplacement visuel en attente de photographie ----------------------
   Les photos du kit v2 sont livrées à part et ne sont pas encore fournies.
   Un encadré vide se lit comme une image cassée ; le monogramme sur fond nuit
   se lit comme un parti pris. À remplacer par la vraie image, pas à styler
   davantage. */
.fh-visual{
  background:
    url('/assets/logo.png') center / auto 38% no-repeat,
    linear-gradient(135deg,#0f2c4a 0%,#081D33 55%,#050f1c 100%) !important;
  position:relative;
}
.fh-visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%,rgba(230,176,140,.10),transparent 62%);
  pointer-events:none;
}