/*
Theme Name: Sanctuaire Impart
Theme URI: https://sanctuaireimpart.org
Author: Ladoz
Description: Thème sur mesure pour l'ONG Sanctuaire Impart (Korhogo, Côte d'Ivoire). Palette marine / vert / or, typographie Fraunces + Inter.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanctuaire-impart
*/

:root{
  --bg:#F6F5F1; --panel:#FFFFFF; --ink:#182430; --ink-soft:#54606C; --line:#DDE1E1;
  --clay:#15304F; --clay-ink:#0C1D30; --teal:#1F7A4C; --teal-ink:#0E4128; --amber:#C79A3B;
  --plum:#5B4E8C; --plum-ink:#33294F; --navy-header:#0F2038;
  --font-display:'Fraunces',serif; --font-body:'Inter',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141A20; --panel:#1C242C; --ink:#EDEFF0; --ink-soft:#AEB7BF; --line:#333D46;
    --clay:#7CA9DA; --clay-ink:#D7E6F7; --teal:#6FCB9B; --teal-ink:#D8F3E3; --amber:#E7C169;
    --plum:#A79BD6; --plum-ink:#E4DEF5;
  }
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--font-body); color:var(--ink); line-height:1.6; background:var(--bg)}
img{max-width:100%}
a{color:var(--clay)}
.si-wrap{max-width:960px; margin:0 auto; padding:0 24px}

/* En-tête */
.si-header{position:sticky; top:0; z-index:10; background:var(--navy-header); border-bottom:1px solid rgba(255,255,255,.08)}
.si-nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:960px; margin:0 auto; gap:16px; flex-wrap:wrap}
.si-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.si-mark{width:34px; height:34px; flex:none; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.si-mark img{width:26px; height:26px; object-fit:contain}
.si-brand-name{font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:.2px; color:#fff}
.si-links ul{list-style:none; display:flex; gap:2px; margin:0; padding:0; flex-wrap:wrap; align-items:center}
.si-links a{font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.72); padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block}
.si-links a:hover{background:rgba(255,255,255,.08); color:#fff}
.si-links li.current-menu-item > a{color:#fff; background:rgba(255,255,255,.12); font-weight:500}
.si-links li.menu-item-cta{margin-left:6px}
.si-links li.menu-item-cta > a{background:var(--teal); color:#fff; padding:9px 16px; border-radius:999px; font-weight:500}
.si-links li.menu-item-cta > a:hover{filter:brightness(1.08); color:#fff}

main{padding:48px 0 80px; display:block}

.si-eyebrow{color:var(--clay); font-size:14px; margin:0 0 6px}
h1{font-family:var(--font-display); font-weight:600; font-size:clamp(32px,5vw,48px); line-height:1.1; margin:0 0 20px; max-width:14ch}
h2{font-family:var(--font-display); font-weight:600; font-size:28px; margin:32px 0 16px}
h3{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 6px}
p{margin:0 0 16px; max-width:62ch; color:var(--ink-soft)}
.si-lede{font-size:19px; color:var(--ink)}

.si-motto{display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--font-display); font-size:17px; color:var(--clay-ink); margin:28px 0 40px}
.si-motto span:not(:last-child)::after{content:'—'; margin-left:22px; color:var(--line); font-family:var(--font-body)}

.si-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 44px}
.si-step{border-radius:12px; padding:22px 18px; border:1px solid var(--line)}
.si-step p{margin:0; font-size:14px; max-width:none}
.si-step.navy{background:color-mix(in srgb, var(--clay) 10%, var(--panel))}
.si-step.navy h3{color:var(--clay-ink)}
.si-step.green{background:color-mix(in srgb, var(--teal) 10%, var(--panel))}
.si-step.green h3{color:var(--teal-ink)}
.si-step.gold{background:color-mix(in srgb, var(--amber) 16%, var(--panel))}
.si-step.gold h3{color:var(--amber)}
.si-step.plum{background:color-mix(in srgb, var(--plum) 12%, var(--panel))}
.si-step.plum h3{color:var(--plum-ink)}
@media (max-width:700px){ .si-steps{grid-template-columns:1fr 1fr} }

.si-quote{border-left:2px solid var(--clay); margin:0 0 40px; padding:4px 0 4px 22px; font-family:var(--font-display); font-size:20px; font-style:italic; color:var(--ink)}

.si-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:24px 0 8px}
.si-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px}
.si-card.priority{border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.si-tag{display:inline-block; font-size:12px; color:var(--teal-ink); background:color-mix(in srgb, var(--teal) 18%, transparent); padding:3px 10px; border-radius:999px; margin-bottom:10px}
.si-card p{font-size:14px; margin:0}

.si-list{list-style:none; margin:0 0 24px; padding:0}
.si-list li{padding:7px 0 7px 22px; position:relative; color:var(--ink-soft); max-width:56ch}
.si-list li::before{content:''; position:absolute; left:0; top:16px; width:6px; height:6px; border-radius:50%; background:var(--clay)}

.si-values{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 36px}
.si-values span{font-size:13px; border:1px solid var(--line); padding:6px 12px; border-radius:999px; color:var(--ink-soft)}

.si-info dt{font-size:13px; color:var(--ink-soft); margin-bottom:2px}
.si-info dd{margin:0 0 18px; font-size:16px}

.si-contact-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; max-width:520px}
.si-contact-card a{display:inline-block; margin-top:6px}
.si-note{font-size:13px; color:var(--ink-soft); border-left:2px solid var(--amber); padding-left:14px; margin-top:24px; max-width:56ch}

.si-footer{border-top:1px solid var(--line); padding:24px; text-align:center; color:var(--ink-soft); font-size:13px}

.si-content{margin-top:8px}