/* ============================================================================
   ADB — Site public
   Système visuel bâti sur les couleurs du logo : le vert de la flèche de
   croissance, le bleu du ciel et du robinet, le sable de la carte. Rien
   d'autre n'a été introduit : les teintes ci-dessous sont toutes dérivées de
   ces trois-là, éclaircies ou assombries.

   Discipline conservée de bout en bout :
   — propriétés logiques uniquement (une feuille sert le RTL et le LTR) ;
   — aucune dépendance JavaScript pour lire le contenu ;
   — toute animation s'efface sous prefers-reduced-motion.
   ============================================================================ */

/* ===========================================================
   1. Jetons
   =========================================================== */
:root{
  /* --- Couleurs du logo --- */
  --vert:#7DB928;
  --vert-fonce:#3E7C1F;
  --bleu:#4E97D1;
  --bleu-fonce:#2E6DA4;
  --sable:#F6F1E4;
  --sable-fonce:#E3D8BE;
  --encre:#26251F;

  /* --- Dérivées : éclaircies et assombries des trois couleurs ci-dessus --- */
  --vert-brume:#F1F8E6;
  --vert-voile:#DCEFC0;
  --vert-vif:#A8D65C;
  --bleu-brume:#EDF4FB;
  --bleu-voile:#CBE0F2;
  --bleu-nuit:#12324A;
  --bleu-abysse:#0B2233;
  --foret:#1B3A22;
  --sable-clair:#FBF8F1;

  --blanc:#FFFFFF;
  --gris:#5B5647;
  --gris-clair:#8A8271;

  /* --- Surfaces --- */
  --fond:#FFFFFF;
  --surface:#FFFFFF;
  --bordure:rgba(38,37,31,.10);
  --bordure-forte:rgba(38,37,31,.16);

  /* --- Élévation : ombres teintées de bleu, jamais du gris neutre --- */
  --ombre-1:0 1px 2px rgba(18,50,74,.06), 0 2px 6px rgba(18,50,74,.05);
  --ombre-2:0 2px 6px rgba(18,50,74,.06), 0 10px 24px rgba(18,50,74,.08);
  --ombre-3:0 4px 12px rgba(18,50,74,.08), 0 20px 48px rgba(18,50,74,.12);
  --ombre-4:0 8px 24px rgba(18,50,74,.10), 0 36px 80px rgba(18,50,74,.18);
  --lueur-verte:0 12px 32px rgba(125,185,40,.34);
  --lueur-bleue:0 12px 32px rgba(78,151,209,.32);

  /* --- Rayons --- */
  --r-xs:8px;
  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --r-xl:36px;
  --r-rond:999px;

  /* --- Rythme vertical, fluide --- */
  --pas-1:clamp(.5rem, .4rem + .3vw, .75rem);
  --pas-2:clamp(.85rem, .7rem + .5vw, 1.25rem);
  --pas-3:clamp(1.25rem, 1rem + .9vw, 2rem);
  --pas-4:clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --pas-5:clamp(3rem, 2rem + 4.5vw, 6.5rem);
  --marge-page:clamp(16px, 4.5vw, 32px);
  --largeur-max:1180px;

  /* --- Typographie : valeurs arabes par défaut, langue du site --- */
  --titre:'Noto Naskh Arabic', serif;
  --texte:'Noto Naskh Arabic', serif;
  --latin:'Oswald', sans-serif;
  --interligne:1.9;
  --taille:17.5px;
  --graisse-titre:700;

  /* --- Sélecteur de langue : le composant vit dans selecteur-langue.css,
         on ne lui donne que la couleur d'accent de cette interface --- */
  --lang-actif:var(--vert);
  --lang-fond:var(--sable-clair);
  --lang-bord:var(--sable-fonce);
  --lang-texte:var(--gris);

  /* --- Mouvement --- */
  --courbe:cubic-bezier(.22,.61,.36,1);
  --courbe-douce:cubic-bezier(.4,0,.2,1);
  --duree:.35s;
}

/* Latin : Oswald pour les titres, Inter pour le corps, rythme plus serré */
html[lang="fr"], html[lang="en"]{
  --titre:'Oswald', sans-serif;
  --texte:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --interligne:1.68;
  --taille:16.5px;
  --graisse-titre:600;
}

/* ===========================================================
   2. Base
   =========================================================== */
*, *::before, *::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--texte);
  font-size:var(--taille);
  line-height:var(--interligne);
  color:var(--encre);
  background:var(--fond);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.bg-sand{background:var(--sable-clair)}
img, svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button, input, select, textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .slide.active .slide-fond,
  .slide.active .hero-texte > *,
  .hero-logo, .slide-icon{animation:none !important}
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ===========================================================
   3. Typographie
   =========================================================== */
h1, h2, h3, h4{font-family:var(--titre);font-weight:var(--graisse-titre);line-height:1.24;text-wrap:balance}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{line-height:1.5}
.t-affiche{font-size:clamp(2rem, 1.2rem + 4.4vw, 4rem)}
.t-titre  {font-size:clamp(1.6rem, 1.15rem + 2.2vw, 2.6rem)}
.t-sous   {font-size:clamp(1.1rem, 1rem + .6vw, 1.35rem)}
.t-lead{font-size:clamp(1.02rem, .97rem + .35vw, 1.18rem);color:var(--gris);max-width:62ch}
.t-mesure{max-width:66ch}

/* Le mot mis en avant dans un titre : soulignement organique, pas un surlignage */
.accent{color:var(--vert-vif);font-style:normal;position:relative;white-space:nowrap}
.accent::after{
  content:'';position:absolute;inset-inline:-2px;bottom:.02em;height:.28em;
  background:currentColor;opacity:.22;border-radius:var(--r-rond);z-index:-1;
}

/* Un nombre se lit de gauche à droite quelle que soit la langue. Sans cette
   isolation, « 2 483 » s'affiche « 483 2 » dans une page arabe : l'espace est
   un caractère neutre que l'algorithme bidirectionnel rattache au mauvais côté. */
.nombre, .impact-num, .teaser-num, .bulle b, .ring span, .filter-count{
  direction:ltr;unicode-bidi:isolate;
}
[dir="rtl"] .filter-count{direction:rtl;unicode-bidi:normal}

/* ===========================================================
   4. Utilitaires
   =========================================================== */
.container{width:min(100% - var(--marge-page) * 2, var(--largeur-max));margin-inline:auto}
.section{padding-block:var(--pas-5);position:relative}
.section-serree{padding-block:var(--pas-4)}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:300;
  background:var(--vert-fonce);color:var(--blanc);padding:14px 24px;
  border-radius:0 0 var(--r-s) var(--r-s);font-weight:600;
}
.skip-link:focus{inset-inline-start:var(--marge-page)}

