/* Prismora Solutions (V2, unifié & nettoyé) - style.css
============================================================ */

/* ============ 1) Variables de thème & reset ============ */
:root{
  /* Palette Prismora */
  --bg:#ffffff;
  --text:#22343b;
  --brand:#0f4c5c;        /* bleu pétrole */
  --brand-2:#2bb4c8;      /* accent turquoise */
  --accent:#d8a24a;       /* ocre doux */
  --muted:#5f717a;
  --border:#e6edf0;
  --bg-soft:#f6fafb;
  --brandline-gap: 15px;
  --brandline-tri-duration: 900ms;
  --brandline-move-duration: 3000ms;

  /* Échelles */
  --xs:8px; --s:14px; --m:20px; --l:32px; --xl:64px; --xxl:96px;
  --radius:14px; --shadow:0 10px 28px rgba(15,76,92,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

/* ============ 2) Layout & typographies ============ */
.container{max-width:1120px;margin:0 auto;padding:0 var(--m)}
.section{padding:var(--xl) 0}

.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.14em;font-size:12px;margin:0 0 var(--l)}
h1{
  font-size:clamp(26px,5vw,38px);
  line-height:1.15;
  margin:0 0 var(--l);
  color:var(--brand);
  font-weight:800
}
h2{
  font-size:clamp(21px, 2.9vw, 32px);
  margin:0 0 var(--m);
  color:var(--brand);
  font-weight:800
}
h3{margin:0 0 var(--s);font-weight:700;color:var(--brand)}
.lead{font-size:clamp(14px,2.2vw,14px);opacity:.96;max-width:860px;margin:var(--s) 0 var(--m)}

/* Titre de section + petit prisme à gauche */
.sect-title{
  position:relative; display:inline-block; margin:0 0 var(--l);
  color:var(--brand); font-weight:800;
}
.sect-title .prism{
  position:absolute; left:-28px; top:2px;
  width:22px; height:22px;
  background:url("../img/logo/prism-icon.svg") center/contain no-repeat;
}

/* Entrée douce des titres */
@keyframes title-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sect-title.is-visible{animation:title-slide 1.2s ease-out 1}
@media (prefers-reduced-motion:reduce){.sect-title.is-visible{animation:none !important}}

/* Liens & CTA */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.cta{
  display:inline-block; padding:14px 20px; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:800; box-shadow:var(--shadow);
}
.cta:hover{filter:brightness(.97); text-decoration:none}
.cta--ghost{background:transparent; color:var(--brand); border:2px solid var(--brand)}
.cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:var(--m) 0 var(--l)}
@media (max-width:768px){
  .cta-row{flex-direction:column;align-items:center;margin-top:var(--s);margin-bottom:var(--m)}
  .cta-row .cta{width:100%;max-width:280px;text-align:center}
}

