/* Artin EG SA — site une page */
:root {
  --blanc: #FFFFFF;
  --noir: #0B0B0C;
  --gris: #6E6E6E;
  --ligne: #E4E4E4;
  --bordeaux: #7A1F2E;
  --gouttiere: clamp(20px, 5vw, 64px);
  --rayon: 22px;
  --or: #C9A876;
  --police: "Inter", -apple-system, system-ui, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--police);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.titre {
  font-family: var(--serif);
  font-size: clamp(50px, 14vw, 128px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.titre em { font-style: italic; color: var(--bordeaux); }
.fixe .titre em { color: var(--or); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--noir);
  color: var(--blanc);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
.bouton:hover { background: var(--bordeaux); }
.bouton--clair { background: var(--blanc); color: var(--noir); }
.bouton--clair:hover { background: var(--bordeaux); color: var(--blanc); }

:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gouttiere);
  color: var(--blanc);
  transition: background .25s, color .25s, box-shadow .25s;
}
.entete.est-pleine {
  background: var(--blanc);
  color: var(--noir);
  box-shadow: 0 1px 0 var(--ligne);
}
.logo { display: inline-flex; align-items: center; }
.logo svg { display: block; height: 38px; width: auto; }
.logo__noir, .entete.est-pleine .logo__blanc { display: none; }
.entete.est-pleine .logo__noir { display: inline; }
.entete nav { display: flex; align-items: center; gap: 28px; }
.entete nav a:not(.bouton) { display: none; font-size: 16px; }
.entete .bouton { min-height: 44px; padding: 0 20px; font-size: 16px; }
.entete:not(.est-pleine) .bouton { background: var(--blanc); color: var(--noir); }

/* ---------- Fonds fixes ----------
   L'image est en position fixe, découpée par son panneau :
   elle reste immobile pendant que la page défile (fonctionne aussi sur iPhone). */
.fixe {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  clip-path: inset(0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--gouttiere) clamp(40px, 9vh, 96px);
  color: var(--blanc);
  background: var(--noir);
}
.fixe > img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.fixe::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.4) 100%);
}
.fixe--uni { background: var(--bordeaux); }
.fixe--uni::before { display: none; }

.hero .titre { max-width: 11ch; }
.hero p { margin-top: 18px; font-size: 20px; }
.hero .bouton { margin-top: 28px; align-self: flex-start; }

.metier .num { font-size: 20px; font-variant-numeric: tabular-nums; }
.metier .titre { margin-top: 10px; }
.metier p { margin-top: 14px; max-width: 30ch; font-size: 19px; }

/* ---------- Chiffres ---------- */
.chiffres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
  padding: clamp(56px, 10vw, 110px) var(--gouttiere);
  background: var(--blanc);
}
.chiffres strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(52px, 14vw, 104px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.chiffres span { display: block; margin-top: 6px; color: var(--gris); }

/* ---------- Réalisations : défilement horizontal ---------- */
.realisations { position: relative; background: var(--blanc); }
.realisations__cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 84px 0 24px;
  overflow: hidden;
}
.realisations__tete { padding: 0 var(--gouttiere) 20px; }
.realisations__tete .titre { font-size: clamp(44px, 11vw, 96px); }
.realisations__piste {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 0 0 0 var(--gouttiere);
  will-change: transform;
  touch-action: pan-y;
}
.carte {
  position: relative;
  flex: 0 0 auto;
  width: min(80vw, 460px);
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--noir);
  color: var(--blanc);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.carte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s;
}
.carte:hover img { transform: scale(1.04); }
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 50%);
}
.carte__texte {
  position: absolute;
  inset: auto 22px 22px 22px;
  z-index: 1;
}
.carte__texte b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(32px, 8vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.carte__texte span { display: block; margin-top: 4px; }
.carte__texte em {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--noir);
  font-size: 15px;
  font-style: normal;
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  padding: clamp(72px, 14vw, 160px) var(--gouttiere) 40px;
  background: var(--blanc);
}
.contact__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
  max-width: 520px;
}
.contact__actions .bouton { min-height: 68px; padding: 0 20px; font-size: 19px; white-space: nowrap; }
.contact__actions .bouton--contour {
  background: transparent;
  color: var(--noir);
  box-shadow: inset 0 0 0 1.5px var(--noir);
}
.contact__actions .bouton--contour:hover { background: var(--noir); color: var(--blanc); }
.contact__infos {
  display: grid;
  gap: 20px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--noir);
}
.contact__infos small { display: block; color: var(--gris); font-size: 15px; }
.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  color: var(--gris);
  font-size: 15px;
}
.pied a { text-decoration: underline; }

/* ---------- Galerie plein écran ---------- */
.galerie {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--blanc);
}
.galerie::backdrop { background: #000; }
.galerie__photos {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie__photos::-webkit-scrollbar { display: none; }
.galerie__photos img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
}
.galerie__barre {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0));
  font-size: 16px;
}
.galerie__barre b { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.galerie__fermer, .galerie__fleche {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.galerie__fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: none;
}
.galerie__fleche--prec { left: 18px; }
.galerie__fleche--suiv { right: 18px; }

/* ---------- Grand écran ---------- */
@media (min-width: 800px) {
  .entete nav a:not(.bouton) { display: inline; }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
  .hero .titre { max-width: 14ch; }
  .carte { width: min(46vw, 620px); }
  .contact__infos { grid-template-columns: repeat(3, 1fr); }
  .galerie__fleche { display: block; }
}

/* Sans animation : les réalisations se font glisser au doigt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .realisations { height: auto !important; }
  .realisations__cadre { position: static; height: auto; }
  .realisations__piste {
    height: 70vh;
    flex: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
  }
  .carte { scroll-snap-align: center; }
  .carte img { transition: none; }
}

/* ---------- Accès rapide clavier ---------- */
.evitement {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--noir);
  color: var(--blanc);
}
.evitement:focus { top: 12px; }

/* ---------- Lien dans un fond fixe ---------- */
.metier .bouton { margin-top: 22px; align-self: flex-start; }

/* ---------- Pages prestation ---------- */
.hero--page { min-height: 82vh; min-height: 82svh; }
.hero--page .fil { font-size: 16px; }
.hero--page .fil a { text-decoration: underline; }
.hero--page .titre { margin-top: 10px; max-width: 13ch; }
.hero--page p { max-width: 34ch; }

.bloc {
  position: relative;
  padding: clamp(56px, 10vw, 120px) var(--gouttiere);
  background: var(--blanc);
}
.bloc + .bloc { padding-top: 0; }
.bloc > h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bloc > h2 em { font-style: italic; color: var(--bordeaux); }
.chapo { max-width: 36em; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.4; }

.liste { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: n; }
.liste li {
  display: grid;
  grid-template-columns: 52px 1fr;
  padding: 22px 0;
  border-top: 1px solid var(--noir);
  counter-increment: n;
}
.liste li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
}
.liste h3 { font-size: 21px; font-weight: 500; line-height: 1.25; }
.liste p { margin-top: 6px; color: #4A4A4A; max-width: 40em; }

.bande {
  display: flex;
  gap: 12px;
  margin: 0 calc(-1 * var(--gouttiere));
  padding: 0 var(--gouttiere);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.bande::-webkit-scrollbar { display: none; }
.bande img {
  flex: 0 0 auto;
  width: min(82vw, 560px);
  height: min(62vh, 520px);
  object-fit: cover;
  border-radius: var(--rayon);
  scroll-snap-align: center;
}

.faq { margin-top: 28px; border-bottom: 1px solid var(--noir); }
.faq details { border-top: 1px solid var(--noir); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 30px; line-height: .8; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; max-width: 40em; color: #4A4A4A; }

.autres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.autres .bouton { min-height: 50px; padding: 0 22px; background: transparent; color: var(--noir); box-shadow: inset 0 0 0 1.5px var(--noir); }
.autres .bouton:hover { background: var(--noir); color: var(--blanc); }

@media (min-width: 800px) {
  .liste li { grid-template-columns: 90px 1fr; }
}

/* ---------- Couche par couche : dix photos qui se superposent au défilement ---------- */
.couches { position: relative; height: calc(100vh + 420vh); background: var(--blanc); }
.couches__cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  padding: 84px var(--gouttiere) 22px;
}
.couches .titre { font-size: clamp(44px, 11vw, 96px); }
.couches__image {
  position: relative;
  min-height: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--noir);
}
.couches__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
}
.couches__image img + img { opacity: 0; }
.couches__legende { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.couches__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--bordeaux);
  font-variant-numeric: lining-nums;
}
.couches__legende b { display: block; font-size: 20px; font-weight: 500; }
.couches__legende p { color: #4A4A4A; }
.couches__etapes { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.couches__etapes li { flex: 1; height: 4px; border-radius: 4px; background: var(--ligne); transition: background .2s; }
.couches__etapes li.est-passee, .couches__etapes li.est-active { background: var(--bordeaux); }
.couches__etapes span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .couches__cadre {
    grid-template-columns: 1fr 220px;
    grid-template-rows: auto 1fr auto;
    column-gap: 48px;
  }
  .couches .titre, .couches__legende { grid-column: 1 / -1; }
  .couches__etapes { grid-column: 2; grid-row: 2; flex-direction: column; justify-content: center; gap: 14px; }
  .couches__etapes li {
    flex: none;
    height: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none !important;
    color: var(--gris);
  }
  .couches__etapes li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .couches__etapes li.est-active { color: var(--noir); }
  .couches__etapes li.est-active::before { background: var(--bordeaux); box-shadow: none; }
  .couches__etapes span { position: static; width: auto; height: auto; clip-path: none; }
}

/* Lisibilité du texte posé sur les photos */
.fixe .titre, .fixe p, .fixe .num { text-shadow: 0 1px 22px rgba(0,0,0,.5); }
.hero--page { justify-content: flex-end; }
.liste li::before { font-variant-numeric: lining-nums; }

/* ---------- Ouverture : carrés superposés puis logo ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
  overflow: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.intro.est-finie { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-en-cours, .intro-en-cours body { overflow: hidden; }
.intro__logo { width: min(520px, 76vw); height: auto; overflow: visible; transition: transform .7s ease; }
.intro.est-finie .intro__logo { transform: scale(1.12); }
.intro g[class^="lg-"] { transform-box: fill-box; transform-origin: center; opacity: 0; }
.intro .lg-sq1 { animation: lgPop .7s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.intro .lg-sq2 { animation: lgPop .7s cubic-bezier(.2,.7,.2,1) .4s forwards; }
.intro .lg-inter { animation: lgFade .6s ease .62s forwards; }
.intro .lg-text { animation: lgText .9s cubic-bezier(.2,.7,.2,1) .72s forwards; }
.intro::after {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 28%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  animation: lgSweep 1.05s ease 1.4s;
}
@keyframes lgPop {
  0% { opacity: 0; transform: scale(.55); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lgFade { to { opacity: 1; } }
@keyframes lgText {
  0% { opacity: 0; transform: translateX(-18px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes lgSweep {
  0% { left: -45%; opacity: 0; }
  25% { opacity: 1; }
  100% { left: 135%; opacity: 0; }
}

.chapo--sous { margin-top: 20px; }

/* ---------- Page rénovation énergétique : graphiques ---------- */
.note { margin-top: 18px; max-width: 40em; color: var(--gris); font-size: 15px; }

.barres { margin: 30px 0 0; padding: 0; list-style: none; max-width: 760px; }
.barres li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--ligne);
}
.barres span { font-size: 19px; font-weight: 500; }
.barres b { font-family: var(--serif); font-size: 26px; font-weight: 500; font-variant-numeric: lining-nums; white-space: nowrap; }
.barres i { grid-column: 1 / -1; height: 14px; border-radius: 14px; background: var(--bordeaux); }

