/* ==========================================================================
   NEO CONSULTING — CSS custom de l'application
   Le thème de base vit dans css/theme.css (copie de webroot/theme/css/theme.css).
   Tout ajustement propre à l'intégration CakePHP se met ici — jamais dans les vues.

   Sommaire
   1. Messages flash
   2. En-tête de page intérieure
   3. Page contact : grille, coordonnées
   4. Formulaire
   5. Venir au cabinet (carte + accès)
   6. Page cabinet : l'équipe
   7. Page cabinet : la méthode
   8. Page cabinet : les outils
   9. Responsive
  10. Blog : filtres et grille d'articles
  11. Blog : carte d'article
  12. Blog : page article
  13. Blog : auteur
  14. Blog : appels à l'action et encadrés
  15. Blog : pagination
  16. Blog : responsive
  17. Mentions légales
  18. Menu déroulant des services
  19. Page service : en-tête et blocs de présentation
  20. Cartes de service et carrousel mobile
  21. Bloc expert et CTA avec formulaire
  22. Services : responsive
  23. Bandes défilables horizontalement (fil d'Ariane, filtres du blog)
  24. Fiche auteur : bandeau d'identité sur mobile
  25. Blocs de page service (composition administrable)
  26. Blocs de page service : responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Messages flash
   -------------------------------------------------------------------------- */
.message {
    max-width: 1180px;
    margin: 1rem auto 0;
    padding: 0.95rem 1.2rem;
    border-radius: var(--rayon, 14px);
    background: var(--beige-clair, #faf4e4);
    border: 1px solid var(--trait, rgba(30, 77, 43, 0.16));
    border-left: 3px solid var(--olive, #a2b86d);
    color: var(--encre, #16211a);
    font-family: var(--f-corps, system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.55;
}

.message.success {
    border-left-color: var(--foret, #1e4d2b);
}

.message.error {
    background: #fdf3f1;
    border-color: rgba(176, 67, 47, 0.28);
    border-left-color: #b0432f;
    color: #8c2c1c;
}

.message.hidden {
    display: none;
}

/* Dans une carte, le message reprend toute la largeur disponible. */
.formulaire-cadre .message {
    max-width: none;
    margin: 0 0 1.6rem;
}

/* --------------------------------------------------------------------------
   2. En-tête de page intérieure
   -------------------------------------------------------------------------- */
.entete-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(158deg, var(--foret-encre) 0%, var(--foret) 58%, var(--foret-nuit) 100%);
    padding-top: clamp(8.5rem, 14vw, 11rem);
    padding-bottom: clamp(7rem, 12vw, 9.5rem);
}

.entete-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -180px;
    top: -220px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(162, 184, 109, 0.22) 0%, transparent 66%);
    pointer-events: none;
}

.entete-page .surtitre {
    color: var(--olive-vif);
}

.fil-ariane {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(243, 233, 207, 0.5);
    margin-bottom: 2.1rem;
}

.fil-ariane a {
    color: rgba(243, 233, 207, 0.72);
    transition: color 0.25s ease;
}

.fil-ariane a:hover {
    color: var(--olive-vif);
}

.fil-ariane i {
    font-size: 0.62rem;
    opacity: 0.6;
}

.entete-page__titre {
    font-size: clamp(2.4rem, 5.6vw, 4.15rem);
    line-height: 0.99;
    letter-spacing: -0.04em;
    color: var(--beige);
    max-width: 16ch;
    margin-bottom: 1.5rem;
}

.entete-page__titre em {
    font-style: normal;
    color: var(--olive-vif);
}

.entete-page__chapo {
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    color: rgba(243, 233, 207, 0.78);
    max-width: 58ch;
    line-height: 1.62;
    margin-bottom: 2.2rem;
}

.entete-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

/* En-tête illustré par une photo ------------------------------------------
   La photo est en portrait : elle tient la colonne de droite et se dissout
   vers la gauche dans un dégradé qui reprend exactement les mêmes verts, de
   sorte qu'on ne voit jamais où l'image s'arrête.

   Trois calques superposés, dans cet ordre :
     1. la photo, légèrement désaturée ;
     2. `__teinte`, en `mix-blend-mode: color` — elle garde la lumière de la
        photo et lui impose la teinte du vert forêt (même parti pris que le
        hero d'accueil, en plus franc) ;
     3. `__voile`, un simple assombrissement qui garantit le contraste du
        texte et referme le bas de la section.

   Le masque est partagé par la photo et sa teinte (variable `--_photo-masque`)
   pour qu'elles s'effacent ensemble, sans liseré de raccord.
   -------------------------------------------------------------------------- */
.entete-page--photo {
    --_photo-largeur: min(54%, 660px);
    --_photo-masque: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 22%,
        rgba(0, 0, 0, 0.72) 46%,
        #000 66%
    );
    display: flex;
    align-items: center;
    min-height: min(80vh, 760px);
    background: linear-gradient(
        112deg,
        var(--foret-encre) 0%,
        var(--foret-nuit) 34%,
        var(--foret) 70%,
        #276139 100%
    );
}

.entete-page--photo > .enveloppe {
    position: relative;
    z-index: 1;
}

/* Le texte ne passe jamais sous la photo. */
.entete-page--photo .entete-page__titre {
    max-width: 13ch;
}

.entete-page--photo .entete-page__chapo {
    max-width: 44ch;
}

.entete-page__media {
    position: absolute;
    inset: 0;
    /*
     * -2 : la photo passe sous le halo `.entete-page::after` (z-index -1),
     * qui vient poser une lueur olive dans l'angle supérieur droit.
     */
    z-index: -2;
    pointer-events: none;
}

.entete-page__media picture {
    display: contents;
}

.entete-page__photo,
.entete-page__teinte {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--_photo-largeur);
    height: 100%;
    -webkit-mask-image: var(--_photo-masque);
    mask-image: var(--_photo-masque);
}

.entete-page__photo {
    object-fit: cover;
    /* Le cadrage garde le visage et le poste de travail dans le champ. */
    object-position: 62% 24%;
    filter: saturate(0.7) contrast(1.06) brightness(0.86);
    transform: scale(1.06);
    animation: entetePhotoRespire 18s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes entetePhotoRespire {
    to {
        transform: scale(1);
    }
}

.entete-page__teinte {
    background: linear-gradient(
        158deg,
        var(--foret) 0%,
        var(--foret-nuit) 54%,
        var(--foret-encre) 100%
    );
    mix-blend-mode: color;
    /* Un reste de couleur naturelle passe : les carnations restent vivantes. */
    opacity: 0.76;
}

.entete-page__voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            96deg,
            rgba(14, 36, 22, 0.72) 0%,
            rgba(14, 36, 22, 0.28) 44%,
            rgba(14, 36, 22, 0) 64%
        ),
        /* Le dernier arrêt referme le bas : la photo s'éteint avant la coupe. */
        linear-gradient(
            180deg,
            rgba(14, 36, 22, 0.42) 0%,
            rgba(14, 36, 22, 0) 32%,
            rgba(20, 53, 32, 0.58) 86%,
            rgba(20, 53, 32, 0.86) 100%
        );
}

@media (max-width: 1180px) {
    .entete-page--photo {
        --_photo-largeur: min(58%, 540px);
    }

    .entete-page--photo .entete-page__chapo {
        max-width: 38ch;
    }
}

/*
 * Sous 900 px il n'y a plus de place pour deux colonnes : la photo passe en
 * pleine largeur derrière le texte et le masque bascule en diagonale — nette
 * en haut à droite, effacée en bas à gauche, là où se trouvent le chapô et
 * les boutons.
 */