/* ============ 3) Navigation ============ */
.nav{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(to right, #ffffff 0%, #ffffff 28%, var(--brand) 100%);
  border-bottom:1px solid rgba(15,76,92,.15);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px var(--m)}
.brand-link{display:inline-flex;align-items:center}
.brand img{display:block;height:60px}

/* Menu desktop */
.menu{display:flex;gap:8px;flex-wrap:wrap}
.menu a{color:#fff;padding:10px 12px;border-radius:8px;font-weight:600}
.menu a:hover{background:rgba(255,255,255,.15)}

/* Burger */
.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:44px;height:44px;border:0;background:transparent;border-radius:8px;cursor:pointer
}
.burger span{display:block;width:22px;height:2px;background:#ffffff;transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.no-scroll{overflow:hidden}

/* ============ 4) Hero (2 colonnes) ============ */
.hero{
  padding:var(--xl) 0 var(--xl);
  background:
    radial-gradient(1200px 420px at 80% -10%, rgba(43,180,200,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.hero-split{display:grid;grid-template-columns:1.15fr 0.85fr;align-items:center;gap:var(--xl)}
.hero-visual img{display:block;width:100%;max-width:520px;height:auto;margin-inline:auto}

.hero .kicker{margin-bottom:var(--s)}
.hero .sect-title{margin-bottom: calc(var(--m) + 6px);}
.hero .lead{margin-top:var(--s);margin-bottom:var(--m)}
.hero .cta-row{margin-top: calc(var(--l) + 6px);margin-bottom:var(--m)}

@media (max-width:900px){
  .nav .wrap{padding:8px var(--m)}
  .brand img{height:60px}
  .burger{display:inline-flex}
  .menu{
    display:none; position:fixed; top:56px; right:12px; background:var(--brand);
    border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.18);
    padding:12px; flex-direction:column; gap:6px; width:calc(100vw - 24px); max-width:320px;
  }
  .menu a{color:#fff;padding:12px 14px;border-radius:8px;font-weight:600}
  .menu a:hover{background:rgba(255,255,255,.12)}
  .menu.open{display:flex}
  .nav{background:linear-gradient(to right, #ffffff 0%, #ffffff 38%, var(--brand) 100%)}

  .section{padding:44px 0}
  .hero-split{grid-template-columns:1fr;gap:var(--l)}
  .hero-visual{order:2}
  .hero-text{order:1}
  .hero-visual img{max-width:360px}
}

/* ============ 5) Ligne Marque ============ */
/* Ligne marque : triangle + kicker */
.brand-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 14px;
}

.logo-tri{
  height:72px;
  width:auto;
  display:block;
}

/* Forcer l’empilement + aligner à gauche */
.brand-line-hero{
  flex-direction: column;      /* le kicker passe dessous */
  align-items: center;      /* aligné à gauche */
  gap: 6px;
  --kicker-indent: 40px;
}

/* Kicker animé en translation + léger lift vertical */
.brand-line-hero .kicker{
  margin:0;
  margin-left: var(--kicker-indent);
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transform: translate(-12px, 0px);   /* ⬅️ X ET Y dans la même propriété */
  transition:
    opacity var(--brandline-move-duration) ease,
    transform var(--brandline-move-duration) ease;
}

/* État révélé – on garde le nudge vertical */
.brand-line-hero .kicker.is-revealed{
  opacity:1;
  transform: translate(0, -3px);       /* ⬅️ Y conservé */
}

/* Mobile */
@media (max-width:768px){
  .brand-line{
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .logo-tri{ height:56px; }
  .brand-line-hero .kicker{
    transform: translate(0,0);         /* pas de nudge en mobile */
    margin-left: 20px;
  }
  .brand-line-hero .kicker.is-revealed{
    transform: translate(0,0);
  }
}

/* Desktop : plus d'espace entre brand-line et CTA */
@media (min-width: 769px){
  .brand-cta-inline{
    display:flex;
    align-items:center;
    gap:40px;             /* ← augmente l'espacement desktop */
  }
}

/* Mobile : centré */
@media (max-width: 768px){
  .brand-cta-inline{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;  /* ← centre horizontalement */
    align-items:center;
    gap:20px;
    text-align:center;       /* ← centre le texte de la kicker */
  }
  .brand-cta-inline .brand-line-hero,
  .brand-cta-inline .cta-row{
    margin:0 auto;           /* ← recentre les blocs s'ils avaient des marges */
  }
}

/* ============ 6) Grilles, cartes & éléments UI ============ */
.grid{display:grid;gap:var(--l)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(280px,1fr))}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--m) + 4px); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cards-lift .card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(15,76,92,.10); border-color:rgba(216,162,74,.4)}
.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:var(--bg-soft);color:var(--brand);border:1px solid var(--border);margin-bottom:10px}
.badge-amber{background:rgba(216,162,74,.12);color:#a57727;border-color:rgba(216,162,74,.35)}

.split{display:grid;gap:var(--xl);grid-template-columns:1.1fr 0.9fr;align-items:center;margin:var(--l) 0}
.split .visual img{width:250px; height:auto; display:block; max-width:520px; margin-inline:auto}

/* ============ 7) Méthode condensée (cartes) ============ */
/* .method-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: var(--l);
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch; /* assure des hauteurs homogènes sur la ligne 
}*/

.method-grid{
  display:grid;
  gap:var(--l);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  justify-content: center;   /* centre les colonnes si la ligne n’est pas pleine */
}


.method-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  text-align:left;
  height:100%;
}

.method-ico{
  width:200px;
  height:200px;
  display:block;
  object-fit:cover;      /* photo lisible */
  border-radius:12px;    /* même style que le site */
  margin: 2px auto var(--s); /* centrée en haut */
}

/* Titre rapproché de l'image */
.method-card h3{
  margin-top: 4px;
  margin-bottom: var(--s);
}

/* Mobile : cartes empilées + images toujours grandes et centrées */
@media (max-width: 900px){
  .method-grid{ grid-template-columns: 1fr; }
  .method-ico{ width:180px; height:180px; } /* encore un peu plus grand en mobile */
}


/* ============ 8) POUR QUI ? (profils) ============ */
.who-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content:center;
  align-items:stretch;
  column-gap: var(--xl);
  row-gap: var(--l);
  margin-top: var(--m);
}
.who-card{
  width:100%; max-width:420px;
  background: rgba(216,162,74,.10);
  border:1px solid rgba(216,162,74,.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--l) + 6px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  min-height: 260px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.who-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15,76,92,.10);
  border-color: rgba(216,162,74,.45);
}
.who-illus{
  width:100px; height:100px; border-radius:12px;
  background: rgba(216,162,74,.16);
  border:1px dashed rgba(216,162,74,.45);
  margin-bottom: var(--s);
  display:block; object-fit:contain;
}
.who-title{ margin:0 0 6px; color:var(--brand); font-weight:800; font-size:clamp(18px, 2.2vw, 21px) }