/* Chapeau de section : pastille + titre + accroche */
.entete{max-width:64ch;margin-bottom:var(--pas-4)}
.entete.centree{margin-inline:auto;text-align:center}
.pastille{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vert-fonce);background:var(--vert-brume);
  border:1px solid var(--vert-voile);
  padding:6px 14px;border-radius:var(--r-rond);margin-bottom:var(--pas-2);
}
html[lang="ar"] .pastille{text-transform:none;letter-spacing:0;font-size:.9rem}
.pastille--clair{color:var(--blanc);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.pastille .puce{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.entete h2{color:var(--bleu-nuit);margin-bottom:var(--pas-2)}
.entete p{color:var(--gris)}
.sur-sombre .entete h2{color:var(--blanc)}
.sur-sombre .entete p{color:rgba(255,255,255,.78)}

/* Apparition au défilement : ajoutée par le script, jamais requise pour lire */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--courbe), transform .7s var(--courbe)}
[data-reveal].vu{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none}}
.no-js [data-reveal]{opacity:1;transform:none}

/* Grain très léger réservé aux aplats sombres, pour éviter le dégradé plastique.
   Posé sur ::after et non ::before : les sections colorées utilisent déjà
   ::before pour leur dégradé, et les deux règles fusionneraient — l'opacité
   du grain s'appliquerait au dégradé et délaverait toute la section. */
.grain::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* ===========================================================
   5. En-tête
   =========================================================== */
.entete-site{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--duree) var(--courbe-douce), border-color var(--duree), background var(--duree);
}
/* Le liseré vert du logo n'apparaît qu'une fois la page défilée : au repos
   l'en-tête se fond dans le hero. */
.entete-site.defile{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--vert);
  box-shadow:var(--ombre-2);
}
.nav{display:flex;align-items:center;gap:var(--pas-2);min-height:82px;padding-block:10px}
.nav > nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.logo{display:flex;align-items:center;flex-shrink:0;border-radius:var(--r-s)}
.logo img{height:58px;width:auto;transition:transform var(--duree) var(--courbe)}
.logo:hover img{transform:scale(1.05) rotate(-1.5deg)}

