/* Accueil, deuxième passe : mêmes images et même calme que la bannière.
   Chargée après hero.css. L'italique des titres passe à l'ivoire ; le rouge reste l'accent des boutons et des repères. */
:root { --ivoire: var(--red-hi); --trait: rgba(255, 255, 255, .11); --trait-fort: rgba(255, 255, 255, .2); }
.accent, .manifeste__texte em, .footer__geant em { color: var(--ivoire); }
.svc__liste a.est-actif .svc__nom { color: var(--ivoire); }

/* ---------- Méthode : trois étapes, trois images de métier ---------- */
.how .head { text-align: left; margin-inline: 0; max-width: none; }
.how .head .eyebrow--center { justify-content: flex-start; }
.how .head .eyebrow--center span:last-child { display: none; }
.how .head h2 { max-width: 16ch; }
.how .head .sub { margin-inline: 0; }
.how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); border-top: 0; margin-top: clamp(40px, 5vw, 72px); }
.how__card, .card.how__card { position: relative; padding: 0; border: 0; }
.how__card + .how__card { padding-left: 0; border-left: 0; }
.how__card:nth-child(2) { margin-top: clamp(0px, 5vw, 72px); }
.how__card:nth-child(3) { margin-top: clamp(0px, 10vw, 144px); }
.how__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); }
.how__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sortie); }
.how__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 8, .6), rgba(8, 8, 8, 0) 45%); }
@media (hover: hover) and (pointer: fine) { .how__card:hover .how__photo img { transform: scale(1.05); } }
.how__card .num { position: absolute; top: 18px; left: 20px; z-index: 1; font: 400 15px/1 var(--sans); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.how__card h3 { margin-top: 22px; font-size: clamp(28px, 2.6vw, 40px); }
.how__card p { margin-top: 10px; max-width: 40ch; }
.how__card .mini { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); }
.how .center-cta { margin-top: clamp(48px, 6vw, 90px); }

