/* =====================================================================
   NOVAGONE , CHARTE v5 (calee sur le wireframe de Nathan)
   Hero = image + 1 bouton. Expertises = pleine largeur, tuiles egales
   qui s'agrandissent au survol et poussent les autres. Exemples = image
   + texte alternes. Contrastes renforces. Boutons en pilule.
   ===================================================================== */

@font-face {
  font-family: "JUST Sans";
  src: url("assets/fonts/JUST Sans Variable.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --ink-soft: #141416;
  --paper: #F6F7F9;
  --cream: #ECEDF0;
  --orange: #FF3E00;
  /* Orange assombri, reserve au PETIT texte pose sur fond clair (contraste AA).
     L'orange vif reste pour les aplats, les gros titres et le texte sur fond sombre. */
  --orange-text: #C42D00;

  --on-dark: #F4F1EC;
  --on-dark-soft: rgba(244, 241, 236, 0.82);
  --on-light: #0A0A0A;
  --on-light-soft: rgba(10, 10, 10, 0.74);
  --line-dark: rgba(244, 241, 236, 0.16);
  --line-light: rgba(10, 10, 10, 0.14);

  --font-display: "JUST Sans", "Neue Haas Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1400px;
  --gutter: clamp(1.1rem, 3.4vw, 3rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 74px;

  /* Arrondis : une seule echelle pour tout le site */
  --radius-media: 14px;   /* photos, cartes visuelles */
  --radius-card: 18px;    /* blocs de verre, encarts */
  --radius-pill: 999px;   /* boutons */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; font-family: var(--font-body);
  background: var(--ink); color: var(--on-dark);
  font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; max-width: 100%;
}
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; }
p { margin: 0; }
/* Les navigateurs mettent 40px de marge laterale sur les figure : on remet a zero */
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(5rem, 10vw, 9rem); position: relative; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--light { background: var(--paper); color: var(--on-light); }
.section--cream { background: var(--cream); color: var(--on-light); }

/* ---------- typographie ---------- */
.sec-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.lead { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--on-dark-soft); }
.section--light .lead, .section--cream .lead { color: var(--on-light-soft); }

/* ---------- boutons (pilule, remplissage + ombre douce, aucun deplacement) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.65rem; border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 0.96rem;
  transition: background 340ms var(--ease), color 340ms var(--ease), border-color 340ms var(--ease), box-shadow 340ms var(--ease);
  will-change: box-shadow;
}
.btn .arw { transition: transform 340ms var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn--primary { background: var(--orange); color: #0A0A0A; }
.btn--primary:hover { background: #E63800; box-shadow: 0 10px 26px -10px rgba(255, 62, 0, 0.4); }
/* Bouton secondaire : plein inverse (blanc sur sombre, noir sur clair). Plus aucun contour. */
.btn--ghost { background: var(--paper); color: var(--ink); border-color: transparent; }
.btn--ghost:hover { background: var(--orange); color: #0A0A0A; box-shadow: 0 12px 30px -12px rgba(255,62,0,0.5); }
.section--light .btn--ghost, .section--cream .btn--ghost { background: var(--ink); color: var(--paper); }
.section--light .btn--ghost:hover, .section--cream .btn--ghost:hover { background: var(--orange); color: #0A0A0A; box-shadow: 0 12px 30px -12px rgba(255,62,0,0.5); }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; color: var(--on-dark);
  background: rgba(10,10,10,0); transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: rgba(10,10,10,0.55); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom-color: var(--line-dark); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--paper); }
.brand svg { width: 22px; height: 22px; display: block; }
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a { position: relative; font-size: 0.95rem; color: var(--on-dark-soft); transition: color 0.25s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--orange); transition: right 0.4s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav-cta { display: inline-flex; }
.burger { display: none; width: 42px; height: 42px; border: none; background: none; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 2px; width: 24px; background: var(--paper); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { position: fixed; inset: 0; z-index: 99; background: rgba(10,10,10,0.82); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--gutter); transform: translateY(-100%); transition: transform 0.5s var(--ease-out); }
.mobile-nav.open { transform: none; }
.mobile-nav a { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); color: var(--paper); padding-block: 0.3rem; }
.mobile-nav a:hover { color: var(--orange); }
.mobile-nav .btn { margin-top: 1.4rem; align-self: flex-start; }

/* =====================================================================
   HERO , image dominante + 1 bouton bas-gauche
   ===================================================================== */
/* La photo occupe tout l'ecran, le titre est monumental. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; }
.hero-media { position: absolute; inset: -8% 0 0; z-index: 0; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,0.22) 56%, rgba(10,10,10,0.9) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-bottom: clamp(3.2rem, 10vh, 7rem); }
.hero-foot { max-width: none; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 0.96; letter-spacing: -0.03em;
  max-width: 15ch; /* en ch sur le titre lui-meme, pas sur le conteneur */
  color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,0.42);
}
.hero-lead { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); max-width: 46ch; font-size: clamp(1.05rem, 1.45vw, 1.32rem); line-height: 1.5; color: rgba(244,241,236,0.92); text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.hero-cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Revelation du hero : le titre monte derriere un masque, ligne par ligne */
.hero h1, .hero-lead, .hero-cta { --d: 0s; }
.hero-lead { --d: 0.14s; }
.hero-cta { --d: 0.26s; }
.hero h1, .hero-lead, .hero-cta {
  opacity: 0; transform: translateY(28px);
  animation: heroUp 1.2s var(--ease-out) var(--d) forwards;
}
@keyframes heroUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero-lead, .hero-cta { opacity: 1; transform: none; animation: none; }
}
.hero-scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(244,241,236,0.6); }
.hero-scroll .l { width: 1px; height: 32px; background: linear-gradient(var(--orange), transparent); }
@media (max-width: 680px) { .hero-scroll { display: none; } }

/* =====================================================================
   NOS EXPERTISES , pleine largeur, tuiles egales qui s'agrandissent
   au survol et poussent les autres (accordeon horizontal)
   ===================================================================== */
