/* =============================
  File: styles.css
  Palette & Design System
============================= */
:root{
  --blue-900:#0B1F3A; /* bleu foncé */
  --blue-600:#1F4C7C;
  --azure:#0EA5E9;   /* azur */
  --gold:#CBA135;    /* doré */
  --gold-strong:#B38600;
  --white:#FFFFFF;
  --ink:#0C1420;
  --muted:#9FB3C8;
  --bg:#F6F8FB;
  --shadow:0 10px 30px rgba(11,31,58,.18);
  --shadow-strong:0 20px 50px rgba(11,31,58,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; font-size:16px;
}
img{max-width:100%; display:block}
.container{width:min(1140px,92%); margin-inline:auto}
.section{padding:72px 0}
.section-dark{background:linear-gradient(180deg,var(--blue-900) 0%, #0e274b 100%); color:var(--white)}
.alt-bg{background:#fff}
.title{font-family:"Playfair Display",serif; font-weight:700; margin:0 0 8px}
.display{font-size:clamp(2rem,3.2vw,3.6rem); line-height:1.1}
.lead{font-size:1.125rem; color:var(--muted)}
.muted{color:var(--muted)}
.accent{color:var(--azure)}

/* =============================
   Topbar (email, téléphone, réseaux)
============================= */
.topbar{
  background:var(--blue-900);
  color:#e7f0ff;
  font-size:.875rem;
  letter-spacing:.2px;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
}
/* neutralise styles défaut des liens (bleu/violet) dans la topbar */
.topbar a{ color:#e7f0ff; text-decoration:none }
.topbar a:visited{ color:#e7f0ff }
.tb-left{ display:flex; align-items:center; flex-wrap:wrap }
.tb-link{ display:inline-flex; align-items:center; gap:8px; padding:4px 0 }
.tb-ico{ display:inline-grid; place-items:center; color:var(--azure) }
.tb-link:hover{ color:var(--azure) }
.tb-sep{ opacity:.6; margin:0 10px }
.tb-right{ display:flex; align-items:center; gap:10px }
/* pastilles icônes réseaux */
.tb-social{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(#0EA5E9);
  border:1px solid rgba(255,255,255,.18);
  transition:all .3s ease;
}
.tb-social:hover{
  background:#0EA5E9; color:#0b1f3a;
  transform:translateY(-2px); box-shadow:0 0 10px rgba(203,161,53,.4);
}

/* =============================
   Header / Nav
============================= */
.site-header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(10px);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.header-justified{grid-template-columns:none}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--gold),var(--gold-strong)); color:#0a0a0a; font-weight:700}
.brand-text{font-weight:600}
.nav-list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav-center{justify-content:center}
.nav-list a{color:var(--azure); text-decoration:none; font-weight:500}
.nav-list .btn{margin-left:6px}
.nav-cta{display:flex; align-items:center}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}
.header-inner .img-logo{height:200px; width:auto}
.li a:hover{color:var(--azure)}

/* =============================
   Hero — Carousel plein écran
============================= */
.section-carousel{padding:0}
.carousel{
  position:relative; height:min(78vh,720px);
  overflow:hidden; background:#0b1f3a;
}
.slide{
  position:absolute; inset:0;
  background-image:var(--bg); /* valeur lue depuis style="--bg:url(...)" */
  background-size:cover; background-position:center;
  transform:scale(1.06); opacity:0;
  transition:opacity .8s ease, transform 1.6s ease;
}
.slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,58,.75) 0%, rgba(11,31,58,.35) 40%, rgba(11,31,58,.75) 100%);
}
.slide.active{opacity:1; transform:scale(1)}
.overlay{
  position:absolute; inset:auto 0 0 0; height:12px;
  background:
    radial-gradient(200px 10px at 20% 0, rgba(203,161,53,.5), transparent 60%),
    radial-gradient(200px 10px at 60% 0, rgba(14,165,233,.45), transparent 60%),
    radial-gradient(200px 10px at 90% 0, rgba(203,161,53,.5), transparent 60%);
}
.hero-content{position:relative; z-index:2; color:#fff; padding-top:14vh}
.hero-content .lead{color:#d6e6ff}

/* Contrôles du carousel */
.ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(255,255,255,.14); color:#fff;
  width:42px; height:42px; border-radius:50%; cursor:pointer; backdrop-filter:blur(6px);
}
.ctrl:hover{background:rgba(255,255,255,.28)}
.ctrl.prev{left:16px}
.ctrl.next{right:16px}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:10px}
.dots button{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer}
.dots button.active{background:rgba(255,255,255,.9)}

/* =============================
   Ancien Hero (garde pour sections sombres)
============================= */
.split-bg{background:
  radial-gradient(80% 120% at 110% 10%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 60%),
  linear-gradient(180deg,#0b1f3a 0%, #0d274a 100%); color:var(--white)
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero-copy .actions{display:flex; gap:14px; margin:18px 0 10px}
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0; list-style:none; margin:18px 0 0; color:#d6e6ff}
.hero-visual{position:relative; min-height:380px; border-radius:var(--radius); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.15)}
.award-tag{position:absolute; top:16px; left:16px; background:linear-gradient(135deg,var(--gold),var(--gold-strong)); color:#141414; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.875rem}
.orbit{position:absolute; inset:0; display:grid; place-items:center}
.planet{width:90px; height:90px; background:linear-gradient(135deg,#1b5aa1,#0ea5e9); border-radius:50%; box-shadow:0 10px 30px rgba(14,165,233,.35)}
.ring{position:absolute; width:220px; height:220px; border:2px dashed rgba(255,255,255,.18); border-radius:50%; animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-stats{position:absolute; bottom:16px; right:16px; display:flex; gap:18px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.18); padding:10px 14px; border-radius:12px}
.hero-stats div{display:grid;}
.hero-stats strong{font-size:1.125rem}
.hero-stats span{font-size:.75rem; color:#dbeafe}

/* =============================
   Buttons
============================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease}
.btn-primary{color:#0b1020; background:linear-gradient(135deg,var(--azure),#6ec1ff)}
.btn-ghost{color:var(--white); border-color:rgba(255,255,255,.35); background:transparent}
.btn-gold{color:#0e121a; background:linear-gradient(135deg,var(--gold),var(--gold-strong)); border-color:transparent}
.btn:hover{transform:translateY(-2px)}
.shadow-pulse{box-shadow:0 12px 30px rgba(14,165,233,.35); animation:shadowPulse 2.5s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{box-shadow:0 12px 30px rgba(14,165,233,.35)}50%{box-shadow:0 20px 40px rgba(14,165,233,.55)}}

/* =============================
   Cards
============================= */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid #e9eef5}
.card h3{margin:6px 0 10px}
.card-badge{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.3px; padding:6px 10px; border-radius:999px; background:rgba(11,31,58,.08); color:var(--blue-900)}
.list-bullets{margin:10px 0 10px; padding-left:18px}
.link-more{font-weight:600; color:var(--blue-600); text-decoration:none}

/* =============================
   Icon grid
============================= */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:36px}
.icon-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:18px}
.icon-item{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px}
.icon{font-size:1.6rem}

/* =============================
   Timeline
============================= */
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline::before{content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background:linear-gradient(var(--gold),transparent 60%)}
.tl-item{position:relative; padding-left:60px; margin:24px 0}
.tl-dot{position:absolute; left:11px; top:6px; width:18px; height:18px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px rgba(203,161,53,.15)}
.tl-card{background:#fff; border:1px solid #e9eef5; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}

/* =============================
   Testimonials
============================= */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.testimonial{margin:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:18px}
.testimonial blockquote{margin:0 0 10px; color:#e6f1ff}

/* =============================
   Contact
============================= */
.contact{background:#0c1e38; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius)}
.contact .form-row{display:grid; gap:6px; margin:14px}
.contact label{font-weight:600; color:#dbe7ff}
.contact input,.contact textarea{padding:12px 14px; border-radius:12px; border:1px solid #243b5c; background:#0b1930; color:#e6f1ff}
.form-note{font-size:.85rem; color:#b7c7df; margin:8px 14px 16px}

/* =============================
   Footer
============================= */
.footer{padding:36px 0}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:22px; align-items:start}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-links a{color:#d6e6ff; text-decoration:none}
.footer-legal{display:grid; gap:6px; color:#c6d6ee}
.brand-footer .brand-mark{background:linear-gradient(135deg,var(--gold),var(--gold-strong)); color:#101010}

/* =============================
   Séparateurs / décors
============================= */
.separator-line{height:1px; background:linear-gradient(90deg, transparent, rgba(11,31,58,.25), transparent)}
.separator-gold{height:10px; background:linear-gradient(90deg, transparent, rgba(203,161,53,.35), transparent)}
.divider-wave{height:40px; background:
  radial-gradient(200px 18px at 10% 0, rgba(203,161,53,.4), transparent 70%),
  radial-gradient(200px 18px at 40% 0, rgba(14,165,233,.4), transparent 70%),
  radial-gradient(200px 18px at 70% 0, rgba(203,161,53,.4), transparent 70%),
  radial-gradient(200px 18px at 100% 0, rgba(14,165,233,.4), transparent 70%);
}

/* =============================
   Elevation & hover effects
============================= */
.elevate{box-shadow:none;}
.hover-raise{transition:transform .25s ease, box-shadow .25s ease}
.hover-raise:hover{transform:translateY(-6px); box-shadow:var(--shadow-strong)}
.card-glow{position:relative}
.card-glow::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(80% 60% at 20% 10%, rgba(14,165,233,.18), transparent 60%); filter:blur(10px); z-index:-1}
.hover-float{transition:transform .35s ease}
.hover-float:hover{transform:translateY(-8px)}

/* =============================
   Reveal on scroll
============================= */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].visible{opacity:1; transform:none}

/* =============================
   Utilities
============================= */
.grid-2.v-center{align-items:center}
.icon-grid h4{margin:.4rem 0}

/* =============================
   Responsive
============================= */
@media (max-width: 1024px){
  .hero-content{padding-top:18vh}
  .hero-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr; gap:6px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .topbar-inner{flex-direction:column; gap:6px; padding:8px 0}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-list{
    position:fixed; inset:64px 0 auto 0; background:#ffffff; border-bottom:1px solid #e9eef5;
    transform:translateY(-120%); transition:transform .3s ease;
    flex-direction:column; gap:16px; padding:16px; z-index:999
  }
  .nav-list.open{transform:translateY(0)}
  .cards{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* =============================
   Accessibility helpers
============================= */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Carousel : centrer le contenu et masquer les flèches (supprimées dans le HTML) */
.hero-content{
  position:relative; z-index:2; color:#fff;
  padding-top:14vh; text-align:center; margin-top: 50px;
}
.hero-content .actions{
  display:flex; gap:14px; justify-content:center; margin-top:18px;
}

.hero-content .actions .btn{
  font-size: 1.1rem;
  padding: 20px 22px;
  margin-top: 35px;
}
/* Pastilles de navigation (dots) */
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:10px}
.dots button{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer}
.dots button.active{background:rgba(255,255,255,.9)}

/* Taille du logo image dans le header */
.logo--img{
  display:block;
  height:200px;           /* <<< taille du logo desktop */
  width:auto;
  object-fit:contain;
}

.site-header .brand{ gap:1px; }        /* aligne proprement l’ancre brand */
.site-header .header-inner{ padding:1px 0; } /* header un poil plus compact */

@media (max-width: 100px){
  .logo--img{ height:200px; }            /* <<< taille du logo sur mobile */
}

/* --- Section Notre histoire --- */
.story{ position: relative; overflow: hidden; }
.story::after{
  /* ombre douce en bas de section (style "fade") */
  content:""; display:block; height:48px; pointer-events:none;
  background: radial-gradient(60% 24px at 50% 0, rgba(11,31,58,.18), transparent 70%);
}
.story-copy .title{ margin-bottom: 12px; color:#1F4C7C; margin-top: -40px; text-decoration:dotted;}
.story-copy .lead{ color: black;  margin-top: 40px;}
.story-copy p{ margin-bottom: 18px; color: black; line-height: 1.8; font-size: 17px;}

.story-media{ margin:0; }
.story-img{
  width:100%; height:min(52vh,520px); object-fit:cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateZ(0); transition: transform .5s ease, box-shadow .5s ease;
}
.story-img:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}

/* Responsive */
@media (max-width: 1024px){
  .grid-2{ grid-template-columns: 1fr; }        /* empile le texte puis l'image */
  .story-img{ height: 360px; }
}
@media (max-width: 720px){
  .story-img{ height: 280px; }
}

/* === Section Ambition (inspirée du layout 3 ronds) === */
.ambition-head{
  text-align:center;
  max-width:900px; margin:0 auto 28px;
}
.ambition-head .lead{ color:black; }

.ambition-container {
  background: var(--ambition-title);
}


/* engagements */
.ambition-commit{
  margin-top:34px;
  background:linear-gradient(160deg, rgba(14,165,233,.06), rgba(203,161,53,.06));
  border:1px solid #e9eef5; border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.ambition-commit h2{
  margin:0 0 6px; font-size:1.5rem; color:#1F4C7C; text-align:center; font-size: 18px;
}
.ambition-commit p{
  margin:0 auto 12px; max-width:720px; color:black; text-align:center; font-size: 17px;
}
.commit-list{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px 22px;
}
.commit-list li{ display:flex; align-items:flex-start; gap:10px; }
.tick{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-strong));
  box-shadow:0 6px 18px rgba(203,161,53,.35);
  position:relative; flex:0 0 22px; margin-top:2px;
  font-size: 15px;
}
.tick::after{
  content:""; position:absolute; left:6px; top:5px;
  width:9px; height:5px; border:2px solid #0b1020; border-top:0; border-left:0;
  transform:rotate(45deg);
}

/* responsive */
@media (max-width:1024px){
  .ambition-illus{ grid-template-columns:1fr 1fr; }
  .commit-list{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .ambition-illus{ grid-template-columns:1fr; gap:28px; }
  .illus-circle{ width:240px; height:240px; }
}

/* Supprimer le remplissage coloré derrière l'illustration */
.illus-circle::after{
  content: none !important;   /* plus de calque de remplissage */
  display: none !important;
}
/* (on garde les étincelles et le hover sans fond) */

/* ====== AMBITION : tailles & couleurs du titre/texte ====== */
:root{
  --ambition-title:#1F4C7C;   /* bleu foncé (peut être remplacé) */
  --ambition-text:#000000;    /* gris ardoise pour le paragraphe */
}

.ambition .title.display{
  /* plus compact */
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--ambition-title);
  margin-bottom: 10px;
}
.ambition .lead{
  color: var(--ambition-text);
  max-width: 980px;
  margin: 0 auto 8px;
  font-size: 17px;
  margin-top: 40px;
}

/* ====== AMBITION : illustrations “plein cercle” ====== */
.ambition-illus{ align-items: start; }
.illus-circle{
  width: min(260px, 64vw);
  height: min(260px, 64vw);
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(80% 80% at 50% 20%, #FFF7E6 0%, #FBF5E8 40%, #F3F7FD 100%);
  border: 1px solid #eceff6;
  box-shadow: 0 10px 30px rgba(11,31,58,.08);
  position: relative;
  overflow: hidden;                 /* coupe tout ce qui dépasse (coins carrés) */
  display: grid; place-items: center;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Remplissage / overlay — totalement désactivé */
.illus-circle::after{ content: none !important; display: none !important; }

/* L’illustration occupe tout l’espace, sans ombre ni “carré” visible */
.illus-circle img{
  width: 100%;
  height: 100%;
  object-fit: contain;              /* adapte sans déformation */
  padding: 18px;                    /* petit “respir” contre le bord */
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);/* rogne réellement en cercle (cache les coins) */
}

/* neutralise toute couleur/fond au hover */
.illus-card,
.illus-card:hover{
  background: transparent !important;
}

/* étincelles : on garde l’animation, mais pas d’effet de fond parasite */
.illus-card:hover .illus-circle{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }

/* responsive léger */
@media (max-width:1024px){
  .illus-circle{ width: 240px; height: 240px; }
}
@media (max-width:720px){
  .ambition .title.display{ font-size: clamp(1.6rem, 5.5vw, 2rem); }
  .illus-circle{ width: 220px; height: 220px; }
}

/* --- Ambition : couleurs et tailles du titre/texte --- */
:root{
  --ambition-title:#1F4C7C; /* bleu foncé */
  --ambition-text:#000000;  /* gris */
}
.ambition .title.display{
  font-size:clamp(1.8rem,2.6vw,2.4rem);
  line-height:1.1;
  color:var(--ambition-title);
  margin-bottom:10px;
}
.ambition .lead{
  color:var(--ambition-text);
  max-width:980px; margin:0 auto 8px;
  margin-top: 30px;
  font-size:17px;
}

/* --- Ambition : cercle plein + aucune “vignette carrée” --- */
.ambition-illus{ align-items:start; }

/* conteneur rond */
.illus-circle{
  width:min(260px,64vw); height:min(260px,64vw);
  margin:0 auto 16px; border-radius:50%;
  background:radial-gradient(80% 80% at 50% 20%, #FFF7E6 0%, #FBF5E8 40%, #F3F7FD 100%);
  border:1px solid #eceff6; box-shadow:0 10px 30px rgba(11,31,58,.08);
  position:relative; overflow:hidden; display:grid; place-items:center;
  transition:transform .35s ease, box-shadow .35s ease;
  /* masque circulaire fort -> coupe tout ce qui dépasse (anti-carré, Safari inclus) */
  -webkit-mask-image:radial-gradient(circle, #000 99%, transparent 100%);
          mask-image:radial-gradient(circle, #000 99%, transparent 100%);
}

/* l’ancienne image <img> est supprimée : on peint l’illustration en background */
.illus-circle.illu::before{
  content:""; position:absolute; inset:0;
  background-image:var(--img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:110% 110%;   /* occupe TOUT le rond (un peu de dépassement) */
  /* magie anti-carré : le blanc de l’illustration “disparaît” sur le fond crème */
  mix-blend-mode:multiply;
  opacity:1; transition:transform .35s ease, opacity .35s ease;
  z-index:2;
}

/* désactive TOUT overlay/“remplissage” éventuel */
.illus-circle::after{ content:none !important; display:none !important; }

/* pas de fond au hover, juste élévation + étincelles */
.illus-card, .illus-card:hover{ background:transparent !important; }
.illus-card:hover .illus-circle{ transform:translateY(-6px); box-shadow:var(--shadow-strong); }
.illus-card:hover .illus-circle.illu::before{ transform:scale(1.06); }

/* étincelles (gardées) au-dessus de l’illustration */
.spark{ position:absolute; font-size:14px; color:#ffd86b; opacity:0;
  text-shadow:0 0 8px rgba(203,161,53,.55); animation:spark 1.8s linear infinite; z-index:3 }
.spark:nth-of-type(1){ left:16%; top:22%; animation-delay:.1s }
.spark:nth-of-type(2){ right:18%; top:28%; animation-delay:.35s }
.spark:nth-of-type(3){ left:24%; bottom:22%; animation-delay:.6s }
.spark:nth-of-type(4){ right:26%; bottom:18%; animation-delay:.85s }
.spark:nth-of-type(5){ left:50%; top:8%; animation-delay:1.1s }
.illus-card:hover .spark{ opacity:1 }
@keyframes spark{ 0%{transform:translateY(6px) scale(.85);opacity:0}
  15%{opacity:1} 60%{transform:translateY(-10px) scale(1);opacity:.9}
  100%{transform:translateY(-18px) scale(.9);opacity:0}
}

/* responsive */
@media (max-width:1024px){
  .illus-circle{ width:240px; height:240px; }
}
@media (max-width:720px){
  .illus-circle{ width:220px; height:220px; }
  .ambition .title.display{ font-size:clamp(1.6rem,5.5vw,2rem) }
}

/* ====== ÉQUIPE (fusion des effets) ====== */
.team-head{ text-align:center; max-width:880px; margin:0 auto 28px; }
.team-head .lead{ color:var(--muted); }

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.member-card{
  position:relative; height:460px; border-radius:24px;
  background:linear-gradient(180deg,#ffffff, #f8fbff);
  border:1px solid #e6edf6; box-shadow:var(--shadow);
  overflow:hidden; transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
}
/* halo doré (hérité des témoignages) */
.member-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(80% 50% at 50% 10%, rgba(203,161,53,.16), transparent 60%);
  opacity:.9; mix-blend-mode:soft-light;
}
/* “shine” en balai */
.member-card::before{
  content:""; position:absolute; top:-120%; left:-40%; width:60%; height:300%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 45%, transparent 60%);
  transform:rotate(18deg); transition: transform .8s ease;
}
.member-card:hover::before{ transform:translateX(220%) rotate(18deg); }
.member-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); }

/* Photo centrée au milieu du bloc */
.m-photo{
  position:absolute; inset:0; margin:auto;
  width:190px; height:190px; border-radius:50%;
  background-image:var(--img); background-size:cover; background-position:center;
  box-shadow:0 18px 34px rgba(11,31,58,.18), inset 0 0 0 6px #fff;
  top:50%; transform:translateY(-50%);
  margin-top: -70px;
}

/* Bandeau infos en bas */
.m-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:110px 18px 18px; text-align:center;
  background:linear-gradient(180deg, transparent 0, rgba(11,31,58,.02) 30%, rgba(11,31,58,.06) 100%);
}
.m-name{ margin:.25rem 0 2px; font-size:1.25rem; margin-top: -10px;}
.m-role{ margin:0 0 10px; color:#5e7086; }

/* Actions / icônes */
.m-actions{ display:flex; justify-content:center; gap:12px; }
.m-btn{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid #e5edf7; background:#fff; color:var(--blue-900);
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.m-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(11,31,58,.18);
  background:linear-gradient(135deg, var(--gold), var(--gold-strong)); color:#0b1020;
}
.m-btn svg{ width:20px; height:20px; display:block }

/* Reveal (compatible avec ton IO existant) */
.member-card[data-reveal]{ opacity:0; transform:translateY(16px); }
.member-card[data-reveal].visible{ opacity:1; transform:none; transition:.6s ease; }

/* Responsive */
@media (max-width:1024px){
  .team-grid{ grid-template-columns:1fr 1fr; }
  .member-card{ height:440px }
  .m-photo{ width:180px; height:180px }
}
@media (max-width:720px){
  .team-grid{ grid-template-columns:1fr; }
  .member-card{ height:420px }
  .m-photo{ width:170px; height:170px }
}

/* =============================
  File: styles.css
  Palette & Design System
============================= */
:root{
  --blue-900:#0B1F3A;
  --blue-600:#1F4C7C;
  --azure:#0EA5E9;
  --gold:#CBA135;
  --gold-strong:#B38600;
  --white:#FFFFFF;
  --ink:#0C1420;
  --muted:#9FB3C8;
  --bg:#F6F8FB;
  --shadow:0 10px 30px rgba(11,31,58,.18);
  --shadow-strong:0 20px 50px rgba(11,31,58,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; font-size:16px;
}
img{max-width:100%; display:block}
.container{width:min(1140px,92%); margin-inline:auto}
.section{padding:72px 0}
.section-dark{background:linear-gradient(180deg,var(--blue-900) 0%, #0e274b 100%); color:var(--white)}
.alt-bg{background:#fff}
.title{font-family:"Playfair Display",serif; font-weight:700; margin:0 0 8px}
.display{font-size:clamp(2rem,3.2vw,3.6rem); line-height:1.1}
.lead{font-size:1.125rem; color:var(--muted)}
.muted{color:var(--muted)}
.accent{color:var(--azure)}

/* =============================
   Topbar
============================= */
.topbar{background:var(--blue-900); color:#e7f0ff; font-size:.875rem; letter-spacing:.2px;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:6px 0}
.topbar a{color:#e7f0ff; text-decoration:none}
.topbar a:visited{color:#e7f0ff}
.tb-left{display:flex; align-items:center; flex-wrap:wrap}
.tb-link{display:inline-flex; align-items:center; gap:8px; padding:4px 0}
.tb-ico{display:inline-grid; place-items:center; color:var(--azure)}
.tb-link:hover{color:var(--azure)}
.tb-sep{opacity:.6; margin:0 10px}
.tb-right{display:flex; align-items:center; gap:10px}
.tb-social{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--azure);
  border:1px solid rgba(255,255,255,.18); transition:all .3s ease;
}
.tb-social:hover{background:#0EA5E9; color:#0b1f3a; transform:translateY(-2px); box-shadow:0 0 10px rgba(203,161,53,.4)}

/* =============================
   Header / Nav
============================= */
.site-header{position:sticky; top:0; z-index:1000; background:transparent; backdrop-filter:saturate(140%) blur(10px);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.nav-list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav-center{justify-content:center}
.nav-list a{color:var(--ink); text-decoration:none; font-weight:500}
.nav-cta{display:flex; align-items:center;}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

/* Logo (corrigé) */
.logo--img{display:block; height:38px; width:auto; object-fit:contain}
@media (max-width:720px){ .logo--img{height:200px} }

/* Lorsque header sur zone sombre */
.site-header.on-dark .nav-list a{color:#fff}
.site-header.on-dark .nav-toggle .bar{background:#fff}

.nav-cta .btn-gold {font-size:.9rem; padding:10px 16px; margin:10px; margin-left: -200px; color:#e2eaf4; background:var(--blue-600);}
.nav-cta .btn-primary{box-shadow:0 8px 20px rgba(14,165,233,.25)}
.nav-cta .btn-primary:hover{box-shadow:0 12px 30px rgba(14,165,233,.35)}

/* =============================
   Hero — Carousel
============================= */
.section-carousel{padding:0}
.carousel{position:relative; height:min(78vh,720px); overflow:hidden; background:#0b1f3a}
.slide{
  position:absolute; inset:0; background-image:var(--bg);
  background-size:cover; background-position:center;
  transform:scale(1.06); opacity:0; transition:opacity .8s ease, transform 1.6s ease;
}
.slide::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,31,58,.75) 0%, rgba(11,31,58,.35) 40%, rgba(11,31,58,.75) 100%)}
.slide.active{opacity:1; transform:scale(1)}
.overlay{position:absolute; inset:auto 0 0 0; height:12px; background:
  radial-gradient(200px 10px at 20% 0, rgba(203,161,53,.5), transparent 60%),
  radial-gradient(200px 10px at 60% 0, rgba(14,165,233,.45), transparent 60%),
  radial-gradient(200px 10px at 90% 0, rgba(203,161,53,.5), transparent 60%)}
.hero-content{position:relative; z-index:2; color:#fff; padding-top:14vh; text-align:center; margin-top:50px}
.hero-content .lead{color:#d6e6ff}
.hero-content .actions{display:flex; gap:14px; justify-content:center; margin-top:18px}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:18px; display:flex; gap:10px}
.dots button{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent; cursor:pointer}
.dots button.active{background:rgba(255,255,255,.9)}

/* Ancien Hero assets (pour la détection zone sombre) */
.split-bg{background:
  radial-gradient(80% 120% at 110% 10%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 60%),
  linear-gradient(180deg,#0b1f3a 0%, #0d274a 100%); color:var(--white)}

/* =============================
   Buttons
============================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease}
.btn-primary{color:#0b1020; background:linear-gradient(135deg,var(--azure),#6ec1ff)}
.btn-ghost{color:#fff; border-color:rgba(255,255,255,.35); background:transparent}
.btn-gold{color:#0e121a; background:linear-gradient(135deg,var(--gold),var(--gold-strong))}
.btn:hover{transform:translateY(-2px)}
.shadow-pulse{box-shadow:0 12px 30px rgba(14,165,233,.35); animation:shadowPulse 2.5s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{box-shadow:0 12px 30px rgba(14,165,233,.35)}50%{box-shadow:0 20px 40px rgba(14,165,233,.55)}}

/* =============================
   Story
============================= */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:36px}
.story{position:relative; overflow:hidden}
.story::after{content:""; display:block; height:48px; background: radial-gradient(60% 24px at 50% 0, rgba(11,31,58,.18), transparent 70%)}
.story-copy .title{margin-bottom:12px; color:#1F4C7C}
.story-copy .lead{color:#000; margin-top:40px}
.story-copy p{margin-bottom:18px; color:#000; line-height:1.8; font-size:17px}
.story-img{width:100%; height:min(52vh,520px); object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); transform:translateZ(0); transition:transform .5s ease, box-shadow .5s ease}
.story-img:hover{transform:translateY(-6px); box-shadow:var(--shadow-strong)}
@media (max-width:1024px){ .grid-2{grid-template-columns:1fr} .story-img{height:360px} }
@media (max-width:720px){ .story-img{height:280px} }

/* =============================
   Ambition
============================= */
.ambition { background: linear-gradient(135deg,#eaf3ff 0%, #dfe9f7 50%, #f6efe0 100%); }
.ambition-head{text-align:center; max-width:900px; margin:0 auto 28px}
.ambition-head .lead{color:#000}
.ambition-illus{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin:36px 0 18px; align-items:start}
.illus-card{text-align:center}
.illus-circle{
  width:min(260px,64vw); height:min(260px,64vw); margin:0 auto 16px; border-radius:50%;
  background:radial-gradient(80% 80% at 50% 20%, #FFF7E6 0%, #FBF5E8 40%, #F3F7FD 100%);
  border:1px solid #eceff6; box-shadow:0 10px 30px rgba(11,31,58,.08);
  position:relative; overflow:hidden; display:grid; place-items:center;
  transition:transform .35s ease, box-shadow .35s ease;
  -webkit-mask-image:radial-gradient(circle, #000 99%, transparent 100%);
          mask-image:radial-gradient(circle, #000 99%, transparent 100%);
}
.illus-circle.illu::before{
  content:""; position:absolute; inset:0; background-image:var(--img);
  background-repeat:no-repeat; background-position:center; background-size:110% 110%;
  mix-blend-mode:multiply; opacity:1; transition:transform .35s ease, opacity .35s ease; z-index:2;
}
.illus-card:hover .illus-circle{transform:translateY(-6px); box-shadow:var(--shadow-strong)}
.illus-card:hover .illus-circle.illu::before{transform:scale(1.06)}
.spark{position:absolute; font-size:14px; color:#ffd86b; opacity:0; text-shadow:0 0 8px rgba(203,161,53,.55); animation:spark 1.8s linear infinite; z-index:3}
.spark:nth-of-type(1){left:16%; top:22%; animation-delay:.1s}
.spark:nth-of-type(2){right:18%; top:28%; animation-delay:.35s}
.spark:nth-of-type(3){left:24%; bottom:22%; animation-delay:.6s}
.spark:nth-of-type(4){right:26%; bottom:18%; animation-delay:.85s}
.spark:nth-of-type(5){left:50%; top:8%; animation-delay:1.1s}
.illus-card:hover .spark{opacity:1}
@keyframes spark{0%{transform:translateY(6px) scale(.85);opacity:0}15%{opacity:1}60%{transform:translateY(-10px) scale(1);opacity:.9}100%{transform:translateY(-18px) scale(.9);opacity:0}}
.ambition-commit{margin-top:34px; background:linear-gradient(160deg, rgba(14, 83, 233, 0.06), rgba(203,161,53,.06)); border:1px solid #e9eef5; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.commit-list{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 22px}
.commit-list li{display:flex; align-items:flex-start; gap:10px}
.tick{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--gold-strong)); box-shadow:0 6px 18px rgba(203,161,53,.35); position:relative; flex:0 0 22px; margin-top:2px}
.tick::after{content:""; position:absolute; left:6px; top:5px; width:9px; height:5px; border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg)}
@media (max-width:1024px){ .ambition-illus{grid-template-columns:1fr 1fr} .commit-list{grid-template-columns:1fr} }
@media (max-width:720px){ .ambition-illus{grid-template-columns:1fr; gap:28px} .illus-circle{width:220px; height:220px} }

/* =============================
   Team Premium
============================= */
.teamP-head{text-align:center; max-width:880px; margin:0 auto 28px}
.teamP-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.teamP-card{
  position:relative; border-radius:24px; background:linear-gradient(180deg,#ffffff, #f8fbff);
  border:1px solid #e6edf6; box-shadow:var(--shadow); overflow:hidden; transition:transform .35s ease, box-shadow .35s ease; will-change:transform;
}
.teamP-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-strong)}
.teamP-glow{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(80% 50% at 50% 10%, rgba(203,161,53,.16), transparent 60%); mix-blend-mode:soft-light}
.teamP-photo{position:relative; width:190px; height:190px; border-radius:50%; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 18px 34px rgba(11,31,58,.18), inset 0 0 0 6px #fff; margin:-70px auto 0}
.teamP-info{text-align:center; padding:110px 18px 18px}
.teamP-name{margin:.25rem 0 2px; font-size:1.25rem}
.teamP-role{margin:0 0 10px; color:#5e7086}
.teamP-actions{display:flex; justify-content:center; gap:12px}
.teamP-btn{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid #e5edf7; background:#fff; color:var(--blue-900); text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease}
.teamP-btn:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(11,31,58,.18); background:linear-gradient(135deg, var(--gold), var(--gold-strong)); color:#0b1020}
.teamP-btn svg{width:20px; height:20px}
.teamP-particles{position:absolute; inset:0; pointer-events:none; list-style:none; margin:0; padding:0}
.teamP-particles li{position:absolute; opacity:.08}
@media (max-width:1024px){ .teamP-grid{grid-template-columns:1fr 1fr} .teamP-photo{width:180px; height:180px} }
@media (max-width:720px){ .teamP-grid{grid-template-columns:1fr} .teamP-photo{width:170px; height:170px} }

/* =============================
   Footer simple
============================= */
.footer{padding:36px 0}
.foot-grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:22px; align-items:start}
.foot-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.foot-links a{color:#0B1F3A; text-decoration:none}

/* =============================
   Separators
============================= */
.separator-line{height:1px; background:linear-gradient(90deg, transparent, rgba(11,31,58,.25), transparent)}
.divider-wave{height:40px; background:
  radial-gradient(200px 18px at 10% 0, rgba(203,161,53,.4), transparent 70%),
  radial-gradient(200px 18px at 40% 0, rgba(14,165,233,.4), transparent 70%),
  radial-gradient(200px 18px at 70% 0, rgba(203,161,53,.4), transparent 70%),
  radial-gradient(200px 18px at 100% 0, rgba(14,165,233,.4), transparent 70%)}

/* =============================
   Reveal on scroll
============================= */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].visible{opacity:1; transform:none}

/* =============================
   Responsive nav
============================= */
@media (max-width:900px){ .topbar-inner{flex-direction:column; gap:6px; padding:8px 0} }
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav-list{position:fixed; inset:64px 0 auto 0; background:#ffffff; border-bottom:1px solid #e9eef5; transform:translateY(-120%); transition:transform .3s ease; flex-direction:column; gap:16px; padding:16px; z-index:999}
  .nav-list.open{transform:translateY(0)}
}


/* liens de nav lisibles sur fond blanc */
.nav-list a{ color: black; }
.nav-list a:hover{ color: var(--blue-600); }

/* ===== SECTION ÉQUIPE (fond #e2eaf4) ===== */
.team-board{ background:#e2eaf4; padding-top:60px; padding-bottom:60px; }
.team-board__head{ text-align:center; margin:0 auto 28px; max-width:900px; }
.team-board .lead{ color:black; }
.team-board .title{ color:var(--blue-600); }

/* Grille 2 colonnes (responsive) */
.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width: 900px){ .pc-grid{ grid-template-columns:1fr; } }

/* Carte */
.profile-card{
  border-radius:18px; overflow:hidden; background:#fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.profile-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }

/* Bandeau haut + avatar */
.pc-head{
  position:relative; color:#fff; padding:22px 22px 76px;
}
.is-blue   .pc-head{ background:#3e8bc7; }   /* bleu pro */
.is-orange .pc-head{ background:#d96935; padding:22px 22px 103px; }   /* orange sport */


.pc-avatar{
  position:absolute; left:22px; top:22px;
  width:150px; height:150px; border-radius:100%;
  object-fit:cover; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.pc-name{ margin:0 0 2px 118px; font-weight:800; margin-left: 200px; letter-spacing:.5px; line-height:1.1; }
.pc-mode{ margin:0 0 0 118px; margin-left: 200px; opacity:.9 }

/* Corps + lignes stylées */
.pc-body{ padding:18px 18px 14px; }
.pc-list{ margin:0; padding:0; }
.pc-row{
  display:grid; grid-template-columns:180px 1fr; gap:12px;
  padding:12px 6px; align-items:start;
  border-bottom:2px solid rgba(11,31,58,.06);
}
.pc-row:last-child{ border-bottom:0; }
.pc-row dt{ font-weight:700; color:#38618c; }
.pc-row dd{ margin:0; color:#243549; }

/* Actions */
.pc-actions{ display:flex; justify-content:flex-start; gap:10px; padding:10px 6px 4px; }
.pc-social{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:#e9f2fb; color:#1f4c7c; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pc-social:hover{ transform:translateY(-3px); background:#cfe6ff; box-shadow:0 10px 20px rgba(11,31,58,.15); }

/* Petites entrées reveal déjà gérées par tes règles [data-reveal] */

/* --- hauteurs dynamiques exposées en variables --- */
:root{
  --topbar-h: 38px;   /* valeur par défaut, sera ajustée en JS */
  --header-h: 74px;
}

/* Topbar FIXE */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1100;
}

/* Header/Nav FIXE, aligné sous la topbar */
.site-header{
  position: fixed;
  top: var(--topbar-h);
  left:0; right:0;
  z-index: 1000;
  background:#fff;                /* barre bien blanche */
  box-shadow: 0 4px 18px rgba(11,31,58,.05);
}

/* Hauteur contrôlée par variable (sans gonfler la barre) */
.header-inner{ height: var(--header-h); }

/* Le contenu de la page est poussé sous les deux barres fixes */
body{
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

/* Menu mobile : panneau fixé SOUS topbar + header */
@media (max-width: 720px){
  .nav-list{
    position: fixed;
    inset: calc(var(--topbar-h) + var(--header-h)) 0 auto 0;
    background:#ffffff;
    border-bottom:1px solid #e9eef5;
    transform: translateY(-120%);
    transition: transform .3s ease;
    flex-direction: column;
    gap:16px; padding:16px;
    z-index: 999;
  }
  .nav-list.open{ transform: translateY(0); }
}

/* Liens lisibles sur fond blanc */
.nav-list a{ color: var(--ink); }
.nav-list a:hover{ color: var(--blue-600); }

/* Le gros logo peut dépasser sans changer la hauteur du header */

/* Header & topbar collés et TOUJOURS blancs */
.topbar{
  position: fixed; top:0; left:0; right:0; z-index:1100;
}
.site-header{
  position: fixed; top: var(--topbar-h,38px); left:0; right:0; z-index:1000;
  background:#fff !important;                     /* <= blanc forcé */
  box-shadow: 0 4px 18px rgba(11,31,58,.05);
}
.site-header.on-dark,
.site-header.shadow-dark{                          /* si un JS ajoute ces classes */
  background:#fff !important; box-shadow: 0 4px 18px rgba(11,31,58,.08) !important;
}

/* espace de compensation en haut de page */
:root{ --topbar-h:38px; --header-h:74px; }
.header-inner{ height: var(--header-h); }
body{ padding-top: calc(var(--topbar-h) + var(--header-h)); }

/* Nav lisible sur blanc */
.nav-list a{ color: var(--ink); }
.nav-list a:hover{ color: var(--blue-600); }

/* Logo 300px sans gonfler la barre */

/* Effet "reveal-in" pour chaque rangée de la fiche */
.pc-row{
  opacity:0; transform:translateY(12px); filter:blur(4px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
  transition-delay: var(--d, 0ms);        /* délai injecté en JS pour le stagger */
}

/* Titre + avatar avec un léger slide aussi */
.pc-head, .pc-name, .pc-mode, .pc-avatar{
  will-change: transform, opacity;
}
.profile-card .pc-head{ opacity:.0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
.profile-card .pc-avatar{ opacity:.0; transform:translateY(8px) scale(.98); transition:opacity .5s ease .05s, transform .5s ease .05s; }

/* Quand la carte entre dans le viewport */
.profile-card.revealed .pc-head,
.profile-card.revealed .pc-avatar{
  opacity:1; transform:none;
}
.profile-card.revealed .pc-row{
  opacity:1; transform:none; filter:blur(0);
}

/* Bonus : petite lueur au survol */
.profile-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); }

/* ====== Palette luxe (si pas déjà déclarée) ====== */
:root{
  --lux-blue-900:#0B1F3A;
  --lux-blue-800:#0F2D52;
  --lux-blue-700:#1F4C7C;
  --lux-blue-500:#2F6FA7;
  --lux-blue-300:#6EA6D9;
  --lux-gold:#CBA135;
  --lux-gold-strong:#B38600;
  --lux-gold-soft:#E7C979;
}

/* ====== Carte Équipe – variante BLEU + DORÉ (luxe) ====== */
/* Bandeau supérieur */
.profile-card.is-blue .pc-head{
  position: relative;
  color:#fff;
  padding: 28px 24px 60px;
  border-bottom: 1px solid rgba(231,201,121,.35);

  /* Fond multi-couches : bleus profonds + halos */
  background:
    radial-gradient(80% 120% at 110% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(70% 110% at -10% 120%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(11,31,58,.15), rgba(11,31,58,0) 45%),
    /* dégradé vivant (animé) */
    linear-gradient(135deg, var(--lux-blue-900), var(--lux-blue-800) 35%, var(--lux-blue-700) 65%, var(--lux-blue-500));
  background-size: 140% 140%, 140% 140%, 100% 100%, 200% 200%;
  animation: luxFlow 16s ease-in-out infinite;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
}

/* Liseré doré subtil (intérieur) */
.profile-card.is-blue .pc-head::after{
  content:"";
  position:absolute; inset:1px;
  border-radius: 16px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(203,161,53,.28), rgba(203,161,53,.08) 40%, transparent 70%);
  mix-blend-mode: screen;
}

/* Shimmer (balai de lumière) */
.profile-card.is-blue .pc-head::before{
  content:"";
  position:absolute;
  top:-140%; left:-40%;
  width:60%; height:320%;
  transform: rotate(18deg);
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 45%, transparent 60%);
  opacity:.45;
  animation: luxShine 5.2s ease-in-out infinite;
}

/* Avatar – anneau doré double + ombre douce */
.profile-card.is-blue .pc-avatar{
  position:absolute; left:24px; top:24px;
  width:160px; height:160px; border-radius:100%;
  object-fit:cover;
  background:#fff;
  box-shadow:
    0 10px 28px rgba(0,0,0,.25),
    0 0 0 4px rgba(255,255,255,.85),
    0 0 0 6px rgba(203,161,53,.45);
}
.profile-card.is-blue .pc-avatar::after{ /* anneau conique doré (léger) */
  content:"";
  position:absolute; inset:-6px; border-radius:50%;
  background:
    conic-gradient(from 220deg,
      transparent 0 20%,
      rgba(231,201,121,.65) 22%,
      rgba(179,134,0,.65) 28%,
      transparent 34% 100%);
  filter: blur(.6px);
  opacity:.9;
  animation: spinRing 9s linear infinite;
  pointer-events:none;
}

/* Nom + rôle : traits dorés animés */
.profile-card.is-blue .pc-name{
  margin: 0 0 4px 124px;
  font-weight: 800;
  letter-spacing:.4px;
  line-height:1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
  margin-left : 250px;
  margin-top: 20px;
  font-size: 22px;
}
.profile-card.is-blue .pc-name::after{
  content:"";
  display:block;
  height:2px; width:86px;
  margin-top:8px;
  background:
    linear-gradient(90deg, transparent, var(--lux-gold) 35%, var(--lux-gold-strong) 65%, transparent);
  background-size: 200% 100%;
  animation: goldSweep 4.5s ease-in-out infinite;
}

.profile-card.is-blue .pc-mode{
  margin: 0 0 0 124px;
  opacity:.95;
  color: #EAF2FF;
  margin-left: 200px;
  font-size: 14px;
  margin-top: 20px;
}

/* Micro-particules “twinkles” dorées (sans HTML en plus) */
.profile-card.is-blue .pc-head i,
.profile-card.is-blue .pc-head em{ display:none } /* safety si déjà utilisés */
.profile-card.is-blue .pc-head .twinkles{display:none} /* hook optionnel */

.profile-card.is-blue .pc-head{
  --tw: radial-gradient(circle at center, rgba(231,201,121,.9), rgba(231,201,121,0) 60%);
  --tw2: radial-gradient(circle at center, rgba(255,255,255,.65), rgba(255,255,255,0) 60%);
}
.profile-card.is-blue .pc-head::marker{content:none}
.profile-card.is-blue .pc-head ._tw{display:none}

/* On projette les twinkles via une autre pseudo-couche */
.profile-card.is-blue .pc-head .sparkle-layer{display:none}
.profile-card.is-blue .pc-head::selection{background:transparent}
/* Removed empty rule set for .profile-card.is-blue .pc-head:after */

/* Halo doré discret derrière le texte (bas du bandeau) */
.profile-card.is-blue .pc-head .gold-halo{display:none}

/* Hover global de la carte : accentuer or + relever */
.profile-card.is-blue.hover-raise:hover .pc-head{
  box-shadow: inset 0 -60px 100px rgba(231,201,121,.10);
}

/* ====== Animations ====== */
@keyframes luxFlow{
  0%   { background-position: 0% 0%, 100% 100%, 0% 0%, 0% 0% }
  50%  { background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100% }
  100% { background-position: 0% 0%, 100% 100%, 0% 0%, 0% 0% }
}
@keyframes luxShine{
  0%   { transform: translateX(0) rotate(18deg) }
  55%  { transform: translateX(220%) rotate(18deg) }
  100% { transform: translateX(220%) rotate(18deg) }
}
@keyframes spinRing{
  to { transform: rotate(360deg); }
}
@keyframes goldSweep{
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/* Petit “lift” sur toute la carte + glow doré au hover (s’accorde à ta .hover-raise) */
.profile-card.is-blue:hover{
  box-shadow:
    0 24px 50px rgba(11,31,58,.28),
    0 0 0 1px rgba(231,201,121,.35);
  transition: box-shadow .35s ease, transform .35s ease;
}

.with-ico-link{ display:inline-flex; align-items:center; gap:8px; padding:4px 0 }
.with-ico{ display:inline-grid; place-items:center; color:rgba(255,255,255,.08) }
.with-ico-link:hover{ color:rgba(255,255,255,.08)}
.with-ico-sep{ opacity:.6; margin:0 10px }
.with-ico-right{ display:flex; align-items:center; gap:10px }
/* pastilles icônes réseaux */
.ico{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08);
  color: #e2eaf4;
  border:1px solid rgba(255,255,255,.18);
  transition:all .3s ease;
}
.ico:hover{
  background:#0EA5E9; color:#0b1f3a;
  transform:translateY(-2px); box-shadow:0 0 10px rgba(203,161,53,.4);
}

/* Section équipe */
.team-board{ background:#e2eaf4; padding:60px 0; }
.team-board__head{ text-align:center; margin:0 auto 28px; max-width:900px; }
.team-board .lead{ color:black; }

/* Grille 2 colonnes */
.pc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
@media (max-width: 980px){ .pc-grid{ grid-template-columns:1fr; } }

/* Carte “premium” */
.profile-card{
  border-radius:18px; overflow:hidden; background:#fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.profile-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }

/* Bandeau haut multi-bleus + or (luxe) */
.profile-card.is-blue .pc-head{
  position:relative; color:#fff; padding:22px 22px 80px;
  background: radial-gradient(120% 120% at -10% -20%, #15375f 0%, #123054 40%, transparent 41%),
              linear-gradient(135deg, #0e274b 0%, #1b3f6e 55%, #25558f 75%, #2e6ab0 100%);
  isolation:isolate;
}
.profile-card.is-blue.alt .pc-head{
  background: radial-gradient(130% 130% at 110% -40%, #1a3d6a 0%, transparent 42%),
              linear-gradient(135deg, #15375f 0%, #1e4a82 55%, #2762a8 100%);
}
/* filet doré */
.profile-card .pc-head::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient( to right, rgba(203,161,53,.0), rgba(203,161,53,.35), rgba(203,161,53,.0) );
  mix-blend-mode:soft-light; opacity:.55;
}

/* Avatar + titres */
.pc-avatar{
  position:absolute; left:22px; top:22px;
  width:100px; height:100px; border-radius:100%;
  object-fit:cover; border:4px solid rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.pc-name{ position:relative; margin:0 0 4px 120px; font-weight:800; letter-spacing:.4px; z-index:1; }
.pc-mode{ position:relative; margin:0 0 0 120px; opacity:.9; z-index:1; }

/* Corps + lignes */
.pc-body{ padding:18px; }
.pc-list{ margin:0; padding:0; }
.pc-row{
  display:grid; grid-template-columns:180px 1fr; gap:12px;
  padding:12px 6px; align-items:start;
  border-bottom:2px solid rgba(11,31,58,.06);
  opacity:0; transform:translateY(10px); filter:blur(3px);
  transition:opacity .5s ease, transform .5s ease, filter .5s ease;
}
.pc-row:last-child{ border-bottom:0; }
.pc-row dt{ font-weight:700; color:#2a4b73; }
.pc-row dd{ margin:0; color:#243549; }

/* Apparition au scroll (stagger) : class .revealed posée en JS si tu veux */
.profile-card.revealed .pc-row{ opacity:1; transform:none; filter:none; }
.profile-card.revealed .pc-row:nth-child(1){ transition-delay:.05s }
.profile-card.revealed .pc-row:nth-child(2){ transition-delay:.15s }
.profile-card.revealed .pc-row:nth-child(3){ transition-delay:.25s }

/* Actions / icônes */
.pc-actions{ display:flex; gap:10px; padding:12px 6px 2px; }
.pc-social{
  display:grid; place-items:center; width:42px; height:42px; border-radius:10px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.pc-ln   { background:#e7f1ff; color:#0A66C2; border-color:#d7e6ff; }
.pc-mail { background:#fff6e8; color:#a86c00;  border-color:#ffe8c1; }
.pc-phone{ background:#e9f8f1; color:#0b8457;  border-color:#d5f1e6; }

.pc-social:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(11,31,58,.15);
}

/* ===== Développement durable ===== */
.eco-band{ padding:64px 0; background-color: white }
.eco-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width: 900px){ .eco-grid{ grid-template-columns:1fr; } }

.eco-title{
  font-family:"Playfair Display",serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height:1.1; margin:0 0 10px;
  color:#1a1b2e;
  margin-top: -50px;
}
.eco-title span{
  background: linear-gradient(135deg, var(--azure), #6ec1ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
 
}

.eco-lead{ color:#2b2e3a; max-width:60ch; margin-top: 20px; }

.btn-eco{
  margin-top:18px;
  color:var(--azure);
  background:linear-gradient(135deg,--blue-600,#e2eaf4);
  border:1px solid rgba(11,31,58,.06);
  box-shadow:0 14px 34px;
  
}

.eco-lead 

.btn-eco:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(18,184,134,.38); }

/* Icône à droite */
.eco-illustration{
  position:relative; aspect-ratio:16/10; border-radius:18px;
  background:none; display:grid; place-items:center; overflow:hidden;
  box-shadow: var(--shadow);
}
.eco-icon{ width:min(80%,360px); height:auto; animation:ecoFloat 6s ease-in-out infinite; }
@keyframes ecoFloat{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-6px)} }

/* halo doré doux */
.eco-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 10% 10%, rgba(203,161,53,.18), transparent 40%),
    radial-gradient(80% 60% at 90% 90%, rgba(14,165,233,.18), transparent 60%);
  mix-blend-mode:soft-light;
}

/* petit “orbite” animé autour du globe */
.eco-orbit{ stroke-dasharray:6 8; animation:dash 8s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-140; } }

/* supprime carte blanche et ombre autour de l’icône */
.eco-illustration.no-card{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  aspect-ratio: auto;
  display: grid; place-items: center;
}

/* taille + flottement doux */
.eco-icon{ width:min(86%,420px); height:auto; animation:ecoFloat 6s ease-in-out infinite; }
@keyframes ecoFloat{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-6px)} }

/* orbite pointillée animée */
.eco-orbit{ stroke-dasharray:8 10; animation:dash 8s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-240; } }

/* bouton luxe : bleus → azur → doré, avec shimmer léger */
.btn-eco.luxe{
  --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));
  border: 1px solid rgba(11,31,58,.06);
  box-shadow: 0 14px 34px rgba(11,31,58,.22);
  position: relative; overflow: hidden;
}

.btn-eco.luxe a { color: white; }
.btn-eco.luxe:hover a { color: white; }

.btn-eco.luxe::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 45%, transparent 60%);
  transform: translateX(-120%); pointer-events:none;
}
.btn-eco.luxe:hover{ transform: translateY(-2px); box-shadow:0 18px 42px rgba(11,31,58,.28); }
.btn-eco.luxe:hover::after{ animation:shine 1s ease; }
@keyframes shine{ to{ transform: translateX(120%); } }

/* titres inchangés : le span reste en azur/bleu */
.eco-title span{
  background: linear-gradient(135deg, #0EA5E9, #2E6AB0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ====== VALEURS ====== */
.values-band{
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(60% 60% at 100% 10%, rgba(203,161,53,.08), transparent 60%),
    #fff;
}

.values-head{ text-align:center; margin-bottom:28px; }
.values-head .title{ color: var(--ambition-title); }
.values-head .lead{ color:black; }

/* grille responsive */
.values-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1024px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .values-grid{ grid-template-columns:1fr; } }

/* carte */
.value-card{
  position:relative; overflow:hidden;
  background:#ffffff; border:1px solid #e9eef5; border-radius:18px;
  padding:18px 16px 16px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  opacity:0; transform: translateY(12px);
}
[data-reveal].visible .values-grid .value-card{
  /* cascade animée (stagger) au reveal */
  animation: v-pop .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i,0) * 90ms);
}
@keyframes v-pop{ to{ opacity:1; transform:none; } }

.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.value-card h3{ margin:10px 0 6px; color:#1F4C7C; }
.value-card p{ margin:0 0 6px; color:#243549; }
.value-card small{ color:#5e7086; }

/* icône : halo + animation */
.v-ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background: radial-gradient(120% 100% at 0% 0%, rgba(14,165,233,.20), rgba(203,161,53,.20));
  border:1px solid rgba(11,31,58,.08);
  box-shadow: 0 10px 26px rgba(11,31,58,.12);
  margin-bottom:8px; position:relative; overflow:hidden;
}
.v-ico::after{
  content:""; position:absolute; inset:-30% -60%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6), transparent 60%);
  transform: translateX(-120%);
  animation: v-shine 3s ease-in-out infinite;
}
@keyframes v-shine{ 0%,60%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

.v-ico svg{ width:32px; height:32px; display:block; }
.dash{ stroke-dasharray:8 8; animation: dash 10s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-160; } }

/* Devise finale */
.values-motto{
  margin-top:26px; text-align:center;
  padding:16px; border-radius:16px;
  background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(203,161,53,.10));
  border:1px solid #e9eef5;
}
.values-motto p{
  margin:0; font-size:1.15rem;
  background: linear-gradient(135deg,#0EA5E9,#1F4C7C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.values-motto .brand{
  display:block; margin-top:6px; font-weight:700;
  background: linear-gradient(135deg,#1F4C7C,#CBA135);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Habilitations & qualité ===== */
.qualite{
  background:
  #e2eaf4;
}
.qualite__head{text-align:center; max-width:980px; margin-top: 30px; margin:0 auto 26px}
.qualite .kicker{display:inline-block; letter-spacing:.2em; text-transform:uppercase; font-weight:700; font-size:0.80rem; color:#e2eaf4; background:var(--ambition-title); padding:6px 10px; margin-top:-180px; border-radius:999px}
.qualite__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px}
@media (max-width: 900px){ .qualite__grid{ grid-template-columns:1fr; } }

.q-card{
  position:relative; border-radius:18px; 
  border:0px solid #e7eef7;
  padding:22px; overflow:hidden;
}
.q-card--info{padding-left:92px}
.q-badge{
  position:absolute; left:18px; top:18px; width:64px; height:72px;
  filter: drop-shadow(0 12px 20px rgba(11,31,58,.18));
}
.float-y{ animation:floatY 3.8s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-6px)} }

.q-title{margin:0 0 10px; margin-top:30px; font-weight:700; color:#0B1F3A}
.q-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.q-list li{display:flex; align-items:flex-start; gap:10px}
.q-list .tick{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-strong));
  box-shadow:0 6px 16px rgba(203,161,53,.35); position:relative; flex:0 0 20px;
}
.q-list .tick::after{
  content:""; position:absolute; left:6px; top:4px; width:8px; height:5px;
  border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg);
}
.q-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.q-actions .btn  a { flex:1 1 auto; min-width:140px; text-align:center; color:var(--azure); background:linear-gradient(135deg,--blue-600,#e2eaf4); border:1px solid rgba(11,31,58,.06); box-shadow:0 14px 34px; padding:10px 14px; border-radius:10px; font-weight:600; transition:all .3s ease; }
.q-actions .btn:hover a{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(18,184,134,.38); }

/* Carte certificat */
.q-card--cert{padding:0; background:linear-gradient(160deg, rgba(14,165,233,.06), rgba(203,161,53,.08))}
.cert__ribbon{
  position:absolute; top:14px; right:-42px; transform:rotate(35deg);
  background:linear-gradient(135deg,#0E3A70,#1F4C7C); color:#fff; font-weight:800; letter-spacing:.08em;
  padding:8px 60px; box-shadow:0 8px 18px rgba(11,31,58,.18);
  border:1px solid rgba(255,255,255,.25);
}
.cert__paper{
  margin:22px; border-radius:14px; background:#fff;
  border:1px solid #e7eef7; padding:18px 18px 26px; position:relative;
  background-image:
    radial-gradient(220px 80px at 20% 0, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(220px 80px at 100% 100%, rgba(203,161,53,.15), transparent 60%);
}
.cert__head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.cert__logo{
  display:grid; place-items:center; width:72px; height:72px; border-radius:12px;
  background:linear-gradient(135deg,#0EA5E9,#6ec1ff); color:#0b1020; font-weight:800;
  border:1px solid rgba(0,0,0,.06);
}
.cert__meta small{color:#5e7086}
.cert__title{margin:10px 0; color:#0B1F3A; margin-top:30px}
.cert__line{margin:6px 0; color:#223144}
.cert__blank{display:inline-block; min-width:180px; border-bottom:1px dashed #cfd9e8}
.cert__signs{display:flex; gap:18px; margin-top:16px}
.sig{flex:1}
.sig__line{display:block; height:2px; background:#223144; opacity:.4; margin-bottom:6px}
.cert__seal{position:absolute; right:18px; bottom:18px; opacity:.9; filter:drop-shadow(0 8px 18px rgba(11,31,58,.18))}

.qualite__head .title.display { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-top:80px; line-height:1.1; margin:0 0 10px; color:#1a1b2e; }

---- NEW FILE ----

/* Kicker générique */
.kicker{display:inline-block; letter-spacing:.18em; text-transform:uppercase; font-weight:800; font-size:.75rem;
  background:#e9f3ff; color:#1F4C7C; padding:6px 10px; border-radius:999px}
.kicker--light{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25)}

/* ===== Se former ===== */
.seformer__head{text-align:center; max-width:980px; margin:0 auto 26px}
.seformer__lead{color:black; margin-top: 20px;}
.seformer__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1024px){ .seformer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .seformer__grid{grid-template-columns:1fr} }

.sf-card{
  background:#fff; border:1px solid #e7eef7; border-radius:18px; padding:20px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.sf-card__ico{font-size:1.6rem; line-height:1; margin-bottom:6px}
.sf-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.sf-list .tick{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 6px 16px rgba(203,161,53,.35);
  position:relative; display:inline-block; margin-right:8px; top:4px;
}
.sf-list .tick::after{content:""; position:absolute; left:6px; top:4px; width:8px; height:5px; border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg)}
.pillset{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.pill{
  padding:6px 10px; border-radius:999px; font-weight:600; font-size:.85rem;
  background:linear-gradient(135deg,#eaf4ff,#fff); border:1px solid #d8e6f6; color:#1F4C7C;
}

/* ===== Pédagogie ===== */
.ped__head{text-align:center; max-width:980px; margin:0 auto 28px}
.ped__steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1024px){ .ped__steps{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .ped__steps{grid-template-columns:1fr} }
.ped-step{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:18px; position:relative;
}
.ped-nb{
  position:absolute; right:14px; top:12px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-weight:800; color:#0B1F3A;
  background:linear-gradient(135deg,#CBA135,#B38600);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* ===== Catalogue ===== */
.catalog{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:1200px){ .catalog{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .catalog{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .catalog{grid-template-columns:1fr} }
.course-card{
  background:#fff; border:1px solid #e7eef7; border-radius:18px; padding:20px; box-shadow:var(--blue-900);
}
.course-ico{font-size:1.7rem; margin-bottom:6px}
.course-card h3{margin:6px 0 6px}

/* Impact bloc */
.impact{margin-top:24px}
.impact__card{
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(14,165,233,.08), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, rgba(203,161,53,.12), transparent 60%),
    #fff;
  border:1px solid #e7eef7; border-radius:18px; padding:20px; box-shadow:var(--shadow);
}

/* Micro-mouvements décoratifs */
.sf-card::after,
.course-card::after{
  content:""; position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background:radial-gradient(80% 50% at 20% 0, rgba(14,165,233,.12), transparent 60%);
  opacity:.7; transition:opacity .35s ease;
}
.sf-card:hover::after, .course-card:hover::after{opacity:1}

/* === Cartes photo catalogue === */
.course-card.photo{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 260px;               /* hauteur par défaut */
  background: #0b1f3a;
  box-shadow: var(--shadow);
  border: 1px solid #e7eef7;
  isolation: isolate;              /* pour les effets blend sans fuite */
}

/* Image de fond pilotée par --img */
.course-card.photo::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size: cover; background-position: center;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
  transition: transform .7s ease, filter .7s ease, opacity .5s ease;
  z-index: 0;
}

/* Voile dégradé (bleus + doré + azur), plus prononcé au hover */
.course-card.photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,31,58,.10) 0%, rgba(11,31,58,.45) 60%, rgba(11,31,58,.85) 100%),
    radial-gradient(80% 60% at 10% 0%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(203,161,53,.22), transparent 60%);
  mix-blend-mode: multiply;
  transition: opacity .5s ease;
  z-index: 1;
}

/* Contenu overlay */
.cc-overlay{
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 260px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.25) 100%);
}
.cc-overlay h3{ margin: 0 0 2px; }
.cc-overlay p{ margin: 0 0 8px; color: #d7e6ff; }


/* Bouton dégradé luxueux (bleus + doré + azur) */
.btn-gradient{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none;
  color:#0b1020; background: linear-gradient(135deg, #0EA5E9 0%, #3e8bc7 35%, #6ec1ff 55%, #CBA135 100%);
  box-shadow: 0 10px 22px rgba(14,165,233,.25), 0 8px 18px rgba(203,161,53,.20);
  border: 0;
  transform: translateY(6px);
  opacity: 0;                      /* caché par défaut (apparait au hover) */
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease, filter .35s ease;
}
.btn-gradient:hover{
  transform: translateY(2px);
  box-shadow: 0 16px 30px rgba(14,165,233,.35), 0 12px 26px rgba(203,161,53,.25);
  filter: brightness(1.05);
}

/* Effets hover généraux */
.course-card.photo:hover::before{ transform: scale(1.12); filter: saturate(1.08) contrast(1.08) }
.course-card.photo:hover::after{ opacity: 1; }
.course-card.photo:hover .btn-gradient{ opacity: 1; transform: translateY(0); }

/* Grille responsive (reprend ta grille existante) */
.catalog{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
@media (max-width:1200px){ .catalog{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){  .catalog{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){  .catalog{ grid-template-columns:1fr } .course-card.photo{ min-height: 220px } }

/* ===== CONTACT & ADMISSIONS ===== */

/* Hero luxe (dégradés bleus + azur + voile doré subtil) */
.ct-hero{
  padding: 68px 0 46px;
  color: var(--white);
  background:
    radial-gradient(90% 80% at 110% 0%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(203,161,53,.20), transparent 60%),
    linear-gradient(180deg, #0B1F3A 0%, #0E274B 80%);
  position: relative;
  overflow: hidden;
}
.ct-hero::after{
  content:""; position:absolute; inset:auto -20% -1px -20%; height:24px;
  background:
    radial-gradient(200px 10px at 20% 0, rgba(203,161,53,.45), transparent 60%),
    radial-gradient(200px 10px at 60% 0, rgba(14,165,233,.35), transparent 60%),
    radial-gradient(200px 10px at 90% 0, rgba(203,161,53,.45), transparent 60%);
  opacity:.9;
}
.ct-hero__title{
  font-family:"Playfair Display", serif;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  margin: 0 0 8px;
  text-align: center;
  color: #ffffff;
}
.ct-hero__lead{
  max-width: 780px;
  color:#d6e6ff;
  margin:0;
  
  
}

/* séparateur sous le hero */
.ct-sep{ height:12px; background:linear-gradient(90deg, transparent, rgba(203,161,53,.35), transparent) }

/* Layout principal */
.ct-wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  margin: 28px 0 64px;
}
@media (max-width: 960px){
  .ct-wrap{ grid-template-columns:1fr; }
}

/* Carte formulaire */
.ct-card{
  background:#fff;
  border:1px solid #e7eef7;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.ct-card__body{ padding: 22px 20px 18px; }

/* Form grid */
.ct-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ct-form .full{ grid-column: 1 / -1; }
.ct-form--sub{ grid-template-columns:1fr 1fr; gap:14px; }

.ct-label{
  display:block; font-weight:600; margin-bottom:6px; color:#1f3250;
}
.ct-input, .ct-select, .ct-textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid #d9e4f2;
  background:#f9fbfe;
  color:#0c1420;
  outline: none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-textarea{ resize:vertical; min-height:120px; }

.ct-input:focus, .ct-select:focus, .ct-textarea:focus{
  border-color:#3E8BC7;
  box-shadow: 0 0 0 4px rgba(14,165,233,.18);
  background:#fff;
}

.ct-error-text{
  min-height: 18px;
  font-size:.85rem;
  color:#b3261e;
}

/* Radios + checkbox */
.ct-row{ display:flex; align-items:center; gap:8px; }
.ct-checkbox{ width:18px; height:18px; }

/* Actions */
.ct-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.ct-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ct-btn.primary{
  color:#071225;
  background: linear-gradient(135deg, #0EA5E9 0%, #3E8BC7 45%, #1F4C7C 100%);
  box-shadow: 0 14px 28px rgba(14,165,233,.28), 0 10px 24px rgba(11,31,58,.18);
}
.ct-btn.primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.ct-btn.ghost{
  color:#1F4C7C; background:#f0f6ff; border-color:#d9e4f2;
}
.ct-btn.ghost:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(11,31,58,.12) }

/* Infos & carte */
.ct-infos{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content:start;
}
.ct-info{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #e7eef7; border-radius:14px; padding:14px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ct-info:hover{ transform:translateY(-4px); box-shadow: var(--shadow-strong) }
.ct-info svg{ width:24px; height:24px; color:#1F4C7C }
.ct-info b{ display:block; margin-bottom:2px; color:#0b1f3a }
.ct-info a{ color:#1F4C7C; text-decoration:none }

.ct-map{
  overflow:hidden; border-radius:14px; border:1px solid #e7eef7; box-shadow: var(--shadow);
}
.ct-map iframe{ width:100%; height:300px; display:block; }

/* Reveal doux pour cette section (compatible avec ton [data-reveal]) */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].visible{ opacity:1; transform:none; }

/* Micro-effets luxe : traits dorés subtils au focus du formulaire */
.ct-input:focus, .ct-select:focus, .ct-textarea:focus{
  box-shadow:
    0 0 0 4px rgba(14,165,233,.18),
    0 0 0 1px rgba(203,161,53,.35) inset;
}

/* ===== HEADER ADAPTÉ AU LOGO ===== */
:root{
  /* hauteur du logo (desktop) */
  --logo-h: 280px;          /* <<< demandé : 250px */
  --header-pad: 14px;       /* padding vertical */
  --header-h: calc(var(--logo-h) + var(--header-pad)*2);
  --topbar-h: 0px;          /* si tu as une topbar, mets sa hauteur ici */
}

/* Header fixe blanc qui suit la taille du logo */
.site-header{
  position: fixed; top: var(--topbar-h); left:0; right:0; z-index:1000;
  background:#fff; box-shadow: 0 6px 24px rgba(11,31,58,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h);
}

/* Brand : réserve un slot suffisant pour un logo haut */
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo--img{
  display:block; height: var(--logo-h); width:auto; object-fit:contain; margin-top:50px;
}

/* Nav */
.nav{ flex:1 1 auto; }
.nav-list{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; justify-content:center; }
.nav-list a{ color:#0C1420; text-decoration:none; font-weight:600;  margin-top:-50px; transition: color .25s ease; }
.nav-list a:hover{ color: var(--blue-600); }

/* Burger mobile */
.nav-toggle{ display:none; background:transparent; border:0; cursor:pointer; }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#0C1420; margin:5px 0; }

/* CTA à droite */
.nav-cta{ display:flex; align-items:center; gap:8px; }
.btn{ padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent; }
.btn-primary{ color:#071225; background:linear-gradient(135deg,#0EA5E9 0%,#3E8BC7 45%,#1F4C7C 100%); }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-outline{ color:#1F4C7C; background:#f4f8ff; border-color:#d9e4f2; }
.btn-outline:hover{ box-shadow:0 10px 20px rgba(11,31,58,.10); transform:translateY(-1px); }
.btn-ghost{ color:#1F4C7C; background:#eef5ff; border-color:#d9e4f2; }

/* Espace compensateur du header fixe */
body{ padding-top: calc(var(--topbar-h) + var(--header-h)); }

/* Responsive */
@media (max-width: 980px){
  :root{ --logo-h: 120px; }      /* logo réduit sur mobile */
  .nav-toggle{ display:block; }
  .nav-list{
    position: fixed; inset: calc(var(--topbar-h) + var(--header-h)) 0 auto 0;
    background:#fff; border-bottom:1px solid #e9eef5;
    transform: translateY(-120%); transition: transform .3s ease;
    flex-direction: column; gap:16px; padding:16px; z-index: 999;
  }
  .nav-list.open{ transform: translateY(0); }
}

/* ===== CHATBOT ===== */
.bot-widget{ position: fixed; right:18px; bottom:18px; z-index: 1200; }
.bot-toggle{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,#0EA5E9,#1F4C7C); color:#fff; font-size:22px;
  box-shadow:0 14px 30px rgba(14,165,233,.35);
}
.bot-panel{
  position:absolute; right:0; bottom:70px; width:min(360px,88vw);
  background:#fff; border:1px solid #e6edf6; border-radius:18px; box-shadow:var(--shadow-strong);
  display:flex; flex-direction:column; overflow:hidden;
}
.bot-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:linear-gradient(135deg,#0B1F3A,#1F4C7C); color:#fff; }
.bot-close{ background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; }
.bot-log{ padding:12px; max-height:320px; overflow:auto; background:#f7fbff; }
.msg{ padding:10px 12px; border-radius:14px; margin:6px 0; max-width:84%; box-shadow:0 6px 16px rgba(11,31,58,.08); }
.msg.bot{ background:#fff; border:1px solid #e6edf6; }
.msg.me{ background:#dff2ff; margin-left:auto; }
.bot-form{ display:flex; gap:8px; padding:10px; border-top:1px solid #e6edf6; background:#fff; }
.bot-input{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid #d9e4f2; }
.bot-send{ padding:10px 14px; border-radius:12px; border:0; background:linear-gradient(135deg,#0EA5E9,#3E8BC7); color:#071225; font-weight:700; }

/* ===== COOKIE BAR ===== */
.cookie-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:1150;
  background: rgba(255,255,255,.98); box-shadow: 0 -10px 30px rgba(11,31,58,.12);
}
.cookie-inner{ width:min(1080px,92%); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.cookie-inner p{ margin:0; color:#0C1420; }
.cookie-actions{ display:flex; gap:10px; }
.link{ color:#1F4C7C; text-decoration:none; }

/* Header plus compact */
:root{
  --logo-h: 150px;  /* ↓ avant 250px */
  --header-pad: 6px; /* ↓ avant 14px */
  --header-h: calc(var(--logo-h) + var(--header-pad)*2);
}

@media (max-width: 980px){
  :root{ --logo-h: 80px; --header-pad: 4px; }
}

df-messenger{ --df-messenger-font-color:#071225; --df-messenger-send-icon:#0EA5E9;
  --df-messenger-button-titlebar-color:#1F4C7C; --df-messenger-chat-background:#f7fbff; }
  
/* Grille catalogue + overlays pro */
.catalog{ 
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; 
}
@media (max-width:1024px){ .catalog{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){  .catalog{ grid-template-columns:1fr; } }

.course-card.img{
  position:relative; border-radius:18px; overflow:hidden; height:280px;
  background:#0b1f3a;
  box-shadow:0 16px 36px rgba(11,31,58,.14);
  isolation:isolate;
}
.course-card.img::before{
  content:""; position:absolute; inset:0;
  background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform .5s ease;
  filter:saturate(1) contrast(1.05);
}
.course-card.img::after{
  /* Dégradé sombre BLEU pour lisibilité du texte */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(14,165,233,.28), transparent 40%),
    linear-gradient(180deg, rgba(5,16,32,.05) 0%, rgba(5,16,32,.65) 55%, rgba(5,16,32,.92) 100%);
  box-shadow: inset 0 -80px 140px rgba(14, 80, 160, .65);
}
.cc-inner{
  position:absolute; inset:auto 0 0 0; padding:18px; color:#fff; z-index:2;
  text-shadow:0 2px 10px rgba(10,28,60,.55), 0 6px 24px rgba(10,28,60,.55);
}
.cc-inner h3{ margin:0 0 6px; }
.cc-inner p{ margin:0 0 12px; color:#e6f1ff; }

/* CTA overlay en dégradé bleu/azur/doré */
.cta-overlay{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; font-weight:700; color:white; text-decoration:none;
  background:linear-gradient(135deg,#0EA5E9 0%, #3E8BC7 40%, #6AA8FF 70%, #CBA135 100%);
  box-shadow:0 12px 26px rgba(14,165,233,.35);
}
.course-card.img:hover::before{ transform:scale(1.12); }


/* ===== Opportunités (charte bleus + azur + doré) ===== */
.opp .kicker{ color:var(--azure); font-weight:700; letter-spacing:.3px; }
.opp-head .lead{ color:#41556e; }
.opp-btn{ margin-top:12px; color:#0b1020; background:linear-gradient(135deg,#0EA5E9 0%,#3E8BC7 45%,#1F4C7C 100%); box-shadow:0 14px 28px rgba(14,165,233,.28), 0 10px 24px rgba(11,31,58,.18); border:0; }
.opp-btn:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 20px 36px rgba(14,165,233,.35), 0 14px 30px rgba(11,31,58,.22); }

/* Grille cartes métiers (style “catalog”) */
.opp-grid{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:1024px){ .opp-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .opp-grid{ grid-template-columns:1fr; } }

.opp-card{
  position:relative; border-radius:22px; overflow:hidden;
  min-height:360px; background:#081b33; isolation:isolate;
  box-shadow:0 18px 44px rgba(11,31,58,.14);
}
.opp-card::before{
  content:""; position:absolute; inset:0;
  background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform .6s ease;
  filter:saturate(1.05) contrast(1.02);
}
.opp-card__overlay{
  position:absolute; inset:0; z-index:1;
  background:
   radial-gradient(120% 80% at 0% 0%, rgba(14,165,233,.35), transparent 45%),
   linear-gradient(180deg, rgba(3,10,20,.1) 0%, rgba(3,10,20,.78) 75%, rgba(3,10,20,.92) 100%);
}
.opp-card__gold{
  position:absolute; right:-22px; top:-22px; width:160px; height:160px; z-index:1;
  background:conic-gradient(from 20deg, rgba(203,161,53,.95), rgba(179,134,0,.95));
  filter:blur(26px); opacity:.35; border-radius:50%;
}
.opp-card:hover::before{ transform:scale(1.12); }

.opp-card__body{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:18px;
  color:#eaf2ff; text-shadow:0 2px 24px rgba(5,20,48,.6);
}
.opp-card h4{ margin:6px 0 4px; font-size:1.25rem; }
.opp-card p{ margin:0 0 8px; color:#cfe2ff; }
.opp-btn{ margin-top:8px; border-color:rgba(255,255,255,.35); color:#fff; }

.opp-list{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.opp-list .tick{
  display:inline-block; width:18px; height:18px; margin-right:6px; vertical-align:-3px;
  border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 10px 22px rgba(203,161,53,.35); position:relative;
}
.opp-list .tick::after{
  content:""; position:absolute; left:6px; top:4px; width:7px; height:4px;
  border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg);
}
.opp-list li{ color:#e7f0ff; }

/* Pastille icône cerclée doré */
.opp-pill{
  display:grid; place-items:center; width:48px; height:48px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#fff; margin-bottom:8px;
  backdrop-filter:blur(6px);
}
.opp-pill.ring{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 26px rgba(11,31,58,.35); position:relative; }
.opp-pill.ring::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  border:2px solid rgba(203,161,53,.9); filter:drop-shadow(0 0 8px rgba(203,161,53,.45));
}
.opp-pill .ico{ width:22px; height:22px; }

/* Débouchés */
.opp-outcomes{ margin-top:16px; }
.outcomes-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:12px;
}
@media (max-width:1024px){ .outcomes-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .outcomes-grid{ grid-template-columns:1fr; } }

.outcome{
  border-radius:18px; background:#fff; border:1px solid #e6edf6; padding:18px;
  box-shadow:0 16px 38px rgba(11,31,58,.10); transition:transform .25s ease, box-shadow .25s ease;
}
.outcome:hover{ transform:translateY(-6px); box-shadow:0 28px 62px rgba(11,31,58,.18); }
.outcome h4{ margin:8px 0 2px; color:#1F4C7C; }
.outcome p{ margin:0; color:#000000; }
.outcome .title{ display:flex; align-items:center; gap:10px; font-size: 2rem; }
.lead.small{ font-size:1rem; color:#41556e; margin-top:8px; }

/* CTA final */
.opp-cta{ display:grid; place-items:center; gap:10px; padding-top:10px; }
.opp-goal{ color:var(--azure); font-weight:700; margin:0; }
.btn.gradient.big{ padding:16px 26px; font-size:1.05rem; }
.btn.gradient{
  color:#ffffff;
  margin-top:12px;
  background:#0b1020; background:linear-gradient(135deg,#0EA5E9 0%,#3E8BC7 45%,#1F4C7C 100%); box-shadow:0 14px 28px rgba(14,165,233,.28), 0 10px 24px rgba(11,31,58,.18); border:0; }
.btn-gradient:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 20px 36px rgba(14,165,233,.35), 0 14px 30px rgba(11,31,58,.22); }
  
  


/* Animations douces */
.floaty{ animation:float 3.2s ease-in-out infinite; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* renforce lisibilité des textes des cartes (ombre bleue subtile) */
.opp-card__body, .opp-card h4, .opp-card p, .opp-list li{
  text-shadow: 0 1px 0 rgba(8,27,51,.35), 0 4px 24px rgba(8,27,51,.55);
}

/* ===== SE PERFECTIONNER À PARIS ===== */
.perf-head .kicker{ color:var(--azure); font-weight:700; letter-spacing:.3px; }
.perf-head .lead{ color:#41556e; }

.perf-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:16px;
}
@media (max-width:1024px){ .perf-grid{ grid-template-columns:1fr; } }

.perf-block{
  background:#fff; border:1px solid #e6edf6; border-radius:18px;
  padding:18px; box-shadow:0 14px 36px rgba(11,31,58,.08);
}
.perf-title{ margin:4px 0 8px; color:#1F4C7C; }
.perf-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.perf-list li{ color:#243549; }
.perf-list .tick{
  display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-3px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-strong));
  box-shadow:0 8px 18px rgba(203,161,53,.35); position:relative;
}
.perf-list .tick::after{
  content:""; position:absolute; left:6px; top:4px; width:7px; height:4px;
  border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg);
}

/* Modules (cards visuelles premium) */
.perf-mods .title{ margin:6px 0 12px; color: var(--azure); font-weight:700; }
.mods-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top: 30px;
}
@media (max-width:1024px){ .mods-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .mods-grid{ grid-template-columns:1fr; } }

.mod-card{
  position:relative; border-radius:22px; overflow:hidden; min-height:260px;
  background:#0b1f3a; isolation:isolate; box-shadow:0 18px 44px rgba(11,31,58,.12);
}
.mod-card::before{
  content:""; position:absolute; inset:0;
  background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform .6s ease;
  filter:saturate(1.05) contrast(1.03);
}
.mod-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(14,165,233,.25), transparent 45%),
    linear-gradient(180deg, rgba(6,14,30,.15) 0%, rgba(6,14,30,.78) 70%, rgba(6,14,30,.92) 100%);
}
.mod-card:hover::before{ transform:scale(1.12); }

.mod-body{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:16px; color:#eaf2ff;
  text-shadow:0 1px 0 rgba(8,27,51,.35), 0 6px 28px rgba(8,27,51,.55);
}
.mod-body h4{ margin:6px 0 4px; font-size:1.05rem; }
.mod-body p{ margin:0; color:#d6eaff; }

.mod-pill{
  display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 10px 26px rgba(11,31,58,.35);
}

/* Bandeau passerelle (fond sombre premium) */
.perf-bridge{ border-radius:22px; padding:26px 0; margin-top:16px; }
.bridge-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center;
}

.bridge-copy-title{ margin:0 0 12px; color:white;  }
.bridge-copy p{ margin:0; color:#d6eaff;font-size: 17.5px; word-break: keep-all; }     
@media (max-width:1024px){ .bridge-grid{ grid-template-columns:1fr; } }

.bridge-actions{ display:flex; gap:4px; margin-top:12px; align-items: center;}
.btn.gradient{
  color:#0b1020;
  background:linear-gradient(135deg, #0EA5E9 0%, #3579c5 35%, #1F4C7C 70%, #CBA135 100%);
  box-shadow:0 16px 40px rgba(14,165,233,.28);
  margin-left: 20px;
}
.btn.gradient:hover{ transform:translateY(-2px); box-shadow:0 22px 54px rgba(14,165,233,.42); }

.bridge-visual{ position:relative; }
.bridge-visual img{
  width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  margin-left: -19px;
}
.bridge-visual .spark{
  position:absolute; color:#ffd86b; text-shadow:0 0 10px rgba(203,161,53,.55);
  animation:spark 2s linear infinite; opacity:0.9;
}
.bridge-visual .spark:nth-of-type(1){ left:10%; top:12%; }
.bridge-visual .spark:nth-of-type(2){ right:14%; top:24%; animation-delay:.35s }
.bridge-visual .spark:nth-of-type(3){ left:46%; bottom:12%; animation-delay:.7s }
@keyframes spark{
  0%{ transform:translateY(6px) scale(.9); opacity:0 }
  20%{ opacity:1 }
  60%{ transform:translateY(-10px) scale(1); opacity:.95 }
  100%{ transform:translateY(-18px) scale(.92); opacity:0 }
}

/* ===== FRAIS & FINANCEMENT ===== */
.fees .kicker{ color:var(--azure); font-weight:700; letter-spacing:.3px; }

/* Prix principal */
.price-wrap{ display:grid; grid-template-columns:minmax(220px,280px) 1fr; gap:26px; align-items:center; }
@media (max-width:900px){ .price-wrap{ grid-template-columns:1fr; } }

.price-pill{
  display:grid; place-items:center; gap:6px; padding:22px 18px; border-radius:22px;
  background:linear-gradient(135deg,#0EA5E9 0%,#3988d0 35%,#1F4C7C 70%,#CBA135 100%);
  box-shadow:0 18px 44px rgba(14,165,233,.28);
  color:#0b1020; border:1px solid rgba(255,255,255,.14);
}
.price-pill .price{ font-size:2rem; font-weight:800; line-height:1; color: var(--bg)}
.price-pill .note{ font-weight:600; opacity:.9; color: var(--bg)}


.price-opts{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.price-opts li{ color:#243549; }

.price-pill p .a { margin-left: 50px; }

/* Modes de paiement */
.pay{ margin-top:10px; }
.pay-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1200px){ .pay-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .pay-grid{ grid-template-columns:1fr; } }

.pay-card{
  background:#fff; border:1px solid #e6edf6; border-radius:16px; padding:16px;
  box-shadow:0 12px 28px rgba(11,31,58,.08);
}
.pay-ico{ font-size:1.6rem; line-height:1; margin-bottom:6px; }
.receipt-note{ margin-top:10px; color:#41556e; }

/* Bloc solidaire */
.solidarity{
  background:linear-gradient(160deg, rgba(14,165,233,.06), rgba(203,161,53,.06));
  border:1px solid #e6edf6; border-radius:18px; padding:18px;
}

/* ===== BOURSES ===== */
.scholar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:900px){ .scholar-grid{ grid-template-columns:1fr; } }

.section-head h3 {
  font-size: 15px;
}

.scholar-card{ background:#fff; border:1px solid #e6edf6; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.sch-head{
  position:relative; padding:16px; color:#fff;
  background:linear-gradient(135deg,#1F4C7C,#0EA5E9);
}
.sch-head.is-gold{ background:linear-gradient(135deg,#CBA135,#B38600); color:#0b1020; }
.sch-head.is-blue{ background:linear-gradient(135deg,#0EA5E9,#1F4C7C); }
.sch-ico{ font-size:1.4rem; margin-bottom:6px; }
.sch-tag{ margin:4px 0 0; opacity:.95; }

.sch-body{ padding:14px 16px 18px; }
.sch-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sch-cta{ display:flex; gap:10px; margin-top:16px; }

.btn.gradient{
  color:#0b1020;
  background:linear-gradient(135deg,#0EA5E9 0%,#3c84cb 35%,#1F4C7C 70%,#CBA135 100%);
  box-shadow:0 16px 40px rgba(14,165,233,.28);
}
.btn.gradient:hover{ transform:translateY(-2px); box-shadow:0 22px 54px rgba(14,165,233,.42); }

/* ===== COMMENT S’INSCRIRE ===== */
.enroll .kicker{ color:var(--azure); font-weight:700; letter-spacing:.3px; }
.enroll-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width: 960px){ .enroll-wrap{ grid-template-columns:1fr; } }

.en-title{ margin-top:0; color:var(--blue-600); }
.en-title-2{ margin-top:0; color:var(--blue-600); margin-left: 50px;}

.lead-2{ margin-left: 50px; color:var(--muted)}

/* Cartes étapes */
.steps{ display:grid; grid-template-columns:1fr; gap:16px; }

.step-card{
  display:grid; grid-template-columns:62px 1fr; gap:14px;
  padding:16px; border-radius:16px; background:#fff;
  border:1px solid #e6edf6; box-shadow:0 12px 30px rgba(11,31,58,.08);
  position:relative; overflow:hidden;
}
.step-card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 120% at -10% -20%, rgba(14,165,233,.10), transparent 60%),
              radial-gradient(60% 120% at 110% 120%, rgba(203,161,53,.10), transparent 60%);
  pointer-events:none;
}
.step-ico{
  display:grid; place-items:center; width:62px; height:62px; border-radius:14px;
  color:#0b1020;
  background:linear-gradient(135deg,#0EA5E9 0%, #3c84cb 35%, #1F4C7C 70%, #CBA135 100%);
  box-shadow:0 10px 26px rgba(14,165,233,.25);
  animation:floaty 3.6s ease-in-out infinite;
}

.step-body p{ margin:0 0 12px; color:#41556e; }
.ico-svg{ width:28px; height:28px; color: var(--bg)}
.step-body h4{ margin:0 0 4px; }
.step-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn.small{ padding:10px 14px; font-size:.95rem; }
.btn.gradient{
  color:var(--bg);
  background:linear-gradient(135deg,#0EA5E9 0%,#3c84cb 35%,#1F4C7C 70%,#CBA135 100%);
  box-shadow:0 16px 40px rgba(14,165,233,.28);
}
.btn.gradient:hover{ transform:translateY(-2px); box-shadow:0 22px 54px rgba(14,165,233,.42); }

@keyframes floaty{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}

.receipt-note{ color:#41556e; margin-top:8px; }

/* Flow institutions (timeline chic) */
.flow{ list-style:none; margin:0; padding:0; position:relative;margin-left: -25px; }
.flow-item{ position:relative; padding-left:42px; margin:18px 0; }
.flow-item::before{
  content:""; position:absolute; left:20px; top:0; bottom:-18px; width:2px;
  background:linear-gradient(var(--azure), transparent 70%);
}
.flow-item:last-child::before{ bottom:12px; }
.flow-dot{
  position:absolute; left:13px; top:.25rem; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold), var(--gold-strong));
  box-shadow:0 0 0 6px rgba(203,161,53,.18);
}
.flow-card{
  background:#fff; border:1px solid #e6edf6; border-radius:14px; padding:12px 14px;
  box-shadow:0 10px 26px rgba(11,31,58,.07);
}

/* Séparateurs déjà fournis par ton thème: .separator-gold / .separator-line */

/* CTA band */
.cta-band{
  background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(203,161,53,.10));
  padding: 42px 0;
  border-top: 1px solid #e9eef5;
  border-bottom: 1px solid #e9eef5;
}
.cta-band__inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.cta-band h2{ margin:0; font-family:"Playfair Display", serif; }
.btn.big{ padding:14px 22px; font-size:1.05rem; border-radius:999px; }
.btn-azure-gold{
  color:#0b1020;
  background: linear-gradient(135deg, var(--azure), #6ec1ff 50%, var(--gold) 120%);
  border: none;
}

/* Footer */
.footer{ padding: 36px 0; background:var(--ambition-title); }
.foot-col col-brand{ color:#e2eaf4; }
.col-brand img{ filter: brightness(0) invert(1); margin-top: -40px; width:200px; height:200px; height:auto ;}
.foot-col h4{ margin-top:0; color:#ffffff; margin-left: -40px; text-decoration: underline; }
.foot-col p{ color:#cfd9e6; }
.foot-col-legal h4{ margin-top:38px;} 
.foot-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot-list small{ color:#e2eaf4; text-decoration:none; margin-top:60px; }
.foot-list small:hover{ color: #e2eaf4; }
.copyright{ margin-top:26px; text-align:center; color:#a9b6ce; font-size:0. ninerem; }

.foot-grid{ display:grid; grid-template-columns:1.2fr .8fr 1fr .2fr; gap:22px; align-items:start; }
.foot-col-legal { grid-column:span 2; list-style:none; padding:0; margin:0; display:grid; gap:8px; margin-left:-60px; }
.foot-col-contact { grid-column:span 3; margin-left:-10px;}
.foot-col-social a { grid-column:span 3; margin-left:100px;}
.foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; margin-left:-60px;  }
.foot-links a{ color:#e2eaf4; text-decoration:none; }
.foot-links a:hover{ color: #e2eaf4; }
.with-ico{ display:inline-flex; align-items:center; gap:10px; }
.with-ico .ico{ width:20px; height:20px; color:#e2eaf4;}
.hamburger-btn.compact{ width:46px; height:46px; border-radius:12px; border:1px solid #e9eef5; background:#fff; }
.hamburger-btn .burger-lines{
  display:block; width:22px; height:2px; background:#0B1F3A; box-shadow:0 6px 0 #0B1F3A, 0 -6px 0 #0B1F3A; margin:0 auto;
}

/* Drawer */
.footer-drawer[hidden]{ display:none; }
.footer-drawer{
  position:fixed; inset:0; z-index:1300; display:grid; grid-template-columns:1fr auto;
}
.drawer-backdrop{ background:rgba(0,0,0,.35); }
.drawer-panel{
  width:min(420px, 92vw); height:100%; background:#fff; box-shadow:var(--shadow-strong);
  padding:16px; overflow:auto;
}
.drawer-header{ display:flex; align-items:center; justify-content:space-between; }
.drawer-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.drawer-list .has-sub > span{ font-weight:700; display:block; margin-top:8px; }
.drawer-list .has-sub ul{ list-style:none; padding-left:14px; display:grid; gap:6px; }

/* Responsive */
@media (max-width: 900px){
  .cta-band__inner{ flex-direction:column; text-align:center; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .foot-grid{ grid-template-columns:1fr; }
}

nav a {
  color: black;
  text-decoration: none;
  padding: 10px;
  transition: color 0.3s, border-bottom 0.3s;
}

nav a:hover {
  color: #ffd700; /* couleur au survol */
}

nav a.active {
  color: black; /* couleur quand la page est active */
  border-bottom: 2px solid #4A8CBF; /* soulignement pour indiquer la page active */
}

/* ---------- Header : logo plus haut + aligné ---------- */
.site-header .header-inner{ align-items:center; }
.site-header .brand{ display:flex; align-items:center; }


/* ---------- Topbar : badges réseaux + hover ---------- */
.tb-right{ gap:8px; }
.tb-social{ width:34px; height:34px; border-radius:50%; background:var(--azure); color:var(--ambition-title); border:1px solid #d7e6ff; }
.tb-social:hover{ transform:translateY(-2px); background:#0EA5E9; color:#0b1f3a; }

/* ---------- Kicker "Habilitations" plus haut ---------- */
#habilitations .section-head .kicker,
.hab-head .kicker{
  display:inline-block;
  transform: translateY(-8px);
}

/* ---------- Team : visages bien cadrés + grandes photos ---------- */
.pc-avatar{
  width: 160px; height: 160px;
  object-fit: cover;
  object-position: center top; /* tête visible */
  border: 6px solid #fff;
  box-shadow:0 10px 30px rgba(11,31,58,.18);
}
.pc-head{ padding-top: 28px; } /* respire autour de l’avatar */

/* Alternative “portrait entier” si tu utilises un fond image */
.member-card .m-photo{
  width: 210px; height: 260px; border-radius: 18px;
  background-size: cover; background-position: center top;
  box-shadow:0 18px 34px rgba(11,31,58,.18), inset 0 0 0 4px #fff;
}

/* ---------- Boutons : même teinte que "Contact" + bleu nav ---------- */
.btn-outline{         /* (Contact) */
  background:#edf4ff; border:1px solid #cfe0ff; color:#0b1f3a;
}
.nav-cta .btn-primary,                 /* S’inscrire */
.hero .btn-primary,                    /* Découvrir nos formations */
.cta .btn-primary{
  background:#edf4ff !important;
  border:1px solid #cfe0ff !important;
  color:#0b1f3a !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.12);
}

/* ---------- CTA bas : texte non "muted" ---------- */
.cta-band .muted{ color:#0b1020; }

/* ---------- Séparateurs + titrages plus hiérarchisés ---------- */
.separator-line{height:1px; background:linear-gradient(90deg,transparent,rgba(11,31,58,.25),transparent); margin:36px 0;}
.section-head .title.display{ font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 8px; }
.section-head .lead{ font-size: clamp(1rem, 1.4vw, 1.15rem); margin-top: 8px; color:#41556e; }

/* ---------- Cartes "catalogue" overlay : ombre bleue pour lisibilité ---------- */
.course-card .cc-overlay{
  position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 80%, rgba(6,25,56,.65), rgba(6,25,56,.35) 60%, rgba(6,25,56,.15) 100%);
  pointer-events:none;
}
.course-card h3, .course-card p{ text-shadow:0 8px 24px rgba(0,20,60,.45); }

/* ---------- Espaces entre sections opportunités / autres ---------- */
section.section{ padding: 72px 0; }

/* ===== Mentions légales ===== */
.legal .section-head .kicker{ background:#e9f2ff; color:#1f4c7c; padding:6px 10px; border-radius:999px; font-weight:700; }
.legal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
@media (max-width: 900px){ .legal-grid{ grid-template-columns:1fr; } }

.legal-card{
  background:#fff;
  border:1px solid #e6edf6;
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;
}
.legal-card h2{ margin:4px 0 10px; color:#0b1f3a; }
.legal-badge{
  position:absolute; top:-14px; right:-14px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #0EA5E9, #6ec1ff);
  color:#0b1020; font-size:20px;
  box-shadow:0 10px 24px rgba(14,165,233,.25);
}

.legal-dl{ margin:0; }
.legal-dl dt{ font-weight:700; color:#1f4c7c; margin-top:8px; }
.legal-dl dd{ margin:0 0 4px 0; color:#243549; }
.legal-actions{ margin:8px 0 0; padding-left:18px; }
.legal-actions li{ list-style:disc; margin:4px 0; }
.legal-note{ margin-top:8px; color:#5e7086; }
.legal-bottom{ color:#41556e; text-align:center; }

/* ===== Politique de confidentialité (réutilise le style des cartes légales) ===== */
.privacy .section-head .kicker{
  background:#e9f2ff; color:#1f4c7c; padding:6px 10px; border-radius:999px; font-weight:700;
}

.privacy-toc{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px;
}
.privacy-toc a{
  display:inline-block; padding:8px 12px; border:1px solid #e6edf6; border-radius:999px;
  text-decoration:none; color:#1f4c7c; background:#fff; box-shadow:var(--shadow);
}
.privacy-toc a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong); color:var(--azure); }

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

.legal-ol{ margin:8px 0 0 18px; }
.legal-ol li{ margin:6px 0; }

.h5{ font-size:1.05rem; margin:10px 0 6px; color:#1f4c7c; }

.legal-actions.two-cols{
  columns:2; column-gap:24px; padding-left:18px; list-style:disc;
}
@media (max-width:720px){ .legal-actions.two-cols{ columns:1; } }

.site-footer .footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.6fr; /* 4e bloc = hamburger */
  gap: 48px;
  align-items:start;
}

.footer-menu{
  display:flex;
  flex-direction:column;
  align-items:right;  /* à droite */
  gap:8px;
}

/* ===== CGU (Conditions d'utilisation) ===== */
.terms .section-head .kicker{
  background:#e9f2ff; color:#1f4c7c; padding:6px 10px; border-radius:999px; font-weight:700;
}
.terms-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width: 900px){ .terms-grid{ grid-template-columns:1fr; } }

.terms-toc{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px;
}
.terms-toc a{
  display:inline-block; padding:8px 12px; border:1px solid #e6edf6; border-radius:999px;
  text-decoration:none; color:#1f4c7c; background:#fff; box-shadow:var(--shadow);
}
.terms-toc a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong); color:var(--azure); }

/* Réutilise les cartes légales */
.terms .legal-card{ position:relative; }
.terms .legal-card h2{ margin:4px 0 10px; color:#0b1f3a; }

/* Petits intertitres dans les cartes */
.h6{ font-size:.98rem; margin:8px 0 4px; color:#1f4c7c; font-weight:600; }

/* ===== CGV ===== */
.cgv .section-head .kicker{
  background:#fff5e6; color:#7a4a00; padding:6px 10px; border-radius:999px; font-weight:700;
}
.cgv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width: 900px){ .cgv-grid{ grid-template-columns:1fr; } }

/* Carte CGV = même base que .legal-card */
.cgv .legal-card{ position:relative; }
.cgv .legal-card h2{ margin:4px 0 10px; color:#0b1f3a; }

/* Liste d'articles jolies */
.article-ol{ margin:8px 0 0 18px; }
.article-ol li{ margin:6px 0; }

/* Badge visuel en haut à droite (numéro d'article/emoji) */
.doc-badge{
  position:absolute; top:-14px; right:-14px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #0EA5E9, #6ec1ff);
  color:#0b1020; font-size:18px;
  box-shadow:0 10px 24px rgba(14,165,233,.25);
}

/* Bas de page */
.doc-bottom{ color:#41556e; text-align:center; }


/* ===== Politique de cookies ===== */
.cookies .section-head .kicker{
  background:#e9f2ff; color:#1f4c7c; padding:6px 10px; border-radius:999px; font-weight:700;
}
.cookies-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width: 900px){ .cookies-grid{ grid-template-columns:1fr; } }

.cookie-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px; }
.cookie-tag{
  display:inline-block; padding:6px 10px; border:1px solid #e6edf6; border-radius:999px;
  background:#fff; color:#1f4c7c; box-shadow:var(--shadow);
  font-size:.9rem;
}

.cookie-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; background:#fff;
  border:1px solid #e6edf6; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.cookie-table th, .cookie-table td{ padding:10px 12px; vertical-align:top; }
.cookie-table thead th{
  background:#f7fbff; color:#0b1f3a; text-align:left; border-bottom:1px solid #e6edf6;
}
.cookie-table tbody tr + tr td{ border-top:1px solid #eef3f9; }

.cookies .legal-card h2{ margin:4px 0 10px; color:#0b1f3a; }
.cookies .legal-card{ position:relative; }
.cookies .legal-badge{
  position:absolute; top:-14px; right:-14px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(135deg,#0EA5E9,#6ec1ff);
  color:#0b1020; font-size:18px; box-shadow:0 10px 24px rgba(14,165,233,.25);
}

/* Bouton gérer mes cookies */
.cookie-manage-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid #e6edf6;
  background:#fff; color:#1f4c7c; box-shadow:var(--shadow); cursor:pointer; text-decoration:none;
}
.cookie-manage-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-strong); color:var(--azure); }

#rdv .ct-card__body{
  background:#fff; border:1px solid #e6edf6; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
#rdv .ct-input, #rdv .ct-select, #rdv .ct-textarea{
  border:1px solid #cfd8e3; border-radius:10px; transition:border-color .2s, box-shadow .2s;
}
#rdv .ct-input:focus, #rdv .ct-select:focus, #rdv .ct-textarea:focus{
  border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.2); outline:none;
}
.ct-btn.primary{
  background:linear-gradient(135deg, #0EA5E9, #1769aa); border:none; color:#fff; font-weight:600;
}
.ct-btn.primary:hover{
  transform:translateY(-2px); box-shadow:0 10px 20px rgba(14,165,233,.25);
}

/* === SECTION DEVIS === */
.devis-section {
  background:linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  padding:80px 0;
}

/* Bandeau horizontal */
.devis-header {
  text-align:center;
  background:linear-gradient(90deg, #0b1f3a, #123b70);
  color:#fff;
  padding:60px 20px 70px;
  border-radius:0 0 60px 60px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.devis-header .devis-title {
  font-family:'Playfair Display', serif;
  font-size:2.4rem;
  margin-bottom:12px;
}
.devis-header .devis-subtitle {
  font-size:1.1rem;
  max-width:720px;
  margin:0 auto;
  line-height:1.6;
}

/* Conteneur formulaire centré */
.devis-container {
  max-width:900px;
  margin:0 auto;
  margin-top:-60px;
  background:#fff;
  border-radius:22px;
  padding:40px 36px;
  box-shadow:0 12px 36px rgba(0,0,0,.08);
  border:1px solid #e6edf6;
}

/* Grille */
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
@media(max-width:800px){
  .form-grid { grid-template-columns:1fr; }
}

/* Champs */
.form-group {
  display:flex;
  flex-direction:column;
}
.form-group label {
  font-weight:600;
  color:#0b1f3a;
  margin-bottom:6px;
}
.form-group input, 
.form-group select,
.form-group textarea {
  padding:10px 12px;
  border:1px solid #cfd8e3;
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:#0ea5e9;
  box-shadow:0 0 0 3px rgba(14,165,233,.2);
  outline:none;
}
.full { grid-column:1 / -1; }

/* Boutons */
.form-actions {
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}
.btn {
  padding:12px 20px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:all .2s;
}
.btn.primary {
  background:linear-gradient(135deg, #0EA5E9, #1769aa);
  border:none; color:#fff;
}
.btn.primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,165,233,.25);
}
.btn.ghost {
  background:transparent;
  border:1px solid #cfd8e3;
  color:#0b1f3a;
}
.btn.ghost:hover {
  border-color:#0ea5e9;
  color:#0ea5e9;
}

/* Confirmation */
.form-status {
  margin-top:12px;
  color:#067a24;
  font-weight:600;
  text-align:center;
}

/* === RDV horizontal === */
.rdv-section{ background:linear-gradient(180deg,#f7fbff 0%,#fff 100%); padding:80px 0; }
.rdv-header{ text-align:center; background:linear-gradient(90deg,#0b1f3a,#123b70); color:#fff;
  padding:60px 20px 70px; border-radius:0 0 60px 60px; box-shadow:0 10px 40px rgba(0,0,0,.15);}
.rdv-title{ font-family:'Playfair Display',serif; font-size:2.4rem; margin-bottom:12px;}
.rdv-subtitle{ font-size:1.1rem; max-width:720px; margin:0 auto; line-height:1.6;}

.rdv-container{ max-width:900px; margin:-60px auto 0; background:#fff; border-radius:22px; padding:40px 36px;
  box-shadow:0 12px 36px rgba(0,0,0,.08); border:1px solid #e6edf6;}
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:800px){ .form-grid{ grid-template-columns:1fr; } }
.form-group{ display:flex; flex-direction:column; }
.form-group label{ font-weight:600; color:#0b1f3a; margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{
  padding:10px 12px; border:1px solid #cfd8e3; border-radius:10px; font:inherit;
  transition:border-color .2s, box-shadow .2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.2); outline:none;}
.full{ grid-column:1 / -1; }

.form-actions{ margin-top:20px; display:flex; justify-content:flex-end; gap:12px; }
.btn{ padding:12px 20px; font-weight:600; border-radius:10px; cursor:pointer; transition:all .2s;}
.btn.primary{ background:linear-gradient(135deg,#0EA5E9,#1769aa); border:none; color:#fff;}
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(14,165,233,.25);}
.btn.ghost{ background:transparent; border:1px solid #cfd8e3; color:#0b1f3a;}
.btn.ghost:hover{ border-color:#0ea5e9; color:#0ea5e9;}
.form-status{ margin-top:12px; color:#067a24; font-weight:600; text-align:center;}

/* === Brochure horizontal === */
.brochure-section{ background:linear-gradient(180deg,#f7fbff 0%,#fff 100%); padding:80px 0; }
.brochure-header{ text-align:center; background:linear-gradient(90deg,#0b1f3a,#123b70); color:#fff;
  padding:60px 20px 70px; border-radius:0 0 60px 60px; box-shadow:0 10px 40px rgba(0,0,0,.15);}
.brochure-title{ font-family:'Playfair Display',serif; font-size:2.4rem; margin-bottom:12px;}
.brochure-subtitle{ font-size:1.1rem; max-width:720px; margin:0 auto; line-height:1.6;}
.brochure-container{ max-width:900px; margin:-60px auto 0; background:#fff; border-radius:22px; padding:40px 36px;
  box-shadow:0 12px 36px rgba(0,0,0,.08); border:1px solid #e6edf6;}
/* réutilise .form-grid, .form-group, .btn, .form-status déjà définis plus haut */

/* Footer grid (4 colonnes) */
.footer .foot-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr auto; /* brand, legal, contact, menu */
  gap:32px;
  align-items:flex-start;
}

/* Col. 4 : bouton hamburger aligné à droite */
.footer .col-menu{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

/* Neutraliser le style flottant utilisé ailleurs */
.footer .hamburger-btn{
  position: static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0;
  box-shadow:none;  
  margin-top: -200px;  
  Margin-right: 80px;  /* option : garde ton style si tu veux */
}

/* style compact (facultatif) */
.footer .hamburger-btn.compact{
  width:48px;
  height:48px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e6edf6;
}

/* Mobile : 1 colonne, on laisse le bouton en dernier bloc */
@media (max-width: 900px){
  .footer .foot-grid{ grid-template-columns:1fr; gap:18px; }
  .footer .col-menu{ justify-content:flex-start; } /* ou flex-end si tu veux à droite sur mobile */
}

/* Utiles */
img, svg, video { max-width:100%; height:auto; }
.container { width:min(1100px, 92vw); margin-inline:auto; }
:root { --navBreak: 1024px; --azure:#0EA5E9; --dark:#0b1f3a; }

/* Masquer totalement la topbar */

/* points de rupture: tablette (≤1024), mobile (≤768) */
@media (max-width: 1024px){
  /* 1) Header : sur mobile/tablette -> hamburger only */
  .topbar,
  .nav-desktop,
  .nav-cta { display: none !important; }

  .site-header .nav-toggle { display: inline-flex !important; }

  /* chips horizontales dans l’overlay mobile */
  .nav-chips{
    display:flex; gap:.75rem; overflow-x:auto; padding: .25rem .5rem;
    scrollbar-width:none;
  }
  .nav-chips::-webkit-scrollbar{ display:none; }

  /* 2) Footer : grid qui se réorganise proprement */
  .foot-grid{
    display:grid; gap:2rem;
    grid-template-columns: 1fr 1fr;           /* tablette: 2 colonnes */
    align-items:start;
  }
  .foot-col{ text-align:left; }
  /* Ordonner les blocs : brand(1) / legal(2) / contact(3) / menu(4) */
  .col-brand{ order:1; }
  .col-legal{ order:2; }
  .col-contact{ order:3; }
  .col-menu{ order:4; justify-self:end; }     /* le bouton va à droite */
  .hamburger-btn.compact{ transform:translateY(.25rem); }
}

@media (max-width: 768px){
  /* Header : le bouton hamburger reste visible, tout le reste caché (déjà plus haut) */

  /* 2) Footer : mobile -> 1 colonne centrée  */
  .foot-grid{
    grid-template-columns: 1fr;               /* mobile: 1 colonne */
    text-align:center;
  }
  .col-menu{ justify-self:center; }
  .foot-links, .foot-list{ padding-left:0; }
  .foot-col h4{ margin-bottom:.5rem; }
  .footer .tb-right{ justify-content:center; }

  /* 3) Équipe : nom + rôle SOUS la photo avec espace */
  .pc-head{
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .pc-avatar{
    width: 220px; height: 220px; object-fit:cover; border-radius:50%;
  }
  .pc-name{ margin-top: .85rem; }
  .pc-mode{ margin-top: .35rem; opacity:.9; }
  .pc-body{ margin-top: .85rem; }

  /* 4) Habilitations & qualité : une seule colonne + éviter le débordement à droite */
  .qualite__grid{
    display:grid; grid-template-columns:1fr; gap:1.25rem;
  }
  .q-card{ width:100%; max-width:100%; }
  .qualite__inner{ overflow:hidden; } /* sécurité anti-débordement */
}

/* === HOTFIX MOBILE/TABLET — mettre tout en bas du CSS === */

/* 1) Header & logo : tailles cohérentes + cascade stable */
:root{
  --topbar-h: 38px;
  --logo-h-desktop: 150px;
  --logo-h-mobile: 84px;
}

/* neutralise les anciennes hauteurs de logo conflictuelles */
.logo--img{
  height: clamp(84px, 10vw + 40px, 150px) !important;
  width: auto !important;
  object-fit: contain;
  margin-top: 0 !important;
}
.header-inner .img-logo{ height:auto !important; }

/* header fixe blanc, hauteur compacte et constante */
.site-header{
  position: fixed; top: var(--topbar-h); left:0; right:0; z-index:1000;
  background:#fff !important; box-shadow: 0 4px 18px rgba(11,31,58,.05);
}
.header-inner{ height: auto; padding: 8px 0 !important; }

/* espace de compensation global (évite le contenu caché sous le header) */
body{ padding-top: calc(var(--topbar-h) + 110px) !important; }

/* 2) Navigation mobile : ouvre sous les barres fixes et sans décalages */
@media (max-width: 980px){
  .nav-toggle{ display:block; }

  .nav-list{
    position: fixed !important;
    inset: calc(var(--topbar-h) + 110px) 0 auto 0 !important;
    background:#fff; border-bottom:1px solid #e9eef5;
    transform: translateY(-120%); transition: transform .3s ease;
    flex-direction: column; gap: 16px; padding: 16px; z-index: 999;
  }
  .nav-list.open{ transform: translateY(0); }

  /* CTA sans décalage ni débordement */
  .nav-cta .btn-gold{ margin-left: 0 !important; }
}

/* 3) Corrige la media-query erronée (100px -> 720px) */
@media (max-width: 720px){
  .logo--img{ height: var(--logo-h-mobile) !important; }
  body{ padding-top: calc(var(--topbar-h) + 96px) !important; }
}

/* 4) Empêche tout scroll horizontal dû aux marges négatives/cartes larges */
html, body{ overflow-x: hidden; }

/* 5) Cartes équipe/fiche : marges latérales adaptées aux petits écrans */
@media (max-width: 720px){
  .pc-name, .pc-mode{ margin-left: 120px !important; }  /* au lieu de 200–250px */
  .pc-avatar{ width:130px; height:130px; left:16px; top:16px; }
  .pc-row{ grid-template-columns: 120px 1fr !important; }
}

/* 6) Boutons et items de nav lisibles sur fond blanc */
.nav-list a{ color:#0C1420 !important; }
.nav-list a:hover{ color: var(--blue-600) !important; }

/* 7) Divers débordements connus */
@media (max-width: 720px){
  .teamP-grid, .team-grid, .cards, .catalog, .mods-grid, .opp-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ======= PATCH MOBILE/TABLET ======= */

/* 1) Burger à DROITE, header plus propre */
@media (max-width: 980px){
  /* ordre + placement */
  .header-inner{ display:flex; align-items:center; gap:10px; }
  .brand{ order:1; flex:0 0 auto; }
  .nav{ order:2; flex:1 1 auto; }
  .nav-toggle{ order:3; margin-left:auto; display:block; } /* -> à droite */

  /* le gros logo ne gonfle plus le header */
  .logo--img{ height:80px; margin-top:0; }

  /* on neutralise les décalages négatifs */
  .nav-list a{ margin-top:0 !important; }

  /* CTA qui casse la mise en page sur mobile */
  .nav-cta{ display:none; }
}

/* 2) Notre équipe : titre + lead lisibles et centrés */
.team-head .title,
.teamP-head .title,
.team-board .title{
  font-size:clamp(1.6rem, 6vw, 2.2rem) !important;
  line-height:1.15 !important;
  text-align:center !important;
  margin:8px 0 6px !important;
}
.team-head .lead,
.teamP-head .lead,
.team-board .lead{
  font-size:clamp(1rem, 3.8vw, 1.1rem) !important;
  line-height:1.6 !important;
  text-align:center !important;
  margin:0 auto 8px !important;
  max-width: 28ch; /* pas de coupures */
}

/* 3) Habilitations (le très long titre ne se coupe plus mal) */
.qualite__head .title.display{
  font-size:clamp(1.6rem, 6.4vw, 2.2rem) !important;
  line-height:1.15 !important;
  text-align:center !important;
}

/* 4) Menu mobile : panneau toujours sous le header fixe */
@media (max-width: 720px){
  .nav-list{
    position:fixed;
    inset: calc(var(--topbar-h,0px) + var(--header-h)) 0 auto 0;
    transform:translateY(-120%);
  }
  .nav-list.open{ transform:translateY(0); }
}

/* 5) Petites sécurités pour éliminer les “sur-hauteurs” */

 
  /* si ces variables existent déjà plus haut, ce bloc les écrase seulement en mobile */

@media (max-width: 980px){
  :root{ --logo-h:80px !important; --header-pad:4px !important; --header-h:calc(var(--logo-h) + var(--header-pad)*2) !important; }
  body{ padding-top: calc(var(--topbar-h,0px) + var(--header-h)) !important; }
}

/* 6) Empêche tout décalage laissé par des marges “exotiques” */
.site-header .header-inner{ padding:6px 0 !important; }
.nav-cta .btn-gold{ margin-left:0 !important; }

/* ====== TEAM SIMPLE (grille type maquette) ====== */
.teamSimple-title{
  text-align:center;
  font-size:clamp(1.6rem, 4.8vw, 2.2rem);
  line-height:1.15;
  margin:0 0 6px;
  color:var(--blue-600);
}
.teamSimple-lead{
  text-align:center;
  margin:0 auto 18px;
  max-width: 38ch;
  color:#41556e;
  font-size:clamp(1rem, 3.6vw, 1.1rem);
}

/* Grille 3 / 2 / 1 colonnes */
.teamSimple-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-left: -100px;
}
@media (max-width:1024px){
  .teamSimple-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .teamSimple-grid{ grid-template-columns:1fr; }
}

/* ====== CARTE MEMBRE D’ÉQUIPE ====== */
.teamSimple-card{
  background:#fff;
  border:1px solid #e6edf6;
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.teamSimple-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(11,31,58,.12);
}
/* Photo : format PORTRAIT + visage cadré, ajustable via --pos */
.ts-photo{
  width:100%;
  aspect-ratio: 3 / 4;                  /* portrait => visage visible */
  background-image:var(--img);
  background-size:cover;
  background-position: var(--pos, 50% 20%);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.ts-photo img{
  width:100%; height:auto;
  object-fit:cover; object-position:var(--pos, 150% 90%);
  margin-right: -1000px;
  
}

/* Corps + textes */
.ts-body{ text-align:center; padding:12px 10px 8px; margin-left: 60px;}
.ts-name{
  margin:6px 0 2px;
  font-weight:800;
  font-size:clamp(1rem,3.4vw,1.1rem);
  color:#0B1F3A;
}
.ts-role{
  margin:0 0 10px; color:#41556e; font-size:.97rem;
}

/* Réseaux */
.ts-social{
  display:flex; justify-content:center; gap:10px;
  list-style:none; margin:0; padding:0;
}
.ts-s{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  text-decoration:none; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ts-ln   { background:#e7f1ff; color:#0A66C2; border-color:#d7e6ff; }
.ts-mail { background:#fff6e8; color:#a86c00;  border-color:#ffe8c1; }
.ts-phone{ background:#e9f8f1; color:#0b8457;  border-color:#d5f1e6; }
.ts-s:hover{ transform:translateY(-3px); box-shadow:0 12px 22px rgba(11,31,58,.14); }

/* Sécurité : s'il reste d'anciens layouts équipe, on ne les masque pas ici */

/* ====== Qualité – bloc Identification (nouveau) ====== */
.q-id{
  border: 1px solid #e7eef7;
  border-radius: 18px;
  padding: 22px;
  background:
    radial-gradient(80% 60% at 16% 8%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(203,161,53,.10), transparent 60%),
    #eef5fb;                        /* fond bleu très clair, comme la maquette */
  box-shadow: var(--shadow);
}

/* En-tête (kicker + gros titre) */
.q-id__head{ margin-bottom: 10px; }
.q-id .kicker{
  background:#1F4C7C; color:#fff; border:1px solid rgba(255,255,255,.25);
}
.q-id__title{
  font-family:"Playfair Display", serif;
  margin:10px 0 0;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.1;
  color:#0b1f3a;
}
.q-id__title .accent{ color:#4fb5ff; }

/* Corps : icône à gauche, contenu à droite */
.q-id__body{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 6px;
}
.q-id__ico{
  display:grid; place-items:center;
  width:120px; height:120px; border-radius:20px;
  background: linear-gradient(180deg,#ffffff,#f2f7ff);
  border:1px solid #e6edf6; box-shadow:0 10px 26px rgba(11,31,58,.10);
}
.q-id__content{ display:grid; gap: 10px; }

/* Sous-titre “Identification officielle” */
.q-id__subtitle{
  margin: 0 0 4px;
  font-size: clamp(1.05rem,2.6vw,1.25rem);
  color:#0B1F3A;
}

/* Ligne n° d’enregistrement : libellé à gauche, valeur à droite */
.q-id__row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  background:#fff;
  border:1px solid #e7eef7;
  box-shadow: 0 8px 18px rgba(11,31,58,.06);
  font-weight: 600;
  color:#1a2b45;
}
.q-id__num{
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  letter-spacing:.4px;
  color:#0b1f3a;
}

/* Liste à puces dorées */
.q-id__list{
  list-style:none; padding:0; margin: 2px 0 0;
  display:grid; gap: 12px;
  font-size: clamp(1rem,2.6vw,1.05rem);
  color:#243549;
}
.q-id__list li{ display:flex; align-items:flex-start; gap:10px; }
.q-tick{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-strong));
  box-shadow:0 8px 18px rgba(203,161,53,.30);
  position:relative; flex:0 0 22px; margin-top:2px;
}
.q-tick::after{
  content:""; position:absolute; left:6px; top:5px; width:9px; height:5px;
  border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg);
}

/* Responsive : on empile sous 820px */
@media (max-width: 820px){
  .q-id__body{ grid-template-columns: 1fr; }
  .q-id__ico{ width:100%; height:120px; border-radius:14px; }
}

/* ===== Qualité – design élégant, compact ===== */
.q-id--elegant{
  background: #eaf1f9;            /* bleu très clair, sans voile blanc criard */
  border: 1px solid #e2ebf5;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(11,31,58,.06);
}

/* grille : badge à gauche, contenu à droite */
.q-id__grid{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items:start;
}
.q-id__badge{
  display:grid; place-items:center;
  width: 110px; height: 110px; border-radius: 22px;
  background:none;
  border:1px solid #e7eef7;
  box-shadow: 0 8px 18px rgba(11,31,58,.06);
  margin:0;
}

/* titre compact */
.q-id__title{
  margin: 0 0 8px;
  font-weight: 800;
  color:#0b1f3a;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
}

/* ligne numéro : intégrée, fine, valeur à droite */
.q-id__numrow{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg,#ffffff, #f6faff);
  border:1px solid #e3ecf7;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(11,31,58,.05);
  color:#1a2b45;
  margin-bottom: 8px;
}
.q-id__num{
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
  color:#0b1f3a;
  font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

/* liste de puces dorées épurées */
.q-id__list{
  list-style:none; margin: 6px 0 0; padding:0;
  display:grid; gap: 10px;
  color:#223144;
  font-size: clamp(0.98rem, 2.4vw, 1.05rem);
}
.q-id__list li{ display:flex; align-items:flex-start; gap:10px; }
.q-tick{
  flex:0 0 20px; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  box-shadow:0 6px 14px rgba(203,161,53,.30);
  position:relative; margin-top:2px;
}
.q-tick::after{
  content:""; position:absolute; left:5px; top:4px; width:8px; height:5px;
  border:2px solid #0b1020; border-top:0; border-left:0; transform:rotate(45deg);
}

/* responsive : badge au-dessus */
@media (max-width: 820px){
  .q-id__grid{ grid-template-columns: 1fr; }
  .q-id__badge{ width:100%; height:110px; border-radius:16px; }
}

/* ===== FOOTER PRO ===== */
.x-footer{
  --c1:#0B1F3A; --c2:#1F4C7C; --ink:#eaf2ff; --muted:#bcd0e9;
  color:var(--ink);
  background:
    radial-gradient(85% 120% at 110% -10%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(203,161,53,.18), transparent 60%),
    linear-gradient(180deg, var(--c1) 0%, #123458 100%);
  padding-top: 0;  /* la vague s'occupe du haut */
}

/* vague */
.x-wave svg{ display:block; width:100%; height:70px; }
.x-wave path{ fill:#f3f7ff; opacity:.96; }

/* grille principale */
.x-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 4vw, 36px) 0;
}
.x-brand{ grid-column: span 4; }
.x-col{   grid-column: span 2; }
.x-col:last-child{ grid-column: span 4; }

@media (max-width: 1024px){
  .x-brand{ grid-column: 1 / -1; }
  .x-col{ grid-column: span 4; }
}
@media (max-width: 720px){
  .x-grid{ grid-template-columns: 1fr; }
  .x-col{ grid-column: 1 / -1; }
}

/* marque */
.x-logo{ height: clamp(200px, 6vw, 200px); width:auto; display:block; filter:brightness(0) invert(1); }
.x-addr{ margin:.5rem 0 0; color:var(--muted); }

/* titres colonnes */
.x-title{
  margin:0 0 .4rem; font-weight:800;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  letter-spacing:.2px;
  color:#ffffff;
  position:relative;
}
.x-title::after{
  content:""; display:block; width:64px; height:2px; margin-top:8px;
  background: linear-gradient(90deg,#0EA5E9, #CBA135);
  opacity:.9;
}

/* liens */
.x-links{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.x-links a{
  color:var(--ink); text-decoration:none;
  opacity:.9; transition:opacity .2s ease, transform .2s ease; margin-top:20px;
}
.x-links a:hover{ opacity:1; transform:translateX(2px); }

/* contact + icône */
.x-with-ico{ display:inline-flex; align-items:center; gap:10px;  }
.x-ico{
  width:28px; height:28px; display:grid; place-items:center; font-size:16px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:10px; 
}


/* réseaux sociaux (badges ronds) */
.x-title-social{
  margin:0 0 .4rem; font-weight:800;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  letter-spacing:.2px;
  color:#ffffff;
  position:relative;
  
}
.x-title-social::after{
  content:""; display:block; width:64px; height:2px; margin-top:8px;
  background: linear-gradient(90deg,#0EA5E9, #CBA135);
  opacity:.9;
}
.x-social{ display:flex; gap:-42px; margin-top:20px;  } 
.x-badge{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  text-decoration:none; font-weight:800;
  color:#0b1f3a; background:linear-gradient(135deg,#0EA5E9,#6ec1ff);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 24px rgba(14,165,233,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.x-badge:hover{ transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 18px 34px rgba(14,165,233,.38); }

/* bas de page */
.x-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 0 24px;
  color:var(--muted);
  font-size: clamp(.86rem, .95vw, .95rem);
}
.x-mini{ display:flex; gap:14px; flex-wrap:wrap; }
.x-mini a{ color:var(--muted); text-decoration:none; }
.x-mini a:hover{ color:var(--azure); }

.x-legal a { color:var(--muted); text-decoration:none; }
.x-legal a:hover{ color:var(--azure); }

.x-mini a:not(:last-child)::after{
  content: " | ";
  margin: 0 .45rem;
  opacity: .45;
}

/* (sécurité) masque l’ancien bouton hamburger s’il reste dans le DOM */
.footer .hamburger-btn{ display:none !important; }


/* 1) Espace entre les 3 blocs (marque / contact / réseaux) */
.x-grid{
  /* on augmente le gap horizontal et vertical */
  column-gap: clamp(28px, 6vw, 100px);
  row-gap: clamp(18px, 4vw, 92px);
  padding-top: clamp(18px, 3.5vw, 36px);
  padding-bottom: clamp(18px, 3.5vw, 36px);
}

/* un peu d'air interne dans chaque bloc */
.x-brand, .x-col{ padding-right: clamp(60px, 1.2vw, 100px); }

/* 2) Style "petit" pour les liens de bas de page */
.x-bottom{ align-items: flex-start; }

/* conteneurs de liens en bas (légaux + mini nav) */
.x-legal, .x-mini{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:0px;                       /* on gère les espaces avec le séparateur */
  font-size: clamp(.78rem, .8vw, .85rem);  /* taille = small */
  line-height: 1.6;
  color: var(--muted);
}

/* liens individuels */
.x-legal a, .x-mini a{
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  transition: opacity .2s ease;
}
.x-legal a:hover, .x-mini a:hover{ opacity: 1; }

/* 3) Séparateur | entre les liens (sauf le dernier) */
.x-legal a:not(:last-child)::after,
.x-mini  a:not(:last-child)::after{
  content: " | ";
  margin: 0 .45rem;
  opacity: .45;
}

/* empilement mobile : copyright au-dessus puis les 2 barres de liens */
@media (max-width: 720px){
  .x-bottom{
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* =========================
   CGV – responsive overrides
   ========================= */

/* conteneur : padding fluide */
.container {
  padding-inline: clamp(16px, 3vw, 32px);
}

/* Échelle typographique fluide */
:root{
  --fs-h1: clamp(1.8rem, 1.1rem + 3.2vw, 3.2rem);
  --fs-h2: clamp(0.75rem, 0.9rem + 1.8vw, 2rem);
  --fs-lead: clamp(1rem, 0.92rem + 0.8vw, 1.25rem);
  --radius: 18px;
}

/* Titre de page + lead */
.section-head .display,
.section-head h1.title {
  font-size: var(--fs-h1);
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
  margin-bottom: 10px;
}

.section-head .lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 65ch;
}

/* Kicker */
.cgv .section-head .kicker{
  background:#fff5e6;
  color:#7a4a00;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  display:inline-block;
  margin-bottom: 10px;
}

/* Grille : auto-fit pour mieux remplir la largeur,
   et min-width réaliste pour mobile */
.cgv-grid{
  display:grid;
  gap: clamp(14px, 2.2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  margin-right: 150px;
}

/* Cartes “CGV” – padding & arrondis fluides */
.cgv .legal-card{
  position: relative;
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 6px 20px rgba(13, 30, 55, .06);
}

.cgv .legal-card h2{
  margin: 4px 0 10px;
  color: #0b1f3a;
  font-size: var(--fs-h2);
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
}

/* Listes internes */
.article-ol{
  margin: 8px 0 0 18px;
}
.article-ol li{
  margin: 6px 0;
  line-height: 1.55;
}

/* Badge numéroté : reste “dans” la carte et s’adapte */
.doc-badge{
  position: absolute;
  inset-inline-end: clamp(6px, 1.4vw, 12px);
  inset-block-start: clamp(6px, 1.4vw, 12px);
  width: clamp(32px, 4.2vw, 44px);
  height: clamp(32px, 4.2vw, 44px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0EA5E9, #6ec1ff);
  color: #0b1020;
  font-size: clamp(14px, 2.6vw, 18px);
  box-shadow: 0 10px 24px rgba(14,165,233,.25);
  margin-top: -20px;
}

/* “Dernière mise à jour” */
.doc-bottom{
  color:#41556e;
  text-align:center;
  margin-top: clamp(10px, 2vw, 24px);
}

/* Petits écrans : force 1 colonne et espace vertical généreux */
@media (max-width: 900px){
  .cgv-grid { grid-template-columns: 1fr; }
}

/* Ultra-petits écrans (≤360px) : resserrer la typo et marges */
@media (max-width: 360px){
  .section-head .display,
  .section-head h1.title { font-size: clamp(1.6rem, 1.2rem + 2.8vw, 2rem); }
  .cgv .legal-card { padding: 14px; }
}

/* =========================
   COOKIES — RESPONSIVE FIX
   ========================= */

/* grille + espacements fluides */
.cookies .container { padding-inline: clamp(16px, 3vw, 32px); }
.cookies .cookies-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* Titres & textes : tailles fluides */
.cookies .section-head h1{
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3.1rem);
  line-height: 1.15;
  margin-bottom: .35em;
}
.cookies .section-head .lead{
  font-size: clamp(1rem, .35vw + .9rem, 1.2rem);
  max-width: 75ch;
}
.cookies .legal-card h2{
  font-size: clamp(1.15rem, 1.2vw + 1rem, 1.7rem);
  line-height: 1.25;
}

/* Cartes & badges */
.cookies .legal-card{
  position: relative;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: 18px;
}
.cookies .legal-badge{
  position:absolute;
  top: clamp(-10px,-1vw,-14px);
  right: clamp(-10px,-1vw,-14px);
  width: clamp(32px, 3.2vw, 44px);
  height: clamp(32px, 3.2vw, 44px);
  font-size: clamp(14px, 1vw, 18px);
  border-radius: 50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0EA5E9,#6ec1ff);
  color:#0b1020;
  box-shadow:0 10px 24px rgba(14,165,233,.25);
}

/* Bouton "Gérer mes cookies" */
.cookie-manage-btn{
  font-size: clamp(.9rem, .3vw + .85rem, 1rem);
  padding: clamp(8px, .6vw, 12px) clamp(12px, 1vw, 16px);
  border-radius: 12px;
}

/* Tags */
.cookies .cookie-tag{
  font-size: clamp(.85rem, .3vw + .8rem, .95rem);
  padding: 6px 10px;
}

/* Tableau : scroll horizontal propre en mobile */
.cookies .cookie-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e6edf6;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
@media (max-width: 640px){
  /* on rend le tableau scrollable sans casser la mise en page */
  .cookies .cookie-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .cookies .cookie-table th,
  .cookies .cookie-table td{
    padding: 10px 12px;
    font-size: .95rem;
  }
}

/* Points de rupture : passage en une colonne + marges */
@media (max-width: 1024px){
  .cookies .cookies-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .cookies .section-head h1{ font-size: clamp(1.7rem, 5.5vw, 2.1rem); }
  .cookies .section-head .lead{ font-size: 1rem; }
  .cookies .legal-card{ padding: 16px; }
  .cookies .legal-badge{
    top: -8px; right: -8px; width: 30px; height: 30px; font-size: 14px;
  }
}

/* === Cookie bar: cliquable & au-dessus de tout === */
#cookieBar.cookie-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10010;            /* au-dessus des overlays */
  pointer-events: auto;
}
#cookieBar[hidden]{ display:none !important; }

/* Empêche le backdrop mobile “invisible” de bloquer les clics */
#mobileMenu[hidden]{ display:none !important; }
.mobile-backdrop[hidden]{ display:none !important; }

/* Mise en forme sûre (optionnel) */
.cookie-bar .cookie-inner{
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(2,8,23,.15);
  padding: 18px 20px;
}
.cookie-actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
}
.cookie-actions .btn{ cursor:pointer; }
.cookie-actions .btn-secondary{
  background:#f3f7ff; color:#0b1f3a; border:1px solid #d7e6ff;
}
.cookie-actions .btn-secondary:hover{ background:#e1ecff; }
.cookie-actions .btn-primary{
  background:linear-gradient(135deg,#0ea5e9,#6ec1ff);
  color:#0b1020; border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 24px rgba(14,165,233,.28);
}
.cookie-actions .btn-primary:hover{
  box-shadow:0 18px 34px rgba(14,165,233,.38);
  filter:brightness(1.05);
}

/* Bandeau cookies au-dessus et cliquable */
#cookieBar.cookie-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10010;           /* plus haut que tous les overlays */
  pointer-events: auto;
}
#cookieBar[hidden]{ display: none !important; }

/* Backdrop mobile caché = pas d'interception de clics */
#mobileMenu[hidden]{ display: none !important; }
.mobile-backdrop[hidden]{ display: none !important; }

/* (style optionnel) */
.cookie-bar .cookie-inner{
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(2,8,23,.15);
  padding: 18px 20px;
}
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.cookie-actions .btn{ cursor:pointer; }

/* ===== LIEN ACTIF: SOULIGNEMENT BLEU ===== */
:root { --azure:#0EA5E9; }
.nav-list a { position: relative; }
.nav-list a.is-active,
.nav-list a[aria-current="page"] {
  color: var(--azure);
}
.nav-list a.is-active::after,
.nav-list a[aria-current="page"]::after {
  content:"";
  position:absolute; left:0; right:0; bottom:-12px;
  height:3px; background: var(--azure);
  border-radius: 2px;
}

/* Si jamais un doublon traîne encore, on le masque */
.site-header .nav-toggle .nav-toggle { display:none !important; }
.mobile-menu + .mobile-menu { display:none !important; }


/* ---------- Bouton hamburger ---------- */
.nav-toggle{
  margin-left:auto;display:none; /* visible en ≤ 1024px */
  width:44px;height:44px;border:2px solid var(--hap-blue);border-radius:12px;
  background:var(--ambition-title);cursor:pointer;align-items:center;justify-content:center;gap:3px;
}
.nav-toggle .bar{display:block;width:14px;height:2px;background:white}
.nav-toggle .bar:nth-child(2){width:16px}
@media (max-width:1024px){
  .nav-desktop,.nav-cta{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---------- Menu mobile plein écran (drawer) ---------- */
.mobile-menu[hidden]{display:none}
.mobile-menu{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:1fr}
.mobile-backdrop{position:fixed;inset:0;background:rgba(3,10,24,.55);backdrop-filter:blur(2px);border:0}
.mobile-menu__panel{
  position:relative;z-index:61;background:#fff;height:100dvh;max-width:100%;padding:20px 18px 28px;
  display:flex;flex-direction:column;gap:18px;animation:slideIn .26s ease;
}
@keyframes slideIn{from{transform:translateX(6%);opacity:.8}to{transform:none;opacity:1}}
.mobile-menu__header{display:flex;align-items:center;justify-content:space-between}
.mobile-menu__header .title{font-weight:700;font-size:22px}
.mobile-close{
  width:42px;height:42px;border-radius:12px;border:2px solid var(--hap-blue);background:#fff;color:var(--hap-blue);
  font-size:26px;line-height:0;display:grid;place-items:center;cursor:pointer;
}
.mobile-links{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.mobile-links a{
  font-size:clamp(15px,1.6vw,15px);font-weight:600;color:var(--hap-ink);text-decoration:none;
}
.mobile-links a.is-active{position:relative}
.mobile-links a.is-active::after{
  content:"";display:block;width:52px;height:3px;margin-top:6px;border-radius:3px;background:var(--hap-blue);
}
.mobile-actions{margin-top:auto;display:grid;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(135deg,#0EA5E9,#1769aa);color:#fff}
.btn-outline{border:2px solid #cfe5fb;color:#0b1f3a;background:#f7fbff}



/* ---------- Soulignement des liens footer mini nav ---------- */
.x-mini a.is-active{border-bottom:2px solid var(--hap-blue)}


/* ----- HOTFIX WIZARD / STEP 2 LAYOUT ----- */
/* on annule le positionnement absolu des panneaux */
.hap-pane{
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  display: none;           /* masqué par défaut */
  margin-top: -102px;
}
.hap-pane.active{
  display: block;          /* on n’affiche que le panneau actif */
}

/* le stepper reste visible, mais on réduit l’encombrement sur mobile */
.hap-stepper{
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 8px 12px;
}
@media (max-width: 680px){
  .hap-stepper{ grid-template-columns: 1fr; }
}

/* conteneur wizard : plus besoin de min-height énorme */
.hap-wizard{
  position: relative;
  padding: 8px 16px 24px;
  min-height: auto !important;
}

/* ----- CARTES & GRID DE L’ÉTAPE 2 ----- */
.pay-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;   /* info | paiement */
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px){
  .pay-grid{ grid-template-columns: 1fr; }
}

.hp-card{
  border: 1px solid #e2ecff;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(7, 31, 75, .06);
}
.hp-card.info ul{ margin: 6px 0 0 18px; }

.hp-choice{ display: grid; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.pill{
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  background: #f7fbff;
  border: 1px solid #cfe5fb;
  border-radius: 12px;
  padding: 10px 12px;
}
.pill input[type="radio"]{ accent-color: #0EA5E9; }

.hp-summary{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 6px;
}
.hp-kpi{ display: grid; gap: 4px; }
.hp-kpi-top{ font-size: 12px; color: #4c5a73; }
.hp-kpi-val{ font-size: 28px; font-weight: 800; line-height: 1.1; }

.hp-note{ font-size: 13px; color: #4c5a73; margin-top: 8px; }

/* boutons nav de l’étape 2 */
.hap-nav{ display: flex; gap: 10px; margin-top: 14px; }
.btn-grad{ background: linear-gradient(135deg,#0EA5E9,#1769aa); color:#fff; border:0; border-radius:12px; padding:12px 18px; font-weight:600; cursor:pointer; }
.btn-alt{ background:#fff; border:2px solid #cfe5fb; color:#0b1f3a; border-radius:12px; padding:12px 18px; font-weight:600; cursor:pointer; }

/* petite sécurité pour que rien ne passe sous le header */
.section, .ct-section{ position: relative; z-index: 1; }



/* ==========================================================
   HAPPY ACADEMY PARIS — PAGE PAIEMENT UNIQUEMENT
   ========================================================== */
   body {
    font-family: "Poppins", sans-serif;
    color: #0b1020;
    background: #f8faff;
    margin: 0;
    line-height: 1.6;
  }
  
  /* Containers */
  .container {
    width: min(1150px, 92%);
    margin-inline: auto;
  }
  
  /* ==========================================================
     1) SECTION PAIEMENT PRINCIPAL (STRIPE)
     ========================================================== */
  #inscPayment.pay-one {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    padding: clamp(30px, 6vw, 70px) 0;
  }
  
  .po-head {
    text-align: center;
    margin-bottom: clamp(20px, 4vw, 40px);
   
  }
  .po-badge {
    background: #eaf1ff;
    color: #123a7a;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    margin-bottom:-100px;
    
  }
  .po-head h2 {
    font-family: "Playfair Display", serif;
    margin: 0.5em 0 0.2em;
    font-size: clamp(24px, 3vw, 34px);
    margin-top: 30px;
  }
  .po-sub {
    color: #5a6b86;
    font-weight: 400;
  }
  
  .po-panel {
    background: #fff;
    border: 1px solid #e7edf8;
    border-radius: 22px;
    box-shadow: 0 18px 60px rgba(9, 21, 48, 0.08);
    padding: clamp(18px, 3vw, 30px);
    width: min(1080px, 94%);
    margin-inline: auto;
  }
  
  .po-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1.3fr 1fr;
  }
  @media (max-width: 900px) {
    .po-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* ---- Colonne gauche ---- */
  .po-left p {
    margin: 0;
    font-size: 1rem;
  }
  .po-sep {
    opacity: 0.5;
    margin: 0 0.4ch;
  }
  
  .po-infobar {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    border: 1px dashed #e8ecf8;
    border-radius: 14px;
    padding: 14px;
    margin-top: 16px;
    background: #fafcff;
  }
  .ilab {
    font-size: 0.9rem;
    color: #5a6b86;
  }
  .ival {
    font-weight: 700;
  }
  .ipo {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #364863;
  }
  .ishield {
    font-size: 1.1rem;
  }
  
  /* ---- Colonne droite ---- */
  .po-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .po-choice legend {
    font-weight: 700;
    margin-bottom: 6px;
  }
  .po-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .po-pills .pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    background: #f5f8ff;
    border: 1px solid #dde6f3;
    transition: 0.2s ease;
  }
  .po-pills input {
    appearance: none;
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .po-pills input:checked + span {
    color: #0EA5E9;
    font-weight: 700;
  }
  
  .po-pills span:hover {
  color: #0EA5E9;
}
  .po-now {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #e0e6f5;
  }
  .now-lab {
    color: #5a6b86;
  }
  .now-val {
    font-family: "Playfair Display", serif;
    font-size: clamp(26px, 4vw, 36px);
    background: #0EA5E9;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  /* ====== Stripe block ====== */
  .po-card {
    margin-top: 10px;
  }
  .po-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .po-stripe {
    background: #fff;
    border: 1px solid #e8ecf8;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(9, 21, 48, 0.06);
  }
  .po-error {
    color: #e74c3c;
    margin-top: 6px;
  }
  .po-status {
    font-size: 0.95rem;
    margin-top: 4px;
  }
  
  /* ==========================================================
     2) SECTION PAIEMENTS MOBILES (RDC)
     ========================================================== */
  .pay-alt {
    background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(203,161,53,.10));
    padding: clamp(30px, 6vw, 70px) 0;
    border-top: 1px solid #e8ecf8;
  }


  po-badge

  .pay-alt h3 {
    font-family: "Playfair Display", serif;
    margin: 0 0 6px;
    font-size: clamp(22px, 2.5vw, 28px);
    margin-top: -100px;
  }
  .pay-alt p {
    color: #0EA5E9;
    margin-bottom: 20px;
  }
  .wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }
  .wallet-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: #f9fbff;
    border: 1px solid #e8ecf8;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(9, 21, 48, 0.06);
    padding: 14px 16px;
  }
  .wallet-tile .left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .wallet-tile .right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left:-60px;
  }


  .wallet-tile .brand {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  }
  .wallet-tile .brand img {
    width: auto;
    height: 200px;;
    object-fit: contain;
  }
  .wallet-tile .right {
    font-weight: 800;
    
  } 

  .right small {
    margin-left:100px;
  }

  .wallet-tile a.btn {
    font-size: 0.9rem;
    padding: 10px 16px;
  }
  
  /* ==========================================================
     3) SECTION RÈGLEMENT FORMATION (BROCHURE + PAYPAL)
     ========================================================== */
  .catalog {
    margin-bottom: 20px;
  }
  .course-card {
    position: relative;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 14px 36px rgba(9, 21, 48, 0.12);
  }
  .course-card .cc-inner {
    position: absolute;
    inset: 0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 12, 28, 0.05) 0%, rgba(6, 12, 28, 0.75) 82%);
  }
  .course-card h3 {
    font-family: "Playfair Display", serif;
    font-size: clamp(20px, 3vw, 26px);
    margin: 0 0 4px;
  }
  .course-card p {
    margin: 0 0 12px;
    opacity: 0.9;
  }
  
  #plansUnderSubmit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  /* ==========================================================
     4) BOUTONS SPÉCIFIQUES À LA PAGE PAIEMENT
     ========================================================== */

     :root{
      --blue-900:#0B1F3A; /* bleu foncé */
      --blue-600:#1F4C7C;
      --azure:#0EA5E9;   /* azur */
      --gold:#CBA135;    /* doré */
      --gold-strong:#B38600;
      --white:#FFFFFF;
      --ink:#0C1420;
      --muted:#9FB3C8;
      --bg:#F6F8FB;
      --shadow:0 10px 30px rgba(11,31,58,.18);
      --shadow-strong:0 20px 50px rgba(11,31,58,.28);
      --radius:18px;
    }
  .btn,
  .btn-sky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn:hover,
  .btn-sky:hover {
    transform: translateY(-1px);
   
  }
  .btn.wide {
    width: 100%;
    
  }
  
  .btn-primary{background:linear-gradient(135deg,#0EA5E9,#1769aa);color:#fff}
.btn-outline{border:2px solid #cfe5fb;color:#0b1f3a;background:#f7fbff}


  /* ====== Grille 2 colonnes pour la section "Règlement de la formation" ====== */
.catalog.two-col {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: clamp(18px, 3.5vw, 36px);
  align-items: start;
}

/* Card (gauche) – styles existants conservés */
.catalog.two-col .course-card {
  position: relative;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--img) center/cover no-repeat;
  box-shadow: 0 14px 36px rgba(9, 21, 48, 0.12);
}
.catalog.two-col .course-card .cc-inner {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(180deg, rgba(6, 12, 28, 0.05) 0%, rgba(6, 12, 28, 0.75) 82%);
}
.catalog.two-col .course-card h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(20px, 3vw, 26px);
  margin: 0;
}

/* Colonne droite : texte + boutons */
.course-info {
  background:none;
  border: 1px solid #e8ecf8;
  border-radius: 0px;
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: 0 10px 28px rgba(9, 21, 48, 0.06);
}

.course-info .course-desc {
  margin: 0 0 14px;
  color: #34435a;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.7;
}

#plansUnderSubmit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Boutons (uniquement pour cette page si tu utilises paiement.css dédié) */
#plansUnderSubmit .btn-sky {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

#plansUnderSubmit .btn-sky:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(44, 110, 242, 0.3);
}

/* Responsive : empiler sur mobile */
@media (max-width: 880px) {
  .catalog.two-col {
    grid-template-columns: 1fr;
  }
  .course-info {
    order: 2;
  }
}

/* ====== Bloc "Règlement de la formation" sans fond, sans grid ====== */

/* conteneur horizontal : card à gauche, texte à droite */
.catalog.lite{
  display:flex;
  align-items:center;             /* aligne verticalement */
  gap: clamp(18px,3vw,36px);
  margin-bottom: 24px;
  margin-top: 80px;
}


/* card (gauche) — inchangée esthétiquement */
.catalog.lite .course-card{
  position:relative;
  min-height: 320px;
  width: min(420px, 45vw);        /* largeur fixe confortable */
  border-radius: 18px;
  overflow:hidden;
  background: var(--img) center/cover no-repeat;
  box-shadow: 0 14px 36px rgba(9,21,48,.12);
}
.catalog.lite .course-card .cc-inner{
  position:absolute; inset:0;
  padding:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  background: linear-gradient(180deg, rgba(6,12,28,.05) 0%, rgba(6,12,28,.75) 82%);
}
.catalog.lite .course-card h3{
  font-family:"Playfair Display", serif;
  font-size: clamp(20px, 3vw, 26px);
 
  margin-top: -40px;
}

/* colonne droite : aucun fond / bordure */
.catalog.lite .course-info{
  flex:1;                         /* prend le reste de la largeur */
  padding: 0;                     /* pas de panel blanc */
  border: 0;
  background: transparent;
  box-shadow: none;
  display:flex; flex-direction:column; gap:14px;
}
.catalog.lite .course-info .course-desc{
  margin:0;
  color:#34435a;
  font-size: clamp(15px,1.2vw,16px);
  line-height:1.7;
}

/* ===== Boutons : 2 sur la première ligne, 1 centré dessous ===== */
#plansUnderSubmit{
  display:flex;
  flex-wrap:wrap;
  gap: 12px 16px;                 /* (lignes, colonnes) */
  align-items:center;
}

/* style bouton local (garde tes couleurs de paiement) */
#plansUnderSubmit .btn-sky{
display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
/* 2 premiers boutons prennent ~50% chacun */
#plansUnderSubmit .btn-sky:nth-child(1),
#plansUnderSubmit .btn-sky:nth-child(2){
  flex: 1 1 calc(50% - 8px);
  min-width: 240px;
}

/* 3e passe seul à la ligne et se centre */
#plansUnderSubmit .btn-sky:nth-child(3){
  flex: 0 1 100%;
  max-width: 360px;
  margin-inline: auto;            /* centre horizontalement */
}

#plansUnderSubmit .btn-sky:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(44,110,242,.30);
}

/* ===== Responsive : empile sous 860px ===== */
@media (max-width: 860px){
  .catalog.lite{ flex-direction:column; align-items:stretch; }
  .catalog.lite .course-card{ width:100%; min-height:280px; }
  #plansUnderSubmit .btn-sky:nth-child(1),
  #plansUnderSubmit .btn-sky:nth-child(2){
    flex-basis: 100%;
  }
}


/* ================================
   A) BOUTONS PAYER (pile verticale)
   ================================ */
   #plansUnderSubmit{
    display: flex !important;
    flex-direction: column !important;  /* 3 lignes superposées */
    align-items: flex-start;             /* alignés à gauche comme des tirets */
    gap: 12px;                           /* espacement entre lignes */
    margin-top: 8px;
  }
  
  #plansUnderSubmit .btn-sky{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #plansUnderSubmit .btn-sky:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(44,110,242,.30);
  }
  
  /* Sur mobile, même principe, on garde la pile */
  @media (max-width: 640px){
    #plansUnderSubmit .btn-sky{ width: 100%; }
  }
  
  /* ============================================
     B) PAIEMENTS MOBILES (RDC) — pas de grid/blocs
     ============================================ */
  .pay-alt{ background:none; }           /* section blanche propre */
  
  .wallet-grid{
    display: block !important;           /* enlève la grille */
    padding: 6px 0 0;
   
  }
  
  /* Une ligne légère par moyen de paiement (logo + numéro) */
  .wallet-grid .wallet-tile{
    display: flex !important;
    align-items: center;
    gap: 10px;                           /* rapproche logo & numéro */
    background: transparent !important;  /* plus de carte/bloc */
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0;
    margin: 4px 0;                       /* petites lignes superposées */
  }
  
  /* Groupe gauche (logo + libellé éventuel) compact */
  .wallet-grid .wallet-tile .left{
    display: flex;
    align-items: center;
    gap: 8px;                            /* encore plus proche */
  }
  
  /* Logo plus grand */
  .wallet-grid .wallet-tile .brand{
    width: 64px;                         /* ↑ taille des logos */
    height: 64px;
    background: transparent !important;
    border-radius: 12px;
    box-shadow: none !important;
    display: grid;
    place-items: center;
  }
  .wallet-grid .wallet-tile .brand img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* Numéro juste à côté du logo, bien lisible */
  .wallet-grid .wallet-tile .right{
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #0b1020;
  }
  
  /* Le 3e item (assistance) reste une simple ligne + bouton,
     sans carte ni fond. */
  .wallet-grid .wallet-tile:last-child .right .btn{
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(44,110,242,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  
  /* Optionnel : fine ligne séparatrice entre les items */
  .wallet-grid .wallet-tile + .wallet-tile{
    border-top: 1px solid #eef3fb;
  }
  
  /* ================================
   1) BOUTONS PAYER (identiques, plus courts)
   ================================ */
#plansUnderSubmit{
  display:flex !important;
  flex-direction:column !important;   /* 3 lignes: -, -, - */
  align-items:flex-start;
  gap:12px;
  margin-top:10px;
}

/* même largeur pour les 3 */
#plansUnderSubmit .btn-sky{
 display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:2px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

/* retire toute règle spéciale éventuelle sur le 3e bouton */
#plansUnderSubmit .btn-sky:nth-child(3){
  flex: unset; max-width: none; margin-inline: 0; padding: 12px 20px;
}

#plansUnderSubmit .btn-sky:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(44,110,242,.30);
}

@media (max-width:640px){
  #plansUnderSubmit .btn-sky{ width:100%; }
}

/* ============================================
   2) PAIEMENTS MOBILES (RDC)
   - OM à gauche, M-Pesa au milieu : ligne logo + numéro, sans grid ni fond
   - Assistance à droite : bloc (inchangé visuellement)
   ============================================ */
.pay-alt{ background:#fff; } /* section neutre */

.wallet-grid{
  display:flex !important;                 /* plus de grid */
  align-items:center;
  justify-content:space-between;
  gap: clamp(10px, 4vw, 40px);
  padding-top: 6px;
  margin-top: 40px;
}

/* Items génériques : pas de carte/fond */
.wallet-grid .wallet-tile{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0; margin:0;
}

/* 1) Orange Money (gauche) : ligne compact */
.wallet-grid .wallet-tile:nth-child(1),
.wallet-grid .wallet-tile:nth-child(2){
  display:flex !important;
  align-items:center;
  gap:12px;                                /* rapproche logo et numéro */
}

/* Logo plus grand */
.wallet-grid .wallet-tile .brand{
  width:72px; height:72px;                 /* ↑ taille logos */
  border-radius:12px;
  display:grid; place-items:center;
  background:transparent !important;
}
.wallet-grid .wallet-tile .brand img{
  width:100%; height:100%; object-fit:contain;
}

/* Numéro tout près du logo */
.wallet-grid .wallet-tile:nth-child(1) .right,
.wallet-grid .wallet-tile:nth-child(2) .right{
  font-weight:800;
  font-size: clamp(18px, 2vw, 20px);
  color:#0b1020;
}

/* Optionnel: masque le petit sous-texte si présent */
.wallet-grid .wallet-tile .meta{ display:none; }

/* 3) Assistance (droite) : petit bloc conservé */
.wallet-grid .wallet-tile:last-child{
  display:flex !important; align-items:center; gap:14px;
  padding:14px 18px;
  background:#fff !important;
  border:1px solid #EEF3FB !important;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(9,21,48,.08) !important;
}
.wallet-grid .wallet-tile:last-child .right .btn{
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(44,110,242,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  margin-top:18px;

  --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
color:white;
background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

position: relative; overflow: hidden;
  border:1px solid rgba(11,31,58,.06);
 
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Responsive : passe en colonne proprement */
@media (max-width:900px){
  .wallet-grid{ flex-direction:column; align-items:flex-start; gap:12px; }
  .wallet-grid .wallet-tile:last-child{ margin-top:8px; }
}

/* ====== Paiements mobiles (RDC) ====== */
.pay-alt{ background:#fff; }

/* ligne simple, sans cartes, avec espacement modéré */
.wallet-grid{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;   /* pas de stretching */
  gap: 36px;                    /* espace ENTRE les 3 blocs (ajustable: 28–42px) */
  flex-wrap: nowrap;
}

/* items "logo + numéro" (OM & M-Pesa) */
.wallet-grid .wallet-tile{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0; margin:0;
  display:flex !important;
  align-items:center;
  column-gap: 14px;             /* rapproche logo & numéro */
}

/* logos agrandis et réservés => plus d’overlap */
.wallet-grid .wallet-tile .brand{
  width: 72px; height: 72px;    /* tu peux mettre 64px si tu veux un peu plus petit */
  flex: 0 0 72px;
  display:grid; place-items:center;
  background:transparent !important;
}
.wallet-grid .wallet-tile .brand img{
  width:100%; height:100%; object-fit:contain;
}

/* numéro : proche du logo, gras, lisible */
.wallet-grid .wallet-tile .right{
  margin-left: 0;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 22px);
  color:#0b1020;
}

/* on n’affiche pas les meta pour OM/M-Pesa */
.wallet-grid .wallet-tile .meta{ display:none; }

/* --- Bloc Assistance (le 3e) : carte compacte et lisible --- */
.wallet-grid .wallet-tile:last-child{
  margin-left:auto;                   /* se place à droite sans écarter les autres */
  padding:16px 18px;
  background:#fff !important;
  border:1px solid #EEF2F8 !important;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(10, 32, 80, .08) !important;

  display:flex !important;
  align-items:center;
  justify-content:space-between;      /* titre + bouton côte à côte */
  gap:16px;
  min-width: 340px;                   /* garantit la place du texte */
}

/* on affiche le texte d’aide pour ce bloc seulement */
.wallet-grid .wallet-tile:last-child .meta{
  display:block; line-height:1.2;
}
.wallet-grid .wallet-tile:last-child .meta b{
  display:block;
  font-size:18px; font-weight:800; color:#0b1020;
}

/* icône à gauche, bouton à droite */
.wallet-grid .wallet-tile:last-child .left{
  display:flex; align-items:center; gap:12px;
}
.wallet-grid .wallet-tile:last-child .brand{
  width:48px; height:48px; flex:0 0 48px; background:#fff;
}

/* bouton */
.wallet-grid .wallet-tile:last-child .right .btn{
  padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(44,110,242,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    margin-top:18px;
  
    --c1: var(--c4) ; --c2:#0EA5E9; --c3:#4A8CBF; --c4:#134872 ;
  color:white;
  background: linear-gradient(135deg, var(--c1), var(--c2) 33%, var(--c3) 66%, var(--c4));

  position: relative; overflow: hidden;
    border:1px solid rgba(11,31,58,.06);
   
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* responsive : passe en colonne si étroit */
@media (max-width: 900px){
  .wallet-grid{ flex-wrap:wrap; gap:18px; }
  .wallet-grid .wallet-tile:last-child{ margin-left:0; min-width:unset; width:100%; }
}

/* ==== Ajustement spécifique M-Pesa ==== */
.wallet-grid .wallet-tile:nth-child(2) {
  margin-left: 38px;  /* décale tout le bloc vers la droite (ajuste : 32px / 64px si besoin) */
}

/* Si tu veux que le numéro soit encore un peu plus éloigné du logo M-Pesa */
.wallet-grid .wallet-tile:nth-child(2) .right {
  margin-left: 6px;   /* espace fin entre logo et numéro */
}

/* ===========================
   Paiement — réglages ciblés
   =========================== */

/* 1) Pastilles d’option : état actif en "azure" */


/* 2) Couleur du montant "$10" */
#inscPayment .po-now .now-val {
  color: #000000; /* bleu lisible */
  text-shadow: none;
  letter-spacing: 5px;

}

/* 3) Boutons : texte + longueur réduite */
#inscPayment .btn.wide{
  display: block;
  margin: 14px auto;         /* centrés + espacement régulier */
  width: min(520px, 88%);    /* réduit par rapport à avant */
  padding: 16px 22px;
  font-size: 18px;           /* texte plus grand */
  font-weight: 700;
  line-height: 1.2;
  border-radius: 28px;
  margin-top: -15px;
  
}

/* si tu utilises .btn-pay au lieu de .btn.wide, activer ceci : */
/*
#inscPayment .btn-pay{
  display:block; margin:14px auto;
  width:min(520px,88%); padding:16px 22px;
  font-size:18px; font-weight:700; border-radius:28px;
}
*/

/* 4) Léger rééquilibrage de la zone “À payer maintenant” */
#inscPayment .po-now{
  align-items: center;
}
#inscPayment .po-now .now-lab{
  color: #6d7b8f;
}


/* 2) Plus d’espace entre $10 et les boutons */
#inscPayment .po-now{ 
  margin-bottom: 48px;          /* espace sous le montant */
}
#inscPayment .btn.wide{
  margin: 20px auto;  
  margin-top: -20px;;
            /* un peu plus d’air entre les deux boutons aussi */
}
/* si tes boutons sont .btn-pay au lieu de .btn.wide, active plutôt ceci :
#inscPayment .btn-pay{ margin:20px auto; }
*/

/* Badge "Paiement local" — section 2 uniquement */
.pay-alt .po-badge,
.pay-alt .section-badge {        /* au cas où tu utilises section-badge */
  display: inline-block;
  margin-top: -50px;              /* ↓ décale vers le bas */
  margin-bottom: 18px;           /* espace confortable avant le titre */
}

/* Option : si tu préfères un décalage plus fin */
@media (min-width: 768px){
  .pay-alt .po-badge,
  .pay-alt .section-badge {
    margin-top:-20px;
   
  }
}

/* Force un décalage vertical indépendant de toute marge héritée */
.alt-badge {
  position: relative !important;
  top: 24px !important;        /* décale visuellement vers le bas */
  margin-bottom: 24px !important;
}

/* === Carte “Orange Money & M-Pesa” =============================== */
.pay-card--wallets h4{
  margin: 0 0 16px 0;
  font-size: clamp(15px, 1.6vw, 15px);
}

.pay-card--wallets .wallets{
  display: flex;
  flex-direction: column;
  gap: 14px;                      /* espace entre Orange Money et M-Pesa */
}

.pay-card--wallets .wallet-row{
  display: flex;
  align-items: center;
  gap: 14px;                      /* espace logo ↔ numéro (proche, pas collé) */
  line-height: 1;
}

.pay-card--wallets .w-logo{
  width: 56px;                    /* logos plus grands comme demandé */
  height: auto;
  object-fit: contain;
  display: block;
}

.pay-card--wallets .w-logo.mpesa{
  width: 56px;                    /* même taille que Orange Money */
}

.pay-card--wallets .w-number{
  font-weight: 800;
  font-size: clamp(15px, 2vw, 15px);
  letter-spacing: .2px;
  color: #0B1020;                 /* noir bleuté cohérent avec ta charte */
}

.pay-card--wallets .w-note{
  margin-top: 14px;
  font-size: clamp(14px, 1.2vw, 15.5px);
  color: #2a3551;
}
.pay-card--wallets .w-note a{
  color: #123A7A;
  font-weight: 700;
  text-decoration: none;
}
.pay-card--wallets .w-note a:hover{
  text-decoration: underline;
}

/* Optionnel : si tu veux un léger resserrage vertical dans la grille sur desktop */
@media (min-width: 992px){
  .pay-card--wallets .wallets{ gap: 16px; }
  .pay-card--wallets .w-logo{ width: 60px; }
}

.btn-wrap-center{
  display:flex;
  justify-content:center;
  margin-top: -20px !important;   /* ↓ réduit l’espace au-dessus (valeur par défaut 24px) */
  margin-bottom: 0 !important;
}

/* Même rendu pour "Étape suivante : Paiement" et "Valider l’inscription" */
.btn-grad{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer;
  background:linear-gradient(135deg,#0EA5E9,#1769aa); color:#fff; border:0;
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn-grad:disabled{opacity:.6; cursor:not-allowed; filter:grayscale(.1);}
.btn-grad:active{transform:translateY(1px);}
.btn-wide{ min-width: 260px; height: 44px; font-size: 16px; }