.nav-liens{display:flex;align-items:center;gap:2px;list-style:none}
.nav-liens a{
  display:block;position:relative;white-space:nowrap;
  font-weight:500;padding:10px 15px;border-radius:var(--r-s);
  transition:color .2s, background .2s;
}
.nav-liens a::after{
  content:'';position:absolute;bottom:5px;inset-inline-start:50%;
  width:0;height:2.5px;border-radius:var(--r-rond);background:var(--vert);
  transform:translateX(-50%);transition:width .28s var(--courbe);
}
[dir="rtl"] .nav-liens a::after{transform:translateX(50%)}
.nav-liens a:hover{color:var(--vert-fonce);background:var(--vert-brume)}
.nav-liens a:hover::after{width:22px}
.nav-liens a.active{color:var(--vert-fonce);font-weight:600}
.nav-liens a.active::after{width:22px}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.menu-bascule{
  display:none;width:46px;height:46px;border:1px solid var(--bordure);
  border-radius:var(--r-s);background:var(--blanc);cursor:pointer;
  align-items:center;justify-content:center;color:var(--vert-fonce);
}
.menu-bascule .barres{position:relative;width:20px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.menu-bascule .barres::before,.menu-bascule .barres::after{
  content:'';position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .28s var(--courbe);
}
.menu-bascule .barres::before{top:-6px}
.menu-bascule .barres::after{top:6px}
.menu-bascule[aria-expanded="true"] .barres{background:transparent}
.menu-bascule[aria-expanded="true"] .barres::before{transform:translateY(6px) rotate(45deg)}
.menu-bascule[aria-expanded="true"] .barres::after{transform:translateY(-6px) rotate(-45deg)}

/* Accès à l'espace de gestion : un bouton rond, icône seule.
   Discret au repos — c'est une commande de service, pas un appel à l'action —
   mais il prend les couleurs du logo au survol. */
.btn-icone{
  display:inline-grid;place-items:center;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;
  color:var(--bleu-nuit);background:var(--surface);
  border:1px solid var(--bordure-forte);
  transition:color .2s, background .2s, border-color .2s, transform .2s var(--courbe), box-shadow .25s;
}
.btn-icone svg{width:21px;height:21px}
.btn-icone:hover{
  color:var(--blanc);background:linear-gradient(140deg, var(--bleu), var(--bleu-fonce));
  border-color:transparent;transform:translateY(-2px);box-shadow:var(--lueur-bleue);
}
/* Session ouverte : le bouton se teinte du violet du back-office, pour qu'on
   ne confonde pas « se connecter » et « je suis déjà dans la gestion ». */
.btn-icone.est-connecte{color:#7B1FA2;background:#F5EAF9;border-color:rgba(123,31,162,.2)}
.btn-icone.est-connecte:hover{
  color:var(--blanc);background:linear-gradient(140deg, #7B1FA2, #4A0072);
  box-shadow:0 12px 32px rgba(123,31,162,.32);
}

/* ===========================================================
   6. Boutons
   =========================================================== */
.btn{
  --btn-fond:var(--vert);
  --btn-texte:var(--blanc);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 30px;border:0;border-radius:var(--r-rond);
  font-family:var(--texte);font-size:1rem;font-weight:600;cursor:pointer;
  background:var(--btn-fond);color:var(--btn-texte);
  transition:transform .2s var(--courbe), box-shadow .25s var(--courbe), background .2s;
  overflow:hidden;isolation:isolate;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(140deg, rgba(255,255,255,.28), transparent 55%);
  opacity:0;transition:opacity .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}

.btn-vert{--btn-fond:linear-gradient(135deg, var(--vert), var(--vert-fonce))}
.btn-vert:hover{box-shadow:var(--lueur-verte)}
.btn-bleu{--btn-fond:linear-gradient(135deg, var(--bleu), var(--bleu-fonce))}
.btn-bleu:hover{box-shadow:var(--lueur-bleue)}
.btn-fantome{
  --btn-fond:transparent;--btn-texte:var(--blanc);
  border:2px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);
}
.btn-fantome:hover{background:var(--blanc);color:var(--bleu-fonce);border-color:var(--blanc)}
.btn-clair{--btn-fond:var(--blanc);--btn-texte:var(--encre);border:1px solid var(--bordure-forte)}
.btn-clair:hover{background:var(--sable);box-shadow:var(--ombre-2)}
.btn-cancel{--btn-fond:var(--sable);--btn-texte:var(--encre)}
.btn-petit{min-height:40px;padding:9px 20px;font-size:.9rem}
/* Compatibilité avec le nom historique des classes */
.btn-green{--btn-fond:linear-gradient(135deg, var(--vert), var(--vert-fonce));--btn-texte:var(--blanc)}
.btn-green:hover{box-shadow:var(--lueur-verte)}
.btn-blue{--btn-fond:linear-gradient(135deg, var(--bleu), var(--bleu-fonce));--btn-texte:var(--blanc)}
.btn-blue:hover{box-shadow:var(--lueur-bleue)}
.btn-blue-outline{--btn-fond:transparent;--btn-texte:var(--blanc);border:2px solid rgba(255,255,255,.55)}
.btn-blue-outline:hover{background:var(--blanc);color:var(--bleu-fonce)}

/* ===========================================================
   7. Hero
   =========================================================== */
.hero{position:relative;color:var(--blanc);isolation:isolate;overflow:clip}
.slider{display:grid}
.slide{
  grid-area:1/1;position:relative;isolation:isolate;overflow:clip;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--courbe), visibility .9s;
}
.slide.active{opacity:1;visibility:visible;pointer-events:auto}

/* --- Fonds sans photo : ambiances tirées des couleurs du logo. Les taches
   floues remplacent une image — sur une connexion lente, rien à télécharger. */
.slide-decor{position:absolute;inset:0;z-index:-2}
.slide-nuit .slide-decor{
  background:
    radial-gradient(60% 70% at 78% 18%, rgba(168,214,92,.34), transparent 62%),
    radial-gradient(52% 62% at 12% 82%, rgba(78,151,209,.42), transparent 60%),
    linear-gradient(155deg, var(--bleu-nuit) 0%, var(--bleu-abysse) 100%);
}
.slide-vert .slide-decor{
  background:
    radial-gradient(58% 66% at 80% 22%, rgba(214,240,168,.34), transparent 60%),
    radial-gradient(50% 60% at 14% 80%, rgba(125,185,40,.5), transparent 62%),
    linear-gradient(155deg, #29541A 0%, #16300F 100%);
}
.slide-bleu .slide-decor{
  background:
    radial-gradient(56% 64% at 76% 20%, rgba(125,185,40,.3), transparent 60%),
    radial-gradient(54% 62% at 16% 84%, rgba(78,151,209,.55), transparent 62%),
    linear-gradient(155deg, #205383 0%, #0F2C44 100%);
}
.slide-sable .slide-decor{
  background:
    radial-gradient(60% 68% at 74% 16%, rgba(212,160,23,.3), transparent 60%),
    radial-gradient(52% 60% at 14% 84%, rgba(125,185,40,.34), transparent 62%),
    linear-gradient(155deg, #3F3417 0%, #241C0C 100%);
}

/* --- Fond photo --- */
.slide-photo{background:var(--bleu-abysse)}
.slide-fond{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* Lent panoramique-zoom sur la photo active : le carrousel respire au lieu de
   présenter une image figée. Il ne démarre qu'une fois la diapositive visible,
   sinon les quatre photos s'animeraient en même temps sans qu'on les voie. */
.slide.active .slide-fond{animation:panoramique 14s ease-out both}
@keyframes panoramique{
  from{transform:scale(1.12) translate3d(0,1.5%,0)}
  to{transform:scale(1) translate3d(0,0,0)}
}

/* Voile de lisibilité. Sans lui, un texte blanc sur une photo claire devient
   illisible — et on ne maîtrise pas les photos que déposera l'équipe. Il part
   du côté du texte : inset-inline-start suit donc le sens de lecture. */
.slide-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to var(--sens-voile, left),
      rgba(11,34,51,.86) 0%, rgba(11,34,51,.72) 38%, rgba(11,34,51,.32) 68%, rgba(11,34,51,.18) 100%),
    linear-gradient(to top, rgba(11,34,51,.55) 0%, transparent 42%),
    linear-gradient(to bottom, rgba(11,34,51,.34) 0%, transparent 26%);
}
[dir="rtl"] .slide-voile{--sens-voile:right}
[dir="ltr"] .slide-voile{--sens-voile:left}
/* Sous 980px la diapositive passe sur une colonne : le texte occupe toute la
   largeur, et un voile latéral ne protège plus rien. Il devient vertical,
   plus dense en bas, là où le texte se trouve désormais. */
@media(max-width:980px){
  .slide-voile{
    background:linear-gradient(to bottom,
      rgba(11,34,51,.5) 0%, rgba(11,34,51,.6) 34%, rgba(11,34,51,.88) 100%);
  }
}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:var(--pas-4);align-items:center;
  padding-block:clamp(56px, 7vw, 104px) clamp(120px, 14vw, 190px);
  min-height:min(88vh, 720px);
}
.hero-texte{position:relative;z-index:2}
/* Entrée échelonnée du texte : le regard suit l'ordre de lecture au lieu de
   recevoir tout le bloc d'un coup. */
.slide.active .hero-texte > *{animation:monteTexte .8s var(--courbe) both}
.slide.active .hero-texte > *:nth-child(1){animation-delay:.12s}
.slide.active .hero-texte > *:nth-child(2){animation-delay:.24s}
.slide.active .hero-texte > *:nth-child(3){animation-delay:.36s}
.slide.active .hero-texte > *:nth-child(4){animation-delay:.48s}
@keyframes monteTexte{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Sur une photo, le texte gagne une ombre portée discrète : le voile fait
   l'essentiel du travail, l'ombre couvre le cas d'une zone claire résiduelle. */
/* Sur photo, la pastille de surtitre passe du verre clair au verre teinté :
   à 12 % de blanc elle disparaissait sur une image claire. */
.slide-photo .eyebrow{
  background:rgba(11,34,51,.42);
  border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(10px) saturate(1.2);
}
.slide-photo h1{text-shadow:0 2px 24px rgba(11,34,51,.5)}
.slide-photo .hero-texte p{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(11,34,51,.55)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  padding:8px 18px;border-radius:var(--r-rond);
  font-size:.92rem;font-weight:600;margin-bottom:var(--pas-3);
}
.arrow-up{
  width:0;height:0;flex-shrink:0;
  border-inline:6px solid transparent;border-bottom:9px solid var(--vert-vif);
}
.hero h1{font-size:clamp(2rem, 1.1rem + 4.6vw, 3.9rem);margin-bottom:var(--pas-2);letter-spacing:-.01em}
html[lang="ar"] .hero h1{letter-spacing:0}
.hero h1 em{font-style:normal;color:var(--vert-vif)}
.slide-vert .hero h1 em{color:#FFE9A8}
.hero p{font-size:clamp(1.02rem, .95rem + .5vw, 1.2rem);color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:var(--pas-3)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------------
   Colonne visuelle : médaillon à pictogramme, ou carte de la marque.

   Les deux occupent EXACTEMENT la même empreinte. Sans cela, le visuel
   changeait de taille d'une diapositive à l'autre et la page sautait à
   chaque passage — un carrousel doit défiler, pas tressauter.
   --------------------------------------------------------------- */
.hero-visuel{
  position:relative;z-index:2;
  width:min(100%, 340px);aspect-ratio:1;
  margin-inline:auto;display:grid;place-items:center;
}
.hero-visuel > *{grid-area:1/1;width:100%;aspect-ratio:1}

.hero-logo{
  position:relative;
  display:grid;place-items:center;padding:var(--pas-4);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-xl);
  box-shadow:var(--ombre-4);
  animation:flotte 9s ease-in-out infinite;
}
.hero-logo img{width:100%;height:auto;max-height:none}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.slide-icon{
  position:relative;border-radius:50%;
  display:grid;place-items:center;
  font-size:clamp(3.4rem, 8vw, 5.6rem);line-height:1;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  box-shadow:var(--ombre-3);
  animation:flotte 9s ease-in-out infinite;
}
/* Médaillon portant une illustration plutôt qu'un pictogramme. Le disque
   passe en clair : une illustration est presque toujours dessinée pour un
   fond blanc, elle disparaîtrait sur du verre sombre. */
.slide-icon-image{
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.7);
  backdrop-filter:none;
  padding:16%;
}
.slide-icon-image img{
  width:100%;height:100%;object-fit:contain;
  /* L'illustration ne remplit pas le disque : elle s'y pose. */
}

/* ---------------------------------------------------------------
   Adaptation au fond : un médaillon translucide se lit très bien sur un
   dégradé maîtrisé, et disparaît sur une photo dont on ne sait rien.
   Sur photo, on lui donne donc de la matière plutôt que de la transparence.
   --------------------------------------------------------------- */

/* Assise sombre sous le visuel : elle détache le médaillon d'une photo
   claire sans assombrir toute la diapositive. */
.slide-photo .hero-visuel::before{
  content:'';position:absolute;z-index:-1;
  inset:-18%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(11,34,51,.55), rgba(11,34,51,.22) 62%, transparent 100%);
}

.slide-photo .slide-icon{
  background:rgba(11,34,51,.34);
  border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--ombre-4), inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Anneau de lumière : le médaillon garde un contour net même sur une photo
   très contrastée, où une simple bordure se perdrait. */
.slide-photo .slide-icon::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
}
.slide-photo .slide-icon{position:relative}

.slide-photo .hero-logo,
.slide-photo .slide-icon-image{
  background:rgba(255,255,255,.96);
  box-shadow:var(--ombre-4), 0 0 0 1px rgba(255,255,255,.35), 0 0 0 12px rgba(255,255,255,.08);
}
/* L'anneau de lumière est fait pour le verre teinté : il n'a pas lieu d'être
   sur un disque clair, qui se détache déjà. */
.slide-photo .slide-icon-image::after{display:none}

/* Commandes du carrousel, regroupées au bas du hero */
.hero-commandes{
  position:absolute;bottom:clamp(78px, 10vw, 118px);inset-inline:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding-inline:var(--marge-page);
}
.slider-arrow{
  width:48px;height:48px;border-radius:50%;cursor:pointer;flex-shrink:0;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);color:var(--blanc);font-size:1.25rem;
  display:grid;place-items:center;transition:background .2s, transform .2s;
}
.slider-arrow:hover{background:rgba(255,255,255,.32);transform:scale(1.08)}

