/* ==========================================================================
   Citoyen Sans Frontière — Togo
   Identité visuelle par-dessus Bootstrap 5.
   Palette   : forêt profonde + ambre brûlé, sur papier chaud.
   Typo      : Fraunces (titres) · Work Sans (texte) · IBM Plex Mono (repères).
   Signature : le bandeau "quatre piliers", repris sur les pages clés.
   ========================================================================== */

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

:root {
  --ink:         #16241C;
  --forest:      #1E4A33;
  --forest-deep: #0F2A1C;
  --paper:       #FBF8F1;
  --paper-2:     #F1E8D6;
  --ochre:       #B97A2A;
  --ochre-soft:  #E3B26B;
  --line:        rgba(22, 36, 28, .14);
  --shadow-soft: 0 .9rem 2rem rgba(15, 42, 28, .09);

  --bs-body-font-family: 'Work Sans', system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--forest);
  --bs-link-hover-color: var(--forest-deep);
  --bs-border-color: var(--line);
}

/* -------------------------------------------------- base -------------------------------------------------- */

html { scroll-behavior: smooth; }
body { background-color: var(--paper); }

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
}
.display-5, .display-6 { font-weight: 700; }
p { line-height: 1.68; }

a { transition: color .15s ease; }

/* Étiquettes "repère" en petites capitales monospace : datent, situent, numérotent */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ochre); display: inline-block; flex: 0 0 auto; }
.eyebrow.on-dark { color: var(--ochre-soft); }
.eyebrow.on-dark::before { background: var(--ochre-soft); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::before { display: none; }

.lede {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ochre-soft);
  max-width: 46ch;
}

/* Rythme vertical plus généreux que les defaults Bootstrap */
.py-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.py-7 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
@media (max-width: 767.98px) {
  .py-6 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
  .py-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* -------------------------------------------------- couleurs utilitaires -------------------------------------------------- */

.bg-brand      { background-color: var(--forest)      !important; }
.bg-brand-deep { background-color: var(--forest-deep) !important; }
.bg-paper2     { background-color: var(--paper-2)     !important; }
.text-brand    { color: var(--forest) !important; }
.text-ochre    { color: var(--ochre)  !important; }
.text-white-70 { color: rgba(255,255,255,.72) !important; }

/* -------------------------------------------------- boutons -------------------------------------------------- */

.btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  padding: .75rem 1.5rem;
}
.btn-lg { padding: .9rem 1.9rem; font-size: .8rem; }

