/* ============================================================
   EN VUE, studio de création. Design system
   Charte issue de l'analyse drinkjoyrush.com (valeurs vérifiées)
   ============================================================ */

:root {
  /* Base */
  --paper: #FBF6ED;
  --ink: #2F1948;
  --ink-soft: rgba(47, 25, 72, .64);

  /* Accents (1 par page/service) */
  --pink: #FF9DD3;
  --red: #8E1150;      /* grenat, extrait des photos */
  --orange: #7FD6D6;   /* turquoise clair */
  --sky: #85D8FF;
  --plum: #7D133D;
  --flame: #E01A6E;    /* magenta vif, extrait des photos */
  --coral: #00BFC4;    /* turquoise vif */
  --lavender: #B9B6DB;

  /* Accent courant (surchargé par page via body[data-accent]) */
  --accent: var(--pink);
  --accent-text: var(--ink);

  /* Typo */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter Tight', system-ui, sans-serif;
  --t-hero: clamp(2.6rem, 7.5vw, 5.6rem);
  --t-h2: clamp(2rem, 5vw, 3.6rem);
  --t-h3: clamp(1.15rem, 2.2vw, 1.5rem);
  --t-lead: clamp(1rem, 1.35vw, 1.15rem);
  --t-body: 1rem;
  --t-micro: .8rem;

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(1.2rem, 5vw, 3rem);
  --sec-y: clamp(4rem, 10vh, 7.5rem);
  --r-pill: 999px;
  --r-card: 24px;
  --r-img: 18px;

  /* Motion (valeurs réelles du site source) */
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-pop: cubic-bezier(.34, 1.6, .64, 1);
  --d-fast: .1s;
  --d-base: .3s;
  --d-slow: .4s;
  --d-reveal: .8s;

  --shadow-soft: 0 14px 44px rgba(47, 25, 72, .10);
}

body[data-accent="sky"]    { --accent: var(--sky);    --accent-text: var(--ink); }
body[data-accent="pink"]   { --accent: var(--pink);   --accent-text: var(--red); }
body[data-accent="orange"] { --accent: var(--orange); --accent-text: var(--ink); }
body[data-accent="plum"]   { --accent: var(--plum);   --accent-text: var(--paper); }

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--flame); color: var(--paper); }
:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--sec-y); }

/* ---------- Typographie ---------- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; }
.lead { font-size: var(--t-lead); color: var(--ink-soft); max-width: 62ch; }
.kicker {
  font: 700 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .5em;
}
.kicker::before { content: '✦'; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Boutons (ombre dure, effet poussoir) ---------- */
.btn-group { display: inline-flex; gap: .55rem; align-items: stretch; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  padding: .95rem 1.9rem; text-decoration: none; cursor: pointer;
  font: 700 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow var(--d-fast) ease, transform var(--d-fast) ease, background-color var(--d-base) ease, color var(--d-base) ease;
}
.btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--round { padding: 0; width: 3.05rem; aspect-ratio: 1; font-size: 1.05rem; }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 rgba(47,25,72,.35); }
.btn--flame { background: var(--flame); color: var(--paper); }

/* ---------- Étiquettes (pop en cascade) ---------- */
.label {
  display: inline-block;
  background: var(--paper); color: var(--ink);
  font: 700 var(--t-micro)/1.2 var(--font-ui);
  text-transform: uppercase; letter-spacing: .06em;
  padding: .55rem 1rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: scale(.82); opacity: 0;
  transition: transform var(--d-slow) var(--ease-pop),
              opacity var(--d-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-in .label, .label.is-in { transform: scale(1); opacity: 1; }
.labels { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Reveal au scroll ---------- */
/* Fondu-montée. Plus aucun clip-path : il masquait ou tranchait les titres
   dès que le texte débordait de sa boîte. */
.reveal-mask {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-reveal) var(--ease-out);
}
.reveal-mask.is-in { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Masque festonné (signature) ---------- */
.cloud { position: relative; display: inline-block; }
.cloud::before {
  content: ''; position: absolute; inset: 0;
  transform: translate(12px, 14px);
  background: var(--flame);
  clip-path: url(#scallop);
}
.cloud > img { position: relative; clip-path: url(#scallop); }
.cloud--accent::before { background: var(--accent); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  transition: background-color var(--d-base) ease, color var(--d-base) ease, border-color var(--d-base) ease;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--ink);
}
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem;
}
.brand { text-decoration: none; line-height: 1; }
.brand__name { font: 400 1.7rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.brand__tag { font: 700 .58rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); display: block; margin-top: .2rem; }
.nav { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: .2rem; }
.header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5rem; }
.nav a {
  text-decoration: none; padding: .6rem 1rem; border-radius: var(--r-pill);
  font: 700 var(--t-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em;
  border: 1.5px solid transparent;
  transition: border-color var(--d-base) ease, background-color var(--d-base) ease;
}
.nav a:hover { border-color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); border-color: var(--ink); }
.nav .btn { margin-left: .4rem; }
.burger {
  grid-column: 3; justify-self: end;
  display: none;
  width: 3rem; height: 3rem;
  border: 1.5px solid currentColor; border-radius: 50%;
  background: none; cursor: pointer;
  padding: 0; place-items: center;
}
.burger span {
  display: block; width: 1.1rem; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--d-base) var(--ease-quart), opacity var(--d-fast) ease;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Menu mobile : overlay plein écran ---------- */
.mobnav {
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) ease, visibility var(--d-base) ease;
}
.mobnav.is-open { opacity: 1; visibility: visible; }
.mobnav__close {
  position: absolute; top: 1.1rem; right: 1.3rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: none; border: 1.5px solid var(--paper); color: var(--paper);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--d-base) ease, color var(--d-base) ease;
}
.mobnav__close:hover { background: var(--flame); border-color: var(--flame); }
.mobnav__in { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.mobnav a {
  display: block; text-decoration: none; color: var(--paper);
  font: 700 clamp(1.8rem, 7vw, 3rem)/1.15 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em;
  padding: .3rem 1rem;
  opacity: .55;
  transition: opacity var(--d-base) ease, color var(--d-base) ease;
}
.mobnav a:hover, .mobnav a[aria-current="page"] { opacity: 1; color: var(--pink); }
.mobnav__cta {
  margin-top: 1.5rem; color: var(--paper) !important; opacity: 1 !important;
  border: 1.5px solid var(--flame); border-radius: var(--r-pill);
  padding: .8rem 2rem !important; font-family: var(--font-ui) !important;
  font-size: 1rem !important; letter-spacing: .08em !important;
  background: var(--flame);
}

@media (max-width: 880px) {
  .nav { display: none; }
  .header__actions { display: none; }
  .burger { display: grid; }
}

/* ---------- Hero plein écran (photo pleine largeur, texte dessus) ---------- */
.hero-full {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  text-align: left;
  color: var(--paper);
  overflow: clip;
  padding: 7rem 0 5rem;
}
.hero-full__bg { position: absolute; inset: 0; z-index: 0; }
.hero-full__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); animation: heroZoom 22s var(--ease-out) forwards; }
.hero-full__bg img { filter: brightness(.92) contrast(1.04) saturate(1.06); }
.hero-full__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(47,25,72,.66) 0%, rgba(47,25,72,.34) 34%, rgba(47,25,72,0) 56%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.24) 100%);
}
@keyframes heroZoom { to { transform: scale(1.1); } }
.hero-full .wrap { position: relative; z-index: 1; }
.hero-full__inner { max-width: min(46%, 620px); }
@media (max-width: 1100px) { .hero-full__inner { max-width: min(60%, 540px); } }
.hero-full h1 {
  font-size: clamp(2.7rem, 6.6vw, 6rem);
  margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero-full .sub {
  font: 800 clamp(.9rem, 1.2vw, 1.15rem)/1.5 var(--font-ui);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 1.4rem 0 2.4rem;
  max-width: 32ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.hero-full .kicker { color: var(--paper); opacity: .9; margin-bottom: 1.4rem; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
  z-index: 1; font: 700 .68rem/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: .16em; color: var(--paper); opacity: .8;
  display: grid; gap: .5rem; justify-items: center;
}
.scroll-cue span { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Hero de page intérieure : bandeau coloré, plein, centré */
.hero-band {
  background: var(--accent); color: var(--accent-text);
  text-align: center;
  padding: clamp(6.5rem, 15vh, 10rem) 0 clamp(3.5rem, 8vh, 5.5rem);
}
.hero-band h1 { font-size: clamp(2.6rem, 7vw, 5.8rem); max-width: 17ch; margin: .7rem auto 0; }
.hero-band .sub {
  font: 700 clamp(.8rem, 1vw, .95rem)/1.55 var(--font-ui);
  text-transform: uppercase; letter-spacing: .03em;
  max-width: 52ch; margin: 1.5rem auto 2.2rem;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.hero-band .btn-group { margin: 0 auto; }
.hero-band .crumbs { color: color-mix(in srgb, currentColor 62%, transparent); padding: 0; }
.hero-band .labels { justify-content: center; margin-top: 2rem; }

/* Bouton en hero : pas d'ombre dure, contour fin */
.btn--hero { box-shadow: none; padding: 1.1rem 2.3rem; }
.btn--hero:hover { transform: none; box-shadow: none; background: var(--flame); color: var(--paper); border-color: var(--flame); }
.btn--hero:active { transform: scale(.97); box-shadow: none; }

/* Bloc image + texte (sections intérieures) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split--rev > *:first-child { order: 2; }
@media (max-width: 880px) { .split--rev > *:first-child { order: 0; } }

/* ---------- Cartes ---------- */
.card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-soft);
}
.card .kicker { color: var(--ink-soft); }
.card h3 { margin: .7rem 0 .55rem; }
.card p { color: var(--ink-soft); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 880px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Sections colorées pleine largeur ---------- */
.band { background: var(--accent); color: var(--accent-text); }
.band .lead { color: color-mix(in srgb, currentColor 78%, transparent); }
.band .card { color: var(--ink); }
.band .card p { color: var(--ink-soft); }

/* ---------- Galeries projets (carrousel identités) ---------- */


.work {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: var(--ink);
}
.work__img {
  display: block; width: 100%;
  border-radius: 24px; overflow: hidden;
  transition: transform var(--d-base) var(--ease-quart);
}
.work:hover .work__img { transform: translateY(-5px); }

/* page graphisme : les cartes gardent le contour + ombre orange */
#rail-works .work__img {
  border-color: var(--flame);
  box-shadow: 5px 6px 0 var(--flame);
  transition: transform var(--d-base) var(--ease-quart), box-shadow var(--d-fast) ease;
}
#rail-works .work:hover .work__img { transform: translate(-3px, -4px); box-shadow: 9px 11px 0 var(--flame); }
.work__img img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  transition: transform var(--d-slow) var(--ease-quart);
}
.work:hover .work__img img { transform: scale(1.05); }

.work__title {
  font: 700 clamp(1.5rem, 2.6vw, 2.2rem)/1.05 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em;
  margin: 1.4rem 0 .3rem;
  max-width: 12ch;
}
.work__sub {
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--red);
}