/* Indicateurs : des barres de progression, pas des points */
.slider-dots{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.dot{
  width:44px;height:4px;padding:0;border:0;cursor:pointer;border-radius:var(--r-rond);
  background:rgba(255,255,255,.32);position:relative;overflow:hidden;transition:width .35s var(--courbe);
}
.dot::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--blanc);border-radius:inherit}
.dot.active{width:72px}
.dot.active::after{width:100%;transition:width 6s linear}
@media (prefers-reduced-motion: reduce){.dot.active::after{transition:none}}

.dunes{position:absolute;bottom:-1px;inset-inline:0;width:100%;z-index:4;pointer-events:none}

/* ===========================================================
   8. Qui sommes-nous
   =========================================================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--pas-4);align-items:center}
.about-title{font-size:clamp(1.6rem,1.15rem + 2.2vw,2.6rem);color:var(--bleu-nuit);margin-bottom:var(--pas-2)}
.about-text{color:var(--gris);max-width:60ch}
.about-text + .about-text{margin-top:var(--pas-2)}
.about-card{
  position:relative;background:var(--sable-clair);border:1px solid var(--sable-fonce);
  border-radius:var(--r-l);padding:var(--pas-3) var(--pas-3) var(--pas-3) ;
  padding-inline-start:calc(var(--pas-3) + 10px);overflow:hidden;
}
.about-card::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:linear-gradient(var(--vert),var(--bleu))}
.about-card h3{color:var(--vert-fonce);font-size:1.24rem;margin-bottom:8px}
.about-card p{color:var(--gris);font-size:.97rem}
.about-card + .about-card{margin-top:var(--pas-2)}

/* ===========================================================
   9. Programmes
   =========================================================== */
.programs{background:linear-gradient(180deg, var(--sable-clair), var(--sable))}
.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));gap:var(--pas-2)}
.card{
  position:relative;background:var(--surface);border:1px solid var(--bordure);
  border-radius:var(--r-l);padding:var(--pas-3);overflow:hidden;
  transition:transform .3s var(--courbe), box-shadow .3s var(--courbe), border-color .3s;
}
/* Voile de couleur qui monte au survol : le fond ne saute pas d'un coup */
.card::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(160deg, var(--vert-brume), transparent 62%);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--ombre-3);border-color:var(--vert-voile)}
.card:hover::before{opacity:1}
.card > *{position:relative;z-index:1}
.card .icon{
  width:58px;height:58px;border-radius:var(--r-m);display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:var(--pas-2);
  background:linear-gradient(150deg, var(--vert-voile), var(--vert-brume));
  box-shadow:inset 0 0 0 1px rgba(125,185,40,.22);
}
.card:nth-child(even) .icon{
  background:linear-gradient(150deg, var(--bleu-voile), var(--bleu-brume));
  box-shadow:inset 0 0 0 1px rgba(78,151,209,.22);
}
.card h3{color:var(--bleu-nuit);font-size:1.08rem;margin-bottom:6px}
.card p{font-size:.93rem;color:var(--gris)}

/* ===========================================================
   10. Projets en cours
   =========================================================== */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--pas-2)}