.who-card .text{
  display:grid; justify-items:center; align-items:start; width:100%;
}
.who-card .text .liste-carre{
  display:block; width:min(42ch, 100%); text-align:left; margin-top:var(--s); margin-inline:0; padding-inline:0;
}
.who-card .text .liste-carre li{ line-height:1.6; }
.who-card .cta-row{ margin-top:auto }

@media (max-width:768px){
  .who-grid{ grid-template-columns:1fr; justify-items:center; row-gap: var(--m) }
  .who-card{ width:92%; max-width:420px; min-height: 240px; padding: var(--l) }
  .who-illus{ width:80px; height:80px }
}

/* ============ 9) Bandeau contact & footer ============ */
.contact-band{background:linear-gradient(180deg, var(--bg-soft), #fff)}
.contact-box{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--xl);box-shadow:var(--shadow);text-align:center
}
.footer{background:var(--bg-soft);border-top:1px solid var(--border);margin-top:var(--xl);padding:var(--l) 0;color:var(--muted)}
small{opacity:.85}

/* ============ 10) Détails divers ============ */
.sub-lead{
  font-size: clamp(13.5px, 1.28vw, 15.5px);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 820px;
  margin: calc(var(--s) + 6px) 0 calc(var(--m) + 6px);
}

/* Puces carrées bleu pétrole */
.liste-carre{ list-style:none; margin:8px 0 0; padding:0 }
.liste-carre li{
  position:relative; padding-left:22px; margin:6px 0;
}
.liste-carre li::before{
  content:""; position:absolute; left:0; top:0.62em; transform:translateY(-50%);
  width:10px; height:10px; background:var(--brand); border-radius:2px;
}

/* Séparateur global entre sections */
.section + .section{ border-top:1px solid var(--border) }

/* === Solutions : cartes pictos (catalogue & segments) === */
@media (min-width: 769px){
  .card.card--split{
    display:grid; grid-template-columns: 120px 1fr;
    column-gap: var(--l); align-items:center;
  }
  .card.card--split .card-ico{
    display:block; width:96px; height:96px; max-width:none; aspect-ratio:1/1;
    object-fit:contain; justify-self:center; align-self:center;
  }
}
@media (max-width: 768px){
  .card.card--split{ display:block }
  .card.card--split .card-ico{
    display:block; width:72px; height:72px; margin:0 auto var(--s);
  }
}

/* ===== STACK ===== */
.stack{margin:0;padding-left:18px}
.stack li{margin-bottom:10px}

.stack-scroller{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
  margin-top: var(--m);
  padding-block: 20px;
}

/* Effet fondu sur les bords (lisible, discret) */
.stack-scroller::before,
.stack-scroller::after{
  content:"";
  position:absolute; top:0; bottom:0; width:48px; pointer-events:none;
}
.stack-scroller::before{
  left:0;
  background: linear-gradient(90deg, var(--bg-soft), rgba(246,250,251,0));
}
.stack-scroller::after{
  right:0;
  background: linear-gradient(270deg, var(--bg-soft), rgba(246,250,251,0));
}

/* Piste qui défile en continu — on duplique les logos dans le HTML */
.stack-track{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0 14px;
  width:max-content;
  animation: stack-marquee 28s linear infinite;
}
@keyframes stack-marquee{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); } /* la moitié car on a 2 séries identiques */
}

