/* Le site helios-system.tech : mêmes couleurs et polices que Julien. */
:root{
  --creme:#f4f1ea; --creme-2:#eeeae1; --surface:#ffffff;
  --encre:#1f2e4a; --encre-douce:#4a5a75; --encre-pale:#5a6577;
  --cuivre:#b5793c; --cuivre-fond:#f6eadb; --ligne:#e3ddd1;
  /* Le cuivre pour du TEXTE (contraste 4,5:1 au moins) et le bord des champs (3:1). */
  --cuivre-texte:#8a5a26; --ligne-champ:#857b6a;
  --bouton-fond:#1f2e4a; --bouton-texte:#f4f1ea;
  --ombre:0 1px 2px rgba(31,46,74,.04),0 10px 30px rgba(31,46,74,.07);
  --rond:18px;
  --titre:"Jost","Segoe UI",system-ui,sans-serif;
  --texte:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --creme:#111827; --creme-2:#0d1420; --surface:#1b2538;
    --encre:#ece7dc; --encre-douce:#b4bccb; --encre-pale:#8f99ab;
    --cuivre:#d39a5f; --cuivre-fond:#3a2f25; --ligne:#2b3650;
    --cuivre-texte:#d39a5f; --ligne-champ:#7886a6;
    --bouton-fond:#ece7dc; --bouton-texte:#111827;
    --ombre:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.55}
a{color:inherit}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--cuivre);outline-offset:3px;border-radius:6px}
.page{max-width:1120px;margin:0 auto;padding:24px 16px 56px}

header.haut{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none}
.marque .logo{width:34px;height:34px;color:var(--encre)}
.logo .anneau{stroke:var(--cuivre)}
.marque b{font-family:var(--titre);font-weight:400;font-size:28px}
.haut nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.haut nav a{font-size:15.5px;color:var(--encre-douce);text-decoration:none}
.haut nav a:hover{color:var(--cuivre-texte)}
.haut nav a.bouton-nav{color:var(--encre);border:1px solid var(--ligne);border-radius:99px;padding:7px 16px;background:var(--surface)}

.une{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;margin:56px 0 24px}
/* L'annonce de l'ouverture : une pastille au-dessus du titre. */
.lancement{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 14px;border-radius:99px;
  background:var(--cuivre-fond);color:var(--cuivre-texte);font-size:14px;font-weight:600;line-height:1.3}
.lancement::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cuivre);flex:none}
.sur-titre{margin:0 0 12px;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cuivre-texte);font-weight:600}
.une h1{font-family:var(--titre);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.08;margin:0 0 18px;letter-spacing:-.01em}
.chapo{margin:0 0 26px;font-size:19px;color:var(--encre-douce)}
.gestes{display:flex;flex-wrap:wrap;gap:12px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:99px;
  background:var(--bouton-fond);color:var(--bouton-texte);text-decoration:none;font-weight:600}
.bouton.second{background:transparent;color:var(--encre);border:1px solid var(--ligne)}
.mention{margin:16px 0 0;font-size:14.5px;color:var(--encre-pale)}
.une-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--rond);background:var(--creme-2);
  box-shadow:var(--ombre);border:1px solid var(--ligne)}
.legende-video{margin:10px 2px 0;font-size:14px;color:var(--encre-pale)}

section.bloc{margin-top:72px;scroll-margin-top:16px}
section.bloc h2{font-family:var(--titre);font-weight:400;font-size:clamp(26px,3.6vw,34px);margin:0 0 20px}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rond);padding:22px 22px 20px;box-shadow:var(--ombre)}
.carte .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--cuivre-fond);color:var(--cuivre);margin-bottom:12px}
.carte .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.carte h3{font-family:var(--titre);font-weight:500;font-size:20px;margin:0 0 6px}
.carte p{margin:0;color:var(--encre-douce);font-size:16px}

.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.etapes li{counter-increment:e;border-top:2px solid var(--cuivre);padding-top:14px}
.etapes li::before{content:counter(e);font-family:var(--titre);font-size:30px;color:var(--cuivre);display:block;line-height:1;margin-bottom:8px}
.etapes b{display:block;font-size:18px;margin-bottom:4px}
.etapes span{color:var(--encre-douce);font-size:16px}

.profils{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.profils article{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rond);padding:22px;display:flex;flex-direction:column}
.profils h3{font-family:var(--titre);font-weight:500;font-size:22px;margin:0 0 6px}
.profils p{margin:0 0 14px;color:var(--encre-douce);font-size:16px}
.profils a{margin-top:auto;color:var(--cuivre-texte);font-weight:600;text-decoration:none}
.profils a:hover{text-decoration:underline}

.confiance ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:4px 32px}
.confiance li{padding:14px 0;border-bottom:1px solid var(--ligne);color:var(--encre-douce);font-size:16px}
.confiance li b{display:block;color:var(--encre);font-size:17px}

