/* ==========================================================================
   Deck — one-page en pile de cartes plein écran (inset), thème CLAIR.
   Fond blanc uni. Glassmorphism autour de la hero (panneaux givrés sur photo).
   Aucun dégradé de couleur, boutons pleins, bento compact.
   ========================================================================== */

:root {
  --deck-m: clamp(10px, 1.5vw, 22px);   /* marge inset autour des cartes */
  --deck-radius: 24px;
  --deck-off: 116vh;                     /* décalage hors-écran des cartes inactives */
  --grad-pos: center center;             /* position du fond (center-left sur mobile) */

  /* ===== FOND du site : la même image que la hero, mais FLOUTÉE (pré-floutée
     dans hero-bg-blur.jpg) + voile sombre léger. Visible TEL QUEL dans les
     marges autour des cartes ("le background sans modif"). Derrière tout. ===== */
  --grad:
    linear-gradient(180deg, rgba(4,6,14,0.55) 0%, rgba(4,6,14,0.42) 50%, rgba(4,6,14,0.5) 100%),
    #05080f url("../../img/hero-bg-blur.jpg") var(--grad-pos) / cover no-repeat;

  /* ===== Verre des PANNEAUX de carte : translucide, on voit le fond à travers
     (givré + un peu plus saturé/lumineux), bord + reflet. La carte se LIT comme
     une vitre posée sur le fond, distincte des marges. ===== */
  /* Verre CLEAR (iOS) : translucide, on voit la hero à travers ; teinte neutre
     qui assombrit juste assez pour la lisibilité (et atténuer le texte hero
     visible à travers), SANS bords sombres. */
  --glass-card:
    linear-gradient(180deg, rgba(7,11,19,0.26) 0%, rgba(6,10,18,0.34) 100%);
  --glass-card-brd: rgba(255, 255, 255, 0.2);
  --glass-card-blur: blur(3px) saturate(120%);

  /* Palette sombre + glass (sur le gradient) */
  --surface: rgba(255, 255, 255, 0.06);  /* glass (éléments transparents) */
  --surface-2: rgba(255, 255, 255, 0.04);
  --ink: #ffffff;                        /* texte clair */
  --ink-soft: rgba(255, 255, 255, 0.66); /* texte secondaire */
  --line: rgba(255, 255, 255, 0.16);     /* filets / bordures */
  --line-strong: rgba(255, 255, 255, 0.30);
  --accent: #ffffff;
  --card-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);

  /* Contenu (header + boutons) : clair partout (tout est sur le gradient sombre). */
  --hdr: #ffffff;
  --hdr-on: #0a0a0c;

  /* Glass (boxes hero, cartes services, chips) */
  --glass: rgba(255, 255, 255, 0.08);
  --glass-brd: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px) saturate(125%);
  --chip: rgba(255, 255, 255, 0.1);
  --chip-brd: rgba(255, 255, 255, 0.2);
  --chip-blur: blur(16px) saturate(130%);
}

/* Empilement : header / menu / preloader au-dessus des calques. */
.site-header { z-index: 100; }
.menu-overlay { z-index: 300; }
.preloader { z-index: 400; }

