/* ================= Base ================= */
:root{
  --bg:#ffffff; --fg:#3C7E64; --muted:#3C7E64; --accent:#8dd6ff; --black:#111111;
  --radius:25px; --card:#12141c; --line:#202533; --secteurs:#49A6AB; --qui:#3C7E64; --chiffres:#61C8CD;
  --pourquoi:#91B844; --expertise:#D16448;
  --stats-top: 12vh;
  --stats-height: 66vh;
  --stats-overlap: 8vh;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--black);font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;overflow:hidden;border:0}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:8px;border-radius:8px}

/* Typo hero */
#heroTitle { color:#111111; font-weight:300;font-size:16px;line-height:1.3;margin:0;padding:0 20px; }

/* Layouts */
.section{padding: 20px 20px 30px}
.site-header,.site-footer{padding:20px 20px 10px;}
.site-header{display:flex;justify-content:center;align-items:center;gap:8px}
.site-title{font-size:clamp(20px,6vw,28px);margin:0}
.btn-primary,.btn-secondary{appearance:none;border:1px solid #61C8CD;background:#151822;color:var(--fg);padding:15px 20px;border-radius:var(--radius);cursor:pointer}
.btn-primary{background:transparent;rotate: -9deg;}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ================= Hero ================= */
.hero { padding: 0; background: #ffffff; text-align: center; }
.hero-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0px; }
.hero h2{font-size:clamp(24px,8vw,40px);margin:0}
.hero-sub { color: var(--fg); font-size: 22px; font-weight: 600; margin: 0;padding:0 20px 5px; }
.hero h1 { font-size: clamp(22px, 5vw, 36px); line-height: 1.2; font-weight: 400; max-width: 800px; margin: 0 auto; }
.hero-actions{display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.hero-arrow{appearance:none;border:0;background:transparent;padding:0;cursor:pointer}
.hero-actions img { width: 64px; height: auto; transition: transform .25s ease; }
.hero-actions img:hover, .hero-actions img:focus-visible { transform: scale(1.1); }

.lang-actions{display: flex; justify-content: right; align-items: center; margin: 0px 0 10px;}
.lang-arrow{appearance:none;border:0;background:transparent;padding:0 10px 10px 0;cursor:pointer}
.lang-actions img { width: 18px; height: auto; transition: transform .25s ease; }
.lang-actions img:hover, .hero-actions img:focus-visible { transform: scale(1.1); }

/* ================= Dialogs ================= */
.histoire-picto{display:flex;justify-content:center;align-items:center;margin-top:20px;}
.histoire-picto img{ width:35px; height:auto; display:block; }

#storyDialog { position:relative;border:none;border-top: 15px solid #006A4E; padding:0 25px 25px;overflow:visible;width:90vw; max-width: 720px; }
#storyDialog p { font-size:16px;line-height:1.25; }
h2#dialogTitle { color: var(--fg); font-size: 20px; line-height:normal; font-weight: 600; margin: 0;padding:10px 20px 10px;text-align:center; }

button.dialog-close {
  background-color:#ffffff; border:none;margin:0;padding:0;position:absolute;top:-5px;right:10px;transform: translate(50%,-50%);
  width: 40px; height: 40px; border-radius: 9999px; background: #fff; color: #111;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 15px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08);
  z-index: 2;
}
.dialog-body { 
  width: 100%; 
}
.dialog-body p { 
  margin:0; 
  font-size:16px;
  text-align:center; 
  line-height:1.25;
  font-weight:300; 
}

/* Expertises dialogs : déclinaisons couleur */
.xp-dialog { position:relative; border:none; padding:25px; overflow:visible; width:85vw; max-width: 720px; }
.xp-dialog.secteurs { border-top: 15px solid var(--secteurs); }
.xp-dialog.expertise { border-top: 15px solid var(--expertise); }
.xp-dialog.qui { border-top: 15px solid var(--qui); }
.xp-dialog.pourquoi { border-top: 15px solid var(--pourquoi); }
.xp-dialog.chiffres { border-top: 15px solid var(--chiffres); }

#xpDlgTitle-secteurs { color: var(--secteurs); }
#xpDlgTitle-expertise { color: var(--expertise); }
#xpDlgTitle-qui { color: var(--qui); }
#xpDlgTitle-pourquoi { color: var(--pourquoi); }
#xpDlgTitle-chiffres { color: var(--chiffres); }

h2[id^="xpDlgTitle-"]{
  font-size: 20px; line-height:normal; font-weight: 600;
  margin: 0; padding:0 10px 10px; text-align:center;
}

/* ================= Stats sticky (conservé) ================= */
.section.stats-sticky{
  --stats-gap: calc(100vh - var(--stats-top) - var(--stats-height));
  padding:0; position:relative; isolation:isolate;
}
.section.stats-sticky::before{content:'';display:block;height:12vh}
.section.stats-sticky::after{content:'';display:block;height:24vh}
.stat-layer{
  position: sticky; top: var(--stats-top); height: var(--stats-height);
  display:grid; place-items:center; padding:0 16px;
  opacity:0; transition: opacity .25s ease;
  transform:none !important;
}
.stats-sticky .stat-layer:not(:last-of-type){ margin-bottom: calc(var(--stats-gap) - var(--stats-overlap)); }
.stats-sticky .stat-layer:last-of-type{ margin-bottom: 0; }
.layer-1{ z-index:3; } .layer-2{ z-index:4; } .layer-3{ z-index:5; } .layer-4{ z-index:6; }
.stat-layer.is-visible{ opacity:1; }
.stat-card{
  width:min(92vw, 840px); height:100%;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--card);
  display:grid; place-items:center; text-align:center; padding:24px; box-shadow:0 10px 24px rgba(0,0,0,.25);
  transform: translateY(12px); transition: transform .25s ease;
}
.stat-layer.is-visible .stat-card{ transform:none }
.stat-card-1{ background: linear-gradient(180deg, #162033, #12141c); }
.stat-card-2{ background: linear-gradient(180deg, #1d2a3f, #12141c); }
.stat-card-3{ background: linear-gradient(180deg, #22324c, #12141c); }
.stat-card-4{ background: linear-gradient(180deg, #2a3a5a, #12141c); }
.stat-number{ font-size: clamp(32px, 10vw, 72px); font-weight:800 }
.stat-label{ color:var(--muted); font-size: clamp(14px, 2.8vw, 18px) }

/* === Bloc "Chiffres clés" === */
.stats-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

.stat-item {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:var(--chiffres);
  border-radius:16px;
  color:#fff;
  padding:12px 10px;
  min-height:120px;
}

.stat-icon {
  width:auto; height:35px; margin:0 auto 6px; display:block;
}

.stat-number {
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 0;
  line-height: 1;
}

.stat-label {
  font-size: 12px !important;
  line-height: 1.2;
  color:#fff;
  margin:0 !important;
  font-weight:400 !important;
}

/* ===== Correctif "Chiffres clés" — grille 2 × 2 stricte (iOS OK) ===== */
#xpDialog-chiffres .stats-grid{
  display: grid !important;              /* écrase l'ancien display:flex */
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  grid-auto-rows: 1fr;                   /* lignes de hauteur égale */
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}

#xpDialog-chiffres .stat-item{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  /* rend nulles d'éventuelles contraintes héritées du flex précédent */
  flex: initial !important;
  max-width: none !important;
  min-width: 0 !important;

  background: var(--chiffres);
  border-radius: 16px;
  color: #fff;
  padding: 12px 10px;
  min-height: 120px;
}

#xpDialog-chiffres .stat-icon{
  width: auto; height: 35px;
  margin: 0 auto 6px; display: block;
}

#xpDialog-chiffres .stat-number{
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1; margin: 0;
}

#xpDialog-chiffres .stat-label{
  font-size: 12px !important;
  line-height: 1.2;
  margin: 0 !important;
  color: #fff; font-weight: 400 !important;
}

/* (optionnel) en >=768px : 4 en ligne
@media (min-width: 768px){
  #xpDialog-chiffres .stats-grid{ grid-template-columns: repeat(4, 1fr); }
}
*/

/* ================= Accordéon + Carrousel (conservés) ================= */
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:8px 12px;margin:12px 0}
details[open]{box-shadow:0 0 0 2px #1f2737 inset}
details > summary{cursor:pointer;list-style:none;font-weight:600}
details > summary::-webkit-details-marker{display:none}
.accordion-panel{margin-top:8px;color:#d2d6e2}
.section.accordion, .section.accordion *{ transition: none !important; }

.embla{position:relative}
.embla__viewport{overflow:hidden}
.embla__container{display:flex;gap:12px;touch-action:pan-y pinch-zoom}
.embla__slide{flex:0 0 82%;min-width:0}
@media (min-width:720px){ .embla__slide{flex-basis:45%} }
.card,.skill-card{display:block;background:var(--card);border:1px solid var(--line);min-height:140px;border-radius:var(--radius);padding:16px;text-decoration:none}
.embla__prev,.embla__next{
  position:absolute;top:50%;translate:0 -50%;background:#10131a;border:1px solid #262a36;border-radius:999px;
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer
}
.embla__prev{left:8px}.embla__next{right:8px}
.embla__prev:focus-visible,.embla__next:focus-visible{outline:0px solid var(--accent)}

@media (prefers-reduced-motion: reduce){
  .stat-card{ transition:none; transform:none }
}

/* Freeze helper */
.freeze-l12 .stats-sticky .stat-layer:not(:last-of-type){
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
  pointer-events: none !important;
}

/* ================= Expertises — ruban ================= */
.expertise-picto{display:flex;justify-content:center;align-items:center;margin-bottom:0;}
.expertise-picto img{ width:auto; height:60px; display:block; }

.expertises { padding-top: 15px; }
.expertises h2 { margin:0; }
.xp-ribbon{
  display:flex; gap:5px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain; padding: 6px 2px;
  scroll-snap-type: x proximity;
  height: clamp(250px, 36vh, 320px);
}
.xp-card{
  position:relative; display:block; flex: 0 0 clamp(14%, 15vw, 22%);
  min-width: 55px; border-radius: 200px; scroll-snap-align: start;
  isolation:isolate; color:#fff; text-decoration:none; outline-offset:4px;
  transition: flex-basis .35s ease, border-radius .35s ease, filter .2s ease;
  background: #0f1320;
}
.xp-card.is-active{ flex-basis: clamp(40%, 50vw, 60%); border-radius: 28px; }
.xp-card:not(.is-active){ filter: saturate(.7) brightness(.85); }
.xp-media{ position:absolute; inset:0; border-radius:inherit; z-index:0; background: center/cover no-repeat; }
.xp-card::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55) 62%); }
.xp-content{ position:absolute; inset:0; z-index:2; display:grid; grid-template-rows: 1fr auto; padding: 14px; }
.xp-title{ align-self:end; font-size: clamp(20px, 5vw, 28px); line-height:1.1; margin:0; text-shadow: 0 2px 14px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; padding-bottom:50px; }
.xp-card.is-active .xp-title{ opacity:1; transform:none; }
.xp-cta{ position:absolute; right:0px; bottom:18px; width:44px; height:44px; font-size:45px;opacity:0; }
.xp-card.is-active .xp-cta{ opacity:1; transform:none; }
/* Position par défaut : centré dans le bloc */
.xp-picto {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

/* Quand la carte est active : aligné à gauche */
.xp-card.is-active .xp-picto {
  left: 7px;               /* ou 10–16px selon ton goût */
  transform: none;          /* plus de centrage */
}
.xp-picto img{ width:100%; height:auto; display:block; }
.xp-card:focus-visible{ outline:2px solid var(--accent); }


@media (prefers-reduced-motion: reduce){
  .xp-card, .xp-title, .xp-cta, .xp-picto { transition:none !important; }
}

/* ================= CTA Footer — EXACT mobile spec ================= */
/* Conteneur global : padding horizontal 20px (déjà appliqué sur body) */
.cta-footer-horizontal{
  padding: 0 20px 20px;
}

/* Carte CTA : grille 40% (visuel) / 60% (texte) */
.cta-card{
  width: 100%;
  min-height: 110px;
  display: grid;
  grid-template-columns: 40% 60%;  /* visuel à gauche, texte/btn à droite */
  align-items: end;
  position: relative;              /* pour z-index propres */
}

/* Image à gauche, au-dessus du fond gris */
.cta-visual{
  grid-column: 1 / 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  justify-self: start;
  align-self: end;
  padding-top: 10px;
  z-index: 2;                      /* au-dessus du fond */
}

/* Fond gris sur TOUTE la largeur (2 colonnes), 
   avec un padding-left qui "respecte" la colonne image (40%) */
.cta-copy { 
  grid-column: 1 / -1;             /* s’étend sur les 2 colonnes */
  grid-row: 1;
  width: 100%;
  background-color: #ededed;
  border-radius: 28px;
  padding: 15px 16px;              /* padding de base */
  padding-left: calc(40% + 10px);  /* réserve l’espace du visuel + marge interne */
  z-index: 1;
}

/* (optionnel) évite les débordements de texte dans la grille */
.cta-card > * { min-width: 0; }

/* Accessibilité existante conservée (visually hidden) */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* (facultatif) garder le CTA sur une seule ligne si tu le souhaites */
/*
.cta-btn { white-space: nowrap; }
*/
.cta-copy h2{
  margin: 0 0 8px;
  color: var(--fg);                   /* proche #111 mais plus doux */
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
}

/* Bouton vert arrondi */
.cta-btn{
  display: inline-block;
  padding: 10px 15px;
  border-radius: 12px;
  background: var(--fg);            /* #3C7E64 */
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  white-space: nowrap;              /* une seule ligne */
  outline: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-btn:hover,
.cta-btn:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cta-btn:active{ transform: translateY(0); }


/* Mentions */
.mentions {
  color: #111111;
  font-size: 9px;
  line-height: 1.3;
  padding-top:20px;
  text-align: left;
}