/* ---------- Stats ---------- */
.stats { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.stat b { font: 400 2.2rem/1 var(--font-display); display: block; }
.stat span { font: 700 var(--t-micro)/1.3 var(--font-ui); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); }

/* ---------- Comparatif (sites-web) ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } }
.vs ul { list-style: none; padding: 0; display: grid; gap: .65rem; margin-top: 1rem; }
.vs li { padding-left: 1.6em; position: relative; }
.vs--them li::before { content: '✕'; position: absolute; left: 0; color: var(--coral); font-weight: 700; }
.vs--me { background: var(--accent); }
.vs--me li::before { content: '✓'; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.vs--me li, .vs--me p { color: var(--ink); }

/* ---------- Offre / prix ---------- */
.offer { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 880px) { .offer { grid-template-columns: 1fr; } }
.price-card { text-align: center; }
.price-card .from { font: 700 var(--t-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.price-card .price { font: 400 clamp(3.4rem, 7vw, 5rem)/1 var(--font-display); margin: .3rem 0; }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; display: grid; gap: .55rem; text-align: left; }
.price-card li { padding-left: 1.6em; position: relative; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--flame); font-weight: 700; }
.countdown { display: flex; gap: .6rem; justify-content: center; margin-top: 1.1rem; flex-wrap: wrap; }
.countdown div { background: var(--ink); color: var(--paper); border-radius: 12px; padding: .55rem .7rem; min-width: 3.4rem; }
.countdown b { font: 400 1.5rem/1 var(--font-display); display: block; }
.countdown span { font: 700 .6rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; opacity: .75; }

/* ---------- Packs ---------- */
.pack { position: relative; display: flex; flex-direction: column; }
.pack .price { font: 400 2rem/1 var(--font-display); margin: .4rem 0 1rem; }
.pack ul { list-style: none; padding: 0; display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.pack li { padding-left: 1.5em; position: relative; }
.pack li::before { content: '✓'; position: absolute; left: 0; color: var(--flame); font-weight: 700; }
.pack .btn { margin-top: auto; align-self: start; }
.pack--star { background: var(--accent); }
.pack--star li::before { color: var(--ink); }
.pack__flag { position: absolute; top: -1rem; right: 1.2rem; }

/* ---------- Carrousel d'avis ---------- */
.avis { padding-bottom: clamp(3rem, 7vh, 5rem); }
.avis__head { text-align: center; }
.avis__head h2 {
  margin-inline: auto;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 800;
  line-height: .92;
}
.avis__nav { display: inline-flex; gap: .4rem; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.rnd {
  width: 3rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); cursor: pointer;
  font: 400 1.15rem/1 var(--font-ui);
  display: grid; place-items: center;
  transition: background-color var(--d-base) ease, color var(--d-base) ease, transform var(--d-fast) ease;
}
.rnd:hover { background: var(--ink); color: var(--paper); }
.rnd:active { transform: scale(.94); }
/* Desactivee : le bouton reste plein, seuls la fleche et le contour palissent.
   Avec une opacite globale, on voyait l'image a travers et ca semblait casse. */
.rnd:disabled {
  cursor: default;
  background: var(--paper);
  color: color-mix(in srgb, var(--ink) 26%, var(--paper));
  border-color: color-mix(in srgb, var(--ink) 20%, var(--paper));
}
.rnd:disabled:hover {
  background: var(--paper);
  color: color-mix(in srgb, var(--ink) 26%, var(--paper));
  transform: none;
}

/* Le rail : déborde volontairement de la colonne, on scrolle dedans */
.rail {
  display: flex; gap: 1.2rem;
  margin-top: clamp(2rem, 5vh, 3.2rem);
  padding: .5rem var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                 /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -3px; }

.rev {
  flex: 0 0 clamp(290px, 31%, 440px);
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  min-height: 430px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 28px;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  transition: transform var(--d-base) var(--ease-quart);
}
.rev:hover { transform: translateY(-5px); }

/* à la place des étoiles : le service rendu */
.rev__tag {
  font: 800 .95rem/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--red);
}
.rev__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.15;
  text-transform: none;
  margin: 1.6rem 0 1rem;
}
.rev__text { font-weight: 700; color: var(--ink); }
.rev__who {
  margin-top: auto; padding-top: 1.4rem;
  border-top: 1.5px solid var(--line);
}
.rev__who b { display: block; font: 700 1.2rem/1.2 var(--font-display); }
.rev__who span {
  display: block; margin-top: .15rem;
  font: 700 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft);
}

/* mobile : toujours un carrousel, une carte à la fois */
@media (max-width: 760px) {
  .rev { flex: 0 0 84%; min-height: 300px; }
}

/* ---------- Bandeau image avant le footer ---------- */
.banner {
  position: relative;
  overflow: clip;
  color: var(--paper);
  display: grid; align-items: center;
  min-height: clamp(480px, 72vh, 820px);
  /* on réserve la hauteur du nuage rose (20 % de la largeur) */
  padding: clamp(4rem, 9vh, 7rem) 0 calc(20vw + clamp(1rem, 3vh, 2rem));
}
.banner__bg { position: absolute; inset: 0; z-index: 0; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.92) contrast(1.04) saturate(1.06); }
.banner__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(47,25,72,.66) 0%, rgba(47,25,72,.34) 34%, rgba(47,25,72,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.22) 100%);
}
.banner > .wrap {
  position: relative; z-index: 1;
  max-width: none;                                  /* on quitte la colonne centrée */
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);       /* le texte se pose au niveau de l'eau */
}
.banner h2 {
  font-size: clamp(2.4rem, 5.2vw, 5.2rem);
  line-height: .92;
  margin: 0 0 2.2rem;
  /* aucune contrainte de largeur : reveal-mask découpe à la boîte de l'élément */
  text-shadow: 0 2px 34px rgba(47, 25, 72, .5);
}
.banner__inner { max-width: min(44%, 620px); }
@media (max-width: 1100px) { .banner__inner { max-width: min(62%, 520px); } }
@media (max-width: 760px)  { .banner__inner { max-width: 100%; margin-inline: auto; } }
@media (max-width: 880px) {
  .hero-full { text-align: center; }
  .hero-full__inner { max-width: 100%; margin-inline: auto; }
  .hero-full .sub { margin-inline: auto; }
  .hero-full .btn-group { margin-inline: auto; }
  .hero-full__bg img { object-position: 50% 30%; }
  .hero-full__bg::after { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 45%, rgba(0,0,0,.55)); }
}