/* Preloader : fond très sombre, logo blanc qui se remplit (cf components.css). */
.preloader { background: #06070b; }

/* Fond du site : blanc uni, aucun décor animé. */
.site-bg { display: none; }

/* Tag/badge (cartes brand, ripple) : texte CLAIR sur le thème sombre + compact.
   (par défaut --color-text-badge = #0a0a0c -> noir sur sombre = illisible) */
.tag {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  padding: 4px 11px;
  letter-spacing: 0.03em;
  align-self: flex-start;   /* taille du texte, pas étiré sur la largeur */
  width: fit-content;
}

/* Header : contenu monochrome adaptatif (--hdr). */
.site-header {
  height: auto;
  align-items: flex-start;
  padding: calc(var(--deck-m) + 12px) calc(var(--deck-m) + 12px);
  /* Header transparent : sa zone vide ne doit pas bloquer les clics sur le
     contenu en dessous (ex. « Voir les écrans »). Les enfants restent cliquables. */
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header.is-scrolled {
  height: auto;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Logo : silhouette monochrome pleine (couleur = --hdr selon la carte). */
.logo--icon-only {
  background: none;
  border: 0;
  padding: 0;
}
.logo__glass {
  display: block;
  width: 46px;
  height: 30px;
  background: var(--hdr);
  transition: background 0.3s var(--ease);
  -webkit-mask: url("../../img/ether.svg") center / contain no-repeat;
  mask: url("../../img/ether.svg") center / contain no-repeat;
}

/* Menu : chip discret, contenu en --hdr. */
.menu-toggle {
  background: var(--chip);
  border: 1px solid var(--chip-brd);
  -webkit-backdrop-filter: var(--chip-blur);
  backdrop-filter: var(--chip-blur);
  padding: 11px 18px;
}
.menu-toggle:hover { background: rgba(127, 127, 132, 0.26); }
.menu-toggle__lines span { background: var(--hdr); transition: background 0.3s var(--ease); }
.menu-toggle__label { color: var(--hdr); transition: color 0.3s var(--ease); }

/* Menu : overlay noir, une seule colonne (juste « Projets »). */
.menu-overlay { background: rgba(8, 8, 10, 0.88); }
.menu-overlay--solo { grid-template-columns: 1fr; }

/* Header + nav masqués uniquement pendant l'aperçu plein écran d'un projet.
   (Le logo reste visible sur TOUTES les sections du site.) */
.site-header .logo,
.site-header,
.deck-nav { transition: opacity 0.3s var(--ease); }
body.preview-open .site-header,
body.preview-open .deck-nav { opacity: 0; pointer-events: none; }

/* Scroll-snap : chaque écran est un point d'ancrage -> le moindre scroll
   bascule entièrement vers la carte suivante. */
/* overscroll-behavior-y:none -> supprime le rebond élastique de la racine sur
   mobile (plus de "trou"/blanc en bout de course, scroll plus net). */
/* Fond racine SOMBRE (pas blanc) : sur iOS les barres Safari + l'overscroll
   prennent cette couleur -> plus de bande blanche en haut. + color-scheme dark. */
html { scroll-snap-type: y mandatory; overscroll-behavior-y: none; background: #05080f; color-scheme: dark; }
body { background: #05080f; }
/* SCROLL MOBILE — AUCUN snap (choix retenu) : scroll natif libre et lisse, les cartes
   ne "collent" plus à l'écran (le snap mandatory saccadait sur iOS, proximity/JS
   donnaient un magnétisme non voulu). Desktop (souris) : mandatory gardé (molette). */
@media (pointer: coarse) {
  html { scroll-snap-type: none; }
}

/* ---- Calque plein écran (inset, arrondi) --------------------------------- */
/* HERO = fond fixe plein écran (derrière tout). Les cartes translucides glissent
   par-dessus en scroll natif. */
.layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--glass-card);
}
.hero-card { z-index: 0; }

/* ===== COMME AVANT — cartes FLOTTANTES (web + mobile) ====================
   La carte FLOTTE : marge tout autour qui révèle la hero fixe derrière, arrondie,
   bordure verre + ombre — sur TOUS les écrans (les tokens --deck-m / --deck-radius
   gèrent le responsive : marge/arrondi plus petits sur mobile, comme l'original).
   ASTUCE scroll intact : height = 100lvh - 2*marge ET margin = marge -> chaque carte
   occupe pile 100lvh de scroll. .deck en flex -> les marges verticales ne fusionnent
   pas (sinon dérive). snap-align center -> la carte flottante se centre dans l'écran.
   100lvh = hauteur stable (ne suit pas la barre Safari mobile). */
.deck { display: flex; flex-direction: column; }
.deck-card {
  position: relative;
  inset: auto;
  flex-shrink: 0;
  height: calc(100lvh - 2 * var(--deck-m));
  width: auto;
  margin: var(--deck-m);
  border-radius: var(--deck-radius);
  border: 1px solid var(--glass-card-brd);
  box-shadow:
    var(--card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  /* chaque carte sur son calque GPU -> compositing fluide au scroll */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  scroll-snap-align: center;
}
.deck-hero-screen { height: 100lvh; flex-shrink: 0; scroll-snap-align: center; }
/* SERVICES + CONTACT restent en VERRE TRANSLUCIDE (la hero transparaît) comme à
   l'origine. Elles héritent de var(--glass-card) via .layer. */

@media (prefers-reduced-motion: reduce) {
  .layer { transition: none; }
}

/* iOS / tactile : un backdrop-filter sur un élément qui BOUGE (contenu des cartes
   en transform) — ou placé devant un fond qui bouge (UI fixe au-dessus des cartes)
   — recalcule son flou À CHAQUE FRAME pendant le scroll = la carte "saccade puis se
   remet bien", de pire en pire sur les cartes lourdes (projets, bento). L'auteur
   l'avait déjà neutralisé sur `.layer` ; on l'étend au CONTENU des cartes + à l'UI
   fixe du deck. Fonds translucides conservés (lisibles), juste sans le flou live.
   Desktop (souris) : flou conservé. Overlays au tap (preview/menu) : non concernés. */
@media (hover: none), (pointer: coarse) {
  .layer, .layer *,
  .deck-nav, .deck-nav *,
  .site-header, .site-header * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* On REDONNE le vrai flou verre sur tactile (la neutralisation large était une mesure
   anti-saccade, or la vraie cause était le scroll-snap). proj__box = description projet ;
   site-menu + burger + deck-nav = chips/overlay FIXES (ne scrollent pas avec le deck,
   donc pas de re-flou par frame coûteux). */
@media (hover: none), (pointer: coarse) {
  .proj__box {
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
  }
  .site-menu, .site-burger {
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
  }
  .deck-nav {
    -webkit-backdrop-filter: var(--chip-blur) !important;
    backdrop-filter: var(--chip-blur) !important;
  }
}

/* ---- Boutons nets (pleins, sans dégradé) -------------------------------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: var(--hdr);
  color: var(--hdr-on);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--hdr);
  box-shadow: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-cta::before, .btn-cta::after { content: none !important; } /* retire l'ancien reflet animé */
.btn-cta:hover { transform: translateY(-1px); opacity: 0.86; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--hdr);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--hdr);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-ghost:hover { background: var(--hdr); color: var(--hdr-on); }

/* ==========================================================================
   HERO — photo + panneaux GLASS (givré)
   ========================================================================== */
/* La hero N'EST PAS dans une carte : elle prend tout l'écran. */
.hero-card {
  inset: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: #05080f;
  overflow: hidden;
}
/* Image de fond plein écran + léger mouvement (Ken Burns). */
.hero-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #05080f url("../../img/hero-bg.webp") center center / cover no-repeat;
  transform-origin: 60% 40%;
  animation: hero-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* Mobile / tactile : image hero figée (pas de Ken Burns) -> plus de micro-zoom
   saccadé sur GPU mobile. L'image reste plein cadre (cover), juste immobile. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .hero-card__bg { animation: none; will-change: auto; }
}
/* Canvas effet d'eau : rend l'image + ondulation souris, au-dessus du fond CSS
   (qui reste le fallback mobile/sans-WebGL), sous le verre cannelé et le texte. */
#water-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Voile sombre bas/gauche : garantit la lisibilité de « Ether » + tagline + CTA. */
.hero-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, rgba(3, 5, 12, 0.82) 0%, rgba(3, 5, 12, 0.34) 38%, rgba(3, 5, 12, 0) 64%),
    linear-gradient(to top, rgba(3, 5, 12, 0.55) 0%, rgba(3, 5, 12, 0) 42%);
  pointer-events: none;
}
@keyframes hero-kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.4%, -1.2%); }
}
/* Glows retirés : l'image porte tout le fond. */
.hero-glow { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-card__bg { animation: none; } }

/* Boxes glass flottantes (façon Synergy). */
.hero-card__float {
  position: absolute;
  z-index: 2;
  max-width: 272px;
  padding: 18px 24px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  border-radius: 18px;
  /* CLEAR iOS : on voit le fond à travers, peu de flou, bord net. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 22%, rgba(255, 255, 255, 0.015) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 22px 50px rgba(0, 0, 0, 0.4);
  animation: hero-float 7s ease-in-out infinite;
}
.hero-card__float--a { top: 25%; left: 45%; }
.hero-card__float--b { top: 60%; right: 8%; animation-delay: -3.5s; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .hero-card__float { animation: none; } }

/* Bloc principal en bas à gauche : "Ether" discret + grosse catch line + CTA. */
.hero-card__main {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 6vh, 72px);
  max-width: min(920px, 92%);
}
/* "Ether" : petit wordmark discret, en eyebrow au-dessus de la catch line. */
.hero-card__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.66);
}
/* Catch line : FOCALE de la hero — grosse, sans + accents serif italique. */
.hero-card__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.6vw, 84px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 32px;
  text-wrap: balance;
}
.hero-card__tag em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.hero-card__cta { font-size: 16px; padding: 16px 34px; }

/* ---- Entrée de la hero à l'arrivée (déclenchée par body.entered au moment
   où le preloader se lève) : les éléments montent/apparaissent en cascade. --- */
