/*
 * custom.css — surcharges et ajouts CSS du projet.
 *
 * Toute règle CSS écrite après l'intégration initiale de la maquette va ici :
 * les vues ne doivent contenir ni balise <style> ni attribut style.
 *
 * theme.css porte l'intégration de la maquette elle-même ; ce fichier est
 * chargé après, il gagne donc à spécificité égale.
 */

/*
 * Quatre composants transverses vivent ici plutôt que dans la feuille d'une
 * rubrique : pastilles, étiquettes, filtres en pastilles et pagination servent
 * aussi bien aux réalisations qu'au blog, les dupliquer les ferait diverger.
 */

/* ------------------------------------------------ Pastilles de catégorie */

.pastille {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--corps-police);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--bleu-pastel);
    color: var(--bleu-nuit);
    transition: background .2s ease, color .2s ease;
}

.pastille:hover {
    background: var(--bleu);
    color: #FFFFFF;
}

.pastille--corail {
    background: #FFECEA;
    color: #B3251A;
}

.pastille--corail:hover {
    background: var(--corail);
    color: #FFFFFF;
}

.pastille--vert {
    background: #E4F7F0;
    color: #0B7554;
}

.pastille--vert:hover {
    background: var(--vert);
    color: #FFFFFF;
}

.pastille--nuit {
    background: #E7EDF3;
    color: var(--bleu-nuit);
}

.pastille--nuit:hover {
    background: var(--bleu-nuit);
    color: #FFFFFF;
}

/* ------------------------------------------------ Étiquettes d'un contenu */

/*
 * Une même étiquette sert aux catégories et aux tags posés sur une carte
 * (article ou réalisation) : seule l'icône les distingue. Elles ne sont pas
 * cliquables — le lien de la carte les englobe —, la navigation par filtre se
 * fait par les rangées de pastilles ci-dessous.
 */
.etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.etiquettes__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fond-gris);
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.etiquettes__item i {
    font-size: 11px;
    color: #FF8177;
}

/* Sur un fond bleu nuit (article à la une, carte vedette). */
.etiquettes--sombre .etiquettes__item {
    background: rgba(255, 255, 255, .08);
    color: var(--sur-sombre);
    font-size: 11.5px;
    padding: 5px 10px;
}

/* ------------------------------------------------ Filtres en pastilles */

.pills {
    margin: 34px 0 0;
}

.pills--tags {
    margin: 14px 0 30px;
}

/*
 * Le débordement, le défilement et les fondus latéraux viennent du composant
 * partagé `.defilement-fondu` (theme.css) : la piste ne pose ici que son
 * espacement propre.
 */
.pills__piste {
    gap: 9px;
    padding: 2px 0;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--bordure-2);
    background: var(--fond);
    font-family: var(--titre-police);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--texte-doux);
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.pill i {
    font-size: 11px;
}

.pill:hover {
    border-color: var(--bleu);
    color: var(--bleu-nuit);
}

.pill.est-active {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #FFFFFF;
}

/*
 * Seconde rangée : les mots-clés sont un filtre secondaire, ils se posent à
 * plat sur le fond gris et n'affichent leur contour qu'au survol.
 */
.pill--tag {
    font-family: var(--corps-police);
    font-weight: 600;
    background: var(--fond-gris);
    border-color: transparent;
    padding: 7px 13px;
}

.pill--tag i {
    font-size: 12px;
    color: #FF8177;
}

.pill--tag:hover {
    border-color: #FF8177;
    color: var(--texte-doux);
}

.pill--tag.est-active {
    background: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
    color: #FFFFFF;
}

.pill--tag.est-active i {
    color: #FFFFFF;
}

/* ------------------------------------------------ Pagination */

.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 48px 0 8px;
}

.pagination__liste {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--bordure-3);
    background: var(--fond);
    font-family: var(--corps-police);
    font-size: 14px;
    font-weight: 600;
    color: var(--texte-doux);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.pagination__lien:hover {
    border-color: var(--bleu);
    color: var(--bleu-nuit);
}

.pagination__element.est-active .pagination__lien {
    background: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
    color: #FFFFFF;
}

.pagination__element.est-desactive .pagination__lien {
    opacity: .4;
    cursor: default;
}