.echelle { margin: 30px 0 0; padding: 0; list-style: none; max-width: 620px; display: grid; gap: 8px; }
.echelle li { display: grid; grid-template-columns: 30px 1fr; align-items: center; }
.echelle b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.echelle i { height: 30px; border-radius: 0 30px 30px 0; }
.cecb-A { background: #1E8E4E; }
.cecb-B { background: #5BAA3C; }
.cecb-C { background: #B5C92F; }
.cecb-D { background: #F2D31B; }
.cecb-E { background: #F3A71C; }
.cecb-F { background: #E8702A; }
.cecb-G { background: #D7261E; }
.echelle + .note + .liste { margin-top: 36px; }

.lexique { margin: 28px 0 0; border-bottom: 1px solid var(--noir); }
.lexique div { padding: 20px 0; border-top: 1px solid var(--noir); }
.lexique dt { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.1; color: var(--bordeaux); }
.lexique dd { margin: 6px 0 0; max-width: 40em; color: #4A4A4A; }
@media (min-width: 800px) {
  .lexique div { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: baseline; }
  .lexique dd { margin: 0; }
}

/* ---------- Menu : deux barres claires, une barre bordeaux ---------- */
.entete nav { gap: 10px; }
.menu-bouton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 7px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-bouton i { display: block; height: 2.5px; border-radius: 2px; background: var(--blanc); transition: background .25s; }
.entete.est-pleine .menu-bouton i { background: var(--noir); }
.menu-bouton i:last-child, .entete.est-pleine .menu-bouton i:last-child { background: #C8202C; }

.menu {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 72px var(--gouttiere) 22px;
  border: 0;
  background: var(--blanc);
  color: var(--noir);
}
.menu[open] { display: flex; flex-direction: column; }
.menu nav { flex: 1; overflow-y: auto; }
.menu nav a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: clamp(23px, 6.4vw, 34px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.menu nav em { font-style: italic; color: var(--bordeaux); }
.menu .bouton { margin-top: 16px; min-height: 56px; white-space: nowrap; }
.menu__fermer {
  position: absolute;
  top: 14px;
  right: var(--gouttiere);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  font-size: 18px;
  cursor: pointer;
}
@media (min-width: 800px) {
  .entete nav { gap: 28px; }
  .menu-bouton { display: none; }
}

.bloc[id] { scroll-margin-top: 70px; }

/* ---------- Candidats ---------- */
.candidats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--noir);
  border-bottom: 1px solid var(--noir);
  font-family: var(--serif);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.05;
}
.candidats small { display: block; margin-bottom: 4px; font-family: var(--police); font-size: 15px; color: var(--gris); }
.candidats .bouton { min-height: 50px; padding: 0 22px; font-family: var(--police); white-space: nowrap; }
.candidats:hover .bouton { background: var(--bordeaux); }
.contact > .pied:first-child { margin-top: 0; }

.formulaire { display: grid; gap: 26px; margin-top: 32px; max-width: 760px; }
.formulaire label { display: block; font-size: 15px; color: var(--gris); }
.formulaire label span { color: var(--gris); }
.formulaire input, .formulaire select, .formulaire textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1.5px solid var(--noir);
  border-radius: 0;
  background: none;
  color: var(--noir);
  font: inherit;
  font-size: 20px;
  appearance: none;
}
.formulaire select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0C' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center / 12px no-repeat;
}
.formulaire textarea { resize: vertical; }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible { outline: 0; border-bottom-color: var(--bordeaux); box-shadow: 0 2px 0 var(--bordeaux); }
.formulaire .bouton { min-height: 64px; font-size: 19px; }
.formulaire .note a { text-decoration: underline; }
@media (min-width: 800px) {
  .formulaire { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .formulaire__large { grid-column: 1 / -1; }
}

.bande--section { margin-top: 30px; }
.bande--section img { width: min(78vw, 440px); height: auto; aspect-ratio: 3 / 4; }

/* ---------- Bande de photos des pages prestation ---------- */
.carte--photo { margin: 0; cursor: default; }
.carte--photo::after { display: none; }
.carte--photo:hover img { transform: none; }
.carte--plus { background: var(--bordeaux); width: min(70vw, 400px); }
.carte--plus::after { display: none; }
.carte--plus .carte__texte b { font-size: clamp(34px, 9vw, 52px); }
.carte--plus .carte__texte b em { margin: 0; padding: 0; background: none; color: var(--or); font: inherit; font-style: italic; }
.carte--plus .carte__texte > em { margin-top: 22px; padding: 12px 22px; font-size: 17px; }
.carte--plus:hover .carte__texte > em { background: var(--noir); color: var(--blanc); }

/* marge de fin : la dernière carte s'arrête à la même distance du bord que la première */
.realisations__piste::after { content: ""; flex: 0 0 calc(var(--gouttiere) - 16px); }
.carte--plus .carte__texte > em { white-space: nowrap; }

/* ---------- Dépôt de fichiers (CV, lettre) ---------- */
.formulaire .depot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 132px;
  padding: 20px 22px;
  border: 1.5px dashed var(--noir);
  border-radius: var(--rayon);
  color: var(--gris);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.formulaire .depot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.formulaire .depot b { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; color: var(--noir); }
.formulaire .depot b span { font-family: var(--police); font-size: 15px; }
.formulaire .depot__fichier { color: var(--noir); font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.formulaire .depot.est-survole { background: #F6F1F2; border-color: var(--bordeaux); }
.formulaire .depot.est-rempli { border-style: solid; border-color: var(--bordeaux); }
.formulaire .depot.est-rempli .depot__aide { display: none; }
.formulaire .depot:focus-within { outline: 3px solid var(--bordeaux); outline-offset: 3px; }

/* ---------- Liste déroulante « Prestations » (grand écran) ---------- */
.deroulant { position: relative; display: none; }
.deroulant__bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.deroulant__bouton svg { width: 11px; height: 8px; transition: transform .2s; }
.deroulant__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.deroulant__liste {
  position: absolute;
  top: calc(100% + 10px);
  left: -24px;
  min-width: 320px;
  padding: 10px 24px 14px;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--noir);
  box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 0 0 1px var(--ligne);
}
.entete nav .deroulant__liste a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.entete nav .deroulant__liste a:hover { color: var(--bordeaux); }
.deroulant__liste em { font-style: italic; color: var(--bordeaux); }
.entete nav .deroulant__liste a.deroulant__tout { margin-top: 6px; border: 0; font-family: var(--police); font-size: 15px; color: var(--gris); }
@media (min-width: 800px) {
  .deroulant { display: block; }
}

/* ---------- Galerie : texte d'accompagnement d'un chantier ---------- */
.galerie__texte {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0;
  padding: 90px max(22px, 6vw) max(28px, 5vh);
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.88) 45%);
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-style: italic;
  line-height: 1.3;
  text-wrap: pretty;
}
.galerie__texte[hidden] { display: none; }
@media (min-width: 800px) { .galerie__texte { padding-right: 34vw; } }

/* =====================================================================
   Version « pro » : phrase qui s'écrit, menu noir plein écran, portfolio
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.curseur { display: inline-block; width: .045em; height: .82em; margin-left: .06em; background: currentColor; vertical-align: -.06em; animation: clignoter 1s steps(1) infinite; }
@keyframes clignoter { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curseur { animation: none; } }

.hero .hero__phrase { max-width: none; font-size: clamp(46px, 12.5vw, 132px); }
.bouton--accent { background: #C8202C; color: var(--blanc); }
.bouton--accent:hover { background: var(--blanc); color: var(--noir); }
.hero .hero__portfolio { display: none; }
@media (min-width: 800px) {
  .hero .hero__portfolio { display: inline-flex; position: absolute; right: var(--gouttiere); bottom: clamp(40px, 9vh, 96px); margin: 0; min-height: 60px; padding: 0 34px; font-size: 19px; }
}

/* ----- Menu noir plein écran ----- */
.menu { padding: 0; background: #000; color: var(--blanc); }
.menu::backdrop { background: #000; }
.menu[open] {
  display: grid;
  grid-template: "haut" auto "nav" 1fr "bas" auto / 1fr;
  padding: 14px var(--gouttiere) 26px;
}
.menu__haut { grid-area: haut; display: flex; align-items: center; justify-content: space-between; }
.menu .logo svg { height: 38px; }
.menu__fermer { position: static; width: 44px; height: 44px; border-radius: 0; background: none; color: var(--blanc); font-size: 26px; font-weight: 300; }
.menu nav { grid-area: nav; align-self: center; overflow-y: auto; padding: 18px 0; }
.menu nav a {
  display: block;
  padding: 7px 0;
  border: 0;
  font-family: var(--police);
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color .2s, transform .2s;
}
.menu nav a:hover, .menu nav a:focus-visible { color: #8E8E8E; transform: translateX(6px); }
.menu__phrase { display: none; }
.menu__bas { grid-area: bas; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.menu__bas a:hover { color: #8E8E8E; }
@media (min-width: 800px) {
  .menu-bouton { display: flex; }
  .menu[open] { grid-template: "haut haut" auto "nav phrase" 1fr "bas bas" auto / minmax(320px, 38%) 1fr; padding: 22px var(--gouttiere) 34px; }
  .menu .logo svg { height: 46px; }
  .menu__phrase {
    grid-area: phrase;
    display: block;
    align-self: end;
    padding-bottom: 6vh;
    font-family: var(--serif);
    font-size: clamp(46px, 6vw, 96px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .menu__phrase em { font-style: italic; color: var(--or); }
}

/* ----- Portfolio ----- */
.portfolio { background: #000; color: var(--blanc); }
.portfolio__tete { display: flex; flex-direction: column; justify-content: flex-end; min-height: 56vh; padding: 130px var(--gouttiere) 40px; }
.portfolio__tete .fil { font-size: 16px; color: #A9A9A9; }
.portfolio__tete .fil a { text-decoration: underline; }
.portfolio__tete .titre { margin-top: 10px; max-width: none; font-size: clamp(64px, 16vw, 200px); }
.portfolio__tete .titre em { color: var(--or); }
.portfolio__tete p:last-child { margin-top: 16px; font-size: 20px; color: #C9C9C9; }
.portfolio__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 38px 14px;
  padding: 20px var(--gouttiere) clamp(70px, 10vw, 130px);
}
.projet { display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.projet__nom { font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
.projet__lieu { margin-top: 3px; min-height: 2.5em; font-size: clamp(12px, 1.1vw, 15px); line-height: 1.25; text-transform: uppercase; color: #A9A9A9; }
.projet__image { display: block; margin-top: 10px; aspect-ratio: 1 / 1; overflow: hidden; background: #151515; }
.projet__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.projet:hover .projet__image img, .projet:focus-visible .projet__image img { transform: scale(1.06); }
.portfolio .contact { color: var(--noir); }
@media (min-width: 700px) { .portfolio__grille { grid-template-columns: repeat(3, 1fr); gap: 56px 18px; } }
@media (min-width: 1100px) { .portfolio__grille { grid-template-columns: repeat(5, 1fr); } }

.projet__nom { display: flex; align-items: flex-end; min-height: 2.3em; }

.projet__lieu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.5em; min-height: 0; }

/* =====================================================================
   Réglages propres à Artin (pour ne pas copier le modèle)
   ===================================================================== */
/* Mot qui s'écrit : doré, mais droit */
.hero__phrase em { font-style: normal; }

/* ----- Menu : liens numérotés en Cormorant, bloc contact à droite ----- */
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; font-family: var(--serif); font-size: clamp(27px, 7vw, 46px); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
.menu nav a small { flex: none; width: 1.9em; font-family: var(--police); font-size: 13px; letter-spacing: .08em; color: #8E8E8E; }
.menu nav a:hover, .menu nav a:focus-visible { color: var(--or); transform: translateX(8px); }
.menu__cote { display: none; }
.menu__bas { color: #A9A9A9; font-size: 15px; align-items: center; }
.menu__bas a { color: var(--blanc); }
@media (min-width: 800px) {
  .menu[open] { grid-template: "haut haut" auto "nav cote" 1fr "bas bas" auto / 1fr minmax(320px, 36%); }
  .menu__cote { grid-area: cote; display: block; align-self: end; padding-bottom: 6vh; }
  .menu__cote p { font-family: var(--serif); font-size: clamp(38px, 4.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
  .menu__cote .bouton { margin-top: 26px; }
}

/* ----- Pages sombres : en-tête noir, toujours lisible ----- */
.page-sombre .entete, .page-sombre .entete.est-pleine { background: #000; color: var(--blanc); box-shadow: 0 1px 0 #1E1E1E; }
.page-sombre .entete.est-pleine .logo__blanc { display: inline; }
.page-sombre .entete.est-pleine .logo__noir { display: none; }
.page-sombre .entete.est-pleine .menu-bouton i { background: var(--blanc); }
.page-sombre .entete.est-pleine .menu-bouton i:last-child { background: #C8202C; }
.page-sombre .entete .bouton, .page-sombre .entete.est-pleine .bouton { background: var(--blanc); color: var(--noir); }

/* ----- Portfolio : première référence en grand, légendes sous l'image ----- */
.portfolio__tete { min-height: 46vh; }
.portfolio__tete .titre { font-size: clamp(60px, 15vw, 180px); }
.portfolio__grille { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
.projet { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-content: start; }
.projet__image { grid-column: 1 / -1; margin: 0 0 14px; aspect-ratio: 4 / 5; border-radius: var(--rayon); }
.projet__num { grid-row: 2 / span 2; padding-top: 5px; font-size: 13px; letter-spacing: .08em; color: #8E8E8E; }
.projet__nom { display: block; min-height: 0; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; text-transform: none; }
.projet__lieu { display: block; height: auto; margin-top: 5px; font-size: 14px; line-height: 1.3; text-transform: none; color: #A9A9A9; -webkit-line-clamp: unset; }
.projet:first-child { grid-column: 1 / -1; }
.projet:first-child .projet__image { aspect-ratio: 4 / 3; }
.projet:first-child .projet__nom { font-size: clamp(30px, 4vw, 56px); }
@media (min-width: 700px) { .portfolio__grille { grid-template-columns: repeat(3, 1fr); gap: 50px 18px; } }
@media (min-width: 1100px) {
  .portfolio__grille { grid-template-columns: repeat(4, 1fr); }
  .projet:first-child { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto auto; }
  .projet:first-child .projet__image { aspect-ratio: auto; min-height: 0; }
}

/* =====================================================================
   Fiche d'un chantier : fond blanc, photos en grand les unes sous les autres
   ===================================================================== */
.galerie { background: var(--blanc); color: var(--noir); overflow-y: auto; overscroll-behavior: contain; }
.galerie::backdrop { background: var(--blanc); }
.galerie__barre {
  position: sticky;
  inset: 0 0 auto 0;
  padding: 12px var(--gouttiere);
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--ligne);
  font-size: 15px;
  color: var(--gris);
}
.galerie__barre b { font-size: 20px; color: var(--noir); }
.galerie__fermer { flex: none; background: var(--noir); color: var(--blanc); width: 44px; height: 44px; font-size: 18px; }
.galerie__corps { max-width: 1240px; margin: 0 auto; padding: clamp(36px, 7vw, 90px) var(--gouttiere) clamp(50px, 8vw, 110px); }
.galerie__titre { font-size: clamp(42px, 9vw, 110px); }
.galerie__lieu { margin-top: 12px; font-size: 18px; color: var(--gris); }
.galerie__lieu:empty { display: none; }
.galerie__texte {
  position: static;
  max-width: 34em;
  margin-top: clamp(22px, 3vw, 40px);
  padding: 0;
  background: none;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: normal;
  line-height: 1.28;
}
.galerie__photos { display: grid; gap: clamp(14px, 3vw, 44px); height: auto; margin-top: clamp(30px, 5vw, 70px); overflow: visible; scroll-snap-type: none; }
.galerie__photos img { width: 100%; height: auto; max-height: none; object-fit: cover; border-radius: var(--rayon); background: #F2F2F2; }
.galerie__fin { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--noir); }
.galerie__fin .bouton--contour { background: transparent; color: var(--noir); box-shadow: inset 0 0 0 1.5px var(--noir); }
.galerie__fin .bouton--contour:hover { background: var(--noir); color: var(--blanc); }
.galerie__fleche { display: none !important; }
@media (min-width: 800px) { .galerie__texte { padding-right: 0; } }

.galerie__barre > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Bouton WhatsApp de l'en-tête ---------- */
.entete nav a.wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: 16px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.entete nav a.wa svg { width: 22px; height: 22px; }
.entete nav a.wa span { display: none; }
.entete nav a.wa:hover { background: #25D366; color: #fff; box-shadow: none; }
@media (max-width: 420px) {
  .entete nav { gap: 8px; }
  .entete .logo svg { height: 32px; }
  .entete .bouton { padding: 0 15px; }
}

@media (min-width: 800px) {
  .entete nav a.wa { width: auto; padding: 0 18px 0 14px; }
  .entete nav a.wa span { display: inline; }
}

/* =====================================================================
   Bande des réalisations épurée : cartes au même format, mêmes espaces
   ===================================================================== */
.realisations__cadre { padding: 84px 0 22px; }
.realisations__tete { padding-bottom: clamp(18px, 3vh, 34px); }
.realisations__tete .titre { font-size: clamp(38px, 9vw, 76px); }
.realisations__tete p { margin-top: 8px; font-size: 18px; color: var(--gris); }
.realisations__piste { align-items: center; gap: clamp(14px, 4vw, 26px); }
.realisations .carte { width: auto; height: min(100%, 105vw); aspect-ratio: 2 / 3; }
.realisations .carte::after { background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 42%); }
.realisations .carte__texte { inset: auto 20px 20px 20px; }
.realisations .carte__texte b { font-size: clamp(24px, 6vw, 32px); }
.realisations .carte__texte span { font-size: 15px; opacity: .92; }
.realisations .carte__texte em { margin-top: 12px; padding: 6px 14px; font-size: 14px; }
.realisations__pied { display: flex; justify-content: center; padding: clamp(16px, 3vh, 30px) var(--gouttiere) 0; }
.realisations__pied .bouton { min-height: 52px; padding: 0 34px; }
.realisations__piste::after { flex-basis: calc(var(--gouttiere) - clamp(14px, 4vw, 26px)); }
@media (min-width: 800px) {
  .realisations .carte { width: auto; height: min(100%, 660px); }
}

.realisations__piste::after { align-self: stretch; min-height: 1px; }

/* Portfolio : la grande carte remplit bien sa hauteur (correctif Safari) */
@media (min-width: 1100px) {
  .projet:first-child { grid-template-rows: minmax(0, 1fr) auto auto; }
  .projet:first-child .projet__image { position: relative; height: 100%; min-height: 320px; }
  .projet:first-child .projet__image img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.projet:first-child .projet__nom { font-size: clamp(28px, 3vw, 44px); }

/* ---------- Le geste du crépi ---------- */
.crepi { position: relative; margin-top: clamp(24px, 4vw, 44px); }
.crepi__mur { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--rayon); background: #CFCAC2; touch-action: pan-y; cursor: grab; }
.crepi__mur:active { cursor: grabbing; }
.crepi__aide {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(11,11,12,.72);
  color: var(--blanc);
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .4s;
}
.crepi.est-essaye .crepi__aide { opacity: 0; }
@media (min-width: 800px) { .crepi__mur { aspect-ratio: 16 / 9; } }

/* Carte sur fond clair (logo d'un client) : texte foncé, sans voile */
.carte--claire { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne); }
.carte--claire::after { display: none; }
.realisations .carte--claire .carte__texte { color: var(--noir); }
.realisations .carte--claire .carte__texte span { color: var(--gris); opacity: 1; }
.realisations .carte--claire .carte__texte em { background: var(--noir); color: var(--blanc); }

.projet[data-chantier="nestle"] .projet__image { background: var(--blanc); }
.projet[data-chantier="nestle"] .projet__image img { object-position: 50% 0; }

/* ---------- Message sur l'écran Plâtrerie & peinture ---------- */
.metier .metier__message {
  position: absolute;
  max-width: none;
  top: calc(96px + 4vh);
  left: var(--gouttiere);
  right: var(--gouttiere);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 8.5vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 22px rgba(0,0,0,.45);
}
.metier__message span { display: block; opacity: 0; will-change: transform, opacity; }
.metier__message span + span { color: var(--or); }
@media (min-width: 800px) { .metier .metier__message { left: auto; max-width: 46vw; text-align: right; } }
@media (prefers-reduced-motion: reduce) { .metier__message span { opacity: 1; transform: none !important; } }

@media (min-width: 800px) { .metier .metier__message span { white-space: nowrap; } }

/* Barre de progression en bas des écrans prestation */
.metier__barre { position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 16px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; pointer-events: none; }
.metier__barre i { display: block; height: 100%; width: 0; background: var(--or); }

/* =====================================================================
   Écrans prestation : le texte reste en bas pendant qu'on défile,
   et le message remplace le titre
   ===================================================================== */
.fixe.metier { min-height: 175vh; min-height: 175svh; }
.metier__texte { position: sticky; bottom: clamp(30px, 7vh, 80px); }
.metier__pile { display: grid; }
.metier__pile > * { grid-area: 1 / 1; align-self: end; }
.metier__titre { will-change: transform, opacity; }
.metier .metier__message {
  position: static;
  top: auto; left: auto; right: auto;
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: clamp(50px, 14vw, 128px);
  line-height: .95;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 22px rgba(0,0,0,.5);
}
.metier .metier__message span { white-space: normal; }
@media (min-width: 800px) { .metier .metier__message { left: auto; max-width: none; text-align: left; } .metier .metier__message span { white-space: normal; } }
.metier__texte .metier__barre { position: static; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .metier .metier__message { display: none; } }

/* Remplacement lent et lisible : balayage de gauche à droite */
.fixe.metier { min-height: 240vh; min-height: 240svh; }
.metier__titre { width: fit-content; }
.metier .metier__message span { width: fit-content; }

/* Écrans prestation : deuxième ligne du message et barre en rouge (rouge du logo) */
.metier .metier__message span + span { color: #D2232F; }
.metier__barre i { background: #D2232F; }

/* Portfolio : l'image ne doit JAMAIS dicter la hauteur de sa ligne (Safari).
   Safari dimensionnait la ligne de la carte sur la taille naturelle de la
   photo, pas sur le cadre 4/3 ou 4/5 : la photo restait à sa place et un
   grand vide noir s'ouvrait avant le titre. Hors du flux, la photo remplit
   son cadre et c'est le cadre seul qui compte — à toutes les largeurs (le
   correctif ne valait jusqu'ici qu'au-dessus de 1100 px). */
.projet__image { position: relative; }
.projet__image img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Accueil : la première page dure plus longtemps. La photo est déjà fixe ;
   la section s'allonge et la phrase avec ses boutons restent collées en bas
   de l'écran pendant qu'on défile. La section suivante n'arrive qu'après. */
.hero--long { min-height: 175vh; min-height: 175svh; }
.hero--long .hero__contenu { position: sticky; bottom: clamp(40px, 9vh, 96px); display: flex; flex-direction: column; }
/* Le bouton Portfolio suit la phrase : il se place dans le bloc collé, en bas à droite. */
@media (min-width: 800px) {
  .hero--long .hero .hero__portfolio, .hero--long .hero__portfolio { right: 0; bottom: 0; }
}

/* Accueil · haut de page : les réalisations défilent en grand, l'image
   respire. Les photos se superposent (fixes, comme l'image d'avant) et
   passent en fondu avec un léger zoom ; le voile sombre est allégé et la
   ligne de sous-titre retirée : la photo prend la place. */
.fixe > img.hero__defile { opacity: 0; transform: scale(1.05); transition: opacity 1.8s ease, transform 9s linear; }
.fixe > img.hero__defile.est-active { opacity: 1; transform: scale(1); }
.hero--long::before { background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.18) 100%); }
@media (prefers-reduced-motion: reduce) { .fixe > img.hero__defile { transition: none; transform: none; } }

/* Métiers : la 2e ligne du message (« & reconstruire. ») était en rouge
   foncé, illisible sur les photos sombres. Elle passe en blanc, en italique
   pour garder la différence avec la 1re ligne. */
.metier .metier__message span + span { color: #fff; font-style: italic; }
.metier .metier__message { text-shadow: 0 2px 18px rgba(0,0,0,.45); }

/* Galerie d'un chantier : les photos étaient en pleine largeur, une par
   écran. Elles passent en grille, 2 colonnes (3 sur grand écran), même
   format 4:3 ; la 1re reste en grand pour ouvrir le chantier. */
.galerie__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
.galerie__photos img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.galerie__photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 1100px) { .galerie__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .galerie__photos { grid-template-columns: 1fr; } .galerie__photos img, .galerie__photos img:first-child { aspect-ratio: 4 / 3; } }

/* Les mots en couleur posés sur les photos (« Nous plâtrons… ») passent de
   l'or doux à l'ambre vif : l'or se perdait sur les photos claires. */
.fixe .titre em { color: #FFB000; }

/* =====================================================================
   Écrans prestation, version « défilement » :
   la photo reste fixe, le titre monte, puis le message monte à son tour,
   puis un moment de photo seule avant l'écran suivant.
   ===================================================================== */
.fixe.metier { min-height: 0; justify-content: flex-start; padding: 62vh var(--gouttiere) 58vh; padding: 62svh var(--gouttiere) 58svh; }
.metier__texte { position: static; display: flex; flex-direction: column; align-items: flex-start; }
.metier__pile { display: contents; }
.metier__pile > * { grid-area: auto; }
.metier__titre { order: 1; width: auto; clip-path: none !important; }
.metier__texte > p { order: 2; }
.metier__texte > a { order: 3; }
.metier__texte .metier__barre { order: 4; align-self: stretch; }
.metier .metier__message { order: 5; margin-top: 78vh; margin-top: 78svh; }
@media (prefers-reduced-motion: reduce) { .metier .metier__message { display: block; } .metier .metier__message span { opacity: 1 !important; clip-path: none !important; } }

/* les blocs du titre et du message restent calés à gauche */
.metier__pile > * { align-self: flex-start; }

/* =====================================================================
   La villa : une coupe de maison, chaque métier pointé vers sa partie
   ===================================================================== */
.villa { padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 110px); background: var(--blanc); }
.villa__tete { padding: 0 var(--gouttiere); }
.villa__tete .titre { font-size: clamp(42px, 10vw, 96px); }
.villa__tete p { margin-top: 12px; max-width: 34em; font-size: 18px; color: var(--gris); }
.villa__dessin { display: block; width: 100%; max-width: 1280px; height: auto; margin: clamp(10px, 3vw, 30px) auto 0; padding: 0 var(--gouttiere); overflow: visible; }

.villa__zone > * { fill: #D2232F; opacity: 0; cursor: pointer; transition: opacity .3s; }
.villa__zone[data-zone="energie"] > * { fill: none; stroke: #D2232F; pointer-events: stroke; }
.villa__zone.est-vise > * { opacity: .32; }
.villa__zone[data-zone="energie"].est-vise > * { opacity: .9; }

.villa__trait { fill: none; stroke: #0B0B0C; stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0; transition: opacity .6s, stroke .25s; pointer-events: none; }
.villa__point { fill: #D2232F; opacity: 0; transition: opacity .6s, r .25s; pointer-events: none; }
.villa__label { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; cursor: pointer; }
.villa__label:focus { outline: none; }
.villa__label:focus-visible image { outline: 3px solid #D2232F; }
.villa__titre { font-family: var(--serif); font-size: 25px; font-weight: 500; fill: var(--noir); transition: fill .2s; }
.villa__voir { font-family: var(--police); font-size: 14px; fill: #D2232F; }
.villa.est-visible .villa__trait, .villa.est-visible .villa__point, .villa.est-visible .villa__label { opacity: 1; transform: none; }
.villa.est-visible .villa__trait { transition-delay: calc(var(--i, 0) * 70ms); }
.villa__label { transition-delay: calc(var(--i) * 90ms); }
.villa.a-une-cible .villa__label:not(.est-vise) { opacity: .3; }
.villa.a-une-cible .villa__trait:not(.est-vise) { opacity: .25; }
.villa__trait.est-vise { stroke: #D2232F; stroke-width: 2; stroke-dasharray: none; }
.villa__point.est-vise { r: 7; }
.villa__label.est-vise .villa__titre { fill: #D2232F; }

.villa__repere { display: none; cursor: pointer; }
.villa__repere circle { fill: #D2232F; stroke: #fff; stroke-width: 3; }
.villa__repere text { font-family: var(--police); font-size: 15px; font-weight: 600; fill: #fff; text-anchor: middle; pointer-events: none; }
.villa__repere.est-vise circle { fill: var(--noir); }

.villa__liste { display: none; list-style: none; margin: 26px 0 0; padding: 0 var(--gouttiere); }
.villa__liste a { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--ligne); transition: background .2s; }
.villa__liste li:last-child a { border-bottom: 1px solid var(--ligne); }
.villa__liste img { flex: none; width: 84px; height: 62px; object-fit: cover; border-radius: 10px; }
.villa__liste span { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.1; }
.villa__liste small { display: block; margin-bottom: 2px; font-family: var(--police); font-size: 13px; color: #D2232F; }
.villa__liste a.est-vise { background: #F7ECEC; }

@media (max-width: 799px) {
  .villa__label, .villa__trait, .villa__point { display: none; }
  .villa__repere { display: inline; }
  .villa__liste { display: block; }
  .villa__dessin { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .villa__trait, .villa__point, .villa__label { transition: none; } }

/* =====================================================================
   La villa, version architecte : les métiers en grand à gauche,
   le plan numéroté à droite
   ===================================================================== */
.villa--archi .villa__grille { display: grid; gap: 30px; margin-top: clamp(26px, 4vw, 54px); padding: 0 var(--gouttiere); }
.villa--archi .villa__plan { position: relative; order: -1; }
.villa--archi .villa__dessin { padding: 0; margin: 0; max-width: none; }
.villa--archi .villa__repere { display: inline; }
.villa__index { list-style: none; margin: 0; padding: 0; counter-reset: none; border-bottom: 1px solid var(--noir); }
.villa__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "num nom fleche" ". desc fleche";
  column-gap: 12px;
  align-items: baseline;
  padding: 16px 0 18px;
  border-top: 1px solid var(--noir);
  transition: color .2s, padding .25s;
}
.villa__num { grid-area: num; font-size: 13px; letter-spacing: .08em; color: #D2232F; font-variant-numeric: tabular-nums; }
.villa__nom { grid-area: nom; font-family: var(--serif); font-size: clamp(30px, 7.5vw, 54px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.villa__desc { grid-area: desc; margin-top: 6px; font-size: 15px; color: var(--gris); }
.villa__fleche { grid-area: fleche; align-self: center; font-size: 22px; opacity: .25; transition: opacity .2s, transform .25s; }
.villa__item:hover, .villa__item:focus-visible, .villa__item.est-vise { color: #D2232F; }
.villa__item:hover .villa__fleche, .villa__item.est-vise .villa__fleche { opacity: 1; transform: translateX(4px); }
.villa--archi.a-une-cible .villa__item:not(.est-vise) .villa__nom { opacity: .35; }
.villa__nom { transition: opacity .25s; }

.villa__apercu {
  position: absolute;
  left: 0;
  bottom: 34px;
  width: min(42%, 230px);
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.villa__apercu img { width: 100%; height: 100%; object-fit: cover; }
.villa__apercu.est-visible { opacity: 1; transform: none; }
.villa__legende { margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); text-align: right; }
.villa--archi .villa__liste { display: none !important; }

@media (min-width: 1000px) {
  .villa--archi .villa__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
  .villa--archi .villa__plan { order: 0; position: sticky; top: 100px; }
  .villa__item { padding: 20px 0 22px; }
  .villa__item:hover { padding-left: 8px; }
  .villa__nom { font-size: clamp(36px, 3.6vw, 58px); }
}

.villa--archi .villa__dessin { overflow: hidden; }
.villa__apercu { top: 0; bottom: auto; }

/* =====================================================================
   Ouverture « ART — IN » : les deux mots aux coins, l'écran bordeaux,
   puis tout l'écran devient l'apostrophe d'ART'IN
   ===================================================================== */
.intro--art { display: block; background: #0B0B0C; color: #fff; }
.intro--art::after { display: none; }
.intro--art.ix-blanc { background: #fff; }
.ix-fond { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #7A1F2E; opacity: 0; transition: opacity .6s ease; }
.ix-bordeaux .ix-fond { opacity: 1; }
.ix-ligne { position: absolute; top: 58px; left: 150px; right: 110px; display: flex; align-items: center; gap: 16px; transition: opacity .4s; }
.ix-ligne i { flex: 1; height: 1px; background: rgba(255,255,255,.55); transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .3s; }
.ix-ligne i:first-child { transform-origin: right; }
.ix-ligne i:last-child { transform-origin: left; }
.ix-ligne b { width: 9px; height: 14px; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; background: #C8202C; opacity: 0; transition: opacity .5s .5s; }
.ix-pret .ix-ligne i { transform: scaleX(1); }
.ix-pret .ix-ligne b { opacity: 1; }
.ix-phrase { position: absolute; left: 20px; right: 20px; top: 50%; margin: 0; transform: translateY(calc(-50% + 18px)); text-align: center; font-family: var(--serif); font-size: clamp(44px, 9vw, 124px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; opacity: 0; transition: opacity .8s .45s, transform 1s cubic-bezier(.2,.7,.2,1) .45s; }
.ix-pret .ix-phrase { opacity: 1; transform: translateY(-50%); }
.ix-bordeaux .ix-phrase, .ix-bordeaux .ix-ligne { opacity: 0; transition: opacity .45s; }
.ix-logo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(64px, 15vw, 200px); font-weight: 600; line-height: 1; letter-spacing: .03em; }
.ix-art, .ix-in { display: inline-block; transform-origin: 0 0; opacity: 0; transition: opacity .5s .1s, color .6s; }
.ix-pret .ix-art, .ix-pret .ix-in { opacity: 1; }
.ix-blanc .ix-art, .ix-blanc .ix-in { color: #0B0B0C; }
.ix-trou { display: inline-block; width: .13em; height: .36em; margin: 0 .06em; transform: translateY(-.3em); }
@media (max-width: 599px) { .ix-ligne { top: 36px; left: 96px; right: 66px; } }

/* Ouverture : les mots s'écrivent lettre par lettre */
.ix-art i, .ix-in i, .ix-projet i { font-style: normal; opacity: 0; transition: opacity .12s; }
.ix-art i.est-ecrite, .ix-in i.est-ecrite, .ix-projet i.est-ecrite { opacity: 1; }
.ix-art, .ix-in { opacity: 1; }
.ix-projet { position: absolute; left: 40px; right: 40px; bottom: 44px; margin: 0; font-family: var(--serif); font-size: clamp(40px, 8vw, 112px); font-weight: 500; line-height: 1; letter-spacing: .02em; transition: opacity .5s, transform .6s cubic-bezier(.7,0,.2,1); }
.ix-bordeaux .ix-projet { opacity: 0; transform: translateY(60px); }
@media (max-width: 599px) { .ix-projet { left: 20px; bottom: 34px; } }

/* =====================================================================
   Ouverture, version « zone de texte » : curseur qui clignote,
   ART et IN en moyen en haut à gauche, YOUR PROJECT en bas,
   puis le tout se pose sur le vrai logo
   ===================================================================== */
.intro--art .ix-logo, .intro--art .ix-ligne, .intro--art .ix-phrase { display: none; }
.ix-ligne1 { position: absolute; top: 46px; left: 40px; display: flex; gap: .42em; font-family: var(--serif); font-size: clamp(54px, 9vw, 128px); font-weight: 600; line-height: 1; letter-spacing: .02em; }
.ix-mot { display: inline-block; color: #fff; transition: color .5s; }
.ix-mot i { font-style: normal; opacity: 0; }
.ix-mot i.est-ecrite { opacity: 1; }
.intro--art .ix-projet { position: absolute; left: 40px; right: auto; bottom: 46px; font-family: var(--serif); font-size: clamp(40px, 7vw, 100px); font-weight: 500; line-height: 1; letter-spacing: .02em; transition: color .5s, opacity .5s, transform .6s cubic-bezier(.7,0,.2,1); }
.ix-curseur { position: absolute; left: 0; top: 0; width: 3px; height: 60px; background: #fff; animation: ix-clignote 1s steps(1) infinite; transition: transform .12s ease-out; }
.ix-curseur.est-cache { opacity: 0; animation: none; transition: opacity .2s; }
@keyframes ix-clignote { 50% { opacity: 0; } }
.ix-mot.ix-orange { color: #F08A3C; }
.ix-mot.ix-rouge { color: #E2302F; }
.ix-bordeaux .ix-mot { color: #fff; }
.ix-bordeaux .ix-projet { opacity: 0; transform: translateY(60px); }
.ix-blanc .ix-mot { color: #0B0B0C; }
.ix-vrai { position: absolute; left: 50%; top: 50%; width: min(74vw, 780px); height: auto; transform: translate(-50%, -50%); overflow: visible; }
.ix-vrai .ix-image { opacity: 0; transition: opacity .45s; }
.ix-vrai .ix-carres { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.ix-logo-final .ix-vrai .ix-image { opacity: 1; }
.ix-logo-final .ix-mot, .ix-logo-final .ix-fond { opacity: 0; transition: opacity .45s; }
.ix-carres-la .ix-vrai .ix-carres { opacity: 1; transform: none; }
@media (max-width: 599px) { .ix-ligne1 { top: 30px; left: 20px; } .intro--art .ix-projet { left: 20px; bottom: 34px; } }

/* =====================================================================
   Ouverture « rideau » : les couleurs montent, le logo se pose, le rideau se lève
   ===================================================================== */
.intro--rideau { display: block; background: #0B0B0C; overflow: hidden; opacity: 1; visibility: visible; animation: rideau-leve .75s cubic-bezier(.7,0,.2,1) 2.6s forwards; }
.intro--rideau::after { display: none; }
.intro--rideau.est-leve { animation: rideau-leve .55s cubic-bezier(.7,0,.2,1) forwards; }
.intro--rideau span { position: absolute; inset: 0; transform: translateY(100%); animation: rideau-monte .55s cubic-bezier(.7,0,.2,1) forwards; }
.intro--rideau span:nth-child(1) { background: #F5F2EC; animation-delay: .1s; }
.intro--rideau span:nth-child(2) { background: #C9A876; animation-delay: .38s; }
.intro--rideau span:nth-child(3) { background: #C8202C; animation-delay: .66s; }
.intro--rideau span:nth-child(4) { background: #7A1F2E; animation-delay: .94s; }
.rideau__logo { position: absolute; left: 50%; top: 50%; width: min(70vw, 620px); height: auto; transform: translate(-50%, -50%); opacity: 0; animation: rideau-pose .55s cubic-bezier(.2,.8,.2,1) 1.5s forwards; }
@keyframes rideau-monte { to { transform: translateY(0); } }
@keyframes rideau-pose { from { opacity: 0; transform: translate(-50%, -30%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes rideau-leve { to { transform: translateY(-100%); visibility: hidden; } }

/* =====================================================================
   Retour aux écrans prestation de base : une photo fixe plein écran,
   le numéro, le titre, la phrase et le bouton en bas
   ===================================================================== */
.fixe.metier { min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding: 120px var(--gouttiere) clamp(40px, 9vh, 96px); }
.metier__texte { position: static; display: flex; flex-direction: column; align-items: flex-start; }
.metier__titre { clip-path: none !important; opacity: 1 !important; transform: none !important; }

/* =====================================================================
   Prestations : bande horizontale de grandes cartes (titre + pilules,
   bulle « Voir » qui suit la souris)
   ===================================================================== */
.services .realisations__piste { align-items: center; }
.services .carte { height: min(100%, 118vw); aspect-ratio: 4 / 5; width: auto; border-radius: 28px; }
.services .carte::after { background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
.services .carte__texte { inset: auto 22px 22px 22px; }
.services .carte__texte b { font-family: var(--serif); font-size: clamp(34px, 8vw, 66px); font-weight: 500; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.service__tags { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.service__tags i { padding: 8px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: clamp(14px, 1.3vw, 19px); font-style: normal; }
.service__voir { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: var(--rouge, #C8202C); color: #fff; font-size: 18px; font-weight: 600; pointer-events: none; transform: translate(var(--x, 50%), var(--y, 40%)) scale(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (min-width: 800px) {
  .services .carte { height: min(100%, 680px); aspect-ratio: 4 / 5; cursor: none; }
  .services .service--large { aspect-ratio: 6 / 5; }
  .services .carte:hover .service__voir { transform: translate(var(--x), var(--y)) scale(1); }
}

/* =====================================================================
   Accueil : « La rénovation, pensée pour vous » en très grand,
   étalé sur toute la largeur de la photo
   ===================================================================== */
.hero__grand {
  position: absolute; z-index: 2; top: clamp(96px, 13vh, 130px); left: var(--gouttiere); right: var(--gouttiere);
  display: block; margin: 0; color: #fff; font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 17vw, 120px); line-height: .9; letter-spacing: -0.025em;
  text-shadow: 0 2px 30px rgba(0,0,0,.18); pointer-events: none;
}
.hero__grand > span[aria-hidden] { display: grid; grid-template-columns: 1fr; }
.hg { display: block; opacity: 0; transform: translateY(.35em); animation: hg-monte 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.hg--2 { justify-self: end; animation-delay: .15s; }
.hg--3 { animation-delay: .3s; }
@keyframes hg-monte { to { opacity: 1; transform: none; } }
.intro-en-cours .hg { animation-play-state: paused; }
@media (min-width: 800px) {
  .hero__grand { font-size: min(10.4vw, 21vh); left: 1.2vw; right: 1.2vw; }
  .hero__grand > span[aria-hidden] { grid-template-columns: auto 1fr; }
  .hg--3 { grid-column: 1 / -1; padding-left: 41%; margin-top: -.05em; }
}
@media (prefers-reduced-motion: reduce) { .hg { opacity: 1; transform: none; animation: none; } }
.hg { white-space: nowrap; }
@media (max-width: 799px) { .hero__grand { font-size: 14.2vw; line-height: .95; } }

/* =====================================================================
   Prestations : la carte au centre de l'écran passe au premier plan
   (pleine taille, texte qui apparaît), les autres reculent et s'assombrissent
   ===================================================================== */
.services .carte { --f: 1; transform: scale(calc(.84 + .16 * var(--f))); transform-origin: center; }
.services .carte img { filter: brightness(calc(.45 + .55 * var(--f))) saturate(calc(.4 + .6 * var(--f))); transition: transform .6s; }
.services .carte__texte > * { opacity: var(--f); transform: translateY(calc((1 - var(--f)) * 28px)); }
.services .carte__texte > b { opacity: calc(.35 + .65 * var(--f)); }
.service__num { display: block !important; margin: 0 0 14px !important; font-size: 14px; letter-spacing: .14em; color: var(--or, #C9A876); }
.service__desc { display: block !important; max-width: 34ch; margin: 12px 0 0 !important; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.45; opacity: .92; }
.services .carte::after { background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%); }
@media (prefers-reduced-motion: reduce) { .services .carte { --f: 1 !important; } }
/* la première et la dernière carte peuvent venir au centre */
.services .realisations__piste { padding-left: 12vw; }
.services .realisations__piste::after { flex: 0 0 12vw !important; }
@media (max-width: 799px) { .services .realisations__piste { padding-left: 9vw; } .services .realisations__piste::after { flex-basis: 9vw !important; } }
@media (max-width: 799px) {
  .services .carte, .services .service--large { width: 82vw; height: auto; max-height: 100%; aspect-ratio: 4 / 5.4; }
  .services .realisations__piste { gap: 12px; }
}

/* =====================================================================
   Prestations façon panneau collant : texte à gauche qui change au
   défilement, écran noir à droite avec un nuage de photos en profondeur
   ===================================================================== */
.kota { --kota-fond: #EEEDEA; position: relative; background: var(--kota-fond); color: #111; }
.kota__label { margin: 0; font-size: 15px; color: #111; }
.kota__titre { margin: 0; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: clamp(40px, 10vw, 84px); line-height: 1; letter-spacing: -0.035em; }
.kota dl { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; font-size: 15px; }
.kota dt { color: #6b6b6b; }
.kota dd { margin: 0 0 16px; color: #111; }
.kota__infos p { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.42; color: #111; }
.kota__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.kota__bas span { display: block; font-size: 17px; color: #6b6b6b; }
.kota__bas strong { display: block; margin-top: 6px; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.04em; }
.kota__bouton { flex: none; display: inline-flex; align-items: center; min-height: 58px; padding: 0 34px; border-radius: 999px; background: linear-gradient(#f4f3f1, #e2e1de); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08); color: #111; font-size: 17px; text-decoration: none; transition: transform .3s; }
.kota__bouton:hover { transform: translateY(-2px); }

/* écran noir + nuage de photos qui avancent vers nous */
.kota__ecran { position: relative; overflow: hidden; border-radius: 28px; background: #000; perspective: 700px; perspective-origin: 50% 50%; }
.kota__nuage { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; transition: opacity .9s; }
.kota__nuage.est-actif { opacity: 1; }
.kota__nuage img { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; animation: kota-avance 16s linear infinite; will-change: transform, opacity; }
@keyframes kota-avance {
  0%   { transform: translateZ(-900px); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateZ(420px); opacity: 0; }
}
.kota__liste { position: absolute; z-index: 2; right: 28px; bottom: 26px; margin: 0; padding: 0; list-style: none; text-align: right; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.55); }
.kota__liste li { transition: color .4s; }
.kota__liste li.est-actif { color: #fff; }
.kota__liste li.est-actif::after { content: " —"; }

/* téléphone : une fiche par prestation, l'une sous l'autre */
.kota__colle { display: none; }
.kota__mobile { padding: 90px var(--gouttiere) 40px; }
.kota__carte { padding: 36px 0 44px; border-bottom: 1px solid rgba(0,0,0,.1); }
.kota__carte .kota__infos { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.12); }
.kota__carte .kota__infos p { font-size: 16px; }
.kota__carte .kota__ecran { height: 62vw; margin: 28px 0; border-radius: 22px; }
.kota__carte .kota__bas strong { font-size: 40px; }
.kota__carte .kota__bouton { min-height: 52px; padding: 0 24px; font-size: 16px; }

@media (min-width: 900px) {
  .kota { height: calc(var(--n) * 100vh); }
  .kota__mobile { display: none; }
  .kota__colle { position: sticky; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 80px); height: 100vh; padding: 12px 12px 12px var(--gouttiere); }
  .kota__gauche { display: flex; flex-direction: column; padding: clamp(110px, 17vh, 170px) 0 clamp(28px, 5vh, 56px); max-width: 680px; }
  .kota__titres, .kota__piles { position: relative; display: grid; }
  .kota__titres > *, .kota__piles > * { grid-area: 1 / 1; }
  .kota__titres { margin-top: clamp(28px, 4vh, 48px); overflow: hidden; padding-bottom: .12em; }
  .kota__titre { transform: translateY(105%); transition: transform .8s cubic-bezier(.7,0,.2,1); }
  .kota__titre.est-actif { transform: none; }
  .kota__titre.est-passe { transform: translateY(-105%); }
  .kota__trait { height: 1px; margin: clamp(36px, 7vh, 80px) 0 clamp(28px, 4vh, 40px); background: rgba(0,0,0,.14); }
  .kota__infos { display: grid; grid-template-columns: 1fr 1.6fr; gap: 30px; }
  .kota__infos, .kota__pied { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  .kota__infos.est-actif, .kota__pied.est-actif { opacity: 1; transform: none; transition-delay: .25s; pointer-events: auto; }
  .kota__piles--bas { margin-top: auto; }
  .kota__colle > .kota__ecran { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kota__nuage img { animation: none; } }
.kota__colle > .kota__ecran::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); pointer-events: none; }
.kota__liste { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
/* les lettres qui descendent (g, q, p) ne sont plus coupées en bas */
@media (min-width: 900px) { .kota__titres { padding-bottom: .3em; margin-bottom: -.18em; } .kota__titre { line-height: 1.04; } }
@media (min-width: 900px) { .kota__titre { transform: translateY(130%); } .kota__titre.est-passe { transform: translateY(-130%); } .kota__titre.est-actif { transform: none; } }
/* grille : vignettes toutes au même format, coins nets et ombre douce */
.kota__nuage img { aspect-ratio: 4 / 3; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }

/* Écran noir : deux colonnes de grandes photos qui défilent en boucle */
.kota__nuage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 14px; transform-style: flat; }
.kota__col { position: relative; overflow: hidden; }
.kota__defile { display: flex; flex-direction: column; gap: 14px; animation: kota-monte 48s linear infinite; }
.kota__col--2 .kota__defile { animation-name: kota-descend; animation-duration: 56s; }
.kota__nuage .kota__defile img { position: static; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 14px; box-shadow: none; animation: none; opacity: 1; }
.kota__ecran:hover .kota__defile { animation-play-state: paused; }
@keyframes kota-monte { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes kota-descend { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
.kota__carte .kota__nuage { padding: 0 10px; gap: 10px; }
.kota__carte .kota__defile { gap: 10px; }
.kota__carte .kota__ecran { height: 105vw; }
@media (prefers-reduced-motion: reduce) { .kota__defile { animation: none; } }

/* Téléphone : même principe que sur ordinateur, l'écran reste fixe
   et la prestation change au défilement */
@media (max-width: 899px) {
  .kota { height: calc(var(--n) * 100svh); }
  .kota__mobile { display: none; }
  .kota__colle { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; height: 100vh; height: 100svh; padding: 86px var(--gouttiere) 18px; }
  .kota__gauche { display: contents; }
  .kota__label { order: 1; }
  .kota__titres { order: 2; }
  .kota__piles { order: 3; }
  .kota__colle > .kota__ecran { order: 4; flex: 1; min-height: 0; border-radius: 22px; }
  .kota__piles--bas { order: 5; }
  .kota__trait { display: none; }
  .kota__titres, .kota__piles { position: relative; display: grid; }
  .kota__titres > *, .kota__piles > * { grid-area: 1 / 1; }
  .kota__titres { overflow: hidden; padding-bottom: .25em; margin-bottom: -.25em; }
  .kota__titre { font-size: clamp(32px, 9vw, 44px); line-height: 1.04; transform: translateY(130%); transition: transform .8s cubic-bezier(.7,0,.2,1); }
  .kota__titre.est-actif { transform: none; }
  .kota__titre.est-passe { transform: translateY(-130%); }
  .kota__infos dl { display: none; }
  .kota__infos p { font-size: 15px; line-height: 1.4; }
  .kota__infos, .kota__pied { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s; pointer-events: none; }
  .kota__infos.est-actif, .kota__pied.est-actif { opacity: 1; transform: none; transition-delay: .2s; pointer-events: auto; }
  .kota__bas span { font-size: 14px; }
  .kota__bas strong { font-size: 32px; }
  .kota__bouton { min-height: 48px; padding: 0 22px; font-size: 15px; }
  .kota__liste { right: 16px; bottom: 14px; font-size: 13px; line-height: 1.5; }
  .kota__nuage { gap: 10px; padding: 0 10px; }
  .kota__defile { gap: 10px; }
}

/* =====================================================================
   Pages prestation : mise en page éditoriale (hero plein écran,
   texte d'approche en grand, liste + photo collante, galerie en mosaïque,
   étapes sur fond noir, autres prestations en grandes images)
   ===================================================================== */
.page-service { --sp-gris: #EEEDEA; }
.sp-label { margin: 0 0 18px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #6b6b6b; }
.page-service h2 { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.page-service h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--bordeaux); letter-spacing: -0.01em; }

/* hero */
.page-service .hero--page { min-height: 100vh; min-height: 100svh; justify-content: space-between; padding-top: 100px; }
.page-service .hero--page::after { background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.1) 55%, rgba(0,0,0,.35)); }
.page-service .hero--page .titre { margin-top: auto; max-width: none; font-size: clamp(56px, 11vw, 168px); line-height: .92; letter-spacing: -0.02em; }
.sp-hero__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: clamp(24px, 4vh, 44px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.3); }
.sp-hero__bas p { max-width: 36ch; margin: 0; font-size: clamp(17px, 1.5vw, 21px); }

/* approche */
.sp-intro { display: grid; gap: 10px; padding: clamp(80px, 14vh, 160px) var(--gouttiere); background: var(--sp-gris); }
.sp-intro__texte { margin: 0; font-size: clamp(24px, 3.1vw, 46px); line-height: 1.22; letter-spacing: -0.02em; color: #111; }

/* liste + photo collante */
.sp-split { display: grid; gap: 40px; padding: clamp(80px, 12vh, 140px) var(--gouttiere); }
.sp-split__photo { display: none; }
.sp-split ol { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne, #ddd); }
.sp-ligne { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--ligne, #ddd); }
.sp-ligne__num { padding-top: 6px; font-size: 13px; letter-spacing: .14em; color: #9a9a9a; transition: color .4s; }
.sp-ligne h3 { font-size: clamp(21px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: #9a9a9a; transition: color .4s; }
.sp-ligne p { margin-top: 8px; max-width: 46ch; color: #4A4A4A; }
.sp-ligne.est-actif h3 { color: #111; }
.sp-ligne.est-actif .sp-ligne__num { color: var(--rouge, #C8202C); }

/* sections de contenu (bilan, méthodes…) : titre à gauche, contenu à droite */
.page-service .bloc { padding-top: clamp(70px, 10vh, 120px); padding-bottom: clamp(70px, 10vh, 120px); border-top: 1px solid var(--ligne, #ddd); }
.page-service .bloc + .bloc { padding-top: clamp(70px, 10vh, 120px); }

/* galerie en mosaïque */
.sp-galerie { padding: clamp(70px, 10vh, 120px) var(--gouttiere); background: #111; color: #fff; }
.sp-galerie .sp-label { color: rgba(255,255,255,.6); }
.sp-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.sp-lien { color: #fff; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.sp-galerie__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sp-galerie__grille figure { margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; }
.sp-galerie__grille figure:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 16 / 11; }
.sp-galerie__grille img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.sp-galerie__grille figure:hover img { transform: scale(1.05); }

/* étapes */
.sp-etapes { padding: clamp(80px, 12vh, 140px) var(--gouttiere); background: #111; color: #F5F2EC; border-top: 1px solid rgba(255,255,255,.1); }
.sp-etapes .sp-label { color: rgba(255,255,255,.55); }
.sp-etapes h2 em { color: var(--or, #C9A876); }
.sp-etapes ol { display: grid; gap: 12px; margin: 44px 0 0; padding: 0; list-style: none; }
.sp-etapes li { padding: 28px 26px 32px; border-radius: 18px; background: #1c1c1c; }
.sp-etapes li span { display: block; font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--or, #C9A876); }
.sp-etapes li h3 { margin-top: 26px; font-size: 21px; font-weight: 500; }
.sp-etapes li p { margin-top: 8px; color: rgba(245,242,236,.65); }

/* FAQ */
.sp-faq { display: grid; gap: 30px; padding: clamp(80px, 12vh, 140px) var(--gouttiere); background: var(--sp-gris); }

/* autres prestations */
.sp-autres { padding: clamp(70px, 10vh, 120px) var(--gouttiere); }
.sp-autres__grille { display: grid; gap: 12px; }
.sp-autre { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 240px; padding: 22px; overflow: hidden; border-radius: 18px; color: #fff; text-decoration: none; }
.sp-autre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.sp-autre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%); }
.sp-autre span, .sp-autre i { position: relative; z-index: 1; }
.sp-autre span { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; }
.sp-autre i { font-style: normal; font-size: 22px; transition: transform .4s; }
.sp-autre:hover img { transform: scale(1.06); }
.sp-autre:hover i { transform: translateX(6px); }

@media (min-width: 900px) {
  .sp-intro { grid-template-columns: 1fr 2.6fr; gap: 40px; }
  .sp-split { grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
  .sp-split__photo { display: block; position: sticky; top: 96px; }
  .sp-split__cadre { position: relative; height: calc(100vh - 130px); max-height: 820px; overflow: hidden; border-radius: 22px; background: #111; }
  .sp-split__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path .9s cubic-bezier(.7,0,.2,1), transform 1.4s cubic-bezier(.2,.8,.2,1); }
  .sp-split__cadre img.est-actif { clip-path: inset(0); transform: none; z-index: 1; }
  .sp-split__cadre img.est-sortant { clip-path: inset(0); z-index: 0; }
  .sp-ligne { padding: 34px 0; cursor: default; }
  .page-service .bloc { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .page-service .bloc > h2 { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 110px; }
  .page-service .bloc > *:not(h2) { grid-column: 2; }
  .sp-galerie__grille { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .sp-galerie__grille figure { aspect-ratio: 4 / 5; }
  .sp-galerie__grille figure:nth-child(3n + 1) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .sp-galerie__grille figure:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .sp-etapes ol { grid-template-columns: repeat(4, 1fr); }
  .sp-faq { grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 6vw, 110px); }
  .sp-autres__grille { grid-template-columns: repeat(4, 1fr); }
  .sp-autre { min-height: 380px; }
}
/* la photo collante passe à droite, la liste à gauche */
@media (min-width: 900px) {
  .sp-split { grid-template-columns: 1.15fr 1fr; }
  .sp-split__photo { grid-column: 2; grid-row: 1; }
  .sp-split__liste { grid-column: 1; grid-row: 1; }
}
/* vidéos dans les galeries */
.galerie__photos video { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--rayon); background: #111; }
.sp-galerie__grille video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* crépi : l'étape en cours, en bas à gauche du mur */
.crepi__etape { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(17,17,17,.78); color: #fff; font-size: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.crepi__etape b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--or, #C9A876); color: #111; font-weight: 600; font-size: 13px; }
.crepi__etape { top: 16px; bottom: auto; }
.crepi__etape.est-termine { background: rgba(122,31,46,.92); }
.crepi__etape.est-termine b { background: #fff; color: var(--bordeaux, #7A1F2E); }
.crepi__etape.est-secoue { animation: crepi-secoue .45s; }
@keyframes crepi-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* l'étape s'affiche sous le mur, plus par-dessus */
.crepi__etape { position: static; display: inline-flex; align-items: center; margin-top: 14px; background: #111; backdrop-filter: none; -webkit-backdrop-filter: none; }
.crepi__etape.est-termine { background: var(--bordeaux, #7A1F2E); }
/* « Glissez sur le mur » en haut à droite du mur, pour ne pas gêner l'étape en dessous */
.crepi__aide { top: 16px; right: 16px; bottom: auto; left: auto; transform: none; }
/* invitation à postuler, quand le visiteur a terminé le crépi lui-même */
.crepi__invitation { position: absolute; inset: 0; bottom: auto; aspect-ratio: inherit; display: grid; place-items: center; padding: 20px; border-radius: var(--rayon); background: rgba(17,17,17,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: crepi-apparait .5s cubic-bezier(.2,.8,.2,1); }
.crepi__invitation[hidden] { display: none; }
.crepi__invitation > div { max-width: 440px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.crepi__invitation p { margin: 0; color: #4A4A4A; }
.crepi__invitation-sur { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge, #C8202C) !important; }
.crepi__invitation-titre { margin: 10px 0 12px !important; font-family: Inter, system-ui, sans-serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: #111 !important; }
.crepi__invitation-titre em { font-family: var(--serif); font-style: italic; color: var(--bordeaux, #7A1F2E); }
.crepi__invitation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@keyframes crepi-apparait { from { opacity: 0; transform: scale(.96); } }
.crepi__invitation { inset: 0; aspect-ratio: auto; }
/* fenêtre de candidature après le crépi */
dialog.crepi__invitation { position: fixed; inset: 0; margin: auto; display: block; width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: clamp(24px, 3vw, 36px); border: 0; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); backdrop-filter: none; aspect-ratio: auto; place-items: initial; }
dialog.crepi__invitation:not([open]) { display: none; }
dialog.crepi__invitation::backdrop { background: rgba(17,17,17,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.crepi__fermer { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #F1F0ED; font-size: 16px; cursor: pointer; }
.crepi__formulaire { display: grid; gap: 12px; margin-top: 20px; }
.crepi__formulaire label { display: grid; gap: 6px; font-size: 14px; color: #4A4A4A; }
.crepi__formulaire input, .crepi__formulaire select { min-height: 48px; padding: 0 14px; border: 1px solid #D6D4CF; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: #111; }
.crepi__formulaire .bouton { margin-top: 6px; justify-content: center; }
.crepi__formulaire .note { font-size: 13px; color: #6b6b6b; }
.crepi__formulaire select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
/* Fin de l'ouverture : le rideau s'efface, le logo file se poser en haut à gauche */
.intro--rideau { animation: none; transition: background-color .7s; }
.intro--rideau span { transition: opacity .7s ease .15s; }
.intro--rideau.est-ouvert { background-color: transparent; pointer-events: none; }
.intro--rideau.est-ouvert span { opacity: 0; }
.intro-en-cours .entete .logo { opacity: 0; }
.entete .logo { transition: opacity .2s; }
/* fenêtre de recrutement : bandeau photo « On recrute » */
dialog.crepi__invitation { padding: 0; overflow: auto; width: min(480px, calc(100vw - 32px)); }
.crepi__bandeau { position: relative; height: 150px; overflow: hidden; }
.crepi__bandeau img { width: 100%; height: 100%; object-fit: cover; }
.crepi__bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%); }
.crepi__bandeau span { position: absolute; z-index: 1; left: 22px; bottom: 18px; padding: 7px 14px; border-radius: 999px; background: var(--rouge, #C8202C); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.crepi__corps { padding: 24px clamp(22px, 3vw, 32px) 26px; }
.crepi__corps > p:not(.crepi__invitation-titre) { margin: 0; color: #4A4A4A; }
.crepi__invitation .crepi__invitation-titre { margin: 0 0 10px !important; }
.crepi__fermer { z-index: 2; background: rgba(255,255,255,.92); }
.crepi__fermer:focus:not(:focus-visible) { outline: none; }
.crepi__formulaire .note a { color: #111; }

/* Popup : les blocs internes ne sont plus des cartes */
dialog.crepi__invitation > div { max-width: none; padding: 0; border-radius: 0; background: none; box-shadow: none; }
dialog.crepi__invitation > .crepi__corps { padding: 24px clamp(22px, 3vw, 32px) 26px; }

/* Crépi : « à vous de jouer » bien visible sur le mur */
.crepi__aide { top: auto; right: auto; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: #fff; color: #111; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.18); white-space: nowrap; }
.crepi__aide b { font-weight: 600; }
.crepi__aide svg { width: 26px; height: 26px; color: var(--rouge, #C8202C); animation: crepi-main 1.6s ease-in-out infinite; }
@keyframes crepi-main { 0%, 100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(8px) rotate(6deg); } }
.crepi__etape { display: none; }

/* Crépi : les mouvements expliqués à gauche, avec la progression */
.crepi__guide { margin-top: 28px; }
.crepi__jeu { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px; background: #FBEDEE; color: var(--rouge, #C8202C); font-size: 14px; font-weight: 500; }
.crepi__guide ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne, #ddd); }
.crepi__guide li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ligne, #ddd); opacity: .45; transition: opacity .4s; }
.crepi__guide li.est-actif, .crepi__guide li.est-fait { opacity: 1; }
.crepi__guide li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ccc; font-size: 14px; transition: background .4s, color .4s, border-color .4s; }
.crepi__guide li.est-actif > span { background: var(--rouge, #C8202C); border-color: var(--rouge, #C8202C); color: #fff; }
.crepi__guide li.est-fait > span { background: #111; border-color: #111; color: #fff; }
.crepi__guide b { font-size: 18px; font-weight: 500; }
.crepi__guide li p { margin: 4px 0 0; font-size: 15px; color: #4A4A4A; }
.crepi__progres { margin-top: 22px; }
.crepi__progres > div { display: flex; justify-content: space-between; font-size: 14px; color: #4A4A4A; }
.crepi__progres > div b { color: #111; font-variant-numeric: tabular-nums; }
.crepi__progres i { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #EEEDEA; }
.crepi__progres u { display: block; width: 0; height: 100%; border-radius: inherit; background: #D9703F; transition: width .3s; }
@media (min-width: 900px) {
  .page-service .bloc--crepi > h2 { grid-row: 1; }
  .page-service .bloc--crepi > .crepi__guide { grid-column: 1; grid-row: 2 / span 10; position: sticky; top: 110px; align-self: start; margin-top: 30px; }
}
/* logo du client sur la carte de réalisation */
.carte__logo { position: absolute; z-index: 1; top: 16px; left: 16px; display: grid; place-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.carte__logo img { position: static; width: auto; height: 22px; object-fit: contain; transform: none !important; }
.carte__logo { height: 46px; padding: 0 12px; }
.carte__logo img { height: 34px; }
/* Accueil : vidéo de chantier en fond, fixe comme les photos */
.fixe > video.hero__video { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* la vidéo du défilé d'accueil se comporte comme les photos */
.fixe > video.hero__defile { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.fixe > video.hero__defile.est-active { opacity: 1; }

/* Mini-tuto quand on passe au frottage */
.crepi__tuto { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: grid; place-items: center; padding: 16px; border-radius: var(--rayon); background: rgba(17,17,17,.35); animation: crepi-apparait .4s cubic-bezier(.2,.8,.2,1); transition: opacity .4s; }
.crepi__tuto[hidden] { display: none; }
.crepi__tuto.est-parti { opacity: 0; }
.crepi__tuto-carte { width: min(320px, 100%); padding: 18px 20px 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.3); text-align: center; }
.crepi__tuto-carte p { margin: 0; font-size: 14px; color: #4A4A4A; }
.crepi__tuto-titre { margin: 14px 0 6px !important; font-size: 19px !important; font-weight: 600; color: #111 !important; }
.crepi__tuto-mur { position: relative; height: 92px; overflow: hidden; border-radius: 10px; background: #D9703F; }
.crepi__tuto-mur i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(115,40,12,.45); box-shadow: 2px 0 0 rgba(255,226,200,.35); animation: tuto-efface 2.6s linear infinite; }
.crepi__tuto-mur i:nth-child(1) { left: 22%; animation-delay: .15s; }
.crepi__tuto-mur i:nth-child(2) { left: 42%; animation-delay: .7s; }
.crepi__tuto-mur i:nth-child(3) { left: 62%; animation-delay: 1.25s; }
.crepi__tuto-mur i:nth-child(4) { left: 82%; animation-delay: 1.8s; }
@keyframes tuto-efface { 0%, 8% { opacity: 1; } 30%, 90% { opacity: 0; } 100% { opacity: 1; } }
.crepi__tuto-avance { position: absolute; top: 50%; left: 0; animation: tuto-avance 2.6s linear infinite; }
.crepi__tuto-cercle { position: absolute; animation: tuto-cercle .55s linear infinite; }
.crepi__tuto-cercle b { position: absolute; left: -9px; top: -15px; width: 18px; height: 30px; background: #F3F2EF; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.crepi__tuto-cercle b::after { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 16px; border-radius: 3px; background: #2A2A2D; }
@keyframes tuto-avance { from { transform: translateX(10px); } to { transform: translateX(270px); } }
@keyframes tuto-cercle { from { transform: rotate(0deg) translateX(10px) rotate(0deg); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .crepi__tuto-avance, .crepi__tuto-cercle, .crepi__tuto-mur i { animation: none; } }

/* =====================================================================
   Ouverture « lames » : six lames bordeaux montent en vague, le carré gris
   tombe, le carré rouge glisse à sa rencontre, le coin sombre claque,
   le nom ART'IN se dévoile de gauche à droite, un trait doré souligne ;
   puis les lames repartent vers le haut en vague et le logo file en haut à gauche
   ===================================================================== */
.intro--lames { display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; background: transparent; opacity: 1; visibility: visible; animation: none; }
.intro--lames::after { display: none; }
.intro--lames > span { position: absolute; top: 0; bottom: 0; width: calc(100% / 6 + 1px); background: #7A1F2E; transform: translateY(101%); animation: lame-monte .7s cubic-bezier(.7,0,.2,1) forwards; transition: transform .8s cubic-bezier(.7,0,.2,1); }
.intro--lames > span:nth-child(1) { left: 0;          animation-delay: 0s;   transition-delay: 0s; }
.intro--lames > span:nth-child(2) { left: 16.666%;   animation-delay: .06s; transition-delay: .06s; }
.intro--lames > span:nth-child(3) { left: 33.333%;   animation-delay: .12s; transition-delay: .12s; }
.intro--lames > span:nth-child(4) { left: 50%;       animation-delay: .18s; transition-delay: .18s; }
.intro--lames > span:nth-child(5) { left: 66.666%;   animation-delay: .24s; transition-delay: .24s; }
.intro--lames > span:nth-child(6) { left: 83.333%;   animation-delay: .30s; transition-delay: .30s; }
@keyframes lame-monte { to { transform: translateY(0); } }
.intro--lames.est-ouvert { pointer-events: none; }
.intro--lames.est-ouvert > span { animation: none; transform: translateY(-101%); }

.lames__logo { position: absolute; left: 50%; top: 50%; width: min(72vw, 640px); height: auto; transform: translate(-50%, -50%); opacity: 1; animation: none; overflow: visible; }
.lames__logo rect, .lames__logo image { transform-box: fill-box; transform-origin: center; }
.lames__gris { opacity: 0; animation: lame-gris .7s cubic-bezier(.2,.9,.25,1.25) .75s forwards; }
.lames__rouge { opacity: 0; animation: lame-rouge .7s cubic-bezier(.2,.9,.25,1.2) 1s forwards; }
.lames__coin { opacity: 0; animation: lame-coin .35s cubic-bezier(.2,.9,.3,1.6) 1.5s forwards; }
.lames__mot { clip-path: inset(0 100% 0 0); animation: lame-mot .8s cubic-bezier(.7,0,.2,1) 1.55s forwards; }
@keyframes lame-gris { from { opacity: 0; transform: translate(-60%, -120%) rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lame-rouge { from { opacity: 0; transform: translate(80%, 120%) rotate(90deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lame-coin { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes lame-mot { to { clip-path: inset(0 0 0 0); } }
.lames__trait { position: absolute; left: 50%; top: calc(50% + min(36vw, 320px) * 0.3); width: min(46vw, 400px); height: 2px; margin-left: calc(min(72vw, 640px) * -0.5 + min(72vw, 640px) * 0.28); background: #C9A876; transform: scaleX(0); transform-origin: left; animation: lame-trait .6s cubic-bezier(.7,0,.2,1) 2s forwards; transition: opacity .3s; }
@keyframes lame-trait { to { transform: scaleX(1); } }
.intro--lames.est-ouvert .lames__trait { opacity: 0; }

/* la photo d'accueil arrive en léger zoom arrière quand les lames s'ouvrent */
.intro-en-cours .hero .hero__defile.est-active { transform: scale(1.15); transition: none; }
.intro-sortie .hero .hero__defile.est-active { transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.8,.2,1), opacity 1.8s ease; }
.intro-en-cours.intro-sortie .hero .hero__defile.est-active { transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.8,.2,1), opacity 1.8s ease; }
.intro--lames { background: #0B0B0C; }
.intro--lames.est-ouvert { background: transparent; }
/* crépir ne sélectionne jamais la page */
.crepi, .crepi__mur, .crepi__tuto { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.crepi__mur { touch-action: none; }

/* Accueil : la section Réalisations sur fond noir */
#realisations { background: #0B0B0C; color: #fff; }
#realisations .realisations__tete .titre { color: #fff; }
#realisations .realisations__tete p { color: rgba(255,255,255,.6); }
#realisations .realisations__pied .bouton { background: #fff; color: #111; }
/* WhatsApp : vert / blanc selon la section */
.entete nav a.wa { transition: background-color .45s, color .45s, border-color .45s, box-shadow .45s; }
.entete nav a.wa.est-vert { background: #25D366; border-color: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,.35); }
.entete nav a.wa.est-blanc { background: #fff; border-color: #25D366; color: #128C4A; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.entete nav a.wa.est-pop { animation: wa-pop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes wa-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .entete nav a.wa.est-pop { animation: none; } }

/* Titres sobres : plus de fin de phrase en italique colorée */
.titre em, h1 em, h2 em, h3 em, .crepi__invitation-titre em { font-family: inherit; font-style: normal; color: inherit; }
.hero__phrase em { color: var(--or, #C9A876); }

/* Accueil, sur ordinateur : cartes des réalisations plus grandes */
@media (min-width: 800px) {
  #realisations .realisations__cadre { padding-top: 76px; padding-bottom: 16px; }
  #realisations .realisations__tete { padding-bottom: 14px; }
  #realisations .realisations__tete .titre { font-size: clamp(40px, 5vw, 64px); }
  #realisations .realisations__piste { gap: 20px; }
  #realisations .carte { height: min(100%, 900px); aspect-ratio: 4 / 5; }
  #realisations .carte__texte { inset: auto 28px 28px 28px; }
  #realisations .carte__texte b { font-size: clamp(32px, 3vw, 46px); }
  #realisations .carte__texte span { font-size: 17px; }
  #realisations .carte__texte em { padding: 8px 16px; font-size: 15px; }
}

/* Immersion dans les réalisations : la barre disparaît, restent le logo, WhatsApp, Appeler et le menu, en flottant */
.entete nav > a:not(.wa):not(.bouton), .entete .deroulant { transition: opacity .35s, visibility .35s; }
.en-immersion .entete, .en-immersion .entete.est-pleine { background: transparent; box-shadow: none; color: var(--blanc); }
.en-immersion .entete nav > a:not(.wa):not(.bouton), .en-immersion .entete .deroulant { opacity: 0; visibility: hidden; pointer-events: none; }
.en-immersion .entete.est-pleine .logo__blanc { display: inline; }
.en-immersion .entete.est-pleine .logo__noir { display: none; }
.en-immersion .entete .menu-bouton i { background: var(--blanc); }
.en-immersion .entete .menu-bouton i:last-child { background: #C8202C; }
.en-immersion .entete .bouton { background: var(--blanc); color: var(--noir); }
.en-immersion .entete .logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }

/* Réalisations sur ordinateur : cartes hautes et étroites, la section prend tout l'écran */
@media (min-width: 800px) {
  #realisations .realisations__cadre { padding-top: 92px; }
  #realisations .carte { height: min(100%, 900px); aspect-ratio: 3 / 5; }
}
/* liens vers les zones d'intervention, au-dessus du pied de page */
.pied-villes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,.6); }
.pied-villes a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page-service .pied-villes, body:not(.page-sombre) .contact .pied-villes { color: #6b6b6b; }

/* =====================================================================
   Accueil « carte » : fond clair, grande photo arrondie, mot géant
   ===================================================================== */
.page-carte { --ca-fond: #F4F4F2; --ca-m: clamp(10px, 1.2vw, 18px); background: var(--ca-fond); }
.page-carte .entete, .page-carte .entete.est-pleine { background: var(--ca-fond); color: var(--noir); box-shadow: none; }
.page-carte .entete .logo__blanc { display: none; }
.page-carte .entete .logo__noir { display: inline; }
.page-carte .entete .menu-bouton i { background: var(--noir); }
.page-carte .entete .menu-bouton i:last-child { background: #C8202C; }
.page-carte .entete .bouton { background: var(--noir); color: var(--blanc); }
.page-carte .entete nav a:not(.bouton) { font-weight: 600; letter-spacing: -0.02em; }

.carte-accueil { position: relative; margin: 72px var(--ca-m) 0; height: calc(100vh - 72px - var(--ca-m)); height: calc(100svh - 72px - var(--ca-m)); min-height: 540px; overflow: hidden; border-radius: clamp(14px, 1.6vw, 24px); color: #fff; background: #222; }
.carte-accueil > .hero__defile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 8s linear; }
.carte-accueil > .hero__defile.est-active { opacity: 1; transform: scale(1); }
.carte-accueil::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.08) 45%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.5)), radial-gradient(60% 55% at 85% 25%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); }
.carte-accueil > *:not(.hero__defile) { position: absolute; z-index: 1; }
.ca-mot { left: clamp(20px, 3vw, 54px); top: clamp(40px, 9vh, 110px); margin: 0; }
.ca-mot b { display: block; font-weight: 600; font-size: clamp(64px, 12.5vw, 220px); line-height: .9; letter-spacing: -0.065em; }
.ca-mot > span[aria-hidden] { display: block; margin-top: .25em; padding-left: 52%; font-weight: 500; font-size: clamp(18px, 2vw, 34px); letter-spacing: -0.03em; }
.ca-mot b, .ca-mot > span[aria-hidden] { opacity: 0; transform: translateY(30px); animation: ca-monte 1.1s cubic-bezier(.2,.8,.2,1) .15s forwards; }
.ca-mot > span[aria-hidden] { animation-delay: .3s; }
@keyframes ca-monte { to { opacity: 1; transform: none; } }
.intro-en-cours .ca-mot b, .intro-en-cours .ca-mot > span[aria-hidden] { animation-play-state: paused; }
.ca-services { right: clamp(20px, 6vw, 110px); top: clamp(80px, 15vh, 170px); margin: 0; padding: 0; list-style: none; font-size: clamp(15px, 1.15vw, 19px); font-weight: 500; line-height: 1.75; letter-spacing: -0.02em; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.ca-services a { display: inline-block; transition: transform .3s; }
.ca-services a:hover { transform: translateX(6px); }
.ca-croix { top: 63%; width: 14px; height: 14px; }
.ca-croix::before, .ca-croix::after { content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 14px; background: rgba(255,255,255,.85); }
.ca-croix::after { transform: rotate(90deg); }
.ca-phrase { left: clamp(20px, 3vw, 54px); bottom: clamp(24px, 5vh, 54px); max-width: 30ch; margin: 0; font-size: clamp(16px, 1.35vw, 22px); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; }
.ca-bas { right: clamp(20px, 3vw, 54px); bottom: clamp(24px, 5vh, 54px); display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 500; }
.ca-bas a { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff; color: #111; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }

.ca-pourquoi { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(18px, 3.2vw, 48px); padding: clamp(90px, 16vh, 180px) calc(var(--ca-m) + 30px) clamp(60px, 10vh, 120px); background: var(--ca-fond); color: #111; }
.ca-etiquette { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; font-weight: 500; }
.ca-etiquette i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #111; }
.ca-etiquette i::before, .ca-etiquette i::after { content: ""; position: absolute; left: 10px; top: 6px; width: 2px; height: 10px; background: #fff; }
.ca-etiquette i::after { transform: rotate(90deg); }
.ca-pourquoi h2 { margin: 0; font-size: clamp(38px, 5vw, 86px); line-height: 1.02; letter-spacing: -0.055em; }
.ca-pourquoi h2 span { display: block; color: #8A8984; }

@media (max-width: 860px) {
  .carte-accueil { margin-top: 64px; height: calc(100svh - 64px - var(--ca-m)); }
  .ca-mot > span[aria-hidden] { padding-left: 0; }
  .ca-services, .ca-croix { display: none; }
  .ca-phrase { bottom: 96px; }
  .ca-bas { left: clamp(20px, 3vw, 54px); right: auto; }
  .ca-pourquoi { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ca-mot b, .ca-mot > span[aria-hidden] { animation: none; opacity: 1; transform: none; } }
.page-carte .chiffres { background: var(--ca-fond); }

/* =====================================================================
   Version téléphone de l'accueil : site vitrine qui défile
   (ouverture par les métiers, puis directement Réalisations)
   ===================================================================== */
.m-vitrine { display: none; }
@media (max-width: 799px) {
  .page-carte .carte-accueil, .page-carte .ca-pourquoi, .page-carte .chiffres, .page-carte #realisations, .page-carte #prestations { display: none !important; }
  .m-vitrine { display: block; padding-top: 70px; background: #fff; color: #111; letter-spacing: -0.02em; }
  .page-carte, .page-carte .entete, .page-carte .entete.est-pleine { --ca-fond: #fff; }
  .m-bloc { padding: 26px var(--gouttiere) 0; }
  .m-titre { margin: 0; font-size: 54px; font-weight: 600; letter-spacing: -0.055em; line-height: 1; }
  .m-bloc + .m-bloc .m-titre { font-size: 44px; }
  .m-titre i { font-style: normal; color: #C8202C; }
  .m-sous { margin: 12px 0 0; font-size: 19px; line-height: 1.32; color: #3A3936; letter-spacing: -0.025em; }
  .m-rail { display: flex; gap: 12px; margin-top: 22px; padding: 0 var(--gouttiere) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-carte { position: relative; flex: none; width: 78%; aspect-ratio: 3 / 4.4; padding: 0; border: 0; overflow: hidden; border-radius: 26px; scroll-snap-align: start; color: #fff; background: #222; font: inherit; text-align: left; }
  .m-carte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .m-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0) 52%); }
  .m-carte .carte__logo { z-index: 1; top: 18px; left: 18px; }
  .m-carte__texte { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; }
  .m-carte__texte b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
  .m-carte__texte span { display: block; margin: 8px 0 16px; font-size: 16px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-carte__texte em { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: #111; font-size: 16px; font-weight: 600; font-style: normal; }
  .m-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .m-tuile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1 / 1.05; padding: 16px; overflow: hidden; border-radius: 22px; background: #F1F1EF; color: #fff; text-decoration: none; }
  .m-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .m-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%); }
  .m-tuile b { position: relative; z-index: 1; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
  .m-appel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px var(--gouttiere) 10px; padding: 22px; border-radius: 26px; background: #111; color: #fff; }
  .m-appel b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.04em; }
  .m-appel small { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: 14px; }
  .m-appel a { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #111; }

}

/* ouverture (ordinateur et téléphone) : les métiers défilent, puis ART'IN */
.intro--mots { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; opacity: 1; visibility: visible; animation: none; transition: opacity .5s ease .55s; }
.intro--mots::after { display: none; }
.intro--mots.est-ouvert { opacity: 0; pointer-events: none; }
.intro--mots .mots { position: relative; width: 100%; height: 1.1em; font-size: clamp(48px, 14vw, 92px); font-weight: 600; letter-spacing: -0.055em; text-align: center; color: #111; }
.intro--mots .mots span { position: absolute; inset: 0; opacity: 0; transform: translateY(40%); }
.intro--mots .mots span i { font-style: normal; color: #C8202C; }
.intro--mots .mots span.on { animation: mots-passe .62s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes mots-passe { 0% { opacity: 0; transform: translateY(40%); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40%); } }
.intro--mots .mots__logo { position: absolute; left: 50%; top: 50%; width: min(70vw, 320px); height: auto; transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s; animation: none; }
.intro--mots .mots__logo.on { opacity: 1; }
@media (min-width: 800px) {
  .intro--mots .mots { font-size: clamp(90px, 10vw, 170px); }
  .intro--mots .mots__logo { width: min(40vw, 560px); }
}

/* Accueil ordinateur : on laisse respirer */
.ca-mot b { font-size: clamp(56px, 9.6vw, 168px); }
.ca-mot > span[aria-hidden] { padding-left: .14em; margin-top: .4em; font-size: clamp(16px, 1.5vw, 24px); opacity: .9; }
.ca-services { top: clamp(40px, 9vh, 110px); margin-top: clamp(14px, 2.2vw, 36px); font-size: clamp(14px, 1vw, 17px); line-height: 1.85; }
.carte-accueil::after { background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,.12) 45%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.5)), radial-gradient(60% 55% at 85% 25%, rgba(0,0,0,.25), rgba(0,0,0,0) 70%); }
.ca-phrase { max-width: 26ch; font-size: clamp(15px, 1.15vw, 19px); }
/* Réalisations (immersion) : la barre passe en noir, logo blanc */
.en-immersion .page-carte .entete, .en-immersion .page-carte .entete.est-pleine { background: #0B0B0C; color: #fff; box-shadow: none; }
.en-immersion .page-carte .entete .logo__blanc { display: inline; }
.en-immersion .page-carte .entete .logo__noir { display: none; }
.en-immersion .page-carte .entete .logo { filter: none; }
.en-immersion .page-carte .entete .bouton { background: #fff; color: #111; }
.en-immersion .page-carte .entete .menu-bouton i { background: #fff; }
.en-immersion .page-carte .entete .menu-bouton i:last-child { background: #C8202C; }
.page-carte .entete { transition: background .35s, color .35s; }
/* les mots de l'ouverture bien centrés (le conteneur prend toute la largeur) */
.intro--mots .mots { position: absolute; left: 0; right: 0; top: 50%; width: auto; margin-top: -.55em; }

/* =====================================================================
   Respiration : plus d'espace entre les sections (ordinateur et téléphone)
   ===================================================================== */
.page-carte main > section + section { margin-top: clamp(56px, 10vh, 140px); }
.page-carte .ca-pourquoi { padding-top: clamp(60px, 10vh, 140px); padding-bottom: clamp(70px, 12vh, 160px); }
.page-carte .chiffres { padding-top: clamp(50px, 8vh, 100px); padding-bottom: clamp(50px, 8vh, 100px); }
.page-carte .realisations__cadre { padding-top: clamp(90px, 12vh, 130px); }
.page-carte .contact { padding-top: clamp(80px, 13vh, 170px); }
@media (max-width: 799px) {
  .page-carte main > section + section { margin-top: 70px; }
  .m-vitrine { padding-top: 84px; }
  .m-bloc { padding-top: 0; }
  .m-bloc + .m-bloc, .m-rail + .m-bloc { margin-top: 72px; }
  .m-sous { margin-top: 16px; }
  .m-rail { margin-top: 28px; }
  .m-tuiles { margin-top: 26px; gap: 12px; }
  .m-appel { margin-top: 72px; margin-bottom: 0; }
  .page-carte .couches, .page-carte .contact { padding-top: 70px; }
}

/* Téléphone : les bandes horizontales (Réalisations…) défilent nativement, sans ramer */
@media (max-width: 799px) {
  .realisations { height: auto !important; }
  .realisations__cadre { position: static; height: auto; padding-bottom: 40px; }
  .realisations__piste { flex: none; height: 70svh; max-height: 620px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; transform: none !important; will-change: auto; scrollbar-width: none; scroll-padding-left: var(--gouttiere); }
  .realisations__piste::-webkit-scrollbar { display: none; }
  .realisations .carte { scroll-snap-align: start; height: 100%; }
  .carte img { transition: none; }
}

/* =====================================================================
   Fluidité sur téléphone : on évite ce qui coûte cher à l'affichage
   ===================================================================== */
@media (max-width: 799px) {
  /* les photos « fixes » derrière les panneaux deviennent de simples photos : plus de recalcul à chaque défilement */
  .fixe > img, .fixe > video, .fixe::before { position: absolute; }
  .fixe { clip-path: none; }
  /* défilé d'accueil : fondu seulement, sans zoom continu */
  .fixe > img.hero__defile, .fixe > video.hero__defile { transform: none !important; transition: opacity 1.2s ease !important; }
  /* flous de fond : très lourds sur iPhone */
  .entete, .entete *, .crepi__aide, .crepi__etape, .carte__logo, .service__tags i { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* pas de survol au doigt */
  .carte:hover img, .sp-galerie__grille figure:hover img, .sp-autre:hover img { transform: none; }
}

/* Défilé d'accueil sur téléphone : chaque photo sur sa propre couche, pas de recalcul au défilement */
@media (max-width: 799px) {
  .hero > .hero__defile { content-visibility: visible; will-change: opacity; backface-visibility: hidden; transform: translateZ(0) !important; }
}

/* =====================================================================
   Réalisations sur téléphone : carrousel au doigt (gauche / droite)
   La page défile normalement vers le bas ; on glisse les cartes à l'horizontale.
   ===================================================================== */
@media (max-width: 799px) {
  #realisations .realisations__piste {
    display: flex; align-items: stretch; gap: 12px;
    height: auto; max-height: none;
    padding: 4px var(--gouttiere) 6px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    touch-action: auto; transform: none !important;
  }
  #realisations .realisations__piste::after { content: ""; flex: 0 0 1px; margin-left: -1px; }
  #realisations .carte {
    flex: 0 0 84%; width: 84%; height: auto; aspect-ratio: 4 / 5;
    scroll-snap-align: center;
    transform: none !important;
  }
  #realisations .carte img { transform: none !important; transition: none; }
  #realisations .carte__texte b { font-size: 26px; }
  .realisations__points { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
  .realisations__points i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
  .realisations__points i.est-actif { width: 20px; background: #fff; }
}
@media (min-width: 800px) { .realisations__points { display: none; } }