@charset "UTF-8";

/* ==========================================================================
   Casaïa — feuille de style
   Julie Belin · architecte d'intérieur & coach immobilier · Montpellier

   Polices auto-hébergées : rien n'est demandé à Google au chargement,
   aucune donnée visiteur ne quitte le site (RGPD).
   ========================================================================== */

/* --- Fraunces : les titres ------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Manrope : le texte et l'interface ------------------------------------ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Allura : la signature de Julie, et rien d'autre ---------------------- */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/allura-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/allura-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1. Jetons
   ========================================================================== */

:root {
  /* Les couleurs de la marque, élargies vers le sombre : le site d'origine
     empilait trois crèmes séparés de 5 %, sans jamais d'ancrage foncé. */
  --espresso:   #241812;
  --cacao:      #3A241A;
  --brique:     #8A3F1B;   /* accent lisible en petit corps sur fond clair */
  --terracotta: #C0612C;   /* la couleur de marque, inchangée */
  --abricot:    #E09B5F;   /* accent sur fond sombre */
  --argile:     #C9A88A;   /* filets, bordures, états discrets */
  --sable:      #EFE1CE;
  --lin:        #F6EADB;
  --papier:     #FBF6EE;

  --encre:      var(--cacao);
  --encre-douce: #6B5344;

  --serif:  'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:   'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Allura', 'Snell Roundhand', cursive;

  /* Fraunces est variable : on règle l'axe optique et les terminaisons
     douces plutôt que d'empiler des graisses statiques. */
  --fraunces-doux: 'SOFT' 40, 'WONK' 1;

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 78px;
  --page:     1240px;
  --gouttiere: clamp(20px, 5vw, 64px);

  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;

  --ombre-douce: 0 1px 2px rgba(36, 24, 18, .04), 0 8px 24px rgba(36, 24, 18, .06);
  --ombre-forte: 0 2px 6px rgba(36, 24, 18, .08), 0 24px 60px rgba(36, 24, 18, .14);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .22vw, 1.0625rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::selection { background: var(--terracotta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================================
   2. Typographie
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-doux);
  font-weight: 500;
  color: var(--espresso);
  margin: 0;
  text-wrap: balance;
}

/* Le titre du hero : c'est là que passe toute la voix de la marque. */
.display {
  font-size: clamp(2.75rem, 1.2rem + 6.6vw, 7rem);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 600;
}

.titre-section {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}

.titre-bloc {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Longueur de ligne : on reste sous 75 caractères. */
.mesure    { max-width: 62ch; }
.mesure-l  { max-width: 72ch; }
.mesure-s  { max-width: 46ch; }

.chapo {
  font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  line-height: 1.6;
  color: var(--encre-douce);
}

.signature {
  font-family: var(--script);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--terracotta);
  margin-top: .5rem;
}

a { color: inherit; }

.lien-texte {
  color: var(--brique);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s var(--ease), color .3s var(--ease);
}
.lien-texte:hover { color: var(--terracotta); background-size: 100% 2px; }


/* ==========================================================================
   3. Trame et sections
   ========================================================================== */

.enveloppe {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(72px, 11vw, 148px); }
.section--serree { padding-block: clamp(56px, 8vw, 104px); }

/* Le bandeau est fixe : sans hero pour l'absorber, il faut lui faire sa place. */
.sans-hero { padding-top: var(--header-h); }

.section--sable { background: var(--sable); }
.section--lin   { background: var(--lin); }

.section--sombre {
  background: var(--espresso);
  color: rgba(251, 246, 238, .8);
}
.section--sombre h1,
.section--sombre h2,
.section--sombre h3 { color: var(--papier); }

/* Un grain très léger réchauffe les aplats et casse les dégradés en bandes. */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }

/* En-tête de section : un titre, éventuellement un chapô. Pas de sur-titre
   en capitales — le titre se suffit à lui-même. */
.entete { margin-bottom: clamp(40px, 5vw, 72px); }
.entete .chapo { margin-top: 1.1rem; }
.entete--centre { text-align: center; }
.entete--centre .chapo { margin-inline: auto; }


