:root{
  /* ===== Light tokens (premium) ===== */
  --bg: #f6f8fc;                 /* blanc cassé très léger */
  --panel: #ffffff;              /* cartes */
  --panel2: #fbfcff;             /* variantes */
  --text: #0e1626;               /* bleu nuit */
  --muted: rgba(14,22,38,.72);   /* gris/bleu lisible */
  --line: rgba(14,22,38,.12);    /* séparateurs doux */

  --blue: #1f4fff;
  --blue2:#0ea5ff;
  --orange:#ff7a18;

  --radius: 18px;

  /* ombres “lévitation” (douces, Apple-like) */
  --shadow: 0 18px 60px rgba(14,22,38,.10);
  --shadow2: 0 10px 28px rgba(14,22,38,.08);

  --max: 1120px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
html{ overflow-x: hidden; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
  min-height: 100vh;
}

/* fond très subtil (pas “marketing”, juste premium) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(31,79,255,.07), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,122,24,.06), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(14,165,255,.05), transparent 60%),
    radial-gradient(700px 700px at -10% 50%, rgba(255,122,24,.05), transparent 60%),
    radial-gradient(800px 800px at 110% 110%, rgba(255,122,24,.04), transparent 65%),
    var(--bg);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
@media (max-width: 560px){
  .container{ padding-left: 16px; padding-right: 16px; }
}
.section{padding:68px 0}
.section-sm{padding:42px 0}

/* ===== Topbar (light glass) ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(14,22,38,.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:8px;
}

.brand{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:50px;
}

.brand-mark{
  width:72px;
  height:72px;
  border-radius:0;
  overflow:visible;
  position:relative;
  background: url("logo.svg") left center / contain no-repeat;

  /* un petit relief sans “halo sombre” */
  filter:
    drop-shadow(0 2px 8px rgba(14,22,38,.18))
    saturate(1.25)
    contrast(1.12);

  box-shadow:none;
}

.brand-title{font-weight:750; letter-spacing:.2px; line-height:1.1}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.1}

/* ===== Navigation links ===== */
.navlinks{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 24px;
}

.navlinks a{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;

  color: var(--muted);
  border: 1px solid transparent;

  transition:
    transform .2s var(--ease),
    background .2s var(--ease),
    color .2s var(--ease),
    border-color .2s var(--ease);
}

.navlinks a:hover{
  background: rgba(14,22,38,.04);
  color: var(--text);
  transform: translateY(-1px);
  border-color: rgba(14,22,38,.06);
}

.navlinks a.active{
  background: rgba(31,79,255,.10);
  color: var(--text);
  border-color: rgba(31,79,255,.18);
}

/* ===== Navigation CTAs ===== */
.nav-cta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 14px;
  font-size: 14px;
  line-height: 1;

  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--text);

  cursor: pointer;
  user-select: none;

  transition:
    transform .2s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease),
    box-shadow .2s var(--ease);

  box-shadow: 0 10px 24px rgba(14,22,38,.06);
}

.btn:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(14,22,38,.16);
  box-shadow: 0 14px 30px rgba(14,22,38,.08);
}
.btn.primary{
  border-color: rgba(255,122,24,.45);
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(255,122,24,.70));
  color:#0e1626;
  font-weight:750;
  box-shadow: 0 14px 34px rgba(255,122,24,.18);
}
.btn.primary:hover{
  box-shadow: 0 18px 44px rgba(255,122,24,.22);
}
.btn.ghost{
  background: transparent;
  box-shadow: none;
}
.btn.ghost:hover{
  background: rgba(14,22,38,.04);
  box-shadow: none;
}
.btn.small{padding:9px 12px; font-size:14px}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  font-size:12px;
  color: rgba(14,22,38,.72);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  box-shadow: 0 10px 24px rgba(14,22,38,.06);
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Hero ===== */
.hero{ padding:54px 0 24px; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.hero-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero-card .inner{padding:34px}

.kicker{
  color: rgba(14,22,38,.72);
  font-weight:650;
  letter-spacing:.25px;
}

.h1{
  font-size:44px;
  line-height:1.08;
  margin:12px 0 12px;
  letter-spacing:-.8px;
}
.h1 .accent{color: var(--orange)}

.lead{
  color: var(--muted);
  font-size:16px;
  max-width: 58ch;
}

.hero-actions{
  display:flex; flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.hero-mini{
  display:grid; gap:12px;
}
.mini-card{
  padding:18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.mini-title{font-weight:750; margin-bottom:6px}
.mini-text{color:var(--muted); font-size:14px}

/* ===== Layout blocks ===== */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.formules-split > .panel:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 420px;
}

.panel{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding:22px;
  box-shadow: var(--shadow2);
}
.panel h2{margin:0 0 10px; font-size:20px}
.panel p{margin:0; color:var(--muted)}
.panel .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* Page Création Web — Audit : cards structurées, icônes alignées, espacements harmonisés */
#audit .split .panel.audit-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
#audit .split .panel.audit-card h3{
  text-align: center;
  margin: 0;
}
#audit .split .panel.audit-card .checklist{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 280px;
}
#audit .split .panel.audit-card .checklist li{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.55;
}
#audit .split .panel.audit-card .checklist .check{
  flex-shrink: 0;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#audit .split .panel.audit-card .checklist .check svg{
  width: 12px;
  height: 12px;
}
#audit .split .panel.audit-card .checklist li span{
  flex: 1;
  min-width: 0;
}

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