.project{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:var(--pas-3);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:12px;box-shadow:var(--ombre-1);
  transition:transform .3s var(--courbe), box-shadow .3s var(--courbe);
}
.project:hover{transform:translateY(-6px);box-shadow:var(--ombre-3)}
.ring{
  --p:0;--c:var(--vert);
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;flex-shrink:0;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--sable-fonce) 0);
}
.ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--surface);box-shadow:var(--ombre-1)}
.ring span{position:relative;font-family:var(--titre);font-weight:700;font-size:1.5rem;color:var(--bleu-nuit)}
.project h3{color:var(--bleu-nuit);font-size:1.1rem}
.project .meta{
  font-size:.82rem;color:var(--vert-fonce);font-weight:600;
  background:var(--vert-brume);border-radius:var(--r-rond);padding:4px 14px;
}
.project p{font-size:.93rem;color:var(--gris)}

/* ===========================================================
   11. Chiffres
   =========================================================== */
.impact{position:relative;color:var(--blanc);overflow:clip;isolation:isolate}
.impact::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(50% 70% at 15% 20%, rgba(125,185,40,.4), transparent 60%),
    radial-gradient(46% 62% at 88% 78%, rgba(78,151,209,.36), transparent 60%),
    linear-gradient(150deg, var(--foret), #0F2416);
}
.impact-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));gap:var(--pas-3);text-align:center}
.impact-cell{position:relative;padding-inline:var(--pas-1)}
.impact-cell + .impact-cell::before{
  content:'';position:absolute;inset-block:12%;inset-inline-start:0;width:1px;background:rgba(255,255,255,.16);
}
.impact-num{
  font-family:var(--titre);font-weight:700;line-height:1;
  font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  background:linear-gradient(120deg, var(--blanc), var(--vert-vif));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.impact-label{font-size:.94rem;color:rgba(255,255,255,.8);margin-top:6px}

/* ===========================================================
   12. Appel final
   =========================================================== */
.donate{
  position:relative;overflow:hidden;isolation:isolate;color:var(--blanc);
  border-radius:var(--r-xl);padding:clamp(38px, 6vw, 76px) clamp(24px, 5vw, 60px);text-align:center;
}
.donate::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(50% 80% at 80% 10%, rgba(168,214,92,.36), transparent 60%),
    linear-gradient(140deg, var(--bleu), var(--bleu-fonce));
}
.donate h2{font-size:clamp(1.6rem,1.1rem + 2.6vw,2.6rem);margin-bottom:var(--pas-2)}
.donate p{max-width:56ch;margin:0 auto var(--pas-3);color:rgba(255,255,255,.88)}

/* ===========================================================
   13. Actualités
   =========================================================== */
.actus{background:var(--surface)}
.actus-tete{display:flex;align-items:flex-end;gap:var(--pas-3);flex-wrap:wrap;margin-bottom:var(--pas-4)}
.actus-tete .entete{margin-bottom:0;flex:1 1 340px}
.actus-nav{display:flex;gap:10px;align-items:center;margin-inline-start:auto}
.actus-fleche{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid var(--bordure-forte);background:var(--surface);color:var(--bleu-nuit);
  font-size:1.2rem;display:grid;place-items:center;
  transition:background .2s, border-color .2s, color .2s, opacity .2s, transform .2s;
}
.actus-fleche:hover:not([disabled]){background:var(--vert);border-color:var(--vert);color:var(--blanc);transform:scale(1.06)}
.actus-fleche[disabled]{opacity:.3;cursor:default}

.actus-piste{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(88%, 340px);
  gap:var(--pas-2);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-block-end:10px;
  scrollbar-width:thin;scrollbar-color:var(--sable-fonce) transparent;
}
@media (prefers-reduced-motion: reduce){.actus-piste{scroll-behavior:auto}}
/* Largeur FIXE et non minmax(0,…) : avec un minimum de 0 la grille écrase les
   colonnes pour tout faire tenir, et il n'y a plus rien à faire défiler. */
@media(min-width:700px){.actus-piste{grid-auto-columns:calc((100% - var(--pas-2)) / 2)}}
@media(min-width:1020px){.actus-piste{grid-auto-columns:calc((100% - var(--pas-2) * 2) / 3)}}

.actu-carte{
  scroll-snap-align:start;position:relative;min-width:0;
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--courbe), box-shadow .3s var(--courbe), border-color .3s;
}
.actu-carte:hover{transform:translateY(-6px);box-shadow:var(--ombre-3);border-color:var(--vert-voile)}
.actu-visuel{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg, var(--vert-brume), var(--bleu-brume));
}
.actu-visuel img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--courbe)}
.actu-carte:hover .actu-visuel img{transform:scale(1.05)}
.actu-visuel .repli{
  width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;
  background:rgba(255,255,255,.8);box-shadow:var(--ombre-2);
}
.actu-carte:has(.repli) .actu-visuel{aspect-ratio:16/6}
.actu-corps{padding:var(--pas-3);display:flex;flex-direction:column;gap:10px;flex:1}
.actu-date{font-size:.83rem;color:var(--vert-fonce);font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actu-carte h3{font-size:1.1rem;color:var(--bleu-nuit)}
.actu-carte p{font-size:.94rem;color:var(--gris);flex:1}
.actu-lien{font-weight:600;color:var(--vert-fonce);font-size:.93rem;display:inline-flex;align-items:center;gap:8px}
.actu-lien span{transition:transform .25s var(--courbe)}
.actu-carte:hover .actu-lien span{transform:translateX(-4px)}
[dir="ltr"] .actu-carte:hover .actu-lien span{transform:translateX(4px)}
.actu-epingle{
  display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  background:rgba(212,160,23,.16);color:#8A6512;border-radius:var(--r-rond);padding:3px 11px;
}
/* Avis « article non traduit » : informe sans dramatiser, on n'est pas
   devant une erreur mais devant une limite assumée du contenu. */
.avis-langue{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--pas-3);
  background:var(--bleu-brume);border:1px solid var(--bleu-voile);
  border-radius:var(--r-m);padding:16px 20px;
}
.avis-icone{font-size:1.3rem;line-height:1.4;flex-shrink:0}
.avis-langue strong{color:var(--bleu-fonce);display:block;margin-bottom:2px}
.avis-langue p{font-size:.94rem;color:var(--gris);margin-bottom:12px}
.avis-langue-liens{display:flex;gap:8px;flex-wrap:wrap}

/* Pastille de langue sur une carte : signale d'un coup d'œil que le texte
   n'est pas dans la langue du site. */
.etiquette-langue{
  font-family:var(--latin);font-size:.68rem;font-weight:600;letter-spacing:.08em;
  background:var(--bleu-voile);color:var(--bleu-fonce);
  border-radius:var(--r-rond);padding:2px 9px;line-height:1.6;
}

