/**
 * ================================================================
 * FICHIER : Home.css
 * EMPLACEMENT : 2027_B2B/pages/Home/Home.css
 * SHORT_DESC : Styles de la page d'accueil de lancement (plan stratégique §4.3)
 * DESCRIPTION : Héros, bande de confiance, bento des six pôles, réalisations, méthode, offres
 *               d'entrée, portrait, témoignages, articles, FAQ et appel final. Jetons du thème
 *               uniquement (clair / sombre / quatre thèmes), grille fluide, rayons 2 px.
 *               Les anciens styles du chantier sont conservés dans pages/Chantier/Chantier.css.
 *
 * SOMMAIRE :
 *   - COMMUN_SECTIONS
 *   - HERO_ACCUEIL
 *   - BANDE_CONFIANCE
 *   - BENTO_POLES
 *   - REALISATIONS_UNE
 *   - METHODE_ACCUEIL
 *   - OFFRES_ENTREE
 *   - PORTRAIT_AGENCE
 *   - TEMOIGNAGES
 *   - ARTICLES_RECENTS
 *   - FAQ_ACCUEIL
 *   - CTA_FINAL
 *   - RESPONSIVE
 *   - HEROS_IMMERSIF      : Nouveau héros plein écran (A.35)
 *   - MANIFESTE_DEFILEMENT : Conviction allumée mot à mot au défilement
 *   - SPLASH_MOBILE       : Écran de lancement mobile
 *   - HEROS_RESPONSIVE    : Adaptations mobile du héros, du manifeste
 *
 * MODIFICATIONS :
 *   - 07/10/2026 21:21 : Voile crème du héros effacé au fil du défilement en mode clair, accroche « Le visuel attire. » de nouveau en blanc sur la photo assombrie (Dialogue n° 21 et 22) — A VALIDER PAR JaxX
 *   - 07/10/2026 21:13 : Accroche « Le visuel attire. » en encre sombre en mode clair (blanc sur voile crème illisible, Dialogue n° 21 et 22 de JaxX) — A VALIDER PAR JaxX
 *   - 07/10/2026 19:47 : Plan avant (téléphone) réduit et remonté sur mobile pour libérer le sur-titre (A.35) — A VALIDER PAR JaxX
 *   - 07/10/2026 19:44 : Héros mobile allégé (titre réduit, promesse masquée, boutons compacts), voile renforcé en mode clair (A.35) — A VALIDER PAR JaxX
 *   - 07/10/2026 19:39 : Héros immersif, manifeste au défilement, splash mobile (demande de JaxX A.35) ; styles .home_hero_* conservés — A VALIDER PAR JaxX
 *   - 06/10/2026 13:50 : Couleur des numéros, métas et survols : var(--accent) au lieu de var(--accent_texte) (blanc, invisible en mode clair) — A VALIDER PAR JaxX
 *   - 06/10/2026 13:44 : Réécriture complète pour l'accueil de lancement — A VALIDER PAR JaxX
 *   - 06/10/2026 05:05 : Création (accueil provisoire, conservée dans pages/Chantier) — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* COMMUN_SECTIONS ===================================================== */
.home_section
{
    padding: clamp(64px, 9vw, 128px) 0;
    border-top: 1px solid var(--ligne);
}

.home_entete
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin: 0 0 clamp(32px, 4vw, 56px) 0;
}

.home_entete h2
{
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--encre);
}

.home_entete_texte
{
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.6;
    color: var(--encre_second);
    margin: 0;
    max-width: 60ch;
}

.home_entete_ligne
{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    max-width: none;
    gap: 24px;
}

