:root{
--border:#e5e7eb;
--shadow:0 2px 10px rgba(0,0,0,.06); 
--radius:16px;
--maxw:min(1100px,92vw); 
--space-lg:clamp(24px,3.4vw,56px);
}

.anim-cta-block{
  position: relative;
  max-width: var(--maxw);
  /* beaucoup moins de marge au-dessus, un peu en dessous */
  margin: clamp(8px, 1.2vw, 14px) auto clamp(18px, 2vw, 24px);
  padding: 0;
}

#anim-stage{
height: clamp(200px, 33vh, 360px);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow);
}
/* Force le média de l’anim à occuper tout l’espace du stage */
#anim-stage canvas,
#anim-stage svg,
#anim-stage > *{
display: block;
width: 100% !important;
height: 100% !important;
}

/* CTA centré AU-DESSUS de l’animation */
.anim-cta{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 5;
/* option : léger halo pour lisibilité sur fond animé */
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}


/* Étire un bloc hors du conteneur pour occuper toute la largeur viewport */
.fullbleed{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding-left: max(0px, (100vw - var(--maxw)) / 2);
padding-right: max(0px, (100vw - var(--maxw)) / 2);
}


.illu-resp{
display:block;
width: clamp(180px, 30vw, 440px);   /* large sur desktop, raisonnable sur mobile */
max-height: 30vh;                   /* ne dépasse jamais ~la moitié de la hauteur écran */
height: auto;
margin: 12px auto;
border-radius: 8px;
box-shadow: var(--shadow);
object-fit: contain;
}

/* CTA XL cohérent avec la charte */
.btn-lg{ padding:14px 22px; font-size:clamp(15px,1.8vw,17px); border-radius:14px; }
.btn-ghost{ padding:12px 16px; border:1px solid var(--border); border-radius:12px; font-weight:700; }
.btn-ghost:hover{ background:#f8fafc; }

.qui-flex {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.qui-texte {
  flex: 1 1 320px;
}

.qui-visu {
  flex: 0 1 360px;
  text-align: right;
}

.illu-resp {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
section .card p,
section .card li {
  font-size: 1.1rem;   /* 1rem = base ; 1.05~1.12 = léger, lisible */
  line-height: 1.68;
}

/* =========================
   Bagou Landing — Hero Carousel (v1)
   - Responsive
   - Large media (img/video) + short impact copy
   - Dots + progress
   ========================= */

.splash .strike{
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(239,68,68,.95);
  margin-right: .08em;
}
.splash .voice{
  position: relative;
  display: inline-block;
  padding-left: .06em;
}

/* Card spacing tweak: better rhythm for landing */
#qui .card{
  padding: clamp(34px, 4.8vw, 58px);
}

/* Carousel wrapper */
.hero-carousel{
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: clip;
  background: #0b1220;
  box-shadow: var(--shadow);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);  
}

/* Track */
.hero-carousel .hc-track{
  display: flex;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  /* ✅ Safari: aide le rendu/clipping quand track est transformé */
  transform: translateZ(0);  
}

/* Slide = article */
.hero-carousel .hc-slide{
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(260px, 46vh, 520px);
  color: #fff;
}

/* Media fills */
.hero-carousel .hc-media{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  pointer-events: none;
}

/* Gradient veil for readability */
.hero-carousel .hc-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.18) 52%, rgba(2,6,23,.62) 100%),
    radial-gradient(1200px 520px at 18% 64%, rgba(124,58,237,.35), transparent 56%),
    radial-gradient(900px 420px at 78% 22%, rgba(6,182,212,.22), transparent 52%);
  pointer-events:none;
}

/* Copy block */
.hero-carousel .hc-copy{
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 2;
  display: grid;
  gap: 10px;
  max-width: min(680px, 92vw);
}

.hero-carousel .hc-kicker{
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.8vw, 20px);
  opacity: .92;
}

.hero-carousel .hc-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.02em;
  /* font-family: "Jersey 10"; */
  font-size: clamp(16px, 4vw, 28px); /* nouveau */
  line-height: 1.3;                   /* un peu plus d’air */
}
@media (max-width: 400px) {
  .hero-carousel .hc-title {
    font-size: 15px;
    line-height: 1.35;
  }
}
.hero-carousel .hc-text{
  margin: 0;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.55;
  opacity: .96;
}

/* Arrows */
.hero-carousel .hc-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(15,23,42,.45);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-carousel .hc-arrow:hover{ filter: brightness(1.06); }
.hero-carousel .hc-arrow:active{ transform: translateY(-50%) scale(.98); }
.hero-carousel .hc-prev{ left: 10px; }
.hero-carousel .hc-next{ right: 10px; }
.hero-carousel .hc-arrow[disabled]{ opacity:.35; cursor: default; }

