/**
 * Page Accueil — Thibierge Notaires
 * Specs Figma : viewport de référence 1728px
 */

.accueil-page {
    padding: 0;
    margin: 0;
    overflow-x: clip;
    position: relative;
    background: #fff;
}

/* Sections en transparent — laissent passer les shapes décoratifs.
   Les cartes/contenus à l'intérieur ont leurs propres bg (blanc) si besoin. */
.accueil-hero,
.accueil-cs,
.accueil-team,
.accueil-services,
.accueil-apropos {
    position: relative;
    z-index: 1;
}

/* =============================================
   SHAPES DÉCORATIFS (arrière-plan, position: absolute)
   Positions issues du Figma — couvrent partiellement la page derrière
   les sections CS, Équipe et Services en ligne.
============================================= */

.accueil-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.accueil-shape {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    object-fit: contain;
}

/* shape-popup.webp — au niveau de "De la CONCEPTION à la SIGNATURE"
   Ancré bottom-right pour rester collé en bas droit de la page. */
.accueil-shape--cs {
    bottom: 3904px;
    right: -282px;
    width: 1500px;
    height: auto;
}

/* shape-team.webp — au niveau des profils notaires (sans rotation) */
.accueil-shape--team {
    bottom: 2500px;
    right: -200px;
    width: 870px;
    height: 1023px;
}

/* shape-carrieres.webp — au niveau de la section Services en ligne
   Ancré bottom-left pour le grand dégradé qui balaie la partie basse. */
.accueil-shape--services {
    bottom: 646px;
    left: 0px;
    width: 2000px;
    height: auto;
}

/* =============================================
   HERO — image plein écran + carte blanche en bas-gauche
============================================= */

.accueil-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 700px;
    background-color: #f0e8df;
    overflow: hidden;
}

/* Slider hero — 4 images superposées avec fondu enchaîné */
.accueil-hero__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.accueil-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
}

.accueil-hero__slide.is-active {
    opacity: 1;
}

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

.accueil-hero__card {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Largeur calée pour que le bord droit de la card hero corresponde au bord
       droit de la 2e carte (Droit patrimonial) ci-dessous : 70px (offset gauche)
       + 2 × 474px (largeur des 2 cartes) = 1018px. */
    width: 1018px;
    background: #fff;
    padding: 90px 20px 96px 70px;
    z-index: 2;
}

.accueil-hero__surtitre {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a3acb5;
    margin: 0 0 15px;
}

.accueil-hero__titre {
    font-family: var(--font-magnetik);
    font-weight: 200;
    font-size: 81.37px;
    line-height: 90px;
    color: #222f30;
    margin: 0 0 60px;
}

.accueil-hero__stats {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    text-align: center;
    max-width: 818px;
    flex-direction: row;
    justify-content: space-between;
}

.accueil-hero__stat-chiffre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.32;
    color: #222f30;
    margin: 0 0 8px;
}

.accueil-hero__stat-label {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #222f30;
    margin: 0;
}

/* =============================================
   BLOC "DE LA CONCEPTION À LA SIGNATURE"
   Grille 3×2 = 5 cartes + 1 header (en cellule [row 1, col 3])
============================================= */

.accueil-cs {
    position: relative;
    padding: 0;
    background: transparent;
}

.accueil-cs__grid {
    display: grid;
    grid-template-columns: repeat(3, 474px);
    grid-template-rows: 606px 606px;
    gap: 0;
    /* Pas de border-right sur la grille → permet au texte du header (avec
       margin-right négatif) de déborder sans croiser de trait vertical.
       La bordure droite est ajoutée uniquement sur la dernière carte (Promotion). */
    background: transparent;
    border-bottom: 1px solid #eff2f6;
    width: fit-content;
    margin-left: 69px;
}

/* Bordure droite uniquement sur la dernière carte (row 2 col 3 = Promotion) */
.accueil-cs__grid > .accueil-card:last-child {
    border-right: 1px solid #eff2f6;
}

/* Header CS — occupe la cellule (1, 3) */
.accueil-cs__header {
    grid-column: 3;
    grid-row: 1;
    padding: 146px 60px 48px;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-top: 0;
    border-left: 1px solid #eff2f6;
}

.accueil-cs__titre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.32;
    color: #222f30;
    margin: 0 0 32px;
    max-width: 322px;
}

.accueil-cs__texte {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #72777b;
    margin: 0 0 40px;
    /* max-width: 857px; */
    margin-right: -83px;
}