.home_entete_ligne > div
{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home_section_pied
{
    margin: clamp(28px, 3vw, 40px) 0 0 0;
    color: var(--encre_second);
}
/* COMMUN_SECTIONS ===================================================== */

/* HERO_ACCUEIL ======================================================== */
.home_hero
{
    position: relative;
    padding: clamp(48px, 7vw, 112px) 0 clamp(48px, 6vw, 96px) 0;
    overflow: hidden;
}

.home_hero_grille
{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.home_hero_texte
{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.home_hero_titre
{
    font-size: clamp(2.4rem, 4.3vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--encre);
    text-wrap: balance;
}

.home_hero_promesse
{
    font-size: clamp(1.08rem, 1.35vw, 1.3rem);
    line-height: 1.55;
    color: var(--encre_second);
    margin: 0;
    max-width: 52ch;
}

.home_hero_actions
{
    margin-top: 6px;
}

.home_hero_rassurance
{
    margin: 0;
    font-size: 0.86rem;
    color: var(--encre_attenuee);
    letter-spacing: 0.01em;
}

.home_hero_visuel
{
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: var(--ombre);
    isolation: isolate;
}

.home_hero_visuel picture,
.home_hero_visuel img
{
    display: block;
    width: 100%;
    height: 100%;
}

.home_hero_visuel picture
{
    overflow: hidden;
    border-radius: 2px;
}

/* Image débordante de 12 px : le décalage « souris » (transform inline du moteur) ne révèle jamais de bord */
.home_hero_visuel img
{
    object-fit: cover;
    width: calc(100% + 24px);
    max-width: none;
    height: calc(100% + 24px);
    margin: -12px;
}

.home_hero_halo
{
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle at 55% 45%, var(--accent_halo) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

/* Anneau discret (bouton power, barre vers le bas) : signature imperceptible de la marque */
.home_hero_anneau
{
    position: absolute;
    width: clamp(120px, 14vw, 200px);
    height: auto;
    right: -7%;
    top: -12%;
    color: var(--accent);
    opacity: 0.35;
    pointer-events: none;
    z-index: 2;
}

.home_telemetrie
{
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.74rem;
    color: var(--encre);
    background: color-mix(in srgb, var(--fond) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--ligne);
    border-radius: 2px;
}

.home_telemetrie_point
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: home_pulsation 2.4s var(--easing) infinite;
}

@keyframes home_pulsation
{
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* HERO_ACCUEIL ======================================================== */

/* BANDE_CONFIANCE ===================================================== */
.home_confiance
{
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
    background: var(--surface);
}

.home_confiance_liste
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home_confiance_item
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px clamp(12px, 2vw, 28px);
    border-left: 1px solid var(--ligne);
}

.home_confiance_item:first-child
{
    border-left: 0;
    padding-left: 0;
}

.home_confiance_fait sup
{
    line-height: 0;
}

.home_confiance_fait
{
    font-family: var(--police_titres);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--encre);
    letter-spacing: -0.01em;
}

.home_confiance_detail
{
    font-size: 0.86rem;
    color: var(--encre_attenuee);
}
/* BANDE_CONFIANCE ===================================================== */

/* BENTO_POLES ========================================================= */
.home_poles
{
    border-top: 0;
}

.home_bento
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
}

.home_bento_carte
{
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color var(--duree) var(--easing), transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}

.home_bento_carte:hover
{
    border-color: var(--ligne_forte);
    transform: translateY(-3px);
    box-shadow: var(--ombre);
}

.home_bento_large
{
    grid-column: span 2;
    flex-direction: row;
}

.home_bento_visuel
{
    flex: 0 0 44%;
    overflow: hidden;
    border-right: 1px solid var(--ligne);
}

.home_bento_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--easing);
}

.home_bento_carte:hover .home_bento_visuel img
{
    transform: scale(1.04);
}

.home_bento_corps
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(22px, 2.4vw, 32px);
    flex: 1 1 auto;
}

.home_bento_numero
{
    font-size: 0.78rem;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.home_bento_nom
{
    margin: 0;
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.home_bento_nom a
{
    color: var(--encre);
    text-decoration: none;
}

/* Toute la carte est cliquable, sans dupliquer les liens pour les lecteurs d'écran */
.home_bento_nom a::after
{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home_bento_phrase
{
    margin: 0;
    color: var(--encre_second);
    font-size: 0.96rem;
    line-height: 1.55;
}

.home_bento_prestations
{
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home_bento_prestations a,
.home_bento_lien
{
    position: relative;
    z-index: 1;
}

.home_bento_prestations a
{
    display: block;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--encre_second);
    text-decoration: none;
    border-bottom: 1px solid var(--ligne);
    transition: color var(--duree) var(--easing), padding-left var(--duree) var(--easing);
}

.home_bento_prestations a:hover,
.home_bento_prestations a:focus-visible
{
    color: var(--accent);
    padding-left: 6px;
}

.home_bento_lien
{
    margin-top: auto;
    padding-top: 8px;
    align-self: flex-start;
}
/* BENTO_POLES ========================================================= */

/* REALISATIONS_UNE ==================================================== */
.home_realisations_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
}

.home_real
{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home_real_lien
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.home_real_visuel
{
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--ligne);
    border-radius: 2px;
    background: var(--surface);
    margin-bottom: 6px;
}

.home_real_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.9s var(--easing), filter 0.6s var(--easing);
}

.home_real_lien:hover .home_real_visuel img,
.home_real_lien:focus-visible .home_real_visuel img
{
    transform: scale(1.035);
}

.home_real_meta
{
    font-size: 0.76rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home_real_nom
{
    font-family: var(--police_titres);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    color: var(--encre);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.home_real_lien:hover .home_real_nom
{
    color: var(--accent);
}

.home_real_resume
{
    color: var(--encre_second);
    line-height: 1.55;
    font-size: 0.96rem;
}

.home_real_resultat
{
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--ligne);
    font-size: 0.88rem;
    color: var(--encre_attenuee);
    line-height: 1.5;
}

.home_real_resultat_point
{
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-2px);
}
/* REALISATIONS_UNE ==================================================== */

/* METHODE_ACCUEIL ===================================================== */
.home_methode
{
    background: var(--surface);
}

.home_methode_liste
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
    counter-reset: none;
}

.home_methode_etape
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 28px;
    border-top: 1px solid var(--ligne_forte);
}

/* Trait d'accent qui se déploie à l'apparition de l'étape */
.home_methode_etape::before
{
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--easing) 0.2s;
}

.home_methode_etape.motion_visible::before
{
    transform: scaleX(1);
}