.exp-grid {
  display: flex; gap: 5px; width: 100%;
  height: clamp(440px, 62vh, 760px);
}
.exp-tile {
  position: relative; overflow: hidden; flex: 1 1 0%; min-width: 0;
  transition: flex-grow 1.7s cubic-bezier(0.25, 1, 0.3, 1);
}
.exp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.4s var(--ease); }
.exp-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 42%, rgba(10,10,10,0.9) 100%); }
/* Label vertical (nom) visible au repos */
.exp-tile-label {
  position: absolute; z-index: 2; left: 0.9rem; bottom: 1.2rem;
  writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 2.9vw, 2.9rem);
  color: #fff; letter-spacing: 0.01em; text-shadow: 0 2px 16px rgba(0,0,0,0.65);
  transition: opacity 0.7s var(--ease);
}
/* Texte descriptif horizontal, apparait au survol (tuile agrandie) */
.exp-tile-desc {
  position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  padding: 1.1rem 1.3rem; border-radius: 18px;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 50px -22px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  color: rgba(255,255,255,0.94); font-size: 0.95rem; line-height: 1.45;
  transition: opacity 1s var(--ease) 0.35s, transform 1s var(--ease) 0.35s;
}
.exp-tile-desc strong { display: block; font-family: var(--font-display); font-size: clamp(1.35rem, 1.8vw, 1.7rem); font-weight: 700; margin-bottom: 0.25rem; }
@media (hover: hover) {
  .exp-grid:hover .exp-tile { flex-grow: 0.75; }
  .exp-grid .exp-tile:hover { flex-grow: 2.6; }
  .exp-tile:hover img { transform: scale(1.05); }
  .exp-tile:hover .exp-tile-label { opacity: 0; }
  .exp-tile:hover .exp-tile-desc { opacity: 1; transform: none; }
}
@media (hover: none) { .exp-tile-desc { display: none; } }
.exp-foot { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; justify-content: flex-end; }

/* =====================================================================
   COLONNES + IMAGE (Pourquoi nous ? / Pourquoi pas vous ?)
   ===================================================================== */
.cols-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.cols-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem) clamp(1.4rem, 3vw, 2.4rem); }
.col-item .tag { display: block; color: var(--orange-text); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.section--dark .col-item .tag { color: var(--orange); }
.col-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.1; margin-bottom: 0.45rem; }
.col-item p { color: var(--on-light-soft); font-size: 0.96rem; line-height: 1.5; }
.cols-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; margin-top: clamp(-3.5rem, -4vw, -2rem); }
.cols-media img { width: 100%; height: 100%; object-fit: cover; }
.cols-foot { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* =====================================================================
   DES EXEMPLES , image + texte alternes gauche / droite
   ===================================================================== */
.ex-list { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); }
.ex-band { position: relative; display: block; overflow: hidden; }
.ex-band > img { width: 100%; height: clamp(440px, 76vh, 800px); object-fit: cover; display: block; transition: transform 1.6s var(--ease); }
.ex-band:hover > img { transform: scale(1.045); }
.ex-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.06) 45%, rgba(10,10,10,0.5) 100%); }
.ex-glass {
  position: absolute; z-index: 2; bottom: clamp(1.1rem, 2.6vw, 2.2rem); left: clamp(1.1rem, 2.6vw, 2.2rem);
  max-width: min(46ch, calc(100% - 2 * clamp(1.1rem, 2.6vw, 2.2rem)));
  padding: clamp(1.2rem, 2.2vw, 1.8rem) clamp(1.35rem, 2.4vw, 2rem); border-radius: 20px;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 22px 60px -25px rgba(0,0,0,0.6);
}
.ex-band:nth-child(even) .ex-glass { left: auto; right: clamp(1.1rem, 2.6vw, 2.2rem); }
.ex-glass .c { display: block; color: #fff; opacity: 0.92; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.45rem; letter-spacing: 0.01em; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.ex-glass h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.02; letter-spacing: -0.02em; color: #fff; }
.ex-glass p { color: rgba(255,255,255,0.88); font-size: 0.98rem; line-height: 1.5; margin-top: 0.6rem; max-width: 42ch; }
.ex-glass .go { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #fff; transition: color 0.3s var(--ease); }
.ex-glass .go .arw { transition: transform 0.35s var(--ease); }
.ex-band:hover .ex-glass .go { color: var(--orange); }
.ex-band:hover .ex-glass .go .arw { transform: translateX(5px); }
.ex-foot { margin-top: clamp(2rem, 4vw, 3.4rem); display: flex; justify-content: center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--ink); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 5rem) 2.2rem; border-top: 1px solid var(--line-dark); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.foot-col { min-width: 0; }
.foot-lede { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.06; max-width: 16ch; }
.foot-col h3, .foot-col h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--on-dark-soft); margin-bottom: 0.9rem; letter-spacing: 0; }
.foot-col a { display: block; padding-block: 0.3rem; color: var(--on-dark-soft); transition: color 0.25s var(--ease); overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--paper); }
.foot-bottom { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.83rem; color: var(--on-dark-soft); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .nav, .nav-cta { display: none; }
  .burger { display: flex; }
  .cols-grid { grid-template-columns: 1fr; }
  .cols-media { order: -1; aspect-ratio: 16 / 10; margin-top: 0; margin-bottom: 1.6rem; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-lede { grid-column: 1 / -1; }
  .ex-band > img { height: clamp(340px, 56vh, 540px); }
}
@media (max-width: 680px) {
  .exp-grid { flex-direction: column; height: auto; gap: 6px; }
  .exp-tile { flex: none; height: 32vh; min-height: 210px; }
  .cols-text { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 1.8rem; }
  .exp-foot, .ex-foot { justify-content: stretch; }
  .exp-foot .btn, .ex-foot .btn, .cols-foot .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   PAGES INTERNES , en-tete commun
   ===================================================================== */
.page-head { padding-top: calc(var(--header-h) + clamp(2.8rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.over { display: inline-block; color: var(--orange-text); font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem; }
.section--dark .page-head .over, main:not(.section--light):not(.section--cream) .page-head .over { color: var(--orange); }
.page-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; }
.page-head .lead { margin-top: 1.2rem; max-width: 54ch; }

/* ---------- FORMULAIRE (contact) : champs a filet, editorial, zero boite ---------- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.6rem); min-width: 0; }
.form-row > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; position: relative; }
.field label {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--on-light-soft); transition: color 0.25s var(--ease);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  padding: 0.55rem 0 0.6rem;
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1.5px solid rgba(10,10,10,0.18); border-radius: 0;
  background: transparent; color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(10,10,10,0.34); }
/* Menu deroulant : chevron maison, plus la double fleche systeme */
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A0A0A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.15rem center; background-size: 12px 8px;
}
.field textarea { min-height: 118px; resize: vertical; padding-top: 0.7rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: rgba(10,10,10,0.4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--orange); border-bottom-width: 2px;
}
.field:focus-within label { color: var(--orange-text); }
.form .btn { justify-self: start; margin-top: 0.6rem; }
.form-note { font-size: 0.85rem; line-height: 1.55; color: var(--on-light-soft); max-width: 52ch; }
.contact-info { display: grid; gap: 1.6rem; align-content: start; }
.contact-block h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.contact-block a, .contact-block p { color: var(--on-light-soft); font-size: 0.98rem; line-height: 1.5; }
.contact-block a:hover { color: var(--orange); }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* Header solide pour les pages internes (fond clair) , sinon texte clair invisible */
.site-header--solid { background: rgba(10,10,10,0.72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom-color: var(--line-dark); }

/* Pourquoi pas vous : 2 gros boutons vers les offres */
.ppv-head { max-width: 40ch; }
.ppv-head .lead { margin-top: 1rem; }
.ppv-choices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 2vw, 1.2rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); align-items: stretch; }
.ppv-btn {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem); border: 1.5px solid var(--line-light); border-radius: 16px;
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ppv-btn > span:first-child { display: block; min-width: 0; }
.ppv-btn .sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--on-light-soft); margin-top: 0.55rem; line-height: 1.4; transition: color 0.35s var(--ease); }
.ppv-btn .ppv-arw { font-size: 1.6rem; transition: transform 0.35s var(--ease); flex: none; }
.ppv-btn:hover { background: var(--orange); color: #0A0A0A; border-color: var(--orange); box-shadow: 0 14px 30px -14px rgba(255,62,0,0.4); }
.ppv-btn:hover .sub { color: rgba(10,10,10,0.7); }
.ppv-btn:hover .ppv-arw { transform: translateX(6px); }
@media (max-width: 640px) { .ppv-choices { grid-template-columns: 1fr; } }

.foot-bottom a { color: var(--on-dark-soft); }
.foot-bottom a:hover { color: var(--paper); }

/* =====================================================================
   FICHES PROJET , immersif editorial (genere par build-fiches.js)
   Images bord a bord dominantes, texte qui accompagne, zero meta.
   ===================================================================== */
.fp-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--on-dark); }
.fp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.05) 32%, rgba(10,10,10,0.3) 62%, rgba(10,10,10,0.92) 100%); }
.fp-hero .wrap { position: relative; z-index: 1; padding-bottom: clamp(2.6rem, 7vh, 5rem); }
/* Sur photo : jamais d'orange (illisible). Texte clair + ombre portee. */
.fp-client { display: block; color: #fff; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.8rem; letter-spacing: 0.01em; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.fp-hero h1 { font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: 0.96; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,0.45); max-width: 16ch; }
.fp-lead { margin-top: 1.2rem; max-width: 54ch; color: rgba(255,255,255,0.9); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.55; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }

.fp-text { font-size: clamp(1.08rem, 1.5vw, 1.28rem); max-width: 62ch; margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(1.4rem, 3vw, 2.4rem); }
.fp-text + .fp-text { padding-top: 0; }
/* Titre surligne orange, typo noire, tres gros */
.fp-mark { margin-bottom: 1.1rem; line-height: 1.12; }
.fp-mark span {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: var(--orange); color: #0A0A0A;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  padding: 0.06em 0.32em; border-radius: 4px;
  box-shadow: 0.32em 0 0 var(--orange), -0.32em 0 0 var(--orange);
}
.fp-text p { color: var(--on-dark-soft); font-size: 1em; line-height: 1.6; }
/* petit espace avant la premiere serie de photos */
.fp-text + .fp-bleed, .fp-text + .fp-swipe { margin-top: clamp(1.8rem, 4vw, 3rem); }
.fp-quote { max-width: 24ch; margin-inline: auto; padding: clamp(2.8rem, 7vw, 5.5rem) var(--gutter); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.12; text-align: center; letter-spacing: -0.02em; }
.fp-quote em { font-style: normal; color: var(--orange); }

.fp-bleed img { width: 100%; height: min(92svh, 880px); object-fit: cover; display: block; }
.fp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.fp-duo img { width: 100%; height: clamp(320px, 62vh, 700px); object-fit: cover; display: block; }
.fp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.fp-trio img { width: 100%; height: clamp(260px, 50vh, 560px); object-fit: cover; display: block; }
/* Desktop : le wrapper carrousel ne change rien, la pagination et l'invitation sont masquees */
.fp-swipe { margin-top: 6px; }
.fp-swipe .fp-track { margin-top: 0; }
.fp-swipe-ui, .fp-swipe-hint { display: none; }
.fp-splitrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; margin-top: 6px; align-items: stretch; }
.fp-splitrow img { width: 100%; height: 100%; min-height: clamp(360px, 66vh, 720px); object-fit: cover; display: block; }
.fp-splitrow .txt { display: flex; align-items: center; padding: clamp(1.8rem, 4vw, 3.5rem); background: var(--ink-soft); color: var(--on-dark-soft); font-size: 1.02rem; line-height: 1.65; }

