/* Biappi — feuille de style unique.
   Charte : docs/biappi_charteGraph.pptx ; mise en forme : maquette docs/biappi.fr — Refonte.html.
   Mobile d'abord : les règles de base visent le téléphone, les @media élargissent. */

/* ---------- Police (auto-hébergée, licence OFL : /assets/fonts/OFL.txt) ---------- */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800; /* police variable : toutes les graisses dans un seul fichier */
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Variables ---------- */

:root {
    /* Couleurs de la charte */
    --emerald:   #03DD9C;
    --midnight:  #014054;
    --sunglow:   #FFCB46;
    --parchment: #F3ECCE;
    --night:     #131515;

    /* Couleurs d'usage (maquette) */
    --fond:        #FBF8EF;
    --surface:     #FFFFFF;
    --texte:       var(--night);
    --texte-doux:  #46504F;
    --bordure:     #E4DCBC;
    --vert-pale:   #DFF7EE;
    --erreur:      #B42318; /* messages d'erreur du formulaire : 6,6:1 sur blanc, 6,2:1 sur le fond */

    /* Contrastes vérifiés (seuil 4,5:1 pour le texte) :
       - sur fond clair (fond, blanc, parchment) : night 15 à 18, texte-doux 7 à 8, midnight 9,5 à 11 → OK ;
       - emerald et sunglow sur fond clair : 1,4 à 1,8 → JAMAIS pour du texte ; ce sont des fonds et des accents ;
       - sur midnight : blanc 11, parchment 9,5, sunglow 7,5, emerald 6,4 → OK ;
       - sur sunglow et emerald : night 10 à 12 → OK. */

    /* Actions */
    --bouton-fond:  var(--sunglow);
    --bouton-texte: var(--night);
    --lien:         var(--midnight);
    --focus:        var(--midnight);

    /* Typographie */
    --police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --taille-texte: 1rem;
    --taille-h1: clamp(2.375rem, 4.4vw, 3.625rem); /* 38 → 58 px */
    --taille-h2: clamp(1.75rem, 3vw, 2.125rem);    /* 28 → 34 px */
    --taille-h3: 1.375rem;                         /* 22 px */

    /* Formes et espaces */
    --rayon:        16px;
    --rayon-petit:  12px;
    --rayon-pilule: 999px;
    --largeur-max:  1200px;
    --gouttiere:    1rem;
    --ombre:        0 8px 30px -12px rgba(1, 64, 84, 0.25);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: var(--taille-texte);
    line-height: 1.6;
    color: var(--texte);
    background: var(--fond);
    -webkit-text-size-adjust: 100%;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* Un élément marqué hidden reste caché, même si une classe lui donne un affichage (ex. .bouton) */
[hidden] {
    display: none !important;
}

/* Une ancre (#formulaire…) ne doit pas finir cachée sous l'en-tête fixe */
[id] {
    scroll-margin-top: 6.5rem;
}

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    font-weight: 800;
    text-wrap: balance;
}

h1 {
    font-size: var(--taille-h1);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

h2 {
    font-size: var(--taille-h2);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--taille-h3);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

a {
    color: var(--lien);
}

a:hover {
    color: var(--night);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.texte-doux {
    color: var(--texte-doux);
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px; /* cible tactile confortable */
    padding: 0.75rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-pilule);
    background: var(--bouton-fond);
    color: var(--bouton-texte);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
}

.bouton:hover {
    color: var(--bouton-texte);
    filter: brightness(0.96);
}

.bouton--secondaire {
    background: var(--surface);
    border-color: var(--bordure);
    font-weight: 600;
}

.bouton--grand {
    min-height: 54px;
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

/* ---------- Mise en page ---------- */

main {
    width: 100%;
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: var(--gouttiere);
}

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
}

.lien-evitement:focus {
    left: var(--gouttiere);
    top: var(--gouttiere);
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--surface);
}

@media (min-width: 48rem) {
    :root {
        --gouttiere: 1.5rem;
    }
}

/* ---------- En-tête ----------
   Mobile : logo + burger ; le menu s'ouvre sous la barre (sans JavaScript, il est toujours affiché).
   Ordinateur (≥ 56.25rem, 900 px) : barre en pilule, menu en ligne, sous-menu Expertises au survol ou au focus. */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(251, 248, 239, 0.96);
    border-bottom: 1px solid var(--bordure);
}

.entete__barre {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0.625rem var(--gouttiere);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.logo {
    display: flex;
}

.logo img {
    height: 30px;
    width: auto;
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entete__contact {
    display: none;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--rayon-petit);
    background: var(--surface);
    box-shadow: 0 4px 14px -8px rgba(1, 64, 84, 0.4);
    color: var(--night);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.js .burger {
    display: inline-flex;
}

.burger__fermer,
.burger[aria-expanded="true"] .burger__ouvrir {
    display: none;
}

.burger[aria-expanded="true"] .burger__fermer {
    display: inline;
}

/* Menu (mobile d'abord) */
.menu {
    order: 3;
    width: 100%;
    padding-bottom: 0.5rem;
}

.js .menu {
    display: none;
}

.js .entete--ouvert .menu {
    display: block;
}

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

.menu__liste {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu__lien {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    font-weight: 600;
    color: var(--night);
    text-decoration: none;
}

.menu__lien[aria-current] {
    color: var(--midnight);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.menu__lien svg {
    display: none; /* chevron : seulement sur ordinateur */
}

.menu__element--contact {
    margin-top: 0.5rem;
}

.sous-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 0.5rem;
}

.sous-menu__lien {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    color: var(--night);
    text-decoration: none;
}

.sous-menu__lien:hover,
.sous-menu__lien:focus-visible,
.sous-menu__lien[aria-current] {
    background: var(--fond);
    color: var(--night);
}

.sous-menu__icone {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--rayon-petit);
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sous-menu__lien[aria-current] .sous-menu__icone {
    background: var(--midnight);
    color: var(--surface);
}

.sous-menu__texte {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sous-menu__accroche {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--texte-doux);
}

@media (min-width: 56.25rem) {
    .entete {
        background: none;
        border-bottom: 0;
        padding: 1rem var(--gouttiere) 0;
    }

    .entete__barre {
        flex-wrap: nowrap;
        padding: 0.625rem 0.625rem 0.625rem 1.5rem;
        background: var(--surface);
        border-radius: var(--rayon-pilule);
        box-shadow: var(--ombre);
        gap: 1.5rem;
    }

    .js .menu,
    .menu {
        display: block;
        order: 0;
        width: auto;
        padding: 0;
    }

    .menu__liste {
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
        font-size: 0.9375rem;
    }

    .menu__lien svg {
        display: inline;
    }

    .menu__element--contact,
    .js .burger {
        display: none;
    }

    .entete__contact {
        display: inline-flex;
    }

    .menu__element--expertises {
        position: relative;
    }

    .sous-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: -20px;
        z-index: 30;
        width: 340px;
        padding: 10px;
        background: var(--surface);
        border-radius: 22px;
        box-shadow: 0 24px 50px -20px rgba(1, 64, 84, 0.45);
    }

    .menu__element--expertises:hover .sous-menu,
    .menu__element--expertises:focus-within .sous-menu {
        display: flex;
    }
}

/* ---------- Composants réutilisables ---------- */

.carte {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 28px;
    background: var(--surface);
}

.carte > :last-child {
    margin-bottom: 0;
}

.carte--sombre {
    background: var(--midnight);
    color: var(--surface); /* 11:1 */
}

.etiquettes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.etiquette {
    padding: 0.1875rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 600;
}

.etiquette--forte {
    border-color: var(--emerald);
    background: var(--emerald);
    font-weight: 800;
}

.liste-puces {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.liste-puces li {
    display: flex;
    gap: 0.75rem;
}

.liste-puces li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.6em;
    border-radius: 2px;
    background: var(--sunglow); /* décor sur Midnight, pas du texte */
}

.pastilles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
}

.pastilles li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: var(--fond);
    font-size: 0.9375rem;
}

