/* ===== Page d'accueil (one-page) =====

   Ordre des sections repris de l'ordre des positions du template d'origine, tel qu'on peut
   le reconstituer depuis la base : showcase-a (accroche) → feature-a (nos métiers) →
   extension-a (les trois rubriques, cibles des ancres du menu) → utility-a (appel à
   l'action) → jd-custome-three-a (coordonnées + formulaire).

   ⚠️ Le fichier index.php du template jd_atlanta n'est pas dans les archives récupérées, et
   les paramètres du style ont été écrasés par le défacement : cet enchaînement vertical est
   une reconstitution, pas un relevé. C'est le point à recetter en priorité. */

/* ----- Bandeau d'accueil -----
   Fond unique et fixe : `images/17580.jpg`, les larges bandes diagonales blanc / gris très
   clair du site d'origine (identifié par Olivier le 14/08/2026 ; c'est le même fond que la
   section « Nous contacter »). Par-dessus défilent trois personnages détourés, calés à
   droite et alignés en bas. */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #fafafa;
    background-image: url('../images/17580.jpg');
    background-size: cover;
    background-position: center;
}

/* Le personnage détouré porte une marge transparente sur sa droite : à conteneur centré, le
   couple texte + image paraît décalé vers la droite. On le ramène à gauche en réservant de
   la place à droite du bloc — une seule valeur à ajuster en recette. */
.hero-inner {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    min-height: 480px;
    padding-top: 40px;
    padding-right: 85px;
}

/* Colonne de texte alignée à droite, comme sur le site d'origine : l'étiquette, le titre
   et l'accroche viennent buter contre le personnage. Le bloc est **centré verticalement** dans
   le bandeau (relevé sur les captures : le bouton se décale selon la longueur de l'accroche,
   donc chaque diapositive est centrée pour elle-même, pas calée sur un bord). */
.hero-texte {
    display: grid;
    align-self: center;
    flex: 1 1 545px;
    min-width: 0;
    text-align: right;
    /* la place du pavé vert, qui remonte sur le bas du bandeau */
    margin-bottom: 60px;
}

/* Un bloc de texte par personnage, permutés en fondu comme les personnages en face. Les trois
   sont empilés dans la même cellule de grille (`grid-area: 1 / 1`) : la cellule prend la
   hauteur de la plus grande, et chacun s'y centre pour son propre compte. Une superposition
   en `position: absolute` ne donnerait pas ça — la hauteur viendrait du seul premier bloc.
   `visibility` accompagne l'opacité : sans elle, les diapositives masquées resteraient
   atteignables au clavier et lues par les lecteurs d'écran. */

.hero-slide {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s;
}

.hero-slide.courante {
    opacity: 1;
    visibility: visible;
}

.hero-texte .etiquette {
    display: inline-block;
    background: var(--vert);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 20px;
    border-radius: 20px;
}

.hero-texte .hero-titre {
    color: var(--vert);
    font-size: 3.1em;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 18px 0 10px;
}

.hero-texte .hero-accroche {
    font-size: 1.25em;
    color: #555;
    margin: 0 0 32px;
}

/* Les trois personnages occupent la même case : ils se remplacent en fondu.
   La hauteur du bloc vient du premier, laissé dans le flux ; les deux autres sont
   superposés en absolu. */
.hero-visuel {
    position: relative;
    flex: 0 1 460px;
    align-self: flex-end;
    line-height: 0;
}

.hero-visuel .perso {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-visuel .perso:not(:first-child) {
    position: absolute;
    inset: 0;
}

.hero-visuel .perso.courante {
    opacity: 1;
}

/* Flèches de navigation, à mi-hauteur de chaque côté. Elles ne se montrent qu'au survol du
   bandeau (demande d'Olivier du 14/08/2026) : **une seconde pour apparaître, cinq pour
   disparaître** — d'où deux durées de transition, celle de l'état survolé l'emportant à
   l'entrée. Elles restent translucides même visibles, pour ne pas manger l'image.
   Le chevron lui-même est un carré sans deux bords, tourné de 45° : aucune police d'icônes. */
.hero-fleche {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 5s ease;
}

.hero-fleche.gauche { left: 26px; }
.hero-fleche.droite { right: 26px; }

.hero:hover .hero-fleche,
.hero:focus-within .hero-fleche {
    opacity: 0.75;
    transition: opacity 1s ease;
}

/* sélecteur au moins aussi précis que `.hero:hover .hero-fleche`, sinon il ne l'emporte pas */
.hero:hover .hero-fleche:hover,
.hero:focus-within .hero-fleche:hover {
    opacity: 1;
}

/* le chevron, aux couleurs du site, sans pastille et au trait fin comme sur les captures */
.hero-fleche::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border-top: 2px solid var(--vert);
    border-right: 2px solid var(--vert);
}

