/* ==========================================================================
   Accueil - preuve sociale et prise de contact
   Deux blocs : les avis tronques (.home-reviews__) et la section fusionnee
   contact + fondateur (.home-contact__).
   Regles : aucune couleur en dur hors rgba de verre, variables du bundle,
   clamp() pour les tailles, corps >= 1.05rem (cible seniors), 320px minimum.
   ========================================================================== */

/* ── Avis : lien de sortie quand la liste est tronquee ─────────────────── */

.home-reviews__more {
    margin-top: clamp(24px, 4vw, 36px);
}

.home-reviews__more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    min-height: 52px;
    border-radius: 50px;
    border: 1px solid var(--accent-cyan, #00d4ff);
    background: rgba(0, 212, 255, 0.08);
    color: var(--accent-cyan, #00d4ff);
    font-size: clamp(1.05rem, 1.6vw, 1.12rem);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.home-reviews__more-link:hover,
.home-reviews__more-link:focus-visible {
    background: rgba(0, 212, 255, 0.18);
    color: var(--text-primary, #fff);
    transform: translateY(-2px);
}

/* ── Contact + fondateur ───────────────────────────────────────────────── */

.home-contact {
    padding-block: clamp(48px, 7vw, 88px);
}

/* Le chapo vit sous le H2, jamais en colonne a cote : le lecteur descend,
   il ne balaye pas. */
.home-contact__lead {
    max-width: 44ch;
    margin: 12px auto 0;
    color: var(--text-secondary, #c4c4c4);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.6;
}

.home-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
    max-width: 1080px;
    margin: 0 auto;
}

/* Mobile : le fondateur et le bouton d'appel passent devant le formulaire.
   Un visiteur age appelle, il ne remplit pas quatre champs sur un telephone. */
.home-contact__founder-col { order: 1; }
.home-contact__form-col    { order: 2; }

/* min-width: 0 obligatoire : sans lui, un enfant indeformable (le bouton
   d'appel, qui est en white-space: nowrap) impose sa largeur minimale a la
   colonne de grille et fait deborder toute la carte sous 360px. */
.home-contact__founder-col,
.home-contact__form-col {
    min-width: 0;
}

.home-contact__card {
    height: 100%;
    padding: clamp(22px, 3.5vw, 36px);
    border-radius: 20px;
}

.home-contact__form-intro {
    margin: 0 0 20px;
    color: var(--text-secondary, #c4c4c4);
    font-size: 1.05rem;
    line-height: 1.6;
}

.home-contact__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

/* Libelle visible au-dessus du champ : un placeholder seul disparait des
   qu'on tape, et le senior ne sait plus ce qu'il remplit. */
.home-contact__label {
    margin-bottom: 8px;
    color: var(--text-primary, #fff);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.home-contact__input.input-style {
    min-height: 56px;
    margin-bottom: 0;
    padding: 16px 18px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.home-contact__textarea.input-style {
    min-height: 120px;
}

.home-contact__input.input-style::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.home-contact__submit {
    width: 100%;
    min-height: 56px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    /* Contour cyan (conversion.md) : l'appel voisin reste le seul bouton
       plein ; neutralise la marge globale de .btn-secondary. */
    margin-inline: 0;
    margin-bottom: 0;
}

/* ── Colonne fondateur ─────────────────────────────────────────────────── */

.home-contact__founder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.home-contact__photo {
    width: clamp(96px, 14vw, 112px);
    height: clamp(96px, 14vw, 112px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--accent-cyan, #00d4ff);
    box-shadow: 0 0 22px var(--glow-blue, rgba(0, 212, 255, 0.5));
}

.home-contact__quote {
    margin: 0;
    color: var(--text-primary, #fff);
    font-size: clamp(1.05rem, 1.8vw, 1.14rem);
    line-height: 1.65;
    font-style: italic;
}

.home-contact__sign {
    margin: 0;
    color: var(--text-secondary, #c4c4c4);
    font-size: 1rem;
    line-height: 1.5;
}

/* .btn-call (degrade cyan-violet profond, reserve a l'appel) est defini ailleurs : on ne fait
   qu'en poser la largeur et le rythme dans ce contexte. */
.home-contact__call {
    width: 100%;
    max-width: 100%;
    min-height: 60px;
    margin: 6px 0 0;
    padding-inline: clamp(10px, 4vw, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: clamp(1.02rem, 3.4vw, 1.18rem);
    font-weight: 700;
    text-decoration: none;
    /* .btn-call est en nowrap : sur un ecran de 320px le numero sortirait
       de la carte. On autorise le retour a la ligne ici seulement. */
    white-space: normal;
}

/* Le numero ne se coupe jamais en plein milieu : sous 340px le bouton passe
   sur deux lignes, la cesure doit tomber avant le numero, pas dedans. */
.home-contact__number {
    white-space: nowrap;
}

.home-contact__hours {
    margin: 0;
    color: var(--text-secondary, #c4c4c4);
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: balance;
}

/* ── Desktop : 7/5, formulaire a gauche ────────────────────────────────── */

@media (min-width: 992px) {
    .home-contact__grid {
        grid-template-columns: 7fr 5fr;
        align-items: stretch;
    }
    .home-contact__form-col    { order: 1; }
    .home-contact__founder-col { order: 2; }

    .home-contact__founder {
        justify-content: center;
    }
}

/* ── Tres petits ecrans (320px) ────────────────────────────────────────── */

@media (max-width: 360px) {
    .home-contact__card {
        padding: 20px 16px;
    }
    .home-reviews__more-link {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
    }
}

/* ── Accessibilite : mouvement reduit ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .home-reviews__more-link {
        transition: none;
    }
    .home-reviews__more-link:hover,
    .home-reviews__more-link:focus-visible {
        transform: none;
    }
}

/* Champ facultatif (email, 2026-09-25) : discret, sans rivaliser avec le
   libelle. */
.home-contact__optional {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-weight: 400;
    font-size: 0.95rem;
}

/* Message d'etat du formulaire (rj6_contact_notice, 2026-09-25) : le
   visiteur revient sur sa page d'origine, le message s'affiche au-dessus
   des champs. Meme langage que .contact-top__notice (contact.css). */
.home-contact__notice {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-primary, #fff);
}

.home-contact__notice a {
    color: inherit;
    font-weight: 700;
}

.home-contact__notice--ok {
    border: 1px solid color-mix(in srgb, var(--accent-cyan, #00d4ff) 45%, transparent);
    background: color-mix(in srgb, var(--accent-cyan, #00d4ff) 12%, transparent);
}

.home-contact__notice--err {
    border: 1px solid color-mix(in srgb, var(--accent-purple, #d946ef) 55%, transparent);
    background: color-mix(in srgb, var(--accent-purple, #d946ef) 14%, transparent);
}