@media (max-width: 760px) {
  .banner { text-align: center; }
  .banner .wrap > * { max-width: 100%; }
  .banner__bg img { object-position: 68% center; }
  .banner__bg::after { background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12) 42%, rgba(0,0,0,.45)); }
  .banner .btn-group { margin-inline: auto; }
}

/* ---------- Le mur des marques (page À propos) ---------- */
.brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 880px) { .brands { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .brands { grid-template-columns: 1fr; } }
.bcard {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
  padding: 1.2rem 1.4rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--d-slow) var(--ease-pop), box-shadow var(--d-fast) ease;
}
.bcard:hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink); }
.bcard strong { display: block; font: 700 1.05rem/1.25 var(--font-ui); }
.bcard span { display: block; margin-top: .15rem; color: var(--ink-soft); font-size: .9rem; }
.bcard em {
  display: inline-block; margin-top: .8rem; font-style: normal;
  font: 700 var(--t-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em;
  color: var(--red);
}
.bcard--open { background: var(--flame); color: var(--paper); border-color: var(--ink); }
.bcard--open span { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.bcard--open em { color: var(--paper); }

/* ---------- Footer géant (bord festonné + typo pleine largeur) ---------- */
.footer {
  position: relative;
  background: var(--pink);
  color: var(--red);
  padding-top: clamp(1.5rem, 4vh, 3rem);
}
/* Le nuage d'Ambre : image collée au pied de la section aubergine.
   Ratio 2400x480 respecté → cercles parfaitement ronds. */
.footer__cloud {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 3px);   /* 3 px de chevauchement : fondu invisible avec le rose */
  width: 100%; height: auto;
  display: block; z-index: 2;
  pointer-events: none;
}
.footer > .wrap { position: relative; z-index: 1; }

.footer__logo {
  text-align: center;
  font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: clamp(1.5rem, 4vh, 2.6rem);
}
.footer__logo small {
  display: block; margin-top: .35rem;
  font: 700 .58rem/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: .24em; opacity: .62;
}

.footer__stage { position: relative; }

/* Le titre géant : ÉNORME, 90 % de la largeur, calé au pixel par main.js */
.footer__mega {
  color: var(--red);
  position: relative; z-index: 1;
  width: 90%; margin: 0 auto clamp(1.5rem, 4vh, 3rem);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .8;
  text-align: center;
}
.footer__mega p { margin: 0; }
/* inline-block : scrollWidth renvoie la largeur du TEXTE, pas celle du conteneur */
.footer__mega .fit { display: inline-block; white-space: nowrap; font-size: 100px; }

/* Les nuages d'Ambre, posés sur les lettres du titre géant.
   Deux couches : le <figure> porte la parallaxe (curseur), le <span> le flottement. */
.footer__float {
  position: absolute;
  z-index: 3;
  width: clamp(165px, 21vw, 340px);
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.footer__float .in {
  display: block;
  transition: transform var(--d-slow) var(--ease-pop);
}
.footer__float img { width: 100%; height: auto; display: block; }

.footer__float--l { left: -2%; top: 0%; }
.footer__float--r { right: -2%; top: -8%; }

.footer__float--l .in { animation: floatA 7s var(--ease-out) infinite; }
/* la fille en vert est retournée, comme sur le site source */
.footer__float--r .in { animation: floatB 8.5s var(--ease-out) infinite .6s; }

@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-16px) rotate(-2deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(186deg); }
  50%      { transform: translateY(-20px) rotate(179deg); }
}

/* survol : le flottement se fige, le nuage grossit avec le dépassement de la charte */
.footer__float--l:hover .in { animation-play-state: paused; transform: scale(1.1) rotate(0deg) translateY(-12px); }
.footer__float--r:hover .in { animation-play-state: paused; transform: scale(1.1) rotate(180deg) translateY(-12px); }

@media (max-width: 700px) { .footer__float { display: none; } }

/* Champ email en creux, chevauche le titre */
.footer__form {
  position: absolute; z-index: 4;
  left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2.6deg);
  width: min(560px, 84%);
  display: flex; align-items: center; gap: .4rem;
  background: var(--paper);
  border-radius: 14px;
  padding: .45rem .45rem .45rem 1.4rem;
  box-shadow: 0 10px 34px rgba(122, 20, 5, .18);
}
.footer__form input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 700 .78rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em;
  color: var(--red); padding: .8rem 0;
}
.footer__form input::placeholder { color: color-mix(in srgb, var(--red) 42%, transparent); }
.footer__form button {
  flex: none; cursor: pointer; border: 0;
  background: var(--red); color: var(--paper);
  border-radius: var(--r-pill); padding: .9rem 1.5rem;
  font: 700 .74rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em;
  transition: background-color var(--d-base) ease, transform var(--d-fast) ease;
}
.footer__form button:hover { background: var(--flame); }
.footer__form button:active { transform: scale(.97); }
@media (max-width: 560px) {
  .footer__form { position: static; transform: rotate(-1.5deg); width: 100%; margin-bottom: 2rem; }
}

/* Colonnes */
.footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem; padding-block: clamp(1.5rem, 4vh, 2.5rem);
}
@media (max-width: 820px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
.footer h4 {
  font: 400 1rem/1 var(--font-display); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 1rem;
  color: color-mix(in srgb, var(--red) 45%, var(--pink));
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; font: 700 .82rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.footer a:hover { color: var(--flame); }
.footer__base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.3rem; border-top: 1.5px solid color-mix(in srgb, var(--red) 30%, var(--pink));
  font: 700 .7rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .07em;
  color: color-mix(in srgb, var(--red) 65%, var(--pink));
}
.footer__base a { font-size: .7rem; }

/* ---------- Divers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.section-head { margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.section-head h2 { margin-top: .5rem; max-width: 24ch; }
.inline-link { color: var(--flame); font-weight: 700; }
.crumbs { font: 700 .72rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); padding-top: 1.2rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--flame); }

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-mask, .reveal, .label { transform: none; opacity: 1; }
}


/* ---------- Header posé sur le hero photo ---------- */
.header--over {
  position: fixed; inset-inline: 0; top: 0;
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--paper);
}
.header--over .brand__tag { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.header--over .nav a { border-color: transparent; }
.header--over .nav a:hover { border-color: var(--paper); }
.header--over .nav a[aria-current="page"] { background: transparent; color: var(--paper); border-color: var(--paper); }
.header--over .btn {
  background: var(--paper); color: var(--ink);
  border-color: var(--paper); box-shadow: none;
}
.header--over .btn:hover { transform: none; background: var(--flame); color: var(--paper); border-color: var(--flame); box-shadow: none; }
.header--over .burger { color: var(--paper); }
/* Une fois scrollé : le header redevient crème */
.header--over.is-stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--ink);
  color: var(--ink);
}
.header--over.is-stuck .brand__tag { color: var(--ink-soft); }
.header--over.is-stuck .nav a:hover { border-color: var(--ink); }
.header--over.is-stuck .nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); border-color: var(--ink); }
.header--over.is-stuck .btn { background: var(--flame); color: var(--paper); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.header--over.is-stuck .btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.header--over.is-stuck .burger { color: var(--ink); }

/* Grande image de section (masque festonné, taille réelle) */
.cloud--xl { width: 100%; }
.cloud--xl > img { width: 100%; aspect-ratio: 1; object-fit: cover; }


/* ---------- Bloc duo : photo pleine hauteur + panneau couleur ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(560px, 88vh, 900px);
  padding: 0;                       /* pleine largeur, bord à bord */
}
.duo__img { margin: 0; overflow: hidden; }
.duo__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.duo__panel {
  background: var(--orange);
  color: var(--red);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4.5vw, 4.5rem);
}
.duo__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3.8rem);
  line-height: .96;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 15ch;
}
.duo__foot { display: grid; gap: 1.8rem; }
.duo__text {
  font: 700 clamp(.85rem, 1vw, 1rem)/1.5 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  max-width: 40ch;
  color: var(--red);
}
.duo__panel .btn {
  background: var(--paper); color: var(--ink);
  border-color: var(--red);
  box-shadow: 4px 4px 0 var(--red);
  justify-self: start;
}
.duo__panel .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red); }
.duo__panel .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--red); }
.duo__panel .btn-group { justify-self: start; }