.home_methode_numero
{
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.home_methode_nom
{
    margin: 0;
    font-size: clamp(1.3rem, 1.7vw, 1.6rem);
    letter-spacing: -0.02em;
}

.home_methode_titre
{
    margin: 0;
    font-weight: 600;
    color: var(--encre);
    line-height: 1.4;
}

.home_methode_texte
{
    margin: 0;
    color: var(--encre_second);
    line-height: 1.6;
    font-size: 0.94rem;
}

.home_methode_delai
{
    margin: auto 0 0 0;
    padding-top: 8px;
    font-size: 0.76rem;
    color: var(--encre_attenuee);
    letter-spacing: 0.02em;
}
/* METHODE_ACCUEIL ===================================================== */

/* OFFRES_ENTREE ======================================================= */
.home_offres_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
}

.home_offre
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 2.6vw, 36px);
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    transition: border-color var(--duree) var(--easing), transform 0.5s var(--easing);
}

.home_offre:hover
{
    border-color: var(--ligne_forte);
    transform: translateY(-3px);
}

.home_offre_vedette
{
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent_halo), var(--ombre);
}

.home_offre_tete
{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.home_offre_mention
{
    color: var(--accent);
    text-transform: uppercase;
}

.home_offre_duree
{
    color: var(--encre_attenuee);
}

.home_offre_nom
{
    margin: 0;
    font-size: clamp(1.35rem, 1.8vw, 1.65rem);
    letter-spacing: -0.02em;
}

.home_offre_texte
{
    margin: 0 0 6px 0;
    color: var(--encre_second);
    line-height: 1.6;
    font-size: 0.96rem;
}

.home_offre_bouton
{
    margin-top: auto;
    align-self: flex-start;
}
/* OFFRES_ENTREE ======================================================= */

/* PORTRAIT_AGENCE ===================================================== */
.home_portrait_grille
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.home_portrait_figure
{
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--ligne);
    border-radius: 2px;
    background: var(--surface);
}

.home_portrait_figure img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home_portrait_texte
{
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 58ch;
}

.home_portrait_texte h2
{
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0;
}

.home_portrait_texte p
{
    margin: 0;
    color: var(--encre_second);
    line-height: 1.7;
}

.home_portrait_texte .home_portrait_signature
{
    color: var(--encre);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding-left: 14px;
    border-left: 2px solid var(--accent);
}

.home_portrait_texte .lien_accent
{
    align-self: flex-start;
}
/* PORTRAIT_AGENCE ===================================================== */

/* TEMOIGNAGES ========================================================= */
.home_temoignages_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
}

.home_temoignage
{
    margin: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: 2px;
}

.home_temoignage blockquote
{
    margin: 0 0 16px 0;
    line-height: 1.65;
    color: var(--encre);
}

.home_temoignage figcaption
{
    font-size: 0.86rem;
    color: var(--encre_attenuee);
}
/* TEMOIGNAGES ========================================================= */

/* ARTICLES_RECENTS ==================================================== */
.home_articles_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gouttiere, 24px);
}

.home_article_lien
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.home_article_visuel
{
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ligne);
    border-radius: 2px;
    margin-bottom: 6px;
}

.home_article_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--easing);
}

.home_article_lien:hover .home_article_visuel img
{
    transform: scale(1.035);
}

.home_article_meta
{
    font-size: 0.76rem;
    color: var(--accent);
    letter-spacing: 0.04em;
}

.home_article_titre
{
    font-family: var(--police_titres);
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--encre);
    letter-spacing: -0.015em;
}

.home_article_lien:hover .home_article_titre
{
    color: var(--accent);
}

.home_article_chapo
{
    color: var(--encre_second);
    font-size: 0.92rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ARTICLES_RECENTS ==================================================== */

/* FAQ_ACCUEIL ========================================================= */
.home_faq_grille
{
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.home_faq_grille .home_entete
{
    position: sticky;
    top: calc(var(--hauteur_header) + 32px);
    margin-bottom: 0;
}

.home_faq_liste
{
    border-top: 1px solid var(--ligne);
}

.home_faq_item
{
    border-bottom: 1px solid var(--ligne);
}

.home_faq_question
{
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    min-height: 48px;
    font-family: var(--police_titres);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    color: var(--encre);
    transition: color var(--duree) var(--easing);
}

.home_faq_question::-webkit-details-marker
{
    display: none;
}

.home_faq_question::after
{
    content: '';
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
    transition: transform 0.4s var(--easing);
}

.home_faq_item[open] .home_faq_question::after
{
    transform: rotate(45deg);
}

.home_faq_question:hover,
.home_faq_item[open] .home_faq_question
{
    color: var(--accent);
}

.home_faq_reponse
{
    margin: 0;
    padding: 0 40px 24px 0;
    color: var(--encre_second);
    line-height: 1.7;
}

.home_faq_item[open] .home_faq_reponse
{
    animation: home_faq_ouverture 0.45s var(--easing);
}

@keyframes home_faq_ouverture
{
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
/* FAQ_ACCUEIL ========================================================= */

/* CTA_FINAL =========================================================== */
.home_cta
{
    padding: 0 0 clamp(64px, 9vw, 128px) 0;
}

.home_cta_cadre
{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
    background: var(--surface);
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    text-align: center;
}

.home_cta_halo
{
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 50% 50%, var(--accent_halo) 0%, transparent 55%);
    pointer-events: none;
    z-index: -1;
}

.home_cta_cadre h2
{
    margin: 0 0 12px 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.home_cta_texte
{
    margin: 0 auto clamp(28px, 3vw, 44px) auto;
    color: var(--encre_second);
    max-width: 52ch;
}

.home_cta_options
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
}

.home_cta_option
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    min-height: 48px;
    background: var(--fond);
    border: 1px solid var(--ligne);
    border-radius: 2px;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duree) var(--easing), transform 0.4s var(--easing);
}

