/* SoftSystem97 — système de design v1
   Couche commune : jetons, sections, titres, boutons, cartes, formulaires,
   badges de statut, étapes, FAQ, messages. Préfixe `ss-` pour cohabiter avec
   les styles existants sans les écraser. */

:root{
  /* nuit : sections fortes */
  --ss-nuit-900:#050b1a;
  --ss-nuit-800:#081227;
  --ss-nuit-700:#0d1b36;
  --ss-nuit-600:#132449;
  /* action : bleu électrique et turquoise */
  --ss-bleu:#1d6cf5;
  --ss-bleu-fonce:#1553c6;
  --ss-bleu-clair:#4d94ff;
  --ss-turquoise:#17c8c0;
  --ss-turquoise-fonce:#0e9d97;
  /* accent secondaire historique */
  --ss-violet:#7c3aed;
  --ss-orange:#f97316;
  /* neutres */
  --ss-blanc:#ffffff;
  --ss-gris-50:#f6f8fc;
  --ss-gris-100:#eef2f8;
  --ss-gris-200:#dfe6f0;
  --ss-encre:#0c1424;
  --ss-texte:#1c2637;
  --ss-texte-doux:#54607a;
  --ss-texte-nuit:#e8eefc;
  --ss-texte-nuit-doux:#a9b8d4;
  /* états */
  --ss-succes:#15a05a;
  --ss-attention:#c47f04;
  --ss-danger:#d23b3b;
  --ss-info:#1d6cf5;
  /* formes */
  --ss-r-sm:10px;
  --ss-r:16px;
  --ss-r-lg:22px;
  --ss-r-pill:999px;
  --ss-ombre-1:0 1px 2px rgba(12,20,36,.06),0 4px 14px rgba(12,20,36,.06);
  --ss-ombre-2:0 10px 34px rgba(12,20,36,.10);
  --ss-ombre-3:0 20px 54px rgba(21,83,198,.18);
  --ss-bord:1px solid var(--ss-gris-200);
  --ss-bord-nuit:1px solid rgba(169,184,212,.20);
  /* rythme */
  --ss-large:1280px;
  --ss-section-y:clamp(56px,7vw,104px);
  --ss-police:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ss-police-titre:'Space Grotesk','Outfit',system-ui,sans-serif;
}

/* ---------- socle ---------- */
.ss{font-family:var(--ss-police);color:var(--ss-texte);line-height:1.6;}
.ss *,.ss *::before,.ss *::after{box-sizing:border-box;}
.ss img,.ss svg,.ss canvas{max-width:100%;}
.ss a{text-decoration:none;color:var(--ss-bleu-fonce);}
.ss a:hover{color:var(--ss-bleu);}
.ss p{margin:0 0 1rem;}
.ss ul.ss-liste{margin:0;padding:0;list-style:none;}
.ss :focus-visible{outline:3px solid var(--ss-turquoise);outline-offset:2px;border-radius:6px;}

/* largeur : les sections occupent tout l'écran, le contenu reste lisible */
.ss-section{padding:var(--ss-section-y) 0;width:100%;position:relative;}
.ss-cadre{width:min(var(--ss-large),100% - 2.5rem);margin-inline:auto;}
.ss-clair{background:var(--ss-blanc);}
.ss-doux{background:var(--ss-gris-50);}
.ss-nuit{background:var(--ss-nuit-800);color:var(--ss-texte-nuit);}
.ss-nuit-degrade{
  background:linear-gradient(140deg,var(--ss-nuit-900) 0%,var(--ss-nuit-700) 55%,#14265c 100%);
  color:var(--ss-texte-nuit);
}
/* aucun texte sombre sur fond sombre, quelle que soit la page d'origine */
.ss-nuit,.ss-nuit-degrade,.ss-nuit *,.ss-nuit-degrade *{color:inherit;}
.ss-nuit h1,.ss-nuit h2,.ss-nuit h3,.ss-nuit h4,
.ss-nuit-degrade h1,.ss-nuit-degrade h2,.ss-nuit-degrade h3,.ss-nuit-degrade h4{color:var(--ss-blanc);}
.ss-nuit .ss-sous-titre,.ss-nuit-degrade .ss-sous-titre,
.ss-nuit p,.ss-nuit-degrade p{color:var(--ss-texte-nuit-doux);}

/* ---------- titres ---------- */
.ss-surtitre{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ss-bleu-fonce);background:rgba(29,108,245,.10);
  border:1px solid rgba(29,108,245,.22);border-radius:var(--ss-r-pill);
  padding:.4rem .9rem;margin:0 0 1rem;
}
.ss-nuit .ss-surtitre,.ss-nuit-degrade .ss-surtitre{
  color:#8fd8ff;background:rgba(77,148,255,.14);border-color:rgba(77,148,255,.3);
}
.ss-titre{
  font-family:var(--ss-police-titre);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.15;margin:0 0 .75rem;color:var(--ss-encre);
}
.ss-titre-hero{
  font-family:var(--ss-police-titre);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08;margin:0 0 1rem;color:var(--ss-blanc);
}
.ss-sous-titre{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ss-texte-doux);max-width:64ch;margin:0 0 1.5rem;}
.ss-centre{text-align:center;}
.ss-centre .ss-sous-titre{margin-inline:auto;}
.ss-entete{max-width:70ch;margin:0 auto 2.5rem;}