@media (max-width: 900px) {
    .entete-page--photo {
        --_photo-largeur: 100%;
        --_photo-masque: linear-gradient(
            202deg,
            #000 0%,
            #000 22%,
            rgba(0, 0, 0, 0.6) 48%,
            rgba(0, 0, 0, 0.2) 74%,
            transparent 94%
        );
        display: block;
        min-height: 0;
    }

    .entete-page--photo .entete-page__titre,
    .entete-page--photo .entete-page__chapo {
        max-width: none;
    }

    .entete-page--photo .entete-page__photo {
        object-position: 58% 16%;
    }

    .entete-page--photo .entete-page__voile {
        background: linear-gradient(
            180deg,
            rgba(14, 36, 22, 0.68) 0%,
            rgba(14, 36, 22, 0.5) 34%,
            rgba(20, 53, 32, 0.86) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .entete-page__photo {
        animation: none;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   3. Page contact : grille et coordonnées
   -------------------------------------------------------------------------- */
.contact-page__grille {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 1.25rem;
    align-items: start;
}

/*
 * Un élément de grille a par défaut `min-width: auto`, c'est-à-dire la largeur
 * minimale de son contenu : la bande de pastilles, qui ne se replie plus sur
 * téléphone, élargirait sinon la colonne — et toute la page avec elle.
 */
.contact-page__grille > * {
    min-width: 0;
}

.contact-page__grille .contact__boite {
    position: sticky;
    top: 100px;
}

.contact__reseaux {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(243, 233, 207, 0.16);
}

.contact__reseaux > span {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 233, 207, 0.55);
}

.contact__reseaux .reseaux {
    margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   4. Formulaire
   -------------------------------------------------------------------------- */
.formulaire-cadre {
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: clamp(20px, 3vw, 28px);
    padding: clamp(1.5rem, 3.4vw, 2.9rem);
    box-shadow: 0 30px 60px -46px rgba(20, 53, 32, 0.75);
}

.formulaire-cadre__titre {
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    margin-bottom: 0.9rem;
}

.formulaire-cadre__intro {
    color: var(--encre-doux);
    font-size: 0.97rem;
    max-width: 52ch;
    margin-bottom: 2rem;
}

/* Champs ----------------------------------------------------------------- */
.champ {
    margin-bottom: 1.2rem;
}

.champ:not(.champ--case) > label,
.champ__intitule {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.71rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--foret);
    margin-bottom: 0.55rem;
}

.requis {
    color: #b0432f;
    font-weight: 600;
}

.champs-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
    margin-bottom: 1.2rem;
}

.champs-duo .champ {
    margin-bottom: 0;
}

.champ__saisie {
    width: 100%;
    font-family: var(--f-corps);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--encre);
    background: #fffefa;
    border: 1.5px solid var(--trait);
    border-radius: 12px;
    padding: 0.82rem 1.05rem;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.champ__saisie::placeholder {
    color: rgba(22, 33, 26, 0.34);
}

.champ__saisie:hover {
    border-color: rgba(30, 77, 43, 0.3);
}

.champ__saisie:focus,
.champ__saisie:focus-visible {
    outline: none;
    border-color: var(--foret);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(162, 184, 109, 0.32);
}

.champ__saisie--zone {
    resize: vertical;
    min-height: 9rem;
}

.champ__saisie--liste {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e4d2b'%3E%3Cpath d='M8 11.2 2.6 5.8h10.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    background-size: 12px;
    /* L'intitulé tronqué reste lisible ; la liste ouverte l'affiche en entier. */
    text-overflow: ellipsis;
}

/*
 * Un élément de grille a `min-width: auto`, soit la largeur de son contenu le
 * plus incompressible — pour un <select>, celle de son option la plus longue.
 * On l'autorise à se comprimer : l'intitulé sera tronqué plutôt que de pousser
 * la piste de grille au-delà de l'écran.
 */
.champs-duo > *,
.champ {
    min-width: 0;
}

.champ__saisie {
    min-width: 0;
    max-width: 100%;
}

/* Pastilles de choix (objet de la demande) -------------------------------- */
.choix-pastilles {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

/*
 * Chaque pastille porte son propre contexte de positionnement : sans lui, la
 * saisie masquée — absolue — se recale dans l'angle du conteneur flex, et le
 * navigateur ramènerait la bande tout à gauche à chaque sélection.
 */
.choix-pastille {
    position: relative;
    display: inline-flex;
}

.choix-pastilles__saisie {
    position: absolute;
    inset: 50% auto auto 50%;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.choix-pastilles__saisie + label {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-doux);
    background: var(--beige-clair);
    border: 1.5px solid var(--trait);
    border-radius: 100px;
    padding: 0.6rem 1.1rem;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.choix-pastilles__saisie + label:hover {
    border-color: var(--foret);
    color: var(--foret);
    transform: translateY(-1px);
}

.choix-pastilles__saisie:checked + label {
    background: var(--foret);
    border-color: var(--foret);
    color: var(--beige);
}

.choix-pastilles__saisie:focus-visible + label {
    outline: 2.5px solid var(--foret);
    outline-offset: 3px;
}

/* Case à cocher RGPD ------------------------------------------------------ */
.champ--case {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--beige-clair);
    border: 1px solid var(--trait);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-top: 0.4rem;
}

.champ-case__saisie {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.16rem;
    flex: none;
    accent-color: var(--foret);
    cursor: pointer;
}

.champ-case__texte {
    flex: 1;
    min-width: 12rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--encre-doux);
    cursor: pointer;
    margin: 0;
}

.champ--case .champ__erreur {
    flex-basis: 100%;
}

/* Erreurs ----------------------------------------------------------------- */
.champ__erreur {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #a3291f;
}

.champ__erreur i {
    font-size: 0.9rem;
    margin-top: 2px;
    flex: none;
}

.est-en-erreur .champ__saisie {
    border-color: #c0523c;
    background: #fdf6f4;
}

.est-en-erreur .champ__saisie:focus {
    box-shadow: 0 0 0 4px rgba(192, 82, 60, 0.22);
}

/* Champ piège anti-spam : hors écran, jamais visible ni focusable au clavier */
.champ-piege {
    /*
     * Masqué sur place plutôt que rejeté à `left: -9999px` : un décalage aussi
     * large étend la boîte du document loin hors de l'écran, ce que les
     * navigateurs mobiles ne clippent pas tous de la même façon.
     */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Pied du formulaire ------------------------------------------------------ */
.formulaire-neo__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.9rem;
}

.formulaire-neo__mention {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--encre-doux);
}

.formulaire-neo__mention i {
    color: var(--foret);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   5. Venir au cabinet (carte + accès)
   -------------------------------------------------------------------------- */
.acces__grille {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 1.25rem;
    align-items: stretch;
}

.acces__infos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.8rem;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: clamp(20px, 3vw, 28px);
    padding: clamp(1.5rem, 3vw, 2.2rem);
}

.acces__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.4rem;
}

.acces__liste li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.acces__liste i {
    color: var(--foret);
    font-size: 1.1rem;
    margin-top: 2px;
    flex: none;
}

.acces__liste strong {
    display: block;
    color: var(--foret);
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.35;
}

.acces__liste span {
    display: block;
    font-size: 0.89rem;
    color: var(--encre-doux);
    line-height: 1.5;
    margin-top: 2px;
}

.acces__infos .btn-neo {
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   6. Page cabinet : l'équipe
   -------------------------------------------------------------------------- */
.grille-equipe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.membre {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.membre:hover {
    transform: translateY(-4px);
    border-color: var(--olive);
    box-shadow: 0 26px 50px -38px rgba(20, 53, 32, 0.75);
}

/*
 * Même gabarit que le membre ait une photo ou non : la grille reste régulière
 * tant que le cabinet n'a pas fourni tous les portraits.
 */
.membre__visuel {
    width: 88px;
    height: 88px;
    flex: none;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(162, 184, 109, 0.24);
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    transition: background-color 0.3s ease;
}

.membre:hover .membre__visuel {
    background: rgba(162, 184, 109, 0.4);
}

.membre__visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.membre__medaillon {
    font-family: var(--f-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--foret);
}

.membre h3 {
    font-size: 1.18rem;
    letter-spacing: -0.025em;
    margin-bottom: 0.4rem;
}

.membre__poste {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.71rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-doux);
    margin-bottom: 1.1rem;
}

.membre p {
    color: var(--encre-doux);
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0 0 1.4rem;
}

.membre__liens {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.membre__liens a {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--trait);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    color: var(--foret);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        transform 0.25s ease;
}

.membre__liens a:hover {
    background: var(--foret);
    border-color: var(--foret);
    color: var(--beige);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. Page cabinet : la méthode
   -------------------------------------------------------------------------- */
.etapes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.etape {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: clamp(1.1rem, 2.4vw, 2rem);
    padding-bottom: clamp(1.7rem, 3vw, 2.5rem);
}

.etape:last-child {
    padding-bottom: 0;
}

/* Filet reliant une étape à la suivante */
.etape:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 62px;
    bottom: 0.35rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(162, 184, 109, 0.55), rgba(162, 184, 109, 0.06));
}