.pagination__ellipse span {
    padding: 0 4px;
    color: var(--texte-pale);
}

.pagination__compteur {
    font-family: var(--corps-police);
    font-size: 13px;
    color: var(--texte-clair);
}

/* ------------------------------------------------ Visuel non encore fourni */

/*
 * Emplacement d'image non encore fournie. Volontairement sobre et identifiable :
 * la page garde ses proportions définitives, et il suffit de renseigner un
 * chemin dans la vue ou en base pour que l'image prenne la place du bloc.
 *
 * S'emploie dans un conteneur positionné, dont il occupe toute la surface.
 * Ces règles vivaient dans societe.css alors que la convention est générale :
 * elles sont ici, avec les autres composants transverses.
 */
.visuel-attente {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: repeating-linear-gradient(
        45deg,
        var(--fond-gris) 0 12px,
        #F1F4F7 12px 24px
    );
    color: var(--bordure-tiret);
    font-size: 26px;
}

.visuel-attente__libelle {
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-pale);
    text-align: center;
}

/* ------------------------------------------------ Carrousel générique */

/*
 * Mécanisme partagé (voir le module `carrousels` de synertic.js) : un conteneur
 * `data-carrousel`, une piste `.carrousel__piste`, et facultativement des
 * flèches et des puces. Le défilement est natif et le calage en scroll-snap :
 * sans JavaScript, la piste reste parcourable au doigt et au clavier.
 *
 * Ces règles vivaient dans societe.css, la seule page à s'en servir à l'époque.
 * Le blog et les réalisations les reprennent désormais : elles sont transverses.
 */

.carrousel {
    position: relative;
}

.carrousel__piste {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
}

.carrousel__piste::-webkit-scrollbar {
    display: none;
}

.carrousel__piste:focus-visible {
    outline: 2px solid var(--bleu);
    outline-offset: 4px;
    border-radius: var(--rayon-l);
}

/* Trois vues de front ; la gouttière est déduite de la largeur des cartes. */
.carrousel__piste > * {
    flex: 0 0 calc((100% - 2 * 22px) / 3);
    scroll-snap-align: start;
    margin: 0;
}

.carrousel__nav {
    position: absolute;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid var(--bordure-2);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--bleu-nuit);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 30, 45, .16);
    transition: background-color .2s ease, color .2s ease;
    z-index: 3;
}

.carrousel__nav:hover {
    background: var(--bleu);
    color: #FFFFFF;
}

.carrousel__nav--precedent {
    left: -14px;
}

.carrousel__nav--suivant {
    right: -14px;
}

.carrousel__puces {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}

.carrousel__puce {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #D7DDE5;
    cursor: pointer;
    transition: background-color .4s ease, width .4s ease;
}

.carrousel__puce.est-active {
    width: 26px;
    background: var(--bleu-nuit);
}

@media (max-width: 991.98px) {
    .carrousel__piste > * {
        flex-basis: calc((100% - 22px) / 2);
    }

    .carrousel__nav--precedent {
        left: 6px;
    }

    .carrousel__nav--suivant {
        right: 6px;
    }
}

@media (max-width: 575.98px) {
    .carrousel__piste > * {
        flex-basis: 88%;
    }

    .carrousel__nav {
        display: none;
    }
}

/* ------------------------------------------------ Foire aux questions */

/*
 * Accordéon bâti sur `<details>` : il fonctionne sans JavaScript, et le seul
 * rôle du CSS est de masquer le marqueur natif et de pivoter le chevron.
 * Le bloc est partagé par les pages de service et « Qui sommes-nous ».
 */

.faq {
    background: var(--bleu-pastel);
    padding: 56px 0 90px;
    margin-top: 70px;
}

.faq__titre {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #182430;
    margin-bottom: 26px;
}

.faq__liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1160px;
    margin: 0 auto;
}

.faq__entree {
    background: var(--fond);
    border: 1px solid var(--bordure-2);
    border-radius: var(--rayon);
    overflow: hidden;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 14px 20px;
    cursor: pointer;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 16px;
    color: var(--titre);
    list-style: none;
}

/* Marqueur natif du `<summary>` : retiré des deux côtés, WebKit ayant le sien. */
.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:hover {
    color: var(--bleu-fonce);
}

