/* ===== Styles propres à la page d'accueil ===== */

/* ----- Héro (carrousel) -----
   Trois visuels plein cadre, navigation par flèches sur les bords. Un dégradé sombre
   partant de la gauche assure la lisibilité du texte blanc. */
.hero {
    position: relative;
    background: var(--bleu-section);
    overflow: hidden;
}

/* ----- Fond animé du héro (« rideau ») -----
   Le fond est découpé en bandes verticales qui se retournent une à une, de gauche à
   droite, pendant que le texte fait un simple fondu. Le rideau est construit par
   scriptAccueil.js ; sans JavaScript, on retombe sur le background-image de chaque
   .slide, défini plus bas. */
.hero-fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    perspective: 1400px;
    background-color: var(--bleu-section);
}

.hero-fond .bande {
    position: relative;
    flex: 1 1 0;
    transform-style: preserve-3d;
    transition: transform 500ms ease-in-out;
}

/* les faces débordent d'un pixel sur la droite : sans ce recouvrement, les largeurs
   fractionnaires des 30 bandes laissent apparaître de fins liserés. Le débordement
   est d'un seul côté pour que la largeur de la face reste une base de calcul simple
   pour le visuel qu'elle contient (voir .hero-fond .visuel). */
.hero-fond .face {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -1px;
    overflow: hidden;
    backface-visibility: hidden;
}

.hero-fond .face.ar {
    transform: rotateY(180deg);
}

/* Chaque face ne montre qu'une tranche du visuel, mais le visuel doit être cadré
   sur le héro ENTIER : le poser en background sur la face avec `3000% auto` calait
   sa largeur sur celle du héro et laissait la hauteur suivre le ratio natif
   (2000 × 1334, soit 1,499) — un `contain` horizontal, pas un `cover`. Sous
   ~960 px de large le fond devenait plus court que le héro et laissait apparaître
   le bleu de .hero-fond : 260 px d'image pour 640 px de héro en 390 px de large.
   D'où ce calque interne, large comme le héro et décalé de sa tranche, sur lequel
   `cover` s'applique enfin à la bonne surface — même cadrage que .slide, et qui
   suit le redimensionnement sans le moindre calcul en JavaScript.
   Les 1 px : la face mesure (bande + 1) de large, donc `100% - 1px` vaut exactement
   une bande et `3000% - 30px` exactement la largeur du héro. */
.hero-fond .visuel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--i) * (100% - 1px) * -1);
    width: calc(3000% - 30px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* rideau actif : le fond n'est plus porté par les slides */
.hero.bandes-actives .slide {
    background-image: none;
}

/* Les 3 slides occupent la même cellule de grille : ils se superposent pour le
   fondu, mais la hauteur reste celle du plus grand — pas de débordement possible
   sur les petits écrans, contrairement à un empilement en position absolue. */
.hero .slides {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 700px;
}

.hero .slide {
    position: relative;
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
}

/* Fonds relevés dans a2000_nextend2_smartslider3_slides */
.hero .slide-1 { background-image: url('../images/fd-1.jpg'); }
.hero .slide-2 { background-image: url('../images/fd-2.jpg'); }
.hero .slide-3 { background-image: url('../images/fd-3.jpg'); }

/* voile dégradé, posé au-dessus de la photo mais sous le contenu */
.hero .slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 45, 76, 0.92) 0%, rgba(0, 45, 76, 0.15) 100%);
}

.hero .slide.visible {
    opacity: 1;
    pointer-events: auto;
}

.hero .slide-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    /* en haut : la place de la barre de coordonnées et de la barre de menu,
       posées en surimpression du visuel */
    padding-top: 170px;
    padding-bottom: 0;
}

/* le personnage détouré est à gauche, le texte à droite */
.hero .slide-image {
    flex: 1;
    text-align: center;
}

/* `display: block` : en inline, l'image repose sur la ligne de base et laisse le
   jambage sous elle — quelques pixels d'écart entre le bas du personnage et la
   carte des compteurs, visibles une fois le padding du slide ramené à 0. */
.hero .slide-image img {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.hero .slide-texte {
    flex: 1;
    color: #fff;
}

.hero .slide-texte h1 {
    color: #fff;
    margin: 0 0 25px;
    font-size: 2.2em;
}

.hero .sur-titre {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    margin: 0 0 10px;
    color: #fff;
}

/* flèches carrées bleues, centrées verticalement sur les bords */
.hero-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: var(--bleu);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-fleche:hover {
    background: var(--bleu-fonce);
}

.hero-fleche.prec { left: 20px; }
.hero-fleche.suiv { right: 20px; }

.hero-fleche svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* ----- Compteurs -----
   Carte blanche qui chevauche le bas du héro. Sans icône : le site ne charge aucune
   police d'icônes. */
.compteurs {
    position: relative;
    z-index: 10;
    margin-top: -80px;
}

.grille-compteurs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--ombre-carte);
    padding: 45px 40px;
}