@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; min-height: 0; }
  .duo__img { aspect-ratio: 4 / 3; }
  .duo__panel { gap: 3rem; padding-block: clamp(2.5rem, 7vh, 4rem); }
  .duo__title { max-width: none; }
}


/* ---------- La méthode ---------- */
.method { background: var(--paper); }
.method h2 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  max-width: 16ch;
  margin: 0;
}
.method__head { margin-bottom: clamp(3rem, 7vh, 5rem); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 3.5rem; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: clamp(2.2rem, 4vw, 3.4rem); }
/* le chiffre : évidé, en orange, posé derrière le titre */
.step b {
  position: absolute;
  top: 0; left: -.06em;
  font: 700 clamp(4rem, 6.5vw, 7rem)/1 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--flame);
  letter-spacing: -.03em;
  pointer-events: none;
  transition: color var(--d-base) var(--ease-out);
}
.step:hover b { color: var(--flame); }
.step h3 {
  position: relative;
  font: 700 clamp(1.15rem, 1.7vw, 1.45rem)/1.2 var(--font-display);
  text-transform: none;
  margin-bottom: .7rem;
}
.step p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- Manifeste : phrase géante + grande image + nuages ---------- */
.manif {
  background: var(--paper);
  overflow: clip;
  padding-bottom: clamp(6rem, 14vh, 10rem);
}
.manif__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lead  media"
    "txt   media";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(1.5rem, 4vh, 2.5rem);
  align-items: start;
}
.manif__lead  { grid-area: lead; }
.manif__txt   { grid-area: txt; }
.manif__right { grid-area: media; }

/* Mobile : accroche, puis image bord a bord, puis explication.
   L'image sort des marges pour toucher les bords de l'ecran. */
@media (max-width: 900px) {
  .manif__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "lead" "media" "txt";
    row-gap: clamp(1.8rem, 5vh, 2.6rem);
  }
  .manif__right {
    margin-inline: calc(var(--gutter) * -1);
  }
  .manif__shot { border-radius: 0; }
  .manif__shot img { aspect-ratio: 4 / 5; }
}

/* niveau 1 : la phrase qui claque, en capitales */
.manif__lead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 13ch;
  margin: 0 0 1.6rem;
}
/* niveau 2 : le texte explicatif, en casse normale et taille lisible */
.manif__body {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}
/* niveau 3 : la signature */
.manif__coda {
  display: block;
  margin-top: 1.4rem;
  font: 700 clamp(1rem, 1.3vw, 1.25rem)/1.4 var(--font-display);
  color: var(--red);
  max-width: 26ch;
}

.manif__right { position: relative; display: flex; flex-direction: column; }
.manif__shot { margin: 0; border-radius: 28px; overflow: hidden; }
.manif__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Nuages : mêmes réglages que ceux du footer.
   Deux couches : <figure> = parallaxe curseur, <span class="in"> = flottement. */
.cld {
  margin: 0; position: absolute; z-index: 3;
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.cld .in { display: block; transition: transform var(--d-slow) var(--ease-pop); }
.cld img { width: 100%; height: auto; display: block; }

/* desktop : il descend dans le blanc, sous le texte */
.cld--a {
  left: -88%;
  bottom: clamp(-170px, -10vw, -80px);
  width: clamp(220px, 26vw, 400px);
}
.cld--a .in { animation: floatA 7s var(--ease-out) infinite; }
.cld--a:hover .in { animation-play-state: paused; transform: scale(1.1) rotate(0deg) translateY(-12px); }

/* desktop : à cheval sur le bord gauche de l'image */
.cld--b {
  left: -4%; bottom: 32%;
  width: clamp(120px, 15vw, 225px);
}
.cld--b .in { animation: floatC 8.5s var(--ease-out) infinite .6s; }
.cld--b:hover .in { animation-play-state: paused; transform: scale(1.1) rotate(0deg) translateY(-12px); }

@keyframes floatC {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50%      { transform: translateY(-18px) rotate(-1deg); }
}

@media (max-width: 900px) {
  .manif__grid { grid-template-columns: 1fr; gap: 3rem; }
  .manif__text { max-width: none; }
  /* mobile : les deux nuages se posent sur la photo portrait */
  .cld--a { left: auto; right: -5%; top: -7%; bottom: auto; width: 42%; }
  .cld--b { left: -6%; right: auto; bottom: -7%; top: auto; width: 40%; }
}

/* ---------- Bloc services : fond photo + étalonnage ---------- */
.svcs {
  position: relative;
  overflow: clip;
  color: var(--paper);
  padding-block: clamp(4rem, 10vh, 8rem);
}
.svcs__bg { position: absolute; inset: 0; z-index: 0; }
/* Pas de voile coloré : un étalonnage. On assombrit sans teinter.
   Régler ici : brightness = luminosité, contrast = contraste, saturate = couleurs. */
.svcs__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.78) contrast(1.06) saturate(1.04);
}
.svcs__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.10) 100%);
}
.svcs > .wrap { position: relative; z-index: 1; }

.svcs__head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.svcs__head h2 {
  color: var(--paper);
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  max-width: 20ch; margin-inline: auto;
  text-shadow: 0 2px 34px rgba(47, 25, 72, .45);
}
.svcs__cta {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--paper);
  text-shadow: 0 2px 24px rgba(47, 25, 72, .4);
}

/* Les cartes : crème, contour et ombre orange, sans surtitre ni puce */
.svcs .svc {
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--flame);
  border-radius: var(--r-card);
  box-shadow: 5px 6px 0 var(--flame);
  transition: transform var(--d-base) var(--ease-quart), box-shadow var(--d-fast) ease;
}
.svcs .svc:hover { transform: translate(-3px, -4px); box-shadow: 9px 11px 0 var(--flame); }
.svcs .svc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.15;
  text-transform: none;
}
.svcs .svc p { color: var(--ink-soft); }
.svcs .svc__go {
  margin-top: auto; padding-top: 1.2rem;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--red);
}

/* Hero : la ligne de service au-dessus du titre (elle porte les mots-clés) */
.hero__kicker {
  font: 800 clamp(.7rem, .95vw, .85rem)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .18em;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  margin-bottom: 1.4rem;
}


/* ---------- Bloc identité : 3 cartes côte à côte, même sur mobile ---------- */
@media (max-width: 880px) {
  .svcs .grid-3 {
    grid-template-columns: none;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);   /* le rail déborde bord à bord */
    padding-inline: var(--gutter);
    padding-bottom: .4rem;
  }
  .svcs .grid-3::-webkit-scrollbar { display: none; }
  .svcs .grid-3 > .svc {
    flex: 0 0 78%;               /* une carte à la fois, la suivante dépasse */
    scroll-snap-align: center;
  }
}


/* ---------- Nuages posés dans le carrousel d'avis (page graphisme) ---------- */
.avis.parallax-zone { position: relative; overflow: clip; }
.cld--avis-l, .cld--avis-r {
  position: absolute; z-index: 0;   /* derrière les cartes, dans le blanc */
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.cld--avis-l { left: -3%; top: 34%; width: clamp(120px, 13vw, 230px); }
.cld--avis-r { right: -3%; top: 12%; width: clamp(100px, 11vw, 195px); }
.cld--avis-l .in { animation: floatA 7.5s var(--ease-out) infinite; }
.cld--avis-r .in { animation: floatC 9s var(--ease-out) infinite .5s; }
.cld--avis-l:hover .in, .cld--avis-r:hover .in {
  animation-play-state: paused; transform: scale(1.1) translateY(-10px);
}
/* le contenu passe au-dessus des nuages */
.avis.parallax-zone .wrap, .avis.parallax-zone .rail { position: relative; z-index: 1; }

/* mobile : plus petits et repoussés dans les coins, sans gêner la lecture */
@media (max-width: 760px) {
  .cld--avis-l { left: -6%; top: auto; bottom: 2%; width: 30%; }
  .cld--avis-r { right: -6%; top: 2%; width: 26%; }
}


/* ---------- Emplacements "projet à venir" (carrousel sites) ---------- */
#rail-sites .work { flex: 0 0 clamp(260px, 30%, 380px); scroll-snap-align: start; }
.work--soon { justify-content: flex-start; }
.work__img--soon {
  display: grid; place-items: center;
  aspect-ratio: 3/4; width: 100%;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, var(--paper));
  border-radius: 24px;
  color: var(--ink-soft);
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .1em;
  box-shadow: none;
}