.accueil-cs__header .accueil-link {
    margin-top: 0px;
}

/* Cartes 474×606. Bordures top + left sur chaque carte (et header) ;
   bordures bottom + right sur le grid container → pas de doublement. */
.accueil-card {
    display: flex;
    flex-direction: column;
    width: 474px;
    height: 606px;
    background: #fff;
    border-top: 1px solid #eff2f6;
    border-left: 1px solid #eff2f6;
    padding: 108px 62px 48px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
/* Pas de transform au survol — on garde uniquement les anims internes */

.accueil-card__image {
    position: relative;
    width: 351px;
    height: 317px;
    overflow: hidden;
    margin: 0 0 37px;
    background: #eff2f6;
}
.accueil-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.accueil-card:hover .accueil-card__image img {
    transform: scale(1.04);
}

/* Desktop hover-capable : on masque l'image fixe sur la card vidéo.
   La "poster" (vidéo figée à IDLE_TIME) sert d'image au repos, la "player"
   joue par-dessus en fondu enchaîné au survol. Mobile/tactile : seule
   l'image s'affiche (les vidéos sont cachées plus bas). */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .accueil-card--has-video .accueil-card__image img {
        display: none;
    }
}

.accueil-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/* Poster : toujours visible, figée à IDLE_TIME → sert d'"image" statique */
.accueil-card__video--poster {
    opacity: 1;
}
/* Player : invisible au repos, fond enchaîné au survol.
   Easing asymétrique : entrée rapide (0.4s) pour démarrer l'anim, sortie
   plus longue et douce (0.7s ease-out) pour adoucir le retour au repos. */
.accueil-card__video--player {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.accueil-card--has-video:hover .accueil-card__video--player {
    transition: opacity 0.4s ease-out;
}
.accueil-card--has-video:hover .accueil-card__video--player {
    opacity: 1;
}
@media (max-width: 767px), (hover: none), (pointer: coarse) {
    .accueil-card__video {
        display: none;
    }
}

.accueil-card__content {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.accueil-card__titre {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    color: #03203c;
    margin: 0;
}

.accueil-card__surtitre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 29px;
    letter-spacing: 0.36px;
    color: #72777b;
    margin: 0;
    margin-right: -81px;
}

/* =============================================
   SECTION ÉQUIPE — grille 3x3 statique des notaires associés du COMEX
   Profils cliquables → ouvre la popup notaire (équipe.js)
============================================= */

.accueil-team {
    position: relative;
    padding: 160px 0 0;
    background: transparent;
    overflow: visible;
}

/* Calage Figma : titre à gauche (x=45), bouton à droite (x≈1399 = calc(79.17% + 31)). */
.accueil-team__header {
    display: flex;
    align-items: flex-end;
    gap: 40px 60px;
    padding-left: 45px;
    padding-right: 130px;
    margin: 0 0 30px;
}
.accueil-team__title {
    flex: 1 1 auto;
}
.accueil-team__link {
    flex: 0 0 auto;
    margin-left: auto;
}

.accueil-team__title {
    font-family: var(--font-magnetik);
    font-weight: 200;
    font-size: 81.37px;
    line-height: 90px;
    color: #222f30;
    margin: 0;
    flex: 0 0 auto;
}

.accueil-team__link {
    margin-bottom: 20px;
    flex: 0 0 auto;
}

.accueil-team__surtitre {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a3acb5;
    margin: 74px auto 14px;
    text-align: center;
}

.accueil-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 343px);
    grid-auto-rows: 492px;
    gap: 19px;
    justify-content: center;
    max-width: 1588px;
    margin: 0 auto;
}

.accueil-team__item {
    position: relative;
    width: 343px;
    height: 492px;
    overflow: hidden;
    cursor: pointer;
    background: #eff2f6;
}
.accueil-team__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
}
.accueil-team__item:hover img {
    transform: scale(1.04);
}

.accueil-team__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