.compteur {
    flex: 1 1 200px;
    max-width: 300px;
}

.compteur .titre {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--gris-texte);
}

.compteur .nombre {
    margin: 0;
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 40px;
    line-height: 1.2;
    color: var(--bleu-section);
    /* chiffres de largeur constante : sans cela, chaque palier du décompte change
       la largeur du texte et fait vibrer toute la ligne */
    font-variant-numeric: tabular-nums;
}

/* Le décompte va de « 0 » à « 1 390 000 » : le nombre de caractères change en
   cours de route et la largeur avec lui, ce qui décalait le symbole et
   réajustait la colonne pendant toute l'animation. scriptAccueil.js réserve
   dès le départ la largeur de la valeur finale (voir `reserverLargeur`) ;
   inline-block est ce qui rend cette largeur applicable. */
.compteur .count {
    display: inline-block;
    text-align: left;
}

.compteur .symbol {
    font-size: 21px;
}

/* ----- Organisation ----- */
.organisation {
    padding: 80px 0;
}

.organisation h2 {
    text-align: center;
    margin: 0 0 55px;
}

.orga-grille {
    display: flex;
    align-items: center;
    gap: 50px;
}

.orga-image {
    flex: 1;
    text-align: center;
}

.orga-texte {
    flex: 1.1;
}

.orga-items {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 25px;
}

.orga-item {
    flex: 1 1 calc(50% - 25px);
    min-width: 220px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* vignette carrée encadrée */
.orga-item img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    flex: none;
    border: 1px solid #e8eaf2;
    padding: 8px;
    background: #fff;
}

.orga-item h4 {
    margin: 0 0 4px;
    font-size: 1.4em;
}

.orga-item p {
    margin: 0;
}

/* ----- Cycle de vie -----
   Bandeau bleu foncé, bulles blanches numérotées « en épingle » reliées par des flèches. */
.cycle {
    padding: 75px 0 85px;
    background: var(--bleu-section);
    text-align: center;
}

.cycle h3 {
    margin: 0 0 60px;
    color: #fff;
    font-size: 2.2em;
}

.cycle-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.cycle-etapes li {
    flex: 1 1 0;
    min-width: 150px;
}

/* la flèche est portée par un élément de séparation entre deux étapes
   (masqué aux lecteurs d'écran : c'est une liaison purement graphique) */
.cycle-etapes li.sep {
    flex: 0 0 60px;
    min-width: 0;
    margin-top: 14px;
}

.cycle-fleche {
    fill: #fff;
    height: 26px;
}

.cycle-etapes .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--bleu-section);
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 24px;
    position: relative;
    margin-bottom: 65px;
}

/* la « queue » de l'épingle sous la bulle : le trait s'estompe vers le bas */
.cycle-etapes .num::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 45px;
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.cycle-etapes h6 {
    margin: 0;
    color: #fff;
    font-size: 1.15em;
}

/* ----- Nos atouts -----
   6 cartes blanches à ombre portée, titre de section en bleu foncé. */
.atouts {
    padding: 80px 0;
}

.atouts h3 {
    margin: 0 0 12px;
    text-align: center;
    color: var(--bleu-section);
    font-size: 2.2em;
}

.atouts .chapo {
    margin: 0 0 45px;
    text-align: center;
}

.grille-atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.atout {
    position: relative;
    overflow: hidden;
    flex: 1 1 calc(33.333% - 30px);
    min-width: 250px;
    background: #fff;
    box-shadow: var(--ombre-carte);
    padding: 32px 30px 38px;
    transition: background-color 0.45s ease;
}

/* Survol : la carte se remplit de bleu en fondu et deux équerres blanches se
   tracent depuis le coin haut-gauche et le coin bas-droit (75 % de la largeur,
   50 % de la hauteur). Chaque pseudo-élément porte les deux barres d'un coin,
   dessinées en dégradés et animées par leur background-size. */
.atout::before,
.atout::after {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-size: 0 1px, 1px 0;
    transition: background-size 0.45s ease;
}

.atout::before {
    background-position: 0 0, 0 0;
}

.atout::after {
    background-position: 100% 100%, 100% 100%;
}

.atout:hover {
    background-color: var(--bleu-section);
}

.atout:hover::before,
.atout:hover::after {
    background-size: 75% 1px, 1px 50%;
}

.atout h4 {
    margin: 0 0 10px;
    font-size: 1.4em;
    transition: color 0.45s ease;
}

.atout p {
    margin: 0;
    transition: color 0.45s ease;
}