/* ---------- Carrousel à défilement infini (page sites-web) ---------- */
.marquee {
  overflow: hidden;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; gap: clamp(1.2rem, 2.2vw, 1.8rem);
  width: max-content;
  animation: scroll-x 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee .work { flex: 0 0 clamp(260px, 26vw, 380px); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; overflow-x: auto; }
}


/* ---------- Bloc mission : titre géant + nuages flottants + texte ---------- */
.mission { background: var(--paper); overflow: clip; }
.mission__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 900px) { .mission__grid { grid-template-columns: 1fr; gap: clamp(3rem, 8vh, 5rem); } }

/* la scène du titre : les nuages s'y posent en absolu */
.mission__stage { position: relative; display: grid; place-items: center; min-height: clamp(320px, 42vw, 560px); }
.mission__title {
  position: relative; z-index: 1;
  font: 700 clamp(2.6rem, 6vw, 5.5rem)/.95 var(--font-display);
  text-transform: uppercase; letter-spacing: -.02em;
  text-align: center; margin: 0;
}

/* nuages : mêmes réglages que le footer (figure = parallaxe, .in = flottement) */
.cld--m1, .cld--m2 {
  position: absolute; z-index: 0; pointer-events: auto;
  will-change: transform;
  transform: translate3d(var(--px,0px), var(--py,0px), 0);
}
.cld--m1 { top: -6%; left: -4%; width: clamp(150px, 20vw, 320px); }
.cld--m2 { bottom: -8%; right: -2%; width: clamp(120px, 16vw, 250px); }
.cld--m1 .in { display:block; animation: floatA 7s var(--ease-out) infinite; transition: transform var(--d-slow) var(--ease-pop); }
.cld--m2 .in { display:block; animation: floatC 8.5s var(--ease-out) infinite .6s; transition: transform var(--d-slow) var(--ease-pop); }
.cld--m1:hover .in, .cld--m2:hover .in { animation-play-state: paused; transform: scale(1.1) translateY(-12px); }
.cld--m1 img, .cld--m2 img { width: 100%; height: auto; display: block; }

.mission__text {
  font: 700 clamp(1.05rem, 1.4vw, 1.35rem)/1.5 var(--font-body);
  color: var(--ink);
}
.mission__coda {
  margin-top: 1rem;
  font: 700 clamp(1.05rem, 1.4vw, 1.35rem)/1.5 var(--font-body);
  color: var(--red);
}

@media (max-width: 900px) {
  .cld--m1 { top: -4%; left: 2%; width: 38%; }
  .cld--m2 { bottom: -4%; right: 2%; width: 34%; }
}


/* ---------- Etudes de cas (page sites-web) ---------- */
.cases { background: var(--paper); padding-block: var(--sec-y) clamp(3rem, 8vh, 6rem); }
.case { padding-block: clamp(3rem, 8vh, 6rem); }
.case + .case { border-top: 1.5px solid var(--line); }

.case__grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  /* la galerie couvre les rangees "media" et "link" :
     son haut s'aligne donc exactement sur celui du mockup principal */
  grid-template-areas:
    "head  ."
    "media gallery"
    "link  gallery";
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(1.6rem, 4vh, 2.6rem);
  align-items: start;
}
/* variante sans lien (projets d'identité) : pas de rangée "link" */
.case--nolink .case__grid {
  grid-template-areas:
    "head  ."
    "media gallery";
}
@media (max-width: 900px) {
  .case--nolink .case__grid { grid-template-areas: "head" "media" "gallery"; }
}

.case__head    { grid-area: head; }
.case__hero    { grid-area: media; }
.case__link    { grid-area: link; justify-self: start; }
.case__gallery { grid-area: gallery; }

@media (max-width: 900px) {
  .case__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "link" "gallery";
  }
  .case__gallery { margin-top: 2.5rem; }
}

/* --- colonne gauche : titre, mockup principal, lien --- */
.case__name {
  font: 700 clamp(2rem, 4vw, 3.4rem)/1 var(--font-display);
  text-transform: none; letter-spacing: -.01em;
  margin: 0;
}
.case__sub {
  margin-top: .7rem;
  font: 800 var(--t-micro)/1.4 var(--font-ui);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft);
}
.case__hero { margin: 0; border-radius: 20px; overflow: hidden; }
.case__hero img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center; display: block;
  transition: object-position 10s linear;
}
/* au survol, la capture descend : effet "je fais défiler le site" */
.case__hero:hover img { object-position: bottom center; }
@media (hover: none) { .case__hero:hover img { object-position: top center; } }
@media (prefers-reduced-motion: reduce) {
  .case__hero img { transition: none; }
  .case__hero:hover img { object-position: top center; }
}
.case__link {
  display: inline-block; margin-top: 0;
  font: 800 .82rem/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); text-decoration: none;
  padding-bottom: .6rem;
  border-bottom: 1.5px solid var(--ink);
  transition: color var(--d-base) ease, border-color var(--d-base) ease;
}
.case__link:hover { color: var(--flame); border-color: var(--flame); }

/* --- colonne droite : galerie defilante avec fleches qui chevauchent --- */
.case__gallery { position: relative; }
.case__rail {
  margin-top: 0; padding: 0;
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.case__rail::-webkit-scrollbar { display: none; }
.case__rail .shot {
  flex: 0 0 clamp(200px, 40%, 300px);
  scroll-snap-align: start; margin: 0;
  border-radius: 16px; overflow: hidden;
}
.case__rail .shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }

.case__arw {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 6px 22px rgba(47,25,72,.14);
}
.case__arw--l { left: -1.4rem; }
.case__arw--r { right: -1.4rem; }
@media (max-width: 620px) { .case__arw { display: none; } }

/* --- l'avis client sous l'etude de cas --- */
.case__quote {
  position: relative;
  max-width: 46rem; margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding-inline: var(--gutter);
  text-align: center;
}
.case__quote::before {
  content: '\201C';
  position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font: 700 clamp(9rem, 18vw, 16rem)/1 var(--font-display);
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  pointer-events: none; z-index: 0;
}
.case__q {
  position: relative; z-index: 1;
  font: 400 clamp(1.3rem, 2.6vw, 2.2rem)/1.25 var(--font-display);
  font-style: italic;
  margin: 0;
}
.case__qtext {
  position: relative; z-index: 1;
  margin: 1.4rem auto 0; max-width: 44ch;
  color: var(--ink-soft);
}
.case__quote cite {
  display: block; margin-top: 1.8rem; font-style: normal;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--red);
}


/* ---------- Bandeau photo + carte offre (page sites-web) ---------- */
.offerband {
  position: relative;
  background: var(--paper);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: clip;
}
/* la photo n'occupe que le haut : la carte la chevauche */
.offerband__bg {
  position: absolute; inset: 0 0 auto 0;
  height: clamp(420px, 52vh, 640px);
  overflow: hidden;
  z-index: 0;
}
.offerband__bg img {
  width: 100%; height: 128%;      /* marge de manoeuvre pour la parallaxe */
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
  filter: brightness(.92) contrast(1.04) saturate(1.05);
}
.offerband > .wrap { position: relative; z-index: 1; }

.offercard {
  max-width: 46rem;
  margin: clamp(230px, 30vh, 360px) auto 0;   /* elle descend sur la photo */
  background: var(--paper);
  padding: clamp(2rem, 4.5vw, 3.6rem);
  text-align: center;
  box-shadow: 0 30px 80px rgba(47, 25, 72, .12);
}
.offercard__eyebrow {
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 1.1rem;
}
.offercard__title {
  font: 700 clamp(1.6rem, 3.2vw, 2.6rem)/1.15 var(--font-display);
  text-transform: none; letter-spacing: -.01em;
  margin: 0 auto; max-width: 20ch;
}
.offercard__list {
  list-style: none; padding: 0;
  margin: clamp(1.8rem, 4vh, 2.6rem) auto 0;
  display: grid; gap: 1.1rem;
  max-width: 34rem;
}
.offercard__list li {
  position: relative;
  padding-left: 1.9em;
  text-align: left;
  font-size: 1rem;
}
.offercard__list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--flame); font-weight: 700;
}
.offercard .countdown { margin: clamp(1.8rem, 4vh, 2.4rem) 0 1.8rem; justify-content: center; }
.offercard .btn-group { margin-inline: auto; }

@media (max-width: 620px) {
  .offerband__bg { height: clamp(300px, 40vh, 420px); }
  .offercard { margin-top: clamp(170px, 26vh, 240px); }
  .offercard__list li { font-size: .95rem; }
}


/* ---------- Texte de presentation SEO ---------- */
.seotext {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  max-width: 68rem;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) { .seotext { columns: 2; } }
.seotext p {
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  margin-bottom: 1.1rem;
  break-inside: avoid;
}
.seotext p:last-child { margin-bottom: 0; }
.seotext strong { color: var(--ink); font-weight: 700; }