/* ==========================================================================
   4. Boutons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  padding: 1.05em 1.9em;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease-out),
              box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--plein {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 2px 10px rgba(138, 63, 27, .22);
}
.btn--plein:hover {
  background: var(--brique);
  box-shadow: 0 8px 24px rgba(138, 63, 27, .3);
}

.btn--contour {
  background: transparent;
  color: var(--espresso);
  border-color: rgba(58, 36, 26, .28);
}
.btn--contour:hover {
  border-color: var(--espresso);
  background: rgba(58, 36, 26, .05);
}

/* Sur photo ou fond sombre. */
.btn--verre {
  background: rgba(251, 246, 238, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--verre:hover {
  background: rgba(251, 246, 238, .22);
  border-color: #fff;
}

.btn--clair {
  background: var(--papier);
  color: var(--espresso);
}
.btn--clair:hover { background: #fff; }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}


/* ==========================================================================
   5. Bandeau
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Au repos sur le hero, le bandeau est transparent et le texte blanc ;
   dès qu'on défile, il devient opaque et l'encre reprend sa place. */
/* Tant que le bandeau est transparent, les liens se posent directement sur la
   photo — et certaines, comme le croquis de la page Architecture, sont presque
   blanches juste sous le menu. Le dégradé déborde donc sous le bandeau pour
   s'éteindre en douceur, au lieu de se couper net à sa hauteur. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -46px 0;
  background: linear-gradient(to bottom,
    rgba(36, 24, 18, .78) 0%,
    rgba(36, 24, 18, .58) 42%,
    rgba(36, 24, 18, .22) 74%,
    rgba(36, 24, 18, 0) 100%);
  opacity: 1;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

/* Ceinture et bretelles : une ombre portée discrète tient les liens même si
   une photo très claire passe malgré tout sous le dégradé. */
.site-header:not(.est-fixe) .nav-lien,
.site-header:not(.est-fixe) .burger {
  text-shadow: 0 1px 6px rgba(36, 24, 18, .7);
}
.site-header.est-fixe::before { opacity: 0; }
.site-header.est-fixe {
  background: rgba(251, 246, 238, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(58, 36, 26, .1);
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo-lien { display: inline-flex; align-items: center; text-decoration: none; }
.logo {
  height: 52px;
  width: auto;
  transition: filter .35s var(--ease);
  /* Le logo est sombre : sur le hero on le passe en blanc, avec une ombre
     légère pour qu'il tienne aussi sur les zones claires de la photo. */
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(36, 24, 18, .55));
}
.site-header.est-fixe .logo { filter: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.nav-lien {
  position: relative;
  font-size: .975rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding-block: 6px;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.site-header.est-fixe .nav-lien { color: var(--encre); }

.nav-lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav-lien:hover::after,
.nav-lien[aria-current="page"]::after { transform: scaleX(1); }

/* La page courante se signale par son soulignement coloré, pas par un texte
   teinté : l'abricot sur photo et le terracotta sur crème tombaient tous deux
   sous le seuil de contraste à cette taille de corps. Le libellé garde donc
   la couleur pleine, et seul le filet porte l'accent. */
.nav-lien[aria-current="page"]::after {
  height: 2px;
  background: var(--abricot);
}
.site-header.est-fixe .nav-lien[aria-current="page"] { color: var(--brique); }
.site-header.est-fixe .nav-lien[aria-current="page"]::after { background: var(--terracotta); }

.nav-contact { padding: .78em 1.5em; font-size: .95rem; }

/* Menu mobile */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: #fff;
}
.site-header.est-fixe .burger { color: var(--encre); }
.burger span {
  display: block;
  position: relative;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: background-color .2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease-out);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  background: var(--papier);
  border-bottom: 1px solid rgba(58, 36, 26, .1);
  padding: 8px var(--gouttiere) 26px;
  display: none;
  flex-direction: column;
  box-shadow: var(--ombre-forte);
}
.menu-mobile.est-ouvert { display: flex; }
.menu-mobile a {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-doux);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(58, 36, 26, .08);
}
.menu-mobile a:last-of-type { border-bottom: 0; }
.menu-mobile .btn { margin-top: 18px; }


/* ==========================================================================
   6. Le hero — comparateur avant/après plein cadre
   ========================================================================== */

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--espresso);
}

.hero .compare { position: absolute; inset: 0; border-radius: 0; }
.hero .compare img { height: 100%; }

/* --- Hero d'accueil : les deux états sont inversés -----------------------
   La photo occupe toute la page — c'est ce qui donne son impact au site.
   Mais deux écueils viennent avec ce parti pris, et ils se règlent par le
   même geste : inverser les côtés.

   1. Un titre calé à gauche entre en collision avec le trait du curseur dès
      que celui-ci passe à gauche ou au centre.
   2. Ouvrir le site sur un demi-écran d'appartement en chantier dessert un
      métier qui vend la beauté des intérieurs.

   L'« après » est donc le volet coulissant, ancré à gauche, et il couvre
   l'essentiel du cadre : le séjour terminé s'étend sous le titre, l'« avant »
   n'est qu'une bande d'appel à droite, et le curseur se retrouve loin du
   texte. Les étiquettes disent explicitement quel côté est lequel. */
.hero--plein .compare-poignee { top: 34%; }

/* Le trait s'arrête au-dessus du texte. La jonction des deux photos reste
   visible d'elle-même sur toute la hauteur : seul le filet blanc est
   raccourci, et il ne traverse plus aucune lettre, à aucune largeur. */
.hero--plein .compare-trait {
  bottom: auto;
  height: 62%;
}

/* Voile dégradé : le titre doit rester lisible quelle que soit la photo,
   y compris sur la moitié « avant » qui est souvent la plus claire. */
.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(36, 24, 18, .93) 0%,
      rgba(36, 24, 18, .80) 22%,
      rgba(36, 24, 18, .52) 42%,
      rgba(36, 24, 18, .20) 60%,
      rgba(36, 24, 18, 0) 80%),
    linear-gradient(to right,
      rgba(36, 24, 18, .58) 0%,
      rgba(36, 24, 18, .14) 46%,
      rgba(36, 24, 18, 0) 66%);
}

