/* ==========================================================================
   Wabi-Sabi, feuille de style
   Palette tirée des matières de l'atelier : grès cru, shino, sumi, oribe.
   Aucun angle arrondi : tout est taillé droit.
   ========================================================================== */

:root {
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

  /* Thème clair : grès cru */
  --ground: #DDD7CC;
  --surface: #EAE6DF;
  --ink: #211D19;
  --ink-soft: #51483F;
  --accent: #3B5843;
  --line: #B3A999;
  --field-border: #6B6157;
  --error: #8E2B1F;
  --btn-bg: #211D19;
  --btn-fg: #F3EFE8;
  --btn-hover: #3B5843;
  --focus: #3B5843;

  /* Opacité des logos clients : ils sont en trait fin, on les pose un
     cran en dessous du texte plein */
  --logo-op: 0.8;
  --logo-op-hover: 1;

  /* Illustration de secours */
  --apron: #48505F;
  --apron-fold: #5A6374;
  --pan: #C2B8AA;
  --pan-in: #B0A596;
  --wheel: #6B6259;
  --wheel-top: #7C736A;
  --clay: #A69686;
  --clay-in: #857566;
  --clay-hi: #BFB1A2;
  --clay-line: #8B7B6C;
  --slip: #CFC3B4;
  --contour: #2E2823;
  --sponge: #C9A96E;
  --shadow: rgba(33, 29, 25, 0.16);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: clip;
}

img,
svg { display: block; max-width: 100%; }

h1,
h2,
h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.35rem + 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
}

h3 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
}

p { margin: 0; }

a { color: inherit; }

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

::selection {
  background: var(--accent);
  color: var(--ground);
}

.wrap {
  width: min(76rem, 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding-block: clamp(5rem, 11vw, 10rem); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Bandeau de démonstration (25 septembre 2026) : l'atelier et la
   céramiste sont inventés, il faut le lire avant tout le reste.
   Discret (une ligne, petit corps, dans l'encre de la page) mais au-dessus
   du menu, et il défile avec la page au lieu de le suivre. */
.demo-banner {
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--btn-fg);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
}
.demo-banner a {
  color: inherit;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.demo-banner a:hover,
.demo-banner a:focus-visible { color: var(--ground); text-decoration-thickness: 2px; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Actions : un seul bouton plein par écran, les liens restent secondaires
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-io);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn:active { transform: translateY(1px); }

.text-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 0.12em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.text-link:hover { background-size: 100% 2px; }
.motion-ok .text-link:hover { animation: underline-swipe 0.7s var(--ease-io); }

@keyframes underline-swipe {
  0%     { background-position: 100% 100%; background-size: 100% 1px; }
  45%    { background-position: 100% 100%; background-size: 0% 1px; }
  55%    { background-position: 0 100%; background-size: 0% 1px; }
  100%   { background-position: 0 100%; background-size: 100% 2px; }
}

/* --------------------------------------------------------------------------
   En-tête collant, qui reste affiché pendant la descente
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Translucide : on devine la vidéo et la page sous le menu */
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, backdrop-filter 0.4s ease;
}
/* Léger flou une fois la page défilée : le texte qui passe dessous
   ne se mêle pas aux liens du menu */
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 1.1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.seal {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}
.motion-ok .logo:hover .seal { animation: stamp 0.5s var(--ease); }

@keyframes stamp {
  0%   { transform: none; }
  40%  { transform: scale(0.84) rotate(-6deg); }
  100% { transform: none; }
}

.site-nav { margin-left: auto; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.35rem) / 0% 1px no-repeat;
  transition: background-size 0.45s var(--ease-io), color 0.3s ease;
}
.nav-list a:hover {
  color: var(--ink);
  background-size: 100% 1px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.9rem;
  border: 1.5px solid var(--field-border);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.nav-toggle:hover { border-color: var(--ink); }

@media (max-width: 49.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1.5rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .js .nav-list[data-open] { display: flex; }
  .motion-ok .nav-list[data-open] { animation: menu-drop 0.4s var(--ease) both; }
  .js .nav-list a {
    display: block;
    padding-block: 0.75rem;
    font-size: 1.1rem;
    color: var(--ink);
  }
}

@keyframes menu-drop {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}

@media (max-width: 29.99rem) {
  .header-inner { column-gap: 0.6rem; }
}

/* --------------------------------------------------------------------------
   Médias : photo si elle existe, aplat de couleur sinon
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tone, var(--surface));
}
.media img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  transition: scale 0.9s var(--ease);
}

.media-num {
  position: absolute;
  left: 1.25rem;
  bottom: 0.5rem;
  font-family: var(--serif);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  line-height: 1;
  color: var(--tone-ink, var(--ink));
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Apparitions au défilement (activées par script.js)
   -------------------------------------------------------------------------- */

.reveal-ready [data-reveal] {
  transition:
    opacity 0.9s var(--ease) var(--d, 0s),
    transform 0.9s var(--ease) var(--d, 0s),
    clip-path 1.2s var(--ease-io) var(--d, 0s);
}
.reveal-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(2.25rem);
}

/* Rideau qui se lève sur l'image (un clip-path complet empêcherait
   IntersectionObserver de voir l'élément) */
.reveal-ready [data-reveal="wipe"]:not(.is-in) {
  opacity: 1;
  transform: none;
}
.reveal-ready [data-reveal="wipe"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--curtain, var(--ground));
  transform-origin: 50% 0;
  transition: transform 1.2s var(--ease-io) var(--d, 0s);
}
.reveal-ready [data-reveal="wipe"].is-in::after { transform: scaleY(0); }
.reveal-ready [data-reveal="wipe"]:not(.is-in) img { scale: 1.2; }
.reveal-ready [data-reveal="wipe"] img { transition: scale 1.6s var(--ease) var(--d, 0s); }
.testimonials { --curtain: var(--surface); }