.fp-post { max-width: 58ch; margin-inline: auto; padding: clamp(2.6rem, 6vw, 4.5rem) var(--gutter) 0; text-align: center; color: var(--on-dark-soft); font-size: 0.96rem; line-height: 1.6; }
.fp-post a { color: var(--orange); }
.fp-cta { text-align: center; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.fp-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: 1.5rem; }

.fp-next { position: relative; display: block; overflow: hidden; }
.fp-next img { width: 100%; height: min(72svh, 620px); object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.fp-next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.15) 45%, rgba(10,10,10,0.85) 100%); }
@media (hover: hover) {
  .fp-next:hover img { transform: scale(1.04); }
}
.fp-next-cap {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: clamp(1.8rem, 5vh, 3.2rem);
  text-align: center; width: max-content; max-width: calc(100% - 2.2rem);
  padding: 1.1rem 2.2rem 1.25rem; border-radius: 22px;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 22px 60px -25px rgba(0,0,0,0.6);
}
.fp-next-cap .s { display: block; color: #fff; opacity: 0.9; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; letter-spacing: 0.01em; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.fp-next-cap .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 3.4rem); color: #fff; line-height: 1; letter-spacing: -0.02em; }

@media (max-width: 720px) {
  .fp-swipe { position: relative; margin-top: 8px; }
  /* Duo et trio -> carrousel plein cadre (une photo par vue, snap aimante) */
  .fp-swipe .fp-track {
    display: flex; grid-template-columns: none; gap: 0; margin-top: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .fp-swipe .fp-track::-webkit-scrollbar { display: none; }
  .fp-swipe .fp-track img {
    flex: 0 0 calc(100% - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter));
    height: clamp(400px, 70vh, 680px);
    object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always;
    border-radius: 16px; margin-right: 10px;
  }
  .fp-swipe .fp-track img:last-child { margin-right: 0; }

  /* Points de pagination + compteur */
  .fp-swipe-ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem var(--gutter) 0; }
  .fp-dots { display: flex; align-items: center; gap: 7px; }
  .fp-dots span { width: 7px; height: 7px; border-radius: 99px; background: rgba(244,241,236,0.28); transition: width 0.35s var(--ease-out), background 0.35s var(--ease-out); }
  .fp-dots span.on { width: 22px; background: var(--orange); }
  .fp-count { color: var(--on-dark-soft); font-size: 0.82rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  .fp-count b { color: var(--on-dark); font-weight: 600; }

  /* Invitation au swipe : pastille qui glisse doucement, disparait au premier scroll */
  .fp-swipe-hint {
    display: inline-flex; align-items: center; gap: 0.35rem;
    position: absolute; top: clamp(0.9rem, 3vw, 1.3rem); right: calc(var(--gutter) + 0.5rem); z-index: 2;
    padding: 0.4rem 0.75rem; border-radius: 99px;
    background: rgba(10,10,10,0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em;
    animation: fpHint 1.8s var(--ease) infinite; transition: opacity 0.4s var(--ease);
  }
  .fp-swipe-hint svg { animation: fpHintArrow 1.8s var(--ease) infinite; }
  .fp-swipe-hint.gone { opacity: 0; pointer-events: none; animation: none; }
  @keyframes fpHint { 0%, 100% { transform: translateX(0); } 55% { transform: translateX(-5px); } }
  @keyframes fpHintArrow { 0%, 100% { transform: translateX(0); } 55% { transform: translateX(4px); } }

  .fp-splitrow { grid-template-columns: 1fr; }
  .fp-splitrow img { min-height: clamp(260px, 48vh, 460px); }
  .fp-bleed img { height: min(74svh, 620px); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-swipe-hint, .fp-swipe-hint svg { animation: none; }
}

/* Contact : colonne image + carte de verre */
.contact-grid { align-items: stretch; }
.contact-side { position: relative; overflow: hidden; border-radius: 20px; min-height: 540px; }
.contact-side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.45) 100%); }
.contact-glass {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem;
  padding: 1.5rem 1.6rem; border-radius: 18px; color: #fff;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 22px 60px -25px rgba(0,0,0,0.6);
}
.contact-glass h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 0.6rem; }
.contact-glass p { color: rgba(255,255,255,0.9); font-size: 0.97rem; line-height: 1.55; margin-bottom: 0.45rem; }
.contact-glass a { font-weight: 600; transition: color 0.25s var(--ease); }
.contact-glass a:hover { color: var(--orange); }
.contact-glass .rep { margin-top: 0.7rem; margin-bottom: 0; color: var(--orange); font-weight: 600; font-size: 0.92rem; }
@media (max-width: 860px) { .contact-side { min-height: 420px; } }