/* ---------- Blocs de service detailles (page communication) ---------- */
.srv { padding-block: clamp(3rem, 9vh, 6.5rem); }
.srv + .srv { border-top: 1.5px solid var(--line); }
.srv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 880px) { .srv__grid { grid-template-columns: 1fr; gap: 2rem; } }
/* un bloc sur deux inverse les colonnes, pour le rythme */
@media (min-width: 881px) {
  .srv--rev .srv__why { order: 2; }
  .srv--rev .srv__do  { order: 1; }
}

@media (min-width: 881px) {
  .srv__why { position: sticky; top: 7rem; align-self: start; }
}

.srv__why h3 {
  font: 700 clamp(1.7rem, 3.4vw, 2.9rem)/1.05 var(--font-display);
  text-transform: none; letter-spacing: -.02em;
  margin: 0 0 1.3rem;
  max-width: 16ch;
}
.srv__why p { color: var(--ink-soft); max-width: 42ch; }

.srv__label {
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--red);
  margin-bottom: .6rem;
}
.srv__do ul { list-style: none; padding: 0; margin: 0; }
/* pas de puces : de simples lignes separees par un filet */
.srv__do li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.45;
}
.srv__do li:last-child { border-bottom: 1px solid var(--line); }


/* ---------- FAQ en accordeon (page sites-web) ---------- */

.faq__title {
  /* taille calee pour tenir sur une seule ligne dans la carte */
  font: 700 clamp(1.5rem, 3vw, 2.4rem)/1.15 var(--font-display);
  text-transform: none; letter-spacing: -.02em;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  max-width: none;
}

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { margin: 0; font: inherit; }

.faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  background: none; border: 0; cursor: pointer;
  padding: clamp(1.3rem, 3vh, 1.9rem) 0;
  text-align: left; color: var(--ink);
  transition: color var(--d-base) ease;
}
.faq__q:hover { color: var(--flame); }
.faq__num {
  font: 700 clamp(.8rem, 1vw, .95rem)/1 var(--font-ui);
  letter-spacing: .1em;
  color: var(--coral);
}
.faq__text {
  font: 700 clamp(1.05rem, 1.7vw, 1.45rem)/1.25 var(--font-display);
  letter-spacing: -.01em;
}

/* le bouton plus, qui devient croix a l'ouverture */
.faq__icon {
  position: relative; flex: none;
  width: 2.6rem; height: 2.6rem;
  border: 1.5px solid currentColor; border-radius: 50%;
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: .85rem; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--d-slow) var(--ease-quart), opacity var(--d-base) ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* la reponse : ouverture par grid-template-rows, sans hauteur fixe */
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease-quart);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  color: var(--ink-soft);
  max-width: 62ch;
  padding: 0 0 clamp(1.4rem, 3vh, 2rem);
  /* aligne la reponse sous la question, pas sous le numero */
  margin-left: calc(clamp(.8rem, 1vw, .95rem) * 2.4 + clamp(1rem, 3vw, 2.2rem));
}
@media (max-width: 620px) {
  .faq__a p { margin-left: 0; }
  .faq__icon { width: 2.2rem; height: 2.2rem; }
}


/* ---------- La FAQ dans la carte qui chevauche le bandeau ---------- */
.offercard--faq {
  max-width: 58rem;
  text-align: left;
}
.offercard--faq .faq__title { margin-inline: 0; }
.offercard--faq .faq__list { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (max-width: 620px) {
  .offercard--faq { padding: clamp(1.5rem, 5vw, 2rem); }
}


/* ---------- Services en trois colonnes, images en arche (accueil) ---------- */
.svcs3 { background: var(--paper); padding-block: var(--sec-y); }
.svcs3__head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.svcs3__head h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  max-width: 22ch; margin-inline: auto;
}
.svcs3__lead {
  margin-top: 1rem;
  font: 700 clamp(1rem, 1.3vw, 1.25rem)/1.4 var(--font-display);
  color: var(--red);
}

.svcs3__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
@media (max-width: 880px) { .svcs3__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }

.svc3 { display: block; text-align: center; text-decoration: none; color: var(--ink); }
.svc3__img {
  margin: 0 0 clamp(1.4rem, 3vh, 2rem);
  overflow: hidden;
  /* l'arche : sommet arrondi, base droite */
  border-radius: 999px 999px 14px 14px;
}
.svc3__img img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  transition: transform var(--d-slow) var(--ease-quart);
}
.svc3:hover .svc3__img img { transform: scale(1.04); }
.svc3 h3 {
  font: 700 clamp(1.5rem, 2.4vw, 2.1rem)/1.15 var(--font-display);
  text-transform: none; letter-spacing: -.01em;
  margin-bottom: .9rem;
}
.svc3 p { color: var(--ink-soft); max-width: 34ch; margin-inline: auto; }
.svc3__go {
  display: inline-block; margin-top: 1.5rem;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  padding-bottom: .55rem;
  border-bottom: 1.5px solid var(--ink);
  transition: color var(--d-base) ease, border-color var(--d-base) ease;
}
.svc3:hover .svc3__go { color: var(--flame); border-color: var(--flame); }

/* ---------- La methode dans la carte du bandeau ---------- */
.offercard--method { max-width: 58rem; text-align: left; }
.offercard--method h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.steps2 { list-style: none; padding: 0; margin: 0; }
.step2 {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.3rem, 3vh, 1.8rem) 0;
  border-top: 1px solid var(--line);
}
.step2:last-child { border-bottom: 1px solid var(--line); }
/* les chiffres : petits, roses, alignes sur le titre */
.step2__num {
  font: 700 clamp(.8rem, 1vw, .95rem)/1.5 var(--font-ui);
  letter-spacing: .1em;
  color: var(--coral);
}
.step2 h3 {
  font: 700 clamp(1.05rem, 1.6vw, 1.35rem)/1.25 var(--font-display);
  text-transform: none;
  margin-bottom: .45rem;
}
.step2 p { color: var(--ink-soft); max-width: 58ch; }


/* ---------- Bloc portfolio : titre a gauche, galerie defilante a droite ---------- */
.folio { background: var(--paper); padding-block: var(--sec-y); overflow: clip; }
.folio__grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .folio__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.folio__title {
  font: 400 clamp(1.6rem, 3vw, 2.6rem)/1.2 var(--font-display);
  font-style: italic;
  text-transform: none; letter-spacing: -.01em;
  margin: 0 0 1.8rem;
}

.folio__gallery { position: relative; }
.folio__rail {
  margin-top: 0; padding: 0;
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.folio__rail::-webkit-scrollbar { display: none; }
.folio__rail .shot {
  position: relative;
  flex: 0 0 clamp(180px, 30%, 280px);
  scroll-snap-align: start; margin: 0;
  overflow: hidden; border-radius: 4px;
  --folio-tint: #5FBDD3; /* turquoise de l'eau (piscine) ; changer ici si besoin */
}
.folio__rail .shot img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--d-slow, .5s) var(--ease-quart, ease);
}
/* voile teinté (duotone) par-dessus l'image en niveaux de gris */
.folio__rail .shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--folio-tint);
  mix-blend-mode: color; opacity: .92;
  transition: opacity var(--d-slow, .5s) var(--ease-quart, ease);
}
.folio__rail .shot:hover img { filter: none; }
.folio__rail .shot:hover::after { opacity: 0; }
@media (hover: none) {
  .folio__rail .shot img { filter: none; }
  .folio__rail .shot::after { opacity: 0; }
}
/* la vignette centrale respire un peu plus, comme sur la reference */
.folio__rail .shot:nth-child(even) { align-self: center; }

/* ---------- Mosaique "A la une" (page graphisme) ---------- */
.feat {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(240px, auto);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}
/* la premiere tuile occupe deux rangees (portrait), une autre toute la largeur */
.feat__cell--tall { grid-row: span 2; }
.feat__cell--wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .feat { grid-template-columns: 1fr; }
  .feat__cell--tall, .feat__cell--wide { grid-row: auto; grid-column: auto; }
}
.feat__cell {
  position: relative; display: block; overflow: hidden;
  border-radius: 6px; text-decoration: none;
  background: var(--c, var(--ink));
  min-height: 240px;
}
.feat__cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--d-slow) var(--ease-quart), opacity var(--d-base) ease;
}
.feat__cell:hover img { transform: scale(1.04); opacity: .82; }
/* voile bas neutre, juste pour la lisibilité du texte (plus de teinte couleur) */
.feat__cell::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(30,20,40,.5) 100%);
}
.feat__label {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  color: #fff;
}
.feat__label h3 {
  font: 700 clamp(1.3rem, 2.3vw, 2rem)/1.05 var(--font-display);
  text-transform: none; letter-spacing: -.01em;
  margin: 0 0 .3rem;
}
.feat__label span {
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .12em;
  opacity: .9;
}