.atout:hover h4,
.atout:hover p {
    color: #fff;
}

/* ----- Formules -----
   Bandeau bleu foncé : titre de section et en-tête de chaque offre sont blancs
   sur le bleu, et le corps blanc de chaque offre déborde sous le bandeau. */
.formules {
    background: var(--bleu-section);
    padding: 70px 0 0;
    margin: 0 0 90px;
    height: 305px;
}

.formules > .adapt-content > h2 {
    margin: 0 0 45px;
    text-align: center;
    color: #fff;
}

.grille-formules {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.formule {
    flex: 1 1 calc(33.333% - 30px);
    min-width: 260px;
}

.formule-entete {
    text-align: center;
    color: #fff;
    padding-bottom: 25px;
}

.formule-entete h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1.9em;
    text-transform: uppercase;
}

.formule-entete .sous-titre {
    display: block;
    color: #fff;
}

/* le corps déborde du bandeau bleu ; .arguments compense en padding-top */
.formule-corps {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    padding: 25px 5px;
    margin-bottom: -110px;
}

.formule-corps img {
    width: 110px;
    height: auto;
    flex: none;
}

.formule-corps ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.formule-corps li {
    padding: 0 0 0 18px;
    line-height: 24px;
    position: relative;
}

.formule-corps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gris-texte);
}

/* ----- Arguments illustrés ----- */
.arguments {
    padding: 150px 0 80px;
}

.grille-arguments {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.argument {
    flex: 1 1 calc(33.333% - 30px);
    min-width: 260px;
}

.argument img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin-bottom: 22px;
}

.argument h4 {
    margin: 0 0 8px;
    font-size: 1.5em;
}

.argument p {
    margin: 0;
}

/* ----- Carte -----
   Le plan Google n'est insere qu'au clic : voir le commentaire dans index.html et
   MAPS-SANS-TIERS.md, a la racine du chantier. */
.carte {
    position: relative;
    display: flex;
    height: 500px;
    overflow: hidden;
}

.carte__plan {
    /* « cover » depuis le centre : l'image est cadree pour que l'adresse
       tombe pile au milieu, l'epingle peut donc rester a 50/50. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carte__epingle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);   /* la pointe sur le point */
    fill: var(--bleu-section);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    pointer-events: none;
}

.carte__credit {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2px 6px;
    font-size: 10px;
    color: #555;
    background: rgba(255, 255, 255, .75);
}

.carte__credit a { color: inherit; }

/* Le cadre Google se pose PAR-DESSUS l'image, qui reste dans le flux et
   continue de donner sa hauteur au bloc : rien ne bouge au clic. */
.carte iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.carte__voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
    background: rgba(246, 247, 251, .6);
    opacity: 0;
    transition: opacity .25s ease;
}

/* Au survol, et au clavier : sans « focus-within » le bouton serait
   atteignable en tabulation mais invisible. */
.carte:hover .carte__voile,
.carte:focus-within .carte__voile { opacity: 1; }

/* Sur ecran tactile il n'y a pas de survol : le voile reste affiche, sinon
   ni le bouton ni la mention Google ne seraient jamais visibles. */
@media (hover: none) {
    .carte__voile { opacity: 1; }
}

.carte__adresse {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--noir);
}

.carte__bouton {
    padding: 10px 22px;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    background: var(--bleu-section);
    cursor: pointer;
}

.carte__bouton:hover { background: var(--bleu-fonce); }

.carte__mention {
    /* Discret mais lisible : c'est l'information qui permet au visiteur de
       choisir, elle ne doit pas etre illisible pour autant. */
    max-width: 46ch;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gris-texte);
}

@media (max-width: 640px) {
    .carte { height: 360px; }
}

/* ----- Contact -----
   Bandeau bleu foncé et carte blanche qui le chevauche par le bas. */
.contact {
    background: var(--bleu-section);
    padding: 70px 0 0;
    margin-bottom: 550px;
    height: 300px;
}

.contact h2 {
    text-align: center;
    margin: 0 0 45px;
    color: #fff;
}

.contact-carte {
    background: #fff;
    box-shadow: var(--ombre-carte);
    padding: 45px 40px;
    margin-bottom: -130px;
}

/* ----- Responsive ----- */

/* Quatre compteurs de front ne tiennent qu'à pleine largeur : dès que le
   conteneur passe sous ses 1140 px, les cases deviennent trop étroites et le
   symbole (« boites ») décroche sur une deuxième ligne. Deux colonnes en
   dessous, une seule sous 500 px. */