.etape__num {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid rgba(162, 184, 109, 0.45);
    background: var(--foret);
    display: grid;
    place-items: center;
    font-family: var(--f-mono);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--olive-vif);
}

.etape__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem 1rem;
    margin-bottom: 0.7rem;
}

.etape__corps h3 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: -0.028em;
    margin: 0;
}

.etape__duree {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--olive-vif);
    border: 1px solid rgba(162, 184, 109, 0.35);
    border-radius: 100px;
    padding: 0.26rem 0.7rem;
    white-space: nowrap;
}

.etape__corps p {
    margin: 0;
    max-width: 68ch;
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(243, 233, 207, 0.72);
}

/* Le pied de la dernière étape doit respirer avant la section suivante. */
.etape:last-child .etape__corps p {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Page cabinet : les outils
   -------------------------------------------------------------------------- */
.grille-outils {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.outil {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.outil:hover {
    transform: translateY(-4px);
    border-color: var(--olive);
    box-shadow: 0 26px 50px -38px rgba(20, 53, 32, 0.75);
}

/*
 * Les logos vont de 2.48 à 5.54 de rapport largeur/hauteur : on les borne
 * en hauteur ET en largeur pour qu'ils pèsent optiquement pareil.
 */
.outil__logo {
    height: 46px;
    display: flex;
    align-items: center;
    margin-bottom: 1.3rem;
}

.outil__logo img {
    max-height: 32px;
    max-width: 148px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.outil:hover .outil__logo img {
    filter: none;
    opacity: 1;
}

.outil__role {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--foret);
    background: rgba(162, 184, 109, 0.24);
    padding: 0.35rem 0.7rem;
    border-radius: 100px;
    align-self: flex-start;
    margin-bottom: 1rem;
}

.outil h3 {
    font-size: 1.16rem;
    letter-spacing: -0.025em;
    margin-bottom: 0.6rem;
}

.outil p {
    color: var(--encre-doux);
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .contact-page__grille,
    .acces__grille {
        grid-template-columns: 1fr;
    }

    .contact-page__grille .contact__boite {
        position: static;
    }

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

@media (max-width: 768px) {
    .champs-duo {
        grid-template-columns: 1fr;
    }

    .entete-page__titre {
        max-width: none;
    }

    .formulaire-neo__pied .btn-neo {
        width: 100%;
    }

    .grille-equipe,
    .grille-outils {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .etape {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
    }

    .etape__num {
        width: 44px;
        height: 44px;
        font-size: 0.78rem;
    }

    .etape:not(:last-child)::before {
        left: 21px;
        top: 52px;
    }

    .entete-page__actions .btn-neo-clair,
    .entete-page__actions .btn-neo-ligne {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   10. Blog : filtres et grille d'articles
   -------------------------------------------------------------------------- */
.filtres-blog {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filtre-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--foret);
    background: var(--papier);
    border: 1.5px solid var(--trait);
    border-radius: 999px;
    padding: 0.58rem 1.05rem;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.filtre-blog:hover {
    border-color: rgba(30, 77, 43, 0.4);
    background: var(--beige-clair);
    color: var(--foret);
}

.filtre-blog.est-actif {
    background: var(--foret);
    border-color: var(--foret);
    color: var(--beige);
}

.filtre-blog i {
    font-size: 0.85rem;
    opacity: 0.75;
}

.filtre-blog__compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.32rem;
    border-radius: 999px;
    background: rgba(30, 77, 43, 0.1);
    font-size: 0.68rem;
    line-height: 1;
}

.filtre-blog.est-actif .filtre-blog__compte {
    background: rgba(243, 233, 207, 0.22);
}

.grille-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.blog-vide {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--encre-doux);
    font-size: 1.02rem;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* --------------------------------------------------------------------------
   11. Blog : carte d'article
   -------------------------------------------------------------------------- */
.carte-article {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.carte-article:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 77, 43, 0.28);
    box-shadow: 0 28px 52px -40px rgba(20, 53, 32, 0.75);
}

.carte-article__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--beige-clair);
}

.carte-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carte-article:hover .carte-article__media img {
    transform: scale(1.04);
}

.carte-article__vignette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(148deg, var(--foret) 0%, var(--foret-nuit) 100%);
    color: rgba(243, 233, 207, 0.5);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
}

.etiquette-categorie {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--foret);
    background: rgba(255, 253, 247, 0.94);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    backdrop-filter: blur(6px);
}

.carte-article__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
    padding: clamp(1.2rem, 2.2vw, 1.65rem);
}

.carte-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-doux);
}

.carte-article__meta i {
    font-size: 0.75rem;
}

.carte-article__titre {
    margin: 0;
    font-size: clamp(1.1rem, 1.7vw, 1.32rem);
    line-height: 1.24;
    letter-spacing: -0.02em;
}

.carte-article__titre a {
    color: var(--foret);
    transition: color 0.22s ease;
}

.carte-article__titre a:hover {
    color: var(--foret-nuit);
}

/* Toute la carte devient cliquable, sans imbriquer de lien dans un lien. */
.carte-article__titre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.carte-article__intro {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--encre-doux);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carte-article__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--trait);
}

.carte-article__pied .lien-fleche {
    font-size: 0.78rem;
}

/* Carte de mise en avant : format large, deux colonnes. */
.carte-article--une {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.carte-article--une .carte-article__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
}

.carte-article--une .carte-article__corps {
    justify-content: center;
    gap: 0.95rem;
    padding: clamp(1.6rem, 3.4vw, 3rem);
}

.carte-article--une .carte-article__titre {
    font-size: clamp(1.5rem, 2.9vw, 2.2rem);
}

.carte-article--une .carte-article__intro {
    font-size: 1rem;
    -webkit-line-clamp: 4;
}

/* Signature d'auteur, reprise en carte et en tete d'article. */
.signature {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--encre);
    transition: color 0.22s ease;
}

.signature:hover {
    color: var(--foret);
}

.signature__photo,
.signature__pastille {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
}

.signature__photo {
    object-fit: cover;
    object-position: top center;
    background: var(--beige-clair);
}

.signature__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--foret);
    color: var(--beige);
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 600;
}

.signature__nom {
    font-size: 0.86rem;
    font-weight: 500;
}

.signature--claire {
    color: var(--beige);
}

.signature--claire:hover {
    color: var(--olive-vif);
}

.signature--claire .signature__pastille {
    background: rgba(243, 233, 207, 0.16);
    color: var(--beige);
}

/* --------------------------------------------------------------------------
   12. Blog : page article
   -------------------------------------------------------------------------- */
.entete-page--article .entete-page__chapo {
    font-size: clamp(1.05rem, 1.75vw, 1.28rem);
    max-width: 62ch;
}

.article__titre {
    max-width: 20ch;
}

.article__signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(243, 233, 207, 0.16);
}

.article__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 233, 207, 0.62);
}

/* L'illustration chevauche l'en-tete sombre et le fond beige de la page. */
.article__illustration {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, var(--foret-nuit) 0%, var(--foret-nuit) 50%, var(--beige) 50%, var(--beige) 100%);
}

.article__illustration img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--rayon-lg);
}

.article__corps-section {
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.article__corps {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--encre);
}

.article__corps > h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--foret);
    margin: 2.8rem 0 1rem;
}

