/* ==========================================================================
   ETERNITY FOREVER — feuille de style du site
   ========================================================================== */

@font-face { font-family:'Playfair'; src:url('fonts/Playfair-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair'; src:url('fonts/Playfair-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair'; src:url('fonts/Playfair-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair'; src:url('fonts/Playfair-700.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair'; src:url('fonts/Playfair-800.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair'; src:url('fonts/Playfair-900.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-300.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-700.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-800.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --navy:#0b2c54;
  --navy-deep:#071d38;
  --green:#4c7a2a;
  --green-deep:#3a5e20;
  --gold:#b3904f;
  --gold-light:#d8bd85;
  --cream:#faf6ee;
  --paper:#fffdf9;
  --ink:#1d2430;
  --muted:#5d6673;
  --hair:#e4ddcd;
  --maxw:1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Playfair',Georgia,serif; color:var(--navy); margin:0 0 0.5em; line-height:1.2; }
p{ margin:0 0 1em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.kicker{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
.rule{ width:56px; height:3px; background:var(--gold); margin:18px 0 28px; border:none; }
.rule.center{ margin-left:auto; margin-right:auto; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,249,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:42px; width:auto; }
.brand .name{ font-family:'Playfair',serif; font-weight:700; color:var(--navy); font-size:18px; letter-spacing:.3px; }
.brand .name small{ display:block; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; font-size:9px; color:var(--gold); margin-top:2px; }

nav.mainnav{ display:flex; align-items:center; gap:22px; }
nav.mainnav a{ font-size:14px; font-weight:600; color:var(--navy); position:relative; padding:6px 0; white-space:nowrap; }
nav.mainnav a.active{ color:var(--gold); }
nav.mainnav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s; }
nav.mainnav a:hover::after, nav.mainnav a.active::after{ transform:scaleX(1); }
.cta-btn{ display:inline-block; background:var(--navy); color:#fff !important; padding:10px 20px; border-radius:2px; font-size:13px; font-weight:700; letter-spacing:.4px; }
.cta-btn:hover{ background:var(--navy-deep); }
.cta-btn.ghost{ background:transparent; color:var(--navy) !important; border:1.5px solid var(--navy); }
.cta-btn.ghost:hover{ background:var(--navy); color:#fff !important; }

.navtoggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.navtoggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.2s; }

@media (max-width:900px){
  nav.mainnav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:12px 24px; transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto;
  }
  nav.mainnav.open{ transform:translateX(0); }
  nav.mainnav a{ width:100%; padding:14px 0; border-bottom:1px solid var(--hair); }
  nav.mainnav .cta-btn{ margin-top:16px; text-align:center; width:100%; }
  .navtoggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background-image:
    linear-gradient(90deg, var(--navy) 0%, var(--navy) 32%, rgba(11,44,84,.72) 52%, rgba(11,44,84,.18) 72%, rgba(11,44,84,0) 88%),
    url('hero-family.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  min-height:560px;
  display:flex;
  align-items:center;
}
.hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:96px 24px 84px; width:100%; }
.hero .eyebrow{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-light); font-weight:700; margin-bottom:18px; }
.hero h1{ color:#fff; font-size:44px; max-width:720px; margin-bottom:20px; }
.hero .lead{ color:#dbe3ee; font-size:18px; max-width:560px; margin-bottom:34px; }
.hero .actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .cta-btn.light{ background:var(--gold); color:var(--navy-deep) !important; }
.hero .cta-btn.light:hover{ background:var(--gold-light); }
.hero .cta-btn.outline{ border:1.5px solid rgba(255,255,255,.55); color:#fff !important; }
.hero .cta-btn.outline:hover{ background:rgba(255,255,255,.1); }
@media (max-width:600px){ .hero{ min-height:440px; } .hero h1{ font-size:32px; } .hero-inner{ padding:70px 20px 56px; } }

/* Visitor counter band (accueil uniquement) */
.visitor-band{ background:var(--paper); border-bottom:1px solid var(--hair); padding:20px 24px; }
.visitor-band .vb-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:center;
  gap:14px; text-align:center; flex-wrap:wrap;
}
.visitor-band .vb-icon{ color:var(--gold); flex-shrink:0; display:flex; }
.visitor-band .vb-icon svg{ width:22px; height:22px; }
.visitor-band .vb-count{ font-family:'Playfair',serif; font-weight:800; font-size:24px; color:var(--navy); }
.visitor-band .vb-label{ font-size:13.5px; color:var(--muted); }
@media (max-width:600px){ .visitor-band .vb-label{ font-size:12.5px; } }

.page-hero{ background:var(--navy); color:#fff; padding:64px 24px 54px; }
.page-hero .container{ max-width:var(--maxw); }
.page-hero h1{ color:#fff; font-size:34px; margin-bottom:10px; }
.page-hero p{ color:#cfd9e6; max-width:640px; font-size:16px; margin:0; }

/* ---------- Sections ---------- */
section.block{ padding:64px 24px; }
section.block.tight{ padding:44px 24px; }
section.block.alt{ background:var(--cream); }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head h2{ font-size:28px; }

/* Pillars / cards */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:820px){ .grid3, .grid2{ grid-template-columns:1fr; } }

.pillar{ background:var(--paper); border:1px solid var(--hair); padding:30px 26px; border-top:3px solid var(--gold); }
.pillar .pnum{ font-family:'Playfair',serif; font-size:30px; color:var(--gold); font-weight:700; margin-bottom:10px; }
.pillar h3{ font-size:18px; margin-bottom:10px; }
.pillar p{ color:var(--muted); font-size:14.5px; margin:0; }

/* Stats */
.stat-row{ display:flex; gap:22px; flex-wrap:wrap; margin:28px 0; }
.stat{ flex:1; min-width:220px; background:var(--navy); color:#fff; padding:30px 26px; text-align:center; }
.stat.alt{ background:var(--gold); color:var(--navy-deep); }
.stat .amount{ font-family:'Playfair',serif; font-size:40px; font-weight:800; margin-bottom:8px; }
.stat .cond{ font-size:13.5px; opacity:.9; }

/* Flow / steps */
.flow{ display:flex; align-items:stretch; gap:18px; margin:30px 0; flex-wrap:wrap; }
.flow .step{ flex:1; min-width:200px; background:var(--paper); border:1px solid var(--hair); padding:22px; }
.flow .step h4{ font-size:15px; margin-bottom:8px; }
.flow .step p{ font-size:13.5px; color:var(--muted); margin:0; }
.flow .arrow{ display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:22px; font-weight:700; }
@media (max-width:820px){ .flow{ flex-direction:column; } .flow .arrow{ transform:rotate(90deg); } }

.steps{ counter-reset:step; margin:28px 0; }
.step-item{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--hair); }
.step-item:last-child{ border-bottom:none; }
.step-item .sn{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair',serif; font-weight:700; }
.step-item h4{ font-size:15.5px; margin-bottom:4px; }
.step-item p{ font-size:14px; color:var(--muted); margin:0; }

/* Callouts */
.callout{ background:var(--cream); border-left:4px solid var(--gold); padding:18px 22px; margin:24px 0; font-size:14.5px; color:var(--ink); }
.callout.green{ border-left-color:var(--green); }
.callout b{ color:var(--navy); }

/* Info table */
table.info{ width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
table.info th{ text-align:left; background:var(--navy); color:#fff; padding:10px 14px; font-family:'Playfair',serif; font-weight:700; font-size:14px; }
table.info td{ padding:11px 14px; border-bottom:1px solid var(--hair); vertical-align:top; }
table.info td.k{ font-weight:700; color:var(--navy); width:34%; }

/* Org chart */
.org{ display:flex; flex-direction:column; align-items:center; gap:0; margin:34px 0; }
.org-box{ width:100%; max-width:560px; border:1.5px solid var(--navy); padding:16px 22px; text-align:center; background:var(--paper); }
.org-box.dashed{ border-style:dashed; }
.org-box .t{ font-family:'Playfair',serif; font-weight:700; color:var(--navy); font-size:16px; }
.org-box .s{ font-size:13px; color:var(--muted); margin-top:4px; }
.org-connector{ width:2px; height:26px; background:var(--gold); }

/* Person cards */
.person{ background:var(--paper); border:1px solid var(--hair); text-align:center; padding:0 0 26px; overflow:hidden; }
.person .top-band{ height:6px; background:linear-gradient(90deg,var(--gold),var(--green)); }
.person .initials{ width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair',serif; font-weight:700; font-size:20px; margin:24px auto 14px; }
.person .role{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); font-weight:700; }
.person .name{ font-family:'Playfair',serif; font-weight:700; color:var(--navy); font-size:18px; margin:8px 0 12px; }
.person .desc{ font-size:13.5px; color:var(--muted); padding:0 22px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:30px 0; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--paper); border:1px solid var(--hair); padding:22px; }
.contact-card .lbl{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px; }
.contact-card .val{ font-size:15px; color:var(--ink); font-weight:600; }
.contact-card a.val{ color:var(--navy); }

form.contact-form{ display:grid; gap:16px; max-width:640px; margin-top:24px; }
form.contact-form label{ font-size:13px; font-weight:700; color:var(--navy); display:block; margin-bottom:6px; }
form.contact-form input, form.contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--hair); background:var(--paper);
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
}
form.contact-form textarea{ min-height:140px; resize:vertical; }
form.contact-form button{ justify-self:start; }
.form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .form-row2{ grid-template-columns:1fr; } }
.form-note{ font-size:12.5px; color:var(--muted); }

.social-row{ display:flex; gap:12px; margin-top:14px; }
.social-row a{ width:38px; height:38px; border:1px solid var(--hair); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--navy); }
.social-row a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* CTA banner */
.cta-band{ background:var(--navy); color:#fff; padding:56px 24px; text-align:center; }
.cta-band h2{ color:#fff; margin-bottom:14px; }
.cta-band p{ color:#cfd9e6; max-width:560px; margin:0 auto 26px; }
.cta-band .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Notice / placeholder box */
.notice-box{ border:1.5px dashed var(--gold); background:var(--cream); padding:40px 30px; text-align:center; max-width:640px; margin:20px auto; }
.notice-box h3{ margin-bottom:10px; }
.notice-box p{ color:var(--muted); margin:0; }

/* Footer */
footer.site-footer{ background:var(--navy-deep); color:#c7d1e0; padding:52px 24px 26px; }
footer.site-footer .container{ max-width:var(--maxw); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:32px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; } }
footer.site-footer .brand .name{ color:#fff; }
footer.site-footer h4{ color:#fff; font-family:'Inter',sans-serif; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:16px; }
footer.site-footer a{ display:block; font-size:14px; color:#c7d1e0; margin-bottom:10px; }
footer.site-footer a:hover{ color:var(--gold-light); }
footer.site-footer p{ font-size:13.5px; color:#a9b6c8; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8ea0b8; }
.footer-bottom a{ color:#8ea0b8; display:inline; margin:0 0 0 16px; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:8px; top:8px; }

.legal-content{ max-width:760px; margin:0 auto; }
.legal-content h2{ font-size:20px; margin-top:34px; }
.legal-content p, .legal-content li{ color:var(--ink); font-size:14.5px; }
.legal-content ul{ padding-left:20px; }