/* Dots + progress */
.hero-carousel .hc-footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px 14px 12px;
  display: grid;
  gap: 10px;
  pointer-events: none; /* allow clicks only on dots/buttons */
}

.hero-carousel .hc-progress{
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
}
.hero-carousel .hc-progress > span{
  display:block;
  height: 100%;
  width: 0%;
  /* background: linear-gradient(90deg, rgba(124,58,237,1), rgba(6,182,212,1)); */
  background: linear-gradient(
    90deg,
    #f78503 0%,
    #f05ba5 50%,
    #ee16d1 100%
  );  
  transform-origin: left center;
}

/* The progress animation is controlled via inline style (duration) + class toggles */
.hero-carousel.is-playing .hc-progress > span{
  animation: hcFill linear forwards;
}
@keyframes hcFill{
  from{ width: 0%; }
  to{ width: 100%; }
}

.hero-carousel .hc-dots{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.hero-carousel .hc-dot{
  inline-size: 9px;
  block-size: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.20);
  padding: 0;
  cursor: pointer;
}
.hero-carousel .hc-dot[aria-current="true"]{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.95);
}

/* Mobile */
@media (max-width: 850px){
  .hero-carousel .hc-arrow{ inline-size: 34px; block-size: 34px; }
  .hero-carousel .hc-prev{ left: 8px; }
  .hero-carousel .hc-next{ right: 8px; }
  .hero-carousel .hc-copy{ max-width: 92vw; }
  .hero-carousel .hc-copy {
    bottom: clamp(56px, 10vw, 80px);
    padding-bottom: 12px;
  }  
}

/* Reduced motion: disable auto fill animation */
@media (prefers-reduced-motion: reduce){
  .hero-carousel .hc-track{ transition: none !important; }
  .hero-carousel.is-playing .hc-progress > span{ animation: none !important; width: 100% !important; }
}

/* 🔧 Landing – resserrer le hero vers Qui sommes-nous */
section[aria-labelledby="hero-title"] {
  margin-bottom: clamp(5px, 1vw, 10px);
}

#qui {
  margin-top: 0;
}

#qui .card {
  margin-top: 0;
}

.souverainete-card .kicker {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  opacity: .85;
  margin-bottom: 14px;
}

.souverainete-card .checklist {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.souverainete-card .checklist li::before {
  content: "✔️";
  margin-right: 6px;
  opacity: .85;
}

.souverainete-card .claim {
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.5;
}

.souverainete-card .fineprint {
  font-size: 0.88rem;
  opacity: .75;
  margin-top: 10px;
}

/* Rapprocher le bloc souveraineté du titre "Votre identité. Votre voix. Votre bot." */
section#qui + section#pourquoi-title {
  margin-top: clamp(8px, 1.2vw, 16px) !important;
}
/* Rapprocher l'anim du bloc souveraineté */
section#pourquoi {
  margin-bottom: 0 !important;
}

#pourquoi .card {
  margin-bottom: 0 !important;
}

/* 1) Fix du sélecteur (ton ancien ne matchait pas) */
#qui + #pourquoi{
  margin-top: clamp(10px, 1.2vw, 18px) !important;
}

/* 2) Optionnel : réduire le "vide" en bas de la card du carousel */
#qui .card{
  padding-bottom: clamp(18px, 2.2vw, 28px);
}

/* 3) Optionnel : éviter un gros espace sous le titre */
#qui .splash{
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* Harmonise le rendu des cards : fond gris ultra léger + contour discret */
.card{
  background: #fdfdfd;                 /* gris très léger */
  border: 1px solid rgba(20, 20, 30, .08);
  box-shadow: 0 6px 20px rgba(20, 20, 30, .06);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
}

/* Survol : contour un peu plus marqué + "obscurcissement" subtil */
.card:hover{
  border-color: rgba(111, 66, 193, .28); /* violet discret (tu peux le remplacer par gris si tu veux) */
  box-shadow: 0 10px 30px rgba(20, 20, 30, .12);
  filter: brightness(.99);              /* léger obscurcissement */
  transform: translateY(-1px);
}

/* Bonus accessibilité : focus clavier */
.card:focus-within{
  border-color: rgba(111, 66, 193, .45);
  box-shadow: 0 0 0 3px rgba(111, 66, 193, .14), 0 10px 30px rgba(20, 20, 30, .12);
}

/* Aligne anim-stage avec le contenu du carousel */
#anim-stage{
  width: calc(100% - clamp(64px, 6vw, 96px));
  margin-left: auto;
  margin-right: auto;
}

/* ===== Landing2: checklist mobile override (force) ===== */
@media (max-width: 600px){
  .souverainete-card ul.checklist > li{
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .souverainete-card ul.checklist > li::before{
    font-size: 16px; /* coche un poil plus petite */
  }

  .souverainete-card .fr-flag-XL{
    height: 1.0em !important;   /* suit la nouvelle taille texte */
    margin: 0 0.25em !important;
  }
}