.article__corps > h2:first-child {
    margin-top: 0;
}

.article__corps > h3 {
    font-size: clamp(1.15rem, 1.9vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--foret-nuit);
    margin: 2rem 0 0.7rem;
}

.article__corps p {
    margin: 0 0 1.25rem;
}

.article__corps ul,
.article__corps ol {
    margin: 0 0 1.5rem;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.article__corps ul > li {
    position: relative;
    padding-left: 1.6rem;
}

.article__corps ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--olive);
}

.article__corps ol {
    counter-reset: liste-article;
}

.article__corps ol > li {
    position: relative;
    padding-left: 2rem;
    counter-increment: liste-article;
}

.article__corps ol > li::before {
    content: counter(liste-article) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--f-mono);
    font-size: 0.85rem;
    color: var(--olive);
}

.article__corps strong {
    color: var(--foret);
    font-weight: 600;
}

.article__corps a:not(.btn-neo):not(.btn-neo-clair):not(.btn-neo-ligne) {
    color: var(--foret);
    text-decoration: underline;
    text-decoration-color: var(--olive);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.22s ease;
}

.article__corps a:not(.btn-neo):not(.btn-neo-clair):not(.btn-neo-ligne):hover {
    text-decoration-color: var(--foret);
}

.article__corps blockquote {
    margin: 2rem 0;
    padding: 0 0 0 1.4rem;
    border-left: 3px solid var(--olive);
    font-size: 1.12rem;
    font-style: italic;
    color: var(--foret);
}

/* --------------------------------------------------------------------------
   13. Blog : auteur
   -------------------------------------------------------------------------- */
.fiche-auteur {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: center;
}

.fiche-auteur__portrait img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(243, 233, 207, 0.18);
}

.fiche-auteur__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--rayon-lg);
    background: rgba(243, 233, 207, 0.1);
    border: 1px solid rgba(243, 233, 207, 0.18);
    color: var(--olive-vif);
    font-family: var(--f-mono);
    font-size: clamp(2.5rem, 6vw, 4rem);
}

.fiche-auteur__texte .entete-page__titre {
    max-width: none;
    margin-bottom: 0.6rem;
}

.fiche-auteur__role {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--olive-vif);
    margin-bottom: 1.4rem;
}

.encart-auteur {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: clamp(1.2rem, 2.6vw, 1.9rem);
    align-items: start;
    max-width: 46rem;
    margin: clamp(2.8rem, 5vw, 4rem) auto 0;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    background: var(--beige-clair);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
}

.encart-auteur__portrait img,
.encart-auteur__pastille {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.encart-auteur__portrait img {
    object-fit: cover;
    object-position: top center;
}

.encart-auteur__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--foret);
    color: var(--beige);
    font-family: var(--f-mono);
    font-size: 1.5rem;
}

.encart-auteur__nom {
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.2rem;
}

.encart-auteur__nom a {
    color: var(--foret);
}

.encart-auteur__role {
    font-size: 0.86rem;
    color: var(--encre-doux);
    margin-bottom: 0.9rem;
}

.encart-auteur__bio {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--encre-doux);
    margin-bottom: 1.1rem;
}

.encart-auteur__liens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
}

.lien-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--foret);
    transition: color 0.22s ease;
}

.lien-linkedin:hover {
    color: var(--olive);
}

/* --------------------------------------------------------------------------
   14. Blog : appels a l'action et encadres
   -------------------------------------------------------------------------- */
.cta-article {
    display: grid;
    gap: 1.5rem;
    margin: clamp(2.2rem, 4.5vw, 3.2rem) 0;
    padding: clamp(1.5rem, 3.2vw, 2.4rem);
    border-radius: var(--rayon-lg);
}

.cta-article--fonce {
    background: linear-gradient(152deg, var(--foret) 0%, var(--foret-nuit) 100%);
    color: var(--beige);
}

.cta-article--clair {
    background: var(--beige-clair);
    border: 1px solid var(--trait);
}

.cta-article__titre {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.cta-article--fonce .cta-article__titre {
    color: var(--beige);
}

/* Le surtitre est vert foncé par défaut : illisible sur ce fond vert. */
.cta-article--fonce .surtitre {
    color: var(--olive-vif);
}

.cta-article--clair .cta-article__titre {
    color: var(--foret);
}

.cta-article__intro {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.6;
}

.cta-article--fonce .cta-article__intro {
    color: rgba(243, 233, 207, 0.78);
}

.cta-article--clair .cta-article__intro {
    color: var(--encre-doux);
}

.cta-article__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.cta-tel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: clamp(2rem, 4vw, 2.8rem) 0;
    padding: 1.2rem clamp(1.2rem, 2.4vw, 1.7rem);
    background: var(--papier);
    border: 1.5px solid var(--trait);
    border-left: 3px solid var(--olive);
    border-radius: var(--rayon);
}

.cta-tel > i {
    font-size: 1.3rem;
    color: var(--foret);
    flex: none;
}

.cta-tel p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--encre-doux);
}

.encadre-article {
    margin: clamp(1.8rem, 3.5vw, 2.5rem) 0;
    padding: clamp(1.2rem, 2.4vw, 1.7rem);
    background: rgba(162, 184, 109, 0.12);
    border: 1px solid rgba(162, 184, 109, 0.45);
    border-radius: var(--rayon);
}

.encadre-article__titre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--foret);
    margin: 0 0 0.7rem;
}

.encadre-article__corps p {
    margin: 0 0 0.7rem;
    font-size: 0.98rem;
    line-height: 1.65;
}

.encadre-article__corps p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15. Blog : pagination
   -------------------------------------------------------------------------- */
.pagination-neo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.8rem);
}

.pagination__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    height: 2.65rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--trait);
    background: var(--papier);
    font-family: var(--f-mono);
    font-size: 0.82rem;
    color: var(--foret);
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.pagination__lien:hover {
    border-color: rgba(30, 77, 43, 0.4);
    background: var(--beige-clair);
}

.pagination__lien.est-active {
    background: var(--foret);
    border-color: var(--foret);
    color: var(--beige);
}

.pagination__lien.est-desactive {
    opacity: 0.38;
    cursor: not-allowed;
}

.pagination__ellipse {
    padding: 0 0.3rem;
    color: var(--encre-doux);
    font-family: var(--f-mono);
}

.pagination__compteur {
    margin: 0;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-doux);
}

/* --------------------------------------------------------------------------
   16. Blog : responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .grille-articles {
        grid-template-columns: repeat(2, 1fr);
    }

    .carte-article--une {
        grid-template-columns: 1fr;
    }

    .carte-article--une .carte-article__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .fiche-auteur {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .grille-articles {
        grid-template-columns: 1fr;
    }

    .fiche-auteur {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .fiche-auteur__portrait {
        max-width: 180px;
    }

    .encart-auteur {
        grid-template-columns: 1fr;
    }

    .article__signature {
        gap: 0.9rem 1.2rem;
    }

    .cta-article__actions .btn-neo,
    .cta-article__actions .btn-neo-clair,
    .cta-article__actions .btn-neo-ligne {
        width: 100%;
    }

    .cta-tel .btn-neo {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   17. Mentions légales
   -------------------------------------------------------------------------- */

/*
 * Variante d'en-tête pour les pages sans bandeau `.preuves` en dessous :
 * la marge basse généreuse de `.entete-page` n'a plus rien à accueillir.
 */
.entete-page--compact {
    padding-top: clamp(7.5rem, 12vw, 9.5rem);
    padding-bottom: clamp(3.25rem, 6vw, 4.75rem);
}

.entete-page--compact .entete-page__titre {
    margin-bottom: 0;
}

.legal {
    display: grid;
    gap: 1.15rem;
    max-width: 62rem;
}

.bloc-legal {
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    padding: clamp(1.5rem, 2.8vw, 2.2rem);
}

.bloc-legal h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: -0.028em;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--trait);
}

.legal__liste {
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.legal__liste > div {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.25rem 1.5rem;
    align-items: baseline;
}

.legal__liste dt {
    font-family: var(--f-mono);
    font-size: 0.71rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--encre-doux);
}