/* ---------- boutons : une seule famille pour tout le site ---------- */
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ss-police);font-weight:700;font-size:1rem;line-height:1.2;
  padding:.95rem 1.6rem;border-radius:var(--ss-r-sm);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-align:center;
}
.ss-btn:hover{transform:translateY(-2px);}
.ss-btn:active{transform:translateY(0);}
.ss-btn-principal{
  background:linear-gradient(135deg,var(--ss-bleu) 0%,var(--ss-bleu-fonce) 100%);
  color:var(--ss-blanc)!important;box-shadow:var(--ss-ombre-3);
}
.ss-btn-principal:hover{color:var(--ss-blanc)!important;box-shadow:0 24px 60px rgba(21,83,198,.32);}
.ss-btn-action{
  background:linear-gradient(135deg,var(--ss-turquoise) 0%,var(--ss-turquoise-fonce) 100%);
  color:#04231f!important;box-shadow:0 16px 40px rgba(23,200,192,.28);
}
.ss-btn-clair{background:var(--ss-blanc);color:var(--ss-nuit-700)!important;border-color:var(--ss-gris-200);box-shadow:var(--ss-ombre-1);}
.ss-btn-clair:hover{color:var(--ss-bleu-fonce)!important;border-color:var(--ss-bleu-clair);}
.ss-btn-contour{background:transparent;color:var(--ss-bleu-fonce)!important;border-color:rgba(29,108,245,.45);}
.ss-btn-contour:hover{background:rgba(29,108,245,.08);}
.ss-nuit .ss-btn-contour,.ss-nuit-degrade .ss-btn-contour{
  color:var(--ss-blanc)!important;border-color:rgba(232,238,252,.45);background:rgba(255,255,255,.06);
}
.ss-nuit .ss-btn-contour:hover,.ss-nuit-degrade .ss-btn-contour:hover{background:rgba(255,255,255,.14);}
.ss-btn-sm{padding:.6rem 1.05rem;font-size:.9rem;}
.ss-btn-lg{padding:1.1rem 2rem;font-size:1.06rem;}
.ss-btn[aria-disabled="true"],.ss-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.ss-boutons{display:flex;flex-wrap:wrap;gap:.85rem;}
.ss-centre .ss-boutons{justify-content:center;}