/* Le trait et la poignée doivent passer AU-DESSUS du voile, sinon la
   commande la plus importante de la page se retrouve délavée. La poignée
   remonte dans le tiers haut pour dégager le titre, ancré en bas. */
.hero .compare-trait { z-index: 5; }
.hero .compare-etiq  { z-index: 5; }
.hero .compare-poignee {
  z-index: 7;
  top: 38%;
  width: 66px;
  height: 66px;
  background: var(--papier);
  box-shadow: 0 6px 26px rgba(36, 24, 18, .45), 0 0 0 1px rgba(255, 255, 255, .3);
}
.hero .compare-poignee svg { width: 26px; height: 26px; }

.hero-contenu {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  padding-bottom: clamp(38px, 6vw, 76px);
  pointer-events: none;   /* on peut faire glisser à travers le titre */
}
.hero-contenu .enveloppe { pointer-events: none; }
.hero-contenu .btn,
.hero-contenu a { pointer-events: auto; }

.hero .display { color: #fff; max-width: 15ch; }

.hero-chapo {
  margin-top: 1.4rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  line-height: 1.55;
}

.hero-actions { margin-top: clamp(26px, 3.5vw, 40px); }

/* Repère de défilement */
.hero-defile {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(38px, 6vw, 76px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  writing-mode: vertical-rl;
}
.hero-defile::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0));
}


/* Hero des pages intérieures : plus court, une seule photo, le titre en bas. */
.hero--page { height: 64svh; min-height: 420px; max-height: 660px; }

.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero--page .display { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.25rem); max-width: 18ch; }
.hero--page .hero-contenu { padding-bottom: clamp(34px, 5vw, 62px); }


/* ==========================================================================
   7. Le comparateur avant/après
   ========================================================================== */

.compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--sable);
  touch-action: pan-y;          /* le glissement horizontal nous appartient */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.compare img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare-volet {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* clip-path posé par le script */
}
.compare-volet img { height: 100%; }

.compare-trait {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(36, 24, 18, .18), 0 0 24px rgba(36, 24, 18, .3);
  pointer-events: none;
}