.faq__chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fond-gris);
    color: var(--bleu);
    font-size: 11px;
    transition: transform .2s ease, background .2s ease;
}

.faq__entree[open] .faq__chevron {
    transform: rotate(180deg);
    background: var(--bleu-pastel);
}

.faq__reponse {
    padding: 0 20px 22px;
}

.faq__reponse p,
.faq__reponse li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--texte-doux);
}

.faq__reponse p + p,
.faq__reponse ul {
    margin-top: 14px;
}

.faq__reponse ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
}

@media (max-width: 575.98px) {
    .faq {
        padding: 40px 0 56px;
        margin-top: 48px;
    }

    .faq__question {
        font-size: 15px;
    }
}

/* ------------------------------------------------ Messages flash */

.message {
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: var(--rayon);
    border-left: 4px solid;
    font-family: var(--corps-police);
    font-size: 14.5px;
    line-height: 1.5;
    cursor: pointer;
}

.message.success {
    background: #E9F9F2;
    border-color: var(--vert);
    color: #0B6B4C;
}

.message.error {
    background: #FFEDEB;
    border-color: var(--corail);
    color: #A82A20;
}

.message.info,
.message.warning {
    background: var(--bleu-pastel);
    border-color: var(--bleu);
    color: var(--bleu-nuit);
}

.message.hidden {
    display: none;
}

/* ------------------------------------------------ Dépôt de fichier */

/*
 * `.formulaire label` (une classe + une balise) passe les libellés en bloc et
 * l'emporte sur `.depot-fichier` (une classe) : sans cette surcharge, le
 * trombone se retrouve au-dessus du libellé au lieu d'être à sa gauche.
 */
.formulaire .depot-fichier {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.depot-fichier__titre,
.depot-fichier__aide {
    display: block;
}

/* ------------------------------------------------ Champs en erreur */

.formulaire input.est-en-erreur,
.formulaire select.est-en-erreur,
.formulaire textarea.est-en-erreur,
.formulaire .depot-fichier.est-en-erreur {
    border-color: var(--corail);
    background: #FFF7F6;
}

.champ__erreur {
    display: block;
    margin-top: 5px;
    font-family: var(--corps-police);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--corail-texte);
}

/*
 * Pot de miel anti-robot : hors de l'écran plutôt qu'en `display: none`,
 * que certains robots savent détecter.
 */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * reCAPTCHA v3 : le badge flottant de Google chevaucherait le site, il est
 * remplacé par la mention exigée par ses conditions, à côté du bouton d'envoi.
 */
.grecaptcha-badge {
    visibility: hidden;
}

.mention-recaptcha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 240px;
    margin: 0;
    font-family: var(--corps-police);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--texte-pale);
}

.mention-recaptcha a {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------ Raccord avec le pied de page */

/*
 * Le pied de page est écarté du contenu par une marge. Quand la page se
 * termine par une section à fond plein, cette marge laisse une bande blanche
 * entre les deux fonds : la section touche alors directement le pied de page.
 */
main:has(> :last-child:is(.faq, .bandeau-articles, .bandeau-realisations, .bloc-ambition, .service-section--sombre)) + .pied {
    margin-top: 0;
}

/* ------------------------------------------------ Sous-menus de la navigation */

.entete__groupe {
    position: relative;
    display: flex;
    align-items: center;
}

/* Le déclencheur est un bouton — il n'ouvre pas de page — mais porte l'allure
   d'un lien de navigation. */
.entete__lien--deroulant {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--titre-police);
    font-size: 15px;
    font-weight: 600;
    color: var(--texte-gris);
    cursor: pointer;
}

.entete__lien--deroulant:hover {
    color: var(--bleu-fonce);
}

.entete__chevron {
    font-size: 9px;
    transition: transform .2s ease;
}

.entete__groupe.est-ouvert .entete__chevron {
    transform: rotate(180deg);
}

.sous-menu {
    display: none;
}

.sous-menu__lien {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--texte);
}

.sous-menu__lien:hover {
    background: var(--fond-gris);
    color: var(--bleu-fonce);
}

.sous-menu__lien.est-actif {
    background: var(--bleu-pastel);
    color: var(--bleu-fonce);
}

.sous-menu__libelle {
    display: block;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 14.5px;
}

