/* =========================================================
   2Amd Media — Feuille de style partagée
   Direction : corporate, rassurant, bleu profond
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bleu-900: #0a2540;
  --bleu-800: #0f3257;
  --bleu-700: #14406f;
  --bleu-600: #1e5ba8;
  --bleu-500: #2798ff;
  --bleu-300: #7bbdff;
  --bleu-100: #e7f1fd;
  --bleu-50:  #f3f8ff;
  --encre:    #0a1a2f;
  --gris-700: #43536b;
  --gris-500: #6b7a92;
  --gris-300: #c3cdda;
  --gris-100: #eef1f6;
  --blanc:    #ffffff;
  --vert:     #18a673;
  --ambre:    #f0a02e;
  --rayon:    14px;
  --rayon-sm: 9px;
  --ombre-s:  0 2px 8px rgba(10,37,64,.06);
  --ombre-m:  0 14px 40px rgba(10,37,64,.10);
  --ombre-l:  0 30px 70px rgba(10,37,64,.16);
  --max:      1180px;
  --transi:   .28s cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', sans-serif;
  color: var(--encre);
  background: var(--blanc);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }

.contenu { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---------- Barre de navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gris-100);
}
.nav-in {
  max-width: var(--max); margin: 0 auto; padding: 0 28px;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: baseline; gap: 2px; font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; color: var(--bleu-900); }
.logo b { color: var(--bleu-500); font-weight: 600; }
.logo span { font-family: 'Manrope', sans-serif; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-500); margin-left: 8px; font-weight: 700; align-self: center; }
.nav-liens { display: flex; align-items: center; gap: 34px; }
.nav-liens a { font-size: .94rem; font-weight: 600; color: var(--gris-700); transition: color var(--transi); }
.nav-liens a:hover, .nav-liens a.actif { color: var(--bleu-600); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 22px; }
.nav-burger span { display: block; height: 2.5px; background: var(--bleu-900); border-radius: 2px; margin: 4.5px 0; transition: var(--transi); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95rem;
  padding: 14px 26px; border-radius: var(--rayon-sm); cursor: pointer;
  border: 1.6px solid transparent; transition: var(--transi); white-space: nowrap;
}
.btn-primaire { background: var(--bleu-500); color: #fff; box-shadow: 0 8px 22px rgba(39,152,255,.32); }
.btn-primaire:hover { background: var(--bleu-600); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(39,152,255,.42); }
.btn-clair { background: #fff; color: var(--bleu-700); border-color: var(--gris-300); }
.btn-clair:hover { border-color: var(--bleu-500); color: var(--bleu-600); transform: translateY(-2px); }
.btn-fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-fantome:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn .fl { transition: transform var(--transi); }
.btn:hover .fl { transform: translateX(4px); }

/* ---------- Sections génériques ---------- */
.section { padding: 96px 0; }
.section-bleu { background: var(--bleu-50); }
.section-encre { background: var(--bleu-900); color: #fff; }

.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bleu-600); margin-bottom: 18px;
}
.surtitre::before { content: ""; width: 26px; height: 2px; background: var(--bleu-500); display: inline-block; }
.section-encre .surtitre { color: var(--bleu-300); }
.section-encre .surtitre::before { background: var(--bleu-300); }

.titre-section { font-size: clamp(2rem, 3.6vw, 2.85rem); color: var(--bleu-900); max-width: 680px; }
.section-encre .titre-section { color: #fff; }
.intro-section { font-size: 1.08rem; color: var(--gris-700); max-width: 620px; margin-top: 18px; }
.section-encre .intro-section { color: var(--bleu-300); }

/* ---------- Pied de page ---------- */
.pied { background: var(--bleu-900); color: #fff; padding: 70px 0 36px; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.pied h4 { font-family: 'Manrope', sans-serif; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-300); margin-bottom: 18px; font-weight: 800; }
.pied a, .pied p { color: #b9c9dc; font-size: .94rem; display: block; margin-bottom: 10px; transition: color var(--transi); }
.pied a:hover { color: #fff; }
.pied .logo { color: #fff; margin-bottom: 14px; }
.pied .logo b { color: var(--bleu-300); }
.pied-desc { color: #8ea3bd; font-size: .95rem; max-width: 300px; }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .85rem; color: #6f86a3;
}

/* ---------- Animations d'apparition ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.vu { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-liens {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--gris-100);
    padding: 12px 28px 24px; transform: translateY(-130%); transition: transform var(--transi);
  }
  .nav-liens.ouvert { transform: translateY(0); }
  .nav-liens a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--gris-100); }
  .nav-liens .btn { margin-top: 14px; justify-content: center; }
  .nav-burger { display: block; }
  .section { padding: 64px 0; }
  .pied-grille { grid-template-columns: 1fr; gap: 34px; }
}