/* ============================================================
   HERO 13 — TYPOGRAPHIQUE
   Aucun visuel : le titre porte toute la page. C'est la variante des sites qui
   n'ont pas encore de photos exploitables — le cas le plus frequent au
   lancement d'un site — et celle qui assume le plus : beaucoup de vide, un
   seul accident chromatique.

   REGISTRE BIEN-ETRE — ce qui le porte ici :
     * une forme organique a lobes, tres diluee, qui occupe l'angle sans jamais
       devenir un sujet ;
     * la seconde ligne du titre en italique (contrat ((…)) -> .mcl-accent),
       comme chez ses freres ;
     * un titre tres grand sur trois lignes, et de l'air partout ailleurs.
   ============================================================ */

.hero-13 {
    --hero-13-ivoire: color-mix(in srgb, var(--secondary) 7%, var(--white));
    --hero-13-filet: color-mix(in srgb, var(--black) 14%, transparent);

    position: relative;
    overflow: hidden;
    padding: calc(var(--header-height) + clamp(3.5rem, 9vw, 7.5rem)) 5% clamp(3.5rem, 8vw, 6.5rem);
    background: var(--hero-13-ivoire);
}

/*
   LA FORME, PAS LE DISQUE.

   Un cercle parfait, meme tres pale, se lit comme un element d'interface : on
   y cherche un contenu. Des lobes de rayons differents se lisent comme une
   trace — une tache d'huile, un galet — et c'est ce qu'on veut ici. Les huit
   rayons du `border-radius` sont ce qui separe les deux lectures ; c'est tout
   le dessin de la forme.

   La teinte reste un lavis a 12 % : la forme occupe l'angle, elle ne devient
   jamais le sujet. Le titre est le sujet.
*/
.hero-13__halo {
    position: absolute;
    top: -12vw;
    right: -7vw;
    width: min(46vw, 580px);
    aspect-ratio: 1;
    border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
    background: color-mix(in srgb, var(--secondary) 12%, transparent);
    animation: hero13Derive 22s ease-in-out infinite;
    pointer-events: none;
}

/* La derive est lente au point qu'on ne la surprend pas : on la constate en
   revenant sur la page. C'est exactement le propos de la variante. */
@keyframes hero13Derive {
    0%, 100% { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
    33%      { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; }
    66%      { border-radius: 52% 48% 40% 60% / 58% 44% 56% 42%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-13__halo {
        animation: none;
    }
}

.hero-13__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 2.2vw, 1.85rem);
    max-width: 1100px;
    margin: 0 auto;
}

.hero-13__surtitre {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gray-dark);
}

.hero-13__titre,
.hero-13__titre:hover {
    margin: 0;
    max-width: 14ch;
    font-family: var(--font-display);
    font-size: clamp(2.875rem, 8vw, 6.5rem);
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--black);
}

/*
   L'ACCENT EST UN CHANGEMENT DE VOIX, PAS UNE FORME.

   La maquette posait ici un galet sable autour du mot accentue, et c'etait
   juste — tant que l'accent tient en UN mot court. Il ne le tient pas : ce que
   ((…)) enferme vient de la data, donc d'un CRM, et peut valoir « l'excellence »
   comme « revenir a vous ». Sur trois mots, le galet passe a la ligne, se
   reconstruit en deux blocs et avale la moitie du titre — a l'ecran, le titre
   ne se lit plus.

   L'italique, lui, marche a toutes les longueurs. On perd un effet ; on gagne
   un composant qui ne parie pas sur la longueur d'une chaine qu'il ne choisit
   pas. Le sable reste present dans la variante, mais sur la forme organique,
   ou aucune donnee ne peut le faire deborder.
*/
.hero-13__titre .mcl-accent {
    font-style: italic;
    color: inherit;
}

.hero-13__desc {
    margin: 0;
    max-width: 46ch;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.8;
    color: var(--gray-dark);
}

/* ---- Actions ------------------------------------------------ */
.hero-13__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.hero-13__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.hero-13__btn--principal {
    background: var(--primary);
    color: var(--on-primary);
}

.hero-13__btn--principal:hover,
.hero-13__btn--principal:focus-visible {
    background: var(--secondary);
    color: var(--on-secondary);
}

.hero-13__btn--secondaire {
    border-color: var(--hero-13-filet);
    color: var(--black);
}

.hero-13__btn--secondaire:hover,
.hero-13__btn--secondaire:focus-visible {
    border-color: var(--black);
    background: color-mix(in srgb, var(--black) 4%, transparent);
    color: var(--black);
}

.hero-13__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ---- Pied --------------------------------------------------- */
.hero-13__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    margin-top: clamp(1.5rem, 3vw, 2.75rem);
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--hero-13-filet);
    width: 100%;
}

.hero-13__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--black);
}

.hero-13__tel {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    /* --primary et non --secondary : le theme garantit --primary comme couleur
       d'action (il lui appaire un --on-primary), alors que --secondary peut
       parfaitement etre un tan clair — illisible sur l'ivoire de la section. */
    color: var(--primary);
    transition: color 0.4s ease;
}

.hero-13__tel:hover,
.hero-13__tel:focus-visible {
    color: var(--black);
}

.hero-13__tel:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 768px) {
    .hero-13__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-13__halo {
        top: -34vw;
        right: -34vw;
        width: 86vw;
    }

    .hero-13__titre,
    .hero-13__titre:hover {
        max-width: 16ch;
    }
}

@media (max-width: 480px) {
    .hero-13__titre,
    .hero-13__titre:hover {
        font-size: clamp(2.25rem, 11.5vw, 3.125rem);
    }
}