.legal__liste dd {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--encre);
}

.legal__liste dd a {
    color: var(--foret);
    border-bottom: 1px solid rgba(162, 184, 109, 0.7);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.legal__liste dd a:hover {
    color: var(--foret-nuit);
    border-color: var(--foret);
}

.bloc-legal .lien-fleche {
    margin-top: 1.6rem;
}

@media (max-width: 700px) {
    .legal__liste > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* --------------------------------------------------------------------------
   18. Menu déroulant des services
   -------------------------------------------------------------------------- */
.nav-deroulant {
    position: relative;
}

.nav-deroulant__declencheur {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-deroulant__declencheur .bi-chevron-down {
    font-size: 0.58rem;
    opacity: 0.7;
    transition: transform 0.28s ease;
}

.nav-deroulant.est-ouvert .nav-deroulant__declencheur .bi-chevron-down {
    transform: rotate(180deg);
}

.nav-deroulant.est-ouvert .nav-deroulant__declencheur::after {
    width: 100%;
}

/*
 * Panneau compact ancré sous le déclencheur, jamais sur toute la largeur.
 * `max-width` le garde dans la fenêtre sur les petits écrans de portable.
 */
.nav-deroulant__panneau {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -8px);
    width: max-content;
    max-width: min(46rem, calc(100vw - 3rem));
    margin-top: 0.8rem;
    padding: 1.1rem 1.35rem 0.9rem;
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: 16px;
    box-shadow: 0 26px 48px -32px rgba(20, 53, 32, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Zone tampon : le pointeur peut traverser l'espace entre le lien et le panneau. */
.nav-deroulant__panneau::before {
    content: "";
    position: absolute;
    inset: -0.9rem 0 auto 0;
    height: 0.9rem;
}

.nav-deroulant.est-ouvert .nav-deroulant__panneau {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nav-deroulant__colonnes {
    display: grid;
    grid-template-columns: repeat(3, minmax(9.5rem, 1fr));
    gap: 0 1.6rem;
}

.colonne-services + .colonne-services {
    border-left: 1px solid var(--trait);
    padding-left: 1.6rem;
}

.colonne-services__titre {
    font-family: var(--f-mono);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 0.45rem;
}

.colonne-services__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.colonne-services__liste a {
    display: block;
    padding: 0.34rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--foret);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.colonne-services__liste a:hover,
.colonne-services__liste a:focus-visible {
    background: var(--beige-clair);
    color: var(--foret-nuit);
}

.nav-deroulant__tous {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--trait);
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--foret);
    transition: color 0.18s ease;
}

.nav-deroulant__tous:hover {
    color: var(--olive);
}

/* Services dans le menu plein écran mobile --------------------------------
   Les sélecteurs sont préfixés par `.menu-mobile nav` : sans cela, la règle
   générique `.menu-mobile nav a` du thème (police d'affichage à 2,6 rem)
   l'emporte sur les liens de services et casse la mise en page. */
.menu-mobile nav .services-mobile {
    display: grid;
    gap: 0;
    width: 100%;
}

.menu-mobile nav .services-mobile__bouton {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding-block: 0.62rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(243, 233, 207, 0.14);
    font-family: var(--f-display);
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--beige);
    text-align: left;
    cursor: pointer;
}

.menu-mobile nav .services-mobile__bouton > .bi:first-child {
    font-size: 0.9rem;
    color: var(--olive-vif);
    flex: none;
}

.menu-mobile nav .services-mobile__chevron {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform 0.25s ease;
}

.menu-mobile nav .services-mobile__groupe.est-ouvert .services-mobile__chevron {
    transform: rotate(180deg);
}

.menu-mobile nav .services-mobile__liste {
    list-style: none;
    margin: 0.55rem 0 0.85rem;
    padding: 0 0 0 1.1rem;
    border-left: 1px solid rgba(243, 233, 207, 0.2);
    display: grid;
    gap: 0.1rem;
}

/*
 * Une règle `display` d'auteur l'emporte sur le `[hidden] { display: none }`
 * du navigateur : sans ceci, la liste resterait ouverte en permanence.
 */
.menu-mobile nav .services-mobile__liste[hidden] {
    display: none;
}

.menu-mobile nav .services-mobile__liste a {
    font-family: var(--f-corps);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    padding-block: 0.3rem;
    border-bottom: none;
    color: rgba(243, 233, 207, 0.82);
}

.menu-mobile nav .services-mobile__liste a:hover,
.menu-mobile nav .services-mobile__liste a:focus-visible {
    color: var(--olive-vif);
}

.menu-mobile nav .services-mobile__tous {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--olive-vif);
    padding-block: 0.9rem 0;
    border-bottom: none;
}

/* Le titre du panneau déroulant n'a pas de place sous 1200 px : on resserre. */
@media (max-width: 1200px) {
    .nav-deroulant__panneau {
        padding: 0.95rem 1.1rem 0.8rem;
    }

    .nav-deroulant__colonnes {
        grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
        gap: 0 1.1rem;
    }

    .colonne-services + .colonne-services {
        padding-left: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   19. Page service : en-tête et blocs de présentation
   -------------------------------------------------------------------------- */
.entete-service {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: center;
}

.entete-service__texte .entete-page__titre {
    max-width: 18ch;
    margin-bottom: 1.1rem;
}

.entete-service__description {
    font-size: clamp(1.1rem, 1.9vw, 1.35rem);
    line-height: 1.45;
    color: var(--olive-vif);
    margin-bottom: 1.1rem;
    max-width: 44ch;
}

.entete-service__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(243, 233, 207, 0.18);
}

.entete-service__vignette {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--rayon-lg);
    background: rgba(243, 233, 207, 0.08);
    border: 1px solid rgba(243, 233, 207, 0.16);
    color: rgba(162, 184, 109, 0.6);
    font-size: clamp(3rem, 8vw, 5.5rem);
}

.bloc-presentation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
}

.bloc-presentation + .bloc-presentation {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.bloc-presentation--inverse .bloc-presentation__texte {
    order: 2;
}

/* Un bloc sans image occupe une colonne centrale, pas toute la largeur. */
.bloc-presentation--texte {
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
}

.bloc-presentation__titre {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--foret);
    margin-bottom: 1rem;
}

.bloc-presentation__texte p {
    font-size: 1.03rem;
    line-height: 1.72;
    color: var(--encre-doux);
    margin: 0;
}

.bloc-presentation__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rayon-lg);
    border: 1px solid var(--trait);
}

/* --------------------------------------------------------------------------
   20. Cartes de service et carrousel mobile
   -------------------------------------------------------------------------- */
.carrousel-cartes__piste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.carte-service {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.carte-service:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 77, 43, 0.28);
    box-shadow: 0 28px 52px -40px rgba(20, 53, 32, 0.75);
}

.carte-service__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--beige-clair);
    color: var(--foret);
    font-size: 1.25rem;
}

.carte-service__titre {
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.24;
    letter-spacing: -0.02em;
    color: var(--foret);
    margin: 0;
}

.carte-service__texte {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--encre-doux);
}

.carrousel-cartes__puces {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.4rem;
}

/* Même précaution : `display` d'auteur contre `[hidden]` du navigateur. */
.carrousel-cartes__puces[hidden] {
    display: none;
}

.carrousel__puce {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(30, 77, 43, 0.22);
    cursor: pointer;
    transition: background-color 0.22s ease, width 0.22s ease;
}

.carrousel__puce.est-active {
    width: 22px;
    border-radius: 999px;
    background: var(--foret);
}

/* Vignettes de service (catalogue et maillage interne) --------------------- */
.grille-services-liens {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.service-lien {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: clamp(1.3rem, 2.4vw, 1.8rem);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-lien:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 77, 43, 0.28);
    box-shadow: 0 28px 52px -40px rgba(20, 53, 32, 0.75);
}

.service-lien__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--beige-clair);
    color: var(--foret);
    font-size: 1.15rem;
}