/* =====================================================================
   FICHE LIGHT : une seule phrase avant les photos
   ===================================================================== */
.fp-solo { font-size: clamp(1.5rem, 3.4vw, 2.4rem); max-width: 34ch; }
.fp-solo p { color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1em; line-height: 1.18; letter-spacing: -0.02em; }

/* =====================================================================
   CAS CLIENT PROFOND (3 projets phares), charte v5
   ===================================================================== */
.cs-chapo { max-width: 62ch; margin-inline: auto; padding: clamp(2.6rem, 6vw, 4.5rem) var(--gutter) clamp(1.4rem, 3vw, 2.2rem); border-left: 3px solid var(--orange); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--on-dark); font-weight: 500; }
.cs-chap { max-width: 62ch; margin-inline: auto; padding: clamp(2.4rem, 5vw, 3.6rem) var(--gutter) 0; }
.cs-chap > p { color: var(--on-dark-soft); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.7; margin-bottom: 1rem; }
.cs-chap > p strong { color: var(--on-dark); font-weight: 600; }
.cs-note { font-size: 0.92rem; color: var(--on-dark-soft); font-style: italic; opacity: 0.85; }

.cs-feats { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 3.4rem); }
.cs-feat { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 2.6rem); }
.cs-feat--rev { flex-direction: row-reverse; }
.cs-feat-vis { flex: 0 0 38%; }
.cs-feat-vis img { width: 100%; height: auto; display: block; border-radius: 14px; }
.cs-feat-vis figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--on-dark-soft); opacity: 0.7; text-align: center; }
.cs-feat-vis--ph { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.2rem; border-radius: 14px; background: var(--ink-soft); border: 1px dashed rgba(244,241,236,0.16); }
.cs-ph { font-size: 0.82rem; color: var(--on-dark-soft); opacity: 0.65; }
.cs-feat-txt { flex: 1; }
.cs-feat-txt h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 0.5rem; color: var(--on-dark); }
.cs-feat-txt p { color: var(--on-dark-soft); font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.6; }

.cs-proof { max-width: var(--container); margin: clamp(3rem, 6vw, 5rem) auto 0; padding: clamp(2.6rem, 6vw, 4rem) var(--gutter); text-align: center; position: relative; overflow: hidden; background: var(--ink-soft); border-block: 1px solid rgba(244,241,236,0.08); }
.cs-proof::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,62,0,0.14), transparent 62%); pointer-events: none; }
.cs-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); max-width: 760px; margin-inline: auto; }
.cs-stat .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 0.92; letter-spacing: -0.03em; color: var(--orange); }
.cs-stat .l { display: block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--on-dark-soft); letter-spacing: 0.02em; }
.cs-base { position: relative; z-index: 1; margin-top: clamp(1.6rem, 3vw, 2.4rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.25; color: var(--on-dark); }
.cs-base em { color: var(--orange); font-style: normal; }
.cs-proof--say { border-block: 1px solid rgba(244,241,236,0.08); }
.cs-proof--say p { position: relative; z-index: 1; max-width: 24ch; margin-inline: auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--on-dark); }
.cs-proof--say p em { color: var(--orange); font-style: normal; }

.cs-oneline { max-width: 40ch; margin: clamp(3rem, 6vw, 5rem) auto 0; padding-inline: var(--gutter); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--on-dark); }
.cs-oneline span { color: var(--orange); }

@media (max-width: 640px) {
  .cs-feat, .cs-feat--rev { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cs-feat-vis { flex: none; width: 62%; align-self: center; }
  .cs-stats { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Hero sans photo (cas client dont les visuels ne sont pas encore fournis) */
.fp-hero--solid { background: var(--ink-soft); min-height: 76svh; }
.fp-hero--solid::after { background: radial-gradient(ellipse at 30% 60%, rgba(255,62,0,0.16), transparent 60%); }

/* Projet suivant sans image : bloc sobre au lieu d'une image cassee */
.fp-next--solid { background: var(--ink-soft); min-height: 46svh; display: flex; align-items: center; justify-content: center; }
.fp-next--solid::after { background: radial-gradient(ellipse at center, rgba(255,62,0,0.14), transparent 62%); }
.fp-next--solid .fp-next-cap { position: static; transform: none; margin: clamp(2.4rem,6vw,4rem) auto; }
/* =====================================================================
   CURSEUR DISCRET + REACTION DE LA MATIERE (desktop, pointeur fin)
   Le curseur reste petit. C'est l'element survole qui s'allume.
   ===================================================================== */
.has-nova-cursor, .has-nova-cursor * { cursor: none !important; }
/* Conteneur : ne se voit pas, il porte le verre et le point */
.nova-dot {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 0; height: 0; opacity: 0; will-change: transform;
  transition: opacity 0.3s var(--ease);
}
.nova-dot.on { opacity: 1; }

/* Le disque de verre : discret, il donne la matiere */
.nova-dot::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  -webkit-backdrop-filter: blur(4px) saturate(1.6) brightness(1.1);
  backdrop-filter: blur(4px) saturate(1.6) brightness(1.1);
  border: 1px solid rgba(255,255,255,0.22);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.2), rgba(255,255,255,0.04) 46%, transparent 68%);
  box-shadow: inset 0 1px 8px rgba(255,255,255,0.24);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out),
              border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* Le point de precision : petit et net, pour viser juste */