.compare-poignee {
  position: absolute;
  /* Au-dessus du volet (2) et du trait (3). Sans z-index explicite, le volet
     passait devant : découpé au niveau du curseur, il amputait le bouton de
     sa moitié gauche, ne laissant qu'un demi-cercle et une seule flèche. */
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(251, 246, 238, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--terracotta);
  cursor: ew-resize;
  pointer-events: auto;
  box-shadow: 0 4px 18px rgba(36, 24, 18, .3);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.compare:hover .compare-poignee { box-shadow: 0 6px 26px rgba(36, 24, 18, .38); }
.compare-poignee:active { transform: translate(-50%, -50%) scale(.94); }
.compare-poignee svg { width: 22px; height: 22px; }

/* Au premier affichage, la poignée fait un aller-retour : elle montre
   qu'on peut l'attraper, sans qu'on ait à l'écrire. */
@keyframes invite {
  0%, 100% { transform: translate(-50%, -50%); }
  35%      { transform: translate(calc(-50% - 16px), -50%); }
  70%      { transform: translate(calc(-50% + 12px), -50%); }
}
.compare.invite .compare-poignee { animation: invite 2s var(--ease) .35s 1; }

.compare-etiq {
  position: absolute;
  top: 18px;
  z-index: 3;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(36, 24, 18, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
}
/* Position et accent sont séparés : sur l'accueil les deux états sont
   inversés, c'est donc l'étiquette de gauche qui porte l'accent. */
.compare-etiq--gauche { left: 18px; }
.compare-etiq--droite { right: 18px; }
.compare-etiq--accent { background: rgba(192, 97, 44, .78); }

.hero .compare-etiq { top: calc(var(--header-h) + 18px); }

/* Légende sous un comparateur : le titre, puis la nature du chantier. */
.compare-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 18px;
}
.compare-legende h3 { font-size: 1.5rem; letter-spacing: -.015em; }
.compare-legende span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--brique);
}


/* ==========================================================================
   8. Les trois accompagnements — bandes, pas cartes
   ========================================================================== */

.bandes {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
}

.bande {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
.bande:nth-child(even) .bande-visuel { order: 2; }

.bande-visuel {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sable);
}
.bande-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.bande:hover .bande-visuel img { transform: scale(1.04); }

.bande-texte h3 { margin-bottom: .7rem; }
.bande-texte p  { color: var(--encre-douce); max-width: 44ch; }
.bande-texte .lien-texte { display: inline-block; margin-top: 1.4rem; }

/* Un filet de couleur signe chaque métier sans avoir à le numéroter. */
.bande-marque {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--terracotta);
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   9. Preuve chiffrée (section sombre)
   ========================================================================== */

.preuve-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(38px, 4vw, 56px);
  border-top: 1px solid rgba(251, 246, 238, .16);
}

.preuve-item dt {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-doux);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--abricot);
  margin-bottom: .6rem;
}
.preuve-item dd {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(251, 246, 238, .72);
  max-width: 30ch;
}


/* ==========================================================================
   10. Le récit de Julie
   ========================================================================== */

.recit {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: stretch;
}

/* Le portrait accompagne la lecture au lieu de laisser un grand vide
   sous lui : la colonne s'étire, l'image reste collée en haut. */
.recit-media { position: relative; }

.portrait {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ombre-forte);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.recit-texte p { color: var(--encre-douce); }
/* Plus spécifique que `.recit-texte p`, sinon la signature hérite du brun. */
.recit-texte .signature { color: var(--terracotta); }
.recit-texte .titre-section { margin-bottom: 1.6rem; }

.recit-accroche {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-doux);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem);
  line-height: 1.4;
  color: var(--espresso);
  margin-bottom: 1.6rem;
}


/* ==========================================================================
   11. Galerie des réalisations
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
.galerie figure { margin: 0; }

/* Les photos d'origine ont des proportions très différentes (423 px de haut
   pour l'une, 745 px pour l'autre). On les ramène à un format commun, sinon
   la grille part en escalier. */
.galerie .compare { aspect-ratio: 4 / 3; }
.galerie .compare img { height: 100%; }

/* Un projet peut occuper toute la largeur : le rythme de la page alterne
   entre pleine page et paires, au lieu d'un catalogue uniforme. */
.galerie-item--pleine { grid-column: 1 / -1; }
.galerie-item--pleine .compare { aspect-ratio: 3 / 2; }
.galerie-item--pleine .compare-legende h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }


/* ==========================================================================
   12. Étapes de la méthode (vraie séquence : la numérotation se justifie)
   ========================================================================== */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.etape {
  counter-increment: etape;
  position: relative;
  padding: 26px 0 26px 74px;
  border-bottom: 1px solid rgba(58, 36, 26, .12);
}
.etape:last-child { border-bottom: 0; }

.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-doux);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--terracotta);
  width: 46px;
  padding-top: 2px;
}
/* Le trait vertical relie les étapes : c'est un parcours, pas une liste. */
.etape::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 56px;
  bottom: -4px;
  width: 1px;
  background: rgba(192, 97, 44, .3);
}
.etape:last-child::after { display: none; }