/* ---------- cartes ---------- */
.ss-grille{display:grid;gap:1.15rem;}
.ss-grille-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ss-grille-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ss-grille-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.ss-carte{
  background:var(--ss-blanc);border:var(--ss-bord);border-radius:var(--ss-r);
  padding:1.5rem;box-shadow:var(--ss-ombre-1);height:100%;
  display:flex;flex-direction:column;gap:.5rem;color:var(--ss-texte);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
a.ss-carte:hover{transform:translateY(-4px);box-shadow:var(--ss-ombre-2);border-color:var(--ss-bleu-clair);color:var(--ss-texte);}
.ss-carte h3,.ss-carte h4{font-family:var(--ss-police-titre);margin:0;font-size:1.1rem;color:var(--ss-encre);font-weight:700;}
.ss-carte p{margin:0;color:var(--ss-texte-doux);font-size:.96rem;}
.ss-nuit .ss-carte,.ss-nuit-degrade .ss-carte{
  background:rgba(255,255,255,.045);border:var(--ss-bord-nuit);box-shadow:none;color:var(--ss-texte-nuit);
}
.ss-nuit .ss-carte h3,.ss-nuit .ss-carte h4,
.ss-nuit-degrade .ss-carte h3,.ss-nuit-degrade .ss-carte h4{color:var(--ss-blanc);}
.ss-nuit .ss-carte p,.ss-nuit-degrade .ss-carte p{color:var(--ss-texte-nuit-doux);}
.ss-carte-lien{margin-top:auto;font-weight:700;font-size:.94rem;color:var(--ss-bleu-fonce);}

/* pictogramme de carte : lettres, pour rester lisible sans police d'icônes */
.ss-picto{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  font-weight:800;font-size:.72rem;letter-spacing:.04em;color:var(--ss-blanc);
  background:linear-gradient(140deg,var(--ss-nuit-700),var(--ss-bleu));
}
.ss-picto-turquoise{background:linear-gradient(140deg,var(--ss-turquoise-fonce),var(--ss-turquoise));color:#04231f;}
.ss-picto-violet{background:linear-gradient(140deg,#4c1d95,var(--ss-violet));}

/* ---------- chiffres clés ---------- */
.ss-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;text-align:center;}
.ss-chiffre strong{
  display:block;font-family:var(--ss-police-titre);font-size:clamp(1.7rem,2.6vw,2.4rem);
  font-weight:800;color:var(--ss-turquoise);line-height:1.1;
}
.ss-chiffre span{font-size:.92rem;color:var(--ss-texte-nuit-doux);}

/* ---------- étapes numérotées ---------- */
.ss-etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem;counter-reset:ss-etape;}
.ss-etape{
  position:relative;background:var(--ss-blanc);border:var(--ss-bord);border-radius:var(--ss-r);
  padding:1.6rem 1.4rem 1.4rem;box-shadow:var(--ss-ombre-1);
}
.ss-etape::before{
  counter-increment:ss-etape;content:counter(ss-etape);
  position:absolute;top:-16px;left:1.4rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;color:var(--ss-blanc);
  background:linear-gradient(135deg,var(--ss-bleu),var(--ss-bleu-fonce));
  box-shadow:0 8px 20px rgba(21,83,198,.35);
}
.ss-etape h4{margin:.4rem 0 .35rem;font-family:var(--ss-police-titre);font-size:1.05rem;color:var(--ss-encre);}
.ss-etape p{margin:0;color:var(--ss-texte-doux);font-size:.95rem;}

/* ---------- badges de statut : même code couleur partout ---------- */
.ss-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.8rem;
  padding:.3rem .7rem;border-radius:var(--ss-r-pill);border:1px solid transparent;white-space:nowrap;
}
.ss-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.ss-badge-neutre{color:#41506b;background:var(--ss-gris-100);border-color:var(--ss-gris-200);}
.ss-badge-info{color:#14509f;background:rgba(29,108,245,.12);border-color:rgba(29,108,245,.25);}
.ss-badge-attente{color:#8a5a00;background:rgba(196,127,4,.14);border-color:rgba(196,127,4,.28);}
.ss-badge-cours{color:#0b6f6a;background:rgba(23,200,192,.16);border-color:rgba(23,200,192,.32);}
.ss-badge-succes{color:#0e7040;background:rgba(21,160,90,.14);border-color:rgba(21,160,90,.3);}
.ss-badge-danger{color:#9c2020;background:rgba(210,59,59,.12);border-color:rgba(210,59,59,.28);}

/* ---------- formulaires ---------- */
.ss-champ{display:block;margin-bottom:1.1rem;}
.ss-champ > label,.ss-etiquette{
  display:block;font-weight:600;font-size:.94rem;color:var(--ss-texte);margin-bottom:.4rem;
}
.ss-champ input,.ss-champ select,.ss-champ textarea,
.ss input.ss-saisie,.ss select.ss-saisie,.ss textarea.ss-saisie{
  width:100%;font-family:var(--ss-police);font-size:1rem;color:var(--ss-texte);
  background:var(--ss-blanc);border:1px solid var(--ss-gris-200);border-radius:var(--ss-r-sm);
  padding:.8rem .95rem;transition:border-color .18s ease,box-shadow .18s ease;
}
.ss-champ input::placeholder,.ss-champ textarea::placeholder{color:#8593ad;}
.ss-champ input:focus,.ss-champ select:focus,.ss-champ textarea:focus{
  border-color:var(--ss-bleu);box-shadow:0 0 0 4px rgba(29,108,245,.14);outline:none;
}
.ss-aide{display:block;font-size:.86rem;color:var(--ss-texte-doux);margin-top:.35rem;}
.ss-erreur{display:block;font-size:.88rem;color:var(--ss-danger);font-weight:600;margin-top:.35rem;}
.ss-champ.ss-invalide input,.ss-champ.ss-invalide textarea,.ss-champ.ss-invalide select{
  border-color:var(--ss-danger);box-shadow:0 0 0 4px rgba(210,59,59,.12);
}

/* ---------- messages ---------- */
.ss-message{
  display:flex;gap:.75rem;align-items:flex-start;border-radius:var(--ss-r-sm);
  padding:.95rem 1.1rem;border:1px solid transparent;font-size:.96rem;margin:0 0 1rem;
}
.ss-message-succes{background:rgba(21,160,90,.10);border-color:rgba(21,160,90,.28);color:#0e6b3d;}
.ss-message-info{background:rgba(29,108,245,.09);border-color:rgba(29,108,245,.24);color:#14509f;}
.ss-message-attention{background:rgba(196,127,4,.12);border-color:rgba(196,127,4,.28);color:#7d5200;}
.ss-message-erreur{background:rgba(210,59,59,.10);border-color:rgba(210,59,59,.26);color:#951f1f;}

/* ---------- barre de progression ---------- */
.ss-progres{display:flex;align-items:center;gap:.5rem;margin:0 0 1.5rem;flex-wrap:wrap;}
.ss-progres-etape{
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--ss-texte-doux);
}
.ss-progres-puce{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;
  background:var(--ss-gris-100);color:#5b6880;border:1px solid var(--ss-gris-200);
}
.ss-progres-etape[data-etat="active"]{color:var(--ss-bleu-fonce);}
.ss-progres-etape[data-etat="active"] .ss-progres-puce{background:var(--ss-bleu);color:#fff;border-color:var(--ss-bleu);}
.ss-progres-etape[data-etat="faite"]{color:#0e7040;}
.ss-progres-etape[data-etat="faite"] .ss-progres-puce{background:var(--ss-succes);color:#fff;border-color:var(--ss-succes);}
.ss-progres-trait{flex:1 1 24px;height:2px;background:var(--ss-gris-200);min-width:16px;}

/* ---------- FAQ ---------- */
.ss-faq{display:grid;gap:.7rem;max-width:52rem;margin-inline:auto;}
.ss-faq details{
  background:var(--ss-blanc);border:var(--ss-bord);border-radius:var(--ss-r-sm);
  padding:1rem 1.2rem;box-shadow:var(--ss-ombre-1);
}
.ss-faq summary{
  cursor:pointer;font-weight:700;color:var(--ss-encre);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.ss-faq summary::-webkit-details-marker{display:none;}
.ss-faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--ss-bleu);font-weight:700;}
.ss-faq details[open] summary::after{content:"–";}
.ss-faq details p{margin:.75rem 0 0;color:var(--ss-texte-doux);}

/* ---------- bande d'appel à l'action ---------- */
.ss-appel{
  background:linear-gradient(135deg,var(--ss-nuit-900),var(--ss-nuit-600) 60%,#173a7d);
  color:var(--ss-blanc);text-align:center;
}
.ss-appel .ss-titre{color:var(--ss-blanc);}
.ss-appel p{color:var(--ss-texte-nuit-doux);}

/* ---------- confiance ---------- */
.ss-confiance{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--ss-texte-doux);}
.ss-confiance span{display:inline-flex;align-items:center;gap:.4rem;}
.ss-confiance b{color:var(--ss-succes);}
.ss-nuit .ss-confiance,.ss-nuit-degrade .ss-confiance,.ss-appel .ss-confiance{color:var(--ss-texte-nuit-doux);}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .ss-grille-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-grille-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-etapes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ss-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .ss-cadre{width:min(var(--ss-large),100% - 1.75rem);}
  .ss-grille-2,.ss-grille-3,.ss-grille-4,.ss-etapes{grid-template-columns:1fr;}
  .ss-boutons{flex-direction:column;align-items:stretch;}
  .ss-boutons .ss-btn{width:100%;}
  .ss-titre-hero{font-size:clamp(1.9rem,8vw,2.5rem);}
}
@media (prefers-reduced-motion:reduce){
  .ss *{animation:none!important;transition:none!important;}
  .ss-btn:hover,a.ss-carte:hover{transform:none!important;}
}