.reveal-ready [data-reveal="draw"] {
  transform-origin: 0 50%;
  transition: transform 1.6s var(--ease-io);
}
.reveal-ready [data-reveal="draw"]:not(.is-in) {
  opacity: 1;
  transform: scaleX(0);
}

/* Décalage en cascade */
.feature-list > li:nth-child(2),
.quotes > :nth-child(2) { --d: 0.12s; }
.feature-list > li:nth-child(3),
.quotes > :nth-child(3) { --d: 0.24s; }
.feature-list > li:nth-child(4),
.quotes > :nth-child(4) { --d: 0.36s; }
.features-head p,
.steps-head p,
.pricing-head p,
.faq-head p { --d: 0.1s; }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */

/* Plein écran : la scène reste épinglée pendant que la vidéo avance */
.hero { position: relative; }
.js .hero { margin-top: calc(-1 * var(--header-h, 5rem)); }
.motion-ok .hero { height: 260svh; }

.hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-block: 6rem clamp(2.5rem, 7vh, 4.5rem);
}

.hero-text { max-width: 36rem; }
.hero-text h1 { max-width: 17ch; }

/* Le texte remonte à peine et s'estompe un peu pendant la vidéo */
.motion-ok .hero-text {
  opacity: calc(1 - var(--p, 0) * 0.45);
  translate: 0 calc(var(--p, 0) * -6vh);
}
.motion-ok .hero-text:focus-within { opacity: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ground) 94%, transparent) 0%,
    color-mix(in srgb, var(--ground) 74%, transparent) 42%,
    transparent 72%);
}

.hero h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero h1 .w > span { display: inline-block; }

.lead {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

.hero-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}
.hero-media .fallback-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Le cadrage suit le geste. Dans la vidéo, les mains et le pot occupent
   le bas droit de l'image (x 55 à 100 %, y 48 à 100 %) du début à la fin :
   c'est cette zone que l'on garde, quel que soit le format de l'écran. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Écran plus haut que 16/9 : le rognage est latéral, on garde la droite */
  object-position: 73% 50%;
  transform-origin: 73% 50%;
}

/* Écran plus large que 16/9 : le rognage devient vertical. Ancré vers le
   bas, les mains restent dans le cadre ; sur un écran très large, c'est
   le haut de la tête qui sort, jamais le tournage. */
@media (min-aspect-ratio: 16 / 9) {
  .hero-video {
    object-position: 50% 82%;
    transform-origin: 50% 82%;
  }
}