.sous-menu__description {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--texte-pale);
}

@media (min-width: 992px) {
    .sous-menu {
        position: absolute;
        top: calc(100% + 16px);
        left: -14px;
        z-index: 120;
        min-width: 250px;
        padding: 8px;
        background: #fff;
        border: 1px solid var(--bordure-2);
        border-radius: var(--rayon-l);
        box-shadow: 0 24px 60px rgba(20, 30, 45, .12);
    }

    /* Zone tampon sous le déclencheur : la souris descend vers le panneau sans
       le refermer au passage. */
    .entete__groupe::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 18px;
    }

    .entete__groupe:hover .sous-menu,
    .entete__groupe:focus-within .sous-menu,
    .entete__groupe.est-ouvert .sous-menu {
        display: block;
    }
}

/* ------------------------------------------------ Sous-menus : panneau déroulant mobile */

@media (max-width: 991.98px) {
    /* Sous l'en-tête replié, le sous-menu s'ouvre en liste indentée. */
    .entete__groupe {
        flex-direction: column;
        align-items: stretch;
    }

    .entete__nav .entete__lien--deroulant {
        justify-content: space-between;
        width: 100%;
    }

    .entete__groupe.est-ouvert .sous-menu {
        display: block;
        margin-left: 4px;
        padding: 2px 0 8px 12px;
        border-left: 2px solid var(--bordure);
    }
}


/* ------------------------------------------------ Page contact : cadrage en conteneur */

/* Le conteneur porte déjà la gouttière, la section ne doit pas la redoubler. */
main > .container-fluid > .contact {
    padding-left: 0;
    padding-right: 0;
}

/* Cadré, le plan n'est plus un bandeau pleine largeur : il devient une boîte. */
main > .container-fluid > .plan {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
}

/* ------------------------------------------------ En-tête : barre collante réduite */

/*
 * `.entete` n'est plus la barre elle-même mais son rail : elle garde une hauteur
 * constante dans le flux, `.entete__barre` porte le décor et se réduit au
 * défilement. Sans ce découpage, la réduction changerait la hauteur d'un élément
 * en flux et ferait sauter tout le contenu de la page.
 */
.entete {
    display: block;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
    height: 78px;
    transition: padding .3s cubic-bezier(.4, 0, .2, 1);
}

.entete__barre {
    height: 78px;
    /* Largeur explicite : `auto` ne s'interpolerait pas vers la boîte réduite. */
    width: 100%;
    padding: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    border-bottom-color: var(--bordure);
    transition: height .3s cubic-bezier(.4, 0, .2, 1),
                width .3s cubic-bezier(.4, 0, .2, 1),
                border-radius .3s ease,
                border-color .3s ease,
                box-shadow .3s ease;
}

/*
 * Le décor reste pleine largeur, la rangée logo / menu passe par le
 * `container-fluid` commun : elle est donc bornée et gouttiérée exactement comme
 * le contenu des pages, y compris sur les très grands écrans.
 */
.entete__contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    height: 100%;
    transition: padding .3s cubic-bezier(.4, 0, .2, 1);
}

/*
 * État réduit : la barre se resserre en boîte flottante. Le rail compense la
 * hauteur perdue par son propre padding (9 + 60 + 9 = 78), la page ne bouge pas.
 */
.entete.est-collee {
    padding: 9px 0;
}

.entete.est-collee .entete__barre {
    height: 60px;
    /* La boîte se détache des bords, et reste calée sur la largeur du contenu. */
    width: calc(100% - 48px);
    max-width: var(--largeur-max);
    margin: 0 auto;
    background: rgba(255, 255, 255, .96);
    border-color: var(--bordure-2);
    border-radius: var(--rayon-xl);
    box-shadow: 0 16px 40px rgba(3, 57, 95, .12);
}

/* La boîte flottante borne déjà la largeur : le conteneur interne ne fait plus
   que poser la gouttière réduite, sinon le contenu serait cadré deux fois. */
.entete.est-collee .entete__contenu {
    max-width: none;
    padding: 0 22px;
}

.entete__logo img {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}

.entete.est-collee .entete__logo img {
    height: 30px;
}

