/* Page d'accueil (main/index.html) : porte d'entree vers les deux parcours.
   Fichier propre a cette page : les styles compiles du site (bundles) ne sont pas recompiles.
   Couleurs : uniquement celles du site ($color-* de web/frontend/style/sass/_settings.colors.scss).
   Bandeau : le bandeau commun du site (frags/header_landing.html), comme particuliers et hypnotherapeutes. */

.accueil {
    width: 100%;               /* main est un flex en colonne (docs/CONNAISSANCES.md) */
    --vert-profond: #2D4F48;   /* vague la plus sombre de illu__waves.png */
    --vert: #3E655C;           /* $color-bg-shade-4 */
    --vert-eau: #426E64;
    --sauge: #84B296;          /* $color-bg-shade-2 */
    --olive-clair: #7F9477;
    --creme: #F6E9D4;          /* $color-bg */
    --beige: #EEDDC2;          /* $color-bg-nude */
    --beige-soutenu: #E5CBA0;  /* $color-bg-dark */
    --terracotta: #C95932;     /* $color-primary */
    --texte: #112B26;          /* $color-text */
    --texte-doux: #3B4A46;
    --rayon: 28px;
}

/* ---------- 1. Sous-titre, sous le bandeau commun (comme la phrase d'accroche de la page particuliers) ---------- */
.accueil-sous-titre {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--texte);
}

/* ---------- 3. Les deux portes d'entree ---------- */
.accueil-parcours {
    position: relative;
    z-index: 2;
    padding: 84px 0 0;   /* place des icones posees sur les cartes */
}
.accueil-parcours__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
}
.accueil-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 62px 40px 34px;  /* place de l'icone posee sur le bord haut */
    border-radius: var(--rayon);
    border: 1px solid rgba(17, 43, 38, .08);
    box-shadow: 0 18px 40px -24px rgba(17, 43, 38, .35);
    /* courbe organique discrete dans le coin (en fond : la carte ne coupe pas son icone) */
    background-image: radial-gradient(circle at 100% 100%, transparent 128px, rgba(255, 255, 255, .16) 129px, rgba(255, 255, 255, .16) 130px, transparent 131px);
}
/* Couleurs des cartes : bleu canard pour les deux (choix de Laetitia), texte blanc. */
.accueil-carte { background-color: var(--carte-fond); color: var(--carte-encre); }
.accueil-carte--pro, .accueil-carte--particulier { --carte-fond: #3E655C; --carte-encre: #fff; --carte-encre-douce: rgba(255, 255, 255, .9); }   /* « bleu canard », choix de Laetitia */

/* Icone 3D du site sur un rond beige clair, a cheval sur le bord haut, cote exterieur (comme les 4 blocs). */
.accueil-carte__picto {
    position: absolute;
    top: -38px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FBF6EE;
    box-shadow: 0 10px 24px -12px rgba(17, 43, 38, .45);
    display: grid;
    place-items: center;
    animation: accueil-flotte 4s ease-in-out infinite;
}
.accueil-carte--pro .accueil-carte__picto { left: 32px; }
.accueil-carte--particulier .accueil-carte__picto { right: 32px; animation-delay: -2s; }
.accueil-carte__picto img { width: 84px; height: 84px; object-fit: contain; }   /* l'image a une marge transparente */
@keyframes accueil-flotte {
    50% { transform: translateY(-6px); }
}

.accueil-carte__titre {
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
    line-height: 1.2;
    font-weight: 700;
    color: #fff;                /* titres en blanc sur les deux cartes (choix de Laetitia) */
    margin: 4px 0 0;
}
.accueil-carte__texte {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.accueil-carte__texte { color: var(--carte-encre-douce); }

.accueil-carte .btn {
    align-self: flex-start;
    margin-top: 10px;
}
/* La fleche suit le sens de la carte : vers la gauche pour la carte de gauche, vers la droite pour celle de droite. */
.accueil-carte .btn svg { transition: transform .2s ease; }
.accueil-carte--pro .btn svg { transform: scaleX(-1); }
.accueil-carte--particulier .btn:hover svg,
.accueil-carte--particulier .btn:focus-visible svg { transform: translateX(4px); }
.accueil-carte--pro .btn:hover svg,
.accueil-carte--pro .btn:focus-visible svg { transform: translateX(-4px) scaleX(-1); }
.accueil-carte .btn:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 3px;
}
.accueil-carte .btn:focus-visible { outline-color: var(--beige); }

/* ---------- 4. Phrase de positionnement ---------- */
.accueil-positionnement {
    max-width: 640px;
    margin: 56px auto 0;
    padding: 0 24px;
    text-align: center;
    font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
    line-height: 1.5;
    font-weight: 600;
    color: var(--vert);
}
.accueil-positionnement svg {
    display: block;
    width: 120px;
    height: 14px;
    margin: 0 auto 14px;
    color: var(--terracotta);
}

/* ---------- 5. Les 4 blocs, apres les parcours ---------- */
.accueil .section--perks {
    margin-top: 76px;
    padding-top: 30px;
    padding-bottom: 72px;
}
.accueil .section--perks::after { height: calc(100% - 10px); }
.accueil .perks__list { gap: 56px 24px; }
.accueil .perk__item .box {
    border-radius: var(--rayon);
    padding: 52px 22px 24px;
}
.accueil .perk__item .title--card { font-size: 1.1rem; margin-bottom: 6px; }
.accueil .perk__item p { font-size: .95rem; line-height: 1.5; }
.accueil .perk__img { width: 72px; top: -38px; }
.accueil .perk__item:nth-child(4) .box { background-color: #4C4E36; }   /* « Pensé pour chacun » en kaki, comme « Personnalisation avancée » : le bleu canard est pris par les cartes */

/* ---------- Tablette et mobile ---------- */
@media (max-width: 900px) {
    .accueil-carte { padding: 58px 28px 28px; }
}
@media (max-width: 760px) {
    .accueil-parcours { padding-top: 64px; }
    .accueil-parcours__grille { grid-template-columns: 1fr; gap: 56px; padding: 0 16px; }
    .accueil-carte .btn { align-self: stretch; }
    /* Texte long sur 2 lignes : centre, la fleche suit le texte comme un mot (en flex, elle restait au bord). */
    .accueil-carte .btn { display: block; text-align: center; }
    .accueil-carte .btn span { display: inline; }
    .accueil-carte .btn svg { display: inline-block; vertical-align: -2px; margin: 0 6px; }
    .accueil-positionnement { margin-top: 44px; }
    .accueil .section--perks { margin-top: 64px; }
}
@media (max-width: 450px) {
    .accueil-sous-titre { padding: 0 16px; }
    .accueil-carte { padding: 54px 22px 24px; }
}

/* ---------- Mouvement reduit : aucune animation ---------- */
@media (prefers-reduced-motion: reduce) {
    .accueil .header__spiral .spirale__img, .accueil .header__spiral::after,
    .accueil .perk__img { animation: none !important; }
    .accueil-carte__picto { animation: none !important; }
    .accueil-carte .btn svg { transition: none; }
}