/* Grand écran : le texte se pose sur le mur clair, à gauche */
@media (min-width: 56rem) {
  .hero-inner {
    align-items: center;
    padding-block: 6rem 4rem;
  }
  .hero-scrim {
    background: linear-gradient(to right,
      color-mix(in srgb, var(--ground) 88%, transparent) 0%,
      color-mix(in srgb, var(--ground) 62%, transparent) 34%,
      transparent 60%);
  }
}

/* Écran étroit et haut (téléphone à la verticale) : la vidéo est rognée sur
   les côtés, toute sa hauteur reste visible — le réglage vertical du cadrage
   n'a donc plus aucun effet — et le tournage se joue en bas de l'image.
   On remonte le texte et on retourne le voile : la moitié basse de l'écran
   est rendue aux mains. */
@media (max-aspect-ratio: 3 / 4) {
  .hero-inner {
    align-items: flex-start;
    padding-block: 5rem 2.5rem;
  }
  .hero-scrim {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 74%, transparent) 42%,
      transparent 72%);
  }
}

/* Séquence d'ouverture : les mots montent, l'image se dévoile */
.motion-ok .hero h1 .w > span {
  animation: word-rise 1s var(--ease) both;
  animation-delay: calc(var(--i) * 55ms + 150ms);
}
.motion-ok .hero-text > .lead,
.motion-ok .hero-text > .hero-actions { animation: fade-up 0.9s var(--ease) both; }
.motion-ok .hero-text > .lead { animation-delay: 0.75s; }
.motion-ok .hero-text > .hero-actions { animation-delay: 0.9s; }
.motion-ok .hero-media { animation: wipe-up 1.4s var(--ease-io) 0.2s both; }
.motion-ok .hero-video { animation: settle 2.6s var(--ease) 0.2s both; }

@keyframes word-rise {
  from { transform: translateY(110%); }
  to   { transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes wipe-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0); }
}
@keyframes settle {
  from { scale: 1.22; }
  to   { scale: 1; }
}