@keyframes hero-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
body.entered .hero-card__word  { animation: hero-rise 0.9s var(--ease) 0.1s backwards; }
body.entered .hero-card__tag   { animation: hero-rise 0.95s var(--ease) 0.26s backwards; }
body.entered .hero-card__cta   { animation: hero-rise 0.9s var(--ease) 0.44s backwards; }
body.entered .hero-card__float--a { animation: hero-fade 0.9s var(--ease) 0.52s backwards, hero-float 7s ease-in-out infinite; }
body.entered .hero-card__float--b { animation: hero-fade 0.9s var(--ease) 0.66s backwards, hero-float 7s ease-in-out -3.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  body.entered .hero-card__word, body.entered .hero-card__tag, body.entered .hero-card__cta,
  body.entered .hero-card__float--a, body.entered .hero-card__float--b { animation: none; }
}

/* ---- Badge cercle (texte qui tourne) en haut-droite de la hero ---------- */
.hero-card__badge {
  position: absolute;
  z-index: 2;
  /* Positionné par son CENTRE (d'après le mockup) : ~77% horiz, ~60% vert. */
  top: 60%;
  left: 77%;
  transform: translate(-50%, -50%);
  width: clamp(190px, 21vw, 300px);
  height: clamp(190px, 21vw, 300px);
  pointer-events: none;
}
.hero-card__badge-svg {
  width: 100%;
  height: 100%;
  animation: badge-spin 22s linear infinite;
}
.hero-card__badge-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.9);
}
/* Fin trait de cercle à l'intérieur du texte (façon la référence). */
.hero-card__badge-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.5;
}
.hero-card__badge-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 1.5vw, 21px);
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;   /* le badge parent est en pointer-events:none */
  transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.35s var(--ease);
}
.hero-card__badge-dot:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transform: translate(-50%, calc(-50% + 3px));   /* petit nudge vers le bas */
}
.hero-card__badge-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
body.entered .hero-card__badge { animation: hero-fade 1s var(--ease) 0.6s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-card__badge-svg { animation: none; }
  body.entered .hero-card__badge { animation: none; }
}

/* ==========================================================================
   MODALE — "ce que je propose" : bento COMPACT, neutre
   ========================================================================== */