.btn-brand { background-color: var(--forest); border-color: var(--forest); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background-color: var(--forest-deep); border-color: var(--forest-deep); color: #fff; }

.btn-gold { background-color: var(--ochre); border-color: var(--ochre); color: #fff; }
.btn-gold:hover, .btn-gold:focus { background-color: #9C6420; border-color: #9C6420; color: #fff; }

.btn-outline-light-brand { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light-brand:hover { background-color: var(--ochre); border-color: var(--ochre); color: #fff; }

.btn-whatsapp { background-color: #25D366; border-color: #25D366; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background-color: #1DA851; border-color: #1DA851; color: #fff; }

.btn-outline-secondary, .btn-outline-danger { border-radius: 2px; }

/* -------------------------------------------------- navbar -------------------------------------------------- */

.navbar-csf {
  background-color: rgba(251, 248, 241, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.navbar-csf .navbar-brand { display: flex; align-items: center; gap: .65rem; }
.navbar-csf .brand-logo { height: 40px; width: auto; }
.navbar-csf .navbar-brand span { font-size: 1.02rem; line-height: 1.15; color: var(--ink); }
.navbar-csf .navbar-brand small {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--forest); font-weight: 500;
}
.navbar-csf .nav-link {
  font-weight: 500; font-size: .92rem; color: var(--ink);
  padding: .55rem .9rem !important; position: relative;
}
.navbar-csf .nav-link.active { color: var(--forest); font-weight: 700; }
.navbar-csf .nav-link.active::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .3rem;
  height: 2px; background: var(--ochre);
}

/* -------------------------------------------------- hero (photo de fond) -------------------------------------------------- */

.hero-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--forest-deep);
  isolation: isolate;
}
.hero-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(15,42,28,.72) 0%, rgba(15,42,28,.94) 100%);
}
.hero-photo::after {
  /* légère texture en points, pour donner du grain plutôt qu'un aplat plat */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .35;
  mix-blend-mode: overlay;
}
.hero-photo > .container { position: relative; z-index: 1; }
.hero-photo h1 { color: #fff; }

/* -------------------------------------------------- signature : bandeau "quatre piliers" -------------------------------------------------- */

.pillars-strip {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.pillars-strip .pillar {
  padding: 2.25rem 1.6rem 2rem;
  border-right: 1px solid var(--line);
  position: relative;
  height: 100%;
}
.pillars-strip .col:last-child .pillar { border-right: none; }
.pillars-strip .pillar .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem; color: var(--ochre); letter-spacing: .06em; font-weight: 600;
}
.pillars-strip .pillar h3 { font-size: 1.12rem; margin: .8rem 0 .5rem; }
.pillars-strip .pillar p { font-size: .9rem; color: #4b473c; margin: 0; }
.pillars-strip .pillar::after {
  content: ""; position: absolute; left: 1.6rem; bottom: 0; height: 4px; width: 30px; background: var(--ochre);
}
@media (max-width: 767.98px) {
  .pillars-strip .pillar { border-right: none; border-bottom: 1px solid var(--line); }
}

/* -------------------------------------------------- cartes -------------------------------------------------- */

.card { border: 1px solid var(--line); border-radius: 3px; }
.card-flat { border: none; background: var(--paper-2); border-radius: 3px; }

.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

.card-article { overflow: hidden; }
.card-article img { height: 195px; object-fit: cover; }
.card-article .card-body { padding: 1.35rem; }
.card-article .card-date {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--forest); font-weight: 600;
}
.card-article h3 { font-size: 1.08rem; margin: .35rem 0 .5rem; }
.card-article:hover h3 { color: var(--ochre); }

/* -------------------------------------------------- bandeau photo horizontal -------------------------------------------------- */

.photo-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.photo-strip img {
  height: 240px; width: auto; flex: 0 0 auto; object-fit: cover; border-radius: 3px;
  scroll-snap-align: start; box-shadow: var(--shadow-soft);
}
.photo-strip::-webkit-scrollbar { height: 6px; }
.photo-strip::-webkit-scrollbar-thumb { background: var(--ochre); border-radius: 3px; }

/* -------------------------------------------------- galerie -------------------------------------------------- */

.gallery-grid img { height: 230px; width: 100%; object-fit: cover; border-radius: 3px; transition: transform .35s ease; }
.gallery-grid a { display: block; overflow: hidden; border-radius: 3px; }
.gallery-grid a:hover img { transform: scale(1.06); }

/* -------------------------------------------------- vision / valeurs, blocs jumelés -------------------------------------------------- */

.twin-block { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #fff; }
.twin-block > div { padding: 2.5rem; }
.twin-block > div + div { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .twin-block { display: flex; }
  .twin-block > div { flex: 1; padding: 3rem; }
  .twin-block > div + div { border-top: none; border-left: 1px solid var(--line); }
}
.twin-block h3 {
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--forest); font-weight: 600; margin-bottom: .9rem;
}

/* -------------------------------------------------- fiche d'identification -------------------------------------------------- */

.id-table th {
  width: 230px; background: var(--paper-2); font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--forest);
  font-weight: 600; border-color: var(--line) !important;
}
.id-table td { border-color: var(--line) !important; }

/* -------------------------------------------------- programmes -------------------------------------------------- */

.program-row .pnum { font-family: 'Fraunces', serif; font-weight: 700; color: var(--ochre); }
.program-row + .program-row { border-top: 1px solid var(--line); }

/* -------------------------------------------------- listes à puce fléchée -------------------------------------------------- */

.list-arrow { list-style: none; padding: 0; margin: 0; }
.list-arrow li {
  padding: .75rem 0 .75rem 1.6rem; position: relative; border-top: 1px solid var(--line); font-size: .96rem;
}
.list-arrow li:first-child { border-top: none; }
.list-arrow li::before { content: "→"; position: absolute; left: 0; top: .75rem; color: var(--ochre); font-weight: 700; }
.list-arrow.on-dark li { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }

/* -------------------------------------------------- section d'état vide -------------------------------------------------- */

.empty-block {
  border: 1px dashed var(--line); border-radius: 3px; padding: 3.5rem 2rem; text-align: center; background: #fff;
}
.empty-block .headline { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-bottom: .4rem; }

/* -------------------------------------------------- footer -------------------------------------------------- */

footer.site-footer { background-color: var(--wix-navy-dark); color: rgba(255,255,255,.82); }
footer.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
footer.site-footer a:hover { color: var(--wix-orange); }
footer.site-footer h5 {
  color: var(--wix-orange); font-family: 'IBM Plex Mono', monospace; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.motto { font-family: 'Fraunces', serif; font-style: italic; color: var(--wix-orange); }
.visit-counter { font-size: .82rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   Réplique visuelle de la page d'accueil du site Wix d'origine
   (d'après captures d'écran fournies) : logo tricolore, bandeau bleu marine,
   carrousel de photos rondes, citation italique bleue, bouton orange,
   bandeaux bleus "Domaines d'intervention"/"Moyens d'action" cerclés d'un
   ovale rose, nuages de mots "Nos Valeurs"/"Nos Principes".
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root{
  --wix-red:#E63946;
  --wix-blue:#1A56C4;
  --wix-navy:#152A54;
  --wix-navy-dark:#0B1730;
  --wix-green:#2A9D3F;
  --wix-orange:#E8791A;
  --wix-pink:#E8A0A0;
  --wix-bg:#ECECEC;
}

/* ---------- bandeau logo (texture de fond) ---------- */
.site-header-band{
  background-color:#fff;
  background-image:url('../img/header-bg.jpg');
  background-repeat:repeat;
}

/* ---------- logo tricolore + pastille de langue ---------- */
.wix-logo-text{
  font-family:'Playfair Display', serif; font-weight:700; font-size:2.2rem; line-height:1;
  white-space:nowrap;
}
.wix-logo-text .w-citoyen{color:var(--wix-red);}
.wix-logo-text .w-sans{color:var(--wix-blue);}
.wix-logo-text .w-frontiere{color:var(--wix-green);}
.wix-logo-text .w-togo{color:#171717; margin-left:.35rem;}
.header-slogan{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:600;
  color:var(--wix-blue); font-size:.92rem; max-width:34ch; margin-top:.2rem;
}
@media (max-width:575.98px){ .header-slogan{font-size:.8rem;} }
@media (max-width:991.98px){ .wix-logo-text{font-size:1.15rem;} }
@media (max-width:575.98px){
  .wix-logo-text{font-size:.95rem;}
  .lang-switch{position:static !important; transform:none !important; margin-top:.75rem; justify-content:center;}
}

.lang-switch-item{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .3rem;
  background:#fff; color:var(--wix-green) !important; border:2px solid var(--wix-green);
  border-radius:999px; font-weight:700; font-size:.8rem; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.lang-switch-item:hover{background:rgba(42,157,63,.12);}
.lang-switch-item.active{background:var(--wix-green); color:#fff !important;}

/* ---------- bandeau de navigation façon Wix ---------- */
.wix-navbar{background:var(--wix-blue); padding:0;}
.wix-navbar .navbar-nav{width:100%;}
@media (min-width:992px){ .wix-navbar .navbar-nav{flex-wrap:wrap;} }
.wix-navbar .nav-item{border-right:1px solid rgba(255,255,255,.15);}
.wix-navbar .nav-link{
  font-family:'Playfair Display', serif; font-weight:700; font-size:.86rem;
  color:#fff !important; padding:.8rem .9rem !important; text-align:center; white-space:nowrap;
}
.wix-navbar .nav-link.active{background:var(--wix-navy-dark);}
.wix-navbar .nav-link:hover{background:var(--wix-navy);}

/* ---------- carrousel de photos rondes (défilement automatique) ---------- */
.round-carousel-wrap{background:var(--wix-bg); padding:2rem 0; overflow:hidden;}
.round-carousel{display:flex; gap:1.1rem; padding:.5rem 1rem; width:max-content; animation:csf-marquee 34s linear infinite;}
.round-carousel-wrap:hover .round-carousel{animation-play-state:paused;}
.round-carousel img{
  width:130px; height:130px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
@keyframes csf-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:575.98px){ .round-carousel img{width:96px; height:96px;} }
@media (prefers-reduced-motion: reduce){ .round-carousel{animation:none;} }

/* ---------- citation italique bleue ---------- */
.wix-quote{
  text-align:center; font-family:'Playfair Display', serif; font-style:italic; font-weight:700;
  color:var(--wix-blue); font-size:1.3rem; max-width:46ch; margin:2rem auto;
}

/* ---------- titre "L'initiative C.S.F" ---------- */
.wix-section-title{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:700;
  font-size:1.6rem; color:#171717; margin-bottom:1rem;
}

/* ---------- bouton orange ---------- */
.btn-wix-orange{
  background:var(--wix-orange); border-color:var(--wix-orange); color:#fff;
  font-family:'Playfair Display', serif; font-weight:700; font-style:normal;
  border-radius:3px; padding:.55rem 1.4rem; text-transform:none; letter-spacing:0;
}
.btn-wix-orange:hover{background:#c8650f; border-color:#c8650f; color:#fff;}

/* ---------- bandeaux bleus (Domaines d'intervention / Moyens d'action / Objectifs / Vision) ---------- */
.wix-banner{
  background:var(--wix-blue); color:#fff; text-align:center;
  font-family:'Playfair Display', serif; font-weight:700; font-size:1.15rem;
  padding:.7rem 1rem; margin:0;
}
.wix-banner-row{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:2.5rem;}
@media (max-width:767.98px){ .wix-banner-row{grid-template-columns:1fr;} }

/* ---------- ovale rose encerclant le contenu ---------- */
.wix-oval{
  border:3px solid var(--wix-pink); border-radius:50%/12%;
  padding:2.5rem 3rem; margin:1.5rem 0 3rem;
}
@media (max-width:767.98px){ .wix-oval{border-radius:24px; padding:1.75rem 1.5rem;} }
.wix-oval-row{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;}
@media (max-width:767.98px){ .wix-oval-row{grid-template-columns:1fr; gap:1rem;} }
.wix-oval ul{list-style:none; padding:0; margin:0;}
.wix-oval li{position:relative; padding-left:1.1rem; margin-bottom:.6rem; font-size:.96rem;}
.wix-oval li::before{content:"•"; position:absolute; left:0; color:var(--wix-blue); font-weight:700;}

/* ---------- sous-titres italiques rouges (Vision, Nos Valeurs...) ---------- */
.wix-red-italic{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:700;
  color:var(--wix-red); font-size:1.2rem; margin-bottom:.6rem;
}

/* ---------- bande photo + nuages de mots (Nos Valeurs / Nos Principes) ---------- */
.wordcloud-row{display:flex; flex-wrap:wrap;}
.wordcloud-half{
  position:relative; flex:1 1 50%; min-width:280px;
  background-size:cover; background-position:center;
  min-height:340px; display:flex; align-items:center; justify-content:center;
}
.wordcloud-half::before{content:""; position:absolute; inset:0; background:rgba(6,10,20,.68);}
.wordcloud-half-inner{position:relative; z-index:1; padding:2rem 1.5rem; max-width:420px;}
.wc-label{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:700; color:#fff; font-size:1.4rem;
}
.wordcloud-half-inner img{max-width:100%; height:auto;}

/* ---------- cartes actualités façon Wix (avatar + org + titre coloré) ---------- */
.wix-news-card{background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden; height:100%;}
.wix-news-card img.thumb{width:100%; height:170px; object-fit:cover;}
.wix-news-card .body{padding:1rem 1.1rem 1.3rem;}
.wix-news-card .byline{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;}
.wix-news-card .byline img{width:26px; height:26px; border-radius:50%; object-fit:cover;}
.wix-news-card .byline span{font-size:.82rem; color:var(--wix-blue); font-weight:600;}
.wix-news-card h3{
  font-family:'Playfair Display', serif; font-weight:700; font-size:1.05rem;
  color:var(--wix-orange); margin-bottom:.4rem;
}
.wix-news-card p.subtitle{color:var(--wix-blue); font-size:.9rem; margin:0;}

/* -------------------------------------------------- contenu riche (articles / pages) -------------------------------------------------- */

.rich-content { line-height: 1.72; }
.rich-content p { margin-bottom: 1.3em; }
.rich-content img {
  max-width: 100%; height: auto; border-radius: 3px; margin: 1.6em 0;
  box-shadow: var(--shadow-soft);
}
.rich-content h2, .rich-content h3 { margin-top: 1.6em; }
.rich-content blockquote {
  border-left: 3px solid var(--ochre); margin: 1.6em 0; padding: .3em 0 .3em 1.2em;
  font-family: 'Fraunces', serif; font-style: italic; color: var(--forest);
}
.rich-content ul, .rich-content ol { margin-bottom: 1.3em; }
.rich-content a { text-decoration: underline; }

/* -------------------------------------------------- espace admin -------------------------------------------------- */

.admin-shell { max-width: 920px; }
.login-box { max-width: 440px; margin: 0 auto; border-radius: 4px; }
.table-articles td, .table-articles th { vertical-align: middle; }
.thumb-sm { width: 64px; height: 48px; object-fit: cover; border-radius: 2px; }
.form-label {
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--forest); font-weight: 600;
}
.form-control, .form-select { border-radius: 2px; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--ochre); box-shadow: 0 0 0 .2rem rgba(185,122,42,.15); }

/* -------------------------------------------------- accessibilité -------------------------------------------------- */

.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--ink); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}