/* Logos : taille normalisée, rendu propre sur fond clair */
.stack-logo{
  height: 38px; width:auto; display:block;
  filter: saturate(0.95) contrast(1.05);
}

/* Pause au survol (utile en desktop) */
.stack-scroller:hover .stack-track{ animation-play-state: paused; }

/* Accessibilité : pas d’anim si l’utilisateur préfère réduire les mouvements */
@media (prefers-reduced-motion: reduce){
  .stack-track{ animation: none; transform: none; }
}

/* Mobile : un peu plus compact, vitesse adaptée */
@media (max-width:768px){
  .stack-track{ gap:18px; animation-duration: 24s; }
  .stack-logo{ height: 28px; }
  .stack-scroller{ margin-top: var(--s); }
}

  /* Bande défilante : compact & fluide en mobile */
  /*.stack-scroller{ margin-top: var(--s); padding-block: 8px; }
  .stack-scroller::before,
  .stack-scroller::after{ width: 24px; }
  .stack-track{ gap: 14px; animation-duration: 22s; }
  .stack-logo{ height: 22px; }
}*/

/* Mobile STACK : forcer le texte en 1, le bandeau en 2 */
@media (max-width:900px){
  .section-method .hero-split{
    display:grid;                 /* on garde la grille */
    grid-template-columns:1fr;
    grid-auto-flow:row;
  }
  .section-method .hero-split .hero-text{ 
    grid-row:1;                   /* au-dessus */
    order:1;                      /* fallback si .hero-split passe en flex ailleurs */
  }
  .section-method .hero-split .stack-scroller{
    grid-row:2;                   /* en dessous du <p> */
    order:2; 
    margin-top: var(--m);         /* petit espace sous le texte */
  }
}

/* Mobile : les grilles .grid-2 passent en une seule colonne */
@media (max-width: 768px){
  .grid-2{
    grid-template-columns: 1fr;   /* 1 colonne plein écran */
  }
  /* Optionnel : petit confort visuel en mobile */
  .grid{
    gap: var(--m);
  }
}

/* === Lightbox (galerie) === */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:2rem;
}
.lightbox.open{ display:flex; }
.lb-viewport{ max-width:92vw; max-height:86vh; text-align:center; }
#lb-image{ max-width:92vw; max-height:80vh; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
#lb-caption{ color:#fff; margin-top:.5rem; opacity:.9; }

.lb-close,.lb-prev,.lb-next{
  position:fixed; top:20px; background:rgba(255,255,255,.12); color:#fff;
  border:0; font-size:28px; line-height:1; border-radius:10px;
  padding:.4rem .7rem; cursor:pointer; backdrop-filter: blur(4px);
}
.lb-close{ right:20px; }
.lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lb-next{ right:20px; top:50%; transform:translateY(-50%); }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.2); }

/* Cache les vignettes utilisées comme sources de la lightbox */
.gallery-sources { display: none !important; }


