/* --------------------------------------------------------------------------
   Polices hebergees sur ce serveur.
   Chargees depuis Google Fonts, elles transmettaient l'adresse IP de chaque
   visiteur a Google sans son accord — ce que la CNIL sanctionne. Les fichiers
   sont desormais dans assets/fonts/ : aucun appel exterieur, et une requete
   reseau en moins au chargement.
   Pour mettre a jour une graisse : telecharger le .woff2 correspondant et
   remplacer le fichier, les declarations ci-dessous n'ont pas a changer.
   -------------------------------------------------------------------------- */
/* Cormorant Garamond 500 — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond 500 — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-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;
}
/* Cormorant Garamond 600 — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond 600 — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-600-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;
}
/* Jost 400 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jost-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 400 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jost-400-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;
}
/* Jost 500 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jost-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 500 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jost-500-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;
}
/* Jost 600 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jost-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 600 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jost-600-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;
}
/* Jost 700 — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/jost-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 700 — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/jost-700-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;
}

/* ==========================================================================
   VALLIA — Sites web & automatisation pour artisans et PME
   ========================================================================== */

:root{
  --ink:#2A0E14;
  --ink-2:#3A141D;
  --ink-3:#4A1A25;
  --body:#5C4A4D;
  --title:#2A0E14;
  --line:#E4DCCB;
  --bg:#FFFFFF;
  --bg-alt:#F4ECDD;

  --bordeaux:#5A1A26;
  --bordeaux-d:#43131C;
  --bordeaux-l:#7E2B3A;
  --brass:#B98B4E;
  --brass-l:#D9B478;
  --brass-d:#8A6534;
  --ivoire:#F4ECDD;

  --grad:linear-gradient(135deg,#7E2B3A 0%,#5A1A26 55%,#43131C 100%);
  --grad-soft:linear-gradient(120deg,rgba(90,26,38,.10),rgba(126,43,58,.07));

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;

  --shadow-sm:0 2px 8px rgba(42,14,20,.06);
  --shadow:0 12px 32px -12px rgba(42,14,20,.16);
  --shadow-lg:0 32px 64px -24px rgba(42,14,20,.28);
  --shadow-brand:0 18px 40px -16px rgba(90,26,38,.45);

  --container:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;overflow-x:clip}

body{
  margin:0;
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

h1,h2,h3{
  color:var(--title);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:700;
}
h1,h2{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.08;
}
h1{font-size:clamp(2.7rem,4.8vw,4.2rem)}
h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
h3{font-family:"Jost",sans-serif;font-size:1.18rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
img{max-width:100%;height:auto;display:block}
/* <picture> ne doit pas s'intercaler dans la mise en page : plusieurs regles
   plus bas donnent une hauteur a l'image via son conteneur direct. */
picture{display:contents}
a{color:var(--bordeaux);text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}

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

/* les photos d'illustration tirent vers le bleu : on les réchauffe vers la palette */
.card__media img,.work img,.mockup img,.about__media img,.method__media img{
  filter:saturate(.62) sepia(.22);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--bordeaux);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

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

.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* sur fond sombre le dégradé bordeaux disparaîtrait : on bascule sur le laiton */
.hero .grad,.contact .grad,.footer .grad{
  background:linear-gradient(115deg,#D9B478 0%,#E9D2A6 55%,var(--ivoire) 110%);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--bordeaux);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:"Jost",sans-serif;font-weight:600;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:100px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand);background-size:160% 160%}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -16px rgba(90,26,38,.7);background-position:100% 0}
/* sur fond bordeaux sombre le CTA bordeaux se fondrait dans le décor */
.hero .btn--primary,.contact .btn--primary,.price--featured .btn--primary{
  background:linear-gradient(135deg,var(--brass-l) 0%,var(--brass) 100%);
  color:var(--ink);box-shadow:0 16px 36px -14px rgba(185,139,78,.7);
}
.hero .btn--primary:hover,.contact .btn--primary:hover,.price--featured .btn--primary:hover{
  box-shadow:0 22px 48px -14px rgba(185,139,78,.9);
}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn--outline{background:#fff;color:var(--title);border-color:var(--line)}
.btn--outline:hover{border-color:var(--bordeaux);color:var(--bordeaux);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1.04rem}
.btn--sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn--block{display:flex;width:100%}

.link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;color:var(--bordeaux);
  font-family:"Jost",sans-serif;
}
.link span{transition:transform .25s var(--ease)}
.link:hover span{transform:translateX(5px)}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:1.1rem 0;
  transition:padding .3s var(--ease),background .3s,box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  padding:.6rem 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px -12px rgba(42,14,20,.2);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.logo{display:inline-flex;align-items:center;gap:.8rem;color:var(--ivoire)}
.logo__mark{width:42px;height:42px;flex:none;display:block;transition:color .3s}
.logo__text{display:flex;flex-direction:column;gap:.3rem;line-height:1}
.logo__name{
  font-family:"Jost",sans-serif;font-weight:400;font-size:1.1rem;
  letter-spacing:.32em;text-transform:uppercase;
}
.logo__tag{font-size:.59rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
.header.is-stuck .logo{color:var(--bordeaux)}

.nav{display:flex;align-items:center;gap:.4rem}
.nav>a{
  padding:.55rem .9rem;border-radius:100px;
  font-size:.95rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:color .2s,background .2s;
}
.nav>a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav>a.is-active{color:#fff;background:rgba(255,255,255,.14)}
.header.is-stuck .nav>a{color:var(--body)}
.header.is-stuck .nav>a:hover,.header.is-stuck .nav>a.is-active{color:var(--bordeaux);background:rgba(90,26,38,.09)}
.nav__cta{margin-left:.6rem;color:#fff!important;background:none!important}
.header.is-stuck .nav__cta{color:#fff!important;background:var(--grad)!important;box-shadow:var(--shadow-brand)}

.burger{
  display:none;width:44px;height:44px;border:0;border-radius:12px;
  background:rgba(255,255,255,.1);cursor:pointer;
  padding:0;place-items:center;align-content:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.header.is-stuck .burger{background:var(--bg-alt)}
.header.is-stuck .burger span{background:var(--title)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,5rem);
  color:rgba(255,255,255,.76);
  overflow:hidden;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.hero h1{color:#fff}
.hero__glow{
  position:absolute;inset:-25% -10% auto;height:130%;
  background:
    radial-gradient(48% 42% at 18% 12%,rgba(126,43,58,.85),transparent 65%),
    radial-gradient(42% 40% at 82% 18%,rgba(90,26,38,.9),transparent 65%),
    radial-gradient(40% 38% at 62% 88%,rgba(185,139,78,.18),transparent 65%);
  filter:blur(20px);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.08)}}
.hero__grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 35%,#000,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%,#000,transparent 100%);
}
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem 1rem .45rem .7rem;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-size:.86rem;font-weight:500;color:#fff;
  margin-bottom:1.6rem;
}
.badge__dot{
  width:8px;height:8px;border-radius:50%;background:var(--brass);
  box-shadow:0 0 0 0 rgba(185,139,78,.7);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(185,139,78,0)}100%{box-shadow:0 0 0 0 rgba(185,139,78,0)}}

.hero__sub{font-size:1.14rem;max-width:36rem;margin-bottom:2.2rem;color:rgba(255,255,255,.72)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.2rem}

.hero__points{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.92rem;color:rgba(255,255,255,.62)}
.hero__points li{display:flex;align-items:center;gap:.45rem}
.hero__points svg{width:16px;height:16px;fill:none;stroke:var(--brass);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Mockup */
.hero__visual{position:relative}
.mockup{
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 48px 90px -30px rgba(0,0,0,.75);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition:transform .7s var(--ease);
}
.mockup:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px)}
.mockup__bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.7rem .9rem;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dot{width:11px;height:11px;border-radius:50%}
.dot--r{background:#FF5F57}.dot--y{background:#FEBC2E}.dot--g{background:#28C840}
.mockup__url{
  margin-left:.7rem;padding:.2rem .85rem;border-radius:100px;
  background:rgba(255,255,255,.08);
  font-size:.74rem;color:rgba(255,255,255,.55);
}
.mockup img{width:100%;aspect-ratio:16/10;object-fit:cover}

.float-card{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1.1rem;border-radius:var(--r);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.6);
  animation:floaty 5.5s ease-in-out infinite;
}
.float-card strong{display:block;font-family:"Jost",sans-serif;font-size:1.05rem;color:var(--title);line-height:1.2}
.float-card span{font-size:.78rem;color:var(--body)}
.float-card__icon{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center}
.float-card__icon svg{width:19px;height:19px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.float-card__icon--brass{background:rgba(185,139,78,.14)}
.float-card__icon--brass svg{stroke:var(--brass-d)}
.float-card__icon--bordeaux{background:rgba(90,26,38,.14)}
.float-card__icon--bordeaux svg{stroke:var(--bordeaux)}
.float-card--1{top:26%;left:-11%}
.float-card--2{bottom:6%;right:-7%;animation-delay:2.2s}
@keyframes floaty{50%{transform:translateY(-13px)}}

/* ---------- Sections ---------- */
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.section--alt{background:var(--bg-alt)}

.section__head{max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.section__head p{font-size:1.1rem}

.eyebrow{
  display:inline-block;margin-bottom:1rem;
  padding:.35rem .9rem;border-radius:100px;
  background:var(--grad-soft);
  color:var(--bordeaux);
  font-family:"Jost",sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow--light{background:rgba(255,255,255,.12);color:#fff}

.lead{font-size:1.1rem}

/* ---------- Cards / Services ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(42,14,20,.55),transparent 55%);
}
.card__body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.card__num{
  font-family:"Jost",sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.14em;color:var(--bordeaux);
}
/* h2 et h3 : ces titres etaient des h3 sur la page unique, sous le h2 de la
   section. Sur la page Services, dont ils sont le contenu principal, ce sont
   des h2. Les deux niveaux doivent donc recevoir la meme apparence — un titre
   reste un titre, c'est sa place dans le plan du document qui change. */
.card h2,.card h3{margin:.5rem 0 .7rem;font-size:1.35rem;font-weight:700}
.card p{font-size:.97rem}
.card .link{margin-top:auto;padding-top:1rem}

.ticks{display:grid;gap:.55rem;margin:0 0 1.2rem;font-size:.94rem}
.ticks li{position:relative;padding-left:1.7rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:16px;height:16px;border-radius:50%;
  background:var(--grad-soft);
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:.72em;
  width:6px;height:3px;border-left:2px solid var(--bordeaux);border-bottom:2px solid var(--bordeaux);
  transform:rotate(-45deg);
}
.ticks--lg{font-size:1rem;gap:.7rem;margin-bottom:1.8rem}

/* ---------- Stats ---------- */
.stats-band{background:var(--ink);padding:clamp(2.5rem,5vw,3.5rem) 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat strong{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;
  color:var(--brass-l);
}
.stat span{display:block;margin-top:.5rem;font-size:.92rem;color:rgba(244,236,221,.7)}

/* ---------- Méthode ---------- */
.method{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.method__left{position:sticky;top:110px}
.method__media{margin-top:2rem;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.method__media img{width:100%;aspect-ratio:3/2;object-fit:cover}

.steps{display:grid;gap:1rem;counter-reset:s}
.step{
  display:flex;gap:1.2rem;
  padding:1.6rem;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.step:hover{transform:translateX(7px);box-shadow:var(--shadow);border-color:transparent}
.step__num{
  flex:none;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--grad);color:#fff;
  font-family:"Jost",sans-serif;font-weight:700;font-size:1.05rem;
  box-shadow:var(--shadow-brand);
}
.step h3{margin-bottom:.35rem;font-size:1.15rem;font-weight:700}
.step p{margin:0;font-size:.96rem}

/* ---------- Réalisations ---------- */
.works{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:clamp(260px,24vw,340px);gap:1.3rem}
.work{
  position:relative;grid-column:span 2;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.work--wide{grid-column:span 3}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover img{transform:scale(1.06)}
.work__overlay{
  position:absolute;inset:auto 0 0;
  padding:1.8rem;
  background:linear-gradient(to top,rgba(42,14,20,.95) 12%,rgba(42,14,20,.72) 55%,transparent);
  color:rgba(255,255,255,.78);
}
.work__tag{
  display:inline-block;margin-bottom:.7rem;
  padding:.28rem .8rem;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  font-size:.75rem;font-weight:600;color:#fff;letter-spacing:.03em;
}
/* h2 sur la page Exemples, h3 quand le bloc vit sous un titre de section.
   Sans le h2, le titre restait en encre foncee sur la vignette sombre. */
.work__overlay h2,.work__overlay h3{color:#fff;font-size:1.25rem;margin-bottom:.35rem}
.work__overlay p{margin:0;font-size:.92rem}
.work__overlay strong{color:var(--brass-l)}

/* ---------- À propos ---------- */
/* Colonne unique le temps que le portrait soit remplace : sans la colonne
   image, le texte seul sur toute la largeur du conteneur devient illisible. */
.about{display:grid;grid-template-columns:minmax(0,46rem);justify-content:center;gap:clamp(2rem,5vw,4.5rem)}
.about__media{position:relative}
.about__media img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
}
.about__media::before{
  content:"";position:absolute;inset:-14px -14px 40px 40px;
  border-radius:var(--r-xl);background:var(--grad);opacity:.16;z-index:-1;
  filter:blur(28px);
}
.about__badge{
  position:absolute;right:-16px;bottom:24px;
  padding:1rem 1.3rem;border-radius:var(--r);
  background:#fff;box-shadow:var(--shadow-lg);
  text-align:center;
}
.about__badge strong{
  display:block;font-family:"Jost",sans-serif;font-size:1.5rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about__badge span{font-size:.78rem;color:var(--body)}

/* ---------- Tarifs ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:start}
.price{
  position:relative;
  padding:2rem 1.8rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.price:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.price h2,.price h3{font-size:1.3rem;font-weight:700;margin-bottom:.4rem}
.price__desc{font-size:.94rem;min-height:3rem}
.price__amount{margin:1.2rem 0 1.6rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.price__from{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--body);margin-bottom:.2rem}
.price__amount strong{font-family:"Jost",sans-serif;font-size:2.3rem;color:var(--title);line-height:1}
.price .ticks{flex:1;margin-bottom:1.8rem}

.price--featured{
  background:var(--ink);border-color:transparent;
  box-shadow:0 34px 70px -28px rgba(90,26,38,.6);
  transform:scale(1.035);
}
.price--featured:hover{transform:scale(1.035) translateY(-6px)}
.price--featured h2,.price--featured h3,.price--featured .price__amount strong{color:#fff}
.price--featured .price__desc,.price--featured .ticks,.price--featured .price__from{color:rgba(255,255,255,.66)}
.price--featured .price__amount{border-bottom-color:rgba(255,255,255,.14)}
.price--featured .ticks li::before{background:rgba(255,255,255,.14)}
.price--featured .ticks li::after{border-color:var(--brass-l)}
.price__ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:.35rem 1rem;border-radius:100px;
  background:linear-gradient(135deg,var(--brass-l) 0%,var(--brass) 100%);color:var(--ink);
  font-family:"Jost",sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.06em;white-space:nowrap;
  box-shadow:var(--shadow-brand);
}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq__head{position:sticky;top:110px}
.accordion{display:grid;gap:.8rem}
.acc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.acc[open]{border-color:rgba(90,26,38,.35);box-shadow:var(--shadow)}
.acc summary{
  list-style:none;cursor:pointer;
  padding:1.25rem 3.4rem 1.25rem 1.4rem;position:relative;
  font-family:"Jost",sans-serif;font-weight:600;font-size:1.03rem;color:var(--title);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:1.4rem;top:50%;
  width:11px;height:11px;
  border-right:2.2px solid var(--bordeaux);border-bottom:2.2px solid var(--bordeaux);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.acc[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc summary:hover{color:var(--bordeaux)}
.acc__body{padding:0 1.4rem 1.4rem}
.acc__body p{margin:0;font-size:.97rem}

/* ---------- Contact ---------- */
.contact{
  position:relative;overflow:hidden;
  background:var(--ink);color:rgba(255,255,255,.72);
  padding:clamp(4rem,8vw,6.5rem) 0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.contact__glow{
  position:absolute;inset:-40% -20% auto;height:150%;
  background:
    radial-gradient(40% 40% at 22% 25%,rgba(126,43,58,.8),transparent 65%),
    radial-gradient(38% 38% at 80% 70%,rgba(90,26,38,.85),transparent 65%);
  filter:blur(18px);
}
.contact__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
/* « h1 » autant que « h2 » : ce bloc etait une section au milieu de la page
   unique, son titre etait donc un h2. Devenu la page Contact a lui seul, il
   porte maintenant un h1 — qui sans cette regle s'afficherait en encre foncee
   sur le fond encre fonce de la section, donc invisible. */
.contact h1,.contact h2{color:#fff}
.contact__copy p{font-size:1.08rem;max-width:32rem}
.contact__list{display:grid;gap:1rem;margin-top:2.2rem}
.contact__list li{display:flex;align-items:center;gap:.9rem;font-size:1rem}
.contact__list svg{
  width:38px;height:38px;flex:none;padding:9px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.contact__list a{color:#fff}
.contact__list a:hover{color:var(--brass-l)}

/* Piege a robots du formulaire. On ne met pas display:none : certains robots
   ignorent les champs caches de cette facon, alors qu'ils remplissent ceux-ci.
   Le champ reste dans la page, simplement hors de l'ecran et hors du parcours
   au clavier, donc invisible pour un visiteur comme pour un lecteur d'ecran. */
.hidden-field{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.form{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.3rem);
  box-shadow:var(--shadow-lg);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* ---------- Zone d'intervention ---------- */
.zone{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(244,236,221,.16)}
.zone__title{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-l);margin:0 0 .6rem;
}
.zone__text{margin:0;font-size:.92rem;line-height:1.7;color:rgba(244,236,221,.72)}
.zone__text strong{color:var(--ivoire);font-weight:500}

/* ---------- Prise de rendez-vous ---------- */
.booking{
  margin:1.8rem 0;padding:1.3rem;border-radius:var(--r);
  background:rgba(244,236,221,.07);border:1px solid rgba(244,236,221,.18);
}
.booking__head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1rem}
.booking__head svg{
  width:26px;height:26px;flex:none;margin-top:.15rem;
  fill:none;stroke:var(--brass-l);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.booking__head strong{display:block;color:var(--ivoire);font-size:1.02rem;line-height:1.3}
.booking__head span{display:block;margin-top:.25rem;font-size:.9rem;color:rgba(244,236,221,.7)}
.booking .btn--outline{
  background:transparent;color:var(--ivoire);border-color:rgba(244,236,221,.4);
}
.booking .btn--outline:hover{background:rgba(244,236,221,.1);border-color:var(--brass-l);color:var(--brass-l)}

.field{margin-bottom:1.1rem;display:flex;flex-direction:column}
.field label{margin-bottom:.45rem;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.8)}
.field input,.field select,.field textarea{
  width:100%;
  padding:.85rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;font:inherit;font-size:.97rem;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.field textarea{resize:vertical;min-height:120px}
.field select option{background:var(--ink-2);color:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--bordeaux);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(90,26,38,.22);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#F3907F;box-shadow:0 0 0 4px rgba(243,144,127,.18);
}
.field__error{margin:.45rem 0 0;font-size:.84rem;color:#F3907F}

/* case de consentement : la grille garde la case alignée sur la 1re ligne */
.field--check{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:start}
.field--check input{width:18px;height:18px;margin-top:.2rem;accent-color:var(--brass);flex:none}
.field--check label{margin:0;font-size:.85rem;font-weight:400;line-height:1.5;color:rgba(255,255,255,.72)}
.field--check label a{color:var(--brass-l);text-decoration:underline}
.field--check .field__error{grid-column:1/-1}
.field--check.has-error input{outline:2px solid #F3907F;outline-offset:2px}

.form__note{margin:1rem 0 0;font-size:.82rem;color:rgba(255,255,255,.6);text-align:center}
.form__success,.form__error{
  margin:1rem 0 0;padding:.9rem 1rem;border-radius:var(--r-sm);
  font-size:.92rem;text-align:center;
}
.form__success{
  background:rgba(185,139,78,.16);border:1px solid rgba(185,139,78,.45);
  color:var(--brass-l);
}
.form__error{
  background:rgba(243,144,127,.12);border:1px solid rgba(243,144,127,.4);
  color:#F7B4A7;
}
.form__error a{color:#fff;text-decoration:underline}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.55);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer__inner{display:grid;grid-template-columns:1.2fr 1.8fr;gap:clamp(2rem,5vw,4rem)}
.footer__brand p{margin-top:1.2rem;font-size:.95rem;max-width:28rem}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer__nav h3{
  color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:1rem;font-weight:600;
}
.footer__nav a{display:block;padding:.3rem 0;color:rgba(255,255,255,.55);font-size:.95rem;transition:color .2s}
.footer__nav a:hover{color:#fff}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.86rem;color:rgba(255,255,255,.55);
}
.footer__bottom p{margin:0}
.footer__bottom a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.footer__bottom a:hover{color:var(--brass-l)}

/* ---------- To top ---------- */
.to-top{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad);box-shadow:var(--shadow-brand);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s,transform .3s var(--ease),visibility .3s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Pages internes (site multipage) ----------
   Le site est passe d'une page unique a sept pages. Chaque page interne
   remplace le grand hero d'accueil par un bandeau de titre plus court, et se
   termine par un appel a l'action : en page unique le visiteur finissait
   forcement sur le formulaire en scrollant, ce n'est plus le cas. */
/* Le nom evite volontairement « .page-head », qui designait le bandeau sombre
   des anciennes pages legales. Les deux s'etaient percutes : la regle sombre
   venant apres, elle l'emportait et le titre s'affichait en encre foncee sur
   fond encre foncee, donc invisible. Les pages legales reprennent desormais ce
   meme .page-intro et l'ancien jeu de regles a disparu. */
/* La marge haute doit degager l'en-tete, qui est en position fixe et se
   superpose donc au contenu. Sur l'accueil c'est le hero qui s'en charge avec
   sa grande marge ; ici le bandeau est plus court, il faut la prevoir. */
.page-intro{background:var(--bg-alt);padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line)}
.page-intro__inner{max-width:48rem}

/* Meme probleme sur la page Contact : la section sombre y est devenue la
   premiere de la page alors qu'elle etait auparavant au milieu du parcours.
   « :first-child » limite la correction a ce cas et laisse l'usage d'origine
   intact si la section revient un jour en cours de page. */
main > .contact:first-child{padding-top:clamp(8rem,14vw,11rem)}
.page-intro h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin:.6rem 0 1rem}
.page-intro .lead{color:var(--body);max-width:42rem}

/* Colonne de lecture : au-dela d'environ 70 caracteres par ligne, l'oeil perd
   le debut de la ligne suivante. Les pages internes portent beaucoup plus de
   texte suivi que l'accueil, d'ou cette contrainte explicite. */
.prose{max-width:46rem;margin-inline:auto}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.9rem}
.prose h3{font-size:1.15rem;margin:2rem 0 .5rem;color:var(--title)}
.prose p{margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.prose .ticks{margin:1rem 0 1.6rem}

/* Deux colonnes de texte, sans image : sert aux blocs « ce qui est inclus »
   et « ce qui fait varier le prix ». */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,4vw,3rem);max-width:56rem;margin-inline:auto}
.duo__item h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--title)}

.cta-band{background:var(--ink);padding:clamp(3rem,6vw,4.5rem) 0;text-align:center}
.cta-band h2{color:var(--ivoire);font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.8rem}
.cta-band p{color:rgba(244,236,221,.78);max-width:40rem;margin:0 auto 1.8rem}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta-band__actions .btn--ghost{color:var(--ivoire);border-color:rgba(244,236,221,.35)}
.cta-band__actions .btn--ghost:hover{background:rgba(244,236,221,.1);border-color:rgba(244,236,221,.6)}

/* ---------- Barre d'appel mobile ---------- */
.callbar{display:none}
@media (max-width:860px){
  .callbar{
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(42,14,20,.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(244,236,221,.14);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:48px;padding:.7rem 1rem;border-radius:100px;
    font-family:"Jost",sans-serif;font-weight:600;font-size:.95rem;
  }
  .callbar__call{background:linear-gradient(135deg,var(--brass-l) 0%,var(--brass) 100%);color:var(--ink)}
  .callbar__call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .callbar__quote{background:rgba(244,236,221,.12);color:var(--ivoire);border:1px solid rgba(244,236,221,.28)}
  /* la barre masquerait le bas de page et le bouton de remontee */
  .footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .to-top{bottom:calc(5rem + env(safe-area-inset-bottom))}
  body.nav-open .callbar{display:none}
}

/* ---------- Pages légales ----------
   Ces pages avaient leur propre en-tete reduit — un bandeau sombre, le logo et
   un lien « Retour au site » — decrit ici par .page-head et .page-back. Elles
   reprennent maintenant l'en-tete et le pied du reste du site, et ouvrent sur
   le meme bandeau .page-intro que les autres pages internes. Les six regles
   correspondantes ont donc ete retirees : elles ne servaient plus, et leur nom
   entrait en collision avec .page-intro. */
.legal{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.legal__inner{max-width:46rem}
.legal h1{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:.6rem}
.legal__updated{margin:0 0 2.5rem;font-size:.88rem;color:var(--body);opacity:.75}
.legal h2{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  margin:2.6rem 0 .8rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{margin:1.6rem 0 .5rem;font-size:1.05rem}
.legal p,.legal li{color:var(--body);line-height:1.75}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1rem;padding-left:1.2rem;list-style:disc}
.legal li{margin-bottom:.45rem}
.legal li::marker{color:var(--brass)}
.legal a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--bordeaux-l)}
.legal dl{margin:0 0 1rem}
.legal dt{font-weight:600;color:var(--title);margin-top:.9rem}
.legal dd{margin:.15rem 0 0;color:var(--body);line-height:1.75}
/* un marqueur voyant : ces valeurs doivent être remplacées avant la mise en ligne */
.todo{
  background:#FFF3CD;color:#6B4E00;border:1px dashed #C9A227;
  padding:.1em .45em;border-radius:4px;font-size:.92em;font-weight:600;
}

/* ---------- Page 404 ---------- */
/* Cette page portait son propre logo et occupait tout l'ecran, parce qu'elle
   n'avait ni en-tete ni pied. Elle reprend maintenant l'habillage du site : le
   logo vient de l'en-tete, et la hauteur descend sous le plein ecran pour que
   le pied de page se devine en bas. Un visiteur arrive ici par erreur, autant
   lui montrer tout de suite qu'il y a un site derriere.
   Le padding haut degage l'en-tete, qui est en position fixe. */
.notfound{
  min-height:78vh;min-height:78dvh;
  display:grid;place-items:center;
  background:var(--ink);color:rgba(255,255,255,.76);
  padding:clamp(7rem,12vw,9rem) 0 clamp(3rem,8vw,5rem);
  text-align:center;
}
.notfound__inner{max-width:40rem}
.notfound__code{
  margin:0 0 .6rem;font-family:"Jost",sans-serif;
  font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-l);
}
.notfound h1{color:var(--ivoire);margin-bottom:.7rem}
.notfound__lead{margin:0 auto 2.2rem;max-width:30rem;font-size:1.05rem;line-height:1.7}
.notfound__actions{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;
  margin-bottom:2.6rem;
}
/* sur ce fond sombre le degrade bordeaux du CTA se fondrait dans le decor */
.notfound .btn--primary{
  background:linear-gradient(135deg,var(--brass-l) 0%,var(--brass) 100%);
  color:var(--ink);box-shadow:0 16px 36px -14px rgba(185,139,78,.7);
}
.notfound__links{
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:center;
  padding-top:1.8rem;border-top:1px solid rgba(244,236,221,.14);
}
.notfound__links a{
  font-family:"Jost",sans-serif;font-size:.95rem;
  color:rgba(244,236,221,.72);transition:color .2s;
}
.notfound__links a:hover{color:var(--brass-l)}
.notfound__call{margin:1.8rem 0 0;font-size:.95rem;color:rgba(244,236,221,.6)}
/* un numero coupe en deux lignes se lit mal et s'appelle encore plus mal */
.notfound__call a{color:var(--brass-l);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Reveal on scroll ----------
   Ces blocs partent invisibles et c'est le JavaScript qui les revele quand ils
   entrent dans l'ecran. Le masquage est donc conditionne a la classe « js »,
   posee par un script d'une ligne dans le <head>.

   Sans cette precaution, le jour ou le JavaScript ne tourne pas — fichier non
   charge, erreur de script, navigateur ou extension qui le bloque — la page
   s'afficherait entierement blanche : le contenu serait bien la, en opacite
   zero, invisible et donc perdu. Le site compte maintenant huit pages, cela
   ferait huit pages blanches. En l'absence de « js », le contenu reste visible
   et seule l'animation est perdue : on degrade l'effet, pas la page. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{max-width:44rem;margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__actions,.hero__points{justify-content:center}
  .hero__visual{margin-top:1rem}
  .mockup{transform:none}
  .mockup:hover{transform:translateY(-6px)}
  .float-card--1{left:0}
  .float-card--2{right:0}
  .cards,.pricing{grid-template-columns:1fr 1fr}
  .pricing>:last-child{grid-column:span 2;max-width:420px;margin-inline:auto;width:100%}
  .price--featured{transform:none}
  .price--featured:hover{transform:translateY(-6px)}
  .method,.about,.faq,.contact__inner{grid-template-columns:1fr}
  .method__left,.faq__head{position:static}
  .about__media{max-width:420px;margin-inline:auto}
  /* Le badge garde une hauteur fixe pendant que le portrait retrecit : ancre
     a l'interieur, il finit par recouvrir le bas du visage. */
  .about__badge{right:0;bottom:-22px}
  .footer__inner{grid-template-columns:1fr}
  /* Deux colonnes de texte cote a cote deviennent deux colonnes trop etroites
     bien avant la rupture mobile : on les empile des 1080 px. */
  .duo{grid-template-columns:1fr}
}

@media (max-width:860px){
  .burger{display:grid}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);
    flex-direction:column;align-items:stretch;justify-content:center;gap:.3rem;
    padding:2rem 1.6rem;
    background:rgba(42,14,20,.97);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .4s var(--ease),visibility .4s;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:none;visibility:visible}
  /* backdrop-filter sur le header créerait un bloc conteneur qui enfermerait
     le menu position:fixed dans la hauteur du header */
  body.nav-open .header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav>a{color:rgba(255,255,255,.85)!important;font-size:1.05rem;padding:.9rem 1rem;text-align:left}
  .nav>a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
  .nav>.nav__cta,.nav>.nav__cta:hover{
    margin:1rem 0 0;justify-content:center;
    background:linear-gradient(135deg,var(--brass-l) 0%,var(--brass) 100%)!important;
    color:var(--ink)!important;
  }
  body.nav-open{overflow:hidden}
  body.nav-open::before{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(42,14,20,.55);backdrop-filter:blur(3px);
  }

  .stats{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .works{grid-template-columns:1fr}
  .work,.work--wide{grid-column:auto}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{border-radius:0 0 var(--r-lg) var(--r-lg)}
  .cards,.pricing{grid-template-columns:1fr}
  .pricing>:last-child{grid-column:auto}
  .form__row{grid-template-columns:1fr}
  .float-card{position:static;margin-top:.9rem;animation:none;display:inline-flex}
  .float-card--1,.float-card--2{margin-right:.6rem}
  .hero__visual{display:flex;flex-direction:column;align-items:center}
  .hero__inner{text-align:left}
  .hero__actions,.hero__points{justify-content:flex-start}
  .hero__actions .btn{width:100%}
  .about__badge{right:0}
  .footer__nav{grid-template-columns:1fr 1fr}
  .to-top{right:1rem;bottom:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  /* Le selecteur doit porter « .js » lui aussi : sans cela il serait moins
     specifique que « .js .reveal » juste au-dessus et ne s'appliquerait pas,
     ce qui rendrait les blocs invisibles jusqu'au passage de l'observateur
     chez les personnes qui ont desactive les animations — exactement celles
     a qui on ne veut rien faire attendre. */
  .js .reveal{opacity:1;transform:none}
}