.card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding:18px;
  box-shadow: var(--shadow2);
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:14px}

.hr{
  height:1px;
  background: var(--line);
  margin:24px 0;
}

/* ===== Slider ===== */
.slider-wrap{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.slider{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
}

.slide{
  display:none;
  grid-template-columns: 1fr 1fr;
  gap:0;
  min-height: 360px;
}
.slide.active{display:grid}

.slide .media{
  min-height:360px;
  background-size:cover;
  background-position:center;
}

.slide .content{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.slide .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(14,22,38,.86);
  background: rgba(31,79,255,.10);
  border: 1px solid rgba(31,79,255,.18);
  padding:8px 12px;
  border-radius:999px;
  width:fit-content;
}
.slide h2{margin:12px 0 10px; font-size:26px}
.slide p{margin:0; color:var(--muted)}

/* Panneau gauche du slider programmes : texte toujours blanc (priorité sur .slide p) */
.slide-program-left .slide-program-title,
.slide-program-left .slide-program-desc,
.slide-program-left .slide-program-pills span {
  color: #fff !important;
  opacity: 1;
}
.slide-program-left .slide-program-title { margin: 0 0 14px; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
.slide-program-left .slide-program-desc { margin: 0 0 22px; font-size: 15px; line-height: 1.6; max-width: 28ch; }
.slide-program-left .slide-program-pills span { font-size: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); padding: 7px 14px; border-radius: 999px; }

.slider-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-top:1px solid var(--line);
}

.dots{display:flex; gap:8px; align-items:center}