a.home_cta_option:hover,
a.home_cta_option:focus-visible
{
    border-color: var(--accent);
    transform: translateY(-2px);
}

.home_cta_option:first-child
{
    background: var(--accent);
    border-color: var(--accent);
}

.home_cta_option:first-child .home_cta_option_nom,
.home_cta_option:first-child .home_cta_option_detail
{
    color: var(--fond);
}

.home_cta_option_nom
{
    font-family: var(--police_titres);
    font-size: 1.08rem;
    color: var(--encre);
}

.home_cta_option_detail
{
    font-size: 0.86rem;
    color: var(--encre_attenuee);
    line-height: 1.5;
}

.home_cta_option_detail a
{
    color: var(--encre);
}
/* CTA_FINAL =========================================================== */

/* RESPONSIVE ========================================================== */
@media (max-width: 1100px)
{
    .home_bento
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home_bento_large
    {
        grid-column: span 2;
    }

    .home_methode_liste
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }
}

@media (max-width: 900px)
{
    .home_hero_grille,
    .home_portrait_grille,
    .home_faq_grille
    {
        grid-template-columns: 1fr;
    }

    .home_faq_grille .home_entete
    {
        position: static;
    }

    .home_realisations_grille,
    .home_offres_grille,
    .home_articles_grille,
    .home_temoignages_grille,
    .home_cta_options
    {
        grid-template-columns: 1fr;
    }

    .home_confiance_liste
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home_confiance_item:nth-child(3)
    {
        border-left: 0;
        padding-left: 0;
    }

    .home_confiance_item:nth-child(n+3)
    {
        border-top: 1px solid var(--ligne);
    }

    .home_portrait_figure
    {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px)
{
    .home_hero
    {
        padding-top: 28px;
    }

    .home_hero_visuel
    {
        aspect-ratio: 4 / 5;
        order: -1;
    }

    .home_hero_anneau
    {
        right: -10%;
        top: -6%;
        width: 110px;
    }

    .home_hero_actions > .bouton_principal,
    .home_hero_actions > .bouton_secondaire
    {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }

    .home_entete_ligne
    {
        flex-direction: column;
        align-items: flex-start;
    }

    .home_bento
    {
        grid-template-columns: 1fr;
    }

    .home_bento_large
    {
        grid-column: auto;
        flex-direction: column;
    }

    .home_bento_visuel
    {
        flex: none;
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--ligne);
    }

    .home_methode_liste
    {
        grid-template-columns: 1fr;
    }

    .home_faq_reponse
    {
        padding-right: 0;
    }
}

@media (max-width: 480px)
{
    .home_confiance_liste
    {
        grid-template-columns: 1fr;
    }

    .home_confiance_item,
    .home_confiance_item:nth-child(3)
    {
        border-left: 0;
        padding: 16px 0;
    }

    .home_confiance_item + .home_confiance_item
    {
        border-top: 1px solid var(--ligne);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .home_telemetrie_point,
    .home_faq_item[open] .home_faq_reponse
    {
        animation: none;
    }

    .home_methode_etape::before
    {
        transform: scaleX(1);
        transition: none;
    }
}
/* RESPONSIVE ========================================================== */

/* HEROS_IMMERSIF ====================================================== */
/*
 * 07/10/2026 19:39 (Claude, A.35) : héros plein écran, demandes de JaxX (Dialogue n° 14 et 15).
 * Variables : --p (0 à 1, progression du défilement, posée par Home.js sur .home_heros),
 * --plx_x / --plx_y (souris ou inclinaison, _theme/parallaxe.js), --delai_intro (attente du splash mobile).
 * Les états de départ des animations n'existent que sous html.motion_actif : sans animation, tout est visible.
 * Les anciens styles .home_hero_* (au-dessus) restent en place, inutilisés, avec l'ancien héros en commentaire.
 */
html
{
    --delai_intro: 0s;
}

html.home_splash_actif
{
    --delai_intro: 2.35s;
}

html.home_splash_actif.home_splash_passe
{
    --delai_intro: 0.3s;
}

.home_heros
{
    --p: 0;
    position: relative;
}

html.motion_actif .home_heros
{
    height: 175svh;
}

.home_heros_scene
{
    position: relative;
    height: calc(100svh - var(--hauteur_header));
    min-height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

html.motion_actif .home_heros_scene
{
    position: sticky;
    top: var(--hauteur_header);
}

/* Cadre de l'image : se resserre en carte au fil du défilement */
.home_heros_cadre
{
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    clip-path: inset( calc(var(--p) * 8%) calc(var(--p) * 5%) calc(var(--p) * 12%) calc(var(--p) * 5%) round 2px );
}

.home_heros_cadre::after
{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 6, 8, calc(var(--p) * 0.7));
    pointer-events: none;
}

.home_heros_fond
{
    position: absolute;
    inset: -40px;
    transform: scale( calc(1 + var(--p) * 0.14) );
    transform-origin: 62% 50%;
}

.home_heros_fond picture,
.home_heros_fond img
{
    display: block;
    width: 100%;
    height: 100%;
}

.home_heros_fond img
{
    max-width: none;
    object-fit: cover;
    object-position: 68% 50%;
}

html.parallaxe_active .home_heros .home_heros_fond img
{
    scale: 1;
    translate: calc( var(--plx_x, 0) * -28px ) calc( var(--plx_y, 0) * -20px );
}

/* Voile de lisibilité : calme à gauche (texte), image libre à droite */
.home_heros_voile
{
    position: absolute;
    inset: 0;
    background:
        linear-gradient( 90deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 84%, transparent) 30%, color-mix(in srgb, var(--fond) 30%, transparent) 60%, transparent 82% ),
        linear-gradient( 0deg, var(--fond) 0%, transparent 30% ),
        linear-gradient( 180deg, color-mix(in srgb, var(--fond) 50%, transparent) 0%, transparent 18% );
    pointer-events: none;
}