/* Overlay au survol — fond bleu nuit (#092e50, 90%) avec nom + type centrés */
.accueil-team__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(9, 46, 80, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.accueil-team__item:hover .accueil-team__overlay,
.accueil-team__item:focus-visible .accueil-team__overlay {
    opacity: 1;
}

.accueil-team__name {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.32;
    color: #fff;
    margin: 0 0 14px;
}
.accueil-team__nom {
    font-style: normal; /* Bodoni 72 Book — non italique pour le nom de famille */
}

.accueil-team__type {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 9.2px;
    line-height: 1.6;
    letter-spacing: 0.92px;
    text-transform: uppercase;
    color: #a3acb5;
    margin: 0;
}

/* =============================================
   SERVICES EN LIGNE
============================================= */

.accueil-services {
    position: relative;
    padding: 150px 0 120px;
    background: transparent;
    overflow: visible;
}

/* Header (surtitre + titre) calé à x=50 selon le Figma. Pas de centrage. */
.accueil-services__header {
    padding: 0 50px;
    margin: 0 0 60px;
}

.accueil-services__surtitre {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 14px;
    line-height: 53px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #72777b;
    margin: 0 0 6px;
}

.accueil-services__titre {
    font-family: var(--font-magnetik);
    font-weight: 200;
    font-size: 81.37px;
    line-height: 90px;
    color: #222f30;
    margin: 0;
    max-width: 811px;
}

/* Grille 3 cartes — dimensions issues du Figma : 456×514 chacune, gap 54px,
   total 1476px centré horizontalement. */
.accueil-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 456px);
    gap: 54px;
    justify-content: center;
    max-width: 1476px;
    margin: 0 auto;
}

/* Card services — état par défaut clair (transparent + texte sombre) ;
   état hover bleu nuit (#092e50) avec texte blanc et icône blanche.
   Les SVG ont 2 couleurs Figma : #092E50 (forme principale) → currentColor,
   et #0199A4 (accent teal) → conservé. */
.accueil-services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* text-align: center; */
    width: 456px;
    height: 514px;
    padding: 60px 60px 56px;
    justify-content: flex-end;
    border: 1px solid #eff2f6;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #222f30;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Hover des cartes : passent en bleu nuit (les 3 cartes ont le même comportement) */
.accueil-services__card:hover,
.accueil-services__card:focus-visible {
    background: #092e50;
    border-color: #092e50;
    color: #fff;
}

.accueil-services__icon {
    margin-bottom: 23px;
    color: #092e50;
    transition: color 0.4s ease;
}
.accueil-services__icon svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 96px;
}
/* Forme principale du SVG : prend la couleur du wrapper (currentColor) */
.accueil-services__icon svg path[fill="#092E50"] {
    fill: currentColor;
    transition: fill 0.4s ease;
}
/* Accent teal : conservé */
.accueil-services__icon svg path[fill="#0199A4"] {
    fill: #0199A4;
    transition: fill 0.4s ease;
}
/* Au survol : la forme principale devient blanche, l'accent reste teal */
.accueil-services__card:hover .accueil-services__icon,
.accueil-services__card:focus-visible .accueil-services__icon {
    color: #fff;
}

.accueil-services__card-titre {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    color: currentColor;
    margin: 0;
}

.accueil-services__card-soustitre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 0.36px;
    margin: 0 0 26px;
    color: #72777b;
    transition: color 0.4s ease;
}
.accueil-services__card:hover .accueil-services__card-soustitre,
.accueil-services__card:focus-visible .accueil-services__card-soustitre {
    color: rgba(255, 255, 255, 0.85);
}

.accueil-services__link {
    margin-top: 0;
    color: #1e1e1e;
    transition: color 0.4s ease;
}
/* Pas de trait sous le bouton dans les cartes services (selon Figma) */
.accueil-services__link .accueil-link__line {
    display: none;
}
/* Flèche placée à gauche du texte (selon Figma) */
.accueil-services__link .accueil-link__content {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
/* Flèche en teal #0199A4 (selon Figma) */
.accueil-services__link .accueil-link__icon {
    color: #0199A4;
}
.accueil-services__card:hover .accueil-services__link,
.accueil-services__card:focus-visible .accueil-services__link {
    color: #fff;
}
.accueil-services__card:hover .accueil-services__link .accueil-link__icon,
.accueil-services__card:focus-visible .accueil-services__link .accueil-link__icon {
    color: #0199A4; /* l'accent teal reste teal même au survol */
}

/* =============================================
   À PROPOS
============================================= */

/* À PROPOS — texte à gauche (x=126, calé sur la 1re card de Services),
   photo 870×964 à droite. La photo s'étend au-dessus du surtitre et au-dessous
   du bouton (positions issues du Figma). */
.accueil-apropos {
    position: relative;
    padding: 82px 0 233px;
    min-height: 964px;
    background: transparent;
}

.accueil-apropos__content {
    position: absolute;
    top: 50%;
    left: 126px;
    transform: translateY(-50%);
    max-width: 517px;
    z-index: 2;
}

.accueil-apropos__surtitre {
    font-family: var(--font-geometos);
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #72777b;
    margin: 0 0 22px;
}

.accueil-apropos__titre {
    font-family: var(--font-bodoni);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.32;
    color: #222f30;
    margin: 0 0 30px;
}

.accueil-apropos__texte {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #72777b;
    margin: 0 0 30px;
    max-width: 429px;
}

.accueil-apropos__texte p {
    margin: 0 0 18px;
}
.accueil-apropos__texte p:last-child {
    margin-bottom: 0;
}

/* Photo 870×964 calée à droite (left: calc(50%+21px) = équivalent
   translate-x-1/2 du Figma). Démarre en haut de section. */
.accueil-apropos__image {
    position: absolute;
    top: 0;
    left: calc(50% + 21px);
    width: 870px;
    height: 964px;
    overflow: hidden;
    z-index: 1;
}
.accueil-apropos__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================
   COMPONENT — accueil-link (générique : Button_third)
============================================= */

.accueil-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-decoration: none;
    width: max-content;
}