/* ---------- Coût : plus de halo rouge, un fond calme et le plancher en image ---------- */
.dark { position: relative; overflow: hidden; background: #0b0b0b; isolation: isolate; }
.dark .dark__glow { display: none; }
.dark::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(hero/metier/plancher.webp) center / cover no-repeat; opacity: .5; }
.dark::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .8) 50%, rgba(10, 10, 10, .86) 100%); }
.dark .bars { background: rgba(12, 12, 12, .72); box-shadow: inset 0 0 0 1px var(--trait); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* ---------- Vidéos ---------- */
.vid { padding: clamp(84px, 10vw, 150px) 0; overflow: hidden; }
.vid__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.vid__tete h2 { margin-top: 16px; font: 400 clamp(42px, 5.6vw, 84px)/.98 var(--serif); letter-spacing: -.02em; }
.vid__tete p.sub { margin-top: 16px; max-width: 46ch; color: var(--muted); }
.vid__cote { display: flex; align-items: center; gap: 10px; }
.vid__comptes { display: flex; gap: 8px; margin-right: 14px; }
.vid__comptes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait-fort); color: #fff; font-size: 19px; text-decoration: none; transition: background .25s var(--sortie), border-color .25s, transform .16s ease-out; }
.vid__pas { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait-fort); background: none; color: #fff; font-size: 18px; cursor: pointer; transition: background .25s var(--sortie), border-color .25s, transform .16s ease-out; }
.vid__comptes a:active, .vid__pas:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .vid__comptes a:hover, .vid__pas:hover { background: var(--red); border-color: var(--red); } }
.vid__piste { display: flex; gap: 18px; margin-top: clamp(36px, 4.4vw, 64px); padding: 0 max(24px, calc((100vw - 1200px) / 2 + 24px)) 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.vid__piste::-webkit-scrollbar { display: none; }
.vid__piste.se-tire { cursor: grabbing; scroll-snap-type: none; }
.vid__piste.se-tire iframe { pointer-events: none; }
.vidc { flex: none; width: clamp(240px, 22vw, 320px); scroll-snap-align: start; opacity: 0; transform: translateY(28px); transition: opacity .8s var(--sortie), transform 1s var(--sortie); transition-delay: calc(var(--i) * 70ms); }
.vid.est-prete .vidc { opacity: 1; transform: none; }
.vidc__cadre { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #121212; box-shadow: inset 0 0 0 1px var(--trait); }
.vidc__cadre iframe, .vidc__cadre video, .vidc__jouer, .vidc__jouer img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vidc__cadre video, .vidc__jouer img { object-fit: cover; }
.vidc__cadre iframe { background: #121212; opacity: 0; transition: opacity .5s ease; }
.vidc.est-chargee iframe { opacity: 1; }
.vidc__attente { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: rgba(255, 255, 255, .28); pointer-events: none; transition: opacity .4s; }
.vidc.est-chargee .vidc__attente { opacity: 0; }
.vidc__jouer { padding: 0; background: #121212; cursor: pointer; }
.vidc__jouer span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(10, 10, 10, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 22px; transition: transform .3s var(--sortie), background .3s; }
@media (hover: hover) and (pointer: fine) { .vidc__jouer:hover span { transform: scale(1.08); background: var(--red); } }
.vidc__lien { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.vidc__lien i { font-size: 16px; color: #fff; }
.vidc__lien span { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .vidc__lien:hover { color: #fff; } }

@media (max-width: 1080px) {
  .how__grid { grid-template-columns: minmax(0, 1fr); }
  .how__card:nth-child(n) { margin-top: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px; align-items: center; }
  .how__card h3 { margin-top: 0; }
}
@media (max-width: 767px) {
  .how__card:nth-child(n) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how__card h3 { margin-top: 20px; }
  .how__photo { aspect-ratio: 4 / 3; }
  .vid__cote .vid__pas { display: none; }
  .vidc { width: 68vw; }
  .vid__piste { padding-inline: 20px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vidc { opacity: 1; transform: none; transition: none; } }
.vid__piste { scroll-padding-inline: max(24px, calc((100vw - 1200px) / 2 + 24px)); }
@media (max-width: 767px) { .vid__piste { scroll-padding-inline: 20px; } }

/* ---------- Engagements : une image qui reste, six lignes qui défilent ---------- */
.eng--v2 .eng__deux { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.eng__image { position: sticky; top: 104px; margin: 0; }
.eng__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 34% 50%; display: block; }
.eng__image figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eng--v2 h2 { max-width: 12ch; }
.eng__rangs { list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--trait); counter-reset: eng; }
.eng__rangs li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: clamp(22px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--trait); counter-increment: eng; transition: padding-left .5s var(--sortie); }
.eng__rangs li::before { content: counter(eng, decimal-leading-zero); grid-row: span 2; padding-top: .7em; font-size: 12px; letter-spacing: .1em; color: var(--red-hi); }
.eng__rangs h3 { font: 400 clamp(28px, 2.9vw, 46px)/1.04 var(--serif); letter-spacing: -.014em; transition: color .3s; }
.eng__rangs p { max-width: 48ch; font-size: 15px; line-height: 1.65; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .eng__rangs li:hover { padding-left: 12px; } .eng__rangs li:hover h3 { color: var(--ivoire); } }

/* ---------- Soumission : la porte en fond, plus de halo rouge ---------- */
.final__box { position: relative; isolation: isolate; border-radius: 0; background: #0b0b0b; box-shadow: inset 0 0 0 1px var(--trait); }
.final__box::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(hero/img/porte.webp) 30% center / cover no-repeat; opacity: .8; }
.final__box::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 10, .66) 0%, rgba(10, 10, 10, .6) 36%, rgba(10, 10, 10, .93) 60%); }
.final__glow { display: none; }
.final__copy h2 em { font-style: italic; color: var(--ivoire); }
.final__box .card.quote { border-radius: 0; background: rgba(12, 12, 12, .78); box-shadow: inset 0 0 0 1px var(--trait-fort); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---------- Réalisations de l'accueil : des projets, plus des photos isolées ---------- */
.real__projet { position: relative; }
.real__projet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, 0) 46%); pointer-events: none; }
.real__etiquette { position: absolute; left: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); bottom: clamp(16px, 2vw, 26px); z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #fff; }
.real__etiquette b { display: block; font-size: 12px; font-weight: 400; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.real__etiquette strong { display: block; margin-top: 6px; font: 400 clamp(26px, 2.6vw, 42px)/1.02 var(--serif); letter-spacing: -.014em; transition: color .3s; }
.real__etiquette small { flex: none; padding: 8px 12px; border-radius: 999px; font-size: 11.5px; letter-spacing: .04em; background: rgba(10, 10, 10, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) and (pointer: fine) { .real__projet:hover strong { color: var(--ivoire); } }

@media (max-width: 1080px) {
  .eng--v2 .eng__deux { grid-template-columns: minmax(0, 1fr); }
  .eng__image { position: static; }
  .eng__image img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .eng__rangs li { grid-template-columns: 40px minmax(0, 1fr); }
  .final__box::after { background: rgba(10, 10, 10, .86); }
}

.final__copy h2, .final__copy > p, .final__copy .checks { text-shadow: 0 1px 24px rgba(0, 0, 0, .7); }

/* ---------- Marques : une bande de vignettes blanches qui défile sous la bannière ---------- */
.marques { padding: clamp(34px, 4vw, 56px) 0 clamp(30px, 3.6vw, 50px); border-bottom: 1px solid var(--trait); overflow: hidden; }
.marques__titre { text-align: center; font-size: 13.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.marques__fenetre { margin-top: clamp(20px, 2.4vw, 32px); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.marques__piste { display: flex; gap: 14px; width: max-content; animation: marques-defile 70s linear infinite; }
.marques__fenetre:hover .marques__piste { animation-play-state: paused; }
.marque { flex: none; display: block; overflow: hidden; width: clamp(150px, 13vw, 196px); height: clamp(74px, 6.4vw, 96px); padding: 14px 20px; border-radius: 10px; background: #fff; }
.marque img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; filter: grayscale(1) contrast(1.05); transition: filter .35s ease; }
.marque--inverse img { filter: invert(1) hue-rotate(180deg) grayscale(1) contrast(1.05); }
@media (hover: hover) and (pointer: fine) {
  .marque:hover img { filter: none; }
  .marque--inverse:hover img { filter: invert(1) hue-rotate(180deg); }
}
/* la piste contient la liste deux fois : on la décale d'une moitié (plus un demi-écart) pour boucler sans saut */
@keyframes marques-defile { to { transform: translate3d(calc(-50% - 7px), 0, 0); } }
@media (max-width: 767px) { .marques__piste { gap: 10px; animation-duration: 55s; } .marque { width: 132px; height: 66px; padding: 11px 15px; } @keyframes marques-defile { to { transform: translate3d(calc(-50% - 5px), 0, 0); } } }
@media (prefers-reduced-motion: reduce) { .marques__piste { animation: none; } .marques__fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marques__piste .marque[aria-hidden] { display: none; } }

/* ---------- Ce que le sablage règle : cinq volets, celui qu'on vise s'ouvre ---------- */
.regle .tete h2 { max-width: 14ch; }
.regle .tete .sub { margin-top: 16px; max-width: 52ch; color: var(--muted); }
.regle__liste { list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; display: flex; gap: 10px; height: clamp(420px, 44vw, 600px); }
.regle__carte { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; background: #111; outline: none; transition: flex-grow .7s var(--sortie); }
.regle__carte.est-ouverte { flex-grow: 4.2; cursor: default; }
.regle__carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.5); transition: filter .7s var(--sortie), transform 1.4s var(--sortie); }
.regle__carte.est-ouverte img { filter: none; transform: scale(1.03); }
.regle__carte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .2) 55%, rgba(8, 8, 8, 0) 100%); pointer-events: none; }
.regle__carte:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.regle__texte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(16px, 1.8vw, 28px); }
.regle__texte b { display: block; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--red-hi); }
.regle__texte h3 { margin-top: 8px; font: 600 clamp(22px, 2.2vw, 34px)/1.04 var(--serif); letter-spacing: -.012em; white-space: nowrap; }
.regle__texte p { margin-top: 10px; max-width: 44ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--sortie); }
.regle__carte.est-ouverte .regle__texte p { opacity: 1; transform: none; transition-delay: .25s; }
/* fermé, le titre se lit à la verticale, comme le dos d'un livre */
.regle__carte:not(.est-ouverte) .regle__texte h3 { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 12px; }
.regle__carte:not(.est-ouverte) .regle__texte p { position: absolute; visibility: hidden; }
.regle__suite { margin-top: 28px; }
@media (max-width: 900px) {
  .regle__liste { flex-direction: column; height: auto; gap: 8px; }
  .regle__carte { flex: none; height: 76px; transition: height .6s var(--sortie); }
  .regle__carte.est-ouverte { height: 380px; }
  .regle__carte:not(.est-ouverte) .regle__texte { display: flex; align-items: baseline; gap: 14px; padding: 0 18px; top: 0; bottom: 0; align-items: center; }
  .regle__carte:not(.est-ouverte) .regle__texte h3 { writing-mode: horizontal-tb; transform: none; margin-top: 0; }
  .regle__carte:not(.est-ouverte)::after { background: rgba(8, 8, 8, .35); }
}
@media (prefers-reduced-motion: reduce) { .regle__carte, .regle__carte img, .regle__texte p { transition: none; } }