.nova-dot::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(10,10,10,0.4), 0 1px 5px rgba(0,0,0,0.45);
  transition: opacity 0.35s var(--ease), width 0.25s var(--ease-out), height 0.25s var(--ease-out),
              margin 0.25s var(--ease-out), background 0.25s var(--ease);
}
/* Souris a l'arret : le point s'efface, le verre reste */
.nova-dot.is-still::after { opacity: 0; }

/* Cible cliquable : le verre s'ouvre et chauffe, le point passe en orange */
.nova-dot.is-link::before { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(255,62,0,0.42); }
.nova-dot.is-link::after { background: var(--orange); box-shadow: 0 0 0 1px rgba(10,10,10,0.25), 0 0 10px rgba(255,62,0,0.7); }
/* Champ de saisie : le verre s'efface, le point devient une barre */
.nova-dot.is-text::before { opacity: 0; }
.nova-dot.is-text::after { width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 1px; background: var(--orange); opacity: 1; }
/* Au clic : le verre s'ecrase */
.nova-dot.is-down::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* La matiere qui reagit : lumiere de verre qui suit la souris dans la carte */
.exp-tile, .ex-band, .prj-card, .acc-tile, .ppv-btn, .fp-next, .contact-side, .acc-row { position: relative; }
.exp-tile::before, .ex-band::before, .prj-card::before, .acc-tile::before,
.ppv-btn::before, .fp-next::before, .contact-side::before, .acc-row::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;   /* sinon la lumiere deborde en carre sur un bloc arrondi */
  opacity: 0; transition: opacity 0.45s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,0.18), rgba(255,255,255,0.06) 38%, transparent 66%);
  mix-blend-mode: soft-light;
}
.is-lit::before { opacity: 1; }
/* Sur fond clair la lumiere serait invisible : on passe en teinte chaude */
.acc-row::before, .ppv-btn::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,62,0,0.14), rgba(255,62,0,0.05) 40%, transparent 68%);
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) { .nova-dot { display: none; } .is-lit::before { opacity: 0; } }
@media (hover: none), (pointer: coarse) { .nova-dot { display: none; } .is-lit::before { opacity: 0; } }

/* =====================================================================
   REVELATIONS AU SCROLL , plus riches que le simple fondu
   ===================================================================== */
/* Les durees passent par des variables : le script les resserre quand on
   defile vite et les laisse respirer quand on avance doucement. */
:root { --rev-court: 0.85s; --rev-long: 1.05s; --rev-pas: 0.10s; --rev-flou: 10px; }
[data-reveal] {
  transform: translateY(34px);
  filter: blur(var(--rev-flou));
  transition: opacity var(--rev-court) var(--ease-out), transform var(--rev-long) var(--ease-out),
              clip-path var(--rev-long) var(--ease-out), filter var(--rev-court) var(--ease-out);
}
[data-reveal].is-visible { filter: blur(0); }
/* Les titres se devoilent derriere un volet qui remonte */
.sec-title[data-reveal], h1[data-reveal] { clip-path: inset(0 0 105% 0); transform: none; filter: none; }
.sec-title[data-reveal].is-visible, h1[data-reveal].is-visible { clip-path: inset(0 0 -25% 0); }
/* Les images se posent : un leger zoom qui se relache */
figure[data-reveal] img, [data-reveal] > img { transition: transform 1.6s var(--ease-out); }
figure[data-reveal] img, .ex-band[data-reveal] img, .cols-media[data-reveal] img { transform: scale(1.08); }
figure[data-reveal].is-visible img, .ex-band[data-reveal].is-visible img, .cols-media[data-reveal].is-visible img { transform: none; }
/* Les blocs deja en verre ne sont pas floutes (le backdrop-filter se comporte mal) */
.ex-band[data-reveal], .fp-next[data-reveal], .fp-swipe[data-reveal],
.acc-tile[data-reveal], .contact-side[data-reveal] { filter: none; }
/* Cascade dans les grilles. A declarer APRES la propriete raccourcie
   "transition" ci-dessus : sinon elle remet le delai a zero. */
[data-reveal-delay="1"] { transition-delay: calc(var(--rev-pas) * 1); }
[data-reveal-delay="2"] { transition-delay: calc(var(--rev-pas) * 2); }
[data-reveal-delay="3"] { transition-delay: calc(var(--rev-pas) * 3); }
[data-reveal-delay="4"] { transition-delay: calc(var(--rev-pas) * 4); }
[data-reveal-delay="5"] { transition-delay: calc(var(--rev-pas) * 5); }
[data-reveal-delay="6"] { transition-delay: calc(var(--rev-pas) * 6); }
[data-reveal-delay="7"] { transition-delay: calc(var(--rev-pas) * 7); }
@media (prefers-reduced-motion: reduce) {
  .sec-title[data-reveal], h1[data-reveal] { clip-path: none; }
  figure[data-reveal] img, .ex-band[data-reveal] img, .cols-media[data-reveal] img { transform: none; }
  [data-reveal] { filter: none; }
}

/* =====================================================================
   L'OUVERTURE , la page se construit dans un ordre precis
   1. la photo se pose, 2. le titre se devoile, 3. le texte,
   4. la legende, 5. le header descend.
   Le CSS ne fait que masquer au depart ; c'est motion.js qui pose les
   retards, un par un. Filet : si le script ne demarre pas, la classe
   js-ouv est retiree au bout de 3 secondes et tout redevient visible.
   ===================================================================== */
html.js-ouv .site-header { opacity: 0; transform: translateY(-18px); }
html.js-ouv .site-header.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
/* La photo d'ouverture : elle arrive de loin, floue, puis se pose net */
html.js-ouv .ouv-photo { opacity: 0; transform: scale(1.1); filter: blur(18px); }
html.js-ouv .ouv-photo.is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s var(--ease-out), transform 1.7s var(--ease-out), filter 1.2s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html.js-ouv .site-header, html.js-ouv .ouv-photo { opacity: 1; transform: none; filter: none; }
}

/* =====================================================================
   RYTHME ET GRILLE , v5.1
   Plus d'air entre les sections, titres de section plus affirmes.
   ===================================================================== */
.sec-head { max-width: 62ch; margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); }
.sec-head .sec-title { margin-bottom: 1rem; }