.etape h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.etape p  { color: var(--encre-douce); font-size: .98rem; max-width: 60ch; }


/* ==========================================================================
   12 bis. Listes de prestations
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.offre {
  background: var(--papier);
  border: 1px solid rgba(58, 36, 26, .1);
  border-radius: var(--r-l);
  padding: clamp(28px, 3.4vw, 44px);
}
/* La seconde offre s'ancre visuellement pour qu'on ne lise pas deux blocs
   interchangeables mais bien deux parcours distincts. */
.offre--accent { background: var(--lin); border-color: rgba(192, 97, 44, .22); }
.offre h3 { margin-bottom: .5rem; }
.offre > p { color: var(--encre-douce); margin-bottom: 1.6rem; }

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

.liste-check li {
  position: relative;
  padding: 0 0 15px 30px;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--encre-douce);
}
.liste-check li:last-child { padding-bottom: 0; }
.liste-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(-45deg);
}
.liste-check strong { color: var(--espresso); font-weight: 600; }

/* Trois arguments de vente, posés côte à côte sans devenir des cartes. */
.arguments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 60px);
}
.argument { border-top: 2px solid var(--terracotta); padding-top: 22px; }
.argument h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.argument p { color: var(--encre-douce); font-size: .98rem; }


/* ==========================================================================
   13. Bloc d'appel final
   ========================================================================== */

.appel {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--espresso);
  color: rgba(251, 246, 238, .82);
  padding: clamp(44px, 6vw, 92px);
  text-align: center;
}
.appel h2 { color: var(--papier); margin-bottom: 1.1rem; }
.appel .chapo { color: rgba(251, 246, 238, .78); margin-inline: auto; }
.appel .groupe-btn { justify-content: center; margin-top: clamp(28px, 3.5vw, 42px); }

.appel-direct {
  margin-top: 30px;
  font-size: .95rem;
  color: rgba(251, 246, 238, .62);
}
.appel-direct a {
  color: var(--abricot);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(224, 155, 95, .4);
}
.appel-direct a:hover { border-bottom-color: var(--abricot); }


/* ==========================================================================
   14. Pied de page
   ========================================================================== */

.site-footer {
  background: var(--espresso);
  color: rgba(251, 246, 238, .62);
  padding-block: clamp(56px, 6vw, 88px) 34px;
  font-size: .92rem;
}

.footer-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251, 246, 238, .14);
}

.footer-marque .logo {
  height: 60px;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 16px;
}
.footer-marque p { max-width: 34ch; margin: 0; }

.footer-titre {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(251, 246, 238, .45);
  margin: 0 0 16px;
}

.footer-liste { list-style: none; margin: 0; padding: 0; }
.footer-liste li { margin-bottom: 10px; }
.footer-liste a {
  color: rgba(251, 246, 238, .82);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer-liste a:hover { color: var(--abricot); }

.footer-bas {
  padding-top: 26px;
  font-size: .8rem;
  line-height: 1.75;
  color: rgba(251, 246, 238, .42);
}
.footer-bas strong { color: rgba(251, 246, 238, .6); font-weight: 600; }


/* ==========================================================================
   15. Formulaire de contact
   ========================================================================== */

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.champ { margin-bottom: 22px; }

.champ label,
.groupe-legende {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--espresso);
  margin-bottom: 9px;
}

.champ input,
.champ textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid rgba(58, 36, 26, .18);
  border-radius: var(--r-s);
  padding: 14px 16px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.champ input::placeholder,
.champ textarea::placeholder { color: rgba(107, 83, 68, .55); }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(192, 97, 44, .16);
}

fieldset { border: 0; margin: 0 0 26px; padding: 0; }
legend { padding: 0; }

.pilules { display: flex; flex-wrap: wrap; gap: 10px; }

