/* ============================================================
   FGBMFI CÔTE D'IVOIRE — Direction Nationale Chargée des Entreprises
   Réseau d'Affaires Chrétien · styles.css
   Palette : encre marine #0E2A47 · or #C9A227 · flamme #D8451C
   Typo : Fraunces (display) · Archivo (texte)
   ============================================================ */

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

:root{
  --marine:#0E2A47;
  --marine-fonce:#081B30;
  --or:#C9A227;
  --or-clair:#E3C766;
  --flamme:#D8451C;
  --ivoire:#FAF7F0;
  --blanc:#FFFFFF;
  --texte:#22303C;
  --texte-doux:#5A6B7A;
  --ligne:#E4DDCE;
  /* couleurs des 7 piliers (fidèles à l'infographie vision) */
  --p1:#1F3A93; --p2:#2E7D4F; --p3:#6A3FA0; --p4:#E07B12;
  --p5:#1D6FA5; --p6:#1E5B3C; --p7:#C0392B;
  --radius:14px;
  --ombre:0 12px 40px rgba(14,42,71,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--texte);
  background:var(--ivoire);
  line-height:1.65;
  font-size:16.5px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Fraunces',serif;color:var(--marine);line-height:1.15;font-weight:600}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Barre supérieure ---------- */
.topbar{
  background:var(--marine-fonce);color:#C7D3DF;font-size:.82rem;
  padding:.45rem 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar a{color:#C7D3DF}
.topbar a:hover{color:var(--or-clair)}
.topbar .verset{font-style:italic;color:var(--or-clair)}

/* ---------- En-tête ---------- */
header.site{
  background:var(--blanc);
  border-bottom:1px solid var(--ligne);
  position:sticky;top:0;z-index:100;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.brand img{width:56px;height:56px;object-fit:contain}
.brand .titres{line-height:1.2}
.brand .sigle{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;color:var(--marine);letter-spacing:.01em}
.brand .sous{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--texte-doux)}
nav.principal{display:flex;align-items:center;gap:1.4rem}
nav.principal a{
  font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--marine);
  padding:.4rem 0;border-bottom:2px solid transparent;transition:.2s;
}
nav.principal a:hover,nav.principal a.actif{border-bottom-color:var(--or);color:var(--flamme)}
.nav-actions{display:flex;gap:.6rem;align-items:center}
.btn{
  display:inline-block;font-weight:600;font-size:.87rem;letter-spacing:.02em;
  padding:.62rem 1.25rem;border-radius:999px;transition:.2s;border:1.5px solid transparent;cursor:pointer;
}
.btn-or{background:var(--or);color:var(--marine-fonce)}
.btn-or:hover{background:var(--or-clair)}
.btn-marine{background:var(--marine);color:#fff}
.btn-marine:hover{background:var(--marine-fonce)}
.btn-contour{border-color:var(--marine);color:var(--marine);background:transparent}
.btn-contour:hover{background:var(--marine);color:#fff}
.btn-flamme{background:var(--flamme);color:#fff}
.btn-flamme:hover{background:#B93A15}
.burger{display:none;background:none;border:none;font-size:1.6rem;color:var(--marine);cursor:pointer}

/* ---------- Héro ---------- */
.hero{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(201,162,39,.20), transparent 60%),
    radial-gradient(700px 420px at -5% 110%, rgba(216,69,28,.14), transparent 55%),
    linear-gradient(160deg, var(--marine-fonce) 0%, var(--marine) 70%);
  color:#E9EFF5;
  padding:5.5rem 0 5rem;
  position:relative;overflow:hidden;
}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.22em;color:var(--or-clair);
  margin-bottom:1.4rem;font-weight:600;
}
.hero .eyebrow::before{content:"";width:34px;height:1.5px;background:var(--or)}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:15ch;font-weight:600}
.hero h1 em{font-style:italic;color:var(--or-clair)}
.hero p.mission{max-width:56ch;margin:1.4rem 0 2.2rem;font-size:1.08rem;color:#C9D6E2}
.hero .actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero .objectifs{
  margin-top:3.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-family:'Fraunces',serif;font-size:.98rem;color:var(--or-clair);
}
.hero .objectifs span{display:flex;align-items:center;gap:.5rem}
.hero .objectifs span::before{content:"✦";font-size:.7rem;color:var(--flamme)}
.hero-logo{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:420px;opacity:.09;pointer-events:none;filter:grayscale(20%);
}

/* ---------- Sections ---------- */
section.bloc{padding:4.5rem 0}
section.bloc.creme{background:var(--blanc)}
.entete-section{max-width:640px;margin-bottom:2.8rem}
.entete-section.centre{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--flamme);font-weight:700;display:block;margin-bottom:.7rem;
}
.entete-section h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.8rem}
.entete-section p{color:var(--texte-doux)}

/* ---------- Grille des 7 piliers ---------- */
.piliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem}
.pilier{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:1.7rem 1.6rem;position:relative;overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.pilier:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.pilier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--or))}
.pilier .num{
  font-family:'Fraunces',serif;font-size:.85rem;font-weight:700;color:var(--c,var(--or));
  letter-spacing:.08em;margin-bottom:.5rem;display:block;
}
.pilier h3{font-size:1.12rem;margin-bottom:.55rem}
.pilier p{font-size:.92rem;color:var(--texte-doux)}
.pilier ul{margin:.6rem 0 0 1.1rem;font-size:.9rem;color:var(--texte-doux)}
.pilier ul li{margin:.25rem 0}

