/*
 * theme.css — intégration de la maquette Synertic.
 *
 * Chargé après bootstrap.min.css : ce fichier porte l'identité visuelle
 * (couleurs, typo, composants du thème). Les surcharges ponctuelles et les
 * ajouts postérieurs à l'intégration vont dans custom.css.
 *
 * Sommaire
 *   1.  Variables
 *   2.  Base
 *   3.  Utilitaires de section
 *   4.  Boutons et liens d'action
 *   5.  En-tête / navigation
 *   6.  Hero
 *   7.  Chiffres clés
 *   8.  Cartes « expertises »
 *   9.  Cartes « approches » (fond sombre)
 *   10. Valeurs humaines
 *   11. Carrousel Shapper
 *   12. Réalisations
 *   13. Bandeau logos clients
 *   14. Bloc d'appel à l'action
 *   14 bis. Avis clients
 *   15. Pied de page
 *   16. Page contact
 *   17. Défilement horizontal avec fondu
 *   18. Fil d'Ariane
 *   19. Responsive
 */

/* ---------------------------------------------------------------- 1. Variables */

:root {
    /* couleurs de marque */
    --bleu-nuit: #03395F;
    --bleu: #009FF1;
    --bleu-fonce: #0A6FAB;
    --bleu-clair: #0D9DF2;
    --bleu-vif: #33B4F5;
    --bleu-pastel: #E8F6FE;
    --bleu-ciel: #7FD3FF;
    --corail: #FF4D3F;
    --corail-vif: #FF4438;
    --corail-fonce: #F05043;
    --corail-texte: #D23528; /* petits textes sur fond clair : 4,5:1 minimum */
    --vert: #12B37E;

    /* textes */
    --titre: #1F2124;
    --texte: #2B2B2E;
    --texte-doux: #5C6066;
    --texte-gris: #6E7075;
    --texte-clair: #6A6F77;
    --texte-pale: #6C7178;
    --placeholder: #A9AEB6;

    /* textes sur fond sombre */
    --sur-sombre: #AEB6C2;
    --sur-sombre-doux: #9BA7B4;
    --sur-sombre-pale: #9BA7B4;

    /* surfaces et bordures */
    --fond: #FFFFFF;
    --fond-gris: #F6F8FA;
    --fond-gris-2: #F7F8FA;
    --fond-champ: #F9FBFC;
    --bordure: #EEF1F4;
    --bordure-2: #ECEFF2;
    --bordure-3: #E7EBEF;
    --bordure-champ: #E1E5EA;
    --bordure-tiret: #CFD6DE;
    --bordure-forte: #B4B4B4;

    /* typographie */
    --titre-police: 'Plus Jakarta Sans', system-ui, sans-serif;
    --corps-police: 'Manrope', system-ui, sans-serif;

    /* rythme */
    --gouttiere: 56px;
    /*
     * Largeur maximale du contenu. Le cadrage est fluide jusqu'à cette valeur :
     * un écran classique (jusqu'au 1080p) est donc occupé en pleine largeur.
     * Au-delà (QHD, 4K), le contenu se borne et se centre, sinon les lignes de
     * texte et les grilles s'étireraient démesurément.
     */
    --largeur-max: 2000px;
    /* Largeur de lecture confortable pour un corps de texte suivi : le cadrage
       fluide ne doit jamais produire des lignes de 1 500 px. */
    --largeur-lecture: 740px;
    --rayon: 14px;
    --rayon-l: 18px;
    --rayon-xl: 22px;
}

/* ---------------------------------------------------------------- 2. Base */

body {
    margin: 0;
    font-family: var(--corps-police);
    font-size: 16px;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--titre-police);
    margin: 0;
    color: var(--titre);
}

p {
    margin: 0;
}

a {
    color: var(--bleu-fonce);
    text-decoration: none;
    transition: color .2s ease;
}

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

img {
    max-width: 100%;
}

