/* ============================================
   ANKA Energy Solutions — Design System v2
   Fond clair, charte officielle 2023
   Polices : Century Gothic (display) + Noto Sans (body)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* Century Gothic fallback via system or local */
@font-face {
  font-family: 'CenturyGothic';
  src: local('Century Gothic'), local('CenturyGothic');
  font-weight: normal;
}

/* ---- CSS Variables — palette officielle ANKA ---- */
:root {
  /* Backgrounds */
  --bg: #FFFFFF;
  --bg-soft: #F7F8FA;
  --bg-mid: #EEF0F4;

  /* Text */
  --text: #333333;
  --text-muted: #666666;
  --text-soft: #888888;

  /* Borders */
  --border: #E0E3EA;
  --border-soft: #F0F2F5;

  /* ANKA Brand Colors — palette officielle */
  --teal: #009BA8;        /* Pantone 320C — couleur principale logo */
  --teal-light: #7CCDF3;  /* Pantone 0821C — bleu ciel */
  --blue: #009EE2;        /* Pantone 299C */
  --yellow: #FFCE00;      /* Pantone 116C */
  --orange: #EE7C3D;      /* Pantone 7577C */
  --pink: #E7417A;        /* Pantone 205C */
  --purple: #8F65A7;      /* Pantone 7661C */
  --green: #C3D100;       /* Pantone 382C */

  /* ---- Couleurs par rubrique (système unique) ----
     Ces variables NOMMENT LA FONCTION plutôt que la teinte : si une couleur de
     charte change, il suffit de modifier la valeur de base ci-dessus.
     NB : les anciennes valeurs de ce bloc étaient FAUSSES (--color-access valait
     du teal alors qu'Energy Access est orange). Corrigé. */
  --color-access:  var(--orange);    /* Energy Access & Market Development */
  --color-systems: var(--purple);    /* Energy Systems & Advisory */
  --color-uses:    var(--pink);      /* Usages transformateurs */
  --color-impact:  var(--green);     /* ESG & Impact */
  --color-brand:   var(--teal);      /* Marque ANKA */
  --color-kpi:     var(--yellow);    /* Chiffres clés */

  /* Typography */
  --font-display: 'CenturyGothic', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body: 'Noto Sans', Arial, sans-serif;

  --nav-h: 72px;          /* hauteur de référence (état compact, après scroll) */
  --nav-h-open: 108px;    /* hauteur au repos, en haut de page */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1200px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---- Layout ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Navigation + Footer (mutualisés) ---- */

/* ══ NAV ══ */
/* Nav à deux états :
   - au repos (haut de page) : haute, et transparente sur les pages à hero sombre
   - au scroll (.is-scrolled) : compacte, fond blanc
   --nav-h reste à 72px : c'est la référence des calculs de hero, on n'y touche pas. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h-open);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 32px;
  transition:height .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.nav.is-scrolled{
  height:var(--nav-h);
  background:var(--bg);
  border-bottom-color:var(--border);
}

/* --- Barre de couleur de rubrique, sous la nav ---
   La couleur est portée par une classe sur <body> (voir --rubrique).
   Pages à hero photo sombre : la nav est transparente au repos, la barre
   n'apparaîtrait pas sur la photo -> elle ne se montre qu'au scroll.
   Pages à fond clair : barre visible en permanence. */
.nav::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-3px;
  height:3px;
  background:var(--rubrique, transparent);
  opacity:1;
  transition:opacity .28s ease;
  pointer-events:none;
}
/* Pas de rubrique déclarée (accueil) : pas de barre */
body:not([class*="rubrique-"]) .nav::after{ display:none; }
/* Sur hero photo, au repos : masquée. Elle revient au scroll. */
.nav.nav--over-hero:not(.is-scrolled)::after{ opacity:0; }

/* Couleurs de rubrique */
body.rubrique-access   { --rubrique: var(--color-access); }
body.rubrique-systems  { --rubrique: var(--color-systems); }
body.rubrique-uses     { --rubrique: var(--color-uses); }
body.rubrique-impact   { --rubrique: var(--color-impact); }
body.rubrique-brand    { --rubrique: var(--color-brand); }