/* Modal centré + scroll lock-friendly */
.modal{
  position: fixed !important; /* force au-dessus de tout */
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  padding: 16px;
}
.modal[aria-hidden="false"]{ display: flex; }

.modal-box{
  background: #fff; color: #22343b;
  width: min(520px, calc(100% - 32px));
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.98);
  animation: modal-in .18s ease-out forwards;
}
@keyframes modal-in{
  to { transform: translateY(0) scale(1); opacity: 1; }
  from { opacity: 0; }
}

/* ---- Reset poids typo dans les cartes (liste/prices) ---- */
.card .card-body,
.card .card-body p,
.card .card-body li,
.card .card-body small {
  font-weight: 400;         /* texte normal */
}

.card .card-body strong {
  font-weight: 700;         /* gras uniquement sur <strong> */
}

.card h3 {
  font-weight: 800;         /* titre bien marqué */
}

.card .card-body em {
  font-style: italic;
  font-weight: 400;         /* italique sans surgras */
}

/* au cas où : s'assurer que la liste n'est pas en gras par héritage */
.card .liste-carre li { font-weight: 400; }



/* ============ Grille spécifique ============ */
.who-grid2{
  /* grille 12 colonnes pour un placement précis */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

/* ============ Cartes plus petites ============ */
.who-card2{
  /* même largeur pour toutes : sur desktop chaque carte = 4 colonnes */
  grid-column: span 4;
  /* "plus petit" visuel */
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: 14px;              /* plus compact que le style global */
}
.who-illus2{
  width: clamp(56px, 7vw, 72px);     /* icônes réduites */
  height: auto;
  margin-inline: auto;
  display:block;
}
.who-title2{
  font-size: clamp(18px, 2.2vw, 22px);
  text-align: center;
  margin-top: 10px;
}
.text2 p{
  font-size: clamp(14px, 1.8vw, 16px);
  text-align: center;
}
.cta-row2{
  justify-content: center;
}
.cta2{
  padding: 10px 16px;
  font-size: 14px;
}

/* ============ Placement Desktop ============ */
@media (min-width: 992px){
  /* Freelance centré seul sur la première ligne */
  .who-card2.who-card--freelance{
    grid-row: 1;          /* impose la 1ʳᵉ ligne */
    grid-column: 5 / span 4;   /* colonnes 5 à 8 -> centré */
  }
  /* Les trois autres cartes s'alignent automatiquement sur la 2ᵉ ligne */
  .who-card2.who-card--pme,
  .who-card2.who-card--collectivites,
  .who-card2.who-card--tpe{
    grid-row: 2;          /* force la 2ᵉ ligne */
    grid-column: span 4;  /* 3 cartes = 12 colonnes */
  }
}

/* ============ Mobile / Tablette ============ */
@media (max-width: 991.98px){
  .who-grid2{
    grid-template-columns: 1fr;     /* 1 colonne */
  }
  .who-card2{
    grid-column: 1 / -1;            /* pleine largeur */
    grid-row: auto;                 /* ordre naturel */
  }
}

/* ========= NAV : bouton parent "Solutions" aligné sur les liens ========= */
.menu .menu-item{
  display:inline-flex;
  align-items:center;
}

.menu button.menu-parent{
  font:inherit;                 /* même police/taille que les liens */
  line-height:1;                /* même hauteur visuelle */
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-weight:600;
  background:transparent;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  -webkit-appearance:none;
  appearance:none;
}
.menu button.menu-parent:hover{
  background:rgba(255,255,255,.15);
}
.menu button.menu-parent:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

/* Chevron indicateur */
.menu button.menu-parent::after{
  content:"▾";
  font-size:12px;
  line-height:1;
  opacity:.9;
}

/* ========= Sous-menu structure ========= */
.menu .has-submenu{
  position:relative;
}

/* Base sous-menu (caché) */
.menu .submenu{
  list-style:none;
  margin:0;
  padding:.5rem 0;
  display:none;
  background:#fff;
  border:1px solid rgba(15,76,92,.15);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  min-width:260px;
}
.menu .submenu a{
  color:var(--brand);
  display:block;
  padding:.5rem 1rem;
  white-space:nowrap;
  border-radius:8px;
}
.menu .submenu a:hover{
  background:rgba(15,76,92,.06);
  text-decoration:none;
}
.menu .submenu a:focus-visible{
  outline:2px solid rgba(15,76,92,.35);
  outline-offset:2px;
}

/* ---------- Desktop ≥ 900px : dropdown au survol/focus ---------- */
@media (min-width:901px){
  .menu .has-submenu:hover > .submenu,
  .menu .has-submenu:focus-within > .submenu{
    display:block;
  }
  .menu .submenu{
    position:absolute;
    top:100%;
    left:0;
    z-index:30;
  }
}

/* ---------- Mobile < 900px : panneau burger étroit + sous-menu en colonne ---------- */
@media (max-width:900px){

  /* Panneau burger : largeur fixe */
  .menu{
    display:none;                 /* reste fermé par défaut, ouvert via .open */
    position:fixed;
    top:56px;
    right:16px;                   /* ancrage à droite */
    left:auto;
    background:var(--brand);
    border-radius:12px;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    padding:14px 18px 16px;
    flex-direction:column;
    gap:10px;
    width:340px;                  /* largeur fixe */
    max-width:92vw;               /* sécurité petits écrans */
    text-align:left;
  }
  .menu.open{ display:flex; }

  /* Lignes du menu : PASSENT EN COLONNE pour que le sous-menu soit dessous */
  .menu .menu-item{
    display:flex;
    flex-direction:column;        /* ✅ clé : empile bouton + sous-menu */
    align-items:stretch;
    width:100%;
  }

  /* Bouton parent : aligné à gauche, chevron à droite */
  .menu a,
  .menu button.menu-parent{
    width:100%;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#fff;
    padding:12px 14px;
    border-radius:8px;
    font-weight:600;
  }
  .menu a:hover,
  .menu button.menu-parent:hover{
    background:rgba(255,255,255,.12);
  }

  /* Sous-menu : card blanche qui PREND LA LARGEUR et POUSSE le reste */
  .menu .submenu{
    position:static;              /* en flux normal */
    display:none;                 /* ouvert via .is-open */
    width:100%;
    min-width:0;                  /* override du min-width desktop */
    margin:8px 0 0 0;             /* juste sous le bouton */
    padding:8px 0;
    background:#fff;
    color:var(--brand);
    border:1px solid rgba(15,76,92,.15);
    border-radius:14px;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  .menu .submenu.is-open{ display:block; }

  /* Liens du sous-menu */
  .menu .submenu a{
    color:var(--brand);
    padding:10px 14px;
    border-radius:8px;
  }
  .menu .submenu a:hover{
    background:rgba(15,76,92,.06);
  }

  /* Chevron ↑ quand ouvert */
  .menu button.menu-parent.is-open::after{ content:"▴"; }
}

/* === Deck responsive : 1 → 2 → 3 colonnes (centré strict) === */
.cards-deck{
  display: grid;
  gap: var(--l);
  width: fit-content;          /* la grille ne prend que la place de ses colonnes */
  margin-inline: auto;         /* ...du coup on peut la centrer parfaitement */
  grid-template-columns: 1fr;  /* mobile par défaut : 1 carte */
}

/* ≥ 900px : 2 colonnes fixes, deck toujours centré */
@media (min-width:900px){
  .cards-deck{
    grid-template-columns: repeat(2, 520px);
  }
}

/* ≥ 1400px : 3 colonnes fixes, deck toujours centré */
@media (min-width:1400px){
  .cards-deck{
    grid-template-columns: repeat(3, 520px);
  }
}

/* Cartes : pas de largeur max qui perturbe le calcul */
.cards-deck > .card{
  width: 520px;        /* même largeur que les colonnes */
  max-width: none;     /* on neutralise l’ancienne limite */
  margin: 0;           /* plus besoin de margin auto dans ce mode */
  display: flex;
  flex-direction: column;
}

/* “miniature + bouton” déjà OK */
.card--showcase .card-body{ display:flex; flex-direction:column; gap:var(--s); flex:1; }
.card--showcase .card-foot{
  margin-top: var(--m);
  display:grid; grid-template-columns:auto auto;
  align-items:center; justify-content:center; gap:var(--m);
}

/* Empilement propre en mobile : image puis bouton, tous deux centrés */
@media (max-width: 620px){
  .cards-deck{
    width: 100%;              /* la grille prend toute la largeur dispo */
    grid-template-columns: 1fr;
    justify-items: center;    /* centre les items à l’intérieur de la grille */
  }
  .cards-deck > .card{
    width: min(520px, 92vw);  /* rétrécit la carte sous 520px si besoin */
  }
  .card--showcase .card-foot{
    grid-template-columns: 1fr;                /* passe en colonne */
    justify-items: center;                     /* centre image et bouton */
    gap: calc(var(--m) * .75);
  }
}

/* Miniature : petite image carrée/rectangulaire */
.card--showcase .mini-shot{
  width: 200px;                                /* adapte si tu veux plus petit/large */
  max-width: 38vw;                             /* sécurité en mobile paysage */
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

/* Un peu d’air sous le deck si un autre bloc suit */
.cards-deck + *{ margin-top: var(--l); }

/* ===== FAQ (commune aux pages) ===== */
.section-faq .sub-lead{ margin-top: var(--s); margin-bottom: var(--m); }

/* Neutralise un éventuel max-width inline restant dans la FAQ */
.section-faq .faq-a .sub-lead{ max-width: none !important; }

.faq{
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--s);
}

.faq-item{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
}

/* Barre question */
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;     /* texte | icône */
  align-items: center;
  gap: var(--s);
  padding: calc(var(--m) - 2px) calc(var(--m) + 2px);
  font-weight: 700;
  color: var(--brand);
  position: relative;
}

/* Icône + / – (pictogramme simple en CSS) */
.faq-toggle{
  width: 22px; height: 22px; position: relative; display:inline-block;
}
.faq-toggle::before,
.faq-toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width: 16px; height: 2px; background: var(--brand); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}
.faq-toggle::after{ transform: translate(-50%, -50%) rotate(90deg); }  /* la barre verticale = + */