.service-lien__titre {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.service-lien__titre a {
    color: var(--foret);
}

.service-lien__titre a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.service-lien__texte {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--encre-doux);
}

.service-lien .lien-fleche {
    margin-top: auto;
    font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   21. Bloc expert et CTA avec formulaire
   -------------------------------------------------------------------------- */
.expert__grille {
    display: grid;
    /* Colonne image bornée en pixels : en `fr`, elle s'étirait avec la largeur
       de la section et le portrait finissait bien plus haut que son texte. */
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: center;
}

.expert__portrait {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--rayon-lg);
    background: var(--beige-clair);
    box-shadow: 0 36px 70px -48px rgba(14, 36, 22, 0.85);
}

.expert__portrait img {
    display: block;
    width: 100%;
    height: auto;
    /* Format moins haut que le portrait de l'accueil : le bloc est en deux
       colonnes, l'image doit rester à hauteur du texte. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 52% 20%;
}

/* Dégradé de bas en haut : sans lui, la plaque blanche se perd sur la photo. */
.expert__portrait::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(14, 36, 22, 0.88) 76%);
    pointer-events: none;
}

.expert__portrait .portrait__plaque {
    z-index: 2;
}

.expert__texte .chapo {
    font-style: italic;
}

.expert__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.cta-devis__grille {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 1.25rem;
    align-items: stretch;
}

.cta-devis__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.6rem, 3.4vw, 2.8rem);
    border-radius: clamp(20px, 3vw, 28px);
    background: linear-gradient(152deg, var(--foret) 0%, var(--foret-nuit) 100%);
}

/* Le surtitre est vert foncé par défaut : illisible sur ce fond vert. */
.cta-devis__texte .surtitre {
    color: var(--olive-vif);
}

.cta-devis__texte .titre-section {
    color: var(--beige);
}

.cta-devis__intro {
    color: rgba(243, 233, 207, 0.78);
    font-size: 1rem;
    line-height: 1.62;
    margin-bottom: 1.6rem;
    max-width: 42ch;
}

.cta-devis__arguments {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.cta-devis__arguments li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.94rem;
    color: rgba(243, 233, 207, 0.86);
}

.cta-devis__arguments i {
    color: var(--olive-vif);
    font-size: 0.95rem;
}

.cta-devis__texte .btn-neo-ligne {
    align-self: flex-start;
}

.cta-devis__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
}

.cta-devis__mention {
    flex: 1 1 14rem;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--encre-doux);
}

/* Champ piege anti-spam : masque a l'oeil comme aux lecteurs d'ecran. */
.champ-piege {
    /*
     * Masqué sur place plutôt que rejeté à `left: -9999px` : un décalage aussi
     * large étend la boîte du document loin hors de l'écran, ce que les
     * navigateurs mobiles ne clippent pas tous de la même façon.
     */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   22. Services : responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .nav-deroulant__colonnes {
        gap: 1.2rem;
    }

    .colonne-services + .colonne-services {
        padding-left: 1.2rem;
    }

    .entete-service,
    .bloc-presentation,
    .expert__grille,
    .cta-devis__grille {
        grid-template-columns: 1fr;
    }

    .bloc-presentation--inverse .bloc-presentation__texte {
        order: 0;
    }

    .expert__portrait {
        max-width: 320px;
    }

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

@media (max-width: 900px) {
    /* Sur mobile, les cartes deviennent un carrousel a defilement horizontal. */
    .carrousel-cartes__piste {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gouttiere);
        padding-bottom: 0.5rem;
        margin-inline: calc(var(--gouttiere) * -1);
        padding-inline: var(--gouttiere);
        scrollbar-width: none;
    }

    .carrousel-cartes__piste::-webkit-scrollbar {
        display: none;
    }

    .carrousel-cartes__piste > .carte-service {
        flex: 0 0 min(78%, 22rem);
        scroll-snap-align: start;
    }

    .carrousel-cartes__piste:focus-visible {
        outline: 2px solid var(--olive);
        outline-offset: 4px;
    }
}

@media (max-width: 768px) {
    .grille-services-liens {
        grid-template-columns: 1fr;
    }

    .entete-service__description {
        max-width: none;
    }

    .cta-devis__pied .btn-neo {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   23. Bandes défilables horizontalement (fil d'Ariane, filtres du blog)

   Le contenu déborde sur mobile : on le rend défilable et on estompe le bord
   du côté où il reste quelque chose à faire défiler. Les classes
   `fondu-gauche` / `fondu-droite` sont posées par webroot/js/custom.js.
   Toute nouvelle bande n'a qu'à porter l'attribut `data-defilement-x`.
   -------------------------------------------------------------------------- */
:is(.fil-ariane, .filtres-blog, [data-defilement-x]) {
    --_fondu: 2.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    /* La barre de défilement est masquée : c'est le fondu qui informe. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*
     * `overflow-x` force `overflow-y` à `auto` : sans cette respiration,
     * l'anneau de focus des liens serait rogné en haut et en bas.
     */
    padding-block: 6px;
    margin-block-start: -6px;
}

:is(.fil-ariane, .filtres-blog, [data-defilement-x])::-webkit-scrollbar {
    display: none;
}

/* Les éléments d'une bande ne se compriment jamais : ils défilent. */
:is(.fil-ariane, .filtres-blog, [data-defilement-x]) > * {
    flex: none;
}

.fil-ariane > * {
    white-space: nowrap;
}

/* Sur mobile, les pastilles passent sur une seule ligne qui défile. */
@media (max-width: 768px) {
    .filtres-blog,
    .choix-pastilles {
        flex-wrap: nowrap;
    }

    /* Pastilles courtes : un fondu plus serré suffit à signaler la suite. */
    .choix-pastilles {
        --_fondu: 2rem;
    }
}

/* Fondus — un dégradé de masque, indépendant de la couleur du fond. */
:is(.fil-ariane, .filtres-blog, [data-defilement-x]).fondu-gauche {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--_fondu));
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--_fondu));
}

:is(.fil-ariane, .filtres-blog, [data-defilement-x]).fondu-droite {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--_fondu)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--_fondu)), transparent 100%);
}

