/* ============================================================================
   SAHEL-BRANCHE-CSS-V1 — les pages de division
   ============================================================================

   Elle PROLONGE index.html, elle ne le remplace pas : memes variables, meme
   pile de polices, meme grille. Une page de division doit se reconnaitre
   comme une page du groupe.

   ⚠️ AUCUNE POLICE DISTANTE. La pile systeme, comme sur la page d'accueil.
      Une police Google ajoute une requete vers un tiers, un delai de rendu,
      et un texte qui saute quand elle arrive. Sur une connexion camerounaise,
      cela se voit.

   ⚠️ AUCUNE BIBLIOTHEQUE. Les animations sont en CSS, le declenchement au
      defilement tient en quinze lignes de JavaScript natif. Rien a
      telecharger, rien qui casse le jour ou un CDN tombe.
   ========================================================================= */

:root{
  --green:#2B6441;
  --green-mid:#367A50;
  --green-deep:#1E4630;
  --green-dark:#14301E;
  --gold:#D3AF61;
  --gold-light:#EFD98F;
  --ink:#141814;
  --paper:#FAF9F6;
  --rule:#D9D6CC;
  --muted:#5F6459;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}
section{padding:52px 0}
h2{font-size:26px;line-height:1.2;letter-spacing:-.015em;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 26px;font-size:15.5px}
p{margin:0 0 16px}

/* ---------- fil d'ariane ---------- */
.fil{background:var(--green-dark);color:#8FA795;font-size:13.5px;padding:11px 0}
.fil a{color:#B4C9BC;text-decoration:none;border-bottom:1px solid rgba(180,201,188,.3)}
.fil a:hover{color:var(--gold-light);border-bottom-color:var(--gold-light)}
.fil span{opacity:.6;padding:0 8px}

/* ---------- bandeau ---------- */
.tete{
  position:relative;
  background:linear-gradient(150deg,#2F6E47 0%,var(--green-dark) 100%);
  color:#fff;
  padding:60px 0 52px;
  overflow:hidden;
}

/* Le halo dore : un seul degre radial, pas une image. Il donne de la
   profondeur sans peser un octet. */
.tete::before{
  content:"";
  position:absolute;
  top:-160px; right:-120px;
  width:520px; height:520px;
  background:radial-gradient(circle,rgba(211,175,97,.22) 0%,transparent 68%);
  pointer-events:none;
}

.tete .wrap{position:relative}
.ident{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.ident img{width:96px;height:96px;flex:none;border-radius:20px}
.ident h1{margin:2px 0 6px;font-size:42px;line-height:1.05;font-weight:700;letter-spacing:-.02em}
.ident h1 em{font-style:normal;color:var(--gold-light)}
.metier{margin:0 0 16px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#B4C9BC;font-weight:600}
.chapeau{margin:0;font-size:19px;max-width:640px;color:#E7EFE9;line-height:1.5}

.etat{
  display:inline-block;margin-top:20px;padding:6px 14px;border-radius:3px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.etat-actif{background:var(--gold);color:#2A2415}
.etat-bientot{background:rgba(255,255,255,.14);color:#DCE7DF;border:1px solid rgba(255,255,255,.28)}

/* ---------- chiffres ---------- */
.chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.chiffre{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 18px;
}
.chiffre b{display:block;font-size:32px;font-weight:700;color:var(--green);letter-spacing:-.02em;line-height:1}
.chiffre span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.4}

/* ---------- offres ---------- */
.offres{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.offre{background:var(--paper);padding:24px 22px}
.offre h3{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.005em}
.offre p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.offre .puce{
  display:block;width:32px;height:3px;background:var(--gold);margin-bottom:14px;
}

/* ---------- liste ---------- */
.pour{border-top:2px solid var(--green)}
.pour li{
  list-style:none;padding:14px 0 14px 28px;border-bottom:1px solid var(--rule);
  position:relative;font-size:16px;
}
.pour ul{margin:0;padding:0}
.pour li::before{
  content:"";position:absolute;left:2px;top:22px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}

/* ---------- autres divisions ---------- */
.voisines{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.voisine{
  background:var(--paper);padding:16px 15px;display:flex;gap:12px;align-items:center;
  text-decoration:none;color:var(--ink);transition:background .18s ease;
}
.voisine:hover{background:#F2F0EA}
.voisine img{width:36px;height:36px;border-radius:8px;flex:none}
.voisine b{display:block;font-size:14.5px;font-weight:650}
.voisine span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* ---------- contact ---------- */
.contact{background:var(--green-deep);color:#fff}
.contact h2{color:#fff}
.contact .sub{color:#B4C9BC}
.cta{
  display:inline-block;margin-top:8px;background:var(--gold);color:#2A2415;
  font-weight:650;font-size:17px;padding:15px 30px;border-radius:4px;text-decoration:none;
  transition:background .18s ease;
}
.cta:hover,.cta:focus{background:var(--gold-light)}
.alt{margin-top:22px;font-size:16px;color:#DCE7DF}
.alt a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(239,217,143,.4)}

footer{background:var(--green-dark);color:#8FA795;font-size:14px;padding:26px 0}
footer p{margin:0}
footer a{color:#B4C9BC;text-decoration:none;border-bottom:1px solid rgba(180,201,188,.3)}

/* ============================================================================
   LES ANIMATIONS
   ============================================================================
   Toutes en CSS. Le declenchement au defilement se fait par
   IntersectionObserver, natif depuis 2019 : aucune bibliotheque.

   ⚠️ SANS JAVASCRIPT, TOUT RESTE VISIBLE. `.monte` n'est masque que si la
      classe `js` est posee sur <html> par le script lui-meme. Un navigateur
      qui bloque le script affiche la page entiere, simplement sans mouvement.
   ========================================================================= */

.js .monte{opacity:0;transform:translateY(18px)}
.js .monte.vu{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
}

/* Le decalage en cascade : les elements d'une grille se levent l'un apres
   l'autre. Six pas suffisent — au-dela on attend. */
.js .monte.vu:nth-child(2){transition-delay:.06s}
.js .monte.vu:nth-child(3){transition-delay:.12s}
.js .monte.vu:nth-child(4){transition-delay:.18s}
.js .monte.vu:nth-child(5){transition-delay:.24s}
.js .monte.vu:nth-child(6){transition-delay:.30s}

/* L'embleme se pose au chargement. */
@keyframes pose{from{opacity:0;transform:scale(.86) rotate(-6deg)}to{opacity:1;transform:none}}
.ident img{animation:pose .7s cubic-bezier(.22,.61,.36,1) both}

@keyframes glisse{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ident h1{animation:glisse .6s cubic-bezier(.22,.61,.36,1) .08s both}
.metier{animation:glisse .6s cubic-bezier(.22,.61,.36,1) .16s both}
.chapeau{animation:glisse .6s cubic-bezier(.22,.61,.36,1) .24s both}
.etat{animation:glisse .6s cubic-bezier(.22,.61,.36,1) .32s both}

/* Le filet dore sous un titre se tire de gauche a droite. */
@keyframes tire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .offre.vu .puce{transform-origin:left;animation:tire .5s cubic-bezier(.22,.61,.36,1) both}

@media (max-width:640px){
  body{font-size:16px}
  .tete{padding:42px 0 38px}
  .ident img{width:72px;height:72px}
  .ident h1{font-size:32px}
  .chapeau{font-size:17px}
  section{padding:40px 0}
  h2{font-size:22px}
}

/* ⚠️ LE MOUVEMENT REDUIT EST RESPECTE. Un vestibulaire sensible n'a pas a
   subir une page qui bouge. Tout reste visible, rien ne se deplace. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .monte{opacity:1!important;transform:none!important}
}