/* Numéro et titre sur une même ligne, le texte en dessous */
.pastilles__tete {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1.25;
}

.pastille {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.875rem;
    background: var(--emerald);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liens-cartes {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.lien-carte {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 44px;
    padding: 1rem 1.125rem;
    border-radius: 18px;
    background: var(--surface);
    color: var(--night);
    text-decoration: none;
}

.lien-carte:hover {
    color: var(--night);
    box-shadow: var(--ombre);
}

.lien-carte strong {
    flex: 1;
}

.lien-carte__icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lien-carte__fleche {
    color: var(--midnight);
    font-weight: 800;
}

.lien-carte__logo {
    flex-shrink: 0;
    width: 72px;
    height: 44px;
    padding: 6px;
    border-radius: 10px;
    background: var(--fond);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lien-carte__logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.lien-carte__texte {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.lien-carte__texte .texte-doux {
    font-size: 0.875rem;
}

.lien-fort {
    font-weight: 700;
}

.etiquette--sombre {
    border-color: var(--night);
    background: var(--night);
    color: var(--surface);
    font-weight: 700;
}

.etiquette--techno {
    border-color: #E1ECF0;
    background: #E1ECF0;
    color: var(--midnight); /* 9:1 */
    font-weight: 700;
}

.etiquette--douce {
    border-color: var(--parchment);
    background: var(--parchment);
    font-weight: 700;
}

/* ---------- Liste des réalisations ---------- */

.liste-intro {
    padding: 2rem 0 1.5rem;
}

.liste-intro h1 {
    font-size: clamp(2.375rem, 4.4vw, 3.5rem);
}

/* Les filtres n'existent qu'avec JavaScript : sans lui, toutes les cartes restent visibles */
.filtres {
    display: none;
}

.js .filtres {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.125rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 10px 30px -18px rgba(1, 64, 84, 0.3);
}

.filtres__groupe {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Sur ordinateur : le nom du filtre à gauche, ses boutons à droite (le panneau tient en deux lignes) */
@media (min-width: 800px) {
    .filtres__groupe {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
    }
}

.filtres__titre {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--midnight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filtres__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filtre {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: var(--rayon-pilule);
    background: var(--parchment);
    color: var(--night);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.filtre__nombre {
    color: var(--texte-doux);
}

.filtre--vide {
    color: var(--texte-doux);
}

.filtre[aria-pressed="true"] {
    background: var(--midnight);
    color: var(--surface);
    font-weight: 700;
}

.filtre[aria-pressed="true"] .filtre__nombre {
    color: #B9D3DA; /* 7,9:1 sur Midnight */
}

.filtres__pied {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.875rem;
    border-top: 1px solid #F0EBD9;
}

/* Sur téléphone : une seule ligne de boutons par filtre, défilante, au lieu de 4 lignes empilées */
@media (max-width: 640px) {
    .filtres__boutons {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -0.25rem;
        padding: 0.125rem 0.25rem 0.375rem;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .filtres__boutons .filtre {
        flex-shrink: 0;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

.filtres__resume {
    margin: 0;
    font-weight: 600;
}

.projets {
    padding-top: 2rem;
}

.projets__vide {
    margin-bottom: 1.5rem;
    padding: 3rem 1.75rem;
    border: 2px dashed #D9CFA6;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: center;
    text-align: center;
}

.projets__vide strong {
    font-size: 1.375rem;
}

.projets__grille {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 1.5rem;
}

.projet__carte {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 12px 32px -20px rgba(1, 64, 84, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Toute la carte est cliquable : le lien du titre est étiré sur la carte (un seul lien par carte). */
.projet__lien-titre {
    color: inherit;
    text-decoration: none;
}

.projet__lien-titre::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.projet__lien-titre:focus-visible {
    outline: none;
}

.projet__lien-titre:focus-visible::after {
    outline: 3px solid var(--midnight);
    outline-offset: -3px;
}

@media (hover: hover) {
    .projet__carte--lien:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px -22px rgba(1, 64, 84, 0.5);
    }

    .projet__carte--lien:hover .projet__lien-titre {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .projet__carte--lien:hover .projet__vignette {
        transform: scale(1.04);
    }

    .projet__carte--lien:hover .projet__fleche {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .projet__carte,
    .projet__vignette,
    .projet__fleche {
        transition: none;
    }

    .projet__carte--lien:hover,
    .projet__carte--lien:hover .projet__vignette,
    .projet__carte--lien:hover .projet__fleche {
        transform: none;
    }
}

.projet__visuel {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vignette du projet (800 x 500, 8:5) : l'image remplit le haut de la carte */
.projet__visuel--image {
    height: auto;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: var(--parchment);
}

.projet__vignette {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Étude de cas / projet réalisé : posé sur l'image (texte sombre sur Emerald : 10:1 ; sur blanc : 11:1) */
.projet__type {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 1;
    padding: 0.25rem 0.75rem;
    border-radius: var(--rayon-pilule);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -8px rgba(19, 21, 21, 0.5);
}

.projet__type--etude {
    background: var(--emerald);
    color: var(--night);
}

.projet__type--realise {
    background: var(--surface);
    color: var(--midnight);
}

/* Logo du client, en pastille sur le bas de l'image */
.projet__logo-mini {
    position: absolute;
    left: 0.875rem;
    bottom: 0.875rem;
    z-index: 1;
    max-width: 45%;
    height: 40px;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 18px -10px rgba(19, 21, 21, 0.55);
    display: flex;
    align-items: center;
}

.projet__logo-mini img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.projet__logo {
    width: 240px;
    max-width: 80%;
    height: 120px;
    padding: 1.25rem;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 20px 40px -18px rgba(19, 21, 21, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.projet__logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.projet__icone {
    width: 104px;
    height: 104px;
    border-radius: 30px;
    background: var(--surface);
    color: var(--midnight);
    box-shadow: 0 20px 40px -18px rgba(19, 21, 21, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.projet__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.625rem 1.625rem;
}

.projet__corps h2 {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.projet__corps p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Client et secteur, au-dessus du titre */
.projet:not(.projet--compact) .projet__corps .projet__client {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--midnight);
}

.projet__accroche {
    color: var(--texte-doux);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.projet__tags {
    margin-top: auto;
    padding-top: 0.25rem;
    gap: 0.375rem;
}

.projet__tags .etiquette {
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
}

.etiquette--metier {
    border-color: var(--parchment);
    background: var(--parchment);
    color: var(--night);
    font-weight: 700;
}

.projet__cta {
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--night);
    font-weight: 700;
}

/* Lien « Découvrir… » des cartes du hub des expertises (ce n'est pas la carte d'un projet) */
.projet__lien {
    margin-top: auto;
    padding-top: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--night);
    font-weight: 700;
    text-decoration: none;
}

.projet__fleche {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sunglow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

/* ---------- Page techno ---------- */

.surligne {
    color: var(--midnight);
}

.surtitre {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.875rem 0.25rem 0.25rem;
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--midnight);
}

.surtitre__icone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--midnight);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boutons {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.liste-coches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.liste-coches li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: var(--rayon);
    background: var(--fond);
}

.liste-coches__icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--emerald);
    color: var(--night);
    display: flex;
    align-items: center;
    justify-content: center;
}

.apports {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.apport {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--surface);
}

.apport strong {
    font-size: 1.125rem;
}

.apport__icone {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.projet__corps h3 {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.faq {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.faq__question {
    border-radius: 20px;
    background: var(--surface);
}

.faq__question summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    list-style: none;
}

.faq__question summary::-webkit-details-marker {
    display: none;
}

.faq__question summary h3 {
    margin: 0;
    font-size: 1.0625rem;
    letter-spacing: 0;
}

.faq__signe::before {
    content: "+";
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--midnight);
}

.faq__question[open] .faq__signe::before {
    content: "−";
}

.faq__question > p,
.faq__reponse {
    margin: 0;
    padding: 0 1.375rem 1.25rem;
    color: #33403E;
}

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

.faq__reponse > :last-child {
    margin-bottom: 0;
}

.faq-theme + .faq-theme {
    margin-top: 2.5rem;
}

.liens-cartes--grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

/* ---------- Accueil ---------- */

/* Titres de section de l'accueil : centrés, sur une ligne quand la largeur le permet */
.titre-centre {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    text-align: center;
}

/* Bande pleine largeur : le fond déborde de la colonne sans créer de défilement horizontal */
.bande {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--bande-fond);
    box-shadow: 0 0 0 100vmax var(--bande-fond);
    clip-path: inset(0 -100vmax);
}

.bande--parchment {
    --bande-fond: var(--parchment);
}

.bande--sombre {
    --bande-fond: var(--midnight);
    color: var(--surface); /* 11:1 */
}

.accueil-heros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    gap: 2.5rem;
    align-items: end; /* bas du bouton « Parlons de votre projet » aligné sur la devise */
    padding: 2.5rem 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* Texte du héros : titre calé en haut (sur le haut du téléphone), boutons en bas (sur la devise) */
.accueil-heros__texte {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.accueil-heros__texte .boutons {
    margin-top: auto;
}

.accueil-heros h1 {
    margin: -0.12em 0 0.75rem; /* haut des lettres, pas de l'interligne, au niveau du téléphone */
    font-size: clamp(2.5rem, 5vw, 4.125rem);
}

.accueil-heros h1 .surligne {
    display: block;
    margin-top: 0.2em;
}

/* Visuel du héros : capture ordinateur, téléphone posé dessus, devise en dessous */
.heros-visuel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.heros-visuel__figure {
    position: relative;
    margin: 0;
    padding: 1.75rem 2.5rem 1.75rem 0;
}

.heros-visuel__figure .capture__cadre {
    padding-bottom: 1.25rem;
    border-radius: 24px;
}

.heros-visuel__figure .capture__fenetre {
    border-radius: 12px;
}

.heros-visuel__tel {
    position: absolute;
    top: 0;
    right: 0;
    width: 27%;
    padding: 6px;
    border-radius: 28px;
    background: var(--night);
    box-shadow: 0 24px 48px -16px rgba(1, 64, 84, 0.55);
    transform: rotate(4deg);
    transform-origin: 50% 100%;
}

.heros-visuel__tel img {
    display: block;
    width: 100%;
    border-radius: 22px;
}

/* Légende : sous la capture sur mobile, posée dessus en pastille sur grand écran */
.heros-visuel__legende {
    max-width: 70%;
    padding-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--texte-doux);
}

@media (min-width: 48rem) {
    .heros-visuel__legende {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        max-width: calc(100% - 2rem);
        padding: 0.375rem 0.875rem;
        border-radius: var(--rayon-pilule);
        background: var(--surface);
        box-shadow: 0 6px 18px -8px rgba(1, 64, 84, 0.4);
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--night);
    }

    .heros-visuel__figure .heros-visuel__legende {
        bottom: 2.75rem;
        left: 1.75rem;
    }

    .techno-panneau__visuel .heros-visuel__legende {
        left: 2rem;
        bottom: 2rem;
    }
}

/* Devise : une couleur par mot */
.devise {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

.devise li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    box-shadow: 0 10px 24px -16px rgba(1, 64, 84, 0.45);
    font-weight: 800;
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    letter-spacing: -0.01em;
}

.devise li::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--sunglow);
}

.devise li:nth-child(2)::before {
    background: var(--midnight);
}

.devise li:nth-child(3)::before {
    background: var(--emerald);
}

.accueil-bloc {
    margin-top: clamp(3rem, 7vw, 5.5rem);
}

/* Logos (aussi en version compacte sur la page Contact) */
.logos {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.logos li {
    height: 84px;
    padding: 1rem;
    border-radius: var(--rayon);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logos img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.85;
    transition: filter 0.2s, opacity 0.2s;
}

.logos li:hover img {
    filter: none;
    opacity: 1;
}

/* Accueil : logos qui défilent seuls, en gris ; la couleur revient au survol */
.accueil-logos h2 {
    margin-bottom: 2rem;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    text-align: center;
}

.defile {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.defile + .defile {
    margin-top: 1.25rem;
}

/* La piste contient la rangée deux fois : la décaler de moitié la ramène à son point de départ */
.accueil-logos .defile__piste {
    width: max-content;
    margin: 0;
    display: flex;
    gap: 0;
    animation: defile var(--duree) linear infinite;
}

.defile--inverse .defile__piste {
    animation-direction: reverse;
}

/* Un clic arrête ou relance (defile.js) ; le survol ne compte que sur ordinateur, sinon un toucher resterait « survolé » */
.js .defile {
    cursor: pointer;
}

.defile:focus-visible {
    outline: 2px solid var(--midnight);
    outline-offset: -2px; /* à l'intérieur : le masque des bords couperait un contour extérieur */
}

.defile:focus-within .defile__piste,
.en-pause .defile__piste {
    animation-play-state: paused;
}

@media (hover: hover) {
    .defile:hover .defile__piste {
        animation-play-state: paused;
    }
}

@keyframes defile {
    to {
        transform: translateX(-50%);
    }
}

.accueil-logos .defile__piste li {
    flex: 0 0 auto;
    width: clamp(150px, 19vw, 250px);
    height: 64px;
    padding: 0 clamp(1rem, 2vw, 1.75rem);
    border-radius: 0;
    background: none;
}

.accueil-logos .logos img {
    max-width: 100%;
    mix-blend-mode: multiply; /* un fond blanc dans l'image se fond dans la bande */
    opacity: 0.7;
}

@media (min-width: 48rem) {
    .accueil-logos .defile__piste li {
        height: 80px;
    }
}

/* Mouvements réduits : pas de défilement, tous les logos visibles une seule fois */
@media (prefers-reduced-motion: reduce) {
    .defile {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .accueil-logos .defile__piste {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        animation: none;
    }

    .accueil-logos .defile__piste li[aria-hidden] {
        display: none;
    }
}

/* Ce que nous résolvons : liste sur mobile, 3 cartes par ligne sur ordinateur */
.besoins {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.875rem;
}

.besoin {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: 22px;
    background: var(--surface);
    color: var(--night);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.besoin:hover {
    color: var(--night);
    box-shadow: var(--ombre);
    transform: translateY(-2px);
}

.besoin__icone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--vert-pale);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.besoin__texte {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.besoin strong {
    font-size: 1.1875rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.besoin__reponse {
    color: var(--texte-doux);
}

.besoin__chevron {
    color: var(--midnight);
    display: flex;
}

.besoin--jaune {
    background: var(--sunglow);
}

.besoin--jaune .besoin__icone {
    background: var(--surface);
}

.besoin--jaune .besoin__reponse {
    color: #33403E; /* 7,6:1 sur Sunglow */
}

.besoin--sombre,
.besoin--sombre:hover {
    background: var(--midnight);
    color: var(--surface);
}

.besoin--sombre .besoin__icone {
    background: var(--emerald);
    color: var(--night);
}

.besoin--sombre .besoin__reponse {
    color: #DCE8EB; /* 9:1 sur Midnight */
}

.besoin--sombre .besoin__chevron {
    color: var(--surface);
}

.besoin--autre {
    grid-template-columns: 1fr auto;
    border: 2px dashed #D9CFA6;
    background: transparent;
}

.besoin--autre .lien-fort {
    color: var(--midnight);
}

@media (min-width: 48rem) {
    .besoins {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .besoin {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.75rem;
        border-radius: 26px;
    }

    .besoin strong {
        font-size: 1.3125rem;
    }

    .besoin__chevron {
        display: none;
    }

    .besoin--autre {
        justify-content: center;
        gap: 0.75rem;
    }
}

@media (min-width: 56.25rem) {
    .besoins {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* La bonne technologie : accordéon sur mobile ; choix à gauche et détail à droite sur ordinateur */
.technos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.technos__titre {
    margin: 0;
    font-size: inherit;
    letter-spacing: normal;
}

.techno-choix {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    color: var(--night);
    font: inherit;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.techno-choix:hover {
    box-shadow: var(--ombre);
}

.techno-choix__icone {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.techno-choix__nom {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.techno-choix__tag {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--texte-doux);
}

.techno-choix__fleche {
    display: none;
}

.techno-choix__chevron {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fond);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.techno-choix[aria-expanded="true"] .techno-choix__chevron {
    transform: rotate(180deg);
}

.techno-panneau {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 1rem 1.5rem;
    border-radius: 24px;
    background: var(--surface);
}

.techno-panneau__visuel {
    position: relative;
    margin: 0;
}

.techno-panneau__visuel .capture__cadre {
    padding-bottom: 1.25rem;
}

.techno-panneau__visuel .capture__fenetre {
    border-radius: 12px;
}

.techno-panneau__vide {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--midnight);
}

.techno-panneau__pied {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0 0.25rem;
}

.coches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.coches li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.coches .liste-coches__icone {
    width: 24px;
    height: 24px;
}

.bouton--noir,
.bouton--noir:hover {
    background: var(--night);
    color: var(--surface); /* 18:1 */
}

/* Sur mobile, le libellé passe à la ligne : « Découvrir Agents IA & Automatisations » débordait de l'écran */
.techno-panneau__pied .bouton {
    width: 100%;
    padding-inline: 1.25rem;
    justify-content: center;
    text-align: center;
}

.bouton--noir:hover {
    filter: none;
    background: var(--midnight);
}

/* Avec JavaScript, la techno ouverte est collée à son bouton (mobile) */
.js .techno-choix[aria-expanded="true"] {
    border-radius: 22px 22px 0 0;
}

.js .techno-panneau {
    margin-top: -0.75rem;
    border-radius: 0 0 22px 22px;
}

@media (min-width: 56.25rem) {
    .js .technos {
        display: grid;
        grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
        grid-template-rows: repeat(var(--lignes), auto) 1fr;
        gap: 0.75rem 1.5rem;
        align-items: start;
    }

    .js .technos__titre {
        grid-column: 1;
    }

    .js .techno-choix,
    .js .techno-choix[aria-expanded="true"] {
        border-radius: 22px;
    }

    .js .techno-choix[aria-expanded="true"] {
        background: var(--midnight);
        color: var(--surface);
        box-shadow: var(--ombre);
    }

    .js .techno-choix[aria-expanded="true"] .techno-choix__tag {
        color: #DCE8EB; /* 9:1 sur Midnight */
    }

    .js .techno-choix[aria-expanded="true"] .techno-choix__icone {
        background: rgba(255, 255, 255, 0.12);
        color: var(--surface);
    }

    .js .techno-choix__chevron {
        display: none;
    }

    .js .techno-choix__fleche {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--sunglow);
        color: var(--night);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .js .techno-choix[aria-expanded="true"] .techno-choix__fleche {
        opacity: 1;
    }

    .js .techno-panneau {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        margin-top: 0;
        padding: 1.25rem 1.25rem 1.75rem;
        border-radius: 28px;
    }

    .js .techno-panneau__pied {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.75rem;
    }

    .js .techno-panneau__pied .bouton {
        width: auto;
        padding-inline: 1.75rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Chaque service : les métiers à gauche, leurs exemples sur fond bleu clair à droite */
.metiers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.metiers__texte {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    color: var(--texte-doux);
}

/* Onglets métier : sans JavaScript, les boutons sont masqués et tous les exemples visibles */
.onglets {
    display: none;
    margin: 0;
}

.js .onglets {
    display: flex;
}

.metiers .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
}

.metiers .filtre {
    flex-shrink: 0;
}

.filtre[aria-selected="true"] {
    background: var(--night);
    color: var(--surface);
    font-weight: 700;
}

.metiers__panneaux {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 24px;
    background: #E1ECF0;
}

.panneau-metier + .panneau-metier {
    margin-top: 1.5rem;
}

.js .panneau-metier + .panneau-metier {
    margin-top: 0;
}

.panneau-metier > :last-child {
    margin-bottom: 0;
}

.panneau-metier__titre {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--midnight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.exemples {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.exemples li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: var(--surface);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.exemples__numero {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sunglow);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 56.25rem) {
    .metiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 2.5rem;
    }

    .metiers .onglets {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* Notre façon de travailler et la parole à nos clients, côte à côte sur fond Midnight, chacun son titre */
.bande--sombre .titre-centre {
    color: var(--surface);
}

.facon {
    display: grid;
    gap: 2rem;
    grid-template-areas: "titre" "apports" "lien" "titre-avis" "avis";
}

.facon__titre {
    grid-area: titre;
    margin: 0;
    color: var(--surface);
}

.facon__titre--avis {
    grid-area: titre-avis;
}

.facon__apports {
    grid-area: apports;
    display: grid;
    align-content: start;
    gap: 1.75rem 2rem;
}

.facon__apport {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.facon__icone {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.facon__apport h3 {
    margin: 0 0 0.375rem;
    font-size: 1.1875rem;
}

.facon__apport p {
    margin: 0;
    color: #DCE8EB; /* 9:1 sur Midnight */
}

.facon__lien {
    grid-area: lien;
    margin: 0;
}

.facon__lien a {
    color: var(--surface);
    text-underline-offset: 5px;
}

.facon__lien a:hover {
    color: var(--sunglow);
}

.facon__trait {
    display: none;
}

.avis {
    grid-area: avis;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 28px;
    background: #0B5A73;
}

/* Guillemet à cheval sur le bord haut de l'encart, pour ne pas prendre de hauteur */
.avis__guillemet {
    position: absolute;
    top: -1.75rem;
    right: 1.75rem;
    font-size: 5rem;
    line-height: 0.85;
    font-weight: 800;
    color: var(--emerald); /* décor */
}

.avis__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

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

/* position: relative garde le texte caché du lien « Voir le projet » dans le carrousel :
   sans elle, il se plaçait à droite de l'écran et élargissait la page sur mobile */
.avis__item {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.avis__item figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.avis blockquote {
    margin: 0;
    font-size: clamp(1.125rem, 1.45vw, 1.25rem); /* sans gras : un point de plus pour garder la présence */
    line-height: 1.55;
    font-weight: 400;
}

.avis blockquote p {
    margin: 0;
}

.avis figcaption {
    display: flex;
    flex-direction: column;
}

.avis__fonction {
    color: #DCE8EB; /* 7,4:1 sur #0B5A73 */
}

.avis__projet {
    margin-top: 0.5rem;
    color: var(--sunglow); /* 5,2:1 sur #0B5A73 */
    font-weight: 700;
}

.avis__projet:hover {
    color: var(--surface);
}

/* Navigation des témoignages, en bas de l'encart : n'existe qu'avec JavaScript */
.avis__nav {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.sans-js .avis__nav {
    display: none;
}

.avis__bouton {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.avis__bouton:disabled,
.avis__point:disabled {
    opacity: 0.4;
    cursor: default;
}

.avis__bouton:not(:disabled):hover {
    border-color: var(--emerald);
    background: var(--emerald);
    color: var(--night);
}

.avis__bouton:focus-visible,
.avis__point:focus-visible,
.facon__lien a:focus-visible {
    outline-color: var(--sunglow);
}

.avis__points {
    display: flex;
    align-items: center;
}

/* Cible de 24 px de haut ; le point visible est dessiné à l'intérieur */
.avis__point {
    position: relative;
    width: 22px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: width 0.3s;
}

.avis__point::before {
    content: "";
    position: absolute;
    inset: 8px 7px;
    border-radius: var(--rayon-pilule);
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.3s;
}

.avis__point[aria-current="true"] {
    width: 40px;
}

.avis__point[aria-current="true"]::before {
    background: var(--emerald);
}

@media (min-width: 48rem) {
    .facon__apports {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 56.25rem) {
    /* L'encart des témoignages s'arrête à la hauteur du lien « Découvrir notre méthode » */
    .facon {
        grid-template-columns: minmax(0, 50fr) auto minmax(0, 50fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "titre   trait titre-avis"
            "apports trait avis"
            "lien    trait avis";
        gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
    }

    .facon--seule {
        grid-template-columns: 1fr;
        grid-template-areas: "titre" "apports" "lien";
    }

    .facon--seule .facon__apports {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .facon__trait {
        display: block;
        grid-area: trait;
        width: 2px;
        background: linear-gradient(var(--emerald) 0 18%, rgba(255, 255, 255, 0.15) 18%);
    }
}

/* Calculateur */
.calculateur {
    display: grid;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 32px;
    background: var(--surface);
    box-shadow: 0 12px 32px -20px rgba(1, 64, 84, 0.35);
}

.calculateur__reglages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calculateur__reglages > p {
    margin-bottom: 0.75rem !important;
}

.calculateur__reglages h2,
.calculateur__reglages > p {
    margin: 0;
}

.calculateur__reglages h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.calculateur__reglages > p {
    font-size: 1.0625rem;
}

.curseur label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.curseur output {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--midnight);
    white-space: nowrap;
}

.curseur input {
    width: 100%;
    min-height: 32px; /* cible tactile suffisante (24 px minimum) */
    margin: 0;
    accent-color: var(--midnight);
}

/* Sans JavaScript, les curseurs ne recalculeraient rien : on n'affiche que l'exemple chiffré */
.sans-js .curseur input {
    display: none;
}

.calculateur__resultat {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 28px;
    background: var(--sunglow);
    color: var(--night); /* 12:1 */
}

.calculateur__resultat p {
    margin: 0;
}

.calculateur__libelle {
    font-size: 1.0625rem;
    font-weight: 600;
}

.calculateur__grand {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.calculateur__heures {
    font-size: 1.125rem;
}

.calculateur__part {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
}

.calculateur__moyen {
    margin-top: 0.25rem !important;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.calculateur__resultat .bouton {
    justify-content: center;
    margin-top: 1.5rem;
}

/* La formule, en bas de l'encart jaune et en petit : elle reste dans le HTML, lisible sans JavaScript */
.calculateur__formule {
    margin-top: auto !important;
    padding-top: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #33403E; /* 7,6:1 sur Sunglow */
}

@media (min-width: 56.25rem) {
    .calculateur {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
        align-items: stretch; /* l'encart jaune descend jusqu'au dernier curseur */
    }
}

.apport h3 {
    margin: 0;
    font-size: 1.125rem;
}

/* ---------- Méthode : frise verticale ---------- */

.frise {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
}

.frise__etape {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
}

/* Trait vertical qui relie les étapes */
.frise__etape:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: -1.25rem;
    width: 2px;
    background: var(--bordure);
}

.frise__numero {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sunglow);
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frise__carte h2 {
    font-size: 1.5rem;
}

.frise__details {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem 1.5rem;
}

.frise__details dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--midnight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.frise__details dd {
    margin: 0.25rem 0 0;
    color: #33403E;
}

.methode-encadres {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    align-items: stretch;
}

.lien-clair {
    color: var(--sunglow); /* 7,5:1 sur Midnight */
    font-weight: 700;
}

.lien-clair:hover {
    color: var(--surface);
}

/* ---------- Méthode : page « Notre méthode » (maquettes du 28/10/2026, héros et étapes retouchés) ---------- */

/* Héros centré, sur toute la largeur */
.methode-heros {
    padding: 2rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.methode-heros h1 {
    margin: 0;
}

.methode-heros .fiche__chapo {
    max-width: 46rem;
    margin: 0;
}

/* Coche ronde Emerald, partagée par toutes les listes de la page */
.methode-coche {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--emerald);
    color: var(--night);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.methode-coche svg {
    stroke-width: 3;
}

/* Atouts : pastilles centrées, sur une ligne quand la largeur le permet */
.methode-atouts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.methode-atouts li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    text-align: left;
}

.methode-heros__actions {
    margin: 0.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2.25rem;
}

.lien-souligne {
    font-weight: 700;
    color: var(--midnight);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.lien-souligne:hover {
    color: var(--night);
}

/* Les 5 étapes */
.methode-etapes {
    margin-top: clamp(3rem, 8vw, 5.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.methode-etapes h2,
.methode-maitrise h2,
.methode-questions h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}

.etape-methode {
    scroll-margin-top: 6rem;
    border-radius: 28px;
    background: var(--surface);
}

/* En-tête de l'accordéon : numéro (Midnight, Sunglow quand l'étape est ouverte), verbe, nom, flèche */
.etape-methode__entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 44px;
    padding: 1rem clamp(1.25rem, 3vw, 2rem);
    cursor: pointer;
    list-style: none;
}

.etape-methode__entete::-webkit-details-marker {
    display: none;
}

.etape-methode__numero {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--midnight);
    color: var(--surface);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.etape-methode[open] .etape-methode__numero {
    background: var(--sunglow);
    color: var(--night);
}

.etape-methode__nom {
    flex: 1;
}

.etape-methode__nom strong {
    display: block;
    font-size: 1.25rem;
    line-height: 1.2;
}

.etape-methode__nom small {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--texte-doux);
}

.etape-methode__entete:hover .etape-methode__nom strong {
    color: var(--midnight);
}

.etape-methode__chevron {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape-methode__chevron svg {
    stroke-width: 2.4;
    transition: transform 0.2s;
}

.etape-methode[open] .etape-methode__chevron svg {
    transform: rotate(180deg);
}

/* Bloc ouvert : sous un trait, texte d'un côté et illustration de l'autre (empilés sur téléphone) */
.etape-methode__corps {
    margin: 0 clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2.25rem);
    border-top: 1px solid var(--parchment);
}

.etape-methode__titre {
    margin: 0;
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    line-height: 1.2;
}

.etape-methode__texte {
    margin: 1rem 0 0;
    color: var(--texte-doux);
}

.etape-methode__visuel {
    margin-top: 1.25rem;
    min-height: 240px;
    padding: 1.25rem;
    border-radius: 24px;
    background: var(--parchment);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.8125rem;
}

.etape-methode__details {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.methode-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.methode-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.methode-liste .methode-coche,
.methode-croix {
    margin-top: 0.125rem;
}

.methode-croix {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--texte-doux);
    border-radius: 50%;
    color: var(--texte-doux);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.etape-methode__surtitre {
    margin: 0 0 -0.25rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--midnight);
}

.etape-methode__apres {
    margin: 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.etape-methode__apres strong {
    color: var(--night);
}

.etape-methode__encadre {
    margin: 0;
    padding: 1rem 1.125rem;
    border-radius: var(--rayon);
    background: #E1ECF0;
    font-size: 0.9375rem;
    color: #33403E;
}

.etape-methode__encadre strong {
    color: var(--midnight);
}

.livrable {
    margin: 0;
    padding: 0.625rem 1rem 0.625rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--fond);
    font-size: 0.9375rem;
}

.livrable__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    border-radius: var(--rayon-pilule);
    background: var(--midnight);
    color: var(--surface);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Ordinateur : texte d'un côté, illustration de l'autre, en alternance */
@media (min-width: 48rem) {
    .etape-methode__corps {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "titre visuel"
            "texte visuel"
            "details visuel";
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }

    .etape-methode__corps--inverse {
        grid-template-areas:
            "visuel titre"
            "visuel texte"
            "visuel details";
    }

    .etape-methode__titre { grid-area: titre; }
    .etape-methode__texte { grid-area: texte; }
    .etape-methode__details { grid-area: details; }

    .etape-methode__visuel {
        grid-area: visuel;
        align-self: center;
        margin-top: 0;
        min-height: 300px;
    }
}

/* Illustrations (décoratives, dessinées en HTML et CSS) */
.visuel-etiquette {
    align-self: flex-start;
    padding: 0.125rem 0.625rem;
    border-radius: var(--rayon-pilule);
    background: var(--midnight);
    color: var(--surface);
    font-size: 0.6875rem;
    font-weight: 700;
}

.visuel-etiquette--douce {
    align-self: auto;
    background: var(--parchment);
    color: var(--night);
}

.visuel-trait {
    display: block;
    height: 7px;
    width: 85%;
    border-radius: 4px;
    background: var(--parchment);
}

.visuel-trait--court {
    width: 60%;
}

.visuel-cahier {
    padding-block: 0;
    align-items: stretch;
}

.visuel-cahier__page {
    width: min(78%, 300px);
    padding: 1rem 1.25rem 0.875rem;
    background: var(--surface);
    box-shadow: 0 10px 30px -14px rgba(1, 64, 84, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.visuel-cahier__titre {
    margin: 0.25rem 0;
    font-size: 0.875rem;
}

.visuel-cahier__partie {
    margin-top: 0.375rem;
    font-weight: 700;
    color: var(--midnight);
}

.visuel-cahier__coche {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.visuel-cahier__coche::after {
    content: "";
    height: 7px;
    width: 60%;
    border-radius: 4px;
    background: var(--parchment);
}

.visuel-cahier__coche svg {
    box-sizing: content-box;
    padding: 2px;
    border-radius: 3px;
    background: var(--emerald);
    stroke-width: 3;
}

.visuel-cahier__page small {
    margin-top: 0.5rem;
    color: var(--texte-doux);
}

.visuel-maquette {
    gap: 0.75rem;
}

.visuel-maquette__croquis {
    flex: 0 1 40%;
    padding: 0.75rem;
    border: 1.5px dashed #A9A38A;
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.visuel-maquette__croquis .visuel-trait {
    width: 100%;
}

.visuel-maquette__croquis .visuel-trait--court {
    width: 70%;
}

.visuel-maquette__cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.visuel-maquette__cases span,
.visuel-maquette__bouton {
    height: 40px;
    border: 1px solid #DCD6BE;
    border-radius: 6px;
}

.visuel-maquette__bouton {
    align-self: flex-end;
    width: 40%;
    height: 18px;
    margin-top: 0.5rem;
}

.visuel-maquette__nom {
    font-weight: 600;
    color: var(--texte-doux);
}

.visuel-maquette__nom--appli {
    display: block;
    padding: 0.5rem 0.625rem;
    color: var(--midnight);
    font-weight: 700;
}

.visuel-maquette__fleche {
    flex-shrink: 0;
    color: var(--midnight);
}

.visuel-maquette__appli {
    flex: 0 1 48%;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 26px -12px rgba(1, 64, 84, 0.4);
    overflow: hidden;
}

.visuel-maquette__appli img {
    display: block;
    width: 100%;
    height: auto;
}

.visuel-suivi__carte {
    width: min(100%, 340px);
    padding: 0.875rem 1rem 0.5rem;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 30px -14px rgba(1, 64, 84, 0.35);
    display: flex;
    flex-direction: column;
}

.visuel-suivi__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
}

.visuel-suivi__ligne {
    display: grid;
    grid-template-columns: 18px auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--parchment);
}

.visuel-suivi__ligne > span:last-child {
    color: var(--texte-doux);
}

.visuel-suivi__case {
    width: 18px;
    height: 18px;
    border: 1.5px solid #CFC8AC;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visuel-suivi__case--faite {
    border-color: var(--emerald);
    background: var(--emerald);
}

.visuel-suivi__case svg {
    stroke-width: 3;
}

.visuel-recette {
    position: relative;
    justify-content: flex-start;
}

.visuel-recette__ecran {
    width: 85%;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 26px -12px rgba(1, 64, 84, 0.4);
    overflow: hidden;
}

.visuel-recette__ecran img {
    display: block;
    width: 100%;
    height: auto;
}

.visuel-recette__liste {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: var(--midnight);
    color: var(--surface);
    box-shadow: 0 14px 30px -12px rgba(1, 64, 84, 0.6);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    font-weight: 700;
}

.visuel-recette__liste strong {
    font-size: 0.875rem;
}

.visuel-recette__liste > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.visuel-recette__liste .methode-coche {
    width: 18px;
    height: 18px;
}

.visuel-maintenance {
    flex-direction: column;
    gap: 1.5rem;
}

.visuel-maintenance__bouclier {
    position: relative;
    width: 80px;
    height: 92px;
    color: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.visuel-maintenance__bouclier svg {
    position: absolute;
    inset: 0;
    fill: var(--midnight);
}

.visuel-maintenance__bouclier strong,
.visuel-maintenance__bouclier small {
    position: relative;
    line-height: 1;
}

.visuel-maintenance__bouclier strong {
    font-size: 2.5rem;
    font-weight: 800;
}

.visuel-maintenance__bouclier small {
    font-size: 0.8125rem;
    font-weight: 700;
}

.visuel-maintenance__texte {
    padding: 0.5rem 1rem;
    border-radius: var(--rayon-pilule);
    background: var(--surface);
    font-weight: 700;
    text-align: center;
}

/* Vous restez maître de votre outil */
.methode-maitrise {
    margin-top: clamp(3rem, 8vw, 5.5rem);
}

.methode-maitrise h2 {
    color: var(--surface);
}

.methode-maitrise__texte {
    max-width: 40rem;
    margin: 0;
}

.methode-maitrise__points {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem 2rem;
}

.methode-maitrise__points li {
    display: flex;
    gap: 1rem;
}

.methode-maitrise__icone {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.methode-maitrise__points h3 {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    color: var(--surface);
}

.methode-maitrise__points p {
    margin: 0;
    font-size: 0.9375rem;
    color: #E3ECEE; /* 9:1 sur Midnight */
}

.methode-option {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--rayon-pilule);
    background: var(--sunglow);
    color: var(--night);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

@media (min-width: 56.25rem) {
    .methode-maitrise__points {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .methode-maitrise__points li {
        flex-direction: column;
    }
}

/* Questions : signe dans une pastille Parchment (+ / ×) ; fourchettes de durée en tableau léger */
.methode-questions {
    margin-top: clamp(3rem, 8vw, 5.5rem);
}

.faq--pastilles .faq__signe {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--parchment);
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq--pastilles .faq__signe::before {
    font-size: 1rem;
    line-height: 1;
}

.faq--pastilles .faq__question[open] .faq__signe::before {
    content: "×";
}

.methode-fourchettes {
    list-style: none;
    margin: 0.875rem 0;
    padding: 0;
    max-width: 30rem;
}

.methode-fourchettes li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--parchment);
}

.methode-fourchettes a {
    font-weight: 700;
}

.methode-fourchettes span {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--night);
}

/* ---------- Contact ---------- */

.contact-etapes {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.contact-etapes li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
}

.contact-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 2rem;
    align-items: start;
}

@media (min-width: 56.25rem) {
    .contact-grille {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Formulaire seul (page Contact) : pas de bande verte ni d'introduction */
.bloc-contact--seul {
    margin-top: 0;
    background: none;
}

.bloc-contact--seul .bloc-contact__grille {
    display: block;
    padding: 0;
}

.contact-coordonnees {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-coordonnees h2 {
    font-size: 1.25rem;
}

.contact-coordonnees p {
    margin: 0 0 0.5rem;
}

.logos--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    gap: 0.5rem;
}

.logos--compact li {
    height: 64px;
    padding: 0.5rem;
    background: var(--fond);
}

.contact-avis {
    margin: 1rem 0 0;
    font-style: italic;
    color: #33403E;
}

.contact-avis footer {
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

/* ---------- Pages de texte (légal) ---------- */

.page-texte {
    max-width: 800px;
}

.page-texte section + section {
    margin-top: 2rem;
}

.page-texte h2 {
    font-size: 1.5rem;
}

.page-texte p {
    color: #33403E;
}

.page-texte__infos {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.page-texte__infos div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0.25rem 1rem;
}

.page-texte__infos dt {
    font-weight: 700;
}

.page-texte__infos dd {
    margin: 0;
}

.rejoindre-missions {
    margin-top: 1rem;
}

/* ---------- Hub des expertises ---------- */

.hub-cartes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 1.5rem;
}

.hub-carte {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 12px 32px -20px rgba(1, 64, 84, 0.35);
    color: var(--night);
    text-decoration: none;
}

.hub-carte:hover {
    color: var(--night);
    box-shadow: var(--ombre);
}

.hub-carte__visuel {
    height: 160px;
    padding: 1.25rem 1.25rem 0;
    background: var(--parchment);
    overflow: hidden;
}

.hub-carte__visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    border-radius: 10px 10px 0 0;
}

.hub-carte__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.hub-carte__titre {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hub-carte__titre h2,
.hub-carte__titre h3 {
    margin: 0;
    font-size: 1.375rem;
}

.hub-carte__corps p {
    margin: 0;
}

.liste-coches--compacte li {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    align-items: center;
}

.liste-coches--compacte .liste-coches__icone {
    width: 24px;
    height: 24px;
}

.hub-tableau {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* Sur petit écran, le tableau défile horizontalement dans son cadre (pas la page) */
.tableau-defilant {
    position: relative; /* repère des textes réservés aux lecteurs d'écran : ils restent dans le cadre défilant */
    overflow-x: auto;
    border-radius: 24px;
    background: var(--surface);
}

.tableau-defilant table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.tableau-defilant th,
.tableau-defilant td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #F0EBD9;
    text-align: center;
}

.tableau-defilant thead th {
    font-size: 0.875rem;
    background: var(--fond);
}

.tableau-defilant thead th a {
    color: var(--night);
}

.tableau-defilant tbody th {
    text-align: left;
    font-weight: 700;
}

.tableau-defilant tbody th .texte-doux {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
}

.tableau-defilant td {
    font-size: 1.25rem;
    color: var(--texte-doux);
}

.cellule--principale {
    color: var(--midnight) !important;
    background: var(--vert-pale);
}

.hub-legende {
    font-size: 0.875rem;
}

/* ---------- Fiche réalisation ---------- */

.fiche {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    padding-top: 1.5rem;
}

.fiche h2 {
    font-size: clamp(1.75rem, 3vw, 2rem);
}

.fiche__entete,
.fiche__duo,
.fiche__fin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    gap: 2.5rem;
    align-items: center;
}

.fiche__duo {
    gap: 1.5rem;
    align-items: stretch;
}

.fiche__fin {
    align-items: start;
}

.fiche__intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
}

.fiche__intro h1 {
    margin: 0;
    font-size: clamp(2.125rem, 4vw, 3.25rem);
    line-height: 1.08;
}

.fiche__chapo {
    margin: 0;
    max-width: 560px;
    font-size: 1.1875rem;
    color: #33403E; /* 10:1 sur le fond */
}

.fiche__dates {
    margin: 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.fiche__carte {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 28px;
    background: var(--parchment);
}

.fiche__logo {
    height: 120px;
    padding: 1.25rem;
    border-radius: 20px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fiche__logo img {
    max-width: 220px;
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.fiche__infos {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem 1.5rem;
}

.fiche__infos dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--midnight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fiche__infos dd {
    margin: 0;
    font-weight: 600;
}

.fiche__solution {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.fiche__solution h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.fiche__solution-intro .fiche__chapo {
    max-width: none;
}

.fiche__solution-intro {
    /* Le sous-titre de la partie occupe toute la largeur ; seul le chapô reste étroit (.fiche__chapo) */
    max-width: none;
}

.etape {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 2rem 3rem;
    align-items: center;
}

.etape--sans-visuel {
    /* Sans visuel à droite, le texte occupe toute la largeur plutôt que de laisser un vide */
    grid-template-columns: minmax(0, 1fr);
}

.etape__texte {
    color: #33403E;
}

.etape__texte h3 {
    color: var(--night);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.etape__texte ul {
    padding-left: 1.25rem;
}

.etape__numero {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 800;
    color: var(--midnight);
}

.etape__numero span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sunglow);
    color: var(--night);
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape__visuel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sur ordinateur, une étape sur deux place son visuel à gauche */
@media (min-width: 56.25rem) {
    .etape:nth-of-type(odd) .etape__visuel {
        order: -1;
    }
}

.capture,
.points {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.capture figcaption,
.points figcaption {
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.capture__cadre {
    padding: 1.25rem 1.25rem 0;
    border-radius: 24px;
    background: var(--parchment);
    overflow: hidden;
}

.capture__fenetre {
    border-radius: 12px 12px 0 0;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 16px 40px -20px rgba(1, 64, 84, 0.45);
}

.capture__barre {
    display: flex;
    gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid #F0EBD9;
}

.capture__barre span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E4DFCF;
}

/* Barre avec le nom de l'application, centré comme un titre de fenêtre (héros de l'accueil) */
.capture__barre--titre {
    align-items: center;
    padding-block: 7px;
}

.capture__barre--titre::after {
    content: "";
    flex: 0 0 36px; /* même largeur que les trois points, pour centrer le titre */
}

.capture__barre .capture__titre {
    min-width: 0;
    margin: 0 auto;
    padding: 0.125rem 0.875rem;
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: var(--rayon-pilule);
    background: var(--fond);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texte-doux);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sur téléphone, le titre serait tronqué et caché par la vue mobile posée dessus */
@media (max-width: 47.99rem) {
    .capture__barre .capture__titre {
        display: none;
    }
}

.capture__fenetre img {
    display: block;
    width: 100%;
}

/* Diaporama : sans JavaScript, les captures restent l'une sous l'autre.
   Avec diaporama.js, elles se superposent et passent de l'une à l'autre en fondu. */
.diaporama {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.diaporama--actif {
    display: grid;
    gap: 0.875rem;
}

.diaporama--actif > .capture {
    grid-area: 1 / 1;
    transition: opacity 0.7s ease, visibility 0.7s;
}

.diaporama--actif > .capture:not(.est-visible) {
    opacity: 0;
    visibility: hidden;
}

.diaporama__points {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.diaporama__point {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diaporama__point::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D9CFA6;
    transition: background 0.2s, width 0.2s;
}

.diaporama__point[aria-current="true"]::before {
    width: 22px;
    border-radius: 5px;
    background: var(--midnight);
}

/* Bouton Pause / Lecture du diaporama (ajouté par diaporama.js) */
.diaporama__pause {
    width: 24px;
    height: 24px;
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--midnight);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diaporama__pause:hover {
    background: rgba(1, 64, 84, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .diaporama--actif > .capture {
        transition: none;
    }
}

.capture__a-fournir {
    min-height: 220px;
    margin: 0.875rem;
    padding: 1rem;
    border: 2px dashed #D9CFA6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--texte-doux);
    font-weight: 600;
}

.points__liste {
    list-style: none;
    margin: 0;
    padding: 1.75rem;
    border-radius: 24px;
    background: #E1ECF0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.points__liste li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: 14px;
    background: var(--surface);
    font-weight: 600;
}

.points__icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--rayon-petit);
    background: var(--parchment);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fiche__resultats h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.resultats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
}

.resultat {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.75rem;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 10px 30px -18px rgba(1, 64, 84, 0.3);
    color: #33403E;
}

.resultat strong {
    font-size: 1.375rem;
    color: var(--night);
}

.resultat:first-child {
    background: var(--sunglow);
    box-shadow: none;
    color: var(--night); /* 12:1 sur Sunglow */
}

/* Même format que le bloc « La parole à nos clients » de l'accueil (.avis),
   sur fond Midnight comme la section qui l'entoure sur l'accueil */
.temoignage {
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 28px;
    background: var(--midnight);
    color: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.temoignage__guillemet {
    height: 2.25rem;
    font-size: 5rem;
    line-height: 0.85;
    font-weight: 800;
    color: var(--emerald); /* décor */
}

.temoignage blockquote {
    margin: 0;
    max-width: 900px;
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.temoignage blockquote p {
    margin: 0;
}

.temoignage figcaption {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.temoignage figcaption > span:last-child {
    display: flex;
    flex-direction: column;
}

.temoignage__logo {
    width: 120px;
    height: 56px;
    padding: 0.5rem;
    border-radius: 14px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.temoignage__logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.temoignage__fonction {
    color: #DCE8EB; /* 9:1 sur Midnight */
}

.fiche__fin h2 {
    font-size: 1.75rem;
}

/* ---------- Bloc contact (formulaire en bas de page) ----------
   Texte à gauche et formulaire à droite sur ordinateur, empilés sur mobile. */

.bloc-contact {
    margin-top: 4rem;
    background: var(--vert-pale);
}

.bloc-contact__grille {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 4rem var(--gouttiere);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 3.5rem;
    align-items: start;
}

.bloc-contact__intro h2 {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.bloc-contact__promesse {
    font-size: 1.1875rem;
    color: #2F4A44; /* 8,5:1 sur le vert pâle */
}

.bloc-contact__etapes {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bloc-contact__etapes li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--rayon);
    background: var(--surface);
}

.bloc-contact__etapes span {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--emerald);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formulaire {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 30px 60px -40px rgba(1, 64, 84, 0.5);
}

.formulaire__aide,
.formulaire__confidentialite,
.formulaire__champ--large,
.formulaire__envoyer {
    grid-column: 1 / -1;
}

.formulaire__aide,
.formulaire__confidentialite {
    margin: 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.formulaire__champ {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.formulaire label {
    font-size: 0.875rem;
    font-weight: 600;
}

.formulaire input,
.formulaire textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 0.875rem;
    border: 1px solid #7A8381; /* 3,7:1 : bordure de champ repérable (la maquette avait #C9D1CF, 1,5:1) */
    border-radius: var(--rayon-petit);
    background: #FBFAF5;
    color: var(--texte);
    font: inherit;
}

.formulaire textarea {
    padding: 0.75rem 0.875rem;
    resize: vertical;
}

.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--midnight);
}

.formulaire__envoyer {
    justify-content: center;
    border: 0;
    cursor: pointer;
}

/* Erreurs renvoyées par le serveur (page /envoyer-demande/) : bordure épaisse et message sous le champ */
.formulaire [aria-invalid="true"] {
    border: 2px solid var(--erreur);
}

.formulaire__erreur {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--erreur);
}

.formulaire-erreurs {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--erreur);
    border-radius: var(--rayon-petit);
    background: var(--surface);
}

.formulaire-erreurs > :first-child {
    margin-top: 0;
}

.formulaire-erreurs > :last-child {
    margin-bottom: 0;
}

/* Page /merci/ */
.merci h2 {
    margin-top: 2.5rem;
    font-size: var(--taille-h3);
}

.merci__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

/* Champ piège : hors écran (pas display:none, que certains robots repèrent) */
.formulaire__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Pied de page ---------- */

.pied {
    font-size: 0.9375rem;
    color: var(--texte-doux);
}

.pied__colonnes {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 4rem var(--gouttiere) 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 2.5rem;
}

.pied__colonne {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pied__colonne img {
    align-self: flex-start;
    height: 30px;
    width: auto;
}

.pied__colonne p {
    margin: 0;
}

.pied__titre {
    font-weight: 700;
    color: var(--night);
}

.pied__titre a {
    color: inherit;
    text-decoration: none;
}

.pied ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pied a {
    color: var(--texte-doux);
    text-decoration: none;
}

.pied a:hover {
    color: var(--night);
    text-decoration: underline;
}

.pied__copyright {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 1.25rem var(--gouttiere) 2.5rem;
    border-top: 1px solid var(--bordure);
    font-size: 0.8125rem;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- À propos : savoir-faire, valeurs, repères chiffrés, logos (réécrite le 09/11/2026) ---------- */

.apropos-histoire p {
    max-width: 52rem;
}

.apropos-pilier {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.apropos-pilier h3,
.apropos-pilier p {
    margin: 0;
}

.apropos-technos {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.apropos-technos a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 16px;
    background: var(--parchment);
    color: var(--night);
    text-decoration: none;
}

.apropos-technos a:hover,
.apropos-technos a:focus-visible {
    background: #ECE3BC;
}

.apropos-technos__icone {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--surface);
    color: var(--midnight);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Valeurs : le lien de preuve reste en bas de chaque carte */
.apropos-valeurs {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.apropos-valeurs__lien {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Repères chiffrés : bande sombre, chiffres calculés */
.apropos-chiffres {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.apropos-chiffres__texte {
    margin: 0.5rem auto 0;
    max-width: 36rem;
    color: #D6E4E8; /* 9:1 sur Midnight */
}

.apropos-chiffres__liste {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1.5rem;
}

.apropos-chiffres__liste li {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.apropos-chiffres__liste strong {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1;
    color: var(--sunglow); /* 7,5:1 sur Midnight */
}

.apropos-chiffres__liste span {
    color: #D6E4E8;
}

.apropos-logos {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2.5rem;
}

.apropos-logos img {
    max-height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}