.mod { background: var(--glass-card); }
.mod__inner {
  position: relative;
  height: 100%;
  overflow: hidden;                 /* clippe le mot géant en fond */
  padding: clamp(26px, 3vw, 56px);
  padding-top: clamp(74px, 8vh, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mot du type écrit en GROS en fond — sert de titre visuel. */
.mod__watermark {
  position: absolute;
  left: clamp(-6px, -0.5vw, 0px);
  bottom: clamp(-16px, -1.4vh, 0px);
  margin: 0;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(108px, 23vw, 380px);
  line-height: 0.72;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.mod__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
}
.mod__head { display: flex; flex-direction: column; gap: 8px; }
.mod__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mod__index {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  opacity: 0.7;
}
.mod__desc {
  font-size: clamp(15px, 1.3vw, 20px);
  color: var(--ink);
  line-height: 1.55;
  max-width: 48ch;
}

/* Bento : 3 cellules info compactes, neutres, légèrement givrées. */
.bento {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(96px, auto);
  gap: 12px;
}
.bento__cell {
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.bento__cell--accent { background: var(--surface-2); }
.bento__big {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
  color: var(--ink);
}
.bento__big .unit { font-size: 0.5em; color: var(--ink-soft); }
.bento__label {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ==========================================================================
   CARTE PROJET — image plein cadre + caption (reste sombre, c'est une photo)
   ========================================================================== */
.proj { background: #06070d; }
/* Projet "board" : l'image entière est visible (pas de crop), centrée sur le
   fond sombre qui se fond avec le fond noir du board. */
.proj--contain { background: #0a0c12; }
.proj--contain .proj__shot {
  background-size: contain;
  background-position: center;
}
/* Slide individuelle en "contain" (visuel haut/portrait : rien n'est coupé,
   image entière centrée sur fond sombre). */
.proj__slide--contain { background: #0a0c12; }
.proj__shot.proj__shot--contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.proj__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Variante mobile (format portrait) : 2 calques superposés (web/mobile)
   basculés selon le viewport. URLs en inline -> chemins relatifs corrects. */
.proj__shot--mob { display: none; }
@media (max-width: 760px) {
  .proj__shot--web { display: none; }
  .proj__shot--mob { display: block; }
}
/* Capture du site : image haute pleine largeur qui auto-scrolle dans la carte. */
.proj__cap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0c12;
}
.proj__capimg {
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* remplit la carte, bords compris */
  object-position: center top;
  display: block;
  animation: proj-capscroll 26s ease-in-out infinite alternate;
}
@keyframes proj-capscroll {
  from { object-position: center 0%; }
  to   { object-position: center 48%; }
}
@media (prefers-reduced-motion: reduce) { .proj__capimg { animation: none; } }

/* Site LIVE : iframe haute sandboxée qui auto-scrolle (rendu NET, remplit la carte). */
.proj__live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0c12;
}
.proj__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 280%;
  border: 0;
  pointer-events: none;                 /* la carte gère le clic */
  animation: proj-livescroll 42s ease-in-out infinite alternate;
}
@keyframes proj-livescroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-64.3%); }
}
@media (prefers-reduced-motion: reduce) { .proj__frame { animation: none; } }
.proj__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38px;
  display: flex;
  align-items: center;
  padding-left: 74px;
  padding-right: 16px;
  background: rgba(14, 16, 22, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.proj__bar::before {
  content: "";
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  box-shadow: 15px 0 0 rgba(255,255,255,0.22), 30px 0 0 rgba(255,255,255,0.22);
}
.proj__url { font-size: 11px; color: var(--ink-soft); }

.proj__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(8, 9, 14, 0.92) 0%, rgba(8, 9, 14, 0.4) 30%, transparent 56%);
  pointer-events: none;
}
.proj__year {
  position: absolute;
  top: 52px; right: clamp(20px, 2.4vw, 40px);
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 18px);
  color: #fff;
  opacity: 0.85;
}
.proj__cap {
  position: absolute;
  left: clamp(22px, 3vw, 52px);
  right: clamp(22px, 3vw, 52px);
  bottom: clamp(24px, 3vh, 48px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.proj__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #fff;
}
.proj__desc {
  font-size: clamp(14px, 1.15vw, 18px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  line-height: 1.5;
}
/* CTA clair sur la photo sombre. */
.proj .btn-cta {
  background: #ffffff;
  color: #0c0e14;
  border-color: #ffffff;
}
.proj .btn-cta:hover { background: #e9ecf2; }

/* ==========================================================================
   CARTE CONTACT (claire)
   ========================================================================== */
/* La carte centre son contenu (vertical + horizontal). */
.contact-card { background: var(--glass-card); display: flex; align-items: center; justify-content: center; }
.contact-card__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  padding: clamp(40px, 6vh, 80px) clamp(28px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 30px);
}
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact-card__lead {
  font-size: clamp(15px, 1.3vw, 21px);
  color: var(--ink-soft);
  max-width: 50ch;
  line-height: 1.5;
}
.contact-card__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: 4px;
}
.contact-card__info div { display: flex; flex-direction: column; gap: 4px; }
.contact-card__info dt {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-card__info dd a {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 21px);
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.contact-card__info dd a:hover { color: var(--accent); }
.contact-card__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.contact-card__copy {
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* ==========================================================================
   NAV À POINTS (à droite, sur fond blanc)
   ========================================================================== */
.deck-nav {
  position: fixed;
  right: calc(var(--deck-m) + 12px);     /* à l'intérieur de la carte, jamais débordant */
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  padding: 12px 8px;                      /* capsule glass (plus contrastée) */
  background: rgba(12, 14, 20, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: var(--chip-blur);
  backdrop-filter: var(--chip-blur);
  border-radius: var(--radius-pill);
}
.deck-nav__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.deck-nav__dot:hover { background: rgba(255, 255, 255, 0.8); transform: scale(1.25); }
.deck-nav__dot.is-active {
  background: #ffffff;
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

/* indice "défiler" en bas, disparaît dès qu'on bouge */
.deck-hint {
  position: fixed;
  bottom: clamp(16px, 2.4vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.deck-hint.is-hidden { opacity: 0; }

/* ==========================================================================
   APERÇU — parcourir la page d'un site sans le quitter
   ========================================================================== */
[data-preview-open] { cursor: pointer; }
.proj__open { align-self: flex-start; }

.preview {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.preview.is-open { opacity: 1; visibility: visible; }

.preview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 20, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.preview__window {
  position: relative;
  width: min(1100px, 100%);
  height: min(88vh, 100%);
  display: flex;
  flex-direction: column;
  background: rgba(18, 19, 23, 0.55);          /* verre NEUTRE (sans bleu) */
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  backdrop-filter: blur(30px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.99);
  transition: transform 0.35s var(--ease);
}
.preview.is-open .preview__window { transform: none; }
/* La modale qui ouvre un SITE en iframe est plus large sur desktop (vue desktop
   du site) ; le slider d'écrans garde sa taille (min(1100px)). */
.preview--site .preview__window { width: min(1500px, 100%); height: min(90vh, 100%); }
/* Barre « navigateur » façon Safari : pastilles à gauche, fermer à droite. */
.preview__chrome {
  flex: 0 0 auto;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.preview__lights { display: flex; gap: 8px; }
.preview__lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.preview__lights i:nth-child(1) { background: #ff5f57; }
.preview__lights i:nth-child(2) { background: #febc2e; }
.preview__lights i:nth-child(3) { background: #28c840; }
/* Icônes façon macOS (✕ / − / +), centrées via le viewBox, visibles au survol
   des pastilles. La rouge ferme la modale. */
.preview__light--close { cursor: pointer; }
.preview__lights i svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.preview__lights i svg path {
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.preview__lights:hover i svg { opacity: 1; }
.preview__close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.preview__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Piste horizontale des écrans (scroll-snap). */
.preview__track {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.preview__track::-webkit-scrollbar { display: none; }
.preview__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.5vw, 34px);
}
.preview__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
/* Écran responsive (1er écran branding) : web sur desktop, mobile sur mobile. */
.preview__resp--mob { display: none; }
@media (max-width: 760px) {
  .preview__resp--web { display: none; }
  .preview__resp--mob { display: block; }
}
/* Flèches + points : seulement si plusieurs écrans. */
.preview__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(10, 12, 18, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.preview--multi .preview__nav { display: flex; }
.preview__nav--prev { left: 12px; }
.preview__nav--next { right: 12px; }
.preview__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 7px;
}
.preview__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.preview__dot.is-active { background: #fff; transform: scale(1.25); }

/* ----- Mode SITE : le site live dans une iframe (esprit navigateur) ------- */
.preview__addr {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  padding: 5px 14px;
  max-width: 100%;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* cliquable : copie l'URL complète (le bouton hérite de cursor:pointer/border:none du reset) */
.preview--site .preview__addr { display: flex; }
.preview__addr:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.preview__addr-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview__addr.is-copied { background: rgba(120, 220, 150, 0.22); color: #d6ffe4; }
.preview__siteframe {
  display: none;
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #ffffff;
}
.preview--site .preview__siteframe { display: block; }
.preview--site .preview__track,
.preview--site .preview__nav,
.preview--site .preview__dots { display: none !important; }
.preview__loading {
  display: none;
  position: absolute;
  inset: 42px 0 0 0;
  place-content: center;
  place-items: center;
  background: #0e0f13;
}
.preview--site .preview__loading { display: grid; }
.preview--site .preview__loading.is-done { display: none; }
.preview__spin {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pv-spin 0.8s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   SERVICES — cartes glass "éparpillées" (style Advantages), animées
   ========================================================================== */
.services { background: var(--glass-card); }
.services__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vh, 56px);
  padding: clamp(80px, 10vh, 130px) clamp(24px, 4vw, 72px) clamp(40px, 6vh, 72px);
}
.services__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
/* Un mot en serif italique (services + contact), comme les accents de la hero. */
.services__title em, .contact-card__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
/* Petit texte de présentation sous le titre (qui je suis). Remonté près du
   titre pour compenser le gap flex de .services__inner. */
.services__intro {
  margin: clamp(-46px, -3.6vh, -18px) auto 0;
  max-width: 58ch;
  text-align: center;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}
/* Mots-clés en avant (blanc + appuyé) sur le texte discret de l'intro. */
.services__intro strong { color: #fff; font-weight: 600; }
.services__scatter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 26px);
}
.svc {
  width: clamp(188px, 17vw, 248px);
  padding: clamp(20px, 1.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  cursor: pointer;                 /* cliquable -> va à la carte projet */
  /* CLEAR : teinte translucide lisible, sans backdrop-filter (scroll fluide). */
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.32) 0%, rgba(8, 12, 20, 0.44) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* décalage vertical "éparpillé" (la cascade d'entrée est gérée plus bas) */
.svc:nth-child(1) { margin-top: 58px; }
.svc:nth-child(2) { margin-top: -40px; }
.svc:nth-child(3) { margin-top: 72px; }
.svc:nth-child(4) { margin-top: -22px; }
.svc:nth-child(5) { margin-top: 46px; }
/* Entrée stylée quand on ARRIVE sur "Ce que je propose" (étape 1) ; masqué
   hors de cette étape -> pas de flash quand la carte glisse. */
body:not([data-step="1"]) .svc {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
body[data-step="1"] .services__title { animation: svc-in 0.75s var(--ease) backwards; }
body[data-step="1"] .services__intro { animation: svc-in 0.7s var(--ease) 0.08s backwards; }
body[data-step="1"] .svc { animation: svc-in 0.62s var(--ease) backwards; }
body[data-step="1"] .svc:nth-child(1) { animation-delay: 0.12s; }
body[data-step="1"] .svc:nth-child(2) { animation-delay: 0.2s; }
body[data-step="1"] .svc:nth-child(3) { animation-delay: 0.28s; }
body[data-step="1"] .svc:nth-child(4) { animation-delay: 0.36s; }
body[data-step="1"] .svc:nth-child(5) { animation-delay: 0.44s; }
.svc:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.5);
}
@keyframes svc-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .svc { transform: none; animation: none; }
  body[data-step="1"] .svc, body[data-step="1"] .services__title, body[data-step="1"] .services__intro { animation: none; }
}

/* ===== ENTRÉE COHÉRENTE — projets + contact animent leur contenu À L'ARRIVÉE =====
   Avant, seuls hero + services avaient une animation d'entrée. Ici la carte active
   reçoit .is-in (via le JS) -> son contenu monte en cascade (même keyframe svc-in),
   pour que TOUTES les sections aient une entrée cohérente. Masqué hors carte active
   -> rejoué à chaque passage, pas de flash quand la carte glisse. */
/* Projets : la boîte (verre + texte) monte d'un bloc -> pas de boîte vide. */
/* Sortie = inverse de l'entrée : au lieu d'une disparition sèche, le contenu se fond
   et redescient (transition) quand la carte n'est plus active. svc-in pour l'entrée
   (cascade), transition pour la sortie. Le from de svc-in (28px) = état caché -> pas de
   saut au moment d'entrer. */
.deck-card.proj:not(.is-in) .proj__box {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.deck-card.proj.is-in .proj__box { animation: svc-in 0.62s var(--ease) 0.12s backwards; }
/* Contact : cascade élément par élément, comme services. */
.deck-card.contact-card:not(.is-in) .contact-card__inner > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.deck-card.contact-card.is-in .contact-card__inner > * { animation: svc-in 0.6s var(--ease) backwards; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(1) { animation-delay: 0.1s; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(2) { animation-delay: 0.17s; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(3) { animation-delay: 0.24s; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(4) { animation-delay: 0.31s; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(5) { animation-delay: 0.38s; }
.deck-card.contact-card.is-in .contact-card__inner > *:nth-child(6) { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .deck-card.proj.is-in .proj__box,
  .deck-card.contact-card.is-in .contact-card__inner > * { animation: none; }
}
/* Indicateur "va au projet" en coin haut-droit (apparaît au survol). */
.svc__go {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 15px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);   /* discret mais toujours visible (cliquable) */
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.svc:hover .svc__go,
.svc:focus-visible .svc__go { transform: translate(1px, -1px); color: #ffffff; }
.svc:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.svc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.1;
  color: #ffffff;
}
.svc__text { font-size: clamp(12px, 0.95vw, 14px); color: var(--ink-soft); line-height: 1.5; }
.svc__stat {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 4px 11px;
}

/* ==========================================================================
   CARTE PROJET — image plein cadre + petite box flottante (nom + tag)
   ========================================================================== */
.proj__scrim { background: linear-gradient(0deg, rgba(8, 9, 12, 0.6) 0%, rgba(8, 9, 12, 0) 42%); }
.proj__box {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 3vw, 52px);
  bottom: clamp(24px, 3vh, 52px);
  max-width: min(440px, 78%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.6vw, 24px);
  background: rgba(16, 18, 24, 0.4);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
/* Type du projet = info principale (ce que les gens veulent voir). */
.proj__type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
/* Nom du client = crédit secondaire, discret. */
.proj__client {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.01em;
}
/* Ligne d'actions : « Voir le site » (+ App Store sur l'app), côte à côte. */
.proj__actions {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* CTA explicite : montre clairement que c'est cliquable pour voir le site. */
.proj__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 100px;
  background: #ffffff;
  color: #0a0a0c;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.proj__cta:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.9); }
/* Bouton App Store (à droite de « Voir le site » sur l'app) : noir façon badge. */
.proj__store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 100px;
  background: #0a0a0c;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
/* Icônes (Apple, Instagram) centrées nativement par le align-items:center du bouton —
   pas de nudge magique (le -2px d'avant remontait l'Apple un poil trop haut). */
.proj__store:hover { transform: translateY(-1px); background: #1c1c22; }

/* App : bouton « Voir les écrans » en bas à droite (verre). */
.proj__screens {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 3vw, 52px);
  bottom: clamp(24px, 3vh, 52px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  /* Même glass effect que la card .proj__box (titre). */
  background: rgba(16, 18, 24, 0.4);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.proj__screens:hover { transform: translateY(-2px); background: rgba(16, 18, 24, 0.52); }

/* ==========================================================================
   CARTE RIPPLE — bento (présentation parcourable + features)
   ========================================================================== */
.ripple { background: var(--glass-card); }
.rip__inner {
  height: 100%;
  padding: clamp(70px, 8vh, 96px) clamp(16px, 1.6vw, 26px) clamp(16px, 2vh, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
}
.rip__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rip__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rip__desc { font-size: clamp(14px, 1.1vw, 17px); color: var(--ink-soft); max-width: 60ch; line-height: 1.5; }
.rip__bento {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 1vw, 16px);
}
.rip__shot {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: #0a0a0c;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.rip__cell {
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: clamp(16px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}
.rip__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.7vw, 26px); color: var(--ink); }
.rip__label { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* ==========================================================================
   CONTACT — centré
   ========================================================================== */
.contact-card__inner { text-align: center; align-items: center; }
.contact-card__lead { margin-left: auto; margin-right: auto; }
.contact-card__info { justify-items: center; width: 100%; }
.contact-card__info div { align-items: center; }
.contact-card__actions { justify-content: center; }
.contact-card__copy { text-align: center; width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 760px) {
  /* Fond décalé center-LEFT sur mobile (image NETTE, l'eau est juste retirée). */
  :root { --deck-radius: 18px; --grad-pos: 30% center; }
  .hero-card__bg { background-position: 30% center; }
  .bento { grid-template-columns: 1fr 1fr; }
  /* Pitch hero en pleine largeur -> ne déborde jamais sur petit écran. */
  .hero-card__pitch {
    max-width: none;
    width: 100%;
    align-items: stretch;
    text-align: left;
  }
  .hero-card__actions .btn-cta,
  .hero-card__actions .btn-ghost { width: 100%; }
  .mod__watermark,
  .contact-card .mod__watermark { font-size: clamp(72px, 26vw, 150px); }
  .deck-nav { display: none; }

  /* Goodplace : visuel web au-dessus, mobile en dessous. */
  .gshow { flex-direction: column; gap: 12px; }
  .gshow__item { height: auto; width: 100%; flex: 0 0 auto; }
  .gshow__item img { height: auto; width: 100%; }
  .gshow__item--phone { width: 62%; align-self: center; }

  /* Carte app : texte au-dessus, téléphone en dessous. */
  .appcard__inner {
    flex-direction: column;
    justify-content: center;
    gap: clamp(22px, 4vh, 36px);
    padding: clamp(70px, 11vh, 96px) 22px 28px;
  }
  /* en colonne : hauteurs naturelles (sinon le teaser se réduit à 0). */
  .appcard__content { align-items: flex-start; flex: 0 0 auto; }
  .appcard__device { flex: 0 0 auto; width: 100%; }

  /* Aperçu : quasi plein écran sur mobile. */
  .preview { padding: 8px; }
  .preview__window { width: 100%; height: 100%; border-radius: 14px; }
}

@media (max-width: 460px) {
  .bento { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AJOUTS — menu haut-droite, carrousel projet, contexte, bandeau portfolio
   ========================================================================== */

/* ---- Menu (haut-droite) : liste des services ---------------------------- */
/* Logo à gauche, menu CENTRÉ (grille : 1fr | auto | 1fr). */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* Logo : décalé de 12px à droite pour équilibrer l'écart gauche avec l'écart au-dessus. */
.site-header .logo { justify-self: start; margin-left: 12px; }
/* Menu = pilule glass : capsule frostée, reflet supérieur, ombre douce. */
.site-menu {
  position: relative;          /* référent pour le pavé glissant */
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
  padding: 8px;               /* compact : 8px horizontal et vertical */
  border-radius: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(98, 106, 122, 0.34) 30%, rgba(64, 71, 85, 0.4) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 20px rgba(0, 0, 0, 0.1),
    0 16px 44px rgba(0, 0, 0, 0.3);
}
.site-menu__link {
  border: 0;
  cursor: pointer;
  padding: 9px 17px;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  position: relative;          /* texte au-dessus du pavé glissant */
  z-index: 1;
  transition: color 0.25s var(--ease);
}
.site-menu__link:hover,
.site-menu__link.is-active { color: #ffffff; }

/* Contact = LE CTA : pavé blanc translucide, texte noir, flèche ↗ permutée. */
.site-menu__link--contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  color: #0a0d14;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-menu__link--contact:hover,
.site-menu__link--contact.is-active { color: #0a0d14; }   /* texte NOIR, pas blanc */
.site-menu__link--contact:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 7px 18px rgba(0, 0, 0, 0.28);
}
/* Flèche ↗ stylée : permutation (sort en haut-droite, une nouvelle entre par le
   bas-gauche) au survol ET au scroll (.nudge posé par le JS). */
/* Flèche ↗ RÉUTILISABLE (permutation). Markup : <span class="arr"><span>↗</span><span>↗</span></span>.
   Déclenchée par le hover d'un parent .js-arr, ou par le CTA Contact (hover + .nudge au scroll). */
.arr {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.12em;
  transition: transform 0.45s var(--ease);
}
.arr span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;            /* graisse des flèches (partout) */
  transition: transform 0.4s var(--ease);
}
.arr span:nth-child(2) { transform: translate(-115%, 115%); }
.js-arr:hover .arr span:nth-child(1),
.site-menu__link--contact:hover .arr span:nth-child(1) { transform: translate(115%, -115%); }
.js-arr:hover .arr span:nth-child(2),
.site-menu__link--contact:hover .arr span:nth-child(2) { transform: translate(0, 0); }
/* Arrivé sur la vue contact (actif, hors survol) : la flèche pivote vers le
   BAS-DROITE (↗ -> ↘). */
.site-menu__link--contact.is-active:not(:hover) .arr { transform: rotate(90deg); }
/* Bouton hero « Découvrir mon travail » : au survol, la flèche PIVOTE vers le
   bas-droite (↗ -> ↘) pour signaler qu'on descend dans la page. Pas de "tir"
   comme les autres CTA -> on neutralise le déplacement des deux glyphes. */
.hero-card__cta:hover .arr { transform: rotate(90deg); }
.hero-card__cta:hover .arr span:nth-child(1) { transform: none; }
.hero-card__cta:hover .arr span:nth-child(2) { transform: translate(-115%, 115%); }
/* Flèches ↗ en SVG : tête identique sur tous les navigateurs (plus de fallback police). */
.arr svg { display: block; width: 0.92em; height: 0.92em; }
.svc__go svg, .proj__screens svg { display: block; width: 1em; height: 1em; }
.arr svg path,
.svc__go svg path,
.proj__screens svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Services : flèche ↓ qui apparaît + descend au survol (mène à la vue services). */
.site-menu__link--services { padding-right: 28px; }
.site-menu__link--services::after {
  content: "↓";
  position: absolute;
  top: 50%;
  right: 11px;
  font-weight: 500;
  opacity: 0;
  transform: translate(0, calc(-50% - 4px));
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
/* Flèche ↓ visible au survol ET dès qu'on est sur la vue services (actif). */
.site-menu__link--services:hover::after,
.site-menu__link--services.is-active::after { opacity: 1; transform: translate(0, -50%); }

/* Pavé translucide UNIQUE qui GLISSE entre les liens (style sobre prod),
   positionné en JS. Suit le hover ; masqué quand on quitte le menu. */
.site-menu__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s var(--ease);
  will-change: transform, width;
}
/* Bouton hamburger (mobile) : même verre que la pilule du menu. */
.site-burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(98, 106, 122, 0.34) 30%, rgba(64, 71, 85, 0.4) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 20px rgba(0, 0, 0, 0.1),
    0 16px 44px rgba(0, 0, 0, 0.3);
}
.site-burger__lines { position: relative; width: 18px; height: 12px; }
.site-burger__lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.site-burger__lines span:nth-child(1) { top: 2px; }
.site-burger__lines span:nth-child(2) { bottom: 2px; }
.site-burger.is-open .site-burger__lines span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.site-burger.is-open .site-burger__lines span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Mobile : le menu devient un panneau déroulant (même verre), ouvert par le burger. */
@media (max-width: 760px) {
  .site-burger { display: inline-flex; }
  .site-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: calc(var(--deck-m) + 60px);
    right: calc(var(--deck-m) + 12px);
    width: min(248px, 72vw);
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .site-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .site-menu__pill { display: none; }
  .site-menu__link { width: 100%; text-align: left; padding: 12px 16px; font-size: 15px; }
  .site-menu__link--services { padding-right: 28px; }
}

/* ---- Carrousel projet : track horizontal + slides ---------------------- */
.proj__track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.proj__track::-webkit-scrollbar { display: none; }
.proj__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}
.proj__arrow {
  position: absolute;
  top: 50%;                          /* centré verticalement (web) */
  transform: translateY(-50%);
  z-index: 4;
  width: clamp(40px, 3vw, 50px);
  height: clamp(40px, 3vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(10, 12, 18, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.proj__arrow:hover { background: rgba(10, 12, 18, 0.75); }
/* Décalées vers l'intérieur pour ne pas chevaucher le scroller (deck-nav). */
/* Position depuis le bord de la carte (qui flotte, marge --deck-m). Rapprochées du bord
   tout en gardant --next à l'écart de la nav à points (droite). Symétriques. */
.proj__arrow--prev { left: clamp(46px, 4vw, 58px); }
.proj__arrow--next { right: clamp(46px, 4vw, 58px); }
.proj__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.proj__arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.proj__arrow-g { display: block; }
.proj__arrow-g svg { display: block; width: 20px; height: 20px; }
.proj__arrow-g svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Flèches contextuelles : masquées en bout de course (glissent vers l'extérieur). */
.proj__arrow.is-hidden { opacity: 0; pointer-events: none; }
.proj__arrow--prev.is-hidden { transform: translateY(-50%) translateX(-12px); }
.proj__arrow--next.is-hidden { transform: translateY(-50%) translateX(12px); }
/* Petit nudge sur les flèches (web + mobile) : invite à changer de projet,
   à droite ET à gauche. */
@keyframes proj-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes proj-nudge-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
/* Animation TOUJOURS appliquée (plus de :not(.is-hidden)) -> les deux flèches démarrent
   ENSEMBLE au chargement et restent synchronisées (même durée 1.5s, même pic à 50%, comme
   le « i »). Une flèche masquée s'anime de façon invisible -> elle réapparaît déjà en phase.
   (Avant : l'animation ne se lançait qu'à l'apparition -> la flèche gauche démarrait en retard.) */
.proj__arrow--next .proj__arrow-g { animation: proj-nudge 1.5s var(--ease) infinite; }
.proj__arrow--prev .proj__arrow-g { animation: proj-nudge-left 1.5s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .proj__arrow .proj__arrow-g { animation: none; }
}
.proj__dots {
  position: absolute;
  z-index: 4;
  bottom: clamp(16px, 2vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}
.proj__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.proj__dot.is-active { background: #fff; transform: scale(1.25); }

/* ---- Contexte du projet (travail réalisé + objectif) dans la box -------- */
.proj__box { max-width: min(500px, 82%); }
/* Le toggle « i » n'apparaît que sur mobile ; sur desktop le contexte
   est toujours affiché. */
.proj__info { display: none; }
/* Pulse d'appel du « i » (mobile) : un anneau qui s'étend vers l'EXTÉRIEUR et
   disparaît (pas de retour vers l'intérieur). */
@keyframes info-attn {
  from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
  to { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .proj__info { animation: none !important; } }
/* Mobile : la box reste visible (titre + nom + bouton, peu encombrants), mais
   le PARAGRAPHE de contexte est replié derrière un petit « i » dans le coin.
   Tap sur le « i » -> le texte se déplie ; re-tap (✕) -> il se replie. */
@media (max-width: 760px) {
  .proj__box {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 5vh;
    max-width: min(420px, 88%);
    padding: 15px 16px 14px;
    gap: 3px;
    align-items: center;
    text-align: center;
  }
  .proj__type { font-size: 22px; }
  .proj__actions { margin-top: 5px; }
  .proj__cta { padding: 8px 15px; }
  /* Contexte : replié par défaut, déplié quand .is-info. */
  .proj__context {
    font-size: 12px;
    line-height: 1.4;
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease), opacity 0.3s var(--ease), margin 0.35s var(--ease);
  }
  .proj__slide.is-info .proj__context {
    max-height: 200px;
    margin: 4px 0 5px;
    opacity: 1;
  }
  /* Pastille « i / ✕ » dans le coin haut-droit de la box. */
  .proj__info {
    display: flex;
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: background 0.2s var(--ease);
  }
  .proj__info:hover { background: rgba(255, 255, 255, 0.24); }
  /* Le « i » pulse doucement pour inciter à l'ouvrir (tant que le détail est replié). */
  .proj__slide:not(.is-info) .proj__info { animation: info-attn 1.5s var(--ease) infinite; }
  .proj__slide.is-info .proj__info { background: rgba(255, 255, 255, 0.22); }
  .proj__info-x { display: none; font-style: normal; font-size: 12px; }
  .proj__slide.is-info .proj__info-i { display: none; }
  .proj__slide.is-info .proj__info-x { display: block; }
  /* « Voir les écrans » (app) : remontée en haut sur mobile (au-dessus du visuel).
     Le header est rendu `pointer-events:none` (voir plus bas) pour ne plus bloquer
     les clics sur ce bouton, tout en gardant logo/menu/burger cliquables. */
  .proj__screens {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    top: clamp(40px, 4vh, 92px);
    bottom: auto;
  }
  /* Flèches carrousel : recentrées verticalement, rapprochées des bords. */
  .proj__arrow { top: 50%; }
  .proj__arrow--prev { left: 6px; }
  .proj__arrow--next { right: 6px; }
}
.proj__context {
  margin: 2px 0 6px;
  font-size: clamp(12.5px, 0.95vw, 14.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- Bandeau "scroll = portfolio" en bas de "Ce que je propose" --------- */
.services__hint {
  position: absolute;
  bottom: clamp(18px, 3vh, 38px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.services__hint-label {
  font-size: clamp(12.5px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.62);
}
.services__hint-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 20px);
  color: #fff;
}
.services__hint-cta span { display: inline-block; animation: hint-bounce 1.8s ease-in-out infinite; }
@keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .services__hint-cta span { animation: none; } }

/* ==========================================================================
   CARTES MARQUÉES — Ripple et Goodplace prennent entièrement l'identité du
   projet (fond + accents aux couleurs de la marque).
   ========================================================================== */

/* ---- Ripple : noir + rouge crimson ------------------------------------- */
.ripple {
  background:
    radial-gradient(95% 78% at 22% -8%, rgba(255, 56, 92, 0.28) 0%, rgba(255, 56, 92, 0) 56%),
    linear-gradient(158deg, #220912 0%, #0e0509 58%, #08030a 100%);
  border-color: rgba(255, 90, 120, 0.24);
}
.ripple .rip__name { color: #ffffff; }
.ripple .rip__desc { color: rgba(255, 233, 238, 0.78); }
.ripple .tag {
  color: #ffd7df;
  background: rgba(255, 56, 92, 0.18);
  border-color: rgba(255, 56, 92, 0.44);
}
.ripple .rip__cell {
  background: rgba(255, 56, 92, 0.08);
  border-color: rgba(255, 96, 124, 0.28);
}
.ripple .rip__big { color: #ff6e88; }
.ripple .rip__label { color: rgba(255, 224, 230, 0.66); }
.ripple .rip__shot { border-color: rgba(255, 96, 124, 0.24); }

/* ---- Goodplace : vert / teal ------------------------------------------- */
.brand {
  background:
    radial-gradient(95% 78% at 24% -8%, rgba(30, 200, 140, 0.26) 0%, rgba(30, 200, 140, 0) 56%),
    linear-gradient(158deg, #07352a 0%, #052019 58%, #03130f 100%);
  border-color: rgba(40, 205, 150, 0.24);
}
.brand .brand__name { color: #ffffff; }
.brand .brand__desc { color: rgba(222, 248, 237, 0.78); }
.brand .tag {
  color: #c8f5e4;
  background: rgba(30, 200, 140, 0.18);
  border-color: rgba(30, 200, 140, 0.46);
}
.brand .bbento__cell {
  background: rgba(30, 200, 140, 0.06);
  border-color: rgba(40, 205, 150, 0.22);
}

/* ==========================================================================
   MOBILE — corrections d'affichage (aucun débordement, layouts adaptés)
   ========================================================================== */
@media (max-width: 760px) {
  /* SERVICES : 1 colonne, cellules aérées, titre groupé près des blocs. */
  .services__scatter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    width: 100%;
  }
  .svc {
    width: auto;
    /* Compact pour tenir dans la carte flottante même barre Safari affichée
       (la part vh se resserre sur écran court -> pas d'écrasement sur le hint). */
    padding: clamp(13px, 2.5vh, 21px) 18px;
    gap: 6px;
    border-radius: 14px;
  }
  .svc:nth-child(1), .svc:nth-child(2), .svc:nth-child(3),
  .svc:nth-child(4), .svc:nth-child(5) { margin-top: 0; }
  .svc__title { font-size: 16px; }
  .svc__text { font-size: 12.5px; line-height: 1.4; }
  /* margin-top:auto sur le titre ET le hint -> l'espace vide se répartit ÉGALEMENT
     au-dessus du contenu et entre les blocs et le hint (contenu centré dans le haut,
     hint punaisé en bas comme sur web). */
  .services__title { font-size: clamp(30px, 8vw, 44px); max-width: 100%; margin-top: auto; }
  /* Intro : gap mobile (20px) plus petit -> marge négative douce pour rester
     proche du titre sans le chevaucher. */
  .services__intro { margin-top: -8px; font-size: 13.5px; line-height: 1.55; max-width: 100%; }
  /* Le saut de ligne forcé avant « +50 » est réservé au web (mobile = retour naturel). */
  .intro-br { display: none; }
  /* Titre + blocs groupés au centre (titre proche des blocs) ; hint en bas (web). */
  .services__inner {
    justify-content: flex-start;
    gap: 15px;                              /* un peu d'air sous le titre */
    padding-top: clamp(30px, 4.5vh, 48px);
    padding-bottom: clamp(24px, 3.5vh, 40px);
  }
  /* Hint REMIS DANS LE FLUX + margin-top:auto -> poussé en bas de la carte, JAMAIS
     écrasé par les blocs (sur écran court il se colle juste sous eux, sans chevaucher). */
  .services__hint {
    position: static;
    transform: none;
    left: auto;
    margin-top: auto; /* punaisé en bas, l'espace passe au-dessus (cf. titre) */
    align-self: center;
  }
  /* Pas de compression flex : les blocs gardent leur hauteur naturelle (sinon le flex
     les écrase et le texte 2 lignes passe sous le titre). Si vraiment trop court, le
     contenu déborde proprement (clip via overflow:hidden) au lieu de s'écraser. */
  .services__title, .services__intro, .services__scatter, .services__hint { flex-shrink: 0; }
  /* « Faites défiler… » sur une seule ligne (taille calée sur la largeur). */
  .services__hint-cta { white-space: nowrap; font-size: clamp(11.5px, 3.3vw, 15px); }

  /* RIPPLE : screenshot pleine largeur en haut, 3 features en ligne dessous. */
  .rip__bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(210px, 1fr) auto;
  }
  .rip__shot { grid-column: 1 / 4; grid-row: 1; }
  .rip__cell { grid-row: 2; padding: 12px; justify-content: center; }
  .rip__big { font-size: 15px; }
  .rip__label { font-size: 10.5px; }

  /* RIPPLE + GOODPLACE : hauteur de l'inner basée sur le viewport (la hauteur
     100% ne se résolvait pas -> le bento débordait) + head compact. */
  .rip__inner, .brand__inner {
    height: calc(100vh - 2 * var(--deck-m));
    box-sizing: border-box;
    padding: clamp(54px, 8vh, 74px) 16px clamp(14px, 2vh, 20px);
    gap: 9px;
    overflow: hidden;
  }
  .brand__name, .rip__name { font-size: clamp(26px, 7vw, 40px); }
  .bbento { gap: 7px; }
  .rip__desc, .brand__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* CONTACT : tient strictement dans l'écran (largeur basée sur le viewport). */
  .contact-card__inner {
    box-sizing: border-box;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding: clamp(40px, 8vh, 72px) 20px;
    align-items: stretch;
    gap: 18px;
  }
  .contact-card__title,
  .contact-card__lead,
  .contact-card__info,
  .contact-card__actions { width: 100%; max-width: 100%; box-sizing: border-box; }
  .contact-card__title { font-size: clamp(30px, 8vw, 44px); overflow-wrap: break-word; }
  .contact-card__lead { font-size: clamp(15px, 4.2vw, 19px); max-width: 36ch; overflow-wrap: break-word; }
  /* Infos : bloc compact, valeurs mises en avant + labels discrets. */
  .contact-card__info { grid-template-columns: 1fr; gap: 13px; margin-top: 2px; }
  .contact-card__info div { gap: 2px; }
  .contact-card__info dt { font-size: 10px; letter-spacing: 0.16em; }
  .contact-card__info dd a { font-size: 19px; }
  .contact-card__actions { margin-top: 14px; justify-content: center; }
}

@media (max-width: 600px) {
  /* HERO : le cercle rotatif est masqué sur mobile (on scrolle naturellement). */
  .hero-card__badge { display: none; }
}