/* ---------- Bio : texte a gauche, portrait a droite (page A propos) ---------- */
.bio__grid {
  display: grid;
  grid-template-columns: 1fr .78fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .bio__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bio__photo { order: -1; }         /* le portrait passe au-dessus du texte */
}
.bio__txt h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  max-width: 18ch;
  margin: 0 0 clamp(1.4rem, 3vh, 2rem);
}
.bio__txt p {
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 1.1rem;
  line-height: 1.7;
}
.bio__txt p:last-child { margin-bottom: 0; }
.bio__txt strong { color: var(--ink); font-weight: 700; }

.bio__photo { margin: 0; border-radius: 4px; overflow: hidden; }
.bio__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
@media (min-width: 901px) { .bio__photo { position: sticky; top: 7rem; } }



/* ---------- Bandeau video pleine hauteur, carte centree dedans ---------- */
.videoband {
  position: relative;
  display: grid; align-items: center;
  padding-block: clamp(4rem, 11vh, 8rem);
  overflow: clip;
  background: var(--ink);
}
.videoband__bg { position: absolute; inset: 0; z-index: 0; }
/* le poster s'affiche tout de suite ; la video le recouvre une fois prete */
.videoband__poster,
.videoband__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.videoband__video {
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.videoband__video.is-on { opacity: 1; }
/* voile leger : la carte doit se detacher de l'eau */
.videoband__bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(47, 25, 72, .18);
}
.videoband > .wrap { position: relative; z-index: 1; }

/* la carte : rectangle de texte, entierement contenu dans le bandeau */
.valcard {
  max-width: 44rem;
  margin-inline: auto;
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(47, 25, 72, .22);
}
.valcard__txt { padding: clamp(2rem, 4.5vw, 3.6rem); }
.valcard__txt h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  text-transform: none;
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
  max-width: 16ch;
}

.arrowlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.arrowlist li {
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: center;
  font: 800 var(--t-micro)/1.3 var(--font-ui);
  text-transform: uppercase; letter-spacing: .1em;
}
.arrowlist li::before {
  content: '→'; color: var(--flame);
  font-size: 1.05rem; letter-spacing: 0;
}


/* ---------- Variante video du bandeau (methode, accueil) ---------- */
.offerband--video .offerband__bg {
  height: clamp(480px, 60vh, 760px);   /* legerement plus haut que la version photo */
}
.offerband--video .videoband__poster,
.offerband--video .videoband__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: none;
}
.offerband--video .videoband__video {
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.offerband--video .videoband__video.is-on { opacity: 1; }
/* voile leger : la carte doit se detacher de l'eau */
.offerband--video .offerband__bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(47, 25, 72, .18);
}
/* la carte descend d'autant que le bandeau a grandi */
.offerband--video .offercard { margin-top: clamp(280px, 38vh, 460px); }
@media (max-width: 620px) {
  .offerband--video .offerband__bg { height: clamp(340px, 46vh, 480px); }
  .offerband--video .offercard { margin-top: clamp(200px, 30vh, 280px); }
}


/* ---------- Panneau "Concretement" depliable sur mobile ---------- */
@media (max-width: 880px) {
  .srv__toggle {
    cursor: pointer;
    padding-block: 1.1rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: color var(--d-base) ease;
  }
  .srv__toggle:hover { color: var(--flame); }
  .srv__toggle .faq__icon { display: block; width: 2.2rem; height: 2.2rem; }
  .srv__toggle[aria-expanded="true"] { border-bottom-color: transparent; }

  .srv__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--d-slow) var(--ease-quart);
  }
  .srv__panel > div { overflow: hidden; }
  .srv__do.is-open .srv__panel { grid-template-rows: 1fr; }
  .srv__do.is-open .srv__panel > div > ul { padding-top: .6rem; }
  .srv__do.is-open .srv__panel li:last-child { border-bottom: 1px solid var(--line); }
}


/* ---------- Services en onglets (page communication) ---------- */
.svtabs { background: var(--paper); padding-block: var(--sec-y); }
.svtabs__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.svtabs__head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.svtabs__lead { margin-top: 1rem; color: var(--red); font: 700 clamp(1rem,1.3vw,1.2rem)/1.4 var(--font-display); }

/* la barre d'onglets numerotes */
.svtabs__nav {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid var(--ink);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.svtab {
  display: flex; flex-direction: column; gap: .5rem;
  background: none; border: 0; cursor: pointer;
  padding: clamp(1.2rem, 3vh, 1.8rem) 1.2rem clamp(1.2rem, 3vh, 1.8rem) 0;
  text-align: left; color: var(--ink-soft);
  border-top: 3px solid transparent; margin-top: -1.5px;
  transition: color var(--d-base) ease, border-color var(--d-base) ease;
}
.svtab:hover { color: var(--ink); }
.svtab.is-active { color: var(--ink); border-top-color: var(--flame); }
.svtab__num {
  font: 700 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--font-display);
  color: var(--coral);
}
.svtab.is-active .svtab__num { color: var(--flame); }
.svtab__label {
  font: 800 var(--t-micro)/1.2 var(--font-ui);
  text-transform: uppercase; letter-spacing: .12em;
}
@media (max-width: 720px) {
  .svtab { padding-right: .6rem; }
  .svtab__label { letter-spacing: .06em; }
}

/* le panneau actif : pourquoi a gauche, livrables a droite */
.svpanel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  animation: svfade var(--d-slow) var(--ease-out);
}
.svpanel[hidden] { display: none; }
@media (max-width: 820px) { .svpanel { grid-template-columns: 1fr; gap: 1.8rem; } }
@keyframes svfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.svpanel__why h3 {
  font: 700 clamp(1.5rem, 2.8vw, 2.3rem)/1.15 var(--font-display);
  text-transform: none; letter-spacing: -.01em;
  margin: 0 0 1.1rem; max-width: 18ch;
}
.svpanel__why p { color: var(--ink-soft); max-width: 44ch; line-height: 1.7; }

.svpanel__do .srv__label {
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--red); margin-bottom: 1rem; display: block;
}
.svpanel__do ul { list-style: none; padding: 0; margin: 0; }
.svpanel__do li {
  padding: 1rem 0; border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.45;
}
.svpanel__do li:last-child { border-bottom: 1px solid var(--line); }


/* ============================================================
   PAGES PROJET (etudes de cas : Veilleuse, Lopini, Teneo...)
   ============================================================ */

/* --- Hero projet : bandeau couleur du projet --- */
.phero {
  position: relative; text-align: center; overflow: clip;
  background: var(--c, var(--plum)); color: var(--paper);
  padding-block: clamp(7rem, 16vh, 10.5rem) clamp(3rem, 8vh, 5rem);
}
.phero__kicker {
  margin: 0 0 1.2rem;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .22em;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}
.phero h1 {
  margin: 0 auto; max-width: 15ch;
  font: 800 clamp(2.6rem, 8vw, 6rem)/.98 var(--font-display);
  letter-spacing: -.02em;
}
.phero__sub {
  margin: 1.4rem auto 0; max-width: 44ch;
  font: 400 clamp(1rem, 1.4vw, 1.15rem)/1.5 var(--font-ui);
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}
.phero__back {
  position: absolute; top: clamp(5.5rem,10vh,7rem); left: 50%; transform: translateX(-50%);
  font: 700 var(--t-micro)/1 var(--font-ui); letter-spacing: .06em;
  color: color-mix(in srgb, var(--paper) 78%, transparent); text-decoration: none;
}
.phero__back:hover { color: var(--paper); }

/* --- A propos du projet : 2 colonnes --- */
.pabout { background: var(--paper); padding-block: var(--sec-y); }
.pabout__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 860px) { .pabout__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.pabout h2 {
  margin: 0 0 1.2rem; color: var(--ink);
  font: 400 clamp(1.7rem, 3.4vw, 2.8rem)/1.1 var(--font-display); font-style: italic;
}
.pabout p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.6; }
.pabout__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 2rem; }
.pabout__imgs img, .pabout__imgs .ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block;
}
.pmission h3 {
  margin: 0 0 1.1rem; color: var(--ink);
  font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--font-display); font-style: italic;
}
/* liste a fleches des pages projet (autonome, sans conflit avec .arrowlist) */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.plist li {
  position: relative; padding-left: 1.9rem; color: var(--ink);
  font: 500 1.02rem/1.45 var(--font-ui);
}
.plist li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--flame); font-weight: 700; }