/* Illustration de secours (visible tant que la photo du héros manque) */
.a-apron { fill: var(--apron); }
.a-apron-fold { fill: none; stroke: var(--apron-fold); stroke-width: 3; stroke-linecap: round; }
.a-pan { fill: var(--pan); }
.a-pan-in { fill: var(--pan-in); }
.a-wheel { fill: var(--wheel); }
.a-wheel-top { fill: var(--wheel-top); }
.a-clay-in { fill: var(--clay-in); }
.a-clay { fill: var(--clay); }
.a-rim { fill: none; stroke: var(--clay-hi); stroke-width: 7; stroke-linecap: round; }
.a-rings path {
  fill: none;
  stroke: var(--clay-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 34 14 8 14;
}
.a-hand { fill: var(--slip); stroke: var(--contour); stroke-width: 2; stroke-linejoin: round; }
.a-cuff { fill: var(--apron-fold); stroke: var(--contour); stroke-width: 2; stroke-linejoin: round; }
.a-finger,
.a-slip-mark { fill: none; stroke: var(--clay-line); stroke-width: 2.2; stroke-linecap: round; }
.a-drip { fill: none; stroke: var(--clay-hi); stroke-width: 4; stroke-linecap: round; }
.a-sponge { fill: var(--sponge); }
.a-shadow { fill: var(--shadow); }
.a-bowl { fill: #3A2519; }
.a-bowl-in { fill: #241712; }
.a-bowl-flash { fill: #8A4B2A; }

.motion-ok .a-rings path { animation: wheel-spin 4.8s cubic-bezier(0.12, 0.6, 0.3, 1) both; }

@keyframes wheel-spin {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -560; }
}

/* --------------------------------------------------------------------------
   Clients : une ligne sous les témoignages
   -------------------------------------------------------------------------- */

/* Même respiration au-dessus du trait de pinceau, en dessous et sous
   les lieux : la marge de section (voir .section) */
.testimonials .brush { margin-top: clamp(5rem, 11vw, 10rem); }

.clients-row {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(5rem, 11vw, 10rem);
}

.clients-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

/* Grille régulière : 1, 2 puis 3 colonnes, deux rangées de trois
   sur grand écran */
.clients {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clients li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
  transition: border-color 0.45s ease;
}
.clients li:hover { border-left-color: var(--ink); }

/* Logo en noir sur fond transparent, retourné en clair pour le thème
   sombre. Un masque CSS donnerait exactement la couleur de l'encre du
   site, mais Chrome refuse les masques chargés depuis un fichier local
   (file://) : les logos disparaîtraient dès qu'on ouvre la page sans
   serveur. Une image ordinaire s'affiche partout.
   Le trait de ces logos est très fin : on ne le déplace pas au survol,
   sinon il se redessine à chaque image et scintille. Le mouvement passe
   sur le filet et sur la ville ; le logo ne fait varier que son opacité. */
.client-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(5.5rem, 9vw, 7.5rem);
  object-fit: contain;
  object-position: left center;
  opacity: var(--logo-op);
  transition: opacity 0.4s ease;
}
.clients li:hover .client-logo { opacity: var(--logo-op-hover); }

/* Le nom est déjà dessiné dans le logo : on le garde pour les lecteurs
   d'écran, sans le répéter à l'écran */
.has-logo .client-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.client-name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}
.client-city {
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: translate 0.5s var(--ease);
}
.clients li:hover .client-city { translate: 0.35rem 0; }

@media (min-width: 36rem) {
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .clients {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
  }
}

/* Trait de pinceau entre deux sections */
.brush {
  height: 14px;
  margin-block: 0;
  border: 0;
  background: var(--line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C120 3 260 11 400 6S680 3 798 7L796 9C660 9 520 12 400 10S120 12 4 11Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C120 3 260 11 400 6S680 3 798 7L796 9C660 9 520 12 400 10S120 12 4 11Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Fonctionnalités
   -------------------------------------------------------------------------- */

.features {
  display: grid;
  gap: 3.5rem 2rem;
}

.features-head p,
.steps-head p,
.pricing-head p,
.faq-head p {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

.feature-list {
  display: grid;
  gap: 3.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature .media { margin-bottom: 1.5rem; }
.feature:hover .media img { scale: 1.06; }

.feature h3 { transition: translate 0.5s var(--ease); }
.feature:hover h3 { translate: 0.4rem 0; }

.feature p {
  max-width: 30rem;
  margin-top: 0.75rem;
  color: var(--ink-soft);
}

@media (min-width: 40rem) {
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(even) { margin-top: 5rem; }
}

@media (min-width: 62rem) {
  .features { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .features-head {
    grid-column: 1 / span 4;
    position: sticky;
    top: 6rem;
    align-self: start;
  }
  .feature-list { grid-column: 6 / -1; }
}

/* --------------------------------------------------------------------------
   Étapes : l'image suit l'étape en cours
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 3.5rem 2rem;
  padding-top: 0;
}

.step-visual { display: none; }

.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 3.5rem;
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.625rem;
  top: 3.75rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}
.step:not(:last-child)::after {
  width: 2px;
  margin-left: -0.5px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease-io);
}
.step.is-done::after { transform: scaleY(1); }

.step-num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px solid var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var(--ease);
}
.step.is-active .step-num,
.step.is-done .step-num {
  background: var(--ink);
  color: var(--ground);
}
.step.is-active .step-num { transform: scale(1.08); }

.step h3 { padding-top: 0.6rem; }
.step p {
  max-width: 34rem;
  margin-top: 0.6rem;
  color: var(--ink-soft);
}
.step .step-time {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.step-media {
  max-width: 24rem;
  margin-top: 1.5rem;
}

@media (min-width: 62rem) {
  .steps { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .steps-head {
    grid-column: 1 / span 5;
    position: sticky;
    top: 6rem;
    align-self: start;
  }
  .step-list { grid-column: 7 / -1; }

  .step-media { display: none; }

  .step-visual {
    display: block;
    position: relative;
    width: min(100%, 21rem);
    aspect-ratio: 1;
    margin-top: 2.5rem;
    background: var(--surface);
  }
  .step-visual .media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s var(--ease-io);
  }
  .step-visual .media.is-active {
    z-index: 1;
    clip-path: inset(0);
  }
  .step-visual .media img { scale: 1.15; transition: scale 1.4s var(--ease); }
  .step-visual .media.is-active img { scale: 1; }
}

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */

.price-list {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.price-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas:
    "thumb body"
    "thumb price";
  gap: 0.6rem 1.25rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 1px solid var(--line); }
.price-row::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  background: var(--surface);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-io);
}
.price-row:hover::before { transform: scaleY(1); }

.price-row--feature {
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-top: 0;
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "thumb"
    "body"
    "price";
}
.price-row--feature::before { display: none; }
.price-row--feature .price-thumb { width: 6rem; }

.price-thumb {
  grid-area: thumb;
  align-self: start;
  aspect-ratio: 1;
}
.price-row:hover .price-thumb img { scale: 1.1; }

.price-body { grid-area: body; }
.price-body p {
  max-width: 36rem;
  margin-top: 0.4rem;
  color: var(--ink-soft);
}

.price {
  grid-area: price;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  transition: translate 0.5s var(--ease);
}
.price-from {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (min-width: 40rem) {
  .price-row {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb body price";
    align-items: center;
    column-gap: 2rem;
  }
  .price-row--feature { grid-template-columns: 9rem minmax(0, 1fr) auto; }
  .price-row--feature .price-thumb { width: auto; }
  .price-row:hover .price { translate: -0.5rem 0; }
}

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.pricing-cta p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Témoignages
   -------------------------------------------------------------------------- */

.testimonials { background: var(--surface); }

.quotes {
  display: grid;
  gap: 3rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.quote-media {
  aspect-ratio: 4 / 5;
  max-width: 22rem;
}

.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p {
  max-width: 34rem;
  color: var(--ink);
}
.quote--large p {
  max-width: 40rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.2rem);
  line-height: 1.5;
}

.quote figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--ink);
  font-size: 0.95rem;
}
.quote figcaption strong { font-weight: 700; color: var(--ink); }
.quote figcaption span { color: var(--ink-soft); }

@media (min-width: 62rem) {
  .quotes {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem 2rem;
  }
  .quote-media { grid-column: 1 / span 4; grid-row: 1; max-width: none; }
  .quote--large { grid-column: 6 / -1; grid-row: 1; align-self: end; }
  .quote--left { grid-column: 1 / span 5; grid-row: 2; }
  .quote--offset { grid-column: 7 / span 5; grid-row: 2; margin-top: 5rem; }
}

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 2.5rem 2rem;
}

.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }

.faq-q { transition: translate 0.45s var(--ease); }
.faq-list summary:hover .faq-q { translate: 0.4rem 0; }

.faq-icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--field-border);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.4rem;
  background: var(--ink);
  transition: transform 0.4s var(--ease-io), background-color 0.35s ease;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-list details[open] .faq-icon { background: var(--ink); border-color: var(--ink); }