/* ---------- NOS EXPERTISES : labels plus grands, transition franche ---------- */
.exp-grid { height: clamp(480px, 68vh, 820px); gap: 6px; }
.exp-tile { transition: flex-grow 1.05s var(--ease-out); }
.exp-tile-label {
  left: 1.2rem; bottom: 1.5rem;
  font-size: clamp(2.6rem, 4vw, 4rem); letter-spacing: -0.01em;
  transition: opacity 0.4s var(--ease);
}
.exp-tile-desc {
  left: 1.3rem; right: 1.3rem; bottom: 1.3rem;
  padding: 1.3rem 1.5rem; border-radius: 20px;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease) 0.3s, transform 0.55s var(--ease-out) 0.3s;
}
.exp-tile-desc strong { font-size: clamp(1.5rem, 2.1vw, 2rem); margin-bottom: 0.35rem; }
@media (hover: hover) {
  .exp-grid:hover .exp-tile { flex-grow: 0.7; }
  .exp-grid .exp-tile:hover { flex-grow: 3; }
  /* le label s'efface tout de suite, la carte de verre arrive une fois la tuile ouverte */
  .exp-tile:hover .exp-tile-label { opacity: 0; transition-duration: 0.25s; transition-delay: 0s; }
}

/* ---------- DES EXEMPLES : 3 sur une ligne, format plus contenu ---------- */
.ex-list { grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.ex-band { aspect-ratio: 4 / 5; border-radius: 4px; }
.ex-band > img { height: 100%; }
.ex-band::after { background: linear-gradient(180deg, rgba(10,10,10,0) 34%, rgba(10,10,10,0.72) 100%); }
.ex-band:nth-child(even) .ex-glass { left: clamp(0.7rem, 1.2vw, 1rem); right: clamp(0.7rem, 1.2vw, 1rem); }
.ex-glass {
  left: clamp(0.7rem, 1.2vw, 1rem); right: clamp(0.7rem, 1.2vw, 1rem);
  bottom: clamp(0.7rem, 1.2vw, 1rem); max-width: none;
  padding: clamp(1rem, 1.5vw, 1.3rem) clamp(1.1rem, 1.6vw, 1.4rem); border-radius: 16px;
}
.ex-glass h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.06; }
.ex-glass .c { font-size: 0.78rem; margin-bottom: 0.35rem; }
.ex-glass p {
  font-size: 0.88rem; line-height: 1.45; margin-top: 0.45rem; max-width: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ex-glass .go { margin-top: 0.7rem; font-size: 0.88rem; }
@media (max-width: 900px) { .ex-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ex-list { grid-template-columns: 1fr; } .ex-band { aspect-ratio: 3 / 4; } }

/* ---------- POURQUOI NOUS : plus d'air, hierarchie plus nette ---------- */
.cols-grid { grid-template-columns: 1.6fr 1fr; gap: clamp(2.4rem, 5vw, 5rem); }
.cols-text { gap: clamp(2rem, 3.6vw, 3rem) clamp(2rem, 4vw, 3.4rem); }
.col-item h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-bottom: 0.6rem; }
.col-item p { font-size: 1rem; line-height: 1.6; }
.col-item .tag { font-size: 0.84rem; margin-bottom: 0.5rem; }
.cols-media { aspect-ratio: 4 / 5; margin-top: 0; border-radius: 4px; }
.cols-foot { margin-top: clamp(2.6rem, 5vw, 4rem); }

/* ---------- POURQUOI PAS VOUS : plus calme, moins de bloc ---------- */
.ppv-btn {
  padding: clamp(1.5rem, 2.6vw, 2rem); border: none; border-radius: var(--radius-media);
  background: rgba(10,10,10,0.045);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.1;
  box-shadow: none;
}
.ppv-btn .sub { font-size: 0.92rem; margin-top: 0.5rem; }
.ppv-btn .ppv-arw { font-size: 1.2rem; color: var(--orange-text); }
.ppv-btn:hover {
  background: rgba(10,10,10,0.075); color: var(--ink); border-color: transparent;
  box-shadow: none;
}
.ppv-btn:hover .sub { color: var(--on-light-soft); }

/* Reaction au clic : l'element se gonfle brievement puis revient */
@keyframes novaTap { 0% { transform: scale(1); } 38% { transform: scale(1.016); } 100% { transform: scale(1); } }
.is-tapped { animation: novaTap 0.5s var(--ease-out); }
/* Les boutons s'enfoncent legerement (retour tactile) */
.btn:active, .acc-row__cta:active, .acc-opt:active { transform: scale(0.975); }
.btn, .acc-opt { transition: background 340ms var(--ease), color 340ms var(--ease), border-color 340ms var(--ease), box-shadow 340ms var(--ease), transform 160ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .is-tapped { animation: none; } .btn:active { transform: none; } }

/* =====================================================================
   CHARGEMENT , squelettes et arrivee des images
   Tant qu'une image n'est pas la, son cadre scintille doucement pour
   montrer qu'elle arrive. Elle se pose ensuite en passant de flou a net.
   Sans JS, les images s'affichent normalement (rien n'est masque en CSS seul).
   ===================================================================== */
.is-imgloading { position: relative; }
.is-imgloading::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.03) 18%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.03) 62%);
  background-size: 220% 100%;
  animation: novaSkel 1.5s ease-in-out infinite;
}
.section--light .is-imgloading::after, .section--cream .is-imgloading::after {
  background: linear-gradient(100deg,
    rgba(10,10,10,0.03) 18%, rgba(10,10,10,0.08) 40%, rgba(10,10,10,0.03) 62%);
  background-size: 220% 100%;
}
@keyframes novaSkel { 0% { background-position: 180% 0; } 100% { background-position: -40% 0; } }
img.img-pending { opacity: 0; filter: blur(14px); }
img.img-ready {
  opacity: 1; filter: blur(0); 
  transition: opacity 0.6s var(--ease), filter 0.85s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .is-imgloading::after { animation: none; }
  img.img-pending { opacity: 1; filter: none; transform: none; }
}

/* =====================================================================
   POURQUOI NOUS , correction du rythme aux largeurs intermediaires
   Le texte se comprimait entre 700 et 1150px, et l'image ne suivait pas
   la hauteur du bloc.
   ===================================================================== */
.cols-grid { align-items: stretch; }
.cols-media { aspect-ratio: auto; height: 100%; min-height: clamp(360px, 34vw, 640px); }
.cols-media img { width: 100%; height: 100%; object-fit: cover; }
/* On empile plus tot : deux colonnes de texte a cote d'une image, ca ne tient
   pas confortablement en dessous de 1150px. */
@media (max-width: 1150px) {
  .cols-grid { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
  .cols-media { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 0.6rem; }
}
/* Les colonnes de texte passent en une seule plus tot aussi */
@media (max-width: 820px) { .cols-text { grid-template-columns: 1fr; } }

/* Pourquoi nous : l'image prend plus de place, le texte se resserre.
   Tout est confine au desktop : en dessous, l'image passe au-dessus en 16/9
   et une hauteur minimale forcerait sa largeur hors cadre. */
@media (min-width: 1151px) {
  .cols-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); }
  .cols-text { gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem); align-content: start; }
  .cols-media { min-height: clamp(520px, 46vw, 860px); }
}