/* Drapeaux de langue dans les listes du back-office */
.langues-dispo{display:inline-flex;gap:4px}
.langue-jeton{
  font-family:var(--latin);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  border-radius:var(--r-rond);padding:2px 8px;
  background:var(--vert-brume);color:var(--vert-fonce);
}
.langue-jeton.absente{background:transparent;color:var(--gris-clair);box-shadow:inset 0 0 0 1px var(--bordure)}

.actus-grille{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:var(--pas-2)}

.actu-article{max-width:74ch;margin-inline:auto}
.actu-article .actu-visuel{aspect-ratio:16/8;border-radius:var(--r-l);margin-bottom:var(--pas-3)}
.actu-entete{margin-bottom:var(--pas-3)}
.actu-entete h1{font-size:clamp(1.7rem,1.2rem + 2.6vw,2.6rem);color:var(--bleu-nuit);margin:10px 0 12px}
.actu-chapo{font-size:1.1rem;color:var(--gris);font-weight:500}
/* Mise en forme du corps d'article, tel que produit par l'éditeur.
   Trix émet des <div> de bloc plutôt que des <p> : on stylise les deux. */
.actu-contenu{font-size:1.03rem}
.actu-contenu > p,
.actu-contenu > div{margin-bottom:var(--pas-2)}
.actu-contenu > p:last-child,
.actu-contenu > div:last-child{margin-bottom:0}
.actu-contenu h1,
.actu-contenu h2{font-size:clamp(1.25rem,1.1rem + .9vw,1.6rem);color:var(--bleu-nuit);margin:var(--pas-3) 0 var(--pas-2)}
.actu-contenu h3{font-size:1.15rem;color:var(--bleu-nuit);margin:var(--pas-3) 0 var(--pas-1)}
.actu-contenu ul,
.actu-contenu ol{padding-inline-start:1.5em;margin-bottom:var(--pas-2)}
.actu-contenu li{margin-bottom:6px}
.actu-contenu blockquote{
  margin:var(--pas-2) 0;padding:var(--pas-2) var(--pas-3);
  background:var(--sable-clair);border-inline-start:4px solid var(--vert);
  border-radius:0 var(--r-s) var(--r-s) 0;color:var(--gris);
}
[dir="rtl"] .actu-contenu blockquote{border-radius:var(--r-s) 0 0 var(--r-s)}
.actu-contenu pre{
  background:var(--bleu-nuit);color:var(--blanc);padding:var(--pas-2);
  border-radius:var(--r-s);overflow-x:auto;font-size:.9rem;margin-bottom:var(--pas-2);
  direction:ltr;text-align:left;
}
.actu-contenu a{color:var(--bleu-fonce);text-decoration:underline;text-underline-offset:3px}
.actu-contenu a:hover{color:var(--vert-fonce)}
.actu-contenu strong{font-weight:700}
.actu-retour{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--vert-fonce);margin-bottom:var(--pas-3)}
.actu-retour:hover{gap:14px;transition:gap .2s}

/* ===========================================================
   14. Renvoi vers فرص الخير
   =========================================================== */
.fors-teaser{background:linear-gradient(180deg, var(--sable), var(--sable-clair))}
.teaser{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-xl);
  padding:clamp(28px, 4vw, 52px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);
  gap:var(--pas-4);align-items:center;box-shadow:var(--ombre-2);
}
.teaser h2{font-size:clamp(1.5rem,1.1rem + 2vw,2.2rem);color:var(--bleu-nuit);margin-bottom:12px}
.teaser p{color:var(--gris);margin-bottom:var(--pas-3)}
.teaser-compteur{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  border-radius:var(--r-l);padding:var(--pas-3) var(--pas-2);color:var(--blanc);
}
.teaser-compteur::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 30% 10%, rgba(168,214,92,.5), transparent 62%),
    linear-gradient(150deg, var(--vert), var(--vert-fonce));
}
.teaser-num{font-family:var(--titre);font-weight:700;font-size:clamp(2.4rem,1.8rem + 3vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.teaser-label{font-size:.92rem;color:rgba(255,255,255,.9);margin-top:8px}

/* ===========================================================
   15. En-tête des pages intérieures
   =========================================================== */
.page-hero{
  position:relative;overflow:clip;isolation:isolate;text-align:center;color:var(--blanc);
  padding-block:clamp(52px, 7vw, 92px) clamp(96px, 12vw, 150px);
}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(52% 72% at 78% 16%, rgba(168,214,92,.32), transparent 60%),
    radial-gradient(50% 64% at 14% 84%, rgba(78,151,209,.44), transparent 60%),
    linear-gradient(155deg, var(--bleu-nuit), var(--bleu-abysse));
}
.page-hero h1{font-size:clamp(1.8rem,1.2rem + 3.4vw,3rem);margin-bottom:14px}
.page-hero p{max-width:66ch;margin-inline:auto;color:rgba(255,255,255,.85);font-size:1.06rem}

/* ===========================================================
   16. فرص الخير
   =========================================================== */
.filters{
  position:relative;z-index:6;margin-top:clamp(-90px, -9vw, -56px);
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:var(--pas-3);box-shadow:var(--ombre-3);
  display:flex;gap:var(--pas-2);flex-wrap:wrap;align-items:flex-end;
}
.filter-group{flex:1 1 190px;min-width:0}
.filter-group label{display:block;font-weight:600;font-size:.88rem;color:var(--bleu-nuit);margin-bottom:7px}
.filter-group select{
  width:100%;min-height:48px;padding:11px 15px;border-radius:var(--r-s);
  border:1.5px solid var(--sable-fonce);background:var(--surface);color:var(--encre);
  cursor:pointer;transition:border-color .2s, box-shadow .2s;
}
.filter-group select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 4px var(--vert-brume)}
.filter-count{font-weight:700;color:var(--vert-fonce);white-space:nowrap;padding-bottom:13px}
.add-btn-bar{white-space:nowrap}