@media all and (max-width: 1140px) {
    .compteur {
        flex: 1 1 calc(50% - 30px);
    }

    /* Sous la largeur maximale du conteneur, les colonnes se resserrent et les
       listes d'offres passent sur plus de lignes : le corps des cartes grandit,
       alors que la hauteur de 305 px et la réserve de 150 px d'`.arguments` sont
       calibrées pour la mise en page pleine largeur. Le contenu passait donc sous
       la section suivante.
       Le bandeau redevient de hauteur libre, et l'aplat bleu de 305 px est obtenu
       par un dégradé à arrêt net : l'effet « cartes qui débordent du bandeau » est
       conservé, mais la section peut grandir autant que son contenu l'exige. */
    .formules {
        height: auto;
        background: linear-gradient(to bottom, var(--bleu-section) 305px, transparent 305px);
        margin-bottom: 0;
    }

    /* le débordement est désormais porté par le dégradé, plus par une marge
       négative — celle-ci ferait chevaucher les rangées dès qu'il y en a deux */
    .formule-corps {
        margin-bottom: 0;
    }

    .arguments {
        padding-top: 80px;
    }
}

@media all and (max-width: 900px) {
    .orga-grille {
        flex-direction: column;
    }

    /* Toute la configuration verticale du héro s'applique dès 900 px, en même
       temps que le passage de l'en-tête en mode mobile (styles.css) : ces deux
       bascules sont solidaires. Entre 801 et 900, le héro passait en colonne
       mais gardait le padding de 170 px calculé pour un en-tête flottant, alors
       que celui-ci était déjà revenu dans le flux — le texte se retrouvait sans
       respiration sous la barre de menu. */
    .hero .slide-inner {
        flex-direction: column-reverse;
        text-align: center;
        gap: 25px;
        padding-top: 60px;
        padding-bottom: 0;
        /* .slide-inner est aussi un .adapt-content, donc en `margin: auto`. Les
           trois slides partageant une même cellule de grille, les deux plus courts
           disposent d'espace libre que ce margin auto répartissait moitié en haut,
           moitié en bas — d'où un écart entre l'image et la carte des compteurs sur
           deux slides sur trois. À 0, l'espace passe entièrement en haut et les
           trois personnages s'alignent sur le bas du héro. */
        margin-bottom: 0;
    }

    /* le voile suit la mise en page : sombre vers le bas quand le texte passe
       au-dessus de l'image, et non plus vers la gauche */
    .hero .slide::before {
        background: linear-gradient(to bottom, rgba(0, 45, 76, 0.55) 0%, rgba(0, 45, 76, 0.92) 60%);
    }

    .hero .slides {
        min-height: 760px;
    }

    /* Trois offres de front ne tiennent plus : à 870 px les colonnes tombent à
       260 px (le `min-width`) et les listes débordent, à 801 px le flex passe à
       deux colonnes — état bâtard où la seconde rangée recouvrait la suite.
       On saute directement de trois colonnes à une seule, sans passer par deux. */
    .formule {
        flex: 1 1 100%;
    }

    /* en colonne unique, un aplat de 305 px ne couvrirait que la première offre :
       le bandeau redevient un fond plein qui contient les trois cartes */
    .formules {
        background: var(--bleu-section);
        padding-bottom: 50px;
    }
}

@media all and (max-width: 800px) {
    .hero .slides {
        min-height: 640px;
    }

    .compteurs {
        margin-top: 0;
    }

    .grille-compteurs {
        padding: 35px 25px;
    }

    /* Le plus grand nombre déborde de sa case à cette largeur : la police descend
       pour qu'il tienne sur une ligne. */
    .compteur .nombre {
        font-size: 34px;
    }

    /* `.formule` passe en colonne unique dès 900 px, avec la neutralisation de la
       hauteur du bandeau — voir les paliers 1140 et 900 plus haut. */
    .atout, .argument {
        flex: 1 1 100%;
    }

    .arguments {
        padding-top: 70px;
    }

    .cycle-etapes {
        flex-wrap: wrap;
        gap: 35px 0;
    }

    .cycle-etapes li {
        flex: 1 1 50%;
    }

    .cycle-etapes li.sep {
        display: none;
    }

    /* Même cause que .formules : le formulaire empilé dépasse de très loin les
       300 px du bandeau, et la réserve de 550 px calculée pour le bureau ne
       suffisait plus — la carte passait sous le pied de page. Hauteur libre,
       plus de chevauchement : l'aplat bleu contient la carte. */
    .contact {
        height: auto;
        padding-bottom: 50px;
        margin-bottom: 0;
    }

    .contact-carte {
        padding: 30px 20px;
        margin-bottom: 0;
    }
}

@media all and (max-width: 500px) {
    /* deux colonnes ne suffisent plus : « 1 390 000 » y déborde de sa case */
    .compteur {
        flex: 1 1 100%;
    }
}