/* ============================================================
   Accueil - sections condensees (2026-09-24)
   ============================================================
   Trois sections de index.php seulement : process, services,
   tarifs. Rien ici ne doit fuir sur une autre page, d'ou les
   prefixes .home-process__ / .home-services__ / .home-tarifs__.

   Couleurs : jamais de valeur en dur, uniquement les jetons du
   bundle passes a color-mix(). Un navigateur sans color-mix
   perd la teinte et garde le fond noir du body : degradation
   vers « lisible », jamais vers « illisible ».
   ============================================================ */

/* ------------------------------------------------------------
   1. PROCESS - rupture de rythme n.1
   ------------------------------------------------------------
   Pleine largeur, aucune carte. La page enchainait des grilles
   de cartes a l'identique : ici le contenu repose directement
   sur une bande, reliee par un filet.
   ------------------------------------------------------------ */
.home-process {
    --home-process-gap: clamp(1.25rem, 2.5vw, 2rem);
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(130% 90% at 50% 0%,
            color-mix(in srgb, var(--accent-cyan) 11%, transparent) 0%,
            transparent 62%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent-cyan) 6%, transparent) 0%,
            transparent 70%);
    border-block: 1px solid color-mix(in srgb, var(--accent-cyan) 18%, transparent);
}

/* Liseré lumineux en haut de bande : marque la rupture sans ajouter
   de boite. */
.home-process::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-cyan) 50%,
        transparent 100%);
    opacity: .55;
}

.home-process__head {
    max-width: 62ch;
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
    text-align: center;
}

/* Le chapo est SOUS le titre, jamais en colonne a cote. */
.home-process__lead {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
}

.home-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.5rem) var(--home-process-gap);
}

/* Colonne flex : la duree est poussee en bas de cellule. Sans ca, une
   etape dont le titre tient sur deux lignes decalait sa pastille et la
   rangee se lisait en escalier. */
.home-process__step {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Le filet est un pseudo-element de la ligne du numero, pas un
   trait absolu : centre automatiquement sur le chiffre quelle que
   soit la taille de police, donc jamais decale. */
.home-process__numrow {
    display: flex;
    align-items: center;
    margin: 0 0 .75rem;
}

.home-process__num {
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--accent-cyan);
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent-cyan) 45%, transparent);
}

.home-process__step-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.15rem, 1.6vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.home-process__step-text {
    margin: 0 0 .85rem;
    font-size: clamp(1.05rem, 1.25vw, 1.08rem);
    line-height: 1.6;
    color: var(--text-secondary);
}

.home-process__duration {
    display: inline-block;
    align-self: flex-start;
    margin: auto 0 0;
    padding: .25rem .7rem;
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-cyan) 9%, transparent);
    color: var(--accent-cyan);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Engagements : une ligne d'icones, aucune carte, pour rester dans
   la logique « bande » de la section. Contenu repris de
   includes/sections/reassurance-band.php. */
.home-process__trust {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: clamp(1.25rem, 2.5vw, 1.5rem) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem clamp(1.5rem, 3vw, 2.75rem);
}

.home-process__trust-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
}

.home-process__trust-item i {
    flex-shrink: 0;
    color: var(--accent-cyan);
    font-size: 1.35rem;
}

/* --- Mobile : verticale, filet a gauche --- */
@media (max-width: 767px) {
    .home-process__steps {
        position: relative;
        padding-left: 1.75rem;
    }

    .home-process__steps::before {
        content: "";
        position: absolute;
        inset-block: .5rem;
        inset-inline-start: 3px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent-cyan) 55%, transparent) 0%,
            color-mix(in srgb, var(--accent-cyan) 12%, transparent) 100%);
    }

    /* Puce sur le filet, en face du numero. */
    .home-process__step::before {
        content: "";
        position: absolute;
        inset-inline-start: -1.75rem;
        inset-block-start: .95rem;
        width: 8px;
        height: 8px;
        margin-inline-start: 0;
        border-radius: 50%;
        background: var(--accent-cyan);
        box-shadow: 0 0 12px color-mix(in srgb, var(--accent-cyan) 60%, transparent);
    }

    .home-process__num {
        font-size: 2.1rem;
    }

    .home-process__trust {
        justify-content: flex-start;
    }
}