.hero-fleche.droite::before {
    transform: translateX(-6px) rotate(45deg);
}

.hero-fleche.gauche::before {
    transform: translateX(6px) rotate(-135deg);
}

/* Au clavier, la flèche doit rester visible : pas de survol possible. */
.hero-fleche:focus-visible {
    opacity: 1;
    outline: 2px solid var(--vert);
    outline-offset: 2px;
}

/* Écrans tactiles : sans survol, les flèches ne se montreraient jamais. Elles restent donc
   affichées en permanence. */
@media (hover: none) {
    .hero-fleche {
        opacity: 0.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visuel .perso,
    .hero-fleche,
    .hero:hover .hero-fleche {
        transition: none;
    }
}

/* ----- Bandeau « Pour tout renseignement » -----
   Pavé vert **à cheval sur le bord bas du bandeau d'accueil** : il remonte de la moitié de sa
   hauteur, moitié dedans, moitié dehors. La remontée vaut donc `padding` vertical +
   demi-hauteur de la ligne — à retoucher ensemble si l'un des deux bouge. Elle est annulée
   sous 800 px, où le pavé repasse pleine largeur sous le personnage. */
.renseignement {
    position: relative;
    z-index: 5;
    margin-top: -48px;
}

/* Le pavé se dimensionne sur son contenu et tient sur **une seule ligne** (libellé + bouton
   côte à côte), comme sur les captures — d'où `inline-flex` + `nowrap` plutôt qu'une largeur
   fixe. Il est centré par le `text-align` du conteneur. */
.renseignement .adapt-content {
    text-align: center;
}

.renseignement-bloc {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 100%;
    text-align: left;
    padding: 34px 46px;
    /* légèrement translucide (0,8), comme sur le site d'origine : le fond rayé du bandeau
       transparaît derrière le pavé */
    background: rgba(0, 156, 73, 0.8);
    color: #fff;
    font-size: 1.15em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* le bouton, lui, garde sa casse et ne doit pas être écrasé par le `nowrap` du pavé */
.renseignement-bloc .btn {
    flex: none;
}

/* ----- Accroche (module 115) ----- */
.presentation {
    padding: 70px 0 60px;
    text-align: center;
}

/* Le h1 de la page vit ici ; il garde la taille des autres titres de section. */
.presentation h1 {
    font-size: 2.1em;
    margin: 0;
}

.presentation p {
    text-align: justify;
    max-width: 950px;
    margin: 0 auto;
}

/* ----- Nos métiers (module 116) -----
   Fond gris clair **opaque**, comme sur les captures. C'est la section suivante (l'appel à
   l'action) qui porte l'image de fond. */
.metiers {
    background: var(--gris-clair);
    padding: 65px 0 70px;
    text-align: center;
}

.metiers h2 {
    margin: 0;
}

.metiers .introtext {
    margin: 0 0 45px;
    font-size: 1.15em;
}

.grille-metiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 30px;
}

.metier h3 {
    font-size: 1.15em;
    margin: 18px 0 0;
}

/* Le template animait ces vignettes au survol (classe « scale » du module d'origine) */
.metier .scale img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.metier:hover .scale img {
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .metier .scale img {
        transition: none;
    }

    .metier:hover .scale img {
        transform: none;
    }
}

/* ----- Les trois rubriques (modules 193, 212, 213) ----- */
.rubrique {
    padding: 70px 0;
    /* le menu sticky ne doit pas recouvrir le titre quand on arrive par une ancre */
    scroll-margin-top: 80px;
}

/* ⚠️ Pas d'alternance de fond entre les trois rubriques : les captures les montrent toutes
   les trois sur blanc. La classe `alt` qui grisait « Déploiement » a été retirée. */

.rubrique h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.rubrique-corps {
    display: flex;
    align-items: center;
    gap: 40px;
}

.rubrique-corps > .texte,
.rubrique-corps > .illustration {
    flex: 1;
    min-width: 0;
}

.rubrique-corps p {
    text-align: justify;
    margin: 0;
}

.rubrique-corps .illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.chiffres {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.chiffres li {
    padding: 6px 0;
    border-bottom: 1px solid var(--gris-bord);
}

.chiffres strong {
    color: var(--vert);
    font-size: 1.15em;
    margin-right: 8px;
}

/* ----- Appel à l'action (module 117) -----
   Le bandeau qui suit « Nos métiers » sur les captures : `images/bg2.jpg` (poignée de main sur
   schéma technique bleu, fournie par Olivier le 14/08/2026 — elle n'était pas dans les
   archives) posée **telle quelle**, sans voile. L'image est **fixe** : elle reste immobile
   pendant que le bandeau défile par-dessus. Tout le contenu est **aligné à gauche**.
   Le titre est la ligne fine, l'accroche en dessous est la ligne forte — c'est l'inverse de
   la hiérarchie habituelle, mais c'est ce que montrent les captures. */
.appel {
    background-color: #6f9fd0;
    background-image: url('../images/bg2.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 75px 0;
}

.appel h2 {
    color: #fff;
    font-size: 1.7em;
    font-weight: 400;
    text-transform: none;
    margin: 0 0 18px;
}

.appel .heading {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.25;
    max-width: 700px;
    margin-bottom: 32px;
}

/* `background-attachment: fixed` n'est pas tenu sur iOS et coûte cher au défilement sur
   mobile : on repasse au fond qui suit la section. Même repli si le visiteur demande à
   réduire les animations. */
@media (max-width: 950px), (prefers-reduced-motion: reduce) {
    .appel {
        background-attachment: scroll;
    }
}

/* ----- Nous contacter (modules 107, 106 et 203) -----
   Même fond rayé que le bandeau d'accueil (`17580.jpg`), comme sur le site d'origine. */
.contact {
    padding: 70px 0;
    scroll-margin-top: 80px;
    background-color: #fafafa;
    background-image: url('../images/17580.jpg');
    background-size: cover;
    background-position: center;
}

.contact h2 {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

.contact-corps {
    display: flex;
    gap: 45px;
    align-items: flex-start;
}

.contact-corps > * {
    flex: 1;
    min-width: 0;
}

.bloc-coord {
    margin-bottom: 30px;
}

.bloc-coord .libelle {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vert);
    margin-bottom: 6px;
}

.bloc-coord p {
    margin: 0;
    font-size: 1.05em;
}

.bloc-coord a {
    color: var(--texte);
    text-decoration: none;
}

.bloc-coord a:hover {
    color: var(--vert);
}

/* L'espacement des champs vient désormais de `.formulaire label` (socle commun), le
   formulaire d'accueil ayant les mêmes champs étiquetés que celui de la page contact. */

/* ----- Responsive ----- */
@media all and (max-width: 950px) {
    .hero-inner {
        min-height: 400px;
    }

    .hero-texte .hero-titre {
        font-size: 2.4em;
    }

    .hero-texte {
        margin-bottom: 45px;
    }

    /* la place réservée à droite se réduit avec le conteneur */
    .hero-inner {
        padding-right: 40px;
    }

    .hero-visuel {
        flex-basis: 340px;
    }

    .grille-metiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 800px) {
    /* Sur une colonne, le personnage passe sous le texte et tout se recentre. */
    .hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 0;
        gap: 10px;
    }

    .hero-texte {
        flex: none;
        text-align: center;
        margin-bottom: 0;
    }

    /* sur une colonne, plus rien à décaler : on revient à la gouttière commune, sinon le
       bandeau serait dissymétrique */
    .hero-inner {
        padding-right: 24px;
    }

    .hero-texte .hero-titre {
        font-size: 2.1em;
    }

    .hero-visuel {
        flex: none;
        width: min(300px, 70vw);
        align-self: center;
    }

    .hero-fleche {
        width: 42px;
        height: 42px;
        margin-top: -21px;
    }

    .hero-fleche.gauche { left: 8px; }
    .hero-fleche.droite { right: 8px; }

    /* Le pavé vert ne chevauche plus rien : il reprend sa place dans le flux. */
    .renseignement {
        margin-top: 0;
    }

    .renseignement .adapt-content {
        padding: 0;
    }

    /* trop étroit pour tenir sur une ligne : le pavé reprend toute la largeur et se replie */
    .renseignement-bloc {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        white-space: normal;
        text-align: center;
        gap: 16px;
        padding: 26px 20px;
    }

    /* ⚠️ `align-items` doit repasser à `stretch` en même temps que la direction : en colonne,
       les valeurs `center` / `flex-start` héritées du desktop cessent de régler l'alignement
       vertical pour régler la **largeur** des enfants — le formulaire et les illustrations ne
       s'étiraient plus et gardaient leur largeur intrinsèque. */
    .rubrique-corps,
    .contact-corps {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    /* sur une seule colonne, l'illustration repasse toujours sous le texte */
    .rubrique-corps.inverse {
        flex-direction: column-reverse;
    }

    .presentation p,
    .rubrique-corps p {
        text-align: left;
    }
}

@media all and (max-width: 520px) {
    .grille-metiers {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}