.accueil-link__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 1px;
}

.accueil-link__text {
    font-family: var(--font-magnetik);
    font-weight: 300;
    font-size: 18px;
    white-space: nowrap;
}

.accueil-link__icon {
    width: 12px;
    height: 11px;
    transition: transform 0.3s ease;
}

.accueil-link:hover .accueil-link__icon {
    transform: translateX(4px);
}

.accueil-link__line {
    position: relative;
    width: 100%;
    height: 1px;
    overflow: hidden;
}

.accueil-link__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
}

.accueil-link:hover .accueil-link__line::after {
    animation: accueilLineWipe 0.5s ease;
}

.accueil-link--dark { color: #1e1e1e; }
.accueil-link--light { color: #ffffff; }

@keyframes accueilLineWipe {
    0% { transform: translateX(0); }
    50% { transform: translateX(100%); }
    50.01% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 1520px) {
    .accueil-hero__titre,
    .accueil-services__titre,
    .accueil-team__title {
        font-size: 64px;
        line-height: 72px;
    }
}

/* Tablet : on quitte le layout absolute, tout en colonne, shapes masqués */
@media (max-width: 1279px) {
    .accueil-shapes {
        display: none;
    }

    /* Hero */
    .accueil-hero {
        min-height: 600px;
    }
    .accueil-hero__card {
        width: 90%;
        padding: 60px var(--gutter-tablet);
    }
    .accueil-hero__titre {
        font-size: 48px;
        line-height: 56px;
        margin-bottom: 40px;
    }
    .accueil-hero__stats {
        max-width: 100%;
    }

    /* CS section : grille 2 colonnes au lieu de 3, header en pleine ligne */
    .accueil-cs__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        margin: 0 var(--gutter-tablet) !important;
        width: auto !important;
    }
    .accueil-card,
    .accueil-cs__header {
        width: 100% !important;
        height: auto !important;
        /* min-height: 460px; */
    }
    .accueil-cs__header {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: 60px 40px !important;
    }
    .accueil-cs__titre {
        font-size: 30px;
        max-width: 100%;
    }
    .accueil-cs__texte {
        margin-right: 0 !important;
    }
    .accueil-card {
        padding: 60px 40px !important;
    }
    .accueil-card__image {
        width: 100% !important;
        height: 240px;
    }

    /* Team */
    .accueil-team {
        padding: 100px 0 0;
    }
    .accueil-team__header {
        padding: 0 var(--gutter-tablet) !important;
    }
    .accueil-team__title {
        font-size: 40px;
        line-height: 48px;
    }
    .accueil-team__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 16px;
        max-width: 100%;
        padding: 0 var(--gutter-tablet);
    }
    .accueil-team__item {
        width: 100% !important;
        height: 380px !important;
    }

    /* Services */
    .accueil-services {
        padding: 100px var(--gutter-tablet) 100px !important;
    }
    .accueil-services__header {
        padding: 0 !important;
    }
    .accueil-services__titre {
        font-size: 40px;
        line-height: 48px;
    }
    .accueil-services__grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
        max-width: 100%;
    }
    .accueil-services__card {
        width: 100% !important;
        height: auto !important;
        min-height: 380px;
        padding: 60px 40px !important;
    }
    .accueil-services__icon {
        margin-bottom: 40px;
    }
    .accueil-services__card-soustitre {
        margin-bottom: 30px;
    }

    /* À propos */
    .accueil-apropos {
        padding: 80px var(--gutter-tablet) !important;
        min-height: 0 !important;
    }
    .accueil-apropos__content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 100%;
        margin: 0 0 50px !important;
    }
    .accueil-apropos__image {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
        height: 500px !important;
    }
    .accueil-apropos__titre {
        font-size: 28px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    /* Hero — la card blanche prend toute la largeur, contenu centré */
    .accueil-hero {
        min-height: 500px;
    }
    .accueil-hero__card {
        width: 100%;
        padding: 40px var(--gutter-mobile);
        text-align: center;
    }
    .accueil-hero__surtitre {
        font-size: 12px;
        margin: 0 0 20px;
    }
    .accueil-hero__titre {
        font-size: 32px;
        line-height: 40px;
        margin: 0 auto 30px;
    }
    .accueil-hero__stats {
        gap: 16px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        max-width: 100%;
        margin: 0 auto;
    }
    .accueil-hero__stat {
        text-align: center;
        flex: 0 1 auto;
    }
    .accueil-hero__stat-chiffre {
        font-size: 26px;
    }
    .accueil-hero__stat-label {
        font-size: 13px;
        line-height: 18px;
    }

    /* CS section : grille 1 colonne, header en PREMIER, bordures complètes */
    .accueil-cs__grid {
        grid-template-columns: 1fr !important;
        margin: 0 var(--gutter-mobile) !important;
        border: 1px solid #eff2f6; /* bordures complètes du conteneur en mobile */
    }
    .accueil-cs__header {
        order: -1; /* place le header avant toutes les cartes sur mobile */
        padding: 50px 30px !important;
        border-top: none; /* déjà la bordure du grid container */
        border-left: none;
    }
    .accueil-card {
        border-top: 1px solid #eff2f6; /* séparateur entre cellules empilées */
        border-left: none;
    }
    .accueil-card:last-child {
        border-right: none; /* déjà la bordure du grid container */
    }
    .accueil-cs__titre {
        font-size: 24px;
    }
    .accueil-cs__texte {
        font-size: 16px;
        line-height: 26px;
    }
    .accueil-card {
        padding: 50px 30px !important;
        min-height: 0;
    }
    .accueil-card__image {
        height: 220px;
    }

    /* Team — bouton "Découvrir toute l'équipe" à gauche, profils 2 par ligne */
    .accueil-team__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 0 var(--gutter-mobile) !important;
        gap: 24px !important;
    }
    .accueil-team__link {
        align-self: flex-start !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .accueil-team__title {
        font-size: 30px;
        line-height: 38px;
    }
    .accueil-team__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 var(--gutter-mobile);
    }
    .accueil-team__item {
        height: 280px !important;
    }
    /* Si nombre impair de profils : le dernier est centré (span 2 cols) */
    .accueil-team__grid > .accueil-team__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50%) !important;
    }
    /* Texte du nom dans l'overlay : taille adaptée pour 2 cols */
    .accueil-team__name {
        font-size: 22px;
    }
    .accueil-team__type {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    /* Services */
    .accueil-services {
        padding: 80px var(--gutter-mobile) !important;
    }
    .accueil-services__titre {
        font-size: 30px;
        line-height: 38px;
    }
    .accueil-services__card {
        padding: 50px 30px !important;
    }
    .accueil-services__card-titre {
        font-size: 18px;
    }
    .accueil-services__card-soustitre {
        font-size: 16px;
    }

    /* À propos — réduit le padding-top sur mobile (était 60px) */
    .accueil-apropos {
        padding: 0 var(--gutter-mobile) 60px !important;
    }
    .accueil-apropos__titre {
        font-size: 22px;
    }
    .accueil-apropos__texte {
        font-size: 16px;
        line-height: 26px;
    }
    .accueil-apropos__image {
        height: 380px !important;
    }
}

/* Très petit mobile */
@media (max-width: 380px) {
    .accueil-hero__titre {
        font-size: 28px;
        line-height: 34px;
    }
    .accueil-hero__stat-chiffre {
        font-size: 22px;
    }
    .accueil-cs__titre,
    .accueil-services__titre,
    .accueil-team__title {
        font-size: 26px;
        line-height: 32px;
    }
}