/* --- Variante transparente : uniquement sur les pages à hero photo sombre --- */
.nav.nav--over-hero{
  background:transparent;
  border-bottom-color:transparent;
}
.nav.nav--over-hero .nav-link,
.nav.nav--over-hero .nav-lang{ color:rgba(255,255,255,.85); }
.nav.nav--over-hero .nav-link:hover,
.nav.nav--over-hero .nav-lang:hover{ color:#fff; background:rgba(255,255,255,.12); }
.nav.nav--over-hero .nav-chevron{ opacity:.7; }
.nav.nav--over-hero .nav-burger{ border-color:rgba(255,255,255,.4); }
.nav.nav--over-hero .nav-burger span{ background:#fff; }
/* Dès qu'on scrolle, la nav redevient blanche : nav--over-hero ne s'applique plus */
.nav.nav--over-hero.is-scrolled{
  background:var(--bg);
  border-bottom-color:var(--border);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}
.nav.nav--over-hero.is-scrolled .nav-link,
.nav.nav--over-hero.is-scrolled .nav-lang{ color:var(--text-muted); }
.nav.nav--over-hero.is-scrolled .nav-link:hover,
.nav.nav--over-hero.is-scrolled .nav-lang:hover{ color:var(--text); background:var(--bg-soft); }
.nav.nav--over-hero.is-scrolled .nav-burger{ border-color:var(--border); }
.nav.nav--over-hero.is-scrolled .nav-burger span{ background:var(--text); }

/* --- Logo : deux versions superposées, on fait varier l'opacité --- */
.nav-logo{position:relative;display:flex;align-items:center;flex-shrink:0;}
.nav-logo img{
  height:52px;width:auto;display:block;
  transition:height .28s ease, opacity .28s ease;
}
.nav.is-scrolled .nav-logo img{ height:38px; }
.nav-logo img.nav-logo--white{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  opacity:0;pointer-events:none;
}
/* Sur hero sombre et non scrollé : logo blanc visible, logo couleur masqué */
.nav.nav--over-hero:not(.is-scrolled) .nav-logo img.nav-logo--color{ opacity:0; }
.nav.nav--over-hero:not(.is-scrolled) .nav-logo img.nav-logo--white{ opacity:1; }

/* Voile sombre sous la nav transparente : les photos claires (ciel, toits blancs)
   rendaient les liens illisibles. Dégradé qui s'estompe vers le bas, n'affecte
   ni le titre ni le reste de l'image. Disparaît dès que la nav redevient blanche. */
.nav.nav--over-hero::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:180px;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.34) 45%,
    rgba(0,0,0,.12) 75%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:-1;
  opacity:1;
  transition:opacity .28s ease;
}
/* Dès le scroll, la nav a un fond blanc : le voile n'a plus lieu d'être */
.nav.nav--over-hero.is-scrolled::before{ opacity:0; }

.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:4px;padding:8px 11px;font-size:13px;font-weight:600;color:var(--text-muted);border-radius:var(--radius);text-decoration:none;transition:color .15s,background .15s;white-space:nowrap;}
.nav-link:hover{color:var(--text);background:var(--bg-soft);}
.nav-link.active{color:var(--text);}
.nav-link-parent{cursor:default;user-select:none;}
.nav-chevron{opacity:.5;flex-shrink:0;transition:transform .2s;}
.nav-item:hover .nav-chevron{transform:rotate(180deg);opacity:.8;}
.nav-dropdown{position:absolute;top:100%;left:50%;background:rgba(0,155,168,.93);backdrop-filter:blur(12px);border:.5px solid rgba(255,255,255,.15);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:8px;min-width:280px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none;z-index:300;}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.nav-dd-item{display:block;padding:11px 16px;border-radius:var(--radius);text-decoration:none;transition:background .12s;}
.nav-dd-item:hover{background:rgba(255,255,255,.15);}
.nav-dd-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;}
.nav-dd-desc{font-size: 12px;color:rgba(255,255,255,.62);line-height:1.4;}
.nav-lang{font-size: 13px;font-weight:600;color:var(--text-muted);padding:6px 10px;border-radius:var(--radius);text-decoration:none;transition:color .15s;}
.nav-lang:hover{color:var(--text);}
.nav-cta{flex-shrink:0;margin-left:12px;}
.nav-burger{display:none;}
@media(max-width:900px){
  .nav-links,.nav-lang,.nav-cta{display:none;}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto;width:36px;height:36px;background:none;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:0;}
  .nav-burger span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:2px;transition:all .2s;}
  .nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-burger.open span:nth-child(2){opacity:0;}
  .nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}
