/* Unissons Charity · couche commune 2026
   Direction : concret, redevable, chaleureux. Le terrain (pierre, eau, papier du carnet), l'indigo
   et l'or de la marque. Signature : la plaque, comme celle gravée sur chaque puits.
   Chargée en dernier sur chaque page : elle corrige l'usage des couleurs, de la typo et du rythme
   sans toucher au contenu. Méthode : unslop par Damir Sokolovsky (@heydamir), CC BY 4.0. */

:root{
  --cream:#f7f4ee;
  --cream-warm:#efe9df;
  --white:#fdfbf7;
  --text:#1f1b16;
  --text-soft:#5e554a;
  --line:rgba(31,27,22,.1);
  --amber-ink:#8a5a12;
  --night:#17142a;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Type ---------- */
body{font-family:var(--sans);font-weight:400;letter-spacing:0}
h1,h2,h3,.section-title{font-weight:400}
h1 em,h2 em,h3 em,h4 em,.section-title em,[class*="title"] em,.logo-text em,blockquote em{
  font-style:normal;color:inherit;background:none;-webkit-text-fill-color:currentColor}
em,i,blockquote,cite{font-style:normal}
p,li{text-wrap:pretty}
h1,h2{text-wrap:balance}
strong,b{font-weight:600}

/* étiquettes au-dessus des titres : phrase normale, couleur du texte adoucie */
.eyebrow,.section-eyebrow,.page-hero-eyebrow,.why-eyebrow,.pm-eyebrow,.hero-overline,
.cell-tag,.maroc-tag,.pillar-tag,.axe-tag,.other-tag,.tag,.cat,
.stat-label,.kpi-label,.impact-label,.gauge-stat-label,.maroc-meta-label,.compta-line-label{
  text-transform:none!important;letter-spacing:0!important;font-weight:500;font-size:14px}
.eyebrow,.section-eyebrow,.page-hero-eyebrow,.why-eyebrow,.pm-eyebrow,.cell-tag{color:var(--amber-ink)}
.eyebrow::before,.section-eyebrow::before,.page-hero-eyebrow::before{display:none}
.hero-overline{border:0!important;padding:0!important;background:none!important;color:rgba(247,244,238,.72)}
/* sur fond nuit, l'étiquette reprend la couleur claire du texte */
.hero .eyebrow,.maroc .eyebrow,.maroc-tag,.gaza .eyebrow,.impact .eyebrow,.donate .eyebrow,
.cell-dark .cell-tag,footer .eyebrow,.page-hero .page-hero-eyebrow,.page-hero .eyebrow,
[class*="dark"] .section-eyebrow,[class*="dark"] .eyebrow{color:rgba(247,244,238,.72)}

/* chiffres : une seule façon de les écrire */
.hero-chip strong,.stat-num,.stat-number,.kpi-num,.impact-num,.promise-num,.timeline-num,
.palier-num,.triade-num,.gaza-step-num,.pm-step-num,.moon-num,.res-headline-num,
.gauge-stat-value,.legend-value,.compta-line-value,.maroc-meta-value,.puits-amount,.pays-amount-tag,
[class*="amount"],[class*="price"]{font-variant-numeric:tabular-nums lining-nums}
.compta-line-value,.legend-value,.puits-delay,.pays-meta-item strong,.blog-meta,.rel-meta{
  font-family:var(--mono);font-weight:400;letter-spacing:0}

/* ---------- Boutons ---------- */
.btn,.nav-cta,.donate-cta,[class*="btn-"]{
  border-radius:8px;font-weight:500;letter-spacing:0;box-shadow:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn{min-height:48px;padding:0 20px}
.btn-primary,.nav-cta,.donate-cta{background:var(--amber);color:#1a1530!important}
.btn-primary:hover,.nav-cta:hover,.donate-cta:hover{background:var(--amber-bright);transform:none;box-shadow:none}
.btn:active,.donate-cta:active{transform:scale(.98)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ---------- En-tête : calme, sans flou ---------- */
.header,.header.scrolled{background:var(--night);border-bottom:1px solid rgba(255,255,255,.08)}
.logo-img{box-shadow:none}
.logo:hover .logo-img{transform:none}
.logo-text em{color:inherit}

/* ---------- Surfaces ---------- */
.hero,.maroc,.donate{background:var(--night)}
.cell-amber{background:var(--cream-warm);color:var(--text)}
.cell-amber .cell-tag{color:var(--amber-ink)}
[class*="card"],.testi,.stat-box,.pillar-card,.projet-pill{box-shadow:none}
[class*="card"]:hover,.pillar-card:hover,.testi:hover{transform:none!important;box-shadow:none}
.testi-avatar,.blog-author-avatar{background:var(--cream-warm);color:var(--text-soft);font-family:var(--sans)}
.maroc-bar{background:var(--amber);box-shadow:none}

/* ---------- Accueil : la photo du terrain remplace le globe ---------- */
.hero-photo{position:relative;margin:0;width:100%;max-width:560px;justify-self:end}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
@media (max-width:980px){.hero-photo{justify-self:center;max-width:480px;margin-top:32px}
  .hero-photo img{aspect-ratio:4/3}}
.hero-chips{gap:32px}
.hero-chip strong{color:#f7f4ee}
.testi-grid,.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---------- La plaque (signature) ---------- */
.plaque,.pays-amount-tag,.gallery-cap strong{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;
  color:#1f1b16;background:#f3ede2;border-radius:4px;padding:6px 10px;
  box-shadow:inset 0 0 0 1px rgba(31,27,22,.22),0 1px 2px rgba(0,0,0,.08)}
.plaque{position:absolute;left:20px;bottom:20px}
.plaque span+span::before{content:'·';margin-right:8px;opacity:.6}
.gallery-cap strong{margin-bottom:8px}

/* ---------- Mouvement : une entrée, rien qui boucle ---------- */
[class*="pulse"],[class*="beat"],.gaza-halo,.gaza-sweep{animation:none!important;box-shadow:none!important}
.gaza-halo,.gaza-sweep{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* quatre pays : la grille suit le nombre de cartes */
.puits-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pays-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* pictogrammes retirés : les cases vides disparaissent */
.stat-icon:empty,.projet-pill-icon:empty,.contact-channel-icon:empty{display:none}
/* voile lisible sur la photo du hero des Bâtisseurs */
.pm-hero-veil{background:rgba(21,15,40,.78)}
.pm-hero .pm-eyebrow,.pm-hero [class*="eyebrow"],.page-hero [class*="eyebrow"]{color:rgba(247,244,238,.72)}
.nav-burger{align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#f7f4ee}
.nav-burger svg{display:block}
.logo-text em{margin-left:.22em}