.needs-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(305px, 1fr));gap:var(--pas-2);margin-top:var(--pas-4)}
.need{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--courbe), box-shadow .3s var(--courbe), border-color .3s;
}
.need:hover{transform:translateY(-6px);box-shadow:var(--ombre-3);border-color:var(--bleu-voile)}
.need-head{padding:var(--pas-2) var(--pas-3);display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--sable)}
.need-icon{
  width:54px;height:54px;border-radius:var(--r-m);display:grid;place-items:center;
  font-size:1.45rem;flex-shrink:0;
  background:linear-gradient(150deg, var(--bleu-voile), var(--bleu-brume));
  box-shadow:inset 0 0 0 1px rgba(78,151,209,.2);
}
.need-head h3{font-size:1.08rem;color:var(--bleu-nuit);line-height:1.4}
.need-head .wilaya{font-size:.85rem;color:var(--vert-fonce);font-weight:600}
.need-body{padding:var(--pas-2) var(--pas-3) var(--pas-3);flex:1;display:flex;flex-direction:column;gap:12px}
.need-body p{font-size:.94rem;color:var(--gris);flex:1}
.need-photo{width:100%;max-height:170px;object-fit:cover;border-radius:var(--r-s)}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:.77rem;font-weight:700;padding:4px 13px;border-radius:var(--r-rond);white-space:nowrap}
.badge-type{background:var(--bleu-brume);color:var(--bleu-fonce);box-shadow:inset 0 0 0 1px var(--bleu-voile)}
.badge-funding{background:#FDF0DC;color:#8A6512;box-shadow:inset 0 0 0 1px #F0DDB8}
.badge-study{background:var(--vert-brume);color:var(--vert-fonce);box-shadow:inset 0 0 0 1px var(--vert-voile)}
.badge-progress{background:var(--bleu-brume);color:var(--bleu-fonce)}
.badge-pending{background:#FCEBC8;color:#9A6A12}
.badge-done{background:#F3E8F8;color:#7B1FA2}
.need-meta{font-size:.83rem;color:var(--gris-clair);display:flex;gap:16px;flex-wrap:wrap}
.jauge{position:relative;height:26px;border-radius:var(--r-rond);background:var(--sable);overflow:hidden;display:flex;align-items:center}
.jauge-barre{position:absolute;inset-block:0;inset-inline-start:0;background:linear-gradient(90deg,var(--bleu),var(--bleu-fonce))}
.jauge span{position:relative;font-size:.78rem;font-weight:700;color:var(--blanc);padding-inline:14px;font-variant-numeric:tabular-nums}
.btn-contribute{
  margin-top:4px;width:100%;min-height:48px;padding:12px;border-radius:var(--r-s);
  border:1.5px solid var(--vert);background:transparent;color:var(--vert-fonce);
  font-family:var(--texte);font-weight:600;font-size:.95rem;cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s;
}
.btn-contribute:hover:not([disabled]){background:var(--vert);color:var(--blanc);box-shadow:var(--lueur-verte)}
.btn-contribute[disabled]{opacity:.5;cursor:default}
.no-results{display:none;text-align:center;padding:var(--pas-5) var(--pas-3);color:var(--gris-clair)}
.no-results.show{display:block}
.no-results .big{font-size:3rem;margin-bottom:12px}

.note{
  position:relative;margin-top:var(--pas-4);background:var(--surface);
  border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:var(--pas-3);padding-inline-start:calc(var(--pas-3) + 10px);overflow:hidden;
}
.note::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:linear-gradient(var(--vert),var(--bleu))}
.note h3{color:var(--vert-fonce);margin-bottom:8px;font-size:1.15rem}
.note p{font-size:.96rem;color:var(--gris)}

/* Étapes du workflow, reliées par un fil */
.workflow{margin-top:var(--pas-5)}
.workflow h2{color:var(--bleu-nuit);font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem);margin-bottom:var(--pas-3);text-align:center}
.steps{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--pas-2);position:relative}
.step{
  position:relative;background:var(--surface);border:1px solid var(--bordure);
  border-radius:var(--r-l);padding:var(--pas-3) var(--pas-2);text-align:center;
  transition:transform .3s var(--courbe), box-shadow .3s var(--courbe);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--ombre-2)}
.step .num{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  font-family:var(--titre);font-weight:700;font-size:1.2rem;color:var(--blanc);
  background:linear-gradient(140deg, var(--vert), var(--vert-fonce));box-shadow:var(--lueur-verte);
}
.step:nth-child(even) .num{background:linear-gradient(140deg, var(--bleu), var(--bleu-fonce));box-shadow:var(--lueur-bleue)}
.step h3{font-size:1.04rem;color:var(--bleu-nuit);margin-bottom:6px}
.step p{font-size:.89rem;color:var(--gris);line-height:1.65}

/* ===========================================================
   17. Messages et formulaires
   =========================================================== */
.flash{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 20px;border-radius:var(--r-m);margin-top:var(--pas-3);font-size:.96rem;
  box-shadow:var(--ombre-1);
}
.flash-succes{background:var(--vert-brume);color:var(--vert-fonce);border:1px solid var(--vert-voile)}
.flash-erreur{background:#FDECEA;color:#B03227;border:1px solid #F5C6C0}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:var(--pas-2)}
.form-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.form-field.full{grid-column:1/-1}
.form-field label{font-weight:600;font-size:.89rem;color:var(--bleu-nuit)}
.form-field label.required::after{content:" *";color:#C0392B}
.form-field input, .form-field select, .form-field textarea{
  width:100%;min-height:48px;padding:12px 15px;border-radius:var(--r-s);
  border:1.5px solid var(--sable-fonce);background:var(--surface);color:var(--encre);
  transition:border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none;border-color:var(--vert);box-shadow:0 0 0 4px var(--vert-brume);
}
.form-field textarea{resize:vertical;min-height:110px;line-height:1.65}
.form-field input[readonly]{background:var(--sable);color:var(--gris)}
.form-field input[type="file"]{padding:11px;background:var(--sable-clair);border-style:dashed;cursor:pointer}
.form-hint{font-size:.81rem;color:var(--gris-clair)}
.form-errors{list-style:none;color:#B03227;font-size:.85rem}
.form-errors li::before{content:"⚠ "}
.form-check .check-line{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.form-check input{width:20px;height:20px;min-height:0;accent-color:var(--vert)}
.field-ltr{direction:ltr;text-align:left}
[dir="rtl"] .field-ltr{text-align:right}

.review-notice{
  display:flex;gap:12px;align-items:flex-start;margin-top:var(--pas-2);
  background:#FCF6E8;border:1px solid #ECD9A8;border-radius:var(--r-m);
  padding:15px 18px;font-size:.9rem;color:#8A6512;
}

/* Modales */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;padding:var(--pas-2);overflow-y:auto;
  background:rgba(11,34,51,.62);backdrop-filter:blur(6px);
}
.modal-overlay.open{display:flex;align-items:flex-start;justify-content:center;animation:fondu .25s var(--courbe)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border-radius:var(--r-xl);max-width:680px;width:100%;
  margin:var(--pas-2) auto;box-shadow:var(--ombre-4);overflow:hidden;
  animation:monte .35s var(--courbe);
}
@keyframes monte{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{
  position:relative;overflow:hidden;isolation:isolate;color:var(--blanc);
  padding:var(--pas-3);display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.modal-head::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg, var(--bleu), var(--bleu-fonce))}
.modal-head.green::before{background:linear-gradient(140deg, var(--vert), var(--vert-fonce))}
.modal-head h2{font-size:1.25rem}
.modal-close{
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.2);color:var(--blanc);font-size:1.15rem;
  transition:background .2s, transform .2s;
}
.modal-close:hover{background:rgba(255,255,255,.36);transform:rotate(90deg)}
.modal-body{padding:var(--pas-3)}
.modal-actions{display:flex;gap:12px;margin-top:var(--pas-3);flex-wrap:wrap}
.modal-actions .btn{flex:1 1 160px}

/* ===== Section contact ===== */
.contact{background:linear-gradient(180deg, var(--sable-clair), var(--sable))}
.contact-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--pas-4);align-items:start}
.contact-infos{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:var(--pas-3);box-shadow:var(--ombre-1);
}
.contact-infos h3{color:var(--bleu-nuit);font-size:1.15rem;margin-bottom:var(--pas-2)}
.contact-liste{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:var(--pas-3)}
.contact-liste li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--gris)}
.contact-icone{
  flex-shrink:0;width:36px;height:36px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--vert-brume);font-size:1rem;
}
.contact-liste a{color:var(--bleu-fonce)}
.contact-liste a:hover{color:var(--vert-fonce);text-decoration:underline}
.carte-lien{width:100%}
.contact-formulaire{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:var(--pas-3);box-shadow:var(--ombre-2);
}
.contact-formulaire .btn{margin-top:var(--pas-3)}