/* ---------- Bande valeurs ---------- */
.bande-valeurs{
  background:var(--marine);color:#DDE7F0;padding:3.2rem 0;
}
.bande-valeurs .liste{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.6rem;margin-top:1.6rem;
}
.bande-valeurs .liste span{
  font-family:'Fraunces',serif;font-size:1.15rem;color:#fff;
  display:flex;align-items:center;gap:.6rem;
}
.bande-valeurs .liste span::before{content:"✓";color:var(--or);font-weight:700}
.bande-valeurs h2{color:#fff;text-align:center;font-size:1.7rem}
.bande-valeurs .eyebrow{text-align:center;color:var(--or-clair)}

/* ---------- Approche (chemin) ---------- */
.chemin{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;counter-reset:etape}
.etape{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:1.4rem 1.2rem;text-align:center;position:relative;
}
.etape::before{
  counter-increment:etape;content:counter(etape);
  width:34px;height:34px;border-radius:50%;background:var(--or);color:var(--marine-fonce);
  font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;
  font-family:'Fraunces',serif;
}
.etape h4{font-size:.98rem;margin-bottom:.3rem}
.etape .ref{font-size:.78rem;color:var(--flamme);font-style:italic}

/* ---------- Citation / intention ---------- */
.intention{
  background:linear-gradient(150deg,var(--marine-fonce),var(--marine));
  color:#fff;text-align:center;padding:4.5rem 0;position:relative;overflow:hidden;
}
.intention blockquote{
  font-family:'Fraunces',serif;font-size:clamp(1.3rem,2.8vw,2rem);
  font-style:italic;max-width:32ch;margin:0 auto 1rem;color:var(--or-clair);
}
.intention cite{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#9FB2C4;font-style:normal}

/* ---------- Cartes génériques ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem}
.carte{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:1.8rem 1.6rem;box-shadow:0 4px 18px rgba(14,42,71,.05);
}
.carte h3{font-size:1.1rem;margin-bottom:.5rem}
.carte p{font-size:.93rem;color:var(--texte-doux)}
.carte .badge{
  display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:rgba(201,162,39,.14);color:#8A6E14;padding:.28rem .7rem;border-radius:999px;margin-bottom:.8rem;
}

/* ---------- Annuaire ---------- */
.filtres{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.filtres button{
  border:1.5px solid var(--ligne);background:var(--blanc);border-radius:999px;
  padding:.45rem 1.05rem;font-size:.84rem;font-weight:600;color:var(--texte-doux);cursor:pointer;transition:.2s;
  font-family:'Archivo',sans-serif;
}
.filtres button:hover{border-color:var(--or)}
.filtres button.actif{background:var(--marine);border-color:var(--marine);color:#fff}
.recherche{
  width:100%;max-width:420px;padding:.7rem 1.1rem;border:1.5px solid var(--ligne);
  border-radius:999px;font-family:'Archivo',sans-serif;font-size:.92rem;margin-bottom:1.2rem;
  background:var(--blanc);
}
.recherche:focus{outline:2px solid var(--or);border-color:var(--or)}
.entreprise{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:1.5rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.entreprise .secteur{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--flamme)}
.entreprise h3{font-size:1.05rem}
.entreprise .infos{font-size:.86rem;color:var(--texte-doux)}
.entreprise .chapitre{font-size:.78rem;color:var(--or);font-weight:600;margin-top:.3rem}

/* ---------- Formulaires ---------- */
form.formulaire{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:2.2rem;max-width:720px;box-shadow:var(--ombre);
}
.champ{margin-bottom:1.25rem}
.champ label{display:block;font-size:.85rem;font-weight:600;color:var(--marine);margin-bottom:.35rem}
.champ label .req{color:var(--flamme)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.7rem .95rem;border:1.5px solid var(--ligne);border-radius:9px;
  font-family:'Archivo',sans-serif;font-size:.94rem;background:var(--ivoire);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--or);border-color:var(--or);background:#fff}
.champ textarea{min-height:120px;resize:vertical}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.note-form{font-size:.82rem;color:var(--texte-doux);margin-top:1rem}

/* ---------- Dons ---------- */
.montants{display:flex;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.montants .montant{
  border:1.5px solid var(--ligne);background:var(--ivoire);border-radius:10px;
  padding:.65rem 1.2rem;font-weight:700;color:var(--marine);cursor:pointer;transition:.2s;
  font-family:'Archivo',sans-serif;font-size:.95rem;
}
.montants .montant:hover{border-color:var(--or)}
.montants .montant.actif{background:var(--or);border-color:var(--or);color:var(--marine-fonce)}

/* ---------- Événements ---------- */
.evenement{
  display:grid;grid-template-columns:110px 1fr auto;gap:1.4rem;align-items:center;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:1.4rem 1.6rem;
  margin-bottom:1rem;
}
.evenement .date{
  text-align:center;font-family:'Fraunces',serif;color:var(--marine);
  border-right:1px solid var(--ligne);padding-right:1.2rem;
}
.evenement .date .jour{font-size:2rem;font-weight:700;line-height:1}
.evenement .date .mois{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--flamme);font-weight:700}
.evenement h3{font-size:1.08rem;margin-bottom:.25rem}
.evenement p{font-size:.88rem;color:var(--texte-doux)}
@media(max-width:640px){.evenement{grid-template-columns:1fr}.evenement .date{border:none;text-align:left;padding:0}}

/* ---------- Appel final ---------- */
.appel{
  background:var(--blanc);border-top:1px solid var(--ligne);
  text-align:center;padding:4.2rem 0;
}
.appel h2{font-size:clamp(1.5rem,3vw,2.1rem);max-width:22ch;margin:0 auto .9rem}
.appel p{color:var(--texte-doux);max-width:52ch;margin:0 auto 1.8rem}

/* ---------- Pied de page ---------- */
footer.site{
  background:var(--marine-fonce);color:#9FB2C4;padding:3.5rem 0 1.8rem;font-size:.88rem;
}
.footer-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
footer .marque{display:flex;gap:.8rem;align-items:flex-start}
footer .marque img{width:52px;height:52px}
footer h4{color:#fff;font-size:.95rem;margin-bottom:.9rem}
footer ul{list-style:none}
footer li{margin:.4rem 0}
footer a:hover{color:var(--or-clair)}
.footer-bas{
  border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;text-align:center;font-size:.8rem;
}
.footer-bas .verset{color:var(--or-clair);font-style:italic;margin-bottom:.4rem}
@media(max-width:900px){.footer-grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grille{grid-template-columns:1fr}}

/* ---------- Bandeau de page intérieure ---------- */
.bandeau{
  background:linear-gradient(160deg,var(--marine-fonce),var(--marine));
  color:#fff;padding:3.6rem 0 3rem;
}
.bandeau h1{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem)}
.bandeau p{color:#C9D6E2;max-width:60ch;margin-top:.8rem}
.bandeau .eyebrow{color:var(--or-clair)}

/* ---------- Responsive nav ---------- */
@media(max-width:1020px){
  nav.principal{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--blanc);
    flex-direction:column;padding:1.2rem 24px;gap:.9rem;border-bottom:1px solid var(--ligne);
    box-shadow:var(--ombre);align-items:flex-start;
  }
  nav.principal.ouvert{display:flex}
  .burger{display:block}
  .nav-actions .btn-contour{display:none}
  .hero-logo{display:none}
}
@media(max-width:640px){
  .deux-col{grid-template-columns:1fr}
  section.bloc{padding:3.2rem 0}
  .nav-actions{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}