/* ==========================================================================
   Commpagnie — page d'accueil (maquette finale)
   ========================================================================== */

.cmp-eyebrow-line--dark { color: var(--cmp-anthracite); }
.cmp-eyebrow-line--dark .cmp-eyebrow-line__bar { background: var(--cmp-anthracite); }

/* ---- Bouton play ---- */
.cmp-play { width: 80px; height: 80px; border-radius: 999px; border: 3px solid #fff; background: rgba(255,255,255,.06); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.cmp-play:hover { transform: scale(1.08); background: rgba(255,255,255,.2); }
.cmp-play__tri { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }

/* ---- Vecteurs décoratifs (SVG de la médiathèque) ---- */
.cmp-vec { position: absolute; pointer-events: none; z-index: 1; height: auto; }
.cmp-vec--hero { width: 620px; right: -90px; top: 30px; opacity: .22; filter: brightness(0) invert(1); transform: rotate(8deg); }
.cmp-vec--swoosh { width: 460px; left: -70px; top: 26%; opacity: .55; }
.cmp-vec--swoosh2 { width: 300px; right: 3%; top: -120px; opacity: .25; }
.cmp-vec--swoosh3 { width: 360px; right: -90px; bottom: -120px; opacity: .25; filter: brightness(0) invert(1); }

/* ---- 1. HERO ---- */
.home-hero { position: relative; background: var(--cmp-primary); color: #fff; min-height: 100vh; padding: 130px 0 90px; text-align: center; overflow: visible; display: flex; flex-direction: column; justify-content: center; }
.home-hero__title { color: #fff; font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.18; margin: 0 auto; max-width: 1000px; position: relative; z-index: 2; }
.home-hero__title strong { color: #fff; font-weight: 800; }
/* Fil conducteur : UN SEUL <path> dans le REPÈRE DU DOCUMENT (calque absolu sur toute
   la pile, z-4 au-dessus des panneaux sticky z1/2/3) généré par home.js (initHomeFil).
   Le tracé et la frontière bleu/blanc bougent ensemble avec le scroll → jointure collée
   à la frontière = un seul fil sans couture. Le tracé évite le titre épinglé (boucle en
   marge gauche, voie du haut, descente verticale dans le couloir titre↔badge mesuré) et
   se dessine en synchro avec le scroll (strokeDashoffset). */
.home-stack > .cmp-homefil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
/* Le titre + ses décors sont groupés et centrés ensemble. */
.home-hero__inner { position: relative; }
/* Cercle décoratif derrière le titre (FAFAFA opacity .08). */
.home-hero__circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, 70vw); height: auto; z-index: 0; pointer-events: none; }
/* Badge « parlons de votre projet » qui tourne lentement, au-dessus à droite du titre. */
.home-hero__badge { position: absolute; z-index: 2; width: clamp(74px, 7vw, 96px); height: auto; top: 50%; left: 50%; transform: translate(clamp(530px, 36vw, 600px), -50%); animation: cmpBadgeSpin 18s linear infinite; pointer-events: none; }
@keyframes cmpBadgeSpin { to { transform: translate(clamp(530px, 36vw, 600px), -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-hero__badge { animation: none; } }
/* Sous ~1180px le titre centré remplit la largeur → plus de place à droite : badge en coin haut-droit, au-dessus du titre. */
@media (max-width: 1180px) { .home-hero__badge { left: auto; right: clamp(20px, 4vw, 64px); top: clamp(84px, 12vh, 120px); transform: none; } @keyframes cmpBadgeSpin { to { transform: rotate(360deg); } } }
/* Mobile : badge dans le coin haut-droit, DÉGAGÉ du titre (top négatif) et avec une
   marge droite suffisante pour que sa boîte englobante EN ROTATION (≈+15px à 45°) ne
   déborde jamais du viewport → plus de scroll horizontal intermittent. */
@media (max-width: 720px) { .home-hero__badge { width: 68px; height: auto; left: auto; right: 18px; top: clamp(-128px, -24vw, -96px); transform: none; } @keyframes cmpBadgeSpin { to { transform: rotate(360deg); } } }
.home-hero__video { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; aspect-ratio: 885/415; border-radius: clamp(30px, 5vw, 85px); background: linear-gradient(226deg, var(--cmp-primary) 0%, var(--cmp-noir) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.35); }

/* ---- 2. INTRO — 2 panneaux sticky empilés (voir « Pile épinglée » en bas de fichier) ---- */
.home-intro__text, .home-intro__text2 { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.3; color: var(--cmp-anthracite); margin: 0; max-width: 560px; }
.home-intro__text strong, .home-intro__text2 strong { font-weight: 800; }
.home-intro .cmp-eyebrow-line { margin-bottom: 24px; }
/* Panneau 1 : texte centré verticalement (gauche). */
.home-intro__inner { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
/* Panneau 2 : texte centré verticalement (droite) + indicateur de scroll dessous. */
.home-intro2__inner { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.home-intro2__inner .home-intro__text2 { margin-left: auto; }
.home-scroll { width: 30px; height: 64px; margin: clamp(40px, 6vw, 72px) auto 0; border: 1px solid var(--cmp-primary); border-radius: 30px; display: flex; justify-content: center; padding-top: 10px; }
.home-scroll span { width: 4px; height: 14px; border-radius: 4px; background: var(--cmp-primary); animation: cmp-scroll 1.6s ease-in-out infinite; }
@keyframes cmp-scroll { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(14px); opacity: .3; } }

/* ---- 3. AGENCE ---- */
.home-agence { background: var(--cmp-blanc); padding: 60px 0 90px; }
.home-agence__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; align-items: stretch; }
.home-acard { background: #fff; border-radius: 15px; padding: 56px; box-shadow: 0 4px 30px rgba(190,190,190,.22); border: 1px solid rgba(0,0,0,.05); display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; min-height: 450px; transition: background-color .6s ease, border-color .6s ease, box-shadow .6s ease; }
/* Icône bi-état : 2 SVG empilés (idle = pastille bleue/picto blanc ; active = pastille
   blanche/picto bleu) qui se croisent en fondu selon l'état de la carte. */
.home-acard__ico { position: relative; width: 50px; height: 50px; flex: none; }
.home-acard__ico img { position: absolute; inset: 0; width: 50px; height: 50px; object-fit: contain; transition: opacity .6s ease; }
.home-acard__ico-active { opacity: 0; }
.home-acard--primary .home-acard__ico-idle { opacity: 0; }
.home-acard--primary .home-acard__ico-active { opacity: 1; }
.home-acard p { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; margin: 0; color: var(--cmp-grey); transition: color .6s ease; }
.home-acard p strong { font-weight: 800; color: var(--cmp-anthracite); transition: color .6s ease; }
.home-acard--primary { background: var(--cmp-primary); border-color: transparent; box-shadow: 0 18px 40px rgba(58,49,255,.28); }
.home-acard--primary p { color: #fff; }
.home-acard--primary p strong { color: #fff; }

/* ---- 4. PROJETS (slider bord-à-bord) ---- */
.home-projets { padding: 70px 0 0; overflow: hidden; }
.home-projets__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 48px; }
.home-projets__lead { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.3; color: var(--cmp-anthracite); margin: 0; }
.home-projets__lead strong { font-weight: 800; }

.home-slider { position: relative; overflow: hidden; }
/* Carrousel TRANSFORM : le track est centré par translateX (calculé en JS) et la zone
   déborde (overflow:hidden du .home-slider) → la carte centrée est nette au milieu, les
   voisines (scale réduit) sont rognées par les bords gauche/droite. Largeur de carte FIXE
   → aucune carte ne se reflowe pendant le défilement (plus de saccade ni de décalage). */
.home-slider__track { display: flex; align-items: center; gap: 30px; height: 590px; box-sizing: border-box; padding: 30px 0; cursor: grab; will-change: transform; transform: translate3d(0,0,0); transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.home-slider__track.is-grabbing { cursor: grabbing; }
.home-slider__track.is-grabbing .home-pcard { pointer-events: none; }
/* Carte centrée = « active » (630×530) ; voisines = même carte, mise à l'échelle (scale
   composité GPU → aucun reflow). Le scale gère « centrée nette / latérales plus petites »
   sans toucher à la mise en page → translateX déterministe, défilement fluide. */
.home-pcard { position: relative; flex: 0 0 630px; width: 630px; height: 530px; transform: scale(.76); transform-origin: center center; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.home-pcard.is-center { transform: scale(1); }
/* L'image prend toute la hauteur restante sous le corps (le corps s'auto-dimensionne). */
.home-pcard .cmp-card2__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.home-pcard .cmp-card2__body { flex: 0 0 auto; overflow: hidden; transition: padding .5s cubic-bezier(.4,0,.2,1), border-color .4s ease; }
/* Survol = MÊME effet sur toutes les cartes (centrée OU latérale) : on zoome UNIQUEMENT
   l'image, sans toucher à l'échelle de la carte. On neutralise le translateY(-5px) hérité
   de `.cmp-card2:hover` (templates.css) qui, sur les cartes latérales, écrasait leur
   scale(.76) → elles bondissaient à taille pleine au survol. */
.home-pcard:hover { transform: scale(.76); }
.home-pcard.is-center:hover { transform: scale(1); }
.home-pcard:hover .cmp-card2__img img { transform: scale(1.05); }
/* Voile léger (lisibilité du logo blanc) + logo client (version blanche) centré sur l'image. */
.home-pcard .cmp-card2__veil { opacity: .18; transition: opacity .5s ease; }
/* Sélecteur 0,2,0 pour battre `.cmp-card2__img img{width:100%;height:100%;object-fit:cover}` (0,1,1)
   qui sinon étire+ROGNE le logo. width/height:auto + contain = logo entier, jamais rogné.
   Cap à la résolution native (345×195) → pas d'agrandissement CSS = moins de pixelisation. */
/* Logos détourés (marge transparente retirée) → on normalise par la HAUTEUR : tous les
   logos ont la même hauteur visuelle quel que soit leur aspect → tailles homogènes.
   max-width = garde-fou pour les logos ultra-larges (Protectys) qui sinon traverseraient. */
.home-pcard .home-pcard__logo { position: absolute; inset: 0; margin: auto; height: clamp( 56px, 9vw, 92px ); width: auto; max-width: 48%; object-fit: contain; z-index: 2; pointer-events: none; filter: brightness( 0 ) invert( 1 ) drop-shadow( 0 2px 12px rgba(0,0,0,.45) ); }
/* Cartes latérales (réduites) : logo proportionnellement plus petit. */
.home-pcard:not(.is-center) .home-pcard__logo { height: clamp( 40px, 6vw, 62px ); }
.home-pcard .cmp-card2__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-pcard .cmp-card2__btn { overflow: hidden; transition: opacity .35s ease, max-height .5s cubic-bezier(.4,0,.2,1), margin-top .5s ease, padding .4s ease; }
.home-pcard.is-center .cmp-card2__btn { max-height: 64px; opacity: 1; }
/* Cartes non centrées (mise à l'échelle par transform) : corps réduit (titre 2 lignes), bouton replié. */
.home-pcard:not(.is-center) .cmp-card2__veil { opacity: .26; }
.home-pcard:not(.is-center) .cmp-card2__body { border-color: transparent; padding: 20px 24px 24px; gap: 0; }
.home-pcard:not(.is-center) .cmp-card2__desc { color: var(--cmp-grey-mask); font-size: 1rem; line-height: 1.25; -webkit-line-clamp: 2; }
.home-pcard:not(.is-center) .cmp-card2__btn { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
/* Mobile : carte à l'échelle du viewport (le carrousel transform recentre via translateX). */
@media (max-width: 720px) {
	/* Carte plus HAUTE que large sur mobile : le corps (titre + bouton) a une hauteur
	   ~fixe qui, sur une carte basse, ne laissait quasi rien à l'image → carte portrait
	   pour redonner de la hauteur au visuel. */
	.home-slider__track { height: calc(98vw + 60px); gap: 16px; }
	.home-pcard { width: 80vw; height: 98vw; flex: 0 0 80vw; }
	.home-pcard:not(.is-center) { transform: scale(.82); }
	.home-pcard .cmp-card2__img { min-height: 52vw; }
}
/* Curseur custom « Voir le projet » : pastille SVG qui suit la souris sur la carte centrée.
   On masque le curseur système au survol de la carte active ; le badge est positionné en JS. */
.home-pcard.is-center { cursor: none; }
.home-pcursor { position: fixed; left: 0; top: 0; width: 88px; height: 88px; z-index: 240; pointer-events: none; background: url('../img/btn-voir-le-projet.svg') center / contain no-repeat; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1); will-change: transform, left, top; }
.home-pcursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Barre de progression pleine largeur (bord-à-bord), collée au bas de la section. */
.home-slider__controls { margin-top: 34px; padding: 0; width: 100%; }
.home-slider__progress { width: 100%; height: 4px; background: rgba(73,73,73,.12); border-radius: 0; position: relative; }
.home-slider__progress span { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--cmp-primary); border-radius: 4px; transition: width .25s ease, left .25s ease; }

/* ---- 5. CLIENTS (texte à gauche + avis Google masonry à droite) ---- */
.home-clients { background: var(--cmp-blanc); color: var(--cmp-ink); padding: 100px 0 0; overflow: visible; }
/* Grille : colonne texte (gauche, sticky) + grille d'avis (droite). */
.home-clients__grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; }
.home-clients__head { max-width: 420px; margin: 0; position: sticky; top: 110px; }
.home-clients__lead { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.25; color: var(--cmp-ink); }
.home-clients__lead strong { font-weight: 800; color: var(--cmp-primary); }
.home-clients__rating { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cmp-font-body); font-weight: 500; color: var(--cmp-grey); margin-top: 28px; }
.home-clients__rating strong { text-decoration: underline; font-weight: 600; }
.home-clients__g { width: 40px; height: 40px; }

/* Deux colonnes décalées (masonry) qui débordent sur la bande logos bleue en dessous. */
/* 2 colonnes explicites : la colonne de droite est décalée vers le bas (effet masonry).
   break-inside:avoid = garde-fou si une carte devait se scinder. */
.home-reviews { display: flex; align-items: flex-start; gap: 28px; position: relative; z-index: 3; margin-bottom: -130px; }
.home-reviews__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.home-reviews__col--2 { margin-top: clamp(40px, 4.5vw, 80px); }
.home-review { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; margin: 0 0 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 36px 32px; background: #fff; border: 1px solid var(--cmp-line); border-radius: 32px; box-shadow: 0 18px 50px rgba(20,20,40,.06); }
/* Avis long : texte tronqué (≈8 lignes) tant que la carte n'est pas dépliée ; le bouton
   « Lire la suite » est révélé par JS (initReviews) uniquement si le texte déborde. */
.home-review.is-clamped .home-review__text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.home-review__more { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--cmp-font-body); font-weight: 700; font-size: .92rem; color: var(--cmp-primary); text-decoration: underline; }
.home-review__more:hover { text-decoration: none; }
.home-review__g { width: 46px; height: 46px; }
.home-review__head { display: flex; flex-direction: column; gap: 4px; }
.home-review__name { font-family: var(--cmp-font-display); font-weight: 800; font-size: 1.1rem; color: var(--cmp-ink); }
.home-review__company { font-family: var(--cmp-font-accent); font-weight: 600; font-size: .95rem; color: var(--cmp-primary); }
.home-review__stars { color: #fbbc04; font-size: 1.15rem; letter-spacing: 2px; line-height: 1; }
.home-review__text { font-family: var(--cmp-font-body); font-weight: 400; font-size: 1rem; line-height: 1.55; color: var(--cmp-grey); margin: 0; }
.home-review__date { margin-top: 6px; font-family: var(--cmp-font-accent); font-weight: 600; font-size: .95rem; color: var(--cmp-ink); }

/* Bande logos défilante (bleue) — démarre sous les cartes qui débordent. */
.home-logos { position: relative; z-index: 1; background: var(--cmp-primary); overflow: hidden; padding: 200px 0 70px; }
/* Fondu latéral porté par le viewport (sans fond) : seuls les logos s'estompent, la bande bleue reste pleine. */
.home-logos__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-logos__row { display: flex; gap: 20px; width: max-content; animation: cmp-marquee 40s linear infinite; }
.home-logo-cell { flex: none; width: 220px; height: 120px; border: 1px solid rgba(255,255,255,.4); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 18px 26px; }
/* Logos détourés (marge transparente retirée) → on les laisse REMPLIR la cellule par leur plus
   grande dimension : `max-height` ET `max-width` (pas de hauteur forcée). Un wordmark large
   remplit la largeur (≈164px), un logo carré remplit la hauteur (≈62px) → présence visuelle
   homogène quel que soit l'aspect. Blanchis pour un rendu uniforme sur la bande bleue. */
.home-logo-cell img { max-height: 62px; max-width: 168px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
@keyframes cmp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 6. EXPERTISES (onglets) ---- */
.home-expertises { padding: 80px 0 40px; }
/* Bloc head aligné à gauche, CTA en tête (d'après Figma). */
.home-expertises__head { max-width: 760px; margin: 0 0 50px; text-align: left; }
.home-expertises__head .cmp-eyebrow-line { justify-content: flex-start; }
.home-expertises__cta { margin-bottom: clamp(28px, 4vw, 56px); }
.home-expertises__lead { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.3; color: var(--cmp-anthracite); margin-bottom: 24px; }
.home-expertises__lead strong { font-weight: 800; }

/* Accordéon expertises — VOLETS EMPILÉS (intercalaires d'un trieur).
   Chaque carte chevauche la précédente de la valeur du rayon : son coin arrondi
   se cale sur la carte du dessous (même fond) → pas de "gap" blanc, effet pile.
   La carte plus bas dans le DOM est peinte par-dessus (ombre haute = relief de volet). */
.home-tabs { position: relative; }
/* Tous les volets se chevauchent de -22px ; le suivant (plus bas dans le DOM) passe
   DEVANT et couvre le bas du précédent → coverage UNIFORME, aucune carte plus haute
   qu'une autre. Pas de z-index sur l'ouverte (sinon coverage asymétrique = bug "Identité plus grand"). */
.home-tab { position: relative; display: flex; align-items: center; min-height: 155px; margin-top: -22px; text-decoration: none; color: var(--cmp-noir); background: var(--cmp-blanc); border: 1px solid var(--cmp-noir); border-radius: 22px 22px 0 0; cursor: pointer; box-shadow: 0 -8px 20px rgba(36,36,36,.05); transition: min-height .3s ease; }
.home-tab:first-child { margin-top: 0; box-shadow: none; }
.home-tab:last-child { border-radius: 22px; }
.home-tab.is-open { min-height: 300px; }
/* Contenu contraint dans un conteneur centré (titre à gauche, visuel à droite). */
.home-tab__inner { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); width: 100%; max-width: var(--cmp-container); margin: 0 auto; padding: 0 var(--cmp-gutter); }

/* En-tête (flèche d'accent + titre). */
.home-tab__head { display: inline-flex; align-items: center; gap: 20px; flex: none; }
.home-tab__arrow { color: var(--cmp-anthracite); display: inline-flex; transition: color .25s ease; }
.home-tab__arrow .cmp-arrow { width: 26px; height: 9px; }
.home-tab.is-open .home-tab__arrow { color: var(--cmp-primary); }
.home-tab__label { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.2; color: inherit; margin: 0; white-space: nowrap; }

/* Bouton rond — en position absolue (ne décale rien) ; simple fondu à l'ouverture. */
.home-tab__toggle { position: absolute; right: var(--cmp-gutter); top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid var(--cmp-anthracite); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cmp-anthracite); transition: opacity .2s ease; }
.home-tab__toggle .cmp-arrow { width: 18px; height: 18px; }
.home-tab.is-open .home-tab__toggle { opacity: 0; pointer-events: none; }

/* Panneau révélé — transparent à la grille : ses 3 enfants rejoignent les
   colonnes du __inner (titre · sous-services · description · visuel = 4 colonnes égales). */
.home-tab__panel { display: contents; }
.home-tab__sub, .home-tab__text, .home-tab__media { opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.home-tab.is-open .home-tab__sub, .home-tab.is-open .home-tab__text, .home-tab.is-open .home-tab__media { opacity: 1; visibility: visible; }
.home-tab__sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-tab__sub li { display: block; }
.home-tab__sub-item { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--cmp-grey); text-decoration: underline; margin: 0; }
.home-tab__text { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--cmp-grey); min-width: 0; }
.home-tab__media { width: 100%; aspect-ratio: 208 / 151; border-radius: 25px; overflow: hidden; background: linear-gradient(226deg, var(--cmp-primary), var(--cmp-noir)); }
.home-tab__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lien « Voir l'expertise » : visible UNIQUEMENT en accordéon mobile (le tap sur la carte
   y bascule l'ouverture au lieu de naviguer → ce lien donne l'accès à la page). */
.home-tab__go { display: none; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--cmp-font-body); font-weight: 700; font-size: 1rem; color: var(--cmp-primary); text-decoration: underline; }
.home-tab__go .cmp-arrow { width: 22px; height: 9px; }

/* Curseur custom « VOIR » (SVG médiathèque) suivant le curseur sur la section.
   Spécificité renforcée (.home-expertises >) pour battre `.home-expertises > * {position:relative;z-index:2}`
   qui sinon écrasait position:fixed → la pastille restait coincée dans le flux. */
.home-expertises > .home-tabs__cursor { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.home-tabs__cursor img { display: block; width: 83px; height: 83px; }
.home-expertises > .home-tabs__cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (min-width: 901px) { .home-tabs:hover, .home-tabs:hover .home-tab { cursor: none; } }

/* ---- 7. ÉQUIPE ---- */
.home-equipe-transition { position: relative; padding: clamp(80px, 13vw, 190px) 0; overflow: hidden; background: #fff; }
/* Aplat scindé : bloc gauche #FAFAFA, bloc droit blanc (Figma). */
.home-kinetic-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, var(--cmp-gris-aplat) 41.8%, #fff 41.8%); }
/* Barre bleue diagonale en bas à droite (Figma). */
.home-kinetic-accent { position: absolute; right: -90px; bottom: -120px; width: 940px; height: 18px; z-index: 1; background: var(--cmp-primary); transform: rotate(-24deg); transform-origin: bottom right; pointer-events: none; }
/* Libellé vertical « Agence Commpagnie ». */
.home-kinetic-label { position: absolute; z-index: 2; left: clamp(16px, 4vw, 64px); top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; line-height: 1.1; color: var(--cmp-anthracite); white-space: nowrap; }
.home-kinetic-label::before { content: ''; position: absolute; left: 50%; top: -64px; width: 3px; height: 45px; background: var(--cmp-anthracite); transform: translateX(-50%); }

.home-kinetic { position: relative; z-index: 2; font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(2.4rem, 5.6vw, 3.45rem); line-height: 1.2; color: var(--cmp-anthracite); }
.home-kinetic__line { display: flex; gap: clamp(20px, 7vw, 100px); justify-content: center; }
.home-kinetic__pre { font-style: normal; color: var(--cmp-grey); flex: 0 0 auto; min-width: 3.2em; text-align: right; }
.home-kinetic__verb { font-weight: 800; color: var(--cmp-anthracite); flex: 0 0 auto; min-width: 7.6em; text-align: left; white-space: nowrap; }
/* Curseur clignotant pendant la frappe. */
.home-kinetic__verb.is-caret::after { content: ''; display: inline-block; width: 4px; height: .92em; margin-left: 8px; vertical-align: -.08em; background: var(--cmp-primary); animation: cmpCaret .7s steps(1) infinite; }
@keyframes cmpCaret { 50% { opacity: 0; } }
/* Bande blanche en tête (même #fff que la section du dessus) : la photo y flotte puis plonge dans le bleu = effet « à cheval » SANS recouvrir le contenu de la section précédente. */
.home-equipe { position: relative; background: var(--cmp-primary); color: #fff; padding: clamp(40px, 5vw, 64px) 0 110px; overflow: hidden; }
/* Photo cadrée en 1440px de large, débordant le conteneur (1240), centrée sur le viewport. */
.home-equipe__photo { width: min(1440px, calc(100vw - 32px)); max-width: none; margin: 0 auto 64px; margin-left: 50%; transform: translateX(-50%); position: relative; z-index: 2; }
.home-equipe__photo img { display: block; width: 100%; aspect-ratio: 1440/600; object-fit: cover; border-radius: clamp(28px, 3.5vw, 60px); box-shadow: 0 40px 90px rgba(0,0,0,.28); }
/* Fil conducteur blanc animé (dégradé blanc→transparent) : ancré à DROITE, sa queue plonge SOUS la photo (z1 < photo z2). */
.home-equipe__swoosh { position: absolute; z-index: 1; right: 0; top: clamp(240px, 30vw, 430px); width: clamp(340px, 42vw, 600px); height: auto; pointer-events: none; overflow: visible; }
.home-equipe > .home-equipe__swoosh { position: absolute; z-index: 1; } /* bat le calque `.home-equipe > *` (z2) → le fil passe sous la photo */
.home-equipe__swoosh path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.home-equipe.is-draw .home-equipe__swoosh path { animation: cmpSwooshDraw 2.4s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes cmpSwooshDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .home-equipe__swoosh path { stroke-dashoffset: 0; } }
.home-equipe__intro { max-width: 600px; position: relative; z-index: 2; }
.home-equipe .cmp-eyebrow-line, .home-equipe .cmp-eyebrow-line__bar { color: #fff; }
.home-equipe .cmp-eyebrow-line__bar { background: #fff; }
.home-equipe__lead { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.3; color: #fff; margin-bottom: 28px; }
.home-equipe__lead strong { font-weight: 800; }

@media (max-width: 900px) {
	.home-agence__cards { grid-template-columns: 1fr; }
	.home-projets__head { grid-template-columns: 1fr; gap: 24px; }
	.home-intro2__inner .home-intro__text2 { margin-left: 0; }
	.home-clients__grid { grid-template-columns: 1fr; gap: 40px; }
	.home-clients__head { position: static; max-width: none; }
	.home-reviews { flex-direction: column; margin-bottom: -80px; }
	.home-reviews__col--2 { margin-top: 0; }
	.home-logos { padding-top: 130px; }
	/* Mobile : accordéon « intercalaires » — panneau REPLIÉ par défaut, tap = ouvre/ferme
	   (pas de hover au tactile ; la navigation vers la page se fait via « Voir l'expertise »).
	   On restaure l'empilement chevauché que la base aplatissait. */
	.home-tab { min-height: 120px; margin-top: -22px; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 20px rgba(36, 36, 36, .05); }
	.home-tab:first-child { margin-top: 0; box-shadow: none; }
	.home-tab:last-child { border-radius: 22px; }
	.home-tab.is-open { min-height: 0; }
	/* TOUTES les cartes se chevauchent uniformément (comme desktop), Y COMPRIS
	   celle qui suit la carte ouverte : la suivante passe par-dessus le bas de
	   la précédente (bas carré couvert → aucun liseré bas, aucun coin qui dépasse). */
	.home-tab__inner { grid-template-columns: 1fr; align-items: flex-start; gap: 18px; padding: 30px 24px; padding-right: 84px; }
	/* Libellés longs (pages expertise : « SEO : Optimisation… », « Campagnes Meta &… »)
	   ne doivent PAS rester sur une ligne (nowrap) sinon ils débordent sous le bouton
	   rond absolu (chevauchement) et poussent un scroll horizontal. */
	.home-tab__label { white-space: normal; }
	.home-tab__panel { display: none; }
	.home-tab.is-open .home-tab__panel { display: flex; flex-direction: column; gap: 18px; }
	.home-tab__sub, .home-tab__text, .home-tab__media { opacity: 1; visibility: visible; }
	.home-tab__media { width: 100%; aspect-ratio: auto; height: 160px; }
	.home-tab__toggle, .home-tab.is-open .home-tab__toggle { display: inline-flex; opacity: 1; }
	.home-tab.is-open .home-tab__toggle { opacity: 0; }
	.home-tab.is-open .home-tab__go { display: inline-flex; }
	.home-tabs__cursor { display: none; }
	/* Section animée : aplat plein, label/accent masqués, mots empilés. */
	.home-kinetic-bg { background: var(--cmp-blanc); }
	.home-kinetic-label, .home-kinetic-accent { display: none; }
	.home-kinetic__line { justify-content: flex-start; gap: 14px; }
	.home-kinetic__pre { min-width: 0; }
	.home-kinetic__verb { min-width: 0; }
}

/* ---- Fil conducteur (sous le contenu, sur les fonds) ---- */
.cmp-fil { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cmp-fil svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cmp-fil path { stroke-opacity: .85; transition: stroke-dashoffset .12s linear; }

/* Calques : fond de section en ::before (z0) < fil (z1) < contenu (z2) */
.home-hero, .home-intro, .home-agence, .home-projets, .home-clients,
.home-expertises, .home-equipe-transition, .home-equipe, .site-footer__box { position: relative; }
.home-hero, .home-agence, .home-clients, .home-equipe { background: transparent; }
.home-hero::before, .home-agence::before, .home-clients::before, .home-equipe::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.home-hero::before, .home-equipe::before { background: var(--cmp-primary); }
.home-agence::before, .home-clients::before { background: var(--cmp-blanc); }
/* Aplat bleu de l'équipe : démarre 175px sous le haut → bande blanche en tête pour la photo à cheval. */
.home-equipe::before { top: clamp(130px, 16vw, 230px); }
@media (max-width: 900px) { .home-equipe::before { top: 90px; } }
.home-hero > *, .home-intro > *, .home-agence > *, .home-projets > *,
.home-clients > *, .home-expertises > *, .home-equipe-transition > *, .home-equipe > * { position: relative; z-index: 2; }
.site-footer__box { background: transparent; }
.site-footer__box::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--cmp-primary); border-radius: inherit; }
.site-footer__box > * { position: relative; z-index: 2; }
/* Le calque `.home-equipe-transition > *` ci-dessus repasse TOUS les enfants en position:relative
   (même specificité, règle plus tardive) → casse l'aplat scindé + barre + label de la section cinétique.
   On restaure leur positionnement absolu (z-index conservé : bg sous le fil, accent z1, label z2). */
.home-equipe-transition > .home-kinetic-bg { position: absolute; z-index: 0; }
.home-equipe-transition > .home-kinetic-accent { position: absolute; }
.home-equipe-transition > .home-kinetic-label { position: absolute; }

/* ---- Pile épinglée : HERO + INTRO 1 + INTRO 2 ----
   3 panneaux pleine page EMPILÉS en sticky top:0. Chacun reste figé en haut pendant que
   le SUIVANT (fond opaque, z-index supérieur) remonte et le RECOUVRE entièrement :
   le hero se fait recouvrir par l'intro 1, l'intro 1 par l'intro 2, puis l'intro 2 par
   la section AGENCE. Sticky borné au wrapper `.home-stack` → une fois la pile passée,
   le défilement reprend normalement.
   !important : bat les position:relative antérieures (ligne ~21 + bloc calques) ; on garde
   le sticky même en prefers-reduced-motion (ce n'est pas une animation gênante). */
.home-stack { position: relative; }
.home-hero,
.home-intro,
.home-intro2 { position: -webkit-sticky !important; position: sticky !important; top: 0; }
.home-hero { z-index: 1; }
/* Panneaux pile : exactement 100vh → pas de pause « scroll dans le vide ». Chaque panneau
   monte, recouvre le précédent, et le suivant enchaîne aussitôt (aucun temps mort où la
   section reste figée à l'écran). */
.home-intro { z-index: 2; background: var(--cmp-blanc); min-height: 100vh; overflow: hidden; }
.home-intro2 { z-index: 3; background: var(--cmp-blanc); min-height: 100vh; overflow: hidden; }

/* Anciens swooshes désactivés au profit du fil conducteur */
.cmp-vec { display: none !important; }