/* Retouches Advenix (novembre 2026) : chargé après le paquet CSS de chaque page. */

/* Accueil, hero : une phrase par ligne. */
.heros__phrase { display: block; }

/* Accueil, « Ils nous font confiance » : bande de logos qui défilent. */
.defile { background: #1E1E1E; padding: clamp(36px, 4vw, 56px) 0; margin-top: clamp(28px, 4vw, 56px); }
.defile__piste {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.defile__rail { display: flex; width: max-content; animation: defile 48s linear infinite; }
.defile__piste:hover .defile__rail, .defile__piste:focus-within .defile__rail { animation-play-state: paused; }
.defile ul { display: flex; align-items: center; gap: 76px; margin: 0; padding: 0 38px; list-style: none; }
.defile li { flex: none; }
.defile img { display: block; height: 46px; width: auto; max-width: 190px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.defile img.defile__opaque { filter: grayscale(1) invert(1) contrast(1.4); mix-blend-mode: screen; }
.defile img.defile__embleme { height: 70px; }
.defile__legende { margin: 18px 0 0; text-align: center; color: #F5F5F5; font: 600 11px/1 var(--police-texte, "Manrope", system-ui, sans-serif); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__rail { animation-duration: 120s; } }

/* Mobile : titres plus lisibles. */
@media (max-width: 640px) {
  h1, h2 { text-wrap: balance; }
  .heros__manifeste { font-size: clamp(26px, 8vw, 34px); }
  .leviers h2, .film h2 { font-size: clamp(28px, 8.2vw, 34px); }
  .ecran__son { white-space: nowrap; width: auto; max-width: calc(100% - 32px); padding-inline: 22px; }
  .defile { padding: 28px 0; }
  .defile ul { gap: 44px; padding: 0 22px; }
  .defile img { height: 34px; max-width: 140px; }
  .defile img.defile__embleme { height: 52px; }
}

/* Accueil, « Des certifications de pointe » : cartes sombres côte à côte. */
.certifications .certifications__texte { grid-column: 1 / -1; }
.certifications .certifications__texte p:last-child { max-width: 60ch; }
.certifications .certif-cartes {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 14px; list-style: none;
  background: #0B0B0E; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
}
.certif-carte {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  min-height: 190px; padding: 22px 12px 26px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1B1B20 0%, #0E0E11 70%); color: #F5F5F5;
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px; transition: border-color .25s, translate .25s;
}
.certif-carte::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 64%; height: 2px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--rouge, #BC2025), transparent); opacity: .85;
}
.certif-carte:hover { border-color: rgba(255,255,255,.22); translate: 0 -3px; }
.certif-carte__logo { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; margin-bottom: 14px; color: #fff; }
.certif-carte__logo svg { width: 46px; height: 46px; }
.certif-carte__logo--mot svg { width: 34px; height: 34px; }
.certif-carte__logo b { font: 700 30px/1 var(--police-texte, "Manrope", system-ui, sans-serif); letter-spacing: -0.02em; }
.certif-carte strong { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.certif-carte span:last-child { font-size: 17px; font-weight: 600; color: #9A9DA3; }
@media (max-width: 640px) {
  .certifications .certif-cartes { grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 14px; }
  .certif-carte { min-height: 150px; padding: 16px 8px 20px; }
  .certif-carte__logo { height: 46px; margin-bottom: 10px; }
  .certif-carte__logo svg { width: 36px; height: 36px; }
  .certif-carte__logo--mot svg { width: 26px; height: 26px; }
  .certif-carte__logo b { font-size: 22px; }
  .certif-carte strong { font-size: 15px; }
  .certif-carte span:last-child { font-size: 14px; }
}

/* Accueil, « La créativité attire. / La performance confirme. » : une phrase par ligne, sans coupure. */
.fil h2 .fil__ligne { display: block; white-space: nowrap; }
.fil h2 { width: max-content; max-width: none; font-size: clamp(20px, 6.2vw, 52px); }
@media (min-width: 1081px) { .fil h2 { font-size: clamp(34px, 3.1vw, 54px); } }

/* Bandeau rouge du haut : il ne reste que la signature, visible aussi sur mobile. */
@media (max-width: 640px) { .annonce .annonce__lieu { display: inline-flex; } }

/* Campagnes : carrousel qui défile tout seul (pause au survol). */
.campagnes__piste {
  overflow: hidden; margin: 0 calc(-1 * var(--marge));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.campagnes .cartes--defile {
  display: flex; gap: 0; width: max-content; margin: 0; padding: 12px 0; overflow: visible;
  scroll-snap-type: none; animation: defile 70s linear infinite;
}
.campagnes__piste:hover .cartes--defile, .campagnes__piste:focus-within .cartes--defile { animation-play-state: paused; }
.cartes--defile .carte { flex: none; width: clamp(210px, 21vw, 300px); margin-right: 16px; scroll-snap-align: none; }
@media (max-width: 640px) {
  .campagnes .cartes--defile { animation-duration: 55s; }
  .cartes--defile .carte { width: 200px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .campagnes .cartes--defile { animation-duration: 160s; } }

/* Chiffres clés : quatre colonnes séparées par des filets, gros chiffres, « + » rouge. */
.bande-chiffres .chiffres-cles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--filet-nuit); border-bottom: 1px solid var(--filet-nuit);
}
.bande-chiffres .chiffres-cles li { padding: clamp(28px, 3.4vw, 48px) clamp(18px, 2.2vw, 36px); background: none; border: 0; border-radius: 0; }
.bande-chiffres .chiffres-cles li + li { border-left: 1px solid var(--filet-nuit); }
.bande-chiffres .chiffre { display: flex; align-items: flex-start; margin: 0; line-height: .9; }
.bande-chiffres .chiffre__plus { display: inline; margin: .04em .04em 0 0; font-size: clamp(30px, 3vw, 48px); font-weight: 800; color: var(--rouge-clair, #D84A4F); }
.bande-chiffres .chiffre strong { display: inline; font-size: clamp(56px, 6.2vw, 104px); font-weight: 800; letter-spacing: -0.05em; color: #fff; }
.bande-chiffres .chiffre strong::before { content: none; }
.bande-chiffres .chiffre__label { display: block; margin-top: 16px; max-width: 18ch; font-size: clamp(14px, 1.1vw, 17px); font-weight: 600; line-height: 1.35; color: #C9CDD3; }
@media (max-width: 640px) {
  .bande-chiffres .chiffres-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bande-chiffres .chiffres-cles li { padding: 24px 14px; }
  .bande-chiffres .chiffres-cles li:nth-child(3) { border-left: 0; }
  .bande-chiffres .chiffres-cles li:nth-child(n+3) { border-top: 1px solid var(--filet-nuit); }
  .bande-chiffres .chiffre strong { font-size: 52px; }
  .bande-chiffres .chiffre__plus { font-size: 28px; }
  .bande-chiffres .chiffre__label { margin-top: 10px; font-size: 14px; }
}

/* Certifications : carrousel qui défile tout seul dans le cadre noir (pause au survol). */
.certifications .certif-piste {
  grid-column: 1 / -1; margin-top: clamp(28px, 3.5vw, 44px); padding: 14px 0; overflow: hidden;
  background: #0B0B0E; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; position: relative;
}
.certifications .certif-piste::before, .certifications .certif-piste::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(28px, 5vw, 80px); pointer-events: none;
}
.certifications .certif-piste::before { left: 0; background: linear-gradient(to right, #0B0B0E, transparent); }
.certifications .certif-piste::after { right: 0; background: linear-gradient(to left, #0B0B0E, transparent); }
.certifications .certif-cartes--defile {
  display: flex; gap: 0; width: max-content; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  animation: defile 36s linear infinite;
}
.certif-piste:hover .certif-cartes--defile { animation-play-state: paused; }
.certif-cartes--defile .certif-carte { flex: none; width: clamp(240px, 24vw, 340px); margin-right: 14px; }
@media (max-width: 640px) {
  .certifications .certif-piste { padding: 10px 0; border-radius: 14px; }
  .certif-cartes--defile .certif-carte { width: 220px; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .certifications .certif-cartes--defile { animation-duration: 90s; } }

/* Chiffres clés : carrousel qui défile tout seul (pause au survol). */
.bande-chiffres .chiffres-piste {
  overflow: hidden; border-top: 1px solid var(--filet-nuit); border-bottom: 1px solid var(--filet-nuit);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.bande-chiffres .chiffres-cles--defile {
  display: flex; width: max-content; border: 0; animation: defile 40s linear infinite;
}
.chiffres-piste:hover .chiffres-cles--defile { animation-play-state: paused; }
.bande-chiffres .chiffres-cles--defile li,
.bande-chiffres .chiffres-cles--defile li + li { flex: none; width: clamp(250px, 25vw, 360px); border: 0; border-left: 1px solid var(--filet-nuit); }
@media (max-width: 640px) {
  .bande-chiffres .chiffres-cles--defile li,
  .bande-chiffres .chiffres-cles--defile li + li,
  .bande-chiffres .chiffres-cles--defile li:nth-child(3),
  .bande-chiffres .chiffres-cles--defile li:nth-child(n+3) { width: 200px; border: 0; border-left: 1px solid var(--filet-nuit); }
  .bande-chiffres .chiffres-cles--defile { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) { .bande-chiffres .chiffres-cles--defile { animation-duration: 100s; } }
.defile img.defile__couleur { filter: none; opacity: 1; border-radius: 6px; }

/* Pied de page : « Dare to grow. » toujours sur une seule ligne. */
.pied__signature { white-space: nowrap; }
@media (max-width: 1080px) { .pied__signature { max-width: none; font-size: clamp(40px, 13.5vw, 140px); } }

/* Certifications : cartes plus petites. */
.certif-cartes--defile .certif-carte { width: clamp(190px, 16vw, 240px); min-height: 0; padding: 18px 10px 20px; }
.certifications .certif-carte__logo { height: 40px; margin-bottom: 10px; }
.certifications .certif-carte__logo--mot svg { width: 26px; height: 26px; }
.certifications .certif-carte__logo b { font-size: 22px; }
.certifications .certif-carte strong { font-size: 15px; }
.certifications .certif-carte span:last-child { font-size: 13px; }
@media (max-width: 640px) { .certif-cartes--defile .certif-carte { width: 170px; } }

/* Chiffres clés : titre + chiffres plus petits. */
.bande-chiffres .chiffres__titre { margin: 0 0 clamp(20px, 2.6vw, 34px); font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.012em; text-transform: uppercase; color: #fff; }
.bande-chiffres .chiffres__titre em { font-style: normal; color: var(--rouge-clair, #D84A4F); }
.bande-chiffres .chiffres-cles--defile li,
.bande-chiffres .chiffres-cles--defile li + li { width: clamp(210px, 19vw, 280px); padding: clamp(20px, 2.2vw, 30px) clamp(16px, 1.8vw, 26px); }
.bande-chiffres .chiffre strong { font-size: clamp(40px, 4vw, 64px); }
.bande-chiffres .chiffre__plus { font-size: clamp(22px, 2vw, 32px); }
.bande-chiffres .chiffre__label { margin-top: 10px; font-size: clamp(13px, 1vw, 15px); }
@media (max-width: 640px) {
  .bande-chiffres .chiffres-cles--defile li,
  .bande-chiffres .chiffres-cles--defile li + li,
  .bande-chiffres .chiffres-cles--defile li:nth-child(3),
  .bande-chiffres .chiffres-cles--defile li:nth-child(n+3) { width: 170px; padding: 18px 14px; }
  .bande-chiffres .chiffre strong { font-size: 40px; }
  .bande-chiffres .chiffre__plus { font-size: 22px; }
}
.defile__piste, .defile__rail { background: #1E1E1E; }

/* Campagnes : le carrousel se fait aussi défiler à la main (le script prend le relais de l'animation). */
.campagnes__piste--manuel { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.campagnes__piste--manuel::-webkit-scrollbar { display: none; }
.campagnes__piste--manuel .cartes--defile { animation: none; }
.campagnes__piste--glisse { cursor: grabbing; user-select: none; }
.campagnes__piste--glisse .carte { pointer-events: none; }
.carte__voir { font-size: 14px; }

/* Formulaire de contact : champ piège invisible + message d'état après envoi. */
.brief__piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.brief__etat { margin: 14px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.brief__etat:empty { display: none; }
.brief__etat[data-type="ok"] { padding: 14px 16px; border-radius: 8px; background: #E8F6EE; color: #146C3B; }
.brief__etat[data-type="erreur"] { padding: 14px 16px; border-radius: 8px; background: #FDECEC; color: #8F181C; }
.brief__etat a { color: inherit; text-decoration: underline; }
.brief button[disabled] { opacity: .7; cursor: progress; }
.brief input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--noir) 22%, transparent); border-radius: 2px;
  background: #FFFFFF; font: 500 16px/1.4 var(--police-texte); color: var(--noir);
}

/* Haut de page : preuve sous les boutons. */
.heros__preuve { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #C9CDD3; }

/* Formulaire en 3 étapes. Sans JavaScript, tout s'affiche et les boutons d'étape disparaissent. */
.brief__progres { height: 3px; margin: -10px 0 24px; border-radius: 2px; background: var(--gris-clair); overflow: hidden; }
.brief__progres i { display: block; width: 33.34%; height: 100%; background: var(--rouge); transition: width .35s ease; }
.brief:not(.brief--js) .brief__progres, .brief:not(.brief--js) [data-suivant], .brief:not(.brief--js) [data-retour] { display: none; }
.brief--js .brief__etape[hidden] { display: none; }
.brief__etape > label.champ { margin-bottom: 18px; }
.brief__nav { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; }
.brief__nav .bouton { flex: 1; }
.brief__retour {
  flex: none; height: 56px; padding: 0 22px; border: var(--trait); border-radius: 3px; background: transparent;
  font: 600 15px/1 var(--police-texte); color: var(--noir); cursor: pointer;
}
.brief__retour:hover { border-color: var(--noir); }
.brief input[type="tel"]:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--rouge); }

/* Barre de contact fixe en bas d'écran, sur mobile. */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(20, 20, 20, .95);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(245, 245, 245, .12);
    transition: transform .3s ease;
  }
  .barre-mobile a {
    display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 3px;
    background: #2B2B2B; color: var(--blanc); font: 700 14px/1 var(--police-texte); text-decoration: none;
  }
  .barre-mobile svg { width: 18px; height: 18px; fill: currentColor; }
  .barre-mobile .barre-mobile__wa { background: #1A8D48; }
  .barre-mobile .barre-mobile__audit { background: var(--rouge); }
  .barre-mobile--cachee, body:has(.cookies.est-visible) .barre-mobile { transform: translateY(110%); }
  html.a-barre-mobile body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Page /merci/ */
.merci { background: var(--nuit); color: var(--blanc); padding: clamp(64px, 9vw, 130px) var(--marge) clamp(72px, 9vw, 120px); }
.merci__cadre { max-width: 980px; margin: 0 auto; }
.merci h1 { margin: 0 0 22px; font-size: clamp(38px, 5.6vw, 78px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.merci h1 em { font-style: normal; color: var(--rouge-clair); }
.merci .amorce::before { background: var(--rouge-clair); }
.merci__chapo { max-width: 56ch; margin: 0 0 44px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: #C9CDD3; }
.merci__suite { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 44px; padding: 0; }
.merci__suite li { padding: 22px; border: 1px solid rgba(245, 245, 245, .14); border-radius: 3px; font-size: 15px; line-height: 1.5; color: #C9CDD3; }
.merci__suite span { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--rouge-clair); }
.merci__suite strong { display: block; margin-bottom: 6px; font-size: 18px; color: var(--blanc); }
.merci__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.merci__actions .bouton { min-width: min(100%, 360px); }
@media (max-width: 760px) {
  .merci__suite { grid-template-columns: 1fr; }
  .merci__actions .bouton { width: 100%; }
}
.brief__titre .brief__compteur { white-space: nowrap; }
@media (max-width: 1080px) { .heros__preuve { margin: 0; } }

/* Boutons arrondis (formes courbes de l'identité Advenix). */
.bouton, .brief .bouton, .brief__retour, .barre-mobile a { border-radius: 999px; }
.bouton { padding-left: 26px; padding-right: 22px; }
.brief input, .brief textarea { border-radius: 12px; }
.choix label { border-radius: 999px; }

/* Moins d'espace vide entre les sections. */
.heros--sombre .heros__cadre { min-height: 0; padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(40px, 7vh, 80px); }
.confiance__cadre { padding-top: clamp(44px, 5vw, 72px); padding-bottom: 28px; }
.bande-chiffres__cadre { padding-bottom: clamp(36px, 4.5vw, 64px); }
.certifications__cadre { padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); }
.campagnes__cadre, .film__cadre { padding-top: clamp(48px, 5.5vw, 84px); padding-bottom: clamp(48px, 5.5vw, 84px); }
.fil__cadre, .leviers__cadre, .agence__cadre, .faq__cadre, .contact__cadre { padding-top: clamp(52px, 6vw, 92px); padding-bottom: clamp(52px, 6vw, 92px); }
.pied__cadre { padding-top: clamp(44px, 5vw, 72px); }
.brief { border-radius: 20px; }


/* Notre méthode : cinq colonnes étroites qui défilent horizontalement.
   La section tient l'écran pendant que la page défile : les colonnes glissent de gauche à droite, décalées en
   hauteur, pendant que la barre du bas indique l'avancée. Sur téléphone, ou si le visiteur limite les animations,
   les colonnes se font défiler au doigt. Script : methode.js */
.methode { --bord: max(var(--marge), calc((100% - var(--largeur)) / 2)); position: relative; background: var(--nuit); color: var(--blanc); }
.methode__scene { padding: clamp(36px, 4vw, 56px) 0 clamp(36px, 4vw, 56px); }
.methode__cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); box-sizing: content-box; }
.methode__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px 48px; align-items: end; margin-bottom: clamp(20px, 2.6vw, 32px); }
.methode__tete .amorce { margin-bottom: 14px; }
.methode__tete h2 { margin: 0; font-size: clamp(28px, 3vw, 46px); line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; }
.methode .amorce::before { background: var(--rouge-clair); }
.methode h2 em { color: var(--rouge-clair); }
.methode__chapo p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: #C9CDD3; }
.methode__fleches { display: flex; align-items: center; gap: 14px; }
.methode__fleches button {
  display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(245, 245, 245, .25); border-radius: 50%;
  background: transparent; color: var(--blanc); cursor: pointer; transition: background .25s, border-color .25s, opacity .25s;
}
.methode__fleches button:hover { background: var(--rouge); border-color: var(--rouge); }
.methode__fleches button[disabled] { opacity: .3; pointer-events: none; }
.methode__fleches svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.methode__compteur { min-width: 64px; text-align: center; font-size: 14px; color: rgba(245, 245, 245, .6); }
.methode__compteur strong { color: var(--blanc); font-size: 18px; }

/* Rail : cinq colonnes côte à côte, le rail glisse latéralement. */
.methode__cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-width: none; overscroll-behavior-x: contain; }
.methode__cartes::-webkit-scrollbar { display: none; }
.methode__piste { display: flex; align-items: flex-start; gap: 18px; padding: 4px var(--bord) 8px; }

/* Colonne : étape en haut, photo en bas. Assez étroite pour que trois tiennent côte à côte. */
.pilier {
  position: relative; flex: none; scroll-snap-align: start;
  width: clamp(230px, 30.5vw, 430px); height: clamp(390px, 58vh, 560px);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 18px; overflow: hidden; background: var(--blanc); color: var(--noir);
}
.pilier__texte { display: flex; flex-direction: column; min-width: 0; padding: 24px 22px 18px; }
.pilier__num { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); }
.pilier__num span { opacity: .6; }
.pilier h3 { margin: 0 0 8px; font-size: clamp(21px, 1.7vw, 28px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
.pilier__accroche { margin: 0 0 10px; font-size: clamp(14px, 1.05vw, 16px); font-weight: 700; line-height: 1.35; }
.pilier__detail {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--gris);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.pilier__livrables { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.pilier__livrables li { padding: 5px 10px; border-radius: 999px; background: var(--gris-clair); font-size: 11.5px; font-weight: 600; }
.pilier__visuel { position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--noir); }
.pilier__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .6s ease; }
.pilier:hover .pilier__visuel img { transform: scale(1.1); }
.pilier__visuel b {
  position: absolute; right: 12px; bottom: -0.2em; font-size: clamp(64px, 5.2vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 2px #F5F5F5; mix-blend-mode: difference;
}
.pilier__badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: var(--turquoise); color: var(--nuit); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.pilier:nth-child(2), .pilier:nth-child(5) { background: var(--rouge); color: var(--blanc); }
.pilier:nth-child(3) { background: #262626; color: var(--blanc); }
.pilier:nth-child(2) .pilier__num, .pilier:nth-child(5) .pilier__num { color: var(--blanc); }
.pilier:nth-child(3) .pilier__num { color: var(--rouge-clair); }
.pilier:nth-child(2) .pilier__detail, .pilier:nth-child(5) .pilier__detail { color: rgba(245, 245, 245, .88); }
.pilier:nth-child(3) .pilier__detail { color: #C9CDD3; }
.pilier:nth-child(2) .pilier__livrables li, .pilier:nth-child(5) .pilier__livrables li { background: rgba(245, 245, 245, .16); }
.pilier:nth-child(3) .pilier__livrables li { background: rgba(245, 245, 245, .1); }
.pilier:nth-child(5) { background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-fonce) 100%); }

.methode__bas {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(18px, 2.4vw, 28px);
  box-sizing: border-box; width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge));
}
.methode__progres { flex: 1 1 auto; height: 2px; border-radius: 2px; background: rgba(245, 245, 245, .16); overflow: hidden; }
.methode__progres i { display: block; width: 0; height: 100%; background: var(--rouge-clair); }
.methode__bas .bouton { height: 52px; gap: 18px; }

/* Mode épinglé : la section tient l'écran, les colonnes glissent latéralement au rythme du défilement. */
.methode--epingle .methode__scene {
  position: sticky; top: var(--entete, 80px); height: calc(100vh - var(--entete, 80px)); box-sizing: border-box;
  display: flex; flex-direction: column; padding-top: clamp(20px, 2.6vw, 34px); padding-bottom: clamp(16px, 2vw, 26px);
}
.methode--epingle .methode__tete { flex: none; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; margin-bottom: 18px; }
.methode--epingle .methode__chapo p { display: none; }
.methode--epingle .methode__tete h2 { font-size: clamp(23px, 2.2vw, 34px); }
.methode--epingle .methode__cartes {
  flex: 1 1 auto; min-height: 0; overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(20px, 2.8vw, 48px), #000 calc(100% - clamp(20px, 2.8vw, 48px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(20px, 2.8vw, 48px), #000 calc(100% - clamp(20px, 2.8vw, 48px)), transparent 100%);
}
.methode--epingle .methode__piste { width: max-content; height: 100%; padding-left: var(--bord); padding-right: var(--bord); will-change: transform; }
.methode--epingle .pilier { height: calc(100% - 54px); }
.methode--epingle .pilier:nth-child(even) { margin-top: 54px; }
.methode--epingle .methode__bas { flex: none; }

@media (max-width: 1080px) {
  .methode__tete { grid-template-columns: 1fr; }
  .methode__chapo p { display: none; }
  .methode:not(.methode--epingle) .pilier { width: min(78vw, 620px); }
  .pilier__detail { font-size: 14px; line-height: 1.55; -webkit-line-clamp: 6; }
}
@media (min-width: 761px) and (max-height: 780px) {
  .methode__tete h2 { font-size: clamp(22px, 2.2vw, 30px); }
  .methode--epingle .methode__scene { padding-top: 16px; padding-bottom: 14px; }
  .methode--epingle .methode__tete { margin-bottom: 12px; }
  .methode--epingle .methode__bas { margin-top: 14px; }
  .pilier__texte { padding: 18px 18px 14px; }
  .pilier__detail { font-size: 13px; -webkit-line-clamp: 4; }
  .methode__bas .bouton { height: 46px; }
}
@media (max-width: 760px) {
  .methode__tete { grid-template-columns: 1fr; }
  .pilier { width: 80vw; height: auto; grid-template-rows: auto 170px; }
  .pilier__visuel b { font-size: 80px; }
  .pilier__livrables { margin-top: 4px; }
  .methode__bas .bouton { width: 100%; justify-content: space-between; }
  .methode__progres { flex-basis: 100%; }
}

/* Menu : panneau flottant en verre (téléphone) et menu déroulant des expertises (ordinateur). */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--plein { fill: currentColor; stroke: none; }
@media (max-width: 1080px) {
  .menu {
    position: fixed; inset: auto; top: 76px; right: 12px; left: auto; bottom: auto; z-index: 120; display: block;
    width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 92px); overflow-y: auto; box-sizing: border-box;
    padding: 12px; border-radius: 26px; color: var(--blanc);
    background: linear-gradient(160deg, rgba(48, 48, 48, .78), rgba(20, 20, 20, .86));
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    clip-path: none; visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.96); transform-origin: top right;
    transition: opacity .28s ease, transform .4s cubic-bezier(.2, .9, .25, 1), visibility 0s .4s;
  }
  .menu--ouvert { clip-path: none; visibility: visible; opacity: 1; transform: none; transition: opacity .28s ease, transform .4s cubic-bezier(.2, .9, .25, 1), visibility 0s; }
  html.menu-ouvert body::after { content: ""; position: fixed; inset: 0; z-index: 95; background: rgba(10, 10, 10, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .menu__liens { display: grid; gap: 2px; padding: 4px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu__liens li { border: 0; }
  .menu__liens a::before { content: none; }
  .menu__liens > li > a, .menu__ouvrir {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: 0; border-radius: 14px; background: transparent;
    color: rgba(245, 245, 245, .82); font: 600 16px/1.2 var(--police-texte); letter-spacing: -0.01em; text-align: left; cursor: pointer;
    transition: background .2s, color .2s;
  }
  .menu__liens > li > a:hover, .menu__ouvrir:hover, .menu__liens > li > a[aria-current="page"], .menu__ouvrir[aria-expanded="true"] { background: rgba(255, 255, 255, .09); color: var(--blanc); }
  .menu__liens > li > a[aria-current="page"] .ico { color: var(--rouge-clair); }
  .menu__chevron { margin-left: auto; transition: transform .3s ease; }
  .menu__ouvrir[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }
  .menu__sous { display: grid; grid-template-rows: 0fr; margin: 0; padding: 0 0 0 26px; list-style: none; overflow: hidden; transition: grid-template-rows .35s ease, padding .35s ease; }
  .menu__sous > li { min-height: 0; }
  .menu__ouvrir[aria-expanded="true"] + .menu__sous { padding: 4px 0 8px 26px; }
  .menu__sous { display: block; max-height: 0; }
  .menu__ouvrir[aria-expanded="true"] + .menu__sous { max-height: 480px; transition: max-height .4s ease, padding .3s ease; }
  .menu__sous a {
    position: relative; display: block; padding: 9px 12px 9px 22px; border-radius: 10px; color: rgba(245, 245, 245, .66);
    font: 500 14.5px/1.3 var(--police-texte); text-decoration: none;
  }
  .menu__sous a::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: rgba(245, 245, 245, .35); }
  .menu__sous a:hover, .menu__sous a[aria-current="page"] { background: rgba(255, 255, 255, .07); color: var(--blanc); }
  .menu__sous a[aria-current="page"]::before { background: var(--rouge-clair); }
  .menu__bas { display: grid; gap: 10px; padding: 12px 2px 2px; }
  .menu__bas .bouton { height: 52px; background: var(--rouge); color: var(--blanc); }
  .menu__bas .bouton:hover { background: var(--rouge-fonce); }
  .menu__directs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .menu__directs a {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .08);
    color: var(--blanc); font: 700 14px/1 var(--police-texte); text-decoration: none;
  }
  .menu__directs a:first-child .ico { color: #3DDC84; }
}

/* Ordinateur : survol des liens en pastille + menu déroulant des expertises. */
@media (min-width: 1081px) {
  .en-tete__nav a { padding: 8px 14px; margin: 0 -14px; border-radius: 999px; transition: background .2s, color .2s; }
  .en-tete__nav a::after { display: none; }
  .en-tete__nav > ul > li > a:hover, .en-tete__nav > ul > li > a[aria-current="page"] { background: rgba(30, 30, 30, .07); }
  .en-tete__nav ul { gap: clamp(22px, 2.6vw, 40px); }
  .en-tete__groupe { position: relative; }
  .en-tete__groupe > a::after { content: ""; display: inline-block !important; position: static; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: translateY(-3px) rotate(45deg); background: none; }
  .en-tete__deroulant {
    position: absolute; top: calc(100% + 14px); left: -28px; z-index: 130; width: 560px; padding: 18px; border-radius: 24px; color: var(--blanc);
    background: linear-gradient(160deg, rgba(48, 48, 48, .86), rgba(20, 20, 20, .92));
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s ease, visibility 0s .3s;
  }
  .en-tete__deroulant::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .en-tete__groupe:hover .en-tete__deroulant, .en-tete__groupe:focus-within .en-tete__deroulant { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .en-tete__deroulant p { margin: 2px 10px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge-clair); }
  .en-tete__deroulant ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px !important; }
  .en-tete__deroulant ul a {
    position: relative; margin: 0; padding: 11px 12px 11px 26px; border-radius: 12px; color: rgba(245, 245, 245, .8); font-size: 14.5px; font-weight: 600;
  }
  .en-tete__deroulant ul a::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(245, 245, 245, .3); transition: background .2s; }
  .en-tete__deroulant ul a:hover { background: rgba(255, 255, 255, .08); color: var(--blanc); }
  .en-tete__deroulant ul a:hover::before { background: var(--rouge-clair); }
  .en-tete__deroulant .en-tete__toutes { display: inline-block; margin: 10px 0 0; padding: 10px 12px; color: var(--blanc); font-size: 14px; font-weight: 700; }
  .en-tete__deroulant .en-tete__toutes:hover { background: rgba(255, 255, 255, .08); }
}
.menu__sous a::before { translate: none; }
html.menu-ouvert .barre-mobile { display: none; }

/* ===== Style inspiré du modèle « agence digitale » (couleurs et typographies Advenix conservées) ===== */

/* Haut de page clair : texte à gauche, collage de campagnes à droite, macaron tournant. */
.heros--collage { background: var(--fond); color: var(--noir); }
.heros--collage .heros__metier, .heros--collage .heros__texte, .heros--collage .heros__preuve { color: var(--gris); }
.heros--collage .heros__promesse em { color: var(--rouge); }
.heros--collage .lien-trait { color: var(--noir); }
.heros--collage .lien-trait:hover { color: var(--rouge); }
.heros--collage .heros__trajet { background: var(--rouge); }
.heros--collage .heros__cadre { min-height: 0; }
.heros__collage { position: relative; }
.collage__photo { position: absolute; margin: 0; overflow: hidden; background: var(--gris-clair); box-shadow: 0 24px 50px rgba(30, 30, 30, .14); }
.collage__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .6s ease; }
.collage__photo:hover img { filter: none; transform: scale(1.04); }
.collage__photo--a { left: 0; top: 11%; width: 47%; height: 76%; border-radius: 140px 28px 28px 28px; }
.collage__photo--b { right: 0; top: 0; width: 49%; height: 47%; border-radius: 28px 140px 28px 28px; }
.collage__photo--c { right: 0; bottom: 0; width: 49%; height: 49%; border-radius: 28px 28px 140px 28px; }
.macaron { position: absolute; z-index: 2; left: 33%; bottom: 3%; width: 128px; height: 128px; border-radius: 50%; background: var(--noir); color: var(--blanc); box-shadow: 0 14px 30px rgba(30, 30, 30, .25); }
.macaron__texte { position: absolute; inset: 0; width: 100%; height: 100%; animation: macaron-tourne 16s linear infinite; }
.macaron__texte text { fill: currentColor; font: 700 14.5px var(--police-texte); letter-spacing: 2.4px; }
.macaron__centre { position: absolute; inset: 34%; display: grid; place-items: center; border-radius: 50%; background: var(--rouge); transition: transform .3s ease, background .3s; }
.macaron:hover .macaron__centre { transform: rotate(45deg); background: var(--rouge-fonce); }
.macaron__centre svg { width: 40%; height: 40%; fill: none; stroke: var(--blanc); stroke-width: 1.8; stroke-linecap: round; }
@keyframes macaron-tourne { to { transform: rotate(360deg); } }
.collage__eclat { position: absolute; z-index: 2; fill: var(--rouge); animation: eclat-pulse 3.2s ease-in-out infinite; }
.collage__eclat--1 { right: -2%; bottom: 44%; width: 42px; height: 42px; }
.collage__eclat--2 { right: 7%; bottom: 36%; width: 20px; height: 20px; animation-delay: 1.1s; }
@keyframes eclat-pulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.75) rotate(30deg); } }
@media (min-width: 1081px) {
  .heros--collage .heros__cadre { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); }
  .heros--collage .heros__titre { grid-column: 1; grid-row: 1; }
  .heros--collage .heros__corps { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; row-gap: 24px; }
  .heros--collage .heros__actions { flex-direction: row; align-items: center; gap: 14px 28px; }
  .heros--collage .heros__actions .bouton { width: auto; gap: 18px; }
  .heros--collage .heros__manifeste { font-size: clamp(40px, 4.4vw, 70px); }
  .heros__collage { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-height: 520px; }
}
@media (max-width: 1080px) {
  .heros__collage { height: clamp(320px, 92vw, 460px); margin-top: 8px; }
  .macaron { width: 104px; height: 104px; }
  .macaron__texte text { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .macaron__texte, .collage__eclat { animation: none; } }

/* Étiquettes de section : pastille double (rond rouge + demi-lune), comme dans le modèle. */
.amorce::before {
  width: 26px !important; height: 12px !important; clip-path: none !important; border-radius: 0;
  background: radial-gradient(circle at 6px 6px, var(--rouge) 5.5px, transparent 6px), radial-gradient(circle at 6px 6px, currentColor 5.5px, transparent 6px) 13px 0 / 13px 12px no-repeat !important;
  -webkit-mask: none;
}
.heros__metier::before {
  width: 26px !important; height: 12px !important; margin-top: .3em !important; clip-path: none !important;
  background: radial-gradient(circle at 6px 6px, var(--rouge) 5.5px, transparent 6px), radial-gradient(circle at 6px 6px, var(--noir) 5.5px, transparent 6px) 13px 0 / 13px 12px no-repeat !important;
}

/* Photos et cartes plus arrondies. */
.carte, .carte img, .carte video, .certif-carte, .ecran, .faq__fil, .agence img, .fil img { border-radius: 22px; }
.carte { overflow: hidden; }

/* Bande hachurée en haut des sections sombres. */
.methode { position: relative; }
.methode::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: repeating-linear-gradient(135deg, rgba(245, 245, 245, .08) 0 2px, transparent 2px 10px); pointer-events: none; z-index: 1; }
.bande-chiffres { position: relative; }
.bande-chiffres::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: repeating-linear-gradient(135deg, rgba(245, 245, 245, .08) 0 2px, transparent 2px 10px); pointer-events: none; z-index: 1; }
@media (max-width: 1080px) { .heros__collage { grid-column: 1 / -1; width: 100%; max-width: 520px; } }
.heros--collage .heros__promesse, .heros--collage .heros__promesse em { color: var(--rouge); }

/* Créativité et performance : tableau de bord « bento » rouge et noir (remplace le téléphone 3D). Script : bento.js */
.fil { background: radial-gradient(60% 50% at 75% 20%, rgba(188, 32, 37, .28), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(188, 32, 37, .14), transparent 70%), var(--nuit); }
.fil__cadre { align-items: center; }
.bento { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 14px; }
.tuile {
  position: relative; margin: 0; padding: 18px 20px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tuile:hover { border-color: rgba(216, 74, 79, .55); transform: translateY(-3px); box-shadow: 0 18px 50px rgba(188, 32, 37, .25); }
.tuile__label { margin: 0; font-size: 13.5px; font-weight: 600; color: rgba(245, 245, 245, .65); }
.tuile__chiffre { margin: 6px 0 0; font-size: clamp(30px, 2.7vw, 42px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--blanc); }
.tuile__note { margin: 6px 0 0; font-size: 12.5px; color: #3DDC84; }
.tuile__ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tuile__ico svg { width: 18px; height: 18px; fill: none; stroke: var(--rouge-clair); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tuile--video { grid-column: 1 / 3; grid-row: 1 / 5; padding: 0; background: var(--noir); }
.tuile--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .8)); }
.tuile--video figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; font-size: 13.5px; color: rgba(245, 245, 245, .75); }
.tuile--video figcaption strong { display: block; font-size: 20px; color: var(--blanc); }
.tuile__direct { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 12px; font-weight: 700; color: var(--blanc); }
.tuile__direct i { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge-clair); animation: direct 1.4s ease-in-out infinite; }
@keyframes direct { 50% { opacity: .3; } }
.tuile--kpi { grid-row: span 2; grid-column: span 2; }
.tuile--rouge { background: linear-gradient(160deg, var(--rouge) 0%, var(--rouge-fonce) 100%); border-color: transparent; }
.tuile--rouge .tuile__label { color: rgba(245, 245, 245, .85); }
.tuile--rouge .tuile__note { color: var(--blanc); }
.tuile--rouge .tuile__ico { background: rgba(255, 255, 255, .18); }
.tuile--rouge .tuile__ico svg { stroke: var(--blanc); }
.tuile--courbe { grid-column: 3 / 7; grid-row: 3 / 5; display: flex; flex-direction: column; }
.tuile__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tuile__pastille { padding: 4px 10px; border-radius: 999px; background: rgba(61, 220, 132, .12); font-size: 12px; font-weight: 700; color: #3DDC84; }
.courbe { flex: 1; width: 100%; min-height: 0; margin-top: 8px; }
.courbe__ligne { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.3, .7, .2, 1) .2s; }
.courbe__aire { opacity: 0; transition: opacity 1.2s ease 1s; }
.courbe__axe { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(245, 245, 245, .45); }
.tuile--canaux { grid-column: 1 / 4; grid-row: 5 / 7; }
.tuile--canaux ul { display: grid; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }
.tuile--canaux li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; }
.tuile--canaux i { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.tuile--canaux i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--rouge-fonce), var(--rouge-clair)); transition: width 1.4s cubic-bezier(.3, .7, .2, 1); }
.tuile--anneau { grid-column: 4 / 7; grid-row: 5 / 7; display: flex; align-items: center; gap: 20px; }
.anneau { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 12; }
.anneau .anneau__plein { stroke: var(--rouge-clair); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.3, .7, .2, 1) .3s; }
.bento__note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: rgba(245, 245, 245, .45); }
.bento.est-visible .courbe__ligne { stroke-dashoffset: 0; }
.bento.est-visible .courbe__aire { opacity: 1; }
.bento.est-visible .tuile--canaux i::after { width: var(--l); }
.bento.est-visible .anneau__plein { stroke-dashoffset: 28; }
@media (max-width: 1080px) {
  .bento { grid-column: 1 / -1; margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tuile--video { grid-column: 1 / -1; grid-row: auto; height: 300px; }
  .tuile--kpi { grid-row: auto; grid-column: span 1; }
  .tuile--courbe { grid-column: 1 / -1; grid-row: auto; height: 220px; }
  .tuile--canaux, .tuile--anneau { grid-column: 1 / -1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .courbe__ligne, .courbe__aire, .tuile--canaux i::after, .anneau__plein, .tuile { transition: none; }
}

/* Certifications : les 6 partenaires remplissent tout le rectangle (plus de défilement). */
.certif-grille { margin-top: clamp(24px, 3vw, 36px); padding: clamp(12px, 1.4vw, 18px); border-radius: 26px; background: #0B0B0E; }
.certif-cartes--grille { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; margin: 0 !important; padding: 0 !important; background: none !important; animation: none !important; width: auto !important; }
.certif-cartes--grille .certif-carte { width: auto; margin: 0; min-height: 170px; border-radius: 20px; }
@media (max-width: 760px) { .certif-cartes--grille { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .certif-cartes--grille .certif-carte { min-height: 140px; } }
/* Expertises : huit leviers (ajout de SEO, GEO & AEO). */
.console { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* « Dare to grow. » en majuscules, aligné à gauche avec les deux lignes du dessus. */
.heros--collage .heros__promesse { display: block; text-transform: uppercase; margin-left: 0; padding-left: 0; text-indent: 0; }
/* Créativité et performance : le titre ne passe plus sous le tableau de bord. */
@media (min-width: 1081px) { .fil .fil__texte { grid-column: 1 / span 5; } .fil .bento { grid-column: 7 / -1; } .fil h2 { font-size: clamp(30px, 2.9vw, 44px); } .fil h2 .fil__ligne { white-space: normal; } }
/* Certifications : la grille occupe toute la largeur du cadre. */
.certifications .certif-grille { grid-column: 1 / -1; }

/* Créativité et performance, version 2 : tableau créatif sans vidéo ni chiffres. */
.tuile__puce { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: rgba(245, 245, 245, .85); }
.tuile__puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge-clair); }
.tuile__puce--clair { background: rgba(255, 255, 255, .18); color: var(--blanc); }
.tuile__puce--clair::before { background: var(--blanc); }
.bento--v2 .tuile--visuel { grid-column: 1 / 3; grid-row: 1 / 7; padding: 0; background: var(--noir); }
.tuile--visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.bento.est-visible .tuile--visuel img { transform: scale(1); }
.tuile--visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); }
.tuile--visuel figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 10px; justify-items: start; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--blanc); }
.bento--v2 .tuile--idee { grid-column: 3 / 5; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(160deg, var(--rouge) 0%, var(--rouge-fonce) 100%); border-color: transparent; }
.tuile__grand { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; color: var(--blanc); }
.tuile__eclat { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; fill: var(--blanc); animation: eclat-pulse 3.2s ease-in-out infinite; }
.bento--v2 .tuile--ab { grid-column: 5 / 7; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 10px; }
.ab { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab__variante { position: relative; margin: 0; overflow: hidden; border-radius: 12px; opacity: .55; filter: grayscale(1); transition: opacity .6s ease 1s, filter .6s ease 1s, box-shadow .6s ease 1s; }
.ab__variante img { width: 100%; height: 100%; object-fit: cover; }
.ab__variante b { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .7); font-size: 11px; color: var(--blanc); }
.ab__variante span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 0; border-radius: 999px; background: var(--rouge); font-size: 10.5px; font-weight: 800; text-align: center; color: var(--blanc); opacity: 0; transition: opacity .4s ease 1.6s; }
.bento.est-visible .ab__variante--gagnante { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--rouge-clair); }
.bento.est-visible .ab__variante--gagnante span { opacity: 1; }
.bento--v2 .tuile--courbe { grid-column: 3 / 7; grid-row: 3 / 5; }
.courbe__point { fill: var(--rouge-clair); opacity: 0; transition: opacity .4s ease 2s; }
.bento.est-visible .courbe__point { opacity: 1; animation: direct 1.4s ease-in-out 2.4s infinite; }
.bento--v2 .tuile--canaux { grid-column: 3 / 5; grid-row: 5 / 7; display: flex; flex-direction: column; justify-content: space-between; }
.canaux { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.canaux__rail { display: flex; gap: 8px; width: max-content; animation: defile 16s linear infinite; }
.canaux__rail span { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.canaux__rail span:nth-child(3n+1) { border-color: rgba(216, 74, 79, .6); color: #F3B4B6; }
.bento--v2 .tuile--boucle { grid-column: 5 / 7; grid-row: 5 / 7; display: flex; align-items: center; gap: 16px; }
.boucle { position: relative; flex: none; width: 82px; height: 82px; }
.boucle svg { width: 100%; height: 100%; animation: macaron-tourne 6s linear infinite; }
.boucle circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.boucle .boucle__arc { stroke: var(--rouge-clair); stroke-linecap: round; stroke-dasharray: 34 66; }
.boucle span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--blanc); }
.tuile__texte { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: rgba(245, 245, 245, .75); }
@media (max-width: 1080px) {
  .bento--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento--v2 .tuile--visuel { grid-column: 1 / -1; grid-row: auto; height: 320px; }
  .bento--v2 .tuile--idee, .bento--v2 .tuile--ab { grid-column: span 1; grid-row: auto; min-height: 190px; }
  .bento--v2 .tuile--courbe, .bento--v2 .tuile--canaux, .bento--v2 .tuile--boucle { grid-column: 1 / -1; grid-row: auto; }
  .bento--v2 .tuile--courbe { height: 210px; }
  .bento--v2 .tuile--canaux { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .canaux__rail, .boucle svg, .tuile__eclat { animation: none; } }

/* Créativité et performance, version 3 : bandeau large et compact (texte, engagements, visuel), biais rouges à l'angle du logo. */
.fil { background: var(--fond); color: var(--noir); }
.fil__cadre { display: block; max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto; padding: clamp(36px, 4vw, 56px) var(--marge) !important; }
.bandeau {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.1fr); align-items: stretch; overflow: hidden;
  min-height: 330px; border-radius: 26px; background: radial-gradient(60% 90% at 10% 0%, rgba(188, 32, 37, .22), transparent 60%), #0B0B0E; color: var(--blanc);
}
.bandeau__biais { position: absolute; z-index: 2; width: 220px; height: 34px; background: linear-gradient(90deg, var(--rouge-fonce), var(--rouge)); transform: rotate(-37.92deg); pointer-events: none; }
.bandeau__biais::after { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 12px; background: var(--rouge); opacity: .6; }
.bandeau__biais--haut { left: -86px; top: 20px; }
.bandeau__biais--bas { right: -70px; bottom: 26px; }
.bandeau__texte { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px); }
.bandeau__texte .amorce { margin-bottom: 12px; color: var(--rouge-clair); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.bandeau__texte h2 { margin: 0 0 12px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; }
.bandeau__texte h2 em { display: block; font-style: normal; color: var(--rouge-clair); }
.bandeau__texte p:not(.amorce) { margin: 0 0 20px; max-width: 44ch; font-size: 14.5px; line-height: 1.55; color: #C9CDD3; }
.bandeau__texte .bouton { height: 48px; gap: 16px; }
.bandeau__engagements { position: relative; z-index: 3; display: grid; align-content: center; gap: 18px; margin: 26px 0; padding: 0 clamp(20px, 2.6vw, 40px); list-style: none; border-left: 1px solid rgba(255, 255, 255, .12); border-right: 1px solid rgba(255, 255, 255, .12); }
.bandeau__engagements li { display: flex; align-items: center; gap: 14px; }
.engag__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(188, 32, 37, .18); }
.engag__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--rouge-clair); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bandeau__engagements strong { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.bandeau__engagements span { display: block; font-size: 13px; color: rgba(245, 245, 245, .6); }
.bandeau__visuel { position: relative; margin: 0; min-height: 260px; }
.bandeau__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau__visuel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0B0B0E 0%, rgba(11, 11, 14, .55) 35%, rgba(11, 11, 14, .1) 100%); }
.bandeau__visuel figcaption { position: absolute; z-index: 2; left: 8%; top: 50%; transform: translateY(-50%) rotate(-8deg); display: grid; font-family: var(--police-titre); font-style: italic; font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.02em; color: var(--blanc); text-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.bandeau__visuel figcaption svg { width: 85%; height: 22px; margin-top: 4px; fill: none; stroke: var(--rouge); stroke-width: 6; stroke-linecap: round; }
@media (max-width: 1080px) {
  .bandeau { grid-template-columns: 1fr; }
  .bandeau__engagements { margin: 0 24px; padding: 22px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .bandeau__visuel { min-height: 220px; }
}
@media (max-width: 560px) { .bandeau__engagements { grid-template-columns: 1fr; } }
.bandeau__texte h2 { font-size: clamp(22px, 2vw, 31px); }

/* Sliders horizontaux réutilisables (data-glisse). Script : glisse.js */
[data-glisse] {
  display: flex !important; flex-wrap: nowrap !important; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px; scrollbar-width: none; padding-bottom: 6px; cursor: grab; grid-template-columns: none !important;
}
[data-glisse]::-webkit-scrollbar { display: none; }
[data-glisse] > * { flex: 0 0 var(--carte, clamp(260px, 28vw, 360px)); scroll-snap-align: start; min-width: 0; }
.glisse--tenu { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.glisse--tenu a, .glisse--tenu img { pointer-events: none; }
.glisse__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.glisse__nav[hidden] { display: none; }
.glisse__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; opacity: .8; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.glisse__btn:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); opacity: 1; }
.glisse__btn[disabled] { opacity: .25; pointer-events: none; }
.glisse__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Page Expertises : les 8 expertises en slider de cartes (le cadran rotatif est retiré). */
.expertises__cote, .expertises__mobile { display: none !important; }
.expertises__flux { grid-column: 1 / -1 !important; }
.expertises__tete { min-height: 0 !important; padding: clamp(28px, 4vw, 56px) 0 28px !important; }
.expertises .sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.expertises .sommaire li { margin: 0; }
.expertises .sommaire a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(30, 30, 30, .06); font-size: 14px; font-weight: 600; text-decoration: none; }
.expertises .sommaire a:hover { background: var(--rouge); color: var(--blanc); }
.expertises__liste { --carte: clamp(280px, 31vw, 400px); margin: 8px 0 0; padding-bottom: 8px; }
.expertises__liste .expertise {
  min-height: 0 !important; justify-content: flex-start; padding: 14px 14px 22px !important; border: 1px solid rgba(30, 30, 30, .08) !important;
  border-radius: 24px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(30, 30, 30, .06); scroll-margin-top: 0;
}
.expertises__liste .expertise figure { margin: 0 0 18px; aspect-ratio: 4 / 3; border-radius: 16px; }
.expertises__liste .expertise img { scale: 1; }
.expertises__liste .expertise > :not(figure) { margin-left: 8px; margin-right: 8px; }
.expertises__liste .expertise h2 { font-size: clamp(24px, 2vw, 30px); margin-bottom: 10px; }
.expertises__liste .expertise__texte { font-size: 15.5px; margin-bottom: 16px; }
.expertises__liste .services { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 8px 16px; padding: 0; list-style: none; }
.expertises__liste .services li { padding: 6px 11px; border-radius: 999px; background: var(--gris-clair); font-size: 12.5px; font-weight: 600; }
.expertises__liste .services li::before { content: none; }
.expertises__liste .expertise__liens { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Cartes des autres pages quand elles passent en slider. */
.service-corps[data-glisse] { --carte: clamp(280px, 32vw, 420px); }
.service-corps[data-glisse] .service-bloc { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 26px 24px; border: 1px solid rgba(30, 30, 30, .08); border-radius: 24px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(30, 30, 30, .06); grid-template-columns: none; }
.service-corps[data-glisse] .service-bloc__num { margin: 0; font-size: 14px; font-weight: 800; color: var(--rouge); }
.service-corps[data-glisse] .service-bloc h2 { margin: 0 0 8px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; }
.service-corps[data-glisse] .service-bloc p { font-size: 15.5px; line-height: 1.6; }
.voisins ul[data-glisse] { --carte: clamp(250px, 28vw, 340px); }
.voisins ul[data-glisse] > li a { height: 100%; box-sizing: border-box; border-radius: 22px; }
.adn[data-glisse] { --carte: clamp(240px, 24vw, 300px); }
.adn[data-glisse] > li, .couloirs[data-glisse] > li { border-radius: 22px; }
.couloirs[data-glisse] { --carte: clamp(250px, 26vw, 320px); }
.billets[data-glisse] { --carte: clamp(260px, 30vw, 380px); }
.billets[data-glisse] figure, .billets[data-glisse] img, .une figure, .une img { border-radius: 18px; overflow: hidden; }
/* Agence : l'ADN en 4 cartes compactes (slider sur mobile). */
.adn[data-glisse] { --carte: clamp(240px, calc((100% - 48px) / 4), 400px); margin-top: 8px; border: 0 !important; }
.adn[data-glisse] > li { display: flex !important; flex-direction: column; gap: 10px; padding: 24px 22px !important; border: 1px solid rgba(30, 30, 30, .08) !important; background: #FFFFFF; box-shadow: 0 10px 30px rgba(30, 30, 30, .06); }
.adn[data-glisse] > li strong { position: static !important; font-size: clamp(24px, 2vw, 30px) !important; line-height: 1 !important; color: var(--noir) !important; letter-spacing: -0.03em; }
.adn[data-glisse] > li strong::first-letter { color: var(--rouge); }
.adn[data-glisse] > li p { position: static !important; margin: 0 !important; max-width: none !important; font-size: 15px; line-height: 1.55; color: var(--gris); }
.couloirs[data-glisse] { --carte: clamp(240px, calc((100% - 48px) / 4), 400px); }
@media (min-width: 1081px) { .certif-cartes--grille { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .certif-cartes--grille .certif-carte__logo b { font-size: 24px; } }

/* ===== Page Réalisations, style « portfolio » (mot géant rouge, projets numérotés, process, citation) ===== */
.portfolio { position: relative; overflow: hidden; overflow: clip; background: radial-gradient(70% 60% at 50% 30%, rgba(188, 32, 37, .25), transparent 70%), #0B0B0E; color: var(--blanc); }
.portfolio__cadre { position: relative; max-width: var(--largeur); margin: 0 auto; padding: 22px var(--marge) 0; min-height: min(760px, calc(100svh - 110px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.portfolio__haut { position: absolute; z-index: 3; left: var(--marge); right: var(--marge); top: 22px; display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 245, .7); }
.portfolio__haut span:first-child { color: var(--rouge-clair); }
.portfolio__haut i { color: var(--rouge-clair); font-style: normal; }
.portfolio__geant {
  position: absolute; z-index: 0; left: 50%; top: 60px; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font-family: var(--police-titre); font-weight: 800; font-size: clamp(90px, 15.5vw, 250px); line-height: .85; letter-spacing: -0.04em; text-transform: uppercase;
  background: linear-gradient(180deg, #E0353B 0%, var(--rouge) 45%, rgba(143, 24, 28, .35) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portfolio__photo { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); width: clamp(260px, 30vw, 430px); height: 86%; margin: 0;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.portfolio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(.35) contrast(1.1); border-radius: 26px 26px 0 0; }
.portfolio__gauche, .portfolio__droite { position: relative; z-index: 2; padding-bottom: clamp(32px, 5vh, 56px); }
.portfolio__gauche { grid-column: 1; }
.portfolio__droite { grid-column: 3; justify-self: end; width: min(100%, 280px); }
.portfolio h1 { margin: 0; font-weight: inherit; }
.portfolio__script { display: block; margin-bottom: 6px; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: clamp(22px, 2vw, 30px); color: rgba(245, 245, 245, .85); transform: rotate(-4deg); transform-origin: left; }
.portfolio__titre { display: block; font-family: var(--police-titre); font-weight: 800; font-size: clamp(40px, 4.6vw, 72px); line-height: .92; letter-spacing: -0.035em; text-transform: uppercase; }
.portfolio__sous { margin: 14px 0 10px; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--rouge-clair); }
.portfolio__intro { max-width: 36ch; margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #C9CDD3; }
.portfolio__gauche .bouton { height: 50px; gap: 16px; }
.portfolio__accroche { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; font-size: 15px; line-height: 1.45; color: rgba(245, 245, 245, .85); }
.portfolio__accroche i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-style: normal; color: var(--blanc); }
.portfolio__chiffres { margin: 0; padding: 0; list-style: none; }
.portfolio__chiffres li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.portfolio__chiffres b { font-family: var(--police-titre); font-size: 36px; font-weight: 800; line-height: 1; color: var(--rouge-clair); }
.portfolio__chiffres span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(245, 245, 245, .75); }
.portfolio__note { margin: 6px 0 0; font-size: 11.5px; color: rgba(245, 245, 245, .45); }

.projets { background: #0B0B0E; color: var(--blanc); border-top: 1px solid rgba(255, 255, 255, .08); }
.projets__cadre { max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--marge); }
.projets__tete { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.projets__tete h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.projets__tete i { flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
.projets__tete span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 245, 245, .6); white-space: nowrap; }
.projets__liste { --carte: clamp(250px, 23vw, 320px); margin: 0; padding: 0; list-style: none; gap: 20px; }
.projet { position: relative; display: flex; flex-direction: column; gap: 14px; }
.projet__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #1A1A1D; border: 1px solid rgba(255, 255, 255, .08); }
.projet__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.projet:hover .projet__media video { transform: scale(1.04); }
.projet__lire { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(188, 32, 37, .92); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.projet__lire svg { width: 22px; height: 22px; fill: var(--blanc); margin-left: 3px; }
.projet:hover .projet__lire { opacity: 1; transform: none; }
.projet__pied { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.projet__num { font-family: var(--police-titre); font-size: 40px; font-weight: 800; line-height: 1; color: var(--rouge); }
.projet__pied strong { display: block; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.projet__pied span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(245, 245, 245, .55); }
.projet__fleche { width: 24px; height: 24px; fill: none; stroke: var(--blanc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s, stroke .3s; }
.projet:hover .projet__fleche { transform: translateX(4px); stroke: var(--rouge-clair); }
.projet > button { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: pointer; }
.projets .glisse__nav { color: var(--blanc); }

.parcours { background: #0B0B0E; color: var(--blanc); border-top: 1px solid rgba(255, 255, 255, .08); }
.parcours__cadre { max-width: var(--largeur); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .75fr); }
.parcours__col { padding: clamp(36px, 4vw, 56px) clamp(20px, 2.6vw, 40px); border-right: 1px solid rgba(255, 255, 255, .08); }
.parcours__col:first-child { padding-left: var(--marge); }
.parcours h2 { margin: 0 0 22px; font-size: clamp(20px, 1.7vw, 24px); text-transform: uppercase; letter-spacing: .01em; }
.parcours__label { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge-clair); }
.parcours__partenaires { display: grid; gap: 2px; margin: 0 0 24px; padding: 0; list-style: none; }
.parcours__partenaires li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; font-weight: 700; }
.parcours__partenaires svg { width: 20px; height: 20px; flex: none; color: var(--blanc); }
.parcours__puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.parcours__puces li { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(245, 245, 245, .8); }
.process { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.process::before { content: ""; position: absolute; left: 61px; top: 22px; bottom: 22px; width: 1px; background: rgba(216, 74, 79, .4); }
.process li { position: relative; display: grid; grid-template-columns: 28px 44px 1fr; align-items: center; gap: 12px; }
.process b { font-family: var(--police-titre); font-size: 18px; color: var(--rouge-clair); }
.process__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rouge); border-radius: 50%; background: #0B0B0E; }
.process__ico svg { width: 19px; height: 19px; fill: none; stroke: var(--blanc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.process strong { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rouge-clair); }
.process span { display: block; font-size: 13.5px; line-height: 1.45; color: rgba(245, 245, 245, .75); }
.parcours__citation { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 44px); background: linear-gradient(160deg, var(--rouge) 0%, var(--rouge-fonce) 100%); }
.parcours__guillemets { font-family: var(--police-titre); font-size: 90px; line-height: .6; color: rgba(255, 255, 255, .85); }
.parcours__citation p { margin: 16px 0 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.parcours__citation .parcours__signature { margin: 18px 0 28px; font-family: var(--police-titre); font-style: italic; font-size: 26px; transform: rotate(-6deg); transform-origin: left; }
.parcours__citation a { color: var(--blanc); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.parcours__citation a:hover { text-decoration: underline; }
.parcours__eclat { position: absolute; right: 22px; bottom: 20px; font-style: normal; font-size: 22px; }
@media (max-width: 1080px) {
  .portfolio__cadre { grid-template-columns: 1fr; min-height: 0; padding-top: 70px; }
  .portfolio__geant { top: 70px; font-size: clamp(64px, 19vw, 150px); }
  .portfolio__photo { position: relative; left: auto; transform: none; width: min(78%, 340px); height: 360px; margin: 40px auto 0; grid-row: 1; }
  .portfolio__gauche, .portfolio__droite { grid-column: 1; justify-self: stretch; width: auto; padding-bottom: 28px; }
  .parcours__cadre { grid-template-columns: 1fr; }
  .parcours__col { padding-left: var(--marge) !important; padding-right: var(--marge); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .parcours__citation { padding-left: var(--marge); padding-right: var(--marge); }
  .projets__tete span { display: none; }
}
.portfolio__geant { font-size: clamp(76px, 12.6vw, 205px); }
.projets .projet { height: auto !important; aspect-ratio: auto !important; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; }
.projets .projet .projet__media { height: auto; }
.projets .projet::before, .projets .projet::after { content: none !important; display: none !important; }
.projets .projet video { opacity: 1 !important; filter: none !important; }

/* Pied de page compact sur mobile : expertises en puces, navigation et contact côte à côte. */
@media (max-width: 760px) {
  .pied__cadre { padding-top: 40px; padding-bottom: 22px; }
  .pied__colonnes { grid-template-columns: 1fr 1fr !important; column-gap: 18px; row-gap: 22px; padding: 22px 0 24px; }
  .pied__bloc { grid-column: 1 / -1 !important; margin-bottom: 0; }
  .pied__bloc p { font-size: 14px; margin-bottom: 4px; }
  .pied__bloc p:first-child { font-size: 16px; }
  .pied__services { grid-column: 1 / -1 !important; margin-bottom: 0 !important; }
  .pied__services ul { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .pied__services a { display: inline-block; padding: 6px 11px; border: 1px solid rgba(245, 245, 245, .35); border-radius: 999px; font-size: 12.5px; }
  .pied__nav { grid-column: 1 !important; margin-bottom: 0 !important; }
  .pied__contact { grid-column: 2 !important; }
  .pied ul { gap: 6px; }
  .pied__nav a, .pied__contact a, .pied__contact li { font-size: 13.5px; }
  .pied h2 { margin-bottom: 10px; }
  .pied__bas { font-size: 12px; }
}
@media (max-width: 760px) { .parcours__partenaires { grid-template-columns: 1fr 1fr; column-gap: 14px; } .parcours__partenaires li { font-size: 13px; padding: 8px 0; } .parcours__col, .parcours__citation { padding-top: 28px; padding-bottom: 28px; } .projets__cadre { padding-top: 32px; padding-bottom: 32px; } }

/* Chiffres clés en cartes à coins coupés (couleurs Advenix). */
.bande-chiffres--kpi { background: var(--fond) !important; color: var(--noir); }
.bande-chiffres--kpi::before { display: none; }
.bande-chiffres--kpi .bande-chiffres__cadre { max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--marge) !important; }
.bande-chiffres--kpi .chiffres__titre { margin: 0 0 24px; color: var(--noir); }
.bande-chiffres--kpi .chiffres__titre em { color: var(--rouge); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.kpi {
  position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 22px 22px 20px;
  background: linear-gradient(160deg, #FFFFFF 0%, #EDEDED 100%); color: var(--noir);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 42px 100%, 0 calc(100% - 42px));
  border-radius: 18px; transition: transform .3s ease;
}
.kpi:hover { transform: translateY(-4px); }
.kpi__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 10px; background: rgba(188, 32, 37, .1); }
.kpi__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--rouge); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi__chiffre { display: flex; align-items: baseline; gap: 4px; margin: 0; line-height: .9; }
.kpi__chiffre strong { font-family: var(--police-titre); font-size: clamp(56px, 5.4vw, 86px); font-weight: 800; letter-spacing: -0.05em; color: var(--rouge); }
.kpi__chiffre span { font-family: var(--police-titre); font-size: clamp(26px, 2.2vw, 36px); font-weight: 800; color: var(--rouge); }
.kpi__label { margin: 8px 0 0; font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; letter-spacing: -0.01em; }
.kpi__desc { margin: auto 0 0; padding-top: 18px; max-width: 24ch; align-self: flex-end; text-align: right; font-size: 12.5px; line-height: 1.4; color: var(--gris); }
.kpi--rouge { background: linear-gradient(150deg, #D84A4F 0%, var(--rouge) 45%, var(--rouge-fonce) 100%); color: var(--blanc); }
.kpi--rouge .kpi__ico { background: rgba(255, 255, 255, .18); }
.kpi--rouge .kpi__ico svg, .kpi--rouge .kpi__chiffre strong, .kpi--rouge .kpi__chiffre span { stroke: var(--blanc); color: var(--blanc); }
.kpi--rouge .kpi__desc { color: rgba(245, 245, 245, .85); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { min-height: 200px; padding: 18px 16px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); } .kpi__desc { font-size: 11.5px; } }
.bande-chiffres--kpi .kpi { background: linear-gradient(160deg, #FFFFFF 0%, #EDEDED 100%) !important; border: 0 !important; border-radius: 18px !important; padding: 22px 22px 20px !important; }
.bande-chiffres--kpi .kpi--rouge { background: linear-gradient(150deg, #D84A4F 0%, var(--rouge) 45%, var(--rouge-fonce) 100%) !important; }
.bande-chiffres--kpi .kpi strong { display: inline; gap: 0; font-size: clamp(56px, 5.4vw, 86px); }
.bande-chiffres--kpi .kpi strong::before, .bande-chiffres--kpi .kpi strong::after, .bande-chiffres--kpi .kpi::before, .bande-chiffres--kpi .kpi__chiffre::before { content: none !important; display: none !important; }
.bande-chiffres--kpi .kpi__label { color: var(--noir); }
.bande-chiffres--kpi .kpi--rouge .kpi__label { color: var(--blanc); }
@media (max-width: 900px) { .bande-chiffres--kpi .kpi { padding: 18px 16px !important; } }
/* Certifications : 6 cartes (5 partenaires + Google Analytics 4). */
@media (min-width: 1200px) { .certif-cartes--grille { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .certif-cartes--grille .certif-carte__logo b { font-size: 21px; } .certif-cartes--grille .certif-carte strong { font-size: 15px; } }
@media (min-width: 761px) and (max-width: 1199px) { .certif-cartes--grille { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* Mobile : les 4 chiffres clés sur une seule ligne, sans descriptif. */
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .bande-chiffres--kpi .kpi { min-height: 0; padding: 12px 6px 12px !important; border-radius: 12px !important; align-items: center; text-align: center;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
  .bande-chiffres--kpi .kpi__ico, .bande-chiffres--kpi .kpi__desc { display: none; }
  .bande-chiffres--kpi .kpi strong { font-size: 30px !important; }
  .bande-chiffres--kpi .kpi__chiffre span { font-size: 16px; }
  .bande-chiffres--kpi .kpi__label { margin-top: 6px; font-size: 11px; line-height: 1.2; }
  .bande-chiffres--kpi .chiffres__titre { margin-bottom: 14px; }
}
/* Chiffres clés : entrée animée des cartes et reflet sur la carte rouge. */
.kpis--attente .kpi { opacity: 0; transform: translateY(26px); }
.kpis--visible .kpi { animation: kpi-entree .7s cubic-bezier(.2, .8, .2, 1) both; }
.kpis--visible .kpi:nth-child(2) { animation-delay: .12s; }
.kpis--visible .kpi:nth-child(3) { animation-delay: .24s; }
.kpis--visible .kpi:nth-child(4) { animation-delay: .36s; }
@keyframes kpi-entree { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.kpi--rouge { overflow: hidden; }
.kpi--rouge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); animation: kpi-reflet 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes kpi-reflet { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.kpi__ico { transition: transform .4s ease; }
.kpi:hover .kpi__ico { transform: rotate(-8deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .kpis--visible .kpi, .kpi--rouge::after { animation: none; } }

/* ===== Ouverture « Audace » (remplace l'ancienne ouverture rouge) ===== */
.ouverture { pointer-events: auto; }
.ouverture__moitie { background: #0B0B0E !important; animation: ouverture-ecart .72s cubic-bezier(.72, 0, .18, 1) 2.5s forwards !important; }
.ouverture__trajet { height: 3px !important; background: linear-gradient(90deg, transparent, var(--rouge) 18%, #FF4A50 50%, var(--rouge) 82%, transparent) !important; box-shadow: 0 0 22px rgba(255, 60, 66, .85), 0 0 60px rgba(188, 32, 37, .6);
  animation: ouverture-trace .5s cubic-bezier(.66, 0, .22, 1) .05s forwards, ouverture-trait-flash .5s ease-in-out 1.75s, ouverture-efface .3s ease-out 2.45s forwards !important; }
@keyframes ouverture-trait-flash { 50% { height: 9px; box-shadow: 0 0 40px #FF3C42, 0 0 120px rgba(188, 32, 37, .9); } }
.ouverture__fond {
  position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) scale(1.25); white-space: nowrap; opacity: 0;
  font-family: var(--police-titre); font-weight: 800; font-size: 26vw; line-height: .8; letter-spacing: -0.05em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(245, 245, 245, .16);
  animation: ouverture-fond 2.5s cubic-bezier(.2, .7, .2, 1) .1s forwards;
}
@keyframes ouverture-fond { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.ouverture__mots { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
.ouverture__mots span {
  grid-area: 1 / 1; font-family: var(--police-titre); font-weight: 800; font-size: clamp(54px, 12vw, 190px); line-height: .9; letter-spacing: -0.045em;
  text-transform: uppercase; color: var(--blanc); clip-path: inset(0 0 100% 0); transform: translateY(40%);
  animation: ouverture-mot .46s cubic-bezier(.7, 0, .2, 1) var(--d) forwards;
}
.ouverture__mots .ouverture__rouge { color: var(--rouge); text-shadow: 0 0 60px rgba(255, 60, 66, .45); }
@keyframes ouverture-mot {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(40%) skewY(6deg); }
  35% { clip-path: inset(0 0 0 0); transform: none; }
  78% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
  100% { clip-path: inset(0 0 0 0); transform: translateY(-30%) scale(1.06); opacity: 0; }
}
.ouverture__lueur { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 32, 37, .55) 0%, rgba(188, 32, 37, .12) 30%, transparent 60%); opacity: 0; transform: scale(.2);
  animation: ouverture-lueur .9s cubic-bezier(.2, .8, .2, 1) 1.72s forwards; }
@keyframes ouverture-lueur { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
.ouverture__logo { animation: ouverture-volet .5s cubic-bezier(.6, 0, .2, 1) 1.78s forwards, ouverture-efface .2s ease-in 2.4s forwards !important; }
.ouverture__devise { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 800 clamp(13px, 1.3vw, 17px)/1 var(--police-texte);
  letter-spacing: .5em; text-transform: uppercase; color: var(--rouge-clair); opacity: 0; transform: translateY(10px);
  animation: ouverture-devise .4s ease-out 2.0s forwards, ouverture-efface .2s ease-in 2.4s forwards; }
@keyframes ouverture-devise { to { opacity: 1; transform: none; } }
.ouverture__passer { position: absolute; right: 22px; bottom: 22px; z-index: 3; padding: 9px 16px; border: 1px solid rgba(245, 245, 245, .3); border-radius: 999px;
  background: rgba(0, 0, 0, .3); color: rgba(245, 245, 245, .8); font: 600 13px/1 var(--police-texte); cursor: pointer; animation: ouverture-efface .2s ease-in 2.4s forwards; }
.ouverture__passer:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.ouverture--passee .ouverture__moitie { animation: ouverture-ecart .45s cubic-bezier(.72, 0, .18, 1) 0s forwards !important; }
.ouverture--passee > :not(.ouverture__moitie) { opacity: 0 !important; transition: opacity .15s; }
/* Les entrées du haut de page attendent la fin de la nouvelle ouverture. */
.avec-ouverture .heros__trajet { animation-delay: 2.85s !important; }
.avec-ouverture .heros .releve__ligne:nth-child(1) { animation-delay: 3.1s !important; }
.avec-ouverture .heros .releve__ligne:nth-child(2) { animation-delay: 3.22s !important; }
.avec-ouverture .heros .releve__ligne:nth-child(3) { animation-delay: 3.34s !important; }
html.ouverture-en-cours { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ouverture { display: none; } }
.ouverture__mots { z-index: 2; }
.ouverture__trajet { z-index: 1; }
.ouverture__mots .ouverture__long { font-size: clamp(40px, 10.5vw, 168px); white-space: nowrap; }
.ouverture__devise { letter-spacing: .32em; }
.ouverture__lueur { animation: ouverture-lueur .9s cubic-bezier(.2, .8, .2, 1) 1.72s forwards, ouverture-efface .3s ease-in 2.4s forwards !important; }
@media (max-width: 600px) { .ouverture__devise { letter-spacing: .16em; font-size: 11px; } }

/* Bouton d appel à l action en fin d article. */
.texte .article-cta { margin: 28px 0 8px; }
.texte .article-cta .bouton { display: inline-flex; color: var(--blanc) !important; text-decoration: none !important; background-image: none; gap: 16px; }
.texte .article-cta .bouton:hover { color: var(--blanc) !important; }
.texte .article-cta .bouton { max-width: 100%; height: auto; min-height: 52px; padding-top: 12px; padding-bottom: 12px; white-space: normal; text-align: left; line-height: 1.3; }