/* Dots du slider (conserver ce style) */
.dot{
  width:32px; height:8px;
  border-radius:999px;
  background: rgba(14,22,38,.10);
  border:1px solid rgba(14,22,38,.08);
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.dot.active{background: rgba(255,122,24,.85); transform: scale(1.03)}

/* ===== Slider programmes (maquette) ===== */
.slider-section-title {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.5px;
}

.slide-program-left,
.slide-program-right {
  min-height: 380px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}

.slide-program-left {
  position: relative;
  color: #fff;
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 36px;
}

.slide-program-left--starter {
  background: linear-gradient(165deg, #0a0f1a 0%, #111827 35%, #1a2332 65%, #0d1320 100%);
}

.slide-program-left--driver {
  background: linear-gradient(165deg, #120f2a 0%, #1e1b4b 40%, #2d2882 70%, #16133d 100%);
}

.slide-program-left--overdrive {
  background: linear-gradient(165deg, #060a12 0%, #0b1220 40%, #0f1629 70%, #080d18 100%);
}

.slide-program-left--coaching {
  background: linear-gradient(165deg, #1a1510 0%, #252019 40%, #2c241a 70%, #1f1914 100%);
}

.slide-program-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.slide-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  filter: blur(40px);
}

.slide-program-left--starter .slide-bubble:nth-child(1) { width: 220px; height: 220px; top: -60px; right: -50px; }
.slide-program-left--starter .slide-bubble:nth-child(2) { width: 160px; height: 160px; bottom: 15%; left: -60px; background: rgba(255,255,255,.02); }
.slide-program-left--starter .slide-bubble:nth-child(3) { width: 100px; height: 100px; bottom: -30px; right: 20%; background: rgba(255,255,255,.015); }

.slide-program-left--driver .slide-bubble:nth-child(1) { width: 240px; height: 240px; top: -70px; right: -60px; background: rgba(255,255,255,.03); }
.slide-program-left--driver .slide-bubble:nth-child(2) { width: 140px; height: 140px; bottom: 20%; left: -50px; background: rgba(255,255,255,.02); }
.slide-program-left--driver .slide-bubble:nth-child(3) { display: none; }

.slide-program-left--overdrive .slide-bubble:nth-child(1) { width: 200px; height: 200px; top: -50px; right: -40px; background: rgba(255,255,255,.02); }
.slide-program-left--overdrive .slide-bubble:nth-child(2) { width: 120px; height: 120px; bottom: 25%; left: -40px; background: rgba(255,255,255,.015); }
.slide-program-left--overdrive .slide-bubble:nth-child(3) { display: none; }

.slide-program-left--coaching .slide-bubble:nth-child(1) { width: 200px; height: 200px; top: -50px; right: 15%; background: rgba(255,255,255,.03); }
.slide-program-left--coaching .slide-bubble:nth-child(2) { width: 140px; height: 140px; bottom: 10%; left: -50px; background: rgba(255,255,255,.02); }
.slide-program-left--coaching .slide-bubble:nth-child(3) { display: none; }

.slide-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  color: #0e1626;
  background: rgba(255,122,24,.96);
  border: 1px solid rgba(255,122,24,.5);
  padding: 7px 14px;
  min-height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.slide-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.slide-level-row .slide-level-badge { margin-bottom: 0; }

.slide-badge-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  padding: 7px 12px;
  min-height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
}

.slide-program-title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: 1;
}

.slide-program-desc {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  opacity: 1;
  position: relative;
  z-index: 1;
  max-width: 28ch;
}

.slide-program-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 8px;
}

.slide-program-pills span {
  font-size: 12px;
  color: #fff;
  opacity: 1;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  padding: 7px 14px;
  border-radius: 999px;
}

.slide-program-right {
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(14,22,38,.08);
  justify-content: flex-start;
  padding-top: 32px;
}

.slide-program-right-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.slide-program-right-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.slide-program-list-label {
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  color: var(--text);
}

.slide-program-list {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: none;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.slide-program-list li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 0;
}
.slide-program-list li::before {
  content: "• ";
  color: var(--orange);
  font-weight: 700;
  margin-right: 4px;
}

.slide-program-cta {
  margin-top: auto;
  width: fit-content;
  min-height: 46px;
  font-weight: 750;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Zone de contrôle du slider (programmes uniquement) */
.slider-wrap[data-slider] .slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  gap: 16px;
}

.slider-wrap[data-slider] .slider-controls .dots {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-wrap[data-slider] .slider-controls [data-prev],
.slider-wrap[data-slider] .slider-controls [data-next] {
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .slide-program-left,
  .slide-program-right {
    min-height: 280px;
    padding: 24px 20px;
  }

  .slide-program-left {
    padding-top: 28px;
  }

  .slide-program-right {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }

  .slide-level-badge { margin-bottom: 14px; }
  .slide-level-row { margin-bottom: 14px; }
  .slide-program-title { font-size: 22px; margin-bottom: 12px; }
  .slide-program-desc { margin-bottom: 16px; font-size: 14px; }
  .slide-program-right-title { font-size: 18px; margin-bottom: 12px; }
  .slide-program-right-desc { margin-bottom: 16px; }
  .slide-program-list-label { margin-top: 16px; margin-bottom: 8px; }
  .slide-program-list { margin-bottom: 18px; }
  .slide-program-cta { padding: 12px 20px; min-height: 44px; }
}

/* ===== Flip cards (light) ===== */
.flip-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.flip{ perspective: 1200px; }

.flip-inner{
  position:relative;
  height: 220px;
  transition: transform .7s var(--ease);
  transform-style: preserve-3d;
}
.flip:hover .flip-inner{transform: rotateY(180deg)}

.flip-face{
  position:absolute; inset:0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow2);
  padding:18px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform: translateZ(0);
  overflow:hidden;
  color: var(--text);
}

/* Face back : dégradé très léger bleu -> orange (5–8% max) */
.flip-face.back{
  transform: rotateY(180deg) translateZ(0);
  background: linear-gradient(
    180deg,
    rgba(31,79,255,.07),
    rgba(255,122,24,.07)
  );
  border-color: rgba(14,22,38,.10);
  color: var(--text);
}

.kpi{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.kpi span{
  font-size:12px;
  color: rgba(14,22,38,.76);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  padding:8px 10px;
  border-radius:999px;
  box-shadow: 0 10px 22px rgba(14,22,38,.05);
}

.muted{color:var(--muted)}
.small{font-size:14px}

/* ===== FAQ (base) ===== */
.faq{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.faq-item{ border-top:1px solid var(--line); }
.faq-item:first-child{border-top:none}

.faq-q{
  width:100%;
  background: transparent;
  border:none;
  color: var(--text);
  text-align:left;
  padding:16px 18px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-weight:700;
}
.faq-a{
  display:none;
  padding:0 18px 16px;
  color: var(--muted);
}
.faq-item.open .faq-a{display:block}

/* ===== Forms (light) ===== */
form{ display:grid; gap:12px; }

.field{ display:grid; gap:6px; }

label{font-size:13px; color: rgba(14,22,38,.72)}

input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(14,22,38,.14);
  background: rgba(255,255,255,.96);
  color: var(--text);
  outline:none;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 10px 22px rgba(14,22,38,.05);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(14,165,255,.55);
  background: #fff;
  box-shadow: 0 14px 30px rgba(14,165,255,.12);
}
textarea{min-height:120px; resize:vertical}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.notice{
  padding:12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,122,24,.35);
  background: rgba(255,122,24,.10);
  color: rgba(14,22,38,.86);
  font-size:13px;
}

/* ===== Footer (light corporate) ===== */
footer{
  padding:32px 0 46px;
  border-top:1px solid var(--line);
  color: var(--muted);
  background: transparent;
}
body.page-creation-web main { padding-top: 40px; padding-bottom: 48px; }
body.page-creation-web main > section:first-of-type { margin-top: 0; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
.footer-links{display:flex; gap:10px; flex-wrap:wrap}
.footer-links a{color: var(--muted)}
.footer-links a:hover{color: var(--text)}

/* ===== Presentation layout (différent de la home) ===== */
.section-title{ margin:0 0 10px; font-size:28px; }
.section-sub{
  margin:0 0 18px;
  color: var(--muted);
  max-width: 70ch;
}
.section-intro{ margin:0 0 24px; max-width: 60ch; }

/* ===== Formations par métier (accueil) ===== */
.metier-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.metier-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding: 28px;
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.metier-card:hover{
  border-color: var(--orange);
  box-shadow: 0 4px 20px rgba(255,122,24,.08);
}
.metier-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(31,79,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.metier-icon--large{
  width: 52px;
  height: 52px;
  font-size: 24px;
}
.metier-card h3{ margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.metier-sub{
  font-size: 12.5px;
  color: var(--orange);
  font-weight: 600;
  margin: 0 0 4px;
}
.metier-desc{
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.metier-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metier-list li{
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}
.metier-list li::before{
  content: "•";
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
}
.metier-list--cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
}
.metier-btn{ margin-top: 4px; align-self: flex-start; }
.metier-card--wide{
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
.metier-card--wide .metier-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.metier-btn--wide{ flex-shrink: 0; align-self: center; }

.about-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
  width: 100%;
  max-width: 100%;
}
.about-hero-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding:34px;
}
/* Titre hero présentation : très grand pour remplir le container */
.about-hero-card .h1 {
  font-size: 58px;
  line-height: 1.08;
  margin: 12px 0 24px;
}

.about-side{ display:grid; gap:12px; }

/* ===== Page Présentation (maquette) ===== */
.vision-body{ font-size: 16px; color: var(--muted); line-height: 1.8; }
.vision-body p { margin: 0 0 28px; }
.vision-body p:last-of-type { margin-bottom: 0; }
.vision-intro { font-size: 16px; color: var(--text); font-weight: 500; margin-bottom: 26px; }
.vision-highlight {
  background: var(--text);
  color: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.7;
}
.vision-highlight strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.vision-highlight strong:not(:first-child) { display: inline; text-transform: none; letter-spacing: 0; color: inherit; font-size: 16px; margin: 0; }
.about-hero-card .hero-actions { margin-top: 36px; }

.presentation-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; display: block; }
.presentation-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.presentation-list li { font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; }
.presentation-list li::before { content: "•"; color: var(--orange); font-weight: 700; flex-shrink: 0; }
.presentation-examples { font-size: 12px; font-style: italic; margin: 0; }
.presentation-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.presentation-gains li { font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.presentation-gains li::before { content: "✓"; color: var(--orange); font-weight: 700; flex-shrink: 0; }

.mini-card--shadow { background: rgba(255,122,24,.08); border-color: rgba(255,122,24,.25); }
.presentation-shadow-tag { display: inline-block; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.presentation-shadow-risks { background: #fef2f2; border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.presentation-shadow-risks p { font-size: 12px; color: #b91c1c; font-weight: 600; margin: 0 0 4px; }
.presentation-shadow-risks ul { list-style: none; margin: 0; padding: 0; }
.presentation-shadow-risks ul li { font-size: 12px; color: #7f1d1d; display: flex; gap: 6px; margin-bottom: 3px; }
.presentation-shadow-risks ul li::before { content: "⚠"; font-size: 11px; }
.presentation-shadow-footer { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text); font-weight: 500; line-height: 1.5; }

.presentation-step-note { margin-top: 14px; padding: 12px 16px; background: rgba(31,79,255,.08); border-radius: 8px; font-size: 13px; color: var(--text); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.presentation-step-note .btn { flex-shrink: 0; }

.parcours-intro { font-size: 15px; color: var(--muted); margin: 0 0 20px; }
.parcours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.parcours-card { border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.92); padding: 28px; box-shadow: var(--shadow2); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.parcours-card:hover { border-color: rgba(14,22,38,.2); }
.parcours-card--featured { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.parcours-card--featured:hover { border-color: var(--orange); }
.parcours-card--dark { background: var(--text); border-color: var(--text); }
.parcours-card--dark h3,
.parcours-card--dark p,
.parcours-card--dark .parcours-badge--light { color: #fff !important; }
.parcours-card--dark p { color: rgba(255,255,255,.9) !important; }
.parcours-badge { display: inline-block; background: rgba(31,79,255,.12); color: var(--text); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 10px; text-transform: uppercase; letter-spacing: .07em; align-self: flex-start; }
.parcours-badge--orange { background: var(--orange); color: #0e1626; }
.parcours-badge--light { background: rgba(255,255,255,.2); color: #fff; }
.parcours-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }
.parcours-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.65; flex: 1; }
.parcours-btn { margin-top: 4px; align-self: flex-start; }
.parcours-btn--light { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.parcours-btn--light:hover { background: rgba(255,255,255,.25); color: #fff; border-color: rgba(255,255,255,.35); }

.mini-card.warn{
  border-color: rgba(255,122,24,.30);
  background: rgba(255,122,24,.08);
}

.about-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.kpi-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(14,22,38,.06);
  min-width: 0;
  max-width: 100%;
}
.kpi-pill strong{font-weight:750}
.kpi-pill .muted{font-size:13px}

/* IMPORTANT : dots KPI (petites), SANS casser les dots du slider */
.kpi-pill .dot,
.about-kpis .dot{
  width:10px; height:10px;
  border-radius:50%;
  display:inline-block;
  background: rgba(14,22,38,.28);
}
.kpi-pill .dot.blue,
.about-kpis .dot.blue{background: rgba(31,79,255,.85)}
.kpi-pill .dot.orange,
.about-kpis .dot.orange{background: rgba(255,122,24,.85)}
.kpi-pill .dot.cyan,
.about-kpis .dot.cyan{background: rgba(14,165,255,.85)}

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

.callout{
  margin-top:14px;
  padding:14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(14,165,255,.22);
  background: rgba(14,165,255,.07);
  color: rgba(14,22,38,.86);
}

/* ===== Timeline ===== */
.timeline{
  position:relative;
  display:grid;
  gap:12px;
  padding-left: 10px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:18px;
  top:6px;
  bottom:6px;
  width:1px;
  background: var(--line);
}
.t-item{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:14px;
  align-items:flex-start;
}
.t-bullet{
  width:34px;
  height:34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#0e1626;
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(255,122,24,.70));
  border: 1px solid rgba(255,122,24,.45);
  margin-left:1px;
  box-shadow: 0 14px 30px rgba(255,122,24,.18);
  z-index:1;
}
.t-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding:18px;
  box-shadow: var(--shadow2);
}
.t-card h3{margin:0 0 6px}
.t-card p{margin:0; color: var(--muted)}

/* ===== Cadre wrap ===== */
.cadre-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* ===== Checklist ===== */
.checklist{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color: var(--muted);
}
.checklist li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.check{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255,122,24,.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.check svg {
  width: 12px;
  height: 12px;
}
.check svg path {
  stroke: currentColor;
}
/* Fallback pour .check sans SVG (ex. page Création Web) */
.check:not(:has(svg))::after{
  content:"";
  position:absolute;
  left:5px; top:3px;
  width:6px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(35deg);
}

/* =========================
   CONTACT PAGE
   ========================= */
.contact-hero{ padding: 34px 0 10px; }

.contact-hero-inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

.contact-hero-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.contact-quick{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(14,22,38,.10);
  background: rgba(14,22,38,.03);
}

.contact-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}

.contact-left{ display: grid; gap: 16px; }

.contact-right{
  position: -webkit-sticky;
  position: sticky;
  align-self: start;
  z-index: 2;
}

.contact-form-wrap{ position: relative; }

/* Libellé consentement en noir (version light) */
.contact-consent-label { color: var(--text); font-size: 13px; }

@media (min-width: 981px){
  .contact-form-wrap{
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
}

.contact-cards{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.contact-card{
  border-radius: 14px;
  border: 1px solid rgba(14,22,38,.10);
  background: rgba(14,22,38,.03);
  padding: 14px;
}

.contact-card h3{
  margin: 0 0 6px;
  font-size: 16px;
}

.contact-card p{
  margin: 0;
  font-size: 14px;
}

.contact-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.contact-list li{ margin: 6px 0; }

.contact-trust{
  margin-top: 12px;
  font-size: 13px;
}

#contactStop{ height: 1px; }
#formulaire{ scroll-margin-top: 110px; }

/* Page contact — structure type maquette */
.contact-page-grid {
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}
.contact-left-maquette { gap: 20px; }
.contact-page-title { margin: 0; line-height: 1.2; }
.contact-page-lead { margin: 0; font-size: 1rem; }

.contact-phone-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(14,165,255,.35);
  background: rgba(14,165,255,.1);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.contact-phone-card:hover {
  border-color: rgba(14,165,255,.5);
  background: rgba(14,165,255,.14);
  box-shadow: 0 4px 16px rgba(14,165,255,.15);
}
.contact-phone-card:hover .contact-phone-number { color: var(--text); }
.contact-phone-icon { font-size: 1.5rem; }
.contact-phone-text { display: flex; flex-direction: column; gap: 2px; }
.contact-phone-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: rgba(14,22,38,.7); }
.contact-phone-number { font-size: 1.15rem; font-weight: 600; color: var(--text); }
.contact-phone-hint { font-size: 12px; color: rgba(14,22,38,.65); }

.contact-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-info-card { padding: 14px 16px; }
.contact-ic-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }

.contact-demandes { padding: 12px 16px; display: grid; gap: 10px; }
.contact-demande-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact-demande-item:last-child { border-bottom: none; }
.contact-di-icon { font-size: 1.25rem; flex-shrink: 0; }
.contact-di-text { display: flex; flex-direction: column; gap: 2px; }
.contact-di-text .small { font-size: 12px; }

.contact-form-title { margin: 0 0 6px; font-size: 1.35rem; }
.contact-form-sub { margin: 0 0 16px; font-size: 14px; }
.contact-form-hint {
  margin: 0 0 14px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  background: #fff4ed;
  color: #92400e;
  border-radius: 10px;
  border: none;
}
.contact-form-hint strong { color: var(--orange); }
.contact-form-actions { flex-wrap: wrap; gap: 10px; align-items: center; }
.contact-response-badge {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  .contact-info-cards { grid-template-columns: 1fr; }
}

.contact-grid,
.section-sm,
.container,
main{
  overflow: visible;
}

/* Conferences: petits ajustements de densité */
#agenda .panel .card { background: rgba(255,255,255,.92); }
#webinaires .notice { border-color: rgba(14,165,255,.28); background: rgba(14,165,255,.08); }

/* =========================
   FAQ PAGE — AERATION
   ========================= */
.faq-head-card{ padding: 26px; }

/* La FAQ devient une grille avec de l'espace */
.faq{
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;

  display: grid;
  gap: 12px;
}

/* Chaque item devient une carte */
.faq-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

/* neutralise l’ancien border-top si besoin */
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:first-child{ border-top: 1px solid var(--line); }

.faq-q{
  padding: 18px 20px;
  font-weight: 750;
  letter-spacing: .1px;
}

.faq-a{
  padding: 0 20px 18px;
  color: var(--muted);
}

.faq-item:hover{
  background: rgba(255,255,255,.98);
}

/* Séparer visuellement la question du contenu ouvert */
.faq-item.open .faq-q{
  background: rgba(14,22,38,.03);
}

.faq-ico{
  display:inline-grid;
  place-items:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(14,22,38,.10);
  background: rgba(14,22,38,.03);
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.faq-item.open .faq-ico{
  transform: rotate(45deg);
  background: rgba(255,122,24,.10);
  border-color: rgba(255,122,24,.25);
}

/* ===== Responsive ===== */
/* Empilement des grilles dès 1024px pour éviter blocs écrasés côte à côte */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .flip-grid{grid-template-columns:1fr}
  .metier-grid{ grid-template-columns: 1fr; }
  .metier-card--wide{ grid-column: span 1; flex-direction: column; }
  .metier-list--cols{ grid-template-columns: 1fr; }
  .slide{grid-template-columns:1fr}
  .slide .media{min-height:240px}
  .form-row{grid-template-columns:1fr}
  .brand{min-width:auto}

  .about-hero{grid-template-columns:1fr}
  .principles-grid{grid-template-columns:1fr}
  .parcours-grid{ grid-template-columns: 1fr; }
  .cadre-wrap{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .split{ grid-template-columns: 1fr; }
  .formules-split{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }

  .contact-grid{ grid-template-columns: 1fr; }
  .contact-hero-inner{ grid-template-columns: 1fr; }

  .hero-coaching{ grid-template-columns: 1fr; }
  .questions-grid{ grid-template-columns: 1fr; }
  .format-compare{ grid-template-columns: 1fr; }

  .hero-catalogue-cards{ grid-template-columns: 1fr; }

  .contact-page-grid{ grid-template-columns: 1fr; }
  .contact-info-cards{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .contact-right{ position: static; top: auto; }
  .contact-form-wrap{ max-height: none; overflow: visible; }

  .hero-coaching-main { padding: 24px 20px; min-height: 0; }
  .hero-card .inner { padding: 24px 20px; }
}
/* ===== NAV RESPONSIVE CLEAN (remplace l'ancien fix mobile) ===== */
@media (max-width: 980px){
  .nav{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "links links";
    align-items: center;
    gap: 10px 12px;
    padding: 10px 0;
  }

  .brand{
    grid-area: brand;
    width: auto;
    min-width: 0;
    gap: 12px;
  }

  .brand-mark{
    width: 52px;
    height: 52px;
  }

  .nav-cta{
    grid-area: cta;
    width: auto;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .navlinks{
    grid-area: links;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .navlinks a{
    padding: 8px 10px;
    font-size: 14px;
  }

  .btn{
    padding: 9px 12px;
    font-size: 14px;
  }
}

/* ===== PETITS TELEPHONES : pile tout proprement ===== */
@media (max-width: 560px){
  .nav{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "links"
      "cta";
  }

  .nav-cta{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .btn{
    width: 100%;
    justify-content: center;
  }

  .navlinks a{
    width: 100%;
  }
}

/* ===== Theme toggle (nav) ===== */
.theme-toggle{
  position: relative;
  width: 58px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(14,22,38,.14);
  background: rgba(255,122,24,.18); /* light par défaut */
  box-shadow: 0 10px 24px rgba(14,22,38,.06);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.theme-toggle:hover{ transform: translateY(-1px); }

.theme-ico{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: rgba(14,22,38,.70);
  pointer-events: none;
}

.theme-ico svg{
  width: 16px;
  height: 16px;
}

.theme-knob{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(14,22,38,.12);
  box-shadow: 0 10px 24px rgba(14,22,38,.10);
  transform: translateX(-11px); /* position light */
  transition: transform .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

/* état dark : bouton bleu + knob à droite */
.theme-toggle[data-theme="dark"]{
  background: rgba(31,79,255,.18);
  border-color: rgba(31,79,255,.22);
}

.theme-toggle[data-theme="dark"] .theme-knob{
  transform: translateX(11px);
}
.nav-menu-btn{ display:none; } /* desktop */

@media (max-width: 980px){
  .navlinks{ display:none; }            /* plus de menu horizontal */
  .nav-menu-btn{ display:inline-flex; } /* bouton Menu visible */
  .theme-toggle{ flex: 0 0 auto; }      /* évite qu’il se fasse écraser */
}
/* ===== Mobile full-screen menu (theme-safe via variables) ===== */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow-x: hidden;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu.is-open{ display:block; }

.mobile-menu-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  border: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.mobile-menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.mobile-menu-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.mobile-menu-links{
  display:grid;
  gap: 10px;
  align-content:start;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-links a{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(14,22,38,.03);
  font-weight: 750;
  color: var(--text);
}

.mobile-menu-cta{
  display:grid;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
  padding-bottom: 4px;
}

/* scroll lock */
body.no-scroll{ overflow: hidden; }

/* ===== Mobile behavior ===== */
@media (max-width: 980px){
  /* tu ne veux PLUS voir la topbar du tout */
  .topbar{ display:none; }

  /* bouton flottant pour rouvrir le menu */
  .mobile-menu-trigger{
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    top: calc(14px + env(safe-area-inset-top, 0px));
    z-index: 9998;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.88);
    color: var(--text);
    box-shadow: var(--shadow2);
    cursor: pointer;
  }
}

/* desktop : bouton menu caché */
@media (min-width: 981px){
  .mobile-menu-trigger{ display:none; }
}

/* =========================
   AUDIT FLASH PAGE — mobile-first (light only)
   ========================= */

.audit-flash-page {
  overflow-x: hidden;
}

.audit-section {
  padding: 24px 0 40px;
}

.audit-container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Bloc logo + titre : aligné, sobre, espace en dessous */
.audit-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.audit-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 0;
  overflow: visible;
  background: url("logo.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(14,22,38,.18)) saturate(1.25) contrast(1.12);
}

.audit-title {
  font-size: 32px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.5px;
}

.audit-title .accent {
  color: var(--orange);
}

.audit-form-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow: visible;
}

.audit-form-wrap iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-height: 2000px;
  height: 2000px;
  border: 0;
  margin: 0;
  padding: 0;
}

@media (min-width: 560px) {
  .audit-section {
    padding: 40px 0 56px;
  }

  .audit-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .audit-intro {
    margin-bottom: 48px;
  }

  .audit-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }

  .audit-title {
    font-size: 40px;
  }
}

@media (min-width: 768px) {
  .audit-title {
    font-size: 48px;
    letter-spacing: -0.8px;
  }

  .audit-form-wrap {
    max-width: 840px;
  }

  .audit-form-wrap iframe {
    min-height: 1600px;
    height: 1600px;
  }
}

/* =========================================
   HOME HERO — maquette client (hero-catalogue)
   ========================================= */

.hero-catalogue {
  padding: 54px 0 24px;
}

.hero-catalogue-box {
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.94));
  box-shadow: var(--shadow);
  padding: 36px 36px 32px;
}

.hero-catalogue-top {
  max-width: 760px;
}

.hero-catalogue-title {
  margin: 14px 0 14px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.4px;
}

.hero-catalogue-lead {
  max-width: 700px;
  font-size: 16px;
  line-height: 1.75;
}

.hero-catalogue-cards {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hero-choice-card {
  border-radius: 22px;
  border: 1px solid rgba(14,22,38,.12);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(14,22,38,.06);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  min-height: 295px;
}

.hero-choice-card--outlined {
  border-color: rgba(255,122,24,.60);
}

.hero-choice-card--featured {
  border-color: rgba(255,122,24,.80);
  box-shadow: 0 14px 34px rgba(255,122,24,.10);
}

.hero-choice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hero-choice-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
}

.hero-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.hero-choice-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.hero-choice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}

.hero-choice-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  color: var(--text);
}

.hero-choice-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 800;
}

.hero-choice-btn {
  margin-top: auto;
  width: 100%;
  min-height: 46px;
  font-weight: 750;
}

.hero-choice-btn--dark {
  background: #162044;
  border-color: #162044;
  color: #fff;
  box-shadow: 0 14px 30px rgba(22,32,68,.18);
}

.hero-choice-btn--dark:hover {
  background: #1c2750;
  border-color: #1c2750;
  color: #fff;
}

@media (max-width: 980px) {
  .hero-catalogue-box {
    padding: 24px 20px 22px;
    border-radius: 22px;
  }

  .hero-catalogue-cards {
    grid-template-columns: 1fr;
  }

  .hero-choice-card {
    min-height: auto;
  }

  .hero-catalogue-title {
    font-size: clamp(34px, 9vw, 46px);
  }
}

/* =========================================
   COACHING DIRIGEANT PAGE
   ========================================= */
.hero-coaching {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: stretch;
  min-width: 0;
}
.hero-coaching-main {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding: 34px;
  box-shadow: var(--shadow2);
  min-height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-coaching-title { margin: 12px 0 12px; font-size: clamp(32px, 4vw, 40px); }
.hero-coaching-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 24px;
  min-width: 0;
}
.hero-coaching-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.questions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.question-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px !important;
}
.question-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,122,24,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.result-banner { font-size: 14.5px; }
.format-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.benefits-cta-wrap { align-items: stretch; }
.benefits-card { padding: 28px; display: flex; flex-direction: column; min-height: 100%; }
.benefit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.benefit-item:last-child { border-bottom: none; }
.benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(31,79,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.benefit-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.benefit-text strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
.benefit-text span { display: block; }
.benefits-cta-col { display: flex; flex-direction: column; gap: 16px; min-height: 100%; min-width: 0; }
.cta-dark { color: #fff; }
.benefits-cta-col .vision-highlight { margin-top: 0; margin-bottom: 0; padding-top: 20px; }
.benefits-cta-col .vision-highlight h1 { color: #fff; }
.benefits-cta-col .vision-highlight a { margin-top: 16px; }
.persona-tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.persona-card .badge { margin: 0; max-width: 100%; }

@media (max-width: 1024px){
  .hero-coaching{
    grid-template-columns: 1fr;
  }
  .questions-grid{
    grid-template-columns: 1fr;
  }
  .format-compare{
    grid-template-columns: 1fr;
  }
}