/* Guides d'installation (assets/js/guide-installation.js) : une frise
   verticale, une étape par ligne, chaque capture dans un cadre de même
   taille pour que la suite se lise d'un coup d'œil. */
.guide{max-width:980px;color:var(--dark)}
.guide-resume{margin:0 0 30px;font-size:15px;font-weight:800;color:#4a5b5c}

.guide-etapes{margin:0;padding:0;list-style:none}
.guide-etape{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.05fr);gap:0 28px;align-items:start;padding:0 0 40px}
/* Le trait qui relie les numéros. */
.guide-etape:before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:rgba(14,41,44,.14)}
.guide-numero{align-self:start;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--dark);color:var(--lime);font-size:24px;font-weight:900;line-height:1;position:relative;z-index:1}
.guide-etape.facultative .guide-numero{background:var(--white);color:var(--dark);border:2px dashed rgba(14,41,44,.35)}

.guide-texte{padding-top:13px}
.guide-texte h3{margin:0 0 8px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.guide-texte p{margin:0;font-size:16px;line-height:1.55;color:#3d4f50}
.guide-facultatif{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:20px;background:rgba(14,41,44,.08);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;color:#4a5b5c}
.guide-alerte,.guide-piege{margin-top:12px!important;padding:10px 13px;border-radius:10px;font-size:14px!important}
.guide-alerte{background:#ffd2ca;color:#74382f!important}
.guide-piege{background:rgba(14,41,44,.06)}

.guide-capture{display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:16px;border:1px solid rgba(14,41,44,.12);border-radius:16px;background:#fff;cursor:zoom-in}
.guide-capture img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;display:block}

.guide-fin{display:grid;grid-template-columns:56px 1fr;gap:28px;align-items:center}
.guide-fin .guide-numero{background:var(--lime);color:var(--dark)}
.guide-fin p{margin:0;font-size:16px;line-height:1.55}

.guide-questions{margin-top:44px;padding-top:26px;border-top:1px solid rgba(14,41,44,.12)}
.guide-questions details{border-bottom:1px solid rgba(14,41,44,.12)}
.guide-questions summary{padding:15px 0;font-size:16px;font-weight:800;cursor:pointer}
.guide-questions details p{margin:0 0 16px;font-size:15px;line-height:1.6;color:#3d4f50}
.guide-questions a{font-weight:700;text-decoration:underline}
.guide-contact{margin:20px 0 0;font-size:15px;color:#3d4f50}

.guide-voile{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(14,41,44,.85);cursor:zoom-out}
.guide-voile[hidden]{display:none}
.guide-voile img{max-width:min(92vw,760px);max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}

/* Le lien vers l'autre système, sous le titre de la page. */
.guide-autre-systeme{margin-top:16px;font-size:14px;color:#b7ccca}
.guide-autre-systeme a{color:var(--lime);font-weight:800;text-decoration:underline}

@media(max-width:760px){
  .guide-etape{grid-template-columns:44px minmax(0,1fr);gap:14px 16px;padding-bottom:30px}
  .guide-etape:before{left:21px;top:44px}
  .guide-numero{width:44px;height:44px;font-size:19px}
  .guide-texte{padding-top:9px}
  .guide-texte h3{font-size:19px}
  .guide-capture{grid-column:2;aspect-ratio:auto;max-height:340px}
  .guide-capture img{max-height:300px}
  .guide-fin{grid-template-columns:44px 1fr;gap:16px}
}

/* En-tête des pages d'aide : une seule colonne, plus courte. */
.guide-hero{grid-template-columns:1fr;padding-bottom:50px}
.guide-section{padding:60px 0 80px}

/* Un temps du guide (« Pendant le téléchargement », « Au premier
   lancement »), posé sur la frise entre deux étapes. */
.guide-moment{position:relative;margin:0 0 26px;padding:0 0 0 84px;font-size:13px;color:#4a5b5c}
.guide-moment:before{content:"";position:absolute;left:27px;top:-2px;bottom:-28px;width:2px;background:rgba(14,41,44,.14)}
.guide-moment:first-child:before{top:50%}
.guide-moment span{display:inline-block;margin-right:6px;padding:6px 12px;border-radius:20px;background:var(--dark);color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.guide-moment em{font-style:normal}
@media(max-width:760px){
  .guide-moment{padding-left:60px}
  .guide-moment:before{left:21px}
}

/* Page Aide (aide.html) : une tuile par besoin. */
.aide-groupe{margin:0 0 16px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#4a5b5c}
.aide-groupe:not(:first-child){margin-top:44px}
.aide-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.aide-tuiles-deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.aide-tuile{position:relative;display:grid;align-content:start;gap:8px;min-height:170px;padding:24px 24px 50px;border:1px solid rgba(14,41,44,.14);border-radius:18px;background:#fff;color:var(--dark);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.aide-tuile:hover{border-color:var(--dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,41,44,.09)}
.aide-icone{width:40px;height:40px;margin-bottom:6px;color:var(--dark)}
.aide-tuile strong{font-size:21px;letter-spacing:-.02em}
.aide-tuile span:not(.aide-fleche){font-size:15px;line-height:1.5;color:#4a5b5c}
.aide-fleche{position:absolute;right:22px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);font-weight:900}
@media(max-width:760px){.aide-tuiles,.aide-tuiles-deux{grid-template-columns:1fr}.aide-tuile{min-height:0}}

/* Questions fréquentes de la page Aide, rangées par thème. */
.aide-faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.aide-faq h3{margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--dark);font-size:18px}
.aide-faq details{border-bottom:1px solid rgba(14,41,44,.12)}
.aide-faq summary{padding:14px 0;font-size:15.5px;font-weight:800;line-height:1.35;cursor:pointer}
.aide-faq details p{margin:0 0 16px;font-size:15px;line-height:1.6;color:#3d4f50}
.aide-faq a{font-weight:700;text-decoration:underline}
#questions{scroll-margin-top:110px}
@media(max-width:900px){.aide-faq{grid-template-columns:1fr;gap:34px}}