:is(.fil-ariane, .filtres-blog, [data-defilement-x]).fondu-gauche.fondu-droite {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--_fondu),
        #000 calc(100% - var(--_fondu)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--_fondu),
        #000 calc(100% - var(--_fondu)),
        transparent 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    :is(.fil-ariane, .filtres-blog, [data-defilement-x]) {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   24. Fiche auteur : bandeau d'identité sur mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /*
     * Sur téléphone, la fiche se lit comme un profil : photo ronde à gauche,
     * nom et fonction à droite, puis la biographie et les liens en dessous.
     * `display: contents` fait remonter le contenu du bloc texte dans la
     * grille pour que la photo et l'identité partagent la même ligne.
     */
    .fiche-auteur {
        grid-template-columns: 76px 1fr;
        column-gap: 1.1rem;
        row-gap: 1.4rem;
        align-items: center;
    }

    .fiche-auteur__texte {
        display: contents;
    }

    .fiche-auteur__portrait {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        width: 76px;
        /* Le rond est porté par le conteneur : l'image ne peut pas en déborder. */
        overflow: hidden;
        border-radius: 50%;
    }

    /*
     * Dimensions en dur plutôt qu'un `aspect-ratio` : le carré ne dépend alors
     * ni des attributs width/height de la balise <img>, ni du ratio 3/4 hérité
     * de la version bureau.
     */
    .fiche-auteur__portrait img,
    .fiche-auteur__pastille {
        width: 76px;
        height: 76px;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: top center;
        border-radius: 50%;
        font-size: 1.6rem;
    }

    .fiche-auteur__identite {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    /* Le fil d'Ariane annonce déjà la page auteur : le surtitre ferait doublon. */
    .fiche-auteur__identite .surtitre {
        display: none;
    }

    .fiche-auteur__identite .entete-page__titre {
        font-size: clamp(1.35rem, 6vw, 1.9rem);
        line-height: 1.1;
        margin-bottom: 0.3rem;
    }

    .fiche-auteur__role {
        margin-bottom: 0;
    }

    .fiche-auteur__texte > .entete-page__chapo,
    .fiche-auteur__texte > .entete-page__actions {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   25. Blocs de page service (composition administrable)
   -------------------------------------------------------------------------- */

/* Les blocs s'empilent : un rythme vertical un peu plus serré qu'une section
   isolée evite une page trop aeree quand plusieurs blocs se suivent. */
.bloc-service {
    padding-block: calc(var(--rythme) * 0.62);
}

.bloc-service__lien {
    margin: 1.8rem 0 0;
}

.entete-section--centre {
    justify-content: center;
    text-align: center;
}

.entete-section--centre > div {
    max-width: 46rem;
}

/* Bloc texte seul ---------------------------------------------------------- */
.bloc-texte {
    max-width: 46rem;
    margin: 0 auto;
}

.bloc-texte__corps {
    font-size: 1.03rem;
    line-height: 1.75;
    color: var(--encre-doux);
}

.section--foret .bloc-texte__corps,
.sur-sombre .bloc-texte__corps {
    color: rgba(243, 233, 207, 0.8);
}

.sur-sombre .bloc-presentation__titre {
    color: var(--beige);
}

.sur-sombre .bloc-presentation__texte p {
    color: rgba(243, 233, 207, 0.8);
}

/* Icone de carte televersee ------------------------------------------------ */
.carte-service__icone--image {
    background: none;
    width: 52px;
    height: 52px;
}

.carte-service__icone--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Bloc etapes -------------------------------------------------------------- */
.bloc-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.6rem;
    max-width: 52rem;
}

.bloc-etape {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.3rem;
    align-items: start;
}

.bloc-etape:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 62px;
    bottom: -1.6rem;
    width: 1px;
    background: var(--trait);
}

.bloc-etape__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--foret);
    color: var(--beige);
    font-family: var(--f-mono);
    font-size: 1.05rem;
    font-weight: 500;
    flex: none;
}

.bloc-etape__titre {
    font-size: 1.16rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--foret);
    margin: 0.6rem 0 0.45rem;
}

.bloc-etape__corps p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--encre-doux);
}

.sur-sombre .bloc-etape:not(:last-child)::before {
    background: rgba(243, 233, 207, 0.2);
}

.sur-sombre .bloc-etape__num {
    background: var(--olive);
    color: var(--foret-encre);
}

.sur-sombre .bloc-etape__titre {
    color: var(--beige);
}

.sur-sombre .bloc-etape__corps p {
    color: rgba(243, 233, 207, 0.78);
}

/* Bloc chiffres cles ------------------------------------------------------- */
.bloc-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.bloc-chiffre {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: clamp(1.3rem, 2.4vw, 1.9rem);
    border-radius: var(--rayon-lg);
    background: var(--papier);
    border: 1px solid var(--trait);
}

.bloc-chiffre__valeur {
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--foret);
}

.bloc-chiffre__libelle {
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--encre-doux);
}

.bloc-chiffre__precision {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-doux);
    opacity: 0.75;
}

.sur-sombre .bloc-chiffre {
    background: rgba(243, 233, 207, 0.07);
    border-color: rgba(243, 233, 207, 0.16);
}

.sur-sombre .bloc-chiffre__valeur {
    color: var(--olive-vif);
}

.sur-sombre .bloc-chiffre__libelle,
.sur-sombre .bloc-chiffre__precision {
    color: rgba(243, 233, 207, 0.78);
}

/* Bloc liste a puces ------------------------------------------------------- */
.bloc-liste {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: start;
}

.bloc-liste__texte {
    font-size: 1rem;
    line-height: 1.68;
    color: var(--encre-doux);
    margin-bottom: 0;
}

.bloc-liste__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.bloc-liste__points li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--trait);
}

.bloc-liste__points li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.bloc-liste__points i {
    color: var(--olive);
    font-size: 1.05rem;
    margin-top: 3px;
    flex: none;
}

.bloc-liste__points strong {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--foret);
    line-height: 1.45;
}

.bloc-liste__points span {
    display: block;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--encre-doux);
    margin-top: 3px;
}

.sur-sombre .bloc-liste__points li {
    border-bottom-color: rgba(243, 233, 207, 0.16);
}

.sur-sombre .bloc-liste__points strong {
    color: var(--beige);
}

.sur-sombre .bloc-liste__points span,
.sur-sombre .bloc-liste__texte {
    color: rgba(243, 233, 207, 0.78);
}

/* Bloc citation ------------------------------------------------------------ */
.bloc-citation {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
    padding: clamp(1.8rem, 4vw, 3rem);
    background: var(--papier);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    text-align: center;
}

.bloc-citation__guillemet {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--olive);
    margin-bottom: 0.4rem;
}

.bloc-citation__texte {
    margin: 0;
    padding: 0;
    border: none;
}

.bloc-citation__texte p {
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(1.2rem, 2.4vw, 1.62rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.02em;
    color: var(--foret);
}

.bloc-citation__auteur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.6rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--encre-doux);
}

.bloc-citation__photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.sur-sombre .bloc-citation {
    background: rgba(243, 233, 207, 0.07);
    border-color: rgba(243, 233, 207, 0.16);
}

.sur-sombre .bloc-citation__texte p {
    color: var(--beige);
}

.sur-sombre .bloc-citation__auteur {
    color: rgba(243, 233, 207, 0.7);
}

/* Bloc bandeau image ------------------------------------------------------- */
.bloc-bandeau {
    position: relative;
    margin: 0;
    padding: 0;
}

.bloc-bandeau img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

.bloc-bandeau__legende {
    padding: 1rem 0;
    background: var(--beige-clair);
    font-size: 0.9rem;
    color: var(--encre-doux);
}

.bloc-bandeau__legende strong {
    color: var(--foret);
    margin-right: 0.5rem;
}

/* --------------------------------------------------------------------------
   26. Blocs de page service : responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .bloc-chiffres {
        grid-template-columns: repeat(2, 1fr);
    }

    .bloc-liste {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .bloc-chiffres {
        grid-template-columns: 1fr;
    }

    .bloc-etape {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
    }

    .bloc-etape__num {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }

    .bloc-etape:not(:last-child)::before {
        left: 21px;
        top: 50px;
    }
}

/* --------------------------------------------------------------------------
   27. Menu mobile : le panneau défile

   La maquette suppose un menu qui tient toujours dans l'écran. Ce n'est plus
   vrai depuis que les services sont administrables : replié le panneau mesure
   déjà 726 px sur un écran de 640, et jusqu'à 1124 px avec les trois groupes
   de services ouverts. En `overflow: visible`, le pied du menu — téléphone et
   bouton « Prendre RDV » — était donc hors d'atteinte.
   -------------------------------------------------------------------------- */