.pilule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .95rem;
  font-weight: 500;
  background: var(--papier);
  border: 1px solid rgba(58, 36, 26, .18);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease);
}
.pilule input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pilule::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(58, 36, 26, .3);
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease);
  flex: none;
}
.pilule:hover { border-color: rgba(58, 36, 26, .4); }
.pilule.est-cochee {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.pilule.est-cochee::before {
  background: #fff;
  border-color: #fff;
  box-shadow: inset 0 0 0 3.5px var(--terracotta);
}
.pilule:has(input:focus-visible) {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.carte-contact {
  background: var(--espresso);
  color: rgba(251, 246, 238, .8);
  border-radius: var(--r-l);
  padding: clamp(28px, 3.4vw, 42px);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.carte-contact h2 { color: var(--papier); font-size: 1.7rem; margin-bottom: 26px; }
.carte-contact dl { margin: 0; }
.carte-contact dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--abricot);
  margin-bottom: 5px;
}
.carte-contact dd {
  margin: 0 0 22px;
  font-size: 1.08rem;
  color: var(--papier);
}
.carte-contact dd a { color: inherit; text-decoration: none; }
.carte-contact dd a:hover { color: var(--abricot); }
.carte-contact .note {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 246, 238, .16);
  font-size: .92rem;
  color: rgba(251, 246, 238, .66);
}

.form-erreur {
  background: rgba(192, 97, 44, .1);
  border: 1px solid rgba(192, 97, 44, .35);
  color: var(--brique);
  border-radius: var(--r-s);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: .95rem;
  font-weight: 500;
}

.merci {
  background: var(--lin);
  border: 1px solid rgba(192, 97, 44, .25);
  border-radius: var(--r-m);
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
}
.merci h2 { margin-bottom: .8rem; }
.merci p { color: var(--encre-douce); margin-inline: auto; max-width: 44ch; }


/* ==========================================================================
   16. Barre d'action mobile — le contact toujours à portée de pouce
   ========================================================================== */

.barre-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 246, 238, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(58, 36, 26, .12);
  transform: translateY(110%);
  transition: transform .4s var(--ease-out);
}
.barre-mobile.est-visible { transform: translateY(0); }
.barre-mobile .btn { flex: 1; padding: .95em 1em; font-size: .95rem; }


/* ==========================================================================
   17. Apparition au défilement
   ========================================================================== */

/* Volontairement discrète et réservée aux blocs de contenu : le mouvement
   ne doit pas devenir un tic de page. */
[data-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-anim].vu { opacity: 1; transform: none; }

/* Le hero s'ouvre en une seule séquence orchestrée. */
.hero [data-anim] { transform: translateY(26px); }
.hero [data-anim].vu { transform: none; }


/* ==========================================================================
   18. Adaptations
   ========================================================================== */

@media (max-width: 1000px) {
  .recit { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; aspect-ratio: 4/5; }
  .contact-grille { grid-template-columns: 1fr; }
  .carte-contact { position: static; }
  .footer-haut { grid-template-columns: 1fr 1fr; }
  .footer-marque { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .site-nav { display: none; }
  .burger { display: flex; }
  .logo { height: 44px; }

  .bande,
  .bande:nth-child(even) .bande-visuel { grid-template-columns: 1fr; order: 0; }
  .bande-visuel { aspect-ratio: 16 / 10; }

  .preuve-grille { grid-template-columns: 1fr; gap: 30px; }
  .preuve-item dd { max-width: none; }

  .duo { grid-template-columns: 1fr; }
  .arguments { grid-template-columns: 1fr; gap: 26px; }

  .galerie { grid-template-columns: 1fr; }

  .hero { height: 88svh; min-height: 540px; }
  .hero .display { max-width: 100%; }
  .hero-defile { display: none; }

  /* Sur mobile le texte occupe presque toute la largeur : le filet doit
     remonter davantage pour rester au-dessus de lui. */
  .hero--plein .compare-trait { height: 46%; }
  .hero--plein .compare-poignee { top: 26%; }

  .barre-mobile { display: flex; }
  body { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .footer-haut { grid-template-columns: 1fr; }
  .compare-poignee { width: 50px; height: 50px; }
  .compare-etiq { font-size: .64rem; padding: 6px 11px; top: 12px; }
  .compare-etiq--gauche { left: 12px; }
  .compare-etiq--droite { right: 12px; }
  .groupe-btn .btn { width: 100%; }
  .appel { padding-inline: 22px; }
}

/* Respect des préférences système : on coupe tout mouvement non essentiel. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
  .bande:hover .bande-visuel img { transform: none; }
}

@media print {
  .site-header, .barre-mobile, .hero-defile, .menu-mobile { display: none !important; }
  body { background: #fff; color: #000; }
}