/* Animations partagées (mosaïque du hero, bandeau de logos). */
@keyframes defilement-horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes defilement-haut {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes defilement-bas {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
}

/* ---------------------------------------------------------------- 3. Sections */

.section {
    padding: 76px var(--gouttiere);
}

.section--serree {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section--centree {
    text-align: center;
}

.section__surtitre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--corail-texte);
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.section__titre {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-top: 14px;
}

.section__chapo {
    color: var(--texte-gris);
    font-size: 17px;
    margin: 12px auto 0;
    max-width: 600px;
}

.section__entete-ligne {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.section__entete-ligne .section__titre {
    font-size: 28px;
    margin-top: 0;
}

/* Contenu cadré : hors hero, le contenu vit dans un conteneur fluide (le pied de
   page l'utilise aussi, pour aligner son contenu tout en gardant son fond pleine
   largeur). Il occupe toute la largeur disponible et ne se borne qu'au-delà de
   `--largeur-max`, sur les très grands écrans. Les gouttières sont portées par le
   conteneur, les blocs qu'il enveloppe perdent donc les leurs. */
.container-fluid {
    max-width: var(--largeur-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
}

main > .container-fluid > .section,
main > .container-fluid > .hero,
main > .container-fluid > .shapper {
    padding-left: 0;
    padding-right: 0;
}

main > .container-fluid > .chiffres,
main > .container-fluid > .bloc-cta,
main > .container-fluid .shapper__carte {
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------------------- 4. Boutons */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    padding: 14px 24px;
    border-radius: 11px;
    transition: background-color .2s ease, color .2s ease;
}

.bouton--principal {
    background: var(--bleu);
    color: #fff;
}

.bouton--principal:hover {
    background: var(--bleu-fonce);
    color: #fff;
}

.bouton--sombre-clair:hover {
    background: var(--bleu-vif);
}

.bouton--grand {
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 12px;
}

.lien-fleche {
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 15px;
}

/* ---------------------------------------------------------------- 5. En-tête */

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 16px var(--gouttiere);
    border-bottom: 1px solid var(--bordure);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.entete__logo {
    display: block;
    flex: none;
}

.entete__logo img {
    height: 36px;
    width: auto;
    display: block;
}

.entete__nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: var(--titre-police);
    font-size: 15px;
    font-weight: 600;
}

.entete__lien {
    color: var(--texte-gris);
}

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

.entete__lien.est-actif {
    color: var(--texte);
}

/* Bouton hamburger : masqué au-delà du point de rupture tablette. */
.entete__burger {
    display: none;
    border: 1px solid var(--bordure-champ);
    background: #fff;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    color: var(--titre);
    font-size: 18px;
    cursor: pointer;
}

/* ---------------------------------------------------------------- 6. Hero */

.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    padding: 65px var(--gouttiere);
    align-items: center;
}

.hero__etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--fond-gris);
    color: var(--texte-doux);
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
}

.hero__titre {
    font-size: 58px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 22px 0 0;
}

.hero__titre .accent {
    color: var(--bleu);
}

.hero__chapo {
    font-size: 16px;
    line-height: 1.6;
    color: var(--texte-doux);
    margin-top: 24px;
    max-width: 520px;
}

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

/* Liste des domaines d'expertise, sous le chapô du hero. */
.domaines {
    margin-top: 20px;
    max-width: 660px;
}

.domaines__titre {
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 16px;
    color: var(--bleu-fonce);
    padding-top: 10px;
}

.domaines__liste {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/*
 * Le domaine et sa description se lisent comme une phrase : ils s'enchaînent
 * sur la même ligne et le texte revient sous la puce, aligné sur le domaine.
 * Le domaine lui-même ne se coupe jamais (« Solutions IA » reste d'un bloc).
 */
.domaines__item {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--texte-doux);
}

.domaines__item b {
    white-space: nowrap;
}

/* La puce est décorative : un ::before évite un <span> vide dans le balisage. */
.domaines__item::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--bleu);
    font-size: 22px;
    line-height: 1;
}

/*
 * Visuel du hero : une carte qui pivote sur trois faces. Le retournement est
 * porté par synertic.js, qui ne fait que poser des transformations ; sans
 * JavaScript, la première face reste affichée et les autres, retournées, sont
 * simplement invisibles.
 */
.hero__visuel {
    position: relative;
    perspective: 1800px;
}

.carte-retournee {
    position: relative;
    aspect-ratio: 4 / 3.2;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 1.15s cubic-bezier(.55, .05, .35, 1);
}