/* Le bouton reste au-dessus du tiroir et de son voile pour servir de fermeture. */
.entete__burger {
    position: relative;
    z-index: 150;
}

/* Trois traits qui se croisent en X à l'ouverture. */
.entete__burger-traits {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.entete__burger-traits span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .25s ease, transform .25s ease, opacity .15s ease;
}

.entete__burger-traits span:nth-child(1) {
    top: 0;
}

.entete__burger-traits span:nth-child(2) {
    top: 6px;
}

.entete__burger-traits span:nth-child(3) {
    top: 12px;
}

.entete__burger[aria-expanded="true"] .entete__burger-traits span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.entete__burger[aria-expanded="true"] .entete__burger-traits span:nth-child(2) {
    opacity: 0;
}

.entete__burger[aria-expanded="true"] .entete__burger-traits span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* Voile du tiroir mobile : inerte tant qu'il n'est pas visible. */
.voile-menu {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(3, 57, 95, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.voile-menu.est-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;
}

/* Le fond ne défile plus derrière le tiroir ouvert. */
body.est-verrouille {
    overflow: hidden;
}

/* ------------------------------------------------ Menu mobile : tiroir plein écran */

@media (max-width: 991.98px) {
    /*
     * Le flou de la barre créerait un bloc conteneur : le tiroir en `fixed` se
     * positionnerait alors par rapport à elle, plus par rapport au viewport.
     */
    .entete__barre {
        backdrop-filter: none;
    }

    .entete__contenu {
        gap: 16px;
    }

    .entete.est-collee .entete__barre {
        width: calc(100% - 28px);
    }

    .entete.est-collee .entete__contenu {
        padding: 0 16px;
    }

    /*
     * Tiroir plein écran, glissé depuis la droite. Il reste dans le flux du DOM
     * (même balise qu'en desktop) : seule sa position change.
     */
    .entete__nav,
    .entete__nav.est-ouvert {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 130;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        padding: 96px 20px calc(28px + env(safe-area-inset-bottom));
        border-top: 0;
        background: var(--fond);
        box-shadow: -26px 0 70px rgba(3, 57, 95, .18);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .entete__nav {
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .34s;
    }

    .entete__nav.est-ouvert {
        visibility: visible;
        transform: none;
        transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility 0s;
    }

    /* Les entrées arrivent en cascade derrière le panneau. */
    .entete__nav > * {
        opacity: 0;
        transform: translateX(24px);
        transition: opacity .25s ease, transform .25s ease;
    }

    .entete__nav.est-ouvert > * {
        opacity: 1;
        transform: none;
    }

    .entete__nav.est-ouvert > :nth-child(1) { transition-delay: .10s; }
    .entete__nav.est-ouvert > :nth-child(2) { transition-delay: .15s; }
    .entete__nav.est-ouvert > :nth-child(3) { transition-delay: .20s; }
    .entete__nav.est-ouvert > :nth-child(4) { transition-delay: .25s; }
    .entete__nav.est-ouvert > :nth-child(5) { transition-delay: .30s; }
    .entete__nav.est-ouvert > :nth-child(6) { transition-delay: .35s; }
    .entete__nav.est-ouvert > :nth-child(7) { transition-delay: .40s; }
    .entete__nav.est-ouvert > :nth-child(8) { transition-delay: .45s; }
    .entete__nav.est-ouvert > :nth-child(n + 9) { transition-delay: .50s; }

    .entete__nav .entete__lien,
    .entete__nav .entete__lien--deroulant,
    .entete__nav .bouton {
        padding: 13px 12px;
        border-radius: 12px;
        font-size: 16px;
    }

    .entete__nav .entete__lien {
        color: var(--titre);
        text-align: left;
    }

    .entete__nav .entete__lien:hover,
    .entete__nav .entete__lien.est-actif {
        background: var(--fond-gris);
        color: var(--bleu-fonce);
    }

    .entete__nav .bouton {
        justify-content: center;
        margin-top: 14px;
    }

    /* Sous-menu : accordéon dans le tiroir, plus un panneau flottant. */
    .entete__groupe {
        flex-direction: column;
        align-items: stretch;
    }

    .entete__lien--deroulant {
        justify-content: space-between;
        width: 100%;
    }

    .entete__groupe.est-ouvert .sous-menu {
        display: block;
        padding-left: 10px;
    }
}

/* Au-delà de la tablette, le tiroir et son voile n'ont plus lieu d'être. */
@media (min-width: 992px) {
    .voile-menu {
        display: none;
    }
}

/* ------------------------------------------------ Animations réduites */

@media (prefers-reduced-motion: reduce) {
    .entete,
    .entete__barre,
    .entete__contenu,
    .entete__logo img,
    .entete__burger-traits span,
    .entete__nav,
    .entete__nav > *,
    .voile-menu {
        transition-duration: .01ms;
        transition-delay: 0s;
    }
}

/* ------------------------------------------------ Pages administrables */

/*
 * Les blocs sont rendus depuis la base (voir `templates/element/blocs/`) et
 * leurs textes viennent de l'éditeur : les balises génériques (`h3`, `h4`,
 * `ul`, `p`) doivent y recevoir le style que les vues statiques donnaient à
 * des classes dédiées.
 */
.hero__chapo p,
.section__chapo p,
.carte-expertise p:last-child,
.carte-approche p:last-child,
.carte-service p:last-child,
.carte-mise-en-avant p:last-child,
.carte-depliante__corps p:last-child,
.exigence p:last-child,
.bloc-ambition__texte p:last-child {
    margin-bottom: 0;
}

.service-colonne h3,
.exigence h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--titre);
}