/* =====================================================================
   NOS EXPERTISES : accordeon plus doux
   L'ecart entre tuile ouverte et tuiles resserrees etait trop fort :
   les visuels se retrouvaient recadres au point de ne plus rien montrer.
   ===================================================================== */
@media (hover: hover) {
  .exp-grid:hover .exp-tile { flex-grow: 0.88; }
  .exp-grid .exp-tile:hover { flex-grow: 1.85; }
  .exp-tile:hover img { transform: none; }   /* plus de zoom sur l'image */
}

/* =====================================================================
   CAS CLIENT PROFOND : on sort de la colonne etroite
   Le texte garde une largeur de lecture confortable, mais les visuels
   et les blocs occupent toute la largeur du site.
   ===================================================================== */
.cs-chapo { max-width: var(--container); margin-inline: auto; border-left: none; padding-left: var(--gutter); }
.cs-chapo { position: relative; }
.cs-chapo::before { content: ""; position: absolute; left: var(--gutter); top: clamp(2.6rem,6vw,4.5rem); bottom: clamp(1.4rem,3vw,2.2rem); width: 3px; background: var(--orange); }
.cs-chapo { padding-left: calc(var(--gutter) + 1.6rem); max-width: min(var(--container), 78ch); }

.cs-chap { max-width: var(--container); }
.cs-chap > p, .cs-chap > .cs-note { max-width: 66ch; }
.cs-chap > .fp-mark { max-width: 66ch; }

/* Les lignes image + texte prennent toute la largeur */
.cs-feats { max-width: var(--container); margin-inline: auto; gap: clamp(2.6rem, 5vw, 4.4rem); }
.cs-feat-vis { flex: 0 0 46%; }
.cs-feat-vis img { border-radius: var(--radius-media); }
.cs-feat-vis--ph { border-radius: var(--radius-media); }
.cs-feat-txt h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.cs-feat-txt p { font-size: clamp(1rem, 1.35vw, 1.15rem); max-width: 52ch; }

.cs-oneline { max-width: min(var(--container), 46ch); }

/* =====================================================================
   ARRONDIS : une seule valeur pour toutes les images du site
   Les photos etaient tantot a angles vifs, tantot arrondies.
   ===================================================================== */
.ex-band, .prj-card, .cols-media, .exp-tile,
.ap-story__media img, .fp-bleed img, .gp-band img,
.contact-side, .acc-tile, .acc-row__media img, .fp-next { border-radius: var(--radius-media); overflow: hidden; }
.ex-band > img, .prj-card img, .cols-media img, .acc-tile img { border-radius: inherit; }
/* Les cartes de verre suivent l'echelle carte */
.ex-glass, .fp-next-cap, .exp-tile-desc, .contact-glass, .gp-model { border-radius: var(--radius-card); }
/* Le carrousel des fiches garde ses arrondis */
@media (max-width: 720px) { .fp-swipe .fp-track img { border-radius: var(--radius-media); } }

/* =====================================================================
   CORRECTIFS DE CASCADE (audit DA)
   Les pages internes portent .section--light sur <main>, donc les
   sections sombres imbriquees heritaient du traitement clair :
   boutons noir sur noir et textes illisibles.
   ===================================================================== */
.section--dark .btn--ghost { background: var(--paper); color: var(--ink); }
.section--dark .btn--ghost:hover { background: var(--orange); color: #0A0A0A; }
.section--dark .lead { color: var(--on-dark-soft); }
.section--dark .over { color: var(--orange); }

/* L'unification des arrondis doit gagner sur les <style> inline des pages
   (meme specificite mais declares apres le lien vers la charte). */
html .prj-card, html .acc-tile, html .ex-band, html .exp-tile,
html .cols-media, html .contact-side, html .fp-next,
html .ap-story__media img, html .fp-bleed img, html .gp-band img,
html .exp-band__media, html .acc-gal__media, html .acc-row__media img {
  border-radius: var(--radius-media);
}
html .exp-band__media, html .acc-gal__media, html .acc-row { overflow: hidden; }
html .acc-row { border-radius: var(--radius-media); }
html .gp-model, html .ap-nova__block { border-radius: var(--radius-card); }
/* La carte de France reste sans arrondi : c'est un schema, pas une photo */
html .ap-carte__vue img { border-radius: 0; }

/* =====================================================================
   POURQUOI NOUS : l'image se cale sur le bloc texte
   Elle etait forcee plus haute que la colonne de texte, donc elle
   depassait et paraissait posee au hasard.
   ===================================================================== */
@media (min-width: 1151px) {
  .cols-grid { grid-template-columns: 1.08fr 0.92fr; gap: clamp(2.4rem, 4.5vw, 4rem); align-items: stretch; }
  .cols-media { min-height: 0; height: 100%; }
  .cols-media img { height: 100%; width: 100%; object-fit: cover; }
  /* le texte remplit sa colonne : plus de vide au milieu */
  .cols-text { align-content: space-between; gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.8rem); }
}

/* =====================================================================
   POURQUOI NOUS : deux colonnes egales, l'image sur toute la hauteur
   Le titre et le bouton entrent dans la colonne de gauche, l'image
   occupe donc toute la hauteur de la section a droite.
   ===================================================================== */
.cols-left { display: flex; flex-direction: column; }
.cols-left .sec-title { margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.cols-left .cols-text { flex: 1; align-content: start; }
.cols-left .cols-foot { margin-top: clamp(2rem, 3.6vw, 3rem); }
@media (min-width: 1151px) {
  .cols-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 4.5vw, 4.5rem); align-items: stretch; }
  .cols-media { height: 100%; min-height: 0; }
  .cols-media img { height: 100%; width: 100%; object-fit: cover; }
  .cols-left .cols-text { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1150px) {
  .cols-left .sec-title { margin-bottom: 1.4rem; }
}

/* =====================================================================
   POURQUOI PAS VOUS : un picto par profil
   ===================================================================== */
.ppv-btn { grid-template-columns: auto 1fr auto; align-items: center; }
.ppv-picto { width: clamp(52px, 5vw, 68px); height: auto; flex: none; margin-right: 0.2rem; transition: transform 0.5s var(--ease-out); }
.ppv-btn:hover .ppv-picto { transform: translateY(-4px) rotate(-3deg); }
@media (max-width: 640px) { .ppv-picto { width: 46px; } }

/* =====================================================================
   STRATEGIE : quand la tuile s'ouvre, on reste sur le haut de l'illustration
   ===================================================================== */
.exp-tile[href$="#strategie"] img { object-position: center top; }

/* =====================================================================
   TELEPHONE , corrections de fond
   ===================================================================== */