/* --- Desktop : 4 colonnes reliees par un filet horizontal --- */
@media (min-width: 768px) {
    .home-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-process__numrow::after {
        content: "";
        flex: 1 1 auto;
        height: 2px;
        margin-inline-start: 1rem;
        /* La marge negative fait traverser la gouttiere de la grille :
           sans elle le filet s'arreterait au bord de chaque colonne et
           se lirait comme quatre traits separes. */
        margin-inline-end: calc(-1 * var(--home-process-gap));
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent-cyan) 45%, transparent) 0%,
            color-mix(in srgb, var(--accent-cyan) 12%, transparent) 100%);
    }

    /* Derniere colonne de chaque rangee : le filet ne mene nulle part.
       Idem pour la derniere etape quand leur nombre est impair (pages
       Dépannage a 3 etapes : la 3e est seule sur sa rangee). */
    .home-process__step:nth-child(2n) .home-process__numrow::after,
    .home-process__step:last-child .home-process__numrow::after {
        display: none;
    }
}

@media (min-width: 1024px) {
    /* --home-process-cols : pose en ligne par timeline-repair.php quand le
       nombre d'etapes differe de 4 (pages Dépannage a 3 etapes). */
    .home-process__steps {
        grid-template-columns: repeat(var(--home-process-cols, 4), 1fr);
    }

    .home-process__step:nth-child(2n) .home-process__numrow::after {
        display: block;
    }

    .home-process__step:last-child .home-process__numrow::after {
        display: none;
    }
}

/* ------------------------------------------------------------
   2. SERVICES - six cartes, 3x2
   ------------------------------------------------------------
   La grille bento (1re carte sur 2 colonnes et 2 rangees) n'a de
   sens qu'avec douze cartes. Avec six elle laisse un trou en bas
   a droite. .diag-grid--home, posee par services.php quand la
   liste est bornee, sort de ce bento : les regles !important
   restees en ligne dans services.php sont explicitement exclues
   par un :not(.diag-grid--home), sinon rien ici ne passerait -
   elles arrivent plus tard dans le document.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .diag-grid--services.diag-grid--home {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        grid-auto-flow: row;
        align-items: stretch;
    }

    .diag-grid--services.diag-grid--home > article:nth-child(1),
    .diag-grid--services.diag-grid--home > article:nth-child(7) {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (min-width: 1024px) {
    .diag-grid--services.diag-grid--home {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* La carte a la une garde son accent visuel mais plus sa mise en page :
   son « display:flex + justify-content:space-between » avait ete ecrit
   pour une carte deux fois plus haute portant une checklist. Sans cette
   checklist, il etirait le badge sur toute la largeur et creusait un vide
   sous l'icone. Retour au flux normal, l'accent reste la teinte et la
   bordure cyan. */
@media (min-width: 768px) {
    .diag-grid--home .diag-card--featured {
        display: block;
    }

    .diag-grid--home .diag-card--featured .diag-card__title {
        font-size: 1.25rem;
        /* Le « margin-top: 1rem » d'origine respirait dans une carte double
           hauteur ; ici il decalait le titre de la premiere carte par
           rapport aux cinq autres de la rangee. */
        margin-top: 0;
    }

    .diag-grid--home .diag-card--featured .diag-card__desc {
        font-size: 1.05rem;
    }
}

.home-services__more {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------------
   3. TARIFS - trois forfaits particuliers
   ------------------------------------------------------------ */
.home-tarifs__head {
    max-width: 62ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.home-tarifs__lead {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
}

/* Trois cartes au lieu de deux : la largeur par defaut de
   .pricing-grid (1100px) les accueille sans les tasser. */
.home-tarifs__grid {
    max-width: 1100px;
}

/* Renvoi entreprises : une ligne, pas une carte de plus. */
.home-tarifs__pro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem .75rem;
    max-width: 700px;
    margin: clamp(2rem, 4vw, 2.75rem) auto 0;
    padding: clamp(.9rem, 2vw, 1.1rem) clamp(1.1rem, 3vw, 1.75rem);
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
}

.home-tarifs__pro i {
    color: var(--accent-cyan);
    font-size: 1.25rem;
}

.home-tarifs__pro a {
    color: var(--accent-cyan);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-tarifs__pro a:hover,
.home-tarifs__pro a:focus-visible {
    color: var(--text-primary);
}

/* Bouton d'appel des cartes (2026-09-25, conversion.md) : .btn-call du
   bundle, ici seulement la taille dans la carte. */
.home-tarifs__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding-inline: 28px;
}

/* Appel + lien de bas de section (services $services_call, process
   $processCall ; 2026-09-25, conversion.md). La marge globale de
   .btn-secondary est neutralisee pour aligner les deux boutons. */
.home-services__more--call {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
}
.home-services__more--call .btn { margin: 0; min-height: 48px; }
.home-process__call {
    margin: clamp(28px, 4vw, 40px) 0 0;
    text-align: center;
}
.home-process__call .btn-call { min-height: 52px; }
@media (max-width: 575.98px) {
    .home-services__more--call .btn,
    .home-process__call .btn-call { width: 100%; justify-content: center; }
}