/* Contenu réponse : on anime la hauteur + padding */
.faq-a{
  height: 0;
  overflow: hidden;
  padding: 0 calc(var(--m) + 2px);       /* marges latérales constantes */
  transition: height .28s ease, padding .28s ease;
  color: var(--text);
  line-height: 1.65;
  opacity: .95;
}

/* État visuel quand "ouvert" (padding vertical) — piloté par le JS via data-expanded */
.faq-item[data-expanded="true"] .faq-a{
  padding-top: calc(var(--m) + 2px);
  padding-bottom: calc(var(--m) + 2px);
}

/* Le + devient – quand le <details> est ouvert */
.faq-item[open] > summary .faq-toggle::after{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(.5);
}

/* Petite ligne séparatrice quand c'est ouvert */
.faq-item[open] > summary{ border-bottom:1px solid var(--border); }

/* Focus clavier visible */
.faq-item > summary:focus-visible{
  outline: 2px solid rgba(15,76,92,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 768px){
  .faq{ gap: 12px; }
  .faq-item > summary{ padding: 16px; }
  .faq-a{ padding-left: 16px; padding-right: 16px; } /* mêmes latérales en mobile */
  .faq-item[data-expanded="true"] .faq-a{
    padding-top: 16px; padding-bottom: 16px;
  }
}

/* ===== Carte Offre / Pricing ===== */
.card--pricing{
  position: relative;
  background:
    radial-gradient(600px 220px at 20% -20%, rgba(216,162,74,.10), transparent 60%),
    #fff;
  border: 1px solid rgba(216,162,74,.35);     /* ocre doux, discret */
  box-shadow:
    0 10px 28px rgba(15,76,92,.08),
    0 2px 0 rgba(216,162,74,.25) inset;       /* petit liseré intérieur */
  overflow: hidden;
}

/* halo subtil au survol (desktop) */
@media (hover:hover){
  .card--pricing:hover{
    transform: translateY(-2px);
    box-shadow:
      0 18px 36px rgba(15,76,92,.12),
      0 2px 0 rgba(216,162,74,.28) inset;
  }
}

/* badge en-tête */
.card--pricing .pricing-badge{
  display:inline-block;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* pastille prix optionnelle */
.card--pricing .price-tag{
  display:inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 var(--s);
  padding: 8px 14px;
  border: 2px solid var(--brand);
  color: var(--brand);
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15,76,92,.08);
}
.card--pricing .price-tag .price-suffix{
  font-size: .9rem;
  font-weight: 600;
  opacity: .75;
}

/* checklist un peu plus lisible dans une carte offre */
.card--pricing .liste-carre li{
  margin: 8px 0;
}
.card--pricing .liste-carre li::before{
  background: var(--brand);          /* cohérence avec le site */
}

/* bouton mis en avant + centrage */
.card--pricing .cta-row{
  margin-top: var(--m);
}
.card--pricing .cta-row .cta{
  padding: 14px 22px;
  border-width: 2px;                 /* ghost plus présent */
}

/* petit ruban décoratif en coin (facultatif) */
.card--pricing::after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(216,162,74,.22), transparent 70%);
  pointer-events:none;
}