.service-section--sombre .service-colonne h3,
.service-section--sombre .service-colonne h4 {
    color: #FFFFFF;
}

.service-colonne h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--service-texte, var(--texte-doux));
    font-family: var(--corps-police);
}

.service-colonne ul,
.service-texte ul,
.carte-depliante__corps ul,
.exigence ul,
.bloc-ambition__texte ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 22px;
}

.service-colonne ul li,
.service-texte ul li,
.carte-depliante__corps ul li,
.exigence ul li,
.bloc-ambition__texte ul li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--service-texte, var(--texte-doux));
    font-family: var(--corps-police);
}

/* La colonne du bloc « Texte et image » espace déjà ses enfants. */
.bloc-ambition__texte ul {
    margin-top: 0;
}

.service-texte.etape__corps p {
    margin-bottom: 0;
}

/* Le texte de l'encadré « valeurs » : chapô puis liste à puces carrées. */
.carte-valeurs__texte p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sur-sombre);
    margin-top: 8px;
    padding-right: 50px;
}

.carte-valeurs__texte ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carte-valeurs__texte ul li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #FFFFFF;
}

.carte-valeurs__texte ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #BCE4FC;
}

/* Une grille de cartes qui suit une section de texte sans titre s'y colle. */
.service-section--suite {
    padding-top: 0;
}

/* Le bloc de pastilles « ADN » prolonge la section qui le précède. */
.pastilles-section {
    padding-top: 0;
}

/* Contenu libre : la mise en page d'un article, pleine largeur. */
.contenu-libre {
    max-width: 900px;
}

.contenu-libre img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Conteneur d'un visuel non encore fourni : il garde une hauteur lisible. */
.a-visuel-attente {
    position: relative;
    min-height: 260px;
    border-radius: 16px;
    overflow: hidden;
}

/* La grille des projets de l'accueil est cliquable : la carte entière est un lien. */
.grille-realisations .realisation {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Un parcours qui n'a pas sept étapes se replie en grille : le tracé ne colle plus. */
.parcours--grille .parcours__trace {
    display: none;
}

.parcours--grille .parcours__etapes {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.parcours--grille .parcours__etape {
    position: static;
    width: auto;
}

/* Aperçu d'une page non publiée, réservé aux administrateurs connectés. */
.apercu-brouillon {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* Dernières actualités sur une page administrable : trois cartes par rangée. */
.grille-articles--accueil {
    margin-top: 28px;
}

/*
 * Images dont HtmlHelper a posé les dimensions : les attributs réservent la place
 * avant le chargement, mais ne doivent pas s'imposer à la mise en page. Sans ce
 * retour à `auto`, une image ne fixant que sa hauteur en CSS serait déformée.
 * `:where()` ne compte pas dans la spécificité : toute règle du site l'emporte.
 */
:where(img[data-dimensions]) {
    width: auto;
    height: auto;
}