.faq-list details[open] .faq-icon::before { transform: rotate(180deg); background: var(--ground); }
.faq-list details[open] .faq-icon::after { transform: rotate(180deg); background: var(--ground); }
.faq-list summary:hover .faq-icon { border-color: var(--ink); }

.faq-body { overflow: hidden; }
.faq-body p {
  max-width: 40rem;
  padding-bottom: 1.6rem;
  color: var(--ink-soft);
}

@media (min-width: 62rem) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .faq-head { grid-column: 1 / span 4; }
  .faq-list { grid-column: 5 / -1; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { padding-bottom: clamp(4rem, 9vw, 8rem); }

.contact-band {
  aspect-ratio: 4 / 3;
  max-height: 70vh;
  width: 100%;
}

.contact-panel {
  position: relative;
  display: grid;
  gap: 3rem;
  margin-top: -3rem;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  background: var(--surface);
  border-top: 3px solid var(--ink);
}

.contact-intro > p {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

/* La prochaine cuisson : l'information qui presse, juste avant le
   formulaire plutôt que perdue dans le héros */
.contact-intro .next-firing {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.contact-intro .next-firing::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
  transform: translateY(-0.1em);
}
.motion-ok .contact-intro .next-firing::before { animation: blink 2.4s ease-in-out 1.6s 3; }

.contact-intro address {
  margin-top: 2.5rem;
  font-style: normal;
  color: var(--ink-soft);
}
.contact-intro address p + p { margin-top: 1rem; }

.field + .field { margin-top: 1.5rem; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--field-border);
  border-radius: 0;
  background-color: var(--ground);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field select {
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) 55%,
    calc(100% - 1rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}
.motion-ok .field [aria-invalid="true"] { animation: shake 0.4s var(--ease); }

@keyframes shake {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-6px); }
  50%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
}