/* --- Galerie projet : mosaique --- */
.pgal { background: var(--c, var(--plum)); padding-block: clamp(3rem, 7vh, 5rem); }
.pgal__grid {
  columns: 3 240px;
  column-gap: clamp(.6rem, 1.4vw, 1rem);
}
.pgal__grid > * {
  break-inside: avoid;
  margin: 0 0 clamp(.6rem, 1.4vw, 1rem);
  overflow: hidden; border-radius: 6px;
  display: block;
}
.pgal__grid img { width: 100%; height: auto; display: block; }
.pgal .ph {
  background: color-mix(in srgb, var(--paper) 20%, transparent);
  display: grid; place-items: center; text-align: center; min-height: 200px;
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  font: 600 .82rem/1.3 var(--font-ui); padding: 1rem;
}
@media (max-width: 720px) { .pgal__grid { columns: 2 150px; } }

/* --- La demarche : texte + image + CTA --- */
.pdemarche { background: var(--paper); padding-block: var(--sec-y); }
.pdemarche__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 860px) { .pdemarche__grid { grid-template-columns: 1fr; gap: 2rem; } }
.pdemarche__grid--solo { grid-template-columns: 1fr; max-width: 62ch; }
.pdemarche h2 {
  margin: 0 0 1.2rem; color: var(--ink);
  font: 400 clamp(1.7rem, 3.4vw, 2.8rem)/1.1 var(--font-display); font-style: italic;
}
.pdemarche p { margin: 0 0 1.6rem; color: var(--ink-soft); line-height: 1.65; }
.pdemarche__media img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; display: block; }
.pdemarche__media .ph {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block;
}

/* --- Temoignage projet --- */
.ptestim { background: var(--c, var(--plum)); color: var(--paper); padding-block: clamp(4rem, 9vh, 6rem); }
.ptestim__card { max-width: 62ch; margin: 0 auto; text-align: center; }
.ptestim__q {
  margin: 0 0 1.6rem;
  font: 400 clamp(1.5rem, 3vw, 2.3rem)/1.28 var(--font-display); font-style: italic;
}
.ptestim__t {
  margin: 0 0 1.5rem;
  font: 400 1.02rem/1.6 var(--font-ui);
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}
.ptestim cite {
  font: 800 var(--t-micro)/1 var(--font-ui); font-style: normal;
  text-transform: uppercase; letter-spacing: .14em;
}

/* --- Lien "Voir le projet" sur les tuiles de la mosaique graphisme --- */
.feat__more {
  display: block; margin-top: .7rem;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .1em; color: #fff;
}
.feat__cell:hover .feat__more { text-decoration: underline; }


/* ============ Lightbox galerie projet (clic pour agrandir) ============ */
.pgal__grid img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--ink) 90%, black);
  padding: clamp(1rem, 5vw, 3rem);
}
.lightbox.is-open { display: grid; }
.lightbox__stage { margin: 0; max-width: min(92vw, 1100px); max-height: 88vh; }
.lightbox__stage img {
  max-width: 100%; max-height: 88vh; width: auto; height: auto; display: block;
  border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.lightbox__close, .lightbox__nav {
  position: absolute; border: 0; cursor: pointer; line-height: 1;
  background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--ink);
  transition: background var(--d-base) ease, color var(--d-base) ease;
}
.lightbox__close {
  top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem);
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.05rem;
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem;
}
.lightbox__nav--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.lightbox__nav--next { right: clamp(.6rem, 2vw, 1.6rem); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--flame); color: #fff; }
@media (max-width: 620px) { .lightbox__nav { width: 42px; height: 42px; font-size: 1.1rem; } }


/* ---------- Bloc "Ce qu'inclut" (page sites web) : liste cliquable + texte a droite ---------- */
.incl { background: var(--paper); padding-block: var(--sec-y); }
.incl__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 860px) { .incl__grid { grid-template-columns: 1fr; gap: 2rem; } }
.incl__kicker {
  margin: 0 0 1rem;
  font: 800 var(--t-micro)/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft);
}
.incl__left h2 {
  margin: 0 0 1.8rem; color: var(--ink);
  font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.12 var(--font-display);
}
.incl__nav { display: grid; grid-template-columns: 1fr; gap: .15rem; margin: 0 0 1.8rem; border-top: 0; }
/* on repart de zero pour les onglets ici (liste verticale a fleches) */
.incl .svtab {
  display: flex; flex-direction: row; align-items: center; gap: .9rem; width: 100%;
  text-align: left; cursor: pointer; border: 0; background: transparent;
  padding: .8rem 1rem; border-radius: 8px; color: var(--ink-soft);
  font: 800 var(--t-micro)/1.3 var(--font-ui);
  text-transform: uppercase; letter-spacing: .09em;
  transition: background var(--d-base) ease, color var(--d-base) ease;
}
.incl .svtab::before {
  content: "\2192"; color: var(--flame); font-size: 1rem;
  transition: transform var(--d-base) ease;
}
.incl .svtab .svtab__num { display: none; }
.incl .svtab:hover { color: var(--ink); }
.incl .svtab.is-active {
  background: color-mix(in srgb, var(--flame) 9%, transparent);
  color: var(--ink); border-top-color: transparent;
}
.incl .svtab.is-active::before { transform: translateX(3px); }
.incl__cta { margin-top: .2rem; }
/* panneaux : simple colonne de texte (on annule la grille des svpanel communication) */
.incl__right { align-self: start; min-height: 8rem; }
.incl .svpanel { display: block; grid-template-columns: none; }
.incl .svpanel[hidden] { display: none; }
.incl .svpanel h3 {
  margin: 0 0 1rem; color: var(--ink);
  font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--font-display); font-style: italic;
}
.incl .svpanel p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.7; font-size: 1.05rem; }


/* ---------- Mockup telephone (capture mobile qui defile au survol) ---------- */
.case__hero--phone {
  width: min(270px, 80%);
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  border-radius: 34px;
  border: 9px solid var(--ink);
  background: var(--ink);
  box-shadow: 0 22px 50px rgba(47, 25, 72, .20);
  overflow: hidden;
}
.case__hero--phone img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover; object-position: top center;
  border-radius: 26px;
}
.case__hero--phone:hover img { object-position: bottom center; }


/* ---------- Mockup ordinateur (laptop) : capture qui defile dans l'ecran ---------- */
.case__hero--laptop { border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.laptop { width: 100%; }
.laptop__screen {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: #201434; border: 10px solid #241636; border-bottom: 0;
  border-radius: 16px 16px 0 0; overflow: hidden;
}
.laptop__screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; transition: object-position 10s linear;
}
.case__hero--laptop:hover .laptop__screen img { object-position: bottom center; }
.laptop__base {
  position: relative; height: 15px; width: 108%; margin: 0 -4%;
  background: linear-gradient(#d3d3db, #b3b3bf 55%, #9494a1);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 22px rgba(47, 25, 72, .18);
}
.laptop__base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16%; height: 5px; background: rgba(0, 0, 0, .16); border-radius: 0 0 7px 7px;
}
@media (hover: none) { .case__hero--laptop:hover .laptop__screen img { object-position: top center; } }
@media (prefers-reduced-motion: reduce) {
  .laptop__screen img { transition: none; }
  .case__hero--laptop:hover .laptop__screen img { object-position: top center; }
}


/* ---------- Bloc contact "aller se faire voir" (bas de page) ---------- */
.getseen { background: var(--paper); padding-block: var(--sec-y); border-top: 1px solid var(--line); }
.getseen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .getseen__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.getseen__kicker { margin: 0 0 1.1rem; font: 800 var(--t-micro)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .2em; color: var(--flame); }
.getseen__intro h2 { margin: 0 0 1.4rem; color: var(--ink); font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.02 var(--font-display); letter-spacing: -.01em; }
.getseen__lead { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.6; max-width: 44ch; }
.getseen__mini { margin: 1.5rem 0 0; font-style: italic; color: color-mix(in srgb, var(--ink) 45%, transparent); font-size: .92rem; max-width: 42ch; }
.getseen__form { display: grid; gap: 1.1rem; }
.getseen__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .getseen__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font: 700 .8rem/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.field label span { color: var(--flame); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--font-ui); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: .78rem .9rem;
  transition: border-color var(--d-base) ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--flame); }
.field textarea { resize: vertical; min-height: 120px; }
.getseen__submit { justify-self: start; margin-top: .3rem; }