/* 19:44 (A.35) : en mode clair, le voile couvre plus loin vers la droite pour que la rassurance reste lisible */
html.bright_mode .home_heros_voile
{
    background:
        linear-gradient( 90deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 90%, transparent) 38%, color-mix(in srgb, var(--fond) 45%, transparent) 64%, transparent 86% ),
        linear-gradient( 0deg, var(--fond) 0%, transparent 30% ),
        linear-gradient( 180deg, color-mix(in srgb, var(--fond) 50%, transparent) 0%, transparent 18% );
}

/* Lumière qui suit la souris (ou l'inclinaison du téléphone) */
.home_heros_lumiere
{
    position: absolute;
    left: 50%;
    top: 42%;
    width: 64vmax;
    height: 64vmax;
    margin: -32vmax 0 0 -32vmax;
    background: radial-gradient( circle, var(--accent_halo) 0%, transparent 62% );
    mix-blend-mode: screen;
    pointer-events: none;
}

html.bright_mode .home_heros_lumiere
{
    mix-blend-mode: multiply;
    opacity: 0.55;
}

html.parallaxe_active .home_heros_lumiere
{
    translate: calc( var(--plx_x, 0) * 24vw ) calc( var(--plx_y, 0) * 20vh );
}

/* Premier plan détouré (visuel d'Antigravity, affiché dès qu'il est déposé) */
.home_heros_plan_avant
{
    position: absolute;
    right: 5%;
    bottom: 10%;
    width: min(36vw, 560px);
    height: auto;
    filter: drop-shadow( 0 30px 60px rgba(0, 0, 0, 0.45) );
    transform: translateY( calc(var(--p) * -90px) ) rotate( calc(var(--p) * -6deg) );
    pointer-events: none;
}

html.parallaxe_active .home_heros .home_heros_plan_avant
{
    scale: 1;
    translate: calc( var(--plx_x, 0) * 38px ) calc( var(--plx_y, 0) * 30px );
}

/* Anneau du bouton power : signature de la marque, plan le plus proche */
.home_heros_anneau
{
    position: absolute;
    right: 9%;
    top: 12%;
    width: clamp(160px, 22vw, 340px);
    height: auto;
    color: var(--accent);
    opacity: 0.6;
    transform: rotate( calc(var(--p) * 40deg) );
    pointer-events: none;
}

html.parallaxe_active .home_heros_anneau
{
    translate: calc( var(--plx_x, 0) * 44px ) calc( var(--plx_y, 0) * 34px );
}

.home_heros_anneau path
{
    stroke-dasharray: 480;
}

.home_heros_anneau line
{
    stroke-dasharray: 48;
}

html.motion_actif .home_heros_anneau path
{
    stroke-dashoffset: 480;
    animation: home_trace 1.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: calc(var(--delai_intro) + 0.4s);
}

html.motion_actif .home_heros_anneau line
{
    stroke-dashoffset: 48;
    animation: home_trace 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: calc(var(--delai_intro) + 1.9s);
}

