/* J&M Synergy — CSS raffiné (logo, dark mode, RGPD, responsive)
   - Palette harmonisée sur le logo (bleu/lilas)
   - Échelle typographique fluide
   - Cartes + ombres propres
   - Accessibilité : focus visibles / contrastes
   - Mobile first + garde-fous desktop
*/

/* ====== Design tokens ====== */
:root{
  /* Couleurs (logo) */
  --brand-blue: #2f6faa;      /* bleu logo */
  --brand-lilac: #9c83d6;     /* lilas logo */
  --blue-600: #1f5c90;
  --lilac-700:#7a65b6;

  /* Surface & texte */
  --bg: #f8fafc;
  --fg: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e5e7eb;

  /* Accents & états */
  --ring: rgba(47,111,170,.25);
  --shadow: 0 10px 30px rgba(2,6,23,.06);

  /* Rayons / conteneurs */
  --radius-lg: 22px;
  --radius-md: 12px;
  --container: 1120px;

  /* Typo fluide */
  --h1: clamp(2rem, 2.2vw + 1.4rem, 3rem);
  --h2: clamp(1.4rem, 1.2vw + 1rem, 2rem);
  --lead: clamp(.95rem, .35vw + .85rem, 1.05rem);
}

:root.dark{
  --bg:#0c1222;
  --fg:#f1f5f9;    /* plus clair */
  --muted:#c0c8d6; /* gris lisible */
  --card:#0f172a;
  --border:#233044;
  --ring: rgba(156,131,214,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root.dark .muted { color: var(--muted) }
:root.dark .card { border-color: #243044 }
:root.dark .link  { color: color-mix(in oklab, #9cc7ff 75%, #ffffff 25%) }
:root.dark .btn--ghost { color: #9cc7ff; border-color: #3b4f71; background: #0f172a }

/* ====== Carte duo : avatars + réseaux ====== */
.duo{align-items:start}
.duo__header{display:flex; align-items:center; gap:12px; margin-bottom:4px}
.duo__avatar{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover; border:2px solid color-mix(in oklab, var(--brand-blue) 35%, #fff 65%);
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
}
:root.dark .duo__avatar{ border-color: color-mix(in oklab, var(--brand-lilac) 55%, #1a2335 45%) }
.socials{display:flex; gap:10px; list-style:none; padding:0; margin:10px 0 0}
.socials__link{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; background:var(--card); border:1px solid var(--border);
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.socials__link:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,.12) }
.socials__link svg{ width:18px; height:18px; display:block; fill: currentColor }
.socials__link.x  { color:#111 }     :root.dark .socials__link.x  { color:#fff }
.socials__link.ig { color:#b434ac }  :root.dark .socials__link.ig { color:#ff9cf2 }
.socials__link.fb { color:#1877F2 }  :root.dark .socials__link.fb { color:#8ab8ff }
.socials__link.li { color:#0A66C2 }  :root.dark .socials__link.li { color:#7fb5ff }

/* ====== Reset utile ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at -10% -10%, #e7f1ff 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% -10%, #efe9ff 0%, transparent 55%),
    var(--bg);
}
:root.dark body{
  background:
    radial-gradient(1200px 800px at -10% -10%, #0f1831 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% -10%, #1a1230 0%, transparent 55%),
    var(--bg);
}
img{max-width:100%;display:block}

/* ====== Layout utilitaires ====== */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section--alt{background:var(--card)}
.muted{color:var(--muted)}

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

/* ====== Navigation ====== */
.nav{
  position:fixed;  top: 0; left: 0; right: 0;
  z-index: 100;             /* au-dessus du reste */
  background:color-mix(in oklab, var(--card) 82%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  height: 68px;
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  opacity:.75;
}
:root.dark .nav{
  background:color-mix(in oklab, #0b1222 70%, transparent);
  border-bottom-color:#0b1222;
}

body{ 
  padding-top: 68px;        /* = hauteur du header */
}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:68px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__logo-img{
  width:40px;height:40px;object-fit:contain;
  background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:4px; box-shadow:0 6px 16px rgba(47,111,170,.18);
}
.brand__logo-img.small{width:34px;height:34px;border-radius:10px}
.brand__name{font-weight:800;letter-spacing:.2px}

.nav__links{display:flex;gap:18px;align-items:center}
.nav__links a{color:var(--fg);text-decoration:none}
.nav__links a:hover{color:var(--brand-blue)}

.nav__actions{display:flex;align-items:center;gap:10px}
.nav__toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav__toggle span{display:block;width:24px;height:2px;background:currentColor;margin:4px 0}
/* --- Couleurs du burger selon le thème --- */
.nav__toggle { color: #111; }              /* clair par défaut */
:root.dark .nav__toggle { color: #fff; }   /* blanc en mode sombre */
.nav__toggle span {
  transition: background 0.3s ease;
}
:root.dark .nav__toggle { color:#fff }
.nav__toggle span{ height:2.5px }

/* Theme switch */
.theme-switch{
  width:44px;height:36px;border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; place-items:center;
  transition: transform .15s ease;
}
/* ====== Switch de thème plus visible ====== */
.theme-switch--xl{
  width:64px; height:40px; border-radius:999px;
  font-weight:700; gap:0;
  box-shadow: 0 6px 18px rgba(47,111,170,.15);
}
.theme-switch--xl .sun, .theme-switch--xl .moon { font-size:14px }
.theme-switch--xl { position:relative; overflow:hidden }
.theme-switch--xl::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand-lilac) 40%, #ffffff 60%);
  opacity:.8;
}
.theme-switch:active{transform:scale(.97)}
.theme-switch .sun{opacity:1}
.theme-switch .moon{opacity:.45}
:root.dark .theme-switch .sun{opacity:.3}
:root.dark .theme-switch .moon{opacity:1}

/* ====== Boutons / liens ====== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, opacity .2s;
  will-change: transform;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  color:#fff;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  box-shadow: 0 10px 26px rgba(47,111,170,.28);
}
.btn--primary:hover{opacity:.95}
.btn--ghost{
  background:var(--card); color:var(--brand-blue); border-color:color-mix(in oklab, var(--brand-blue) 30%, #c7d2fe 70%);
}
.link{color:var(--brand-blue);text-decoration:none}
.link:hover{text-decoration:underline}

/* ====== Hero ====== */
.hero{padding:72px 0}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
/* ====== Hero "wow" léger (aucun JS, perf-friendly) ====== */
.hero h1 {
  background-size: 200% 100%;
  animation: jm-gradient-shift 8s linear infinite;
}
@keyframes jm-gradient-shift {
  0% { background-position: 0% 50% }
  100% { background-position: 100% 50% }
}
.lead{color:var(--muted);font-size:var(--lead)}
.actions{display:flex;gap:12px;margin:18px 0 10px}
.hero__badges{ color: color-mix(in oklab, var(--muted) 80%, #6b7280 20%) }
:root.dark .hero__badges{ color: color-mix(in oklab, var(--muted) 90%, #9cb3d8 10%) }

/* Respect du “reduced motion” */
@media (prefers-reduced-motion: reduce){
  .hero h1{ animation: none !important }
}

.text-gradient-1{
  background:linear-gradient(90deg, var(--brand-blue), #60a5fa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gradient-2{
  background:linear-gradient(90deg, #ea73b2, var(--brand-lilac));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ====== Cartes ====== */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(2,6,23,.10)}
.card__icon{font-size:22px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo__col{display:flex;flex-direction:column;gap:6px}
.duo__icon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;color:#fff;font-weight:800;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.bg-indigo{background: color-mix(in oklab, var(--brand-blue) 18%, #eaf2ff 82%); color:var(--blue-600)}
.bg-violet{background: color-mix(in oklab, var(--brand-lilac) 22%, #f4efff 78%); color:var(--lilac-700)}
.duo__title{margin:6px 0 0}
.duo__sub{color:var(--muted);margin:0}
.duo__txt{color: color-mix(in oklab, var(--muted) 92%, #475569 8%); margin:.25rem 0 0}

/* ====== Apps ====== */
.section__head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.card--app .badge{
  display:inline-block;font-size:12px;background: color-mix(in oklab, var(--brand-blue) 12%, #eef2ff 88%);
  color: var(--blue-600); padding:4px 8px; border-radius:999px; margin-bottom:10px
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--border) 80%, transparent);
  border:1px solid var(--border); color:inherit;
}

/* ====== Téléchargements ====== */
.card--download p{margin:4px 0 14px}
.qr{margin:10px 0 14px}
.qr img{border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:0 8px 18px rgba(2,6,23,.06)}

/* ====== Contact & formulaire ====== */
.grid-2{align-items:start}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px}
.form input,.form textarea{
  padding:12px 14px;border-radius:var(--radius-md);
  border:1px solid var(--border); outline:none; background:var(--card); color:var(--fg);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s;
}
.form input:focus,.form textarea:focus{
  box-shadow:0 0 0 4px var(--ring);
  border-color: color-mix(in oklab, var(--brand-blue) 35%, #c7d2fe 65%);
}
.form .hp{position:absolute;left:-10000px;opacity:0}
.form__note{font-size:.82rem;color:var(--muted)}

/* ====== Footer ====== */
.footer{padding:30px 0}
.footer__row{display:flex;align-items:center;justify-content:space-between}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ====== Cookies (RGPD simple) ====== */
.cookies{
  position:fixed;left:0;right:0;bottom:0; z-index:60;
  background:var(--card); border-top:1px solid var(--border);
  box-shadow:0 -12px 26px rgba(0,0,0,.06); padding:14px 0;
}
.cookies__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cookies__btns{display:flex;gap:10px}

/* ====== Accessibilité / mouvements ====== */
:focus-visible{outline:3px solid color-mix(in oklab, var(--brand-lilac) 60%, #fff 40%); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .grid-2,.cards-2{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav__links{
    position:fixed; inset:68px 0 auto 0; background:var(--card);
    padding:18px 20px; display:none; flex-direction:column; gap:12px;
    border-bottom:1px solid var(--border)
  }
  .nav__toggle{display:block}
  .nav__links.open{display:flex}
  .hero{padding:56px 0}
  .hero h1{font-size: clamp(1.6rem, 4.5vw, 2.1rem)}
  .cards-3{grid-template-columns:1fr}
  .cookies__inner{flex-direction:column;align-items:flex-start}
}

/* ====== Print (propre) ====== */
@media print{
  .nav,.cookies{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}
}

/* === Micro-glow sur le nom de marque === */
.brand__name{ position:relative; display:inline-block; transition: color .2s ease }
.brand:hover .brand__name{ color: var(--brand-blue) }
.brand__name::after{
  content:""; position:absolute; left:-6px; right:-6px; bottom:-2px; height:8px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  border-radius: 999px; filter: blur(8px);
  opacity:0; transform: translateY(6px) scale(.8);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.brand:hover .brand__name::after{
  opacity:.85; transform: translateY(2px) scale(1);
}
/* dark: un peu plus dense pour rester visible */
:root.dark .brand__name::after{ filter: blur(10px) opacity(.9) }

/* === Light pulse doux pour attirer l’œil sans gêner === */
@keyframes jm-soft-pulse{
  0%{
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 26px rgba(47,111,170,.20), 0 0 0 0 rgba(47,111,170,.0);
  }
  50%{
    transform: translateY(0) scale(1.015);
    box-shadow: 0 12px 28px rgba(47,111,170,.26), 0 0 0 8px rgba(47,111,170,.06);
  }
  100%{
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 26px rgba(47,111,170,.20), 0 0 0 0 rgba(47,111,170,.0);
  }
}
.btn--pulse{
  animation: jm-soft-pulse 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}
/* si le bouton est en .btn--primary, on garde les mêmes valeurs */
.btn--primary.btn--pulse{ animation-name: jm-soft-pulse }

/* Respect du reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--pulse{ animation: none }
}

/* Watermark J&M derrière le h1 (non interactif) */
.hero{
  position:relative;
  isolation:isolate;
}
.hero::before {
  content: "J&M Synergy";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(var(--parallax-offset, 0px));
  z-index: -1;

  text-align: center;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(48px, 12vw, 140px);
  line-height: 1;

  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: .06;
  filter: blur(.2px);
  pointer-events: none;
  user-select: none;

  transition: transform 0.2s ease-out;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: .05; }
  50% { opacity: .1; }
}


:root.dark .hero::before{ opacity:.1 }
.reveal{ opacity:0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease }
.reveal.is-in{ opacity:1; transform: translateY(0) }

.skiplink{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  left:16px; top:12px; width:auto; height:auto; z-index:2000;
  background:var(--card); color:var(--fg); padding:10px 14px; border-radius:10px; 
  border:1px solid var(--border); box-shadow: var(--shadow);
}

/* === Page légale === */
.legal h1{ font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem); margin:0 0 8px }
.legal .legal__toc{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px;
}
.legal .legal__toc a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); text-decoration:none;
}
.legal article + article{ margin-top:16px }
.legal h2{ margin-top:0 }
.legal h3{ margin:14px 0 6px; font-size:1.05rem }
.legal ul{ margin:8px 0 12px 18px }

:root.dark .legal__toc a {
  background: var(--brand-blue);
  color: #fff;
  border-color: color-mix(in oklab, var(--brand-blue) 40%, #fff 60%);
}
:root.dark .legal__toc a:hover {
  background: var(--brand-lilac);
  border-color: var(--brand-lilac);
}

.legal__toc a {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== Toast global ===== */
.toast{
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%) translateY(-10px);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(92vw, 560px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.toast--show{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.toast--success{ border-left: 4px solid #10b981; } /* vert */
.toast--error{   border-left: 4px solid #ef4444; } /* rouge */

.toast__text{ flex: 1; }
.toast__close{
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: .75;
}
.toast__close:hover{ opacity: 1; }

/* ===== Password meter ===== */
.pw-meter { margin: 8px 0 2px; }
.pw-meter__bar { height: 8px; background: color-mix(in oklab, var(--border) 70%, transparent); border-radius: 999px; overflow: hidden; }
.pw-meter__bar span { display:block; height:100%; width:0%; min-width:2%; transition: width .25s ease; border-radius:999px; }
.pw-meter__bar span.weak   { background:#ef4444; }
.pw-meter__bar span.fair   { background:#f59e0b; }
.pw-meter__bar span.good   { background:#10b981; }
.pw-meter__bar span.strong { background:#22c55e; }
.pw-meter__bar span.very   { background:linear-gradient(90deg,#22c55e,#4f46e5); }
.pw-meter__label { font-size:.85rem; color:var(--muted); margin-top:6px; }


/* erreurs champ */
.is-invalid { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15) !important; }
.field-error { color:#ef4444; font-size:.85rem; margin-top:6px; }

.with-tip { position: relative; }
  .with-tip .tip{
    margin-left:.4rem; border:0; background:transparent; cursor:help;
    font: inherit; line-height:1; padding:.1rem .25rem; border-radius:.35rem;
  }
  .with-tip .tip:focus { outline: 2px solid var(--c-primary, #6b5bd0); outline-offset:2px; }

  /* Tooltip bubble (pure CSS) */
  .with-tip .tip[data-tip]{
    position: relative;
  }
  .with-tip .tip[data-tip]::after{
    content: attr(data-tip);
    position: absolute;
    left: 0; top: 100%;
    transform: translateY(.45rem);
    min-width: 260px;
    max-width: min(36ch, 80vw);
    background: #111;
    color: #fff;
    font-size: .85rem;
    line-height: 1.25;
    padding: .5rem .6rem;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 50;
    white-space: normal;
  }
  .with-tip .tip[data-tip]::before{
    content: "";
    position: absolute;
    left: .6rem; top: calc(100% + .2rem);
    width: .6rem; height: .6rem;
    background: #111;
    transform: rotate(45deg);
    opacity: 0; transition: opacity .15s ease;
    z-index: 49;
  }
  .with-tip .tip:hover::after,
  .with-tip .tip:focus::after,
  .with-tip .tip:active::after,
  .with-tip .tip:hover::before,
  .with-tip .tip:focus::before,
  .with-tip .tip:active::before{
    opacity: 1; transform: translateY(.3rem);
  }

  /* Accessibilité visuelle */
  .visually-hidden{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  
  
  /* === PATCH RESPONSIVE (à coller en bas du CSS) ===================== */

/* 1) Garde-fous globaux */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
.container { padding-left: 16px; padding-right: 16px; }

/* 2) Grilles anti-débordement (minmax(0,1fr) + auto-fit) */
.grid-2,
.cards-2,
.cards-3 { align-items: start; }
.grid-2 > *,
.cards-2 > *,
.cards-3 > * { min-width: 0; } /* évite que le contenu force la colonne à s’élargir */

@media (max-width: 1140px){
  /* 3 colonnes -> auto-fit propre */
  .cards-3{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
  }
}
@media (max-width: 980px){
  /* 2 colonnes -> auto-fit propre */
  .grid-2,
  .cards-2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
  }
}

/* 3) Formulaires : champs vraiment fluides */
.form { gap: 12px; }
.form label { min-width: 0; }
.form input,
.form textarea,
.form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Empêche un long email / CNI de casser la mise en page */
input[name="email"],
input[name="phone"],
input[name="cni_number"] {
  overflow-wrap: anywhere;
}

/* 4) Cartes/paddings plus doux sur mobile étroit */
@media (max-width: 420px){
  .section { padding: 44px 0; }
  .card { padding: 16px; border-radius: 16px; }
  .hero { padding: 40px 0; }
  .actions { flex-wrap: wrap; gap: 10px; }
}

/* 5) Hero watermark : limite l’impact sur mini-écrans */
@media (max-width: 480px){
  .hero::before{
    font-size: clamp(36px, 14vw, 64px);
    opacity: .05;
  }
}

/* 6) Nav mobile : évite tout débordement horizontal */
@media (max-width: 720px){
  .nav__links{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 8) Tooltip NIN : pas de largeur minimale rigide + centrage si écran étroit */
.with-tip .tip[data-tip]::after{
  min-width: auto;
  max-width: calc(100vw - 32px);   /* reste dans le viewport */
  left: 50%;
  transform: translate(-50%, .45rem);
  text-align: left;
}
.with-tip .tip[data-tip]::before{
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
@media (hover: hover){
  .with-tip .tip:hover::after,
  .with-tip .tip:focus::after,
  .with-tip .tip:active::after{
    transform: translate(-50%, .3rem);
  }
}

/* 9) Duo / avatars : pas de casse dans les colonnes */
.duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.duo__col { min-width: 0; }

/* 10) Titres & textes : empêcher le débordement sur mots longs */
h1, h2, h3, .lead, .duo__txt, .legal article {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 11) Inputs date sur iOS/Android : confort */
input[type="date"] {
  font-size: 16px; /* évite le zoom iOS au focus */
}

/* 12) Boutons : retour à la ligne possible */
.btn { white-space: normal; }

.showpass-inline {
  display: flex;
  align-items: center;
  gap: 5px; /* petit espace horizontal */
  margin-top: 8px;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.showpass-inline input {
  margin: 0;
  flex-shrink: 0;
  transform: translateY(-1px); /* ajuste l'alignement vertical */
}

.showpass-inline span {
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap; /* empêche le retour à la ligne */
}

/* Do NOT stretch checkboxes/radios */
.form input[type="checkbox"],
.form input[type="radio"]{
  width: auto;
  min-width: 0;
  max-width: none;
  display: inline-block;
  vertical-align: middle;
  /* optional polish */
  margin: 0;
}

/* ===================== */
/*   PAGE ARTICLE (blog) */
/* ===================== */

.section--article {
  padding-top: 52px;
  padding-bottom: 72px;
}

.section--article .container.article {
  max-width: 860px;              /* lecture confortable */
  margin-inline: auto;
}

/* Fil d’Ariane */
.breadcrumb {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 18px;
}
.breadcrumb a {
  color: var(--brand-blue);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* Titre & chapeau */
.article h1 {
  font-size: clamp(1.9rem, 2.1vw + 1.2rem, 2.5rem);
  margin: 0 0 10px;
}
.article .lead {
  margin-top: 6px;
  margin-bottom: 18px;
  font-size: var(--lead);
  color: color-mix(in oklab, var(--muted) 85%, #475569 15%);
}

/* Corps du texte */
.article p {
  line-height: 1.7;
  margin: 0 0 14px;
}
.article ul,
.article ol {
  margin: 6px 0 14px 20px;
  padding-left: 0;
}
.article li + li {
  margin-top: 4px;
}

/* Titres de section */
.article h2 {
  margin-top: 26px;
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 0.7vw + 1rem, 1.5rem);
  position: relative;
}
.article h2::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
}
.article h3 {
  margin-top: 18px;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

/* Petits éléments visuels */
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .88em;
  padding: 2px 5px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--border) 70%, transparent);
}

/* Séparateurs plus doux */
.article hr {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  margin: 26px 0 20px;
}

/* Note / encadré discret */
.article .note {
  border-left: 3px solid var(--brand-lilac);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--border) 45%, transparent);
  border-radius: 10px;
  font-size: .92rem;
  color: color-mix(in oklab, var(--muted) 90%, #475569 10%);
}

/* Encadré “offre J&M Synergy” */
.article-card {
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.article-card h3 {
  margin-top: 0;
}

/* Bloc CTA central */
.article-cta {
  text-align: center;
  margin: 30px 0;
}
.article-cta .btn {
  min-width: min(100%, 260px);
  justify-content: center;
}
.article-cta .muted {
  margin-top: 6px;
  font-size: .9rem;
}

/* Liens dans l’article */
.article a.link {
  text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 720px) {
  .section--article {
    padding-top: 42px;
    padding-bottom: 56px;
  }
  .article h1 {
    font-size: clamp(1.6rem, 5vw, 2.05rem);
  }
  .article h2::before {
    left: -10px;
  }
}

/* ========================= */
/*   PAGE DIAGNOSTIC SITE    */
/* ========================= */

.section--diag {
  padding-top: 60px;
  padding-bottom: 80px;
  position: relative;
}

/* léger halo en fond, discret */
.section--diag::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 0% 0%, rgba(148, 163, 255, .09), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(244, 114, 182, .08), transparent 60%);
  opacity: .9;
  z-index: -1;
}

.section--diag .container {
  max-width: 1040px;
}

/* Fil d’Ariane sur cette page uniquement */
.section--diag .breadcrumb {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 18px;
}
.section--diag .breadcrumb a {
  color: var(--brand-blue);
  text-decoration: none;
}
.section--diag .breadcrumb a:hover {
  text-decoration: underline;
}

/* Header du diagnostic */
.section--diag .diag-header {
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: left;
}
.section--diag .diag-header h1 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 2.1vw + 1.2rem, 2.4rem);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--diag .diag-header .lead {
  margin: 6px 0 0;
}

/* Mise en page 2 colonnes (form + aside) */
.section--diag .diag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 26px;
  align-items: flex-start;
}

/* Groupes de questions = “étapes” */
.section--diag .diag-form .diag-group {
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--brand-blue) 20%);
  padding: 16px 16px 14px;
  background: color-mix(in oklab, var(--card) 88%, #eef2ff 12%);
  box-shadow: 0 14px 36px rgba(15,23,42,.06);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

/* petit trait en haut pour rappeler la charte */
.section--diag .diag-form .diag-group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-lilac));
  opacity: .8;
}

/* légende = titre d’étape */
.section--diag .diag-form .diag-group legend {
  padding: 0 6px;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in oklab, var(--fg) 80%, var(--brand-blue) 20%);
}

/* label de champ dans le diag uniquement */
.section--diag .diag-form label > span {
  font-weight: 500;
  font-size: .9rem;
  color: color-mix(in oklab, var(--fg) 90%, var(--muted) 10%);
}

/* aide sous le titre */
.section--diag .diag-help {
  font-size: .84rem;
  color: var(--muted);
  margin: 0 0 10px;
}

/* ===== Checkboxes : colonnes propres & lisibles ===== */

.section--diag .diag-checkgrid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 8px;
}

/* version “serrée” (langues) en mode chips */
.section--diag .diag-checkgrid.diag-checkgrid--tight {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.section--diag .diag-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.section--diag .diag-check input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.section--diag .diag-check:hover {
  border-color: color-mix(in oklab, var(--brand-blue) 35%, var(--border) 65%);
  background: color-mix(in oklab, var(--card) 88%, #eef2ff 12%);
  box-shadow: 0 4px 14px rgba(15,23,42,.08);
}

/* ===== Radios : pastilles horizontales propres ===== */

.section--diag .diag-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}

.section--diag .diag-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.section--diag .diag-radio-row input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

.section--diag .diag-radio-row label:hover {
  border-color: color-mix(in oklab, var(--brand-blue) 35%, var(--border) 65%);
  background: color-mix(in oklab, var(--card) 92%, #e0ecff 8%);
}

/* ===== Selects : look premium mais uniquement dans ce formulaire ===== */

.section--diag .diag-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 40px; /* espace pour la flèche */
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}

.section--diag .diag-form select:focus {
  border-color: color-mix(in oklab, var(--brand-blue) 45%, #c7d2fe 55%);
}

/* Bouton de soumission du diagnostic */
.section--diag .diag-form button[type="submit"] {
  margin-top: 12px;
}

/* sur petit écran => bouton plein largeur */
@media (max-width: 640px) {
  .section--diag .diag-form button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Colonne de droite (explications) ===== */

.section--diag .diag-aside {
  position: sticky;
  top: 86px;
  border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--brand-lilac) 30%);
  background: color-mix(in oklab, var(--card) 88%, #f5f3ff 12%);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}
.section--diag .diag-aside__title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.08rem;
}
.section--diag .diag-aside__list {
  margin: 8px 0 14px 18px;
  padding-left: 0;
}
.section--diag .diag-aside__list li + li {
  margin-top: 6px;
}

.section--diag .diag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.section--diag .diag-badge {
  font-size: .78rem;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--brand-blue) 30%);
  background: color-mix(in oklab, var(--border) 55%, transparent);
}

/* ===== Responsive spécifique à la page diag ===== */

@media (max-width: 920px) {
  .section--diag .diag-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section--diag .diag-aside {
    position: static;
    order: -1;         /* l’explication passe au-dessus du formulaire */
  }
}

@media (max-width: 640px) {
  .section--diag {
    padding-top: 46px;
    padding-bottom: 58px;
  }
  .section--diag .diag-form .diag-group {
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  .section--diag .diag-checkgrid {
    gap: 4px;
  }
}
/* === Selects : forcer fond blanc en dark mode sur la page diagnostic === */
:root.dark .section--diag .diag-form select {
  background-color: #ffffff;         /* fond blanc même en dark */
  color: #0f172a;                    /* texte foncé pour la lisibilité */
  border-color: color-mix(in oklab, var(--brand-lilac) 40%, #cbd5f5 60%);
}