/* Lien de localisation dans le pied de page */
.footer-carte{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:.9rem;font-weight:600;color:var(--vert-vif);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-rond);padding:8px 16px;
  transition:background .2s,border-color .2s;
}
.footer-carte:hover{background:rgba(255,255,255,.08);border-color:var(--vert-vif)}

/* ===========================================================
   18. Pied de page
   =========================================================== */
footer{
  position:relative;overflow:clip;isolation:isolate;margin-top:var(--pas-5);
  color:rgba(255,255,255,.76);padding-block:var(--pas-5) var(--pas-3);
}
footer::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(46% 62% at 12% 10%, rgba(125,185,40,.22), transparent 60%),
    radial-gradient(42% 56% at 90% 84%, rgba(78,151,209,.18), transparent 60%),
    linear-gradient(165deg, var(--foret), #0D1F13);
}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit, minmax(150px, 1fr));gap:var(--pas-4);margin-bottom:var(--pas-4)}
.footer-marque{display:flex;align-items:center;gap:14px;margin-bottom:var(--pas-2)}
.footer-marque img{height:56px;width:auto;background:var(--blanc);border-radius:var(--r-s);padding:5px}
footer h4{font-family:var(--titre);color:var(--blanc);margin-bottom:14px;font-size:1.08rem}
.footer-latin{font-family:var(--latin);font-weight:400;font-size:.8rem;letter-spacing:.06em;color:rgba(255,255,255,.6)}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{position:relative;transition:color .2s, padding .2s}
footer li a:hover{color:var(--vert-vif);padding-inline-start:6px}
.footer-contact{font-size:.95rem;line-height:2}
.footer-contact a:hover{color:var(--vert-vif)}
.copyright{
  border-top:1px solid rgba(255,255,255,.13);padding-top:var(--pas-3);
  text-align:center;font-size:.85rem;color:rgba(255,255,255,.55);
}

/* ===========================================================
   19. Adaptatif
   =========================================================== */
@media(max-width:1150px){
  .nav-liens a{padding:10px 11px;font-size:.96rem}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-block:var(--pas-4) clamp(156px,20vw,190px)}
  /* Le visuel passe au-dessus du texte : sur un écran étroit, ouvrir sur une
     image plutôt que sur un pavé de texte. Vaut pour les quatre diapositives. */
  .hero-visuel, .slide-visual{order:-1}
  .hero-visuel{width:min(58%, 210px)}
  .hero-logo{padding:var(--pas-3)}
  .slide-icon-image{padding:13%}
  .about-grid, .teaser, .contact-grille{grid-template-columns:1fr}
  .actus-tete{align-items:flex-start}
  .actus-nav{margin-inline-start:0}
}
/* Le menu bascule tôt : les libellés latins sont plus longs que l'arabe et
   six rubriques ne tiennent pas au-delà de cette largeur. */
@media(max-width:900px){
  .nav-liens{
    display:none;position:absolute;top:100%;inset-inline:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--surface);border-bottom:1px solid var(--bordure);
    padding:var(--pas-2) var(--marge-page) var(--pas-3);
    box-shadow:var(--ombre-3);
  }
  .nav-liens.open{display:flex;animation:deroule .28s var(--courbe)}
  @keyframes deroule{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav-liens a{padding:13px 14px;font-size:1.02rem}
  .nav-liens a::after{inset-inline-start:14px;transform:none}
  [dir="rtl"] .nav-liens a::after{transform:none}
  .menu-bascule{display:inline-flex}
  .impact-cell + .impact-cell::before{display:none}
}
@media(max-width:640px){
  .nav{min-height:70px}
  .logo img{height:46px}
  .hero-grid{padding-block:var(--pas-3) clamp(96px,20vw,130px);gap:var(--pas-3)}
  .hero-visuel{width:min(50%, 168px)}
  .hero h1{font-size:clamp(1.65rem, 1.1rem + 3.6vw, 2.2rem)}
  .hero p{font-size:.98rem}
  .eyebrow{font-size:.82rem;padding:6px 14px;margin-bottom:var(--pas-2)}
  .btn-icone{width:42px;height:42px}
  .btn-icone svg{width:19px;height:19px}
  .hero-actions .btn{flex:1 1 100%}
  .slider-arrow{width:44px;height:44px}
  .hero-commandes{gap:10px}
  .dot{width:28px}
  .dot.active{width:56px}
  .filters{flex-direction:column;align-items:stretch}
  .filter-group{flex:0 0 auto}
  .filter-count{padding-bottom:0;text-align:center}
  .modal{border-radius:var(--r-l)}
  .modal-actions .btn{flex:1 1 100%}
  .footer-grid{gap:var(--pas-3)}
  .actu-article .actu-visuel{border-radius:var(--r-m)}
}
/* Cibles tactiles : 44px minimum au doigt */
@media(hover:none), (max-width:900px){
  .btn, .btn-contribute, .actus-fleche, .slider-arrow, .modal-close, .menu-bascule{min-height:44px}
  .nav-liens a{min-height:44px;display:flex;align-items:center}
  .dot{height:22px;background:transparent;display:grid;align-items:center}
  .dot::before{content:'';height:4px;border-radius:var(--r-rond);background:rgba(255,255,255,.32)}
  .dot::after{inset-block:9px}
  .dot.active::before{background:rgba(255,255,255,.32)}
}