.appareils{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.appareils a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rond);padding:20px 22px}
.appareils a:hover{border-color:var(--cuivre)}
.appareils b{display:block;font-family:var(--titre);font-weight:500;font-size:21px}
.appareils span{color:var(--encre-douce);font-size:15.5px}

details{border-bottom:1px solid var(--ligne);padding:14px 0}
summary{cursor:pointer;font-weight:600;font-size:17px}
details p{margin:10px 0 0;color:var(--encre-douce)}

/* Page « Télécharger » */
.titre-page{margin:52px 0 8px;font-family:var(--titre);font-weight:400;font-size:clamp(32px,5vw,46px);line-height:1.1}
.intro{margin:0 0 8px;font-size:18.5px;color:var(--encre-douce);max-width:720px}
.appareil{margin-top:40px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rond);padding:26px 26px 24px;box-shadow:var(--ombre);scroll-margin-top:16px}
.appareil h2{font-family:var(--titre);font-weight:500;font-size:26px;margin:0 0 4px}
.appareil .etat{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--cuivre-texte);background:var(--cuivre-fond);border-radius:99px;padding:3px 12px;margin-bottom:12px}
.appareil p{margin:0 0 12px;color:var(--encre-douce)}
.appareil ol{margin:6px 0 16px;padding-left:22px;color:var(--encre-douce)}
.appareil ol li{margin:6px 0}
.appareil kbd{font-family:var(--texte);font-weight:600;color:var(--encre);background:var(--creme);border:1px solid var(--ligne);border-radius:6px;padding:0 6px}

/* 28/10 : accueil des particuliers, page des pros, outil gratuit, demande d'invitation */
.haut nav a.bouton-nav.plein{background:var(--bouton-fond);color:var(--bouton-texte);border-color:var(--bouton-fond)}
.haut nav a[aria-current="page"]{color:var(--encre);font-weight:600}
.encadre{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rond);padding:26px;box-shadow:var(--ombre)}
.encadre.cuivre{background:var(--cuivre-fond);border-color:transparent;box-shadow:none}
.encadre h2,.encadre h3{margin-top:0}
.deux{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.cartes.par-deux,.confiance.par-deux ul{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.liste-sobre{list-style:none;margin:0;padding:0}
.liste-sobre li{padding:10px 0 10px 28px;position:relative;color:var(--encre-douce)}
.liste-sobre li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:2px;background:var(--cuivre)}
.liste-sobre li b{color:var(--encre)}
.prix-grand{font-family:var(--titre);font-size:44px;line-height:1;margin:6px 0 4px}
.prix-grand small{font-size:17px;color:var(--encre-douce);font-family:var(--texte)}
.lien-fleche{color:var(--cuivre-texte);font-weight:600;text-decoration:none}
.lien-fleche:hover{text-decoration:underline}

.formulaire{display:grid;gap:16px;max-width:620px}
.champ label,.champ legend{display:block;font-weight:600;margin-bottom:6px}
.champ .aide{display:block;font-size:14.5px;color:var(--encre-pale);margin-top:5px}
.champ input[type=text],.champ input[type=email],.champ input[type=date],.champ input[type=number],
.champ select,.champ textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--ligne-champ);
  background:var(--surface);color:var(--encre);font:inherit}
.champ textarea{min-height:110px;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:3px solid var(--cuivre);outline-offset:1px}
.champ fieldset{border:0;margin:0;padding:0}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{display:inline-flex;align-items:center;gap:8px;font-weight:400;margin:0;min-height:46px;padding:0 16px;
  border:1px solid var(--ligne-champ);border-radius:99px;background:var(--surface);cursor:pointer}
.choix input{accent-color:var(--cuivre);width:18px;height:18px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cache{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formulaire button{justify-self:start;min-height:50px;padding:0 26px;border-radius:99px;border:0;cursor:pointer;
  background:var(--bouton-fond);color:var(--bouton-texte);font:inherit;font-weight:600}
.formulaire button[disabled]{opacity:.6;cursor:wait}
.erreur{color:#b3261e;font-weight:600;margin:0}
@media (prefers-color-scheme: dark){ .erreur{color:#f2b8b5} }
.resultat{margin-top:24px}
.resultat .date-cle{font-family:var(--titre);font-size:clamp(26px,4vw,34px);line-height:1.15;margin:4px 0 8px}
.resultat .note{font-size:15px;color:var(--encre-douce);margin:10px 0 0}
.petit{font-size:14.5px;color:var(--encre-pale)}

@media (max-width:860px){ .deux{grid-template-columns:1fr} }
@media (max-width:520px){ .duo{grid-template-columns:1fr} .formulaire button{justify-self:stretch} }

footer{margin-top:72px;padding-top:20px;border-top:1px solid var(--ligne);font-size:14px;color:var(--encre-pale);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:var(--encre-douce)}

@media (max-width:860px){
  .une{grid-template-columns:1fr;margin-top:36px;gap:28px}
  section.bloc{margin-top:56px}
}
@media (max-width:520px){
  .haut nav a:not(.bouton-nav){font-size:15px}
  .gestes .bouton{flex:1 1 100%}
}