.field-hint {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.field-error {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--error);
}

.contact-form .btn { margin-top: 2rem; }

.form-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.form-status {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-weight: 500;
  color: var(--ink);
}
.form-status:empty { display: none; }
.motion-ok .form-status:not(:empty) { animation: fade-up 0.5s var(--ease) both; }

@media (min-width: 56rem) {
  .contact-band { aspect-ratio: 21 / 9; }
  .contact-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
    margin-top: -9rem;
  }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 1rem 2.5rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Pas de filet en haut : le trait de pinceau, juste au-dessus, fait la
   séparation. Le logo et son texte à gauche, les liens en ligne à
   droite, puis une bande fine pour les mentions. */
.footer-inner {
  display: grid;
  grid-template-areas:
    "brand"
    "nav"
    "legal";
  gap: 2.5rem;
  padding-top: 3rem;
}
.footer-brand { grid-area: brand; }
.footer-nav { grid-area: nav; }
.footer-legal { grid-area: legal; }

.footer-brand p:not(.logo) {
  max-width: 24rem;
  margin-top: 0.75rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  /* Le trait se dessine de gauche à droite, comme dans le menu du haut */
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.2rem) / 0% 1px no-repeat;
  transition: background-size 0.45s var(--ease-io), color 0.3s ease;
}
.footer-nav a:hover { background-size: 100% 1px; }
.footer-nav li { transition: translate 0.45s var(--ease); }
.footer-nav li:hover { translate: 0 -0.15rem; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

/* Crédits : qui a dessiné le site, qui l'a codé */
.credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
}
.credits abbr {
  margin-right: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.credit-sep { color: var(--line); }
.credits a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.45s var(--ease-io);
}
.credits a:hover { background-size: 100% 1px; }

@media (min-width: 50rem) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand nav"
      "legal legal";
    column-gap: 4rem;
    row-gap: 3.5rem;
  }
  .footer-nav { align-self: center; }
  .footer-nav ul { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Bouton pour remonter en haut de page
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  isolation: isolate;
  border: 1.5px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease),
    color 0.3s ease,
    visibility 0s linear 0.5s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease),
    color 0.3s ease,
    visibility 0s;
}
.back-to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease-io);
}
.back-to-top:hover,
.back-to-top:focus-visible { color: var(--ground); }
.back-to-top:hover::before,
.back-to-top:focus-visible::before { transform: scaleY(1); }
.back-to-top svg { width: 1.3rem; height: 1.3rem; }
.motion-ok .back-to-top:hover svg { animation: arrow-loop 0.6s var(--ease-io); }

/* Écran étroit : le menu reste visible et le logo ramène en haut ;
   le bouton flottant recouvrirait les « + » de la FAQ */
@media (max-width: 49.99rem) {
  .back-to-top { display: none; }
}

@keyframes arrow-loop {
  0%   { transform: none; }
  45%  { transform: translateY(-160%); }
  46%  { transform: translateY(160%); }
  100% { transform: none; }
}

/* --------------------------------------------------------------------------
   Réduction de mouvement : tout s'affiche immédiatement, rien ne bouge
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Fait avec Claude — 1er octobre 2026, David : « de façon systématique,
   un petit logo de Claude avec son lien vers Anthropic », sur chaque
   page. Le dessin est celui de Simple Icons (CC0), dans l'orange de la
   marque ; le texte prend la couleur des liens voisins. */
.avec-claude { display: inline-flex; align-items: baseline; gap: .45em; text-decoration: none; white-space: nowrap; }
.avec-claude svg { width: 1.1em; height: 1.1em; flex: none; align-self: center;   /* le texte sur la ligne de base des voisins, le logo centré dessus */ fill: #D97757; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.avec-claude:hover svg, .avec-claude:focus-visible svg { transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) { .avec-claude svg { transition: none; } .avec-claude:hover svg, .avec-claude:focus-visible svg { transform: none; } }