/* =========================================================
   CITYZ'Formation Côte d'Ivoire — elevate.css  (V3 « PRESTIGE »)
   Couche d'élévation institutionnelle + chaleureuse.
   Chargée APRÈS style.css : surcharge ciblée, charte CI respectée.
   Palette : orange #F47B20 · vert #3E9245 · crème · encre #241F1A
   Police : Poppins (inchangée)
   ========================================================= */

:root{
  /* rayons un peu plus maîtrisés (moins « bonbon ») */
  --r:18px; --r-lg:26px; --r-sm:13px; --r-xl:36px;

  /* échelle d'ombres en couches, plus premium */
  --sh-1:0 1px 2px rgba(36,31,26,.06), 0 2px 6px -2px rgba(36,31,26,.08);
  --sh-2:0 4px 10px -4px rgba(36,31,26,.10), 0 12px 28px -12px rgba(36,31,26,.16);
  --sh-3:0 10px 24px -10px rgba(36,31,26,.14), 0 30px 60px -28px rgba(36,31,26,.26);
  --sh-warm:0 14px 36px -18px rgba(244,123,32,.30);
  --sh-green:0 14px 36px -18px rgba(62,146,69,.30);

  /* tons d'appui */
  --ink-900:#1b1712;            /* hero / fonds profonds */
  --ink-800:#241F1A;
  --hairline:rgba(36,31,26,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1180px;
}

/* ---------- base ---------- */
body{background:#fff;color:var(--ink-soft);
  font-feature-settings:"kern" 1,"liga" 1;
  letter-spacing:-.005em}

/* chiffres tabulaires (stats, prix, coordonnées) */
.stat .n,.spec .row .v,.crumb{font-variant-numeric:tabular-nums}

/* focus accessible et net partout (audience institutionnelle / WCAG) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}
.bg-ink a:focus-visible,.hero a:focus-visible,.ft a:focus-visible{
  outline-color:var(--green-lt)}

/* ---------- typographie éditoriale ---------- */
h1,h2,h3{letter-spacing:-.02em}
.h-lg{font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.12}
.lead{font-size:1.1rem;line-height:1.7;color:var(--ink-soft)}
.eyebrow{font-size:.72rem;letter-spacing:.18em}

/* ---------- header : plus de présence ---------- */
.hd{background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid var(--hairline)}
.nav{height:82px}
.brand b{letter-spacing:-.01em}
.menu a{font-weight:500;color:var(--ink-soft);transition:color .2s,background .2s}
.menu a:hover{background:var(--cream-2);color:var(--ink)}
.menu a.active{position:relative;color:var(--ink);font-weight:600}
.menu a.active::after{content:'';position:absolute;left:16px;right:16px;bottom:3px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--green))}
.btn-primary{box-shadow:var(--sh-warm)}

/* =========================================================
   HERO — encre premium, protocolaire, orbital lumineux
   ========================================================= */