.menu-mobile {
    /*
     * `dvh` suit la barre d'adresse des navigateurs mobiles : sans lui, le bas
     * du panneau se glisse dessous dès qu'elle se rétracte. `vh` sert de repli.
     */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    /* Le défilement ne se propage pas à la page laissée derrière. */
    overscroll-behavior: contain;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

/*
 * Le pied ne se colle en bas que s'il reste de la place ; dès que le contenu
 * déborde, il reprend sa place dans le flux et devient accessible au
 * défilement.
 */
.menu-mobile__pied {
    padding-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   28. Logos des outils : hauteur optique

   La maquette calait chaque logo de la bande par `:nth-child`, ce qui liait sa
   hauteur à sa position dans la liste — déplacer un outil le déformait. La clé
   de l'outil (templates/element/outils.php) donne désormais la classe, et
   l'ordre de la liste redevient libre.

   Les valeurs ne suivent pas le rapport largeur/hauteur : un sigle massif se
   pose plus bas qu'un long mot-symbole pour le même poids à l'œil.

   `img` est nécessaire dans chaque sélecteur de la bande : sans lui les règles
   pèsent moins lourd que les `:nth-child` de theme.css et ne passeraient pas
   devant. À poids égal, c'est l'ordre de chargement qui tranche — custom.css
   est appelée après theme.css.
   -------------------------------------------------------------------------- */
.marquee__groupe img.logo-outil {
    height: 32px;
}

.marquee__groupe img.logo-outil--rca {
    height: 30px;
}

.marquee__groupe img.logo-outil--pennylane {
    height: 24px;
}

.marquee__groupe img.logo-outil--quadra {
    /*
     * Seule icône carrée de la bande. Réglée à la hauteur des mots-symboles
     * elle paraissait deux fois plus petite qu'eux : sa largeur s'arrête là où
     * la leur continue, et son texte est enfermé dans la pastille. Il lui faut
     * donc dépasser la ligne des capitales pour peser autant à l'œil — au-delà
     * de 40 px en revanche, le bloc plein devient l'élément le plus lourd.
     */
    height: 40px;
}

.marquee__groupe img.logo-outil--silae {
    height: 27px;
}

.marquee__groupe img.logo-outil--lefebvre {
    /* Mot-symbole très allongé (9,4:1), il se pose donc plus bas que les autres. */
    height: 17px;
}

.marquee__groupe img.logo-outil--vcp {
    height: 34px;
}

/*
 * Dans les cartes, les logos sont bornés à 32 px de haut et 148 px de large.
 * Deux formats sortent de l'épure, pour la même raison inversée : l'icône
 * carrée de Cegid Quadra, que la borne de hauteur rend minuscule faute de
 * largeur, et le mot-symbole Lefebvre Dalloz, si allongé que c'est la borne de
 * largeur qui l'écrase. `.outil__logo` réserve 46 px de haut, la place est là.
 */
.outil__logo img.logo-outil--quadra {
    /* Même correction que dans la bande, à l'échelle des cartes. */
    max-height: 40px;
}

.outil__logo img.logo-outil--lefebvre {
    max-width: 180px;
}

/* --------------------------------------------------------------------------
   29. Menu déroulant des services : le panneau ne suit pas la barre

   Le panneau est un descendant de `.nav-neo__liens`, dont theme.css colore
   tous les liens : beige en haut de page, encre une fois la barre collée.
   Aucune des deux ne convient sur le fond clair du panneau — « Toutes nos
   prestations » s'y effaçait presque en haut de page, et les noms de services
   viraient au noir dès que la barre se collait.

   Ces règles doivent peser aussi lourd que `.nav-neo.est-collee
   .nav-neo__liens a`, d'où les trois classes plus le type dans chaque
   sélecteur. À poids égal c'est l'ordre qui tranche, et custom.css est
   chargée après theme.css.
   -------------------------------------------------------------------------- */
.nav-neo .nav-deroulant__panneau .colonne-services__liste a {
    color: var(--foret);
}

.nav-neo .nav-deroulant__panneau .colonne-services__liste a:hover,
.nav-neo .nav-deroulant__panneau .colonne-services__liste a:focus-visible {
    color: var(--foret-nuit);
}

.nav-neo .nav-deroulant__panneau a.nav-deroulant__tous {
    color: var(--foret);
}

.nav-neo .nav-deroulant__panneau a.nav-deroulant__tous:hover {
    color: var(--olive);
}

/*
 * Le soulignement animé signale l'entrée de menu survolée : il n'a rien à
 * faire dans le panneau, où chaque lien a déjà son propre survol. Il fuitait
 * par `.nav-neo__liens a::after`, qui atteint aussi les liens du panneau.
 */
.nav-deroulant__panneau a::after {
    content: none;
}

/* --------------------------------------------------------------------------
   30. Bloc-marque : le logo du cabinet, en deux encres

   Le verrouillage fourni par le cabinet porte déjà « NEO CONSULTING » : il
   remplace le monogramme et son texte d'un bloc (templates/element/logo.php).
   Il reste vert, donc invisible sur les fonds vert sombre du site — d'où deux
   fichiers superposés dont on ne montre que celui qui a du contraste.

   Par défaut c'est l'encre beige : la barre en haut de page, le menu mobile et
   le pied de page sont tous en vert. Seule la barre collée, qui vire au beige,
   réclame l'encre verte.
   -------------------------------------------------------------------------- */
.logo {
    /* Le `gap` de theme.css séparait le carré de son texte : il n'y a plus
       qu'une image, et deux `gap` de trop décaleraient le logo de la gouttière. */
    gap: 0;
}

.logo__image {
    display: block;
    width: auto;
    height: 46px;
    transition: height 0.35s ease;
}

.logo__image--sur-clair {
    display: none;
}

.nav-neo.est-collee .logo__image--sur-sombre {
    display: none;
}

.nav-neo.est-collee .logo__image--sur-clair {
    display: block;
    /* La barre collée se resserre : le logo suit le même mouvement. */
    height: 40px;
}

.pied .logo__image {
    height: 54px;
}

@media (max-width: 560px) {
    .logo__image,
    .nav-neo.est-collee .logo__image--sur-clair {
        height: 38px;
    }
}


/* --------------------------------------------------------------------------
   31. Contraste du texte secondaire sur les fonds verts

   Audit Lighthouse du 20/08/2026 : la ligne de copyright du pied de page
   tombait à 3,2:1, là où le WCAG AA demande 4,5:1 pour du texte de cette
   taille. Le même réglage — un beige à 42 ou 50 % d'opacité — se retrouvait
   ailleurs sur les fonds verts, sans que l'audit ne l'atteigne (fil d'Ariane
   des pages intérieures, légende de la frise, mention de défilement du hero).

   Le seuil dépend du vert : 0,58 suffit sur `--foret-nuit`, il faut 0,66 sur
   `--foret`, plus clair. On aligne tout sur 0,68, qui passe partout et garde
   la hiérarchie voulue — ce texte reste nettement plus discret que le corps.
   -------------------------------------------------------------------------- */
.pied__bas {
    color: rgba(243, 233, 207, 0.62);
}

.pied__bas a {
    /* Un lien doit se distinguer du texte qui l'entoure. */
    color: rgba(243, 233, 207, 0.78);
}

.fil-ariane,
.frise-legende,
.hero__descendre {
    color: rgba(243, 233, 207, 0.68);
}

.mois__liste li.vide {
    /* « rien à faire » est une information, pas une décoration. */
    color: rgba(243, 233, 207, 0.68);
}


/* --------------------------------------------------------------------------
   32. Fond du hero : format moderne et largeur adaptée à l'écran

   `marseille-hero.jpg` pesait 399 Ko, servis à l'identique à un téléphone
   comme à un 27 pouces. Les déclinaisons produites par
   `bin/cake images_reactives` descendent à 65 Ko en WebP sur mobile.

   La photo est recouverte d'un dégradé vert entre 42 et 95 % d'opacité
   (`.hero__voile`) : la qualité de compression a été baissée en conséquence,
   ce qui ne se voit nulle part.

   `image-set()` laisse le navigateur choisir le format qu'il sait décoder ;
   la déclaration `url()` qui précède sert de repli à ceux qui l'ignorent.
   -------------------------------------------------------------------------- */
.hero__fond {
    background-image: url("../img/photos/hero-marseille-1440.jpg");
    background-image: image-set(
        url("../img/photos/hero-marseille-1440.webp") type("image/webp"),
        url("../img/photos/hero-marseille-1440.jpg") type("image/jpeg")
    );
}

@media (max-width: 960px) {
    .hero__fond {
        background-image: url("../img/photos/hero-marseille-960.jpg");
        background-image: image-set(
            url("../img/photos/hero-marseille-960.webp") type("image/webp"),
            url("../img/photos/hero-marseille-960.jpg") type("image/jpeg")
        );
    }
}

@media (min-width: 1600px) {
    .hero__fond {
        background-image: url("../img/photos/hero-marseille-1740.jpg");
        background-image: image-set(
            url("../img/photos/hero-marseille-1740.webp") type("image/webp"),
            url("../img/photos/hero-marseille-1740.jpg") type("image/jpeg")
        );
    }
}