.nav-mobile-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);}
.nav-mobile-overlay.open{display:block;}
.nav-mobile-drawer{position:fixed;top:0;right:0;bottom:0;z-index:400;width:min(320px,90vw);background:var(--bg);box-shadow:-4px 0 32px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;overflow:hidden;}
.nav-mobile-drawer.open{transform:translateX(0);}
.nav-mobile-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.nav-mobile-close{background:var(--bg-soft);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);}
.nav-mobile-body{flex:1;overflow-y:auto;padding:12px 0 24px;}
.nav-mobile-group{border-bottom:1px solid var(--border);}
.nav-mobile-parent{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:14px;font-weight:600;color:var(--text);background:none;border:none;cursor:pointer;text-align:left;transition:background .12s;}
.nav-mobile-parent:hover{background:var(--bg-soft);}
.nav-mobile-chevron{opacity:.5;transition:transform .2s;flex-shrink:0;}
.nav-mobile-parent.open .nav-mobile-chevron{transform:rotate(180deg);}
.nav-mobile-sub{max-height:0;overflow:hidden;transition:max-height .25s;background:var(--bg-soft);}
.nav-mobile-sub.open{max-height:400px;}
.nav-mobile-sub-item{display:block;padding:12px 20px 12px 28px;border-top:1px solid var(--border);text-decoration:none;transition:background .12s;}
.nav-mobile-sub-item:hover{background:var(--bg-mid);}
.nav-mobile-sub-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.nav-mobile-sub-desc{font-size: 12px;color:var(--text-muted);line-height:1.4;}
.nav-mobile-link{display:block;padding:14px 20px;font-size:14px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);text-decoration:none;transition:background .12s;}
.nav-mobile-link:hover{background:var(--bg-soft);}
.nav-mobile-cta{display:block;margin:20px 16px 0;padding:13px 20px;background:var(--brand,#009BA8);color:#fff;border-radius:var(--radius);font-size:14px;font-weight:700;text-align:center;text-decoration:none;transition:background .15s;}
.nav-mobile-cta:hover{background:#007f8a;}
/* ══ FOOTER ══ */
.footer{background:#111;}
.footer-bar{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);}
.footer-logo-wrap{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.footer-tagline{font-size:12px;color:rgba(255,255,255,.38);font-style:italic;white-space:nowrap;flex-shrink:0;}
.footer-social{display:flex;gap:8px;margin-left:20px;flex-shrink:0;}
.footer-social-link{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);text-decoration:none;transition:all .15s;}
.footer-social-link:hover{border-color:rgba(255,255,255,.55);color:#fff;}
.footer-copy{margin-left:auto;font-size:12px;color:rgba(255,255,255,.28);white-space:nowrap;flex-shrink:0;}



/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px;
  background: var(--teal);
  color: white;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600; font-size: 14px;
  border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: #007d88;
  box-shadow: 0 4px 16px rgba(0,155,168,0.3);
  transform: translateY(-1px);
}
.btn-outline { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:rgba(0,155,168,0.14); color:#333; border:2px solid var(--teal); border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn-outline:hover { background:rgba(0,155,168,0.26); color:#333; transform:translateY(-1px); box-shadow:0 3px 11px rgba(0,0,0,.09); }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---- Labels / Tags ---- */
.label {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0,155,168,0.1);
  color: var(--teal);
  border-radius: 20px;
  font-size: 13px; font-weight: 600;
}

/* ---- Typography ---- */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700; line-height: 1.2;
  text-transform: uppercase;
}
.display-sm {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.body-lg { font-size: 17px; line-height: 1.75; }
.body-sm { font-size: 14px; }

/* ---- Page Hero ---- */
.page-hero {
  /* Même logique que .page-hero-photo : le contenu démarre à une distance
     identique sous la nav ouverte, pour que toutes les pages s'alignent. */
  padding: calc(var(--nav-h-open) + 56px) 0 60px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.page-hero .label { margin-bottom: 12px; }
.page-hero-desc {
  margin-top: 20px;
  font-size: 17px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.8;
}
/* ---- Fil d'Ariane ----
   Règle unique : la page courante se distingue par la GRAISSE, pas par la couleur.
   (la couleur ne survit pas sur photo : contraste mesuré jusqu'à 1,26:1) */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: #666;                 /* remplace #888, illisible (3,54:1) */
  font-weight: 400;
  margin-bottom: 20px;
}
.breadcrumb a {
  color: #666;
  text-decoration: none;
  transition: color .18s ease;
}
.breadcrumb a:hover { color: var(--teal); }   /* signale ce qui est cliquable */
/* Niveau non cliquable (catégorie à dropdown) : même gris, pas de survol */
.breadcrumb > span:not(.breadcrumb-sep):not(:last-child) { color: #666; }
/* Page courante : graisse ET taille (15px) pour mettre le nom de la page en valeur */
.breadcrumb > span:last-child,
.breadcrumb .breadcrumb-current { color: #333; font-weight: 700; font-size: 15px; }
.breadcrumb-sep { color: #999; font-weight: 400; }

/* Sur hero photo : tout en blanc, la graisse porte la distinction */
.page-hero-photo .breadcrumb,
.page-hero-photo .breadcrumb a,
.page-hero-photo .breadcrumb > span:not(.breadcrumb-sep) { color: rgba(255,255,255,.78); }
.page-hero-photo .breadcrumb a:hover { color: #fff; }
.page-hero-photo .breadcrumb > span:last-child { color: #fff; font-weight: 700; }
.page-hero-photo .breadcrumb-sep { color: rgba(255,255,255,.45); }

/* ---- Cards ---- */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card-body { padding: 32px; }

/* ---- Expertise Cards (colored) ---- */
.expertise-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.expertise-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.expertise-card-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.expertise-card-body { padding: 24px 32px 32px; }

.expertise-card.access .expertise-card-header { background: rgba(0,155,168,0.06); border-bottom-color: rgba(0,155,168,0.15); }
.expertise-card.access .expertise-tag { color: var(--color-access); }
.expertise-card.access .expertise-accent { background: var(--color-access); }

.expertise-card.ci .expertise-card-header { background: rgba(255,206,0,0.08); border-bottom-color: rgba(255,206,0,0.2); }
.expertise-card.ci .expertise-tag { color: #b8920a; }
.expertise-card.ci .expertise-accent { background: var(--color-ci); }

.expertise-card.advisory .expertise-card-header { background: rgba(143,101,167,0.07); border-bottom-color: rgba(143,101,167,0.15); }
.expertise-card.advisory .expertise-tag { color: var(--color-advisory); }
.expertise-card.advisory .expertise-accent { background: var(--color-advisory); }

.expertise-tag {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.expertise-accent {
  width: 40px; height: 4px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.expertise-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ---- KPI Grid ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.kpi-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.kpi-value {
  font-family: var(--font-display);
  font-weight: 700; font-size: 32px;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-label { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* ---- Section dividers ---- */
.divider {
  height: 1px;
  background: var(--border);
  margin: 48px 0;
}

/* ---- Footer ---- */
.footer {
  background: #333333;
  color: #e0e0e0;
  padding: 64px 0 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
.footer-brand .nav-logo-text { color: white; }
.footer-col-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: white;
  margin-bottom: 16px;
}
.footer-link {
  display: block; font-size: 14px;
  color: #a0a0a0; margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-link:hover { color: white; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; color: #808080;
}

/* ---- Language switcher overlay ---- */
.lang-select-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.lang-select-box {
  text-align: center;
  max-width: 480px; padding: 40px;
}
.lang-select-logo {
  margin: 0 auto 40px;
  max-width: 200px;
}
.lang-buttons {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 32px;
}
.lang-btn {
  padding: 16px 40px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: var(--radius);
  border: 2px solid var(--teal);
  cursor: pointer;
  transition: all var(--transition);
}
.lang-btn.primary { background: var(--teal); color: white; }
.lang-btn.secondary { background: transparent; color: var(--teal); }
.lang-btn:hover { box-shadow: 0 4px 20px rgba(0,155,168,0.25); transform: translateY(-2px); }

/* ---- Hero Homepage ---- */
.hero {
  min-height: 100vh;
  padding: var(--nav-h) 0 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.hero-content {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 0 40px;
}
.hero-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.hero-label-line { width: 32px; height: 2px; background: var(--teal); }
.hero-tagline {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--text);
}
.hero h1 span { color: var(--teal); }
.hero-desc {
  font-size: 18px; line-height: 1.8;
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-ctas {
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ---- Expertise 3-up on homepage ---- */
.home-expertises {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-expertises-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 240px;
}
@media (max-width: 900px) {
  .home-expertises-inner { grid-template-columns: 1fr; }
}
.home-exp-item {
  padding: 40px 36px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: background var(--transition);
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.home-exp-item:last-child { border-right: none; }
.home-exp-item:hover { background: white; }
.home-exp-accent {
  width: 36px; height: 4px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.home-exp-item.access .home-exp-accent { background: var(--color-access); }
.home-exp-item.ci .home-exp-accent { background: var(--color-ci); }
.home-exp-item.advisory .home-exp-accent { background: var(--color-advisory); }
.home-exp-item.access:hover .home-exp-tag { color: var(--color-access); }
.home-exp-item.ci:hover .home-exp-tag { color: #b8920a; }
.home-exp-item.advisory:hover .home-exp-tag { color: var(--color-advisory); }
.home-exp-tag {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
  transition: color var(--transition);
}
.home-exp-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.3;
}
.home-exp-desc {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.6; flex: 1;
  margin-bottom: 20px;
}
.home-exp-arrow {
  font-size: 13px; font-weight: 600;
  color: var(--text-soft);
  transition: color var(--transition), transform var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.home-exp-item:hover .home-exp-arrow { transform: translateX(4px); }
.home-exp-item.access:hover .home-exp-arrow { color: var(--color-access); }
.home-exp-item.ci:hover .home-exp-arrow { color: #b8920a; }
.home-exp-item.advisory:hover .home-exp-arrow { color: var(--color-advisory); }

/* ---- Stats bar ---- */
.stats-bar {
  background: var(--teal);
  color: white;
  padding: 40px 0;
}
.stats-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
@media (max-width: 768px) {
  .stats-bar-inner { grid-template-columns: 1fr 1fr; }
}
.stat-num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  margin-bottom: 4px;
}
.stat-lbl { font-size: 13px; opacity: 0.85; }

/* ---- Service list ---- */
.service-list {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 24px;
}
.service-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.service-item:hover { border-color: var(--teal); }
.service-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0; margin-top: 6px;
}
.service-item.ci .service-dot { background: var(--color-ci); }
.service-item.advisory .service-dot { background: var(--color-advisory); }
.service-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.service-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* ---- Project card ---- */
.project-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.project-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.project-thumb {
  height: 180px;
  background: var(--bg-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--text-soft);
  overflow: hidden;
}
.project-info { padding: 20px 24px; }
.project-country {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 8px;
}
.project-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 8px; text-transform: uppercase; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag {
  font-size: 13px; padding: 3px 10px;
  border-radius: 12px; font-weight: 600;
}
.project-tag.access { background: rgba(0,155,168,0.1); color: var(--teal); }
.project-tag.ci { background: rgba(255,206,0,0.15); color: #a07800; }
.project-tag.advisory { background: rgba(143,101,167,0.1); color: var(--purple); }

/* ---- Responsive nav ---- */
@media (max-width: 900px) {
  .nav-links .nav-link:not(.nav-cta):not(.nav-lang) { display: none; }
}

/* ---- Hero photo des pages intérieures (mutualisé) ---- */
.page-hero-photo {
  /* Pas de margin-top : la nav est transparente, la photo passe derrière elle.
     Le décalage du contenu est géré par le padding-top de __body. */
  margin-top: 0;
  position: relative;
  overflow: hidden;
  /* Règle : les heros intérieurs font 65% de l'écran (l'accueil fait 100%).
     min-height garantit qu'ils ne s'écrasent pas sur un écran court ;
     le contenu peut les faire grandir au-delà si un texte est très long. */
  min-height: 65vh;
  min-height: 65dvh;
  display: flex;
  /* Ancré en haut : le fil d'Ariane et le titre démarrent toujours au même
     endroit sur toutes les pages. C'est le bas du titre qui varie. */
  align-items: flex-start;
}
.page-hero-photo__media { position: absolute; inset: 0; z-index: 0; }
.page-hero-photo__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay unifié : dégradé sombre du bas vers le haut, lisibilité du texte garantie */
.page-hero-photo__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.38) 50%,
    rgba(0,0,0,.08) 100%);
}
/* Assombrissement doux au centre, pour détacher le titre */
.page-hero-photo__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 40% 25% at 50% 35%, rgba(0,0,0,.35) 0%, transparent 100%);
}
.page-hero-photo__body {
  position: relative; z-index: 1;
  /* width:100% : sans ça, le flex rétrécit le container sur son contenu et le
     texte ne s'aligne plus avec les sections en dessous. */
  width: 100%;
  padding-top: calc(var(--nav-h-open) + 56px);
  padding-bottom: 64px;
}
@media (max-width: 768px) {
  /* Sur mobile, 65vh peut être trop court pour titre + paragraphe : on garde un plancher. */
  .page-hero-photo { min-height: max(58vh, 420px); }
}

/* ---- Chapô : texte d'introduction sous le hero photo ----
   Les paragraphes qui étaient dans le hero descendent ici : plus lisibles sur
   fond blanc, et les heros gardent une hauteur homogène. */
.page-intro {
  padding: 56px 0 0;
}
.page-intro p {
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0;
}
@media (max-width: 768px) {
  .page-intro { padding: 36px 0 0; }
  .page-intro p { font-size: 17px; }
}

/* ═══ BOUTONS SECONDAIRES — schéma unique ═══════════════════════════════
   Voile teinté + bordure 2px à la couleur de rubrique + TEXTE ANTHRACITE.
   Le texte ne dépend plus de la couleur : contraste ≥ 10:1 sur les 5 rubriques
   (le lime pur sur blanc plafonnait à 1,69:1, illisible).
   Au survol, seul le voile se renforce : le texte reste lisible en permanence. */
.btn-2 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  color: #333;                      /* anthracite, quelle que soit la rubrique */
  border: 2px solid;                /* la couleur vient du modificateur */
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-2:hover { transform: translateY(-1px); box-shadow: 0 3px 11px rgba(0,0,0,.09); }
.btn-2:hover, .btn-2:focus, .btn-2:active { color: #333; }   /* jamais de bascule en blanc */

.btn-2--orange { border-color: var(--orange); background: rgba(238,124,61,.16); }
.btn-2--orange:hover { background: rgba(238,124,61,.28); }
.btn-2--purple { border-color: var(--purple); background: rgba(143,101,167,.16); }
.btn-2--purple:hover { background: rgba(143,101,167,.28); }
.btn-2--pink   { border-color: var(--pink);   background: rgba(231,65,122,.16); }
.btn-2--pink:hover   { background: rgba(231,65,122,.28); }
.btn-2--lime   { border-color: var(--green);  background: rgba(195,209,0,.18); }
.btn-2--lime:hover   { background: rgba(195,209,0,.30); }
.btn-2--teal   { border-color: var(--teal);   background: rgba(0,155,168,.14); }
.btn-2--teal:hover   { background: rgba(0,155,168,.26); }

/* ═══ CTA de rubrique — aplat plein ══════════════════════════════════════
   Réservés aux blocs de fin de page, sur FOND SOMBRE uniquement.
   Sur fond clair, le blanc sur lime plein tomberait à 1,69:1 (illisible) :
   ces classes ne doivent pas y être utilisées. */
.cta-rubrique {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  border: none; border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cta-rubrique:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28); color: #fff; }

.cta-rubrique--pink { background: var(--color-uses); }
.cta-rubrique--pink:hover { background: #cf2e66; }     /* rose légèrement assombri */
.cta-rubrique--lime { background: var(--color-impact); color: #2a2f00; }  /* texte foncé : le lime est trop clair pour du blanc */
.cta-rubrique--lime:hover { background: #aebb00; color: #2a2f00; }

/* ═══ MASONRY — grille d'images en colonnes ══════════════════════════════
   Mutualisé (utilisé par about.html et equipe.html).
   La lightbox reste propre à about : sur equipe, les images ne sont pas cliquables. */
.masonry-grid {
  column-count: 4;
  column-gap: 10px;
}
@media (max-width: 1100px) { .masonry-grid { column-count: 3; } }
@media (max-width: 768px)  { .masonry-grid { column-count: 2; } }
@media (max-width: 480px)  { .masonry-grid { column-count: 1; } }

.ev-item {
  break-inside: avoid;
  margin-bottom: 10px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.ev-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ev-item:hover img { transform: scale(1.04); }

.ev-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,20,28,.82) 0%, rgba(10,20,28,.0) 50%);
  display: flex; align-items: flex-end;
  padding: 18px 16px;
  opacity: 0; transition: opacity .25s;
}
.ev-item:hover .ev-overlay { opacity: 1; }
.ev-event-name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  color: white; line-height: 1.3;
}
.ev-event-year { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 3px; }

/* Variante NON cliquable (page Équipe) : pas de curseur main, pas d'overlay au survol */
.masonry-grid--static .ev-item { cursor: default; }
.masonry-grid--static .ev-item:hover img { transform: scale(1.03); }

/* ═══ "POUR QUI ?" — grille de publics visés (pages d'expertise) ══════════
   Composant mutualisé (Energy Systems + Energy Access).
   La couleur d'accent est pilotée par --pourqui-accent / --pourqui-accent-bg,
   définies localement sur chaque page (violet pour Systems, orange pour Access). */
.pourqui-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.pourqui-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
  text-align: center;
}
.pourqui-item:hover { border-color: var(--pourqui-accent, var(--purple)); box-shadow: var(--shadow); }
.pourqui-icon {
  width: 52px; height: 52px;
  background: var(--pourqui-accent-bg, rgba(143,101,167,.1));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pourqui-accent, var(--purple));
}
.pourqui-icon svg { width: 28px; height: 28px; }
.pourqui-label { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.pourqui-examples { font-size: 13px; font-weight: 400; color: var(--text-muted); line-height: 1.45; }
@media (max-width:900px) { .pourqui-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px) { .pourqui-grid { grid-template-columns: repeat(2,1fr); } }


/* ============================================================
   Harmonisation typographique FR / EN - octobre 2026
   Grille commune par fonction. Ne concerne pas le hero d'accueil.
   ============================================================ */
:root {
  --type-page-title: clamp(30px, 3.6vw, 48px);
  --type-section-title: clamp(22px, 2.7vw, 32px);
  --type-lead: 16px;
  --type-body: 15px;
  --type-eyebrow: 12px;
  --type-ui: 13px;
  --type-kpi-caption: 13px;
}
body .page-h1 {
  font-family: var(--font-display);
  font-size: var(--type-page-title);
  font-weight: 700;
  line-height: 1.12;
}
body .page-desc {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: 1.75;
}
body .section-title {
  font-family: var(--font-display);
  font-size: var(--type-section-title);
  font-weight: 700;
  line-height: 1.2;
}
body .section-desc, body .section-intro {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.75;
}
body .page-eyebrow, body .section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 700;
}
body .kpi-label, body .stat-lbl {
  font-family: var(--font-body);
  font-size: var(--type-kpi-caption);
  font-weight: 400;
  line-height: 1.5;
}
body .nav-link, body .nav-dd-title, body .nav-dd-desc {
  font-family: var(--font-body);
}
body .nav-link, body .nav-dd-title {
  font-weight: 600;
}
/* Ne pas normaliser les chiffres KPI ni les titres du hero,
   volontairement dimensionnés selon leur contexte. */