.carte-retournee__face {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid var(--bordure-3);
    background: var(--bleu-pastel);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Faces 2 et 3 : retournées tant que le script ne les a pas amenées devant. */
.carte-retournee__face + .carte-retournee__face {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .carte-retournee {
        transition: none;
    }
}

/* Face 1 — mosaïque d'écrans inclinée, défilant en continu. */
.mosaique__grille {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230%;
    height: 280%;
    transform: translate(-50%, -50%) rotate(20deg);
    display: flex;
}

.mosaique__colonne {
    flex: 1;
    overflow: hidden;
}

.mosaique__piste {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    animation: defilement-haut 34s linear infinite;
}

.mosaique__piste img {
    width: 88%;
    display: block;
}

.mosaique__piste--bas { animation-name: defilement-bas; }

/* Durées désynchronisées d'une colonne à l'autre, pour casser la régularité. */
.mosaique__piste--d34 { animation-duration: 34s; }
.mosaique__piste--d35 { animation-duration: 35s; }
.mosaique__piste--d36 { animation-duration: 36s; }
.mosaique__piste--d37 { animation-duration: 37s; }
.mosaique__piste--d39 { animation-duration: 39s; }
.mosaique__piste--d40 { animation-duration: 40s; }
.mosaique__piste--d42 { animation-duration: 42s; }

/*
 * Face 2 — ruban d'écrans glissant derrière le portable évidé. Le ruban reprend
 * la boîte de la dalle au pixel près : `6px` de bordure de chaque côté du cadre,
 * et le même rapport 16/10. La vignette courante remplit donc exactement la
 * découpe, et le ruban déborde librement pour laisser voir la précédente et la
 * suivante hors du cadre. Le pas est mesuré et appliqué par synertic.js.
 */
.ruban-ecrans {
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    aspect-ratio: 16 / 10;
    z-index: 1;
}

.ruban-ecrans__piste {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .8s cubic-bezier(.62, 0, .2, 1);
}

/*
 * `contain` et non `cover` : les captures sont bien plus larges que la dalle,
 * les rogner amputerait le menu latéral des interfaces. Elles gardent donc leur
 * cadrage, sur le blanc de l'écran. La marge sépare les vignettes voisines, et
 * sert de pas au défilement.
 */
.ruban-ecrans__vignette {
    flex: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    margin-right: 26px;
    border-radius: 4px;
    background: #fff;
}

/*
 * Portable, centré sur la face et posé au-dessus du ruban. Il occupe toute la
 * largeur de la carte, à quelques pixels près : la perspective élargit le bas
 * du socle, et au-delà de 93 % il serait rogné par les bords de la face.
 */
.macbook {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 93%;
    perspective: 900px;
    z-index: 2;
    filter: drop-shadow(0 18px 28px rgba(20, 30, 45, .28));
}

/* Repère du ruban : sa transformation en fait déjà le bloc conteneur des
   éléments positionnés, `relative` ne fait que le dire explicitement. */
.macbook__corps {
    position: relative;
    transform: rotateX(6deg);
    transform-style: preserve-3d;
}

/* Le cadre et le socle passent devant le ruban qui défile derrière eux. */
.macbook__ecran {
    background: var(--titre);
    border-radius: 9px 9px 3px 3px;
    padding: 6px 6px 9px;
    position: relative;
    z-index: 2;
}

.macbook__dalle {
    background: #fff;
    border-radius: 4px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

/*
 * Variante évidée : le cadre n'est qu'un contour et la dalle laisse voir le
 * ruban qui passe derrière — le fond doit donc rester transparent. Le cadre
 * vient après le ruban dans le balisage : il le recouvre, et masque au passage
 * la jonction entre la vignette de la dalle et ses voisines.
 */
.macbook--evide .macbook__ecran {
    background: transparent;
    border: 6px solid var(--titre);
    border-bottom-width: 9px;
    padding: 0;
}

.macbook--evide .macbook__dalle {
    background: transparent;
}

.macbook__socle {
    height: 30px;
    background: linear-gradient(#d3d8de, #a7aeb8);
    border-radius: 0 0 10px 10px;
    transform: rotateX(66deg);
    transform-origin: top center;
    position: relative;
    z-index: 2;
    padding: 5px 14px 0;
}

.macbook__charniere {
    background: rgba(120, 128, 138, .55);
    border-radius: 3px;
    height: 15px;
}

.macbook__encoche {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 6px;
    background: rgba(120, 128, 138, .4);
    border-radius: 2px;
}

/*
 * Face 3 — vidéo IA. Elle remplit toute la carte, à toutes les largeurs : la
 * vidéo est en 16/9 et la carte plus haute, `cover` ne rogne que les marges vides
 * de chaque côté du dessin. La vidéo n'est pas interactive : `pointer-events`
 * et le bouton masqué évitent toute commande native sur mobile.
 */
.carte-retournee__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.carte-retournee__video::-webkit-media-controls-start-playback-button {
    display: none;
}

/* ---------------------------------------------------------------- 7. Chiffres */

/* Les quatre chiffres tiennent sur une seule ligne : colonnes de largeur égale,
   séparées par un filet, jusqu'au passage en deux lignes sur mobile. */
.chiffres {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 60px var(--gouttiere) 30px;
}

.chiffre {
    flex: 1 1 0;
    min-width: 0;
    padding: 32px 24px;
    text-align: center;
    border-right: 1px solid var(--bordure);
}

.chiffres > .chiffre:last-child {
    border-right: none;
}

.chiffre__valeur {
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 38px;
    color: #F05144;
}

.chiffre__libelle {
    color: var(--texte-clair);
    font-size: 14px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------- 8. Expertises */

.grille-expertises {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: left;
}

.carte-expertise {
    background: var(--fond-gris);
    border-radius: var(--rayon-l);
    padding: 26px;
}

/* L'icône et le titre partagent une ligne, le texte les suit. */
.carte-expertise__entete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.carte-expertise__icone {
    width: 34px;
    height: 34px;
    flex: none;
}

.carte-expertise__icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.carte-expertise h2,
.carte-expertise h3 {
    font-size: 18px;
    font-weight: 700;
}

.carte-expertise p {
    color: var(--texte-gris);
    font-size: 14px;
    line-height: 1.55;
    margin-top: 8px;
}

/* ---------------------------------------------------------------- 9. Approches */

.grille-approches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 44px;
    text-align: left;
}

.carte-approche {
    background: var(--bleu-nuit);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--rayon-l);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.carte-approche__entete {
    display: flex;
    align-items: center;
    gap: 14px;
}

.carte-approche__icone {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.carte-approche__icone--corail {
    background: rgba(208, 39, 24, .18);
    color: var(--corail-vif);
}

.carte-approche__icone--bleue {
    background: rgba(11, 157, 241, .15);
    color: var(--bleu-clair);
}

.carte-approche__icone--verte {
    background: rgba(11, 128, 89, .18);
    color: var(--vert);
}

.carte-approche h3 {
    font-family: var(--titre-police);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.carte-approche p {
    color: var(--sur-sombre);
    font-size: 15px;
    line-height: 1.6;
    margin-top: 12px;
}

/* ---------------------------------------------------------------- 10. Valeurs */

.valeurs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.valeur {
    background: var(--fond-gris);
    border-radius: var(--rayon);
    padding: 20px 26px;
    min-width: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.valeur h3 {
    font-size: 16px;
    text-align: center;
}

/* Force un retour à la ligne dans la liste des valeurs. */
.valeurs__saut {
    flex-basis: 100%;
    height: 0;
}

/* ---------------------------------------------------------------- 11. Shapper */

.shapper {
    position: relative;
    padding-top: 76px;
}

.shapper__carte {
    margin: 0 var(--gouttiere);
    background: var(--bleu-nuit);
    border-radius: var(--rayon-xl);
    padding: 34px 52px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: opacity .5s ease, transform .5s ease;
}

.shapper__texte {
    position: relative;
}

.shapper__surtitre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bleu-ciel);
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.shapper__titre {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    margin-top: 16px;
    letter-spacing: -.01em;
}

.shapper__chapo {
    color: var(--sur-sombre);
    font-size: 16px;
    line-height: 1.65;
    margin-top: 16px;
}

.shapper__cta {
    margin-top: 26px;
}

.shapper__mascotte {
    display: block;
    width: 130px;
    height: auto;
    position: absolute;
    bottom: -34px;
    right: 0;
}

.shapper__visuel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shapper__visuel img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s ease;
}

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

.shapper__puce {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: #D3DBE2;
    transition: background .4s ease, width .4s ease;
}

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

.shapper__nav {
    position: absolute;
    top: calc(50% + 25px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--bleu);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.shapper__nav--precedent { left: 14px; }
.shapper__nav--suivant { right: 14px; }

.shapper:hover .shapper__nav {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------------------- 12. Réalisations */

.grille-realisations {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.realisation {
    border-radius: var(--rayon);
    border: 1px solid var(--bordure-3);
    overflow: hidden;
}

.realisation--large {
    aspect-ratio: 16 / 9;
}

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

/* ---------------------------------------------------------------- 13. Logos clients */

.confiance__titre {
    text-align: center;
    color: var(--corail-texte);
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.bandeau-logos {
    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);
}

.bandeau-logos__piste {
    display: flex;
    gap: 64px;
    align-items: center;
    width: max-content;
    margin-top: 20px;
    animation: defilement-horizontal 20s linear infinite;
}

.bandeau-logos__piste img {
    flex: none;
    height: 56px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.bandeau-logos__piste img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Hauteurs propres à certains logos, dictées par leurs proportions. */
.bandeau-logos__piste img.logo--xs { height: 30px; }
.bandeau-logos__piste img.logo--s { height: 34px; }
.bandeau-logos__piste img.logo--m { height: 52px; }
.bandeau-logos__piste img.logo--l { height: 60px; }
.bandeau-logos__piste img.logo--xl { height: 64px; }
.bandeau-logos__piste img.logo--xxl { height: 86px; }

/* ---------------------------------------------------------------- 14. Appel à l'action */

.bloc-cta {
    margin: 70px var(--gouttiere) 0;
    padding: 54px;
    text-align: center;
    border-radius: var(--rayon-xl);
    background: var(--bleu-pastel);
    position: relative;
    overflow: hidden;
}

.bloc-cta__fond {
    position: absolute;
    inset: 0;
    border-radius: var(--rayon-xl);
    overflow: hidden;
    filter: blur(3px);
    transform: scale(1.04);
}

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

.bloc-cta__voile {
    position: absolute;
    inset: 0;
    background: rgba(232, 246, 254, .55);
    pointer-events: none;
}

.bloc-cta__contenu {
    position: relative;
    display: inline-block;
    padding: 34px 44px;
}

.bloc-cta__contenu h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #182430;
}

.bloc-cta__contenu p {
    color: #182430;
    font-size: 17px;
    margin-top: 12px;
}

/* ---------------------------------------------------------------- 14 bis. Avis clients */

/* Synthèse centrée sous le titre : logo Google, note moyenne et nombre d'avis. */
.avis__synthese {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    margin-bottom: 40px;
}

.avis__logo {
    width: 22px;
    height: 22px;
    flex: none;
}

.avis__moyenne {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.avis__note {
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 26px;
    color: var(--titre);
    line-height: 1;
}

.avis__note-max {
    font-size: 14px;
    color: var(--texte-pale);
}

.avis__compte {
    color: var(--texte-pale);
    font-size: 13px;
}

/* Étoiles : la variante pleine sert aux deux états, les non acquises grisées. */
.avis__etoiles,
.avis-carte__etoiles {
    display: inline-flex;
    gap: 3px;
    color: #FFB400;
    font-size: 13px;
}

.avis__etoiles {
    font-size: 14px;
}

.avis__etoiles .est-vide,
.avis-carte__etoiles .est-vide {
    color: var(--bordure-champ);
}

/* Piste : défilement horizontal calé sur une vue complète. Le scroll natif
   garde le geste tactile sur mobile, le JS ne fait que le piloter. */
.avis__piste {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

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

.avis-carte {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--fond-gris);
    border: 1px solid var(--bordure-2);
    border-radius: var(--rayon-l);
    padding: 24px;
}

.avis-carte__entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avis-carte__portrait,
.avis-carte__pastille {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.avis-carte__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleu-pastel);
    color: var(--bleu-fonce);
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 15px;
}

.avis-carte__identite {
    min-width: 0;
    flex: 1;
}

.avis-carte__auteur {
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 15px;
    color: var(--titre);
}

.avis-carte__date {
    color: var(--texte-pale);
    font-size: 12.5px;
    margin-top: 2px;
    text-transform: capitalize;
}

.avis-carte__source {
    width: 20px;
    height: 20px;
    flex: none;
    align-self: flex-start;
}

.avis-carte__etoiles {
    margin-top: 16px;
    font-size: 14px;
}

.avis-carte__texte {
    color: var(--texte-gris);
    font-size: 14.5px;
    line-height: 1.65;
    margin-top: 12px;
    flex: 1;
}

.avis-carte__fonction {
    color: var(--texte-pale);
    font-size: 12.5px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--bordure-2);
}

/* Pagination : flèches et puces, une puce par vue de trois avis. */
.avis__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.avis__nav {
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--bordure-champ);
    border-radius: 50%;
    background: #fff;
    color: var(--bleu-fonce);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.avis__nav:hover {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

.avis__nav[disabled] {
    opacity: .35;
    cursor: default;
}

.avis__nav[disabled]:hover {
    background: #fff;
    border-color: var(--bordure-champ);
    color: var(--bleu-fonce);
}

.avis__puces {
    display: flex;
    gap: 9px;
}

.avis__puce {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: #D3DBE2;
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .avis__piste {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------- 15. Pied de page */

/*
 * Fond pleine largeur, contenu cadré par le conteneur interne. L'écart avec le
 * contenu est une marge : une dernière section à fond plein (FAQ, bandeaux)
 * l'annule dans custom.css, sinon elle laisserait une bande blanche.
 */
.pied {
    margin-top: 76px;
    padding: 48px 0 34px;
    background: var(--bleu-nuit);
    color: var(--sur-sombre);
}

/*
 * Trois colonnes, les deux extrêmes de même largeur : la navigation reste au
 * centre de la page quelle que soit la taille du logo, et les réseaux sociaux
 * se calent à droite (la colonne garde sa place même sans réseau renseigné).
 */
.pied__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    align-items: center;
}

.pied__logo {
    justify-self: start;
}

.pied__logo img {
    height: 160px;
    width: auto;
    display: block;
}

.pied__colonnes {
    display: flex;
    gap: 56px;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.pied__titre {
    color: #fff;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}

.pied__liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    align-items: flex-start;
}

/*
 * La navigation reprend toutes les entrées du menu à plat : neuf liens en
 * colonne étireraient le pied de page, ils tiennent donc sur deux colonnes.
 */
.pied__liste--navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

.pied__liste a,
.pied__liste span {
    color: var(--sur-sombre-pale);
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.pied__liste a:hover {
    color: #fff;
}

.pied__liste i {
    color: var(--bleu-clair);
    width: 16px;
    text-align: center;
    margin-top: 3px;
}

.pied__reseaux {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 12px;
    flex: none;
}

.pied__reseau {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0670B4;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}

.pied__reseau:hover {
    background: var(--bleu-clair);
    color: #fff;
}

.pied__bas {
    margin-top: 32px;
    font-size: 13px;
    color: var(--sur-sombre-pale);
    text-align: center;
}

/* ---------------------------------------------------------------- 16. Contact */

.contact {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 44px;
    padding: 38px var(--gouttiere) 44px;
    align-items: start;
}

.contact__infos {
    padding: 25px 35px;
}

.contact__titre {
    font-size: 35px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.02em;
    margin-top: 10px;
}

.contact__chapo {
    font-size: 15px;
    line-height: 1.6;
    color: var(--texte-doux);
    margin-top: 16px;
    margin-bottom: 45px;
}

.contact__telephone {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    border-radius: var(--rayon);
    padding: 20px 22px;
    background: var(--bleu-pastel);
    transition: background-color .2s ease;
}

.contact__telephone:hover {
    background: #D6EEFB;
}

.contact__telephone-icone {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: #fff;
    color: var(--bleu);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact__telephone-libelle {
    color: var(--texte-gris);
    font-family: var(--titre-police);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact__telephone-numero {
    color: var(--titre);
    font-family: var(--titre-police);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.01em;
    margin-top: 2px;
}

.contact__agences {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
}

.contact__agence {
    display: flex;
    gap: 14px;
}

.contact__agence-icone {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--corail);
    font-size: 17px;
}

.contact__agence h3 {
    font-size: 15px;
    font-weight: 800;
}

.contact__agence p {
    color: var(--texte-doux);
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 5px;
}

/* Formulaire */

.formulaire {
    border: 1px solid var(--bordure-2);
    border-radius: 20px;
    padding: 32px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 30, 45, .07);
}

.formulaire__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.formulaire__entete h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.formulaire__mention {
    font-size: 12.5px;
    color: var(--texte-pale);
}

.formulaire__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.formulaire__champ--large {
    grid-column: 1 / -1;
}

/*
 * Champ haut de la seconde colonne (le message) : il court sur deux rangées et
 * fait face à la liste déroulante puis au dépôt du CV.
 */
.formulaire__champ--haut {
    grid-column: 2;
    grid-row: span 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.formulaire__champ--haut textarea {
    flex: 1;
    height: auto;
    resize: vertical;
}

.formulaire__champ--premiere-colonne {
    grid-column: 1;
    min-width: 0;
}

.obligatoire {
    color: var(--corail-texte);
}

.formulaire label {
    display: block;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 12px;
    color: #3E4249;
    margin-bottom: 5px;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
    font-family: var(--corps-police);
    font-size: 14px;
    color: var(--texte);
    background: #fff;
    border: 1px solid var(--bordure-champ);
    border-radius: 10px;
    padding: 11px 13px;
    width: 100%;
    outline: none;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(0, 159, 241, .12);
}

.formulaire ::placeholder {
    color: var(--placeholder);
}

/* Zone de dépôt de fichier : le label habille l'input, masqué. */
.depot-fichier {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px dashed var(--bordure-tiret);
    border-radius: 11px;
    padding: 13px 16px;
    background: var(--fond-champ);
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 400;
}

.depot-fichier__icone {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--bleu-pastel);
    color: var(--bleu);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.depot-fichier__titre {
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--texte);
}

.depot-fichier__aide {
    font-size: 12px;
    color: var(--texte-pale);
    margin-top: 1px;
}

.depot-fichier__input {
    display: none;
}

.formulaire__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* Plan d'accès */

.plan {
    position: relative;
    height: 340px;
    overflow: hidden;
    border-top: 1px solid var(--bordure);
}

.plan iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ------------------------------------------- 17. Défilement horizontal avec fondu */

/*
 * Mécanique partagée par tous les rubans qui débordent : fil d'Ariane, filtres
 * du blog, et tout ce qui viendra ensuite. Le marqueur `data-fondu` suffit à
 * l'activer, synertic.js pose les classes selon la position de défilement.
 *
 *   <div class="defilement-fondu" data-fondu>
 *       <div class="defilement-fondu__piste"> … </div>
 *   </div>
 *
 * Sans JavaScript, le ruban reste défilable : seuls les dégradés manquent.
 */
.defilement-fondu {
    position: relative;
    min-width: 0;
}

.defilement-fondu::before,
.defilement-fondu::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}

.defilement-fondu::before {
    left: 0;
    background: linear-gradient(90deg, var(--fond) 25%, rgba(255, 255, 255, 0));
}

.defilement-fondu::after {
    right: 0;
    background: linear-gradient(270deg, var(--fond) 25%, rgba(255, 255, 255, 0));
}

.defilement-fondu.a-fondu-gauche::before,
.defilement-fondu.a-fondu-droite::after {
    opacity: 1;
}

.defilement-fondu__piste {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Barre masquée : le fondu latéral est le seul indicateur de débordement. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.defilement-fondu__piste::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------- 17 bis. Textes repliables */

/*
 * Bloc de texte long ramené à une hauteur raisonnable, avec un fondu de fin de
 * zone et un bouton « Lire la suite ». Le repli n'existe que si le script l'a
 * posé (classe `est-repliee`) : sans JavaScript, tout le texte reste lisible.
 *
 *   <div class="texte-repliable" data-repliable="320">
 *       <div class="texte-repliable__contenu"> … </div>
 *       <button class="texte-repliable__bouton" hidden
 *               data-libelle-plus="Lire la suite" data-libelle-moins="Réduire">…</button>
 *   </div>
 *
 * La teinte du fondu suit `--fond-fondu`, à redéfinir sur fond coloré.
 */
.texte-repliable__contenu {
    position: relative;
}

.texte-repliable.est-repliee .texte-repliable__contenu {
    max-height: var(--hauteur-repliee, 320px);
    overflow: hidden;
}

.texte-repliable.est-repliee .texte-repliable__contenu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--fond-fondu, var(--fond)) 92%
    );
}

.texte-repliable__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--titre-police);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--bleu-fonce);
    transition: color .2s ease;
}

.texte-repliable__bouton::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
}

.texte-repliable:not(.est-repliee) .texte-repliable__bouton::after {
    transform: translateY(1px) rotate(-135deg);
}

.texte-repliable__bouton:hover {
    color: var(--corail);
}

/* ---------------------------------------------------------------- 18. Fil d'Ariane */

.fil-ariane {
    padding: 28px 0 0;
}

.fil-ariane__piste {
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 2px 0;
    font-family: var(--corps-police);
    font-size: 13px;
    color: var(--texte-clair);
    /* Une seule ligne, quoi qu'il arrive : au-delà, ça défile. */
    white-space: nowrap;
}

.fil-ariane__element {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
}

.fil-ariane__element a {
    color: var(--texte-gris);
}

.fil-ariane__element a:hover {
    color: var(--bleu-fonce);
}

.fil-ariane__separateur {
    color: var(--bordure-tiret);
}

.fil-ariane__element[aria-current] {
    color: var(--texte-clair);
}

/* ---------------------------------------------------------------- 19. Responsive */

@media (max-width: 1199.98px) {
    :root {
        --gouttiere: 36px;
    }

    .hero {
        gap: 36px;
    }

    .hero__titre {
        font-size: 46px;
    }

    .chiffre {
        padding: 24px 14px;
    }

    .shapper__carte {
        padding: 30px 34px;
    }

    .shapper__mascotte {
        display: none;
    }

    .pied__colonnes {
        gap: 32px;
    }

    .pied__logo img {
        height: 120px;
    }
}

@media (max-width: 991.98px) {
    .entete__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* La navigation passe en panneau déroulant sous l'en-tête. */
    .entete {
        flex-wrap: wrap;
        gap: 16px;
    }

    .entete__nav {
        display: none;
    }

    .entete__nav.est-ouvert {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid var(--bordure);
    }

    .entete__nav .entete__lien,
    .entete__nav .bouton {
        padding: 12px 4px;
    }

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

    .hero {
        grid-template-columns: 1fr;
        padding-top: 40px;
    }

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

    .grille-approches {
        grid-template-columns: 1fr;
    }

    .shapper__carte {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .shapper__nav {
        display: none;
    }

    .grille-realisations {
        grid-template-columns: 1fr 1fr;
    }

    .grille-realisations .realisation--large {
        grid-column: 1 / -1;
    }

    /* Deux avis par vue : le JS en déduit seul la nouvelle pagination. */
    .avis-carte {
        flex-basis: calc((100% - 24px) / 2);
    }

    .contact {
        grid-template-columns: 1fr;
    }

    .contact__infos {
        padding: 0;
    }

    .pied__haut {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 28px;
    }

    .pied__logo,
    .pied__reseaux {
        grid-column: auto;
        justify-self: center;
    }

    .pied__colonnes {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pied__liste {
        align-items: center;
    }
}

@media (max-width: 767.98px) {
    :root {
        --gouttiere: 20px;
    }

    .section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .hero__titre {
        font-size: 36px;
    }

    .section__titre {
        font-size: 26px;
    }

    /* En colonne étroite, quatre chiffres sur une ligne deviennent illisibles :
       on repasse à deux lignes de deux. */
    .chiffres {
        flex-wrap: wrap;
        margin-left: var(--gouttiere);
        margin-right: var(--gouttiere);
    }

    .chiffre {
        flex: 1 1 50%;
        padding: 20px 8px;
        border-right: none;
    }

    .grille-expertises,
    .grille-realisations {
        grid-template-columns: 1fr;
    }

    .grille-realisations .realisation--large {
        grid-column: auto;
    }

    .shapper__carte {
        padding: 24px;
    }

    .shapper__titre {
        font-size: 26px;
    }

    /* Les sauts de ligne de la maquette n'ont plus de sens en colonne étroite. */
    .shapper__titre br,
    .hero__chapo br {
        display: none;
    }

    .avis__entete {
        flex-direction: column;
        align-items: flex-start;
    }

    .avis__piste {
        gap: 16px;
    }

    .avis-carte {
        flex-basis: 100%;
    }

    .bloc-cta {
        padding: 28px 18px;
    }

    .bloc-cta__contenu {
        padding: 16px 0;
    }

    .bloc-cta__contenu h2 {
        font-size: 24px;
    }

    .formulaire {
        padding: 22px 18px;
    }

    .formulaire__grille {
        grid-template-columns: 1fr;
    }

    /* En colonne unique, le placement explicite n'a plus de sens. */
    .formulaire__champ--haut,
    .formulaire__champ--premiere-colonne {
        grid-column: auto;
        grid-row: auto;
    }

    .formulaire__pied {
        flex-direction: column;
        align-items: stretch;
    }

    .formulaire__pied .bouton {
        width: 100%;
    }

    .contact__titre {
        font-size: 28px;
    }

    .pied__colonnes {
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }
}