@media (max-width: 680px) {
  /* Les tuiles d'expertise : le label vertical ne tient pas dans la hauteur
     d'une tuile de telephone (il se coupait et debordait). On passe le nom
     a l'horizontale et on montre la description, qui etait masquee faute
     de survol : sur un telephone, il n'y a pas de survol. */
  .exp-grid { flex-direction: column; height: auto; gap: 8px; }
  .exp-tile { flex: none; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .exp-tile-label { display: none; }
  .exp-tile-desc {
    display: block; opacity: 1; transform: none; pointer-events: auto;
    left: 1.1rem; right: 1.1rem; bottom: 1rem; padding: 0;
    background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #fff; font-size: 0.95rem; line-height: 1.4;
    text-shadow: 0 1px 14px rgba(0,0,0,0.75);
  }
  .exp-tile-desc strong { font-size: 1.75rem; line-height: 1.05; margin-bottom: 0.25rem; }
}

/* Sur telephone, on garde la meme apparition qu'ailleurs : deplacement,
   fondu et defloutage. Seule exception, on ne floute pas les GRANDS
   medias : flouter une image plein ecran fait tousser le processeur
   graphique d'un telephone. Elles arrivent par le zoom qui se relache,
   ce qui se voit tout autant. */
@media (max-width: 900px), (pointer: coarse) {
  :root { --rev-flou: 7px; }
  [data-reveal] { transform: translateY(28px); }
  figure[data-reveal], .ex-band[data-reveal], .cols-media[data-reveal],
  .fp-swipe[data-reveal], .prj-card[data-reveal], .gp-band[data-reveal],
  .acc-row__media[data-reveal], .ap-story__media[data-reveal] { filter: none; }
  figure[data-reveal] img, .ex-band[data-reveal] img, .cols-media[data-reveal] img { transform: scale(1.06); }
  html.js-ouv .ouv-photo { filter: blur(12px); transform: scale(1.07); }
  .sec-title[data-reveal], h1[data-reveal] { clip-path: inset(0 0 102% 0); }
}

/* Tant qu'un visuel de fiche n'est pas fourni, on n'affiche pas de cadre
   vide : le bloc devient un texte pleine largeur, ce qui se lit comme un
   parti pris et non comme un site inacheve. Le cadre revient tout seul
   des qu'une image est renseignee dans le JSON du projet. */
.cs-feat-vis--ph { display: none; }
.cs-feat:has(.cs-feat-vis--ph) { display: block; }

/* =====================================================================
   PROJET SUIVANT , on annonce ce vers quoi on envoie
   Un cas complet et une fiche d'une phrase ne se lisent pas pareil :
   le visiteur doit savoir avant de cliquer.
   ===================================================================== */
.fp-next-cap .n {
  display: inline-block; margin-top: 0.55rem;
  padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  background: rgba(244,241,236,0.14); color: var(--on-dark);
}
.fp-next--phare .fp-next-cap .n { background: var(--orange); color: #0A0A0A; }

/* =====================================================================
   LA BULLE , explication au survol
   Elle apparait apres une demi-seconde passee sur la ligne, en verre
   depoli, et suit le curseur. Elle ne pousse rien : le tableau ne bouge
   pas pendant qu'on le lit. Sur telephone il n'y a pas de survol, c'est
   le depliage au doigt qui prend le relais.
   ===================================================================== */
.nova-bulle {
  position: fixed; z-index: 90; left: 0; top: 0;
  max-width: min(360px, calc(100vw - 2rem));
  padding: 0.95rem 1.15rem; border-radius: var(--radius-card);
  background: rgba(10, 10, 10, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(244, 241, 236, 0.16);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  color: var(--on-dark); font-size: 0.9rem; line-height: 1.55;
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 0.24s var(--ease-out), transform 0.34s var(--ease-out);
}
.nova-bulle.on { opacity: 1; transform: none; }
/* Le nom de la ligne, pour qu'on sache toujours de quoi on parle */
.nova-bulle__t {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  line-height: 1.15; color: #fff;
}
.nova-bulle__c { display: block; color: rgba(244, 241, 236, 0.82); }
@media (prefers-reduced-motion: reduce) { .nova-bulle { transition: none; } }
/* Sur telephone la bulle se pose sous la ligne touchee, et on peut la fermer */
@media (hover: none), (pointer: coarse) {
  .nova-bulle { max-width: calc(100vw - 1.6rem); pointer-events: auto; }
}

/* =====================================================================
   FICHE EN CONSTRUCTION
   Une etude de cas a moitie vide dessert le projet. Tant que les visuels
   et le recit ne sont pas prets, la page le dit franchement.
   ===================================================================== */
.fp-chantier { max-width: 56ch; }
.fp-chantier p { color: var(--on-dark); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; }
.fp-chantier p.s { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem;
  line-height: 1.65; letter-spacing: 0; color: var(--on-dark-soft); margin-top: 1rem; }
.fp-chantier .btn { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* La pastille qui previent avant le clic, sur les bandes de projets */
.ex-glass .chantier {
  display: inline-block; margin-top: 0.7rem;
  padding: 0.28rem 0.75rem; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 600;
  background: rgba(244,241,236,0.16); color: var(--on-dark);
}

/* =====================================================================
   LES PRIX ANNONCES DES LA HOME
   Onze concurrents sur quinze affichent leurs prix. Ne pas le faire
   contredit la transparence qu'on revendique par ailleurs.
   ===================================================================== */
.prix-bande { padding-block: clamp(2.6rem, 5vw, 4rem); }
.prix-bande__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.prix-bande__item {
  display: block; padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--radius-card); background: rgba(10, 10, 10, 0.05);
  transition: background 0.3s var(--ease);
}
.prix-bande__item:hover { background: rgba(10, 10, 10, 0.09); }
.prix-bande__item .q { display: block; font-size: 0.92rem; color: var(--on-light-soft); margin-bottom: 0.5rem; }
.prix-bande__item strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.1; color: var(--ink);
}
.prix-bande__item .g { display: block; margin-top: 0.8rem; font-size: 0.92rem; font-weight: 600; color: var(--orange-text); }
@media (max-width: 700px) { .prix-bande__grid { grid-template-columns: 1fr; } }


/* =====================================================================
   PASSAGE D'UNE PAGE A L'AUTRE
   Sans transition, chaque clic donne un blanc puis une page qui se
   remonte : ca ressemble a un blocage. Ici le contenu s'efface dans le
   sens de la navigation, puis la nouvelle page joue son ouverture.
   ===================================================================== */
html.js-quitte main,
html.js-quitte .site-footer {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.26s var(--ease-out), transform 0.32s var(--ease-out);
}
/* Retour en arriere : le contenu repart vers le bas, on comprend qu'on remonte */
html.js-quitte[data-sens="retour"] main,
html.js-quitte[data-sens="retour"] .site-footer { transform: translateY(14px); }
html.js-quitte .site-header { opacity: 0; transition: opacity 0.26s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.js-quitte main, html.js-quitte .site-footer, html.js-quitte .site-header {
    opacity: 1; transform: none; transition: none;
  }
}