/* ---------------------------------------------------------------
   Accueil et « Ce que fait Skynium » (services.html).
   Sortis de la page (plus de <style> en ligne : prêt pour une CSP
   style-src 'self').
   Le rose (#FA5DFF) et l'orange (#FF8A3F) de la charte plafonnent à
   2,5:1 et 2,3:1 sur le fond clair : ils sont inutilisables comme
   couleur de texte. Ils servent donc de fond ou d'accent, avec le
   violet par-dessus (6,3:1 et 7,0:1), et tout le texte reste en
   violet ou en gris foncé.
   --------------------------------------------------------------- */

.accueil-sec { padding: 4rem 5%; max-width: var(--container-width); margin: 0 auto; }
.accueil-titre {
    text-align: center;
    color: var(--primary);
    font-size: 2rem;
    margin: 0 0 1rem;
}
.accueil-titre::after {
    content: '';
    display: block;
    width: 64px; height: 4px;
    background: var(--tertiary);
    border-radius: 999px;
    margin: .9rem auto 0;
}
.accueil-intro {
    text-align: center;
    color: var(--text-color);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 660px;
    margin: 0 auto 2.5rem;
}

/* ---- Boutons ---- */
.btn-sky {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 15px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
    border: 2px solid var(--primary);
}
.btn-sky--plein { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(29,4,105,.18); }
.btn-sky--plein:hover { background: #2d0a9e; color: #fff; transform: translateY(-3px); }
.btn-sky--vide { background: var(--white); color: var(--primary); }
.btn-sky--vide:hover { background: var(--bg-color); color: var(--primary); transform: translateY(-3px); }
.btn-sky--clair { background: var(--white); color: var(--primary); border-color: var(--white); }
.btn-sky--clair:hover { background: #f0f0f7; color: var(--primary); }

/* ---- Héro ---- */
#accueil-hero { padding: 4rem 5% 3rem; }
.hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
#accueil-hero h1 {
    color: var(--primary);
    font-size: 2.7rem;
    line-height: 1.15;
    margin: 0 0 1.2rem;
}
.hero-chapo { font-size: 1.25rem; color: var(--text-color); line-height: 1.7; margin: 0 auto 1.6rem; max-width: 660px; }
.hero-promesse {
    display: inline-flex; align-items: flex-start; gap: .7rem;
    text-align: left;
    background: var(--white);
    border: 2px solid #eee;
    border-left: 5px solid var(--tertiary);
    border-radius: 12px;
    padding: 1rem 1.3rem;
    max-width: 620px;
    margin: 0 auto 2rem;
    color: #555;
    line-height: 1.65;
}
.hero-promesse i { color: var(--primary); font-size: 1.2rem; margin-top: .15rem; }
.hero-promesse strong { color: var(--primary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hero-horaires { margin-top: 1.4rem; color: #666; font-size: .95rem; line-height: 1.6; }
.hero-horaires a { color: var(--primary); }

/* ---- Cartes (services, activités) ---- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.8rem;
}
/* Quatre cartes : deux par ligne plutôt que trois puis une. */
@media (min-width: 640px) {
    .services-grid--quatre { grid-template-columns: repeat(2, 1fr); }
}
.service-carte {
    display: block;
    background: var(--white);
    border-radius: 18px;
    border-top: 5px solid #eee;
    padding: 2rem 1.6rem;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.04);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
a.service-carte:hover, a.service-carte:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(29,4,105,.10);
    border-top-color: var(--tertiary);
}
.service-carte--accent { border-top-color: var(--tertiary); }
.service-carte > i { font-size: 2.2rem; color: var(--primary); margin-bottom: 1rem; display: block; }
.service-carte h3 { color: var(--primary); font-size: 1.25rem; margin: 0 0 .7rem; }
.service-carte p { color: var(--text-color); line-height: 1.65; margin: 0; font-size: .98rem; }
.service-carte strong { color: var(--primary); }
.service-carte .carte-lien {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: 1rem;
    color: var(--primary);
    font-weight: 700;
    font-size: .95rem;
}

/* ---- Comment ça se passe (étapes) ---- */
.etapes-accueil {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
    counter-reset: etape;
}
.etapes-accueil li {
    counter-increment: etape;
    background: var(--white);
    border-radius: 18px;
    padding: 2rem 1.6rem 1.8rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.04);
    position: relative;
}
.etapes-accueil li::before {
    content: counter(etape);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tertiary);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.etapes-accueil h3 { color: var(--primary); font-size: 1.2rem; margin: 0 0 .6rem; }
.etapes-accueil p { color: var(--text-color); line-height: 1.65; margin: 0; }

/* ---- Promesses ---- */
.accueil-promesses { background: var(--primary); color: #fff; padding: 3.5rem 5%; margin: 2rem 0; }
.promesses-inner { max-width: var(--container-width); margin: 0 auto; }
.accueil-promesses h2 { color: #fff; text-align: center; font-size: 1.8rem; margin: 0 0 2.5rem; }
.promesses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.promesses-grid > div { text-align: center; }
.promesses-grid i { font-size: 1.9rem; color: var(--tertiary); margin-bottom: .9rem; display: block; }
.promesses-grid h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .6rem; }
.promesses-grid p { color: rgba(255,255,255,.88); line-height: 1.7; margin: 0; font-size: .98rem; }

/* ---- PETAL ---- */
.accueil-petal { padding-top: 2rem; }
.petal-inner {
    background: linear-gradient(135deg, rgba(250,93,255,.08), rgba(255,138,63,.06));
    border-radius: 22px;
    padding: 3rem 2.5rem;
}
.petal-texte { max-width: 700px; margin: 0 auto; text-align: center; }
.petal-texte h2 { color: var(--primary); font-size: 1.8rem; margin: 0 0 1rem; }
.petal-texte p { color: var(--text-color); line-height: 1.75; margin: 0 0 1rem; font-size: 1.05rem; }
.petal-texte strong { color: var(--primary); }
.petal-texte .btn-sky { margin-top: .8rem; }

/* ---- « Skynium, c'est aussi… » ---- */
.accueil-aussi { text-align: center; }
.aussi-inner {
    max-width: 860px; margin: 0 auto;
    background: var(--white);
    border: 2px solid #eee;
    border-radius: 22px;
    padding: 2.8rem 2.2rem;
}
.aussi-inner h2 { color: var(--primary); font-size: 1.8rem; margin: 0 0 1rem; }
.aussi-inner > p { color: var(--text-color); font-size: 1.05rem; line-height: 1.75; margin: 0 auto 1.6rem; max-width: 660px; }

/* ---- Appel final ---- */
.accueil-final { background: var(--primary); color: #fff; text-align: center; padding: 4rem 5%; }
.accueil-final h2 { color: #fff; font-size: 1.9rem; margin: 0 0 1rem; }
.accueil-final p { color: rgba(255,255,255,.88); font-size: 1.08rem; line-height: 1.75; max-width: 620px; margin: 0 auto 2rem; }
.final-note { font-size: .95rem !important; margin: 1.6rem auto 0 !important; }

/* ---- Services : blocs ---- */
.services-bloc { scroll-margin-top: 90px; }
.services-bloc + .services-bloc { padding-top: 1rem; }
.services-note {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1rem 1.3rem;
    border-left: 5px solid var(--tertiary);
    background: var(--white);
    border-radius: 12px;
    color: #555;
    line-height: 1.65;
}
.services-note strong { color: var(--primary); }

@media (max-width: 760px) {
    #accueil-hero h1 { font-size: 2rem; }
    .hero-chapo { font-size: 1.1rem; }
    .accueil-titre, .accueil-final h2, .petal-texte h2, .aussi-inner h2 { font-size: 1.55rem; }
    .petal-inner, .aussi-inner { padding: 2rem 1.3rem; }
    .btn-sky { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-sky, .service-carte { transition: none; }
    .btn-sky:hover, a.service-carte:hover { transform: none; }
}

/* Mode sombre du panneau d'accessibilité : --white y devient le fond des
   cartes et --text-color le texte clair ; restent le violet des titres
   (trop sombre sur fond sombre) et les gris codés en dur. */
body.dark-mode #accueil-hero h1,
body.dark-mode .accueil-titre,
body.dark-mode .hero-promesse strong,
body.dark-mode .hero-promesse i,
body.dark-mode .hero-horaires a,
body.dark-mode .service-carte > i,
body.dark-mode .service-carte h3,
body.dark-mode .service-carte strong,
body.dark-mode .service-carte .carte-lien,
body.dark-mode .etapes-accueil h3,
body.dark-mode .petal-texte h2,
body.dark-mode .petal-texte strong,
body.dark-mode .aussi-inner h2,
body.dark-mode .services-note strong,
body.dark-mode .btn-sky--vide,
body.dark-mode .btn-sky--clair { color: #cdbfff; }
body.dark-mode .btn-sky--vide { border-color: #cdbfff; }
body.dark-mode .hero-promesse,
body.dark-mode .aussi-inner { border-color: #3a3a4f; }
body.dark-mode .hero-promesse,
body.dark-mode .hero-horaires,
body.dark-mode .services-note { color: #e6e6ef; }

/* Lien sur le bandeau violet de fin de page. */
.accueil-final a.lien-clair { color: #fff; text-decoration: underline; }