/* Seconde accroche : apparaît quand l'image s'est resserrée */
.home_heros_seconde
{
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    font-family: var(--police_titres);
    font-size: clamp(2.2rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    text-align: center;
    color: #ffffff;
    opacity: clamp( 0, calc((var(--p) - 0.42) * 3.5), 1 );
    pointer-events: none;
}

/* 07/10/2026 21:13 : en mode clair le voile crème recouvre la photo → texte en encre sombre (demande de JaxX) */
/* 07/10/2026 21:21 : abandonné, l'encre sombre devenait illisible sur la carte assombrie en fin de défilement
html.bright_mode .home_heros_seconde
{
    color: var(--encre);
}
*/

/* 07/10/2026 21:21 : en mode clair, le voile crème s'efface au rythme du contenu qu'il protège ;
   la seconde accroche (blanche) apparaît ensuite sur la photo assombrie, comme en mode sombre (Dialogue n° 21 et 22) */
html.bright_mode .home_heros_voile
{
    opacity: clamp( 0, calc(1 - var(--p) * 2.6), 1 );
}

.home_heros_seconde_ligne
{
    display: block;
    transform: translateY( calc((1 - clamp(0, calc((var(--p) - 0.42) * 3), 1)) * 48px) );
}

.home_heros_seconde_ligne + .home_heros_seconde_ligne
{
    color: var(--accent);
    transform: translateY( calc((1 - clamp(0, calc((var(--p) - 0.52) * 3), 1)) * 64px) );
}

/* Contenu au-dessus de la ligne de flottaison */
.home_heros_contenu
{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: clamp(16px, 3vh, 40px);
    padding-bottom: clamp(110px, 15vh, 150px);
    transform: translateY( calc(var(--p) * -100px) );
    opacity: clamp( 0, calc(1 - var(--p) * 2.6), 1 );
}

.home_heros_sur_titre
{
    margin: 0;
    font-size: var(--texte_xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.home_heros_titre
{
    margin: 0;
    font-family: var(--police_titres);
    font-size: clamp(2.5rem, 5.3vw, 5.6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--encre);
}

.home_heros_ligne
{
    display: block;
}

.home_heros_mot
{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.home_heros_mot_int
{
    display: inline-block;
    transform-origin: 0 100%;
}

.home_heros_ligne_accent .home_heros_mot_int
{
    background-image: linear-gradient( 100deg, var(--accent) 0%, var(--accent) 38%, var(--encre) 50%, var(--accent) 62%, var(--accent) 100% );
    background-size: 260% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home_heros_rotation
{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    font-size: var(--texte_l);
    color: var(--encre_second);
}

.home_heros_rotation_fenetre
{
    position: relative;
    display: inline-grid;
    overflow: hidden;
    height: 1.4em;
    font-weight: 600;
    color: var(--encre);
}

.home_heros_rotation_fenetre::after
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

.home_heros_rotation_item
{
    grid-area: 1 / 1;
    white-space: nowrap;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;
}

.home_heros_rotation_item.actif
{
    transform: none;
    opacity: 1;
}

.home_heros_rotation_item.sortant
{
    transform: translateY(-110%);
    opacity: 0;
}

.home_heros_lecteur
{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.home_heros_promesse
{
    margin: 0;
    max-width: 54ch;
    font-size: var(--texte_m);
    line-height: 1.55;
    color: var(--encre_second);
}

.home_heros_actions
{
    margin-top: 4px;
}

.home_heros_rassurance
{
    margin: 0;
    font-size: 0.86rem;
    color: var(--encre_attenuee);
    letter-spacing: 0.01em;
}

/* Accès rapides façon application : visibles sur mobile seulement */
.home_heros_raccourcis
{
    display: none;
}

.home_heros_raccourci
{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 136px;
    padding: 12px 14px;
    color: var(--encre);
    text-decoration: none;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid var(--ligne_forte);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    scroll-snap-align: start;
}

.home_heros_raccourci_numero
{
    font-size: var(--texte_xs);
    color: var(--accent);
}

.home_heros_raccourci_nom
{
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Pied du héros : télémétrie, invitation à défiler, bandeau des savoir-faire */
.home_heros_pied
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    transform: translateY( calc(var(--p) * 70px) );
    opacity: clamp( 0, calc(1 - var(--p) * 3), 1 );
}

.home_heros_pied .home_heros_telemetrie
{
    left: auto;
    right: clamp(16px, 3vw, 40px);
    bottom: calc(100% + 18px);
    margin: 0;
}

.home_heros_indice
{
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: var(--texte_xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--encre_second);
    text-decoration: none;
}

.home_heros_indice_trait
{
    width: 1px;
    height: 40px;
    background: linear-gradient( var(--accent), transparent );
    transform-origin: top;
}

html.motion_actif .home_heros_indice_trait
{
    animation: home_indice 2.2s ease-in-out infinite;
}

.home_heros_bandeau
{
    overflow: hidden;
    padding: 12px 0;
    background: color-mix(in srgb, var(--fond) 62%, transparent);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.home_heros_bandeau_piste
{
    display: flex;
    align-items: center;
    width: max-content;
}

html.motion_actif .home_heros_bandeau_piste
{
    animation: home_bandeau 40s linear infinite;
}

.home_heros_bandeau_item
{
    margin-right: 28px;
    font-family: var(--police_titres);
    font-size: var(--texte_m);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--encre);
}

.home_heros_bandeau_sep
{
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: 28px;
    background: var(--accent);
    border-radius: 1px;
    transform: rotate(45deg);
}

/* Entrée façon spot publicitaire (ordinateur et mobile, après le splash le cas échéant) */
html.motion_actif .home_heros_fond img
{
    animation: home_fond_entree 1.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--delai_intro);
}

html.motion_actif .home_heros_sur_titre
{
    opacity: 0;
    animation: home_suivi 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--delai_intro) + 0.15s);
}

html.motion_actif .home_heros_mot_int
{
    transform: translateY(108%) rotate(7deg);
    animation: home_mot_entree 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--delai_intro) + 0.3s + var(--rang, 0) * 80ms);
}

html.motion_actif .home_heros_ligne_accent .home_heros_mot_int
{
    animation: home_mot_entree 1s cubic-bezier(0.16, 1, 0.3, 1) forwards, home_reflet 1.8s ease-in-out forwards;
    animation-delay: calc(var(--delai_intro) + 0.3s + var(--rang, 0) * 80ms), calc(var(--delai_intro) + 1.4s);
}

html.motion_actif :is( .home_heros_rotation, .home_heros_promesse, .home_heros_actions, .home_heros_rassurance, .home_heros_raccourcis, .home_heros_bandeau, .home_heros_indice, .home_heros_telemetrie )
{
    opacity: 0;
    animation: home_monter 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html.motion_actif .home_heros_rotation
{
    animation-delay: calc(var(--delai_intro) + 1.05s);
}

html.motion_actif .home_heros_promesse
{
    animation-delay: calc(var(--delai_intro) + 1.2s);
}

html.motion_actif .home_heros_actions
{
    animation-delay: calc(var(--delai_intro) + 1.35s);
}

html.motion_actif .home_heros_rassurance,
html.motion_actif .home_heros_raccourcis
{
    animation-delay: calc(var(--delai_intro) + 1.5s);
}

html.motion_actif :is( .home_heros_bandeau, .home_heros_indice, .home_heros_telemetrie )
{
    animation-delay: calc(var(--delai_intro) + 1.7s);
}

@keyframes home_fond_entree
{
    from
    {
        scale: 1.18;
        filter: blur(10px) brightness(0.35);
    }
    to
    {
        scale: 1;
        filter: none;
    }
}

@keyframes home_suivi
{
    from
    {
        opacity: 0;
        letter-spacing: 0.7em;
    }
    to
    {
        opacity: 1;
        letter-spacing: 0.18em;
    }
}

@keyframes home_mot_entree
{
    to
    {
        transform: none;
    }
}

@keyframes home_reflet
{
    from
    {
        background-position: 100% 0;
    }
    to
    {
        background-position: 0% 0;
    }
}

@keyframes home_monter
{
    from
    {
        opacity: 0;
        transform: translateY(18px);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

@keyframes home_trace
{
    to
    {
        stroke-dashoffset: 0;
    }
}

@keyframes home_indice
{
    0%
    {
        transform: scaleY(0);
        opacity: 1;
    }
    65%
    {
        transform: scaleY(1);
        opacity: 1;
    }
    100%
    {
        transform: scaleY(1);
        opacity: 0;
    }
}

@keyframes home_bandeau
{
    to
    {
        transform: translateX(-50%);
    }
}
/* HEROS_IMMERSIF ====================================================== */

/* MANIFESTE_DEFILEMENT ================================================ */
/* 07/10/2026 19:39 (Claude, A.35) : la conviction s'allume mot à mot ; --p, --n et --i posés par Home.js */
.home_manifeste
{
    --p: 0;
    position: relative;
    border-top: 1px solid var(--ligne);
}

.home_manifeste_scene
{
    padding: clamp(80px, 12vw, 160px) 0;
}

html.motion_actif .home_manifeste
{
    height: 210svh;
}

html.motion_actif .home_manifeste_scene
{
    position: sticky;
    top: var(--hauteur_header);
    height: calc(100svh - var(--hauteur_header));
    display: flex;
    align-items: center;
    padding: 0;
}

.home_manifeste_texte
{
    margin: 18px 0 0 0;
    max-width: 24ch;
    font-family: var(--police_titres);
    font-size: clamp(1.75rem, 3.7vw, 3.8rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--encre);
}

html.motion_actif .home_manifeste.defilement_pret .home_manifeste_mot
{
    opacity: clamp( 0.14, calc((var(--p) * var(--n) - var(--i)) * 0.8 + 0.14), 1 );
    transition: opacity 0.18s linear;
}
/* MANIFESTE_DEFILEMENT ================================================ */

/* SPLASH_MOBILE ======================================================= */
/*
 * 07/10/2026 19:39 (Claude, A.35) : écran de lancement façon application (mobile, une fois par session).
 * Invisible tant que Home_splash.js n'a pas posé html.home_splash_actif. Animation entièrement en CSS :
 * il disparaît seul même si Home.js ne se charge pas ; un toucher l'écourte (classe posée par Home.js).
 */
.home_splash
{
    display: none;
}

html.home_splash_actif .home_splash
{
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--fond);
    touch-action: none;
    animation: home_splash_sortie 0.75s cubic-bezier(0.76, 0, 0.24, 1) 2.05s forwards;
}

html.home_splash_actif .home_splash.home_splash_sortie_rapide
{
    animation: home_splash_sortie 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

html.home_splash_actif .home_splash[hidden]
{
    display: none;
}

.home_splash_halo
{
    position: absolute;
    left: 50%;
    top: 44%;
    width: 140vw;
    height: 140vw;
    margin: -70vw 0 0 -70vw;
    background: radial-gradient( circle, var(--accent_halo) 0%, transparent 60% );
    animation: home_splash_pulsation 2.2s ease-in-out both;
}

.home_splash_centre
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home_splash_logo
{
    width: 92px;
    height: 92px;
}

.home_splash_logo path
{
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
    animation: home_trace 0.95s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}

.home_splash_logo line
{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: home_trace 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards;
}

.home_splash_marque
{
    display: flex;
    margin: 18px 0 0 0;
    overflow: hidden;
    font-family: var(--police_titres);
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--encre);
}

.home_splash_lettre
{
    display: inline-block;
    transform: translateY(110%);
    animation: home_mot_entree 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.home_splash_lettre:nth-child(1)
{
    animation-delay: 0.75s;
}

.home_splash_lettre:nth-child(2)
{
    animation-delay: 0.8s;
}

.home_splash_lettre:nth-child(3)
{
    animation-delay: 0.85s;
}

.home_splash_lettre:nth-child(4)
{
    animation-delay: 0.9s;
}

.home_splash_lettre:nth-child(5)
{
    animation-delay: 0.95s;
}

.home_splash_lettre:nth-child(6)
{
    animation-delay: 1.05s;
}

.home_splash_lettre:nth-child(7)
{
    animation-delay: 1.1s;
}


.home_splash_lettre:nth-child(n+6)
{
    color: var(--accent);
}

.home_splash_baseline
{
    margin: 12px 0 0 0;
    font-size: var(--texte_xs);
    text-transform: uppercase;
    color: var(--encre_second);
    opacity: 0;
    animation: home_suivi 1s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}

.home_splash_progression
{
    position: absolute;
    left: 30%;
    right: 30%;
    bottom: calc(56px + env(safe-area-inset-bottom));
    height: 2px;
    overflow: hidden;
    background: var(--ligne);
    border-radius: 1px;
}

.home_splash_progression::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: home_splash_charge 1.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

@keyframes home_splash_sortie
{
    from
    {
        clip-path: inset(0 0 0 0);
    }
    to
    {
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes home_splash_pulsation
{
    0%
    {
        opacity: 0;
        transform: scale(0.6);
    }
    60%
    {
        opacity: 1;
        transform: scale(1);
    }
    100%
    {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes home_splash_charge
{
    to
    {
        transform: scaleX(1);
    }
}
/* SPLASH_MOBILE ======================================================= */

/* HEROS_RESPONSIVE ==================================================== */
@media (max-width: 1100px)
{
    .home_heros_pied .home_heros_telemetrie
    {
        display: none;
    }
}

@media (max-width: 768px)
{
    html.motion_actif .home_heros
    {
        height: 150svh;
    }

    /* Écran d'application : image en haut, contenu posé en bas, au-dessus de la barre d'onglets */
    .home_heros_scene
    {
        height: calc(100svh - var(--hauteur_header) - var(--hauteur_tab_bar) - env(safe-area-inset-bottom));
        min-height: 540px;
        justify-content: flex-end;
    }

    .home_heros_fond img
    {
        object-position: 50% 30%;
    }

    .home_heros_voile
    {
        background:
            linear-gradient( 0deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 88%, transparent) 36%, color-mix(in srgb, var(--fond) 20%, transparent) 64%, transparent 80% ),
            linear-gradient( 180deg, color-mix(in srgb, var(--fond) 55%, transparent) 0%, transparent 16% );
    }

    .home_heros_anneau
    {
        top: 6%;
        right: -8%;
        width: 48vw;
    }

    /* 19:47 : le téléphone d'Antigravity chevauchait le sur-titre, il est réduit et remonté
    .home_heros_plan_avant
    {
        right: -6%;
        top: 8%;
        bottom: auto;
        width: 62vw;
    }
    */
    .home_heros_plan_avant
    {
        right: -4%;
        top: 1%;
        bottom: auto;
        width: 46vw;
    }

    .home_heros_contenu
    {
        gap: 14px;
        padding-bottom: 64px;
    }

    /* 19:44 : un cran plus petit, le contenu complet tient au-dessus de la barre d'onglets
    .home_heros_titre
    {
        font-size: clamp(2.3rem, 10.5vw, 3.4rem);
    }
    */
    .home_heros_titre
    {
        font-size: clamp(1.9rem, 8.6vw, 2.9rem);
    }

    .home_heros_rotation
    {
        font-size: var(--texte_m);
    }

    /* 19:44 : la promesse longue redit le titre et la rotation, elle est masquée sur téléphone
    .home_heros_promesse
    {
        font-size: var(--texte_s);
    }
    */
    .home_heros_promesse
    {
        display: none;
    }

    .home_heros_rassurance,
    .home_heros_indice
    {
        display: none;
    }

    .home_heros_actions
    {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    .home_heros_actions > .bouton_principal,
    .home_heros_actions > .bouton_secondaire
    {
        flex: 1;
        justify-content: center;
        text-align: center;
        /* 19:44 : boutons compacts, libellé sur une seule ligne */
        padding-left: 10px;
        padding-right: 10px;
        font-size: var(--texte_s);
        white-space: nowrap;
    }

    .home_heros_raccourcis
    {
        display: flex;
        gap: 10px;
        width: calc(100% + 32px);
        margin: 2px -16px 0 -16px;
        padding: 0 16px 2px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .home_heros_raccourcis::-webkit-scrollbar
    {
        display: none;
    }

    .home_heros_bandeau
    {
        padding: 9px 0;
    }

    .home_heros_bandeau_item
    {
        font-size: var(--texte_s);
    }

    .home_heros_seconde
    {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    html.motion_actif .home_manifeste
    {
        height: 180svh;
    }

    html.motion_actif .home_manifeste_scene
    {
        height: calc(100svh - var(--hauteur_header) - var(--hauteur_tab_bar));
    }
}

/* 19:44 (A.35) : téléphones à écran bas, les raccourcis cèdent la place au titre */
@media (max-width: 768px) and (max-height: 700px)
{
    .home_heros_raccourcis
    {
        display: none;
    }
}
/* HEROS_RESPONSIVE ==================================================== */