/* responsive : garde des proportions propres */
@media (max-width:900px){
  .card--pricing .price-tag{ margin-bottom: var(--s); }
}

/* ====== Section Prêt à avancer : centrage + largeur carte (desktop only) ====== */
@media (min-width: 901px){

  /* Centre le duo "carte + image" */
  #pret-a-avancer .hero-split{
    display: grid;
    grid-template-columns: auto auto;                 /* carte | image */
    justify-content: center;                           /* centré dans le container */
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
  }

  /* La colonne texte empile le H2 puis la carte, centrés */
  #pret-a-avancer .hero-text{
    display: flex;
    flex-direction: column;                            /* ⬅️ corrige le bug */
    align-items: center;                               /* centre H2 + carte */
  }

  /* H2 centré et respirant */
  #pret-a-avancer .hero-text .sect-title{
    text-align: center;
    margin: 0 0 var(--s) 0;
    width: 100%;
  }

  /* Carte tarif : largeur et padding pilotables */
  #pret-a-avancer .card--pricing{
    --pricing-width: 520px;                            /* ← ajuste la largeur */
    --pricing-pad: 22px;                               /* padding interne uniforme */
    width: var(--pricing-width);
    max-width: 100%;
  }
  #pret-a-avancer .card--pricing .card-body{
    padding: var(--pricing-pad);
  }

  /* Un peu d’air sous la pastille prix */
  #pret-a-avancer .card--pricing .price-tag{
    margin-bottom: var(--s);
  }
}

/* ====== Prêt à avancer — ajustements desktop ====== */
@media (min-width: 901px){

  /* H2 aligné à gauche + colonne gauche non centrée */
  #pret-a-avancer .hero-text{
    align-items: flex-start;         /* au lieu de center */
  }
  #pret-a-avancer .hero-text .sect-title{
    text-align: left;                /* au lieu de center */
    margin: 0 0 var(--s) 0;
    width: auto;
  }

  /* Réduire l'espace sous le <small> (bloc conditions) */
  #pret-a-avancer .card--pricing .card-body p:last-child{
    /* c'est le <p> qui contient le <small> */
    margin: 6px 0 0;                /* au lieu de la marge par défaut */
  }
  #pret-a-avancer .card--pricing .card-body small{
    display: block;
    line-height: 1.35;
    opacity: .85;
  }
}

/* ====== Ajustement espacement H2 / carte — Prêt à avancer ====== */
@media (min-width: 901px){
  #pret-a-avancer .hero-text .sect-title{
    margin-bottom: var(--m); /* espace régulier (≈ 24px si ta variable est standard) */
  }
}

.link-inline {
  color: var(--brand, #0f4c5c);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-inline:hover {
  opacity: .85;
}