.hero{background:
   radial-gradient(900px 520px at 82% -8%,rgba(244,123,32,.20),transparent 60%),
   radial-gradient(760px 520px at 4% 108%,rgba(62,146,69,.22),transparent 62%),
   linear-gradient(165deg,#221d18 0%,var(--ink-900) 60%,#161310 100%);
  color:#fff;padding:108px 0 124px}
.hero::before{display:none}
.hero::after{height:5px;
  background:linear-gradient(90deg,var(--orange) 0 33.33%,#fbf8f1 33.33% 66.66%,var(--green) 66.66% 100%)}
.hero-grid{gap:56px}

.hero h1{color:#fff;font-weight:800;font-size:clamp(2.4rem,4.6vw,3.7rem);
  line-height:1.06;letter-spacing:-.025em;margin-bottom:22px;text-wrap:balance}
.hero h1 .o{color:var(--orange)} .hero h1 .g{color:var(--green-lt)}
.hero p.sub{color:#cdc5ba;font-size:1.12rem;max-width:520px}
.hero .slogan-line{color:#eadfce;border-left:2px solid var(--orange);
  padding-left:14px;font-style:italic}

/* badge crédibilité raffiné */
.hero .badge-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:#f2ece3;box-shadow:none;backdrop-filter:blur(4px);letter-spacing:.14em}
.hero .badge-pill .d{background:var(--green-lt);box-shadow:0 0 0 4px rgba(113,188,68,.18)}

/* boutons hero */
.hero .btn-white{background:#fff;color:var(--ink);border-color:transparent;box-shadow:var(--sh-2)}
.hero .btn-white:hover{transform:translateY(-2px);color:var(--ink)}
.hero .btn-primary{box-shadow:0 16px 34px -14px rgba(244,123,32,.7)}

/* =========================================================
   MÉDAILLON + ORBITAL — raffinés (anneau tricolore net,
   bulles « verre » lumineuses, mouvement plus lent/maîtrisé)
   ========================================================= */
.hero-vis::before{
  width:430px;height:430px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--orange),var(--green-lt),var(--green),var(--orange));
  opacity:.22;filter:blur(18px);animation:none}

.medallion{width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#fff,#f6efe2 78%,#efe4d1);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.7),inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.04)}
.medallion img{width:206px}
/* anneau tricolore net + halo doux, plus de pointillés */
.medallion::after{inset:-13px;border:none;border-radius:50%;
  background:
   conic-gradient(var(--orange) 0 33.33%, #fff 0 66.66%, var(--green) 0 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
          mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  opacity:.9}
.medallion::before{content:'';position:absolute;inset:-30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12)}

/* satellites : pastille « verre » lumineuse sur fond sombre */
.orbit .sat{color:#fff;font-weight:600;font-size:.84rem;gap:9px;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.orbit .sat .ci{width:50px;height:50px;border-radius:15px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.orbit .sat .ci.o svg{stroke:#FFB36B}
.orbit .sat .ci.gn svg{stroke:#9FD982}
/* mouvement maîtrisé : assez lent pour la classe, assez vivant pour se voir */
.orbit{animation-duration:34s}
.orbit .sat{animation-duration:34s}

/* =========================================================
   BANDE DE CONFIANCE / CRÉDIBILITÉ — pilule premium
   ========================================================= */
.trust{margin-top:-38px}
.trust .wrap{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:20px 34px;gap:8px 30px;align-items:stretch}
.trust span{color:var(--ink);font-weight:600;font-size:.92rem;padding:6px 0;
  position:relative}
.trust span+span{padding-left:30px}
.trust span+span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--hairline)}
.trust svg{stroke:var(--orange)}
.trust span:nth-child(2) svg{stroke:var(--green)}
.trust span:nth-child(3) svg{stroke:var(--orange)}
@media(max-width:760px){
  .trust span+span{padding-left:0}.trust span+span::before{display:none}
}

/* =========================================================
   EYEBROWS / TITRES de section
   ========================================================= */
.eyebrow{background:transparent;padding:0;border-radius:0;margin-bottom:14px;
  font-weight:700;color:var(--orange)}
.eyebrow::before{display:block;content:'';width:24px;height:2px;border-radius:2px;
  background:currentColor;margin-bottom:11px}
.center .eyebrow::before{margin-inline:auto}
.eyebrow.g{color:var(--green)}
.bg-ink .eyebrow{background:transparent;color:var(--green-lt)}

/* =========================================================
   CARTES / GRILLES — hairline + ombres en couches
   ========================================================= */
.section{padding:104px 0}
.card{border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.card.hover:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:rgba(62,146,69,.28)}
.card h3{letter-spacing:-.01em}
.ico{border-radius:15px}
.ico.o{background:var(--orange-soft)} .ico.gn{background:var(--green-soft)}

/* lien « Voir la formation » : soulignement animé discret */
.link-arrow{position:relative}
.link-arrow svg{transition:transform .25s var(--ease-out)}

/* « qui sommes-nous » médaillon foncé : plus net */
.vrow .ck{box-shadow:inset 0 0 0 1px rgba(62,146,69,.18)}

/* =========================================================
   STATISTIQUES — cartes plus institutionnelles
   ========================================================= */
.bg-cream{background:linear-gradient(180deg,#fff 0%,#faf6ee 100%)}
.stat{border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:34px 22px}
.stat::before{height:3px;background:linear-gradient(90deg,var(--green),var(--green-lt))}
.stat .n{font-size:2.7rem;font-weight:800;color:var(--green-dk);letter-spacing:-.02em}
.stat .l{font-size:.84rem;color:var(--grey);margin-top:11px}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}

/* =========================================================
   SECTION FONCÉE « accompagnement humain »
   ========================================================= */
.bg-ink{background:
   radial-gradient(700px 380px at 90% 0,rgba(244,123,32,.14),transparent 60%),
   linear-gradient(160deg,#221d18,#15120f)}
.bg-ink .lead{color:#cdc5ba}

/* =========================================================
   AVIS / TÉMOIGNAGES — guillemet décoratif, plus éditorial
   ========================================================= */
.section.soft{background:
   radial-gradient(820px 360px at 100% 0,#fff6ee,transparent 60%),#faf6ee}
.review-card{border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:30px 28px 26px}
.review-card::before{content:'\201C';position:absolute;top:8px;right:22px;
  font-size:5rem;line-height:1;color:var(--orange);opacity:.12;font-family:Georgia,serif}
.review-card .rtext{font-size:.98rem}
.review-card .ravatar.o{background:linear-gradient(135deg,var(--orange),var(--orange-dk))}
.review-card .ravatar.g{background:linear-gradient(135deg,var(--green),var(--green-dk))}

/* =========================================================
   CTA FINAL — plus de gravité (retour à un bloc encre premium)
   ========================================================= */
.cta{background:
   radial-gradient(600px 300px at 50% -20%,rgba(244,123,32,.22),transparent 60%),
   linear-gradient(160deg,#221d18,#15120f);
  border:none;color:#fff;box-shadow:var(--sh-3);padding:66px 56px}
.cta::before{background:linear-gradient(180deg,var(--orange),var(--orange-dk))}
.cta::after{background:linear-gradient(180deg,var(--green),var(--green-dk))}
.cta h2{color:#fff}
.cta .slogan-line{color:#f2ece3}
.cta p{color:#cdc5ba}

/* =========================================================
   FOOTER — hairlines plus nettes
   ========================================================= */
.ft{border-radius:var(--r-xl) var(--r-xl) 0 0}
.ft .socials a{transition:transform .25s var(--ease-out),background .25s}
.ft-links a:hover{color:var(--orange)}

/* =========================================================
   MOTION — discret et respectueux (institutionnel)
   ========================================================= */
.rv{transform:translateY(20px)}
.btn{transition:transform .22s var(--ease-out),box-shadow .22s,background .22s,color .22s}
.btn:hover{transform:translateY(-2px)}

@media(max-width:960px){
  .section{padding:72px 0}
  .hero{padding:84px 0 96px}
  .hero-vis::before{width:340px;height:340px}
  .medallion{width:290px;height:290px}.medallion img{width:178px}
}
/* orbital mobile : on masque les libellés (qui débordaient) et on garde
   les icônes lumineuses en orbite — net, jamais coupé. */
@media(max-width:640px){
  .orbit .sat>span:last-child{display:none}
  .orbit .sat{gap:0}
  .orbit .sat .ci{width:44px;height:44px}
  .orbit .sat .ci svg{width:22px;height:22px}
  .hero{padding-top:64px}
}

@media (prefers-reduced-motion:reduce){
  .hero-vis::before{animation:none}
}

/* =========================================================
   PAGES INTÉRIEURES (administratif / formations / contact / légal)
   Cohérence avec l'accueil : hero encre premium + composants raffinés
   ========================================================= */

/* ---- hero intérieur : même autorité que l'accueil ---- */
.phero{background:
   radial-gradient(720px 380px at 86% -12%,rgba(244,123,32,.18),transparent 60%),
   radial-gradient(560px 360px at 2% 112%,rgba(62,146,69,.20),transparent 62%),
   linear-gradient(165deg,#221d18 0%,var(--ink-900) 70%,#161310 100%);
  color:#fff;padding:96px 0 80px}
.phero::before{display:none}
.phero::after{height:5px;
  background:linear-gradient(90deg,var(--orange) 0 33.33%,#fbf8f1 33.33% 66.66%,var(--green) 66.66% 100%)}
.phero .blob{opacity:.45;filter:blur(34px)}
.phero h1{color:#fff;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.phero h1 .o{color:var(--orange)} .phero h1 .g{color:var(--green-lt)}
.phero p{color:#cdc5ba}
.crumb{color:var(--green-lt)}
.crumb a{color:#cdc5ba}
.crumb a:hover{color:#fff}

/* ---- fiches formation : hairline + ombres en couches, en-tête plus riche ---- */
.fc{border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  transition:transform .3s var(--ease-out),box-shadow .3s}
.fc:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.fc-head{padding:32px 38px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.fc:nth-child(odd) .fc-head,.fc:nth-child(even) .fc-head{
  background:linear-gradient(125deg,var(--green) 0%,var(--green-dk) 92%)}
.fc-head .ref{background:rgba(0,0,0,.24);backdrop-filter:blur(2px)}
.fc-head h3{letter-spacing:-.01em}
.fc-side{background:linear-gradient(180deg,#fff,#faf6ee)}
.fc-side .btn{box-shadow:var(--sh-warm)}
.tag{background:#fff;border-color:var(--hairline);color:var(--green-dk);font-weight:600}
.objlist li svg{color:var(--green)}

/* ---- timeline (administratif) : pastilles plus nettes ---- */
.step .num{border-radius:16px}
.step::before{background:var(--hairline)}

/* ---- encadré info ---- */
.note{border-radius:var(--r);box-shadow:var(--sh-1)}

/* ---- contact : cartes coordonnées interactives ---- */
.cline{border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--sh-1);
  transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
a.cline:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:rgba(62,146,69,.30)}
.cline .lab{color:var(--green-dk)}
.form{border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.form-hd{background:linear-gradient(160deg,#221d18,var(--ink-900))}
.form.review-form .form-hd{background:linear-gradient(125deg,var(--green),var(--green-dk))}
.map-wrap{border:1px solid var(--hairline);box-shadow:var(--sh-2)}
.map-wrap .pinbtn{box-shadow:var(--sh-2)}

/* ---- pages légales (CGV / confidentialité) ---- */
.legal .toc{border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--sh-1)}
.legal .toc a:hover{color:var(--orange)}
.legal h2{letter-spacing:-.01em}
.legal h2::before{background:linear-gradient(180deg,var(--green),var(--green-dk))}
.legal table.lt th{background:var(--green-soft)}
.legal .lbox{border:1px solid var(--hairline);border-radius:var(--r)}

@media(max-width:960px){
  .phero{padding:72px 0 60px}
}

/* =========================================================
   COUCHE « MAÎTRISE TECH » — interactions premium (enhance.js)
   ========================================================= */

/* barre de progression de lecture */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none}
.scroll-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),var(--green-lt),var(--green));
  box-shadow:0 0 12px -2px rgba(244,123,32,.5);transition:transform .12s linear}

/* header densifié au scroll */
.hd{transition:background .3s,box-shadow .3s}
.hd.scrolled{background:rgba(255,255,255,.94);box-shadow:0 8px 30px -22px rgba(36,31,26,.6)}

/* menu : 6 liens + bouton → léger resserrement desktop */
@media(min-width:901px){
  .nav{gap:18px}
  .menu{gap:2px}
  .menu a{padding:9px 13px;font-size:.92rem}
  .menu .btn{margin-left:8px}
}

/* spotlight curseur + pop d'icône sur les cartes */
@media(hover:hover){
  .card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .35s var(--ease-out);
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(244,123,32,.10),transparent 62%)}
  .card.hover:hover::after{opacity:1}
}
.card .ico{transition:transform .35s var(--ease-out),background .3s}
.card.hover:hover .ico{transform:scale(1.07)}

/* press tactile/clic sur les boutons */
.btn:active{transform:translateY(0) scale(.985)}
@media(prefers-reduced-motion:reduce){
  .btn:active{transform:none}
  .scroll-progress span{transition:none}
}

/* =========================================================
   PAGES « QUI SOMMES-NOUS » & « RECRUTEMENT »
   ========================================================= */

/* grille de valeurs / atouts */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}

/* direction / gouvernance */
.people{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.person{display:flex;gap:20px;align-items:center}
.person .pavatar{width:74px;height:74px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;color:#fff;
  box-shadow:var(--sh-2)}
.person .pavatar.o{background:linear-gradient(135deg,var(--orange),var(--orange-dk))}
.person .pavatar.g{background:linear-gradient(135deg,var(--green),var(--green-dk))}
.person h3{font-size:1.18rem;margin-bottom:2px;letter-spacing:-.01em}
.person .role{color:var(--green-dk);font-weight:600;font-size:.92rem}
.person .role.o{color:var(--orange-dk)}
@media(max-width:900px){.people{grid-template-columns:1fr}}

/* offres d'emploi */
.jobs{display:flex;flex-direction:column;gap:22px}
.job-card{padding:0;overflow:hidden}
.job-top{display:flex;align-items:flex-start;gap:20px;padding:28px 32px 22px}
.job-top .ico{margin:0;flex-shrink:0}
.job-top h3{font-size:1.3rem;margin-bottom:8px;letter-spacing:-.01em}
.job-meta{display:flex;flex-wrap:wrap;gap:8px}
.job-meta .tag{background:var(--cream-2);border:1px solid var(--hairline);color:var(--green-dk);
  font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:50px;display:inline-flex;align-items:center;gap:6px}
.job-meta .tag svg{width:13px;height:13px;stroke:var(--green)}
.job-body{padding:0 32px 28px}
.job-body p{color:var(--ink-soft);margin-bottom:14px;font-size:.97rem}
.job-body h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);
  margin-bottom:10px;font-weight:700}
.job-body ul{display:grid;gap:8px;margin-bottom:20px}
.job-body ul li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.job-body ul li svg{position:absolute;left:0;top:3px;width:17px;height:17px;stroke:var(--green)}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 32px;background:linear-gradient(180deg,#fff,#faf6ee);border-top:1px solid var(--hairline)}
.job-foot .ref{font-size:.82rem;color:var(--grey)}
@media(max-width:640px){
  .job-top{flex-direction:column;gap:14px;padding:24px 22px 18px}
  .job-body{padding:0 22px 24px}.job-foot{padding:16px 22px}
  .job-foot .btn{width:100%;justify-content:center}
}

/* =========================================================
   ANIMATIONS D'ENTRÉE AU CHARGEMENT (visibles immédiatement)
   Hero + hero intérieur : apparition en cascade. Coupées si
   prefers-reduced-motion.
   ========================================================= */
@keyframes ctzRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ctzMedal{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes ctzFade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* accueil */
  .hero .badge-pill,.hero h1,.hero p.sub,.hero .slogan-line,.hero .hero-cta{
    animation:ctzRise .8s var(--ease-out) both}
  .hero .badge-pill{animation-delay:.08s}
  .hero h1{animation-delay:.18s}
  .hero p.sub{animation-delay:.32s}
  .hero .slogan-line{animation-delay:.42s}
  .hero .hero-cta{animation-delay:.52s}
  .hero-vis{animation:ctzMedal 1s var(--ease-out) both;animation-delay:.2s}
  /* le halo tricolore derrière le médaillon respire doucement */
  .hero-vis::before{animation:ctzFloat 9s var(--ease) .8s infinite alternate!important}

  /* pages intérieures */
  .phero .crumb{animation:ctzRise .7s var(--ease-out) both;animation-delay:.05s}
  .phero h1{animation:ctzRise .8s var(--ease-out) both;animation-delay:.16s}
  .phero p{animation:ctzRise .8s var(--ease-out) both;animation-delay:.3s}
}
@keyframes ctzFloat{from{transform:translateY(-10px) rotate(-4deg)}to{transform:translateY(12px) rotate(4deg)}}