/* ============================================================
   EDMÉE COV — SOCLE COMMUN
   Chargé par TOUTES les pages du site.
   Contient : palette, typographie, boutons, textures d'ondes,
   navigation, pied de page, animations d'apparition.

   ⚠ Ne mettez ici que ce qui est partagé par plusieurs pages.
     - Style propre à l'accueil        → styles/accueil.css
     - Style des pages intérieures     → styles/pages.css
   ============================================================ */

:root{
  --navy:      #0B2342;
  --blue:      #1B5FA8;
  --ice:       #EEF3FA;
  --ruby:      #B5284A;
  --blush:     #F2D0D8;
  --slate:     #5E7284;
  --mist:      #DDE4EE;
  --cream:     #FAF8F4;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --maxw: 1200px;
  --r-lg: 26px;
  --r-md: 18px;

  --shadow-soft: 0 2px 6px rgba(11,35,66,.04), 0 12px 32px rgba(11,35,66,.06);
  --shadow-lift: 0 4px 12px rgba(11,35,66,.06), 0 28px 60px rgba(11,35,66,.13);
  --ease: cubic-bezier(.22,.76,.31,1);

  /* Hauteur réservée sous la navigation fixe (pages intérieures) */
  --nav-h: 116px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* scrollbar-gutter:stable → la gouttière de l'ascenseur est toujours réservée.
   Sans ça, le verrouillage du hero de l'accueil (overflow:hidden) fait
   disparaître la barre de défilement et décale la page de quelques pixels. */
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--navy);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0; }
p{ margin:0; }
::selection{ background:var(--blush); color:var(--navy); }

/* Cible d'ancre : le titre ne passe pas sous la nav fixe */
[id]{ scroll-margin-top:calc(var(--nav-h) + 20px); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }

/* Lien d'évitement, pour la navigation au clavier */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
  font-size:.85rem; font-weight:600;
}
.skip:focus{ left:0; }

/* ============================================================
   Sur-titres
   ============================================================ */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:''; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--blue));
}
.eyebrow::after{                      /* point d'accent */
  content:''; width:5px; height:5px; border-radius:50%; background:var(--ruby); flex:none;
}
.eyebrow--accent{ color:var(--ruby); }
.eyebrow--accent::before{ background:linear-gradient(90deg,transparent,var(--ruby)); }

/* ============================================================
   Boutons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.65em;
  font-size:.9rem; font-weight:600; letter-spacing:.01em;
  padding:.95em 1.6em; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:all .45s var(--ease); position:relative; overflow:hidden;
}
.btn svg{ transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{ background:var(--navy); color:#fff; box-shadow:0 10px 26px rgba(11,35,66,.18); }
.btn--primary:hover{ background:var(--blue); box-shadow:0 14px 34px rgba(27,95,168,.28); transform:translateY(-2px); }
.btn--accent{ background:var(--ruby); color:#fff; box-shadow:0 10px 26px rgba(181,40,74,.26); }
.btn--accent:hover{ background:#9C1E3D; box-shadow:0 16px 38px rgba(181,40,74,.34); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--mist); color:var(--navy); background:rgba(255,255,255,.6); }
.btn--ghost:hover{ border-color:var(--ruby); color:var(--ruby); background:#fff; transform:translateY(-2px); }
.btn--light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--light:hover{ background:#fff; color:var(--navy); transform:translateY(-2px); }

/* ============================================================
   Textures d'ondes réutilisables
   ============================================================ */
.waveTexture{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-radial-gradient(circle at 12% 118%, transparent 0 58px, rgba(27,95,168,.075) 58px 59px),
    repeating-radial-gradient(circle at 92% -10%, transparent 0 74px, rgba(11,35,66,.05) 74px 75px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.waveDivider{ display:block; width:100%; height:auto; }
.waveLine{ display:block; width:100%; height:64px; opacity:.5; }
.waveLine path{ fill:none; stroke:var(--blue); stroke-width:1.1; }

/* ============================================================
   Navigation — identique sur toutes les pages
   Le balisage est injecté par scripts/commun.js
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:transform .6s var(--ease), opacity .5s var(--ease), background .5s var(--ease);
  background:rgba(250,248,244,.78);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(221,228,238,.9);
}
/* Variante accueil : la nav reste cachée tant que le hero n'est pas déployé */
.nav--reveal{ transform:translateY(-110%); opacity:0; }
.nav--reveal.is-visible{ transform:none; opacity:1; }

.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--nav-h); }
.nav__brand{ display:flex; flex-direction:column; gap:3px; line-height:1.02; }
.nav__brand strong{
  font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,3.9vw,3.3rem); letter-spacing:-.005em;
}
.nav__brand strong em{ font-style:normal; color:var(--blue); }
.nav__brand small{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{
  font-size:.85rem; font-weight:500; color:var(--slate); position:relative; padding-block:4px;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ruby); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--navy); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* Page en cours */
.nav__links a.is-active{ color:var(--navy); font-weight:600; }
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav .btn{ padding:.7em 1.3em; font-size:.82rem; }

/* Menu déroulant sur petit écran */
.nav__burger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; flex:none;
  border:1px solid var(--mist); background:rgba(255,255,255,.7); color:var(--navy);
  cursor:pointer; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.nav__burger:hover{ border-color:var(--ruby); }
.nav__burger span{ display:block; width:17px; height:1.5px; background:currentColor; position:relative; }
.nav__burger span::before,
.nav__burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease);
}
.nav__burger span::before{ top:-5px; }
.nav__burger span::after{ top:5px; }
.nav__drawer{ display:none; }

@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__drawer{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .5s var(--ease);
    border-top:1px solid transparent;
  }
  .nav__drawer > div{ overflow:hidden; }
  .nav.is-open .nav__drawer{ grid-template-rows:1fr; border-top-color:var(--mist); }
  .nav__drawer a{
    display:block; padding:15px 0; font-size:.95rem; font-weight:500; color:var(--navy);
    border-bottom:1px solid var(--mist);
  }
  .nav__drawer a:last-child{ border-bottom:0; }
  .nav__drawer a.is-active{ color:var(--ruby); }
}

.nav__ctaShort{ display:none; }
@media (max-width:620px){
  :root{ --nav-h:74px; }
  .nav__inner{ height:auto; min-height:74px; padding-block:11px; gap:12px; }
  .nav__brand strong{ font-size:1.6rem; }
  .nav__brand small{ font-size:.54rem; letter-spacing:.07em; }
  .nav .btn{ padding:.62em 1.05em; font-size:.75rem; }
  .nav .btn svg{ display:none; }
  .nav__ctaLong{ display:none; }
  .nav__ctaShort{ display:inline; }
  .nav__burger{ width:38px; height:38px; }
}

/* ============================================================
   Pied de page — identique sur toutes les pages
   ============================================================ */
.footer{ background:var(--cream); border-top:3px solid var(--ruby); }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding:clamp(38px,5vw,60px) 0 clamp(28px,3.5vw,44px);
}
.footer__brand{ font-family:var(--serif); font-size:1.6rem; color:var(--navy); display:block; }
.footer__brand em{ font-style:normal; color:var(--blue); }
.footer__base{ margin-top:8px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ruby); font-weight:600; }
.footer__pitch{ margin-top:16px; font-size:.9rem; color:var(--slate); max-width:34ch; }
.footer h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy); margin-bottom:14px;
}
.footer__col a,
.footer__col span{ display:block; font-size:.88rem; color:var(--slate); padding:5px 0; transition:color .35s var(--ease); }
.footer__col a:hover{ color:var(--ruby); }
.footer__cta{
  font-weight:600; color:var(--ruby); border-bottom:1px solid var(--blush); padding-bottom:2px;
  transition:border-color .4s var(--ease);
}
.footer__cta:hover{ border-color:var(--ruby); color:var(--ruby); }
.footer__bar{
  border-top:1px solid var(--mist); padding:20px 0 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:var(--slate);
}
.footer__bar nav{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__bar a:hover{ color:var(--ruby); }

@media (max-width:860px){
  .footer__top{ grid-template-columns:1fr 1fr; row-gap:32px; }
}
@media (max-width:560px){
  .footer__top{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ============================================================
   Apparition au scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s }
.reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s }
.reveal[data-d="5"]{ transition-delay:.45s } .reveal[data-d="6"]{ transition-delay:.54s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}