/* ============================================================
   antoinenoel.fr — feuille de style partagée
   ============================================================ */

/* ===== POLICE AUTO-HÉBERGÉE (RGPD — pas de CDN Google Fonts) ===== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-variable.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;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

/* ===== ACCESSIBILITÉ ===== */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--orange); color: #fff;
  padding: .5rem 1rem; border-radius: 0 0 6px 6px;
  font-weight: 700; font-size: .9rem; z-index: 10000;
  transition: top .2s;
}
.skip-link:focus { top: 0; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}
body:not(.using-keyboard) :focus:not(:focus-visible) { outline: none; }

/* ===== VARIABLES ===== */
:root {
  --orange:   #E8431B;
  --orange-2: #FF5C32;
  --yellow:   #F5C535;
  --dark:     #0E0904;
  --dark-2:   #160D06;
  --light:    #FFF9F4;
  --light-2:  #F2E8DC;
  --td:  #F7EEE6;
  --tl:  #1A1008;
  --md:  rgba(247,238,230,.40);
  --ml:  rgba(26,16,8,.44);
  --bd:  rgba(247,238,230,.07);
  --bl:  rgba(26,16,8,.07);
  --f: 'Bricolage Grotesque', system-ui, sans-serif;
  --ease:   cubic-bezier(.65,0,.35,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

body {
  font-family: var(--f);
  font-weight: 400;
  background: var(--dark);
  color: var(--td);
  overflow-x: hidden;
  cursor: none;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
main { display: block; }

/* ===== CURSOR (desktop only) ===== */
.cur, .cur-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cur {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 9px; height: 9px;
    background: var(--orange); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .35s var(--ease), height .35s var(--ease), background .3s;
  }
  .cur-ring {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 44px; height: 44px;
    border: 1.5px solid rgba(232,67,27,.35); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    transition: width .4s var(--ease), height .4s var(--ease), border-color .3s;
  }
  .cur.big { width: 56px; height: 56px; background: var(--yellow); }
  .cur-ring.big { width: 90px; height: 90px; border-color: rgba(245,197,53,.2); }
  /* Le curseur natif n'est masqué qu'une fois le curseur personnalisé actif (JS chargé) */
  html:not(.no-js) body { cursor: none; }
}

/* ===== SCROLL PROGRESS ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9997;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transform-origin: left; transform: scaleX(0);
  transition: transform .1s linear;
}

/* ===== PRELOADER ===== */
.pre {
  position: fixed; inset: 0;
  background: var(--dark); z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s var(--ease), visibility .9s;
}
.pre.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo { opacity: 0; transform: scale(.9); animation: preIn 1s var(--ease) .3s forwards; }
@keyframes preIn { to { opacity: 1; transform: scale(1); } }
.pre-bar {
  position: absolute; bottom: 0; left: 0;
  height: 3px; background: linear-gradient(90deg, var(--orange), var(--yellow));
  width: 0%; animation: preBar 1.7s var(--ease) .1s forwards;
}
@keyframes preBar { to { width: 100%; } }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  padding: 1.5rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .55s var(--ease), border-color .55s, backdrop-filter .55s;
}
.nav.scrolled {
  background: rgba(14,9,4,.72);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border-bottom: 1px solid rgba(247,238,230,.06);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 38px; width: auto; display: block; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--td); opacity: .5; transition: opacity .3s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-cta {
  opacity: 1 !important;
  border: 1.5px solid rgba(232,67,27,.45) !important;
  padding: .55rem 1.4rem; border-radius: 2rem;
  color: var(--td) !important;
  transition: background .3s, border-color .3s !important;
}
.nav-cta:hover { background: var(--orange) !important; border-color: var(--orange) !important; }

.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; padding: .5rem;
  cursor: pointer; z-index: 600;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--td); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s, background .3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== MOBILE MENU OVERLAY ===== */
.m-close {
  position: absolute; top: 1.4rem; right: 1.5rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border-radius: 50%;
  border: none; cursor: pointer; z-index: 10;
  color: var(--td); font-size: 1.4rem; line-height: 1;
}
.m-close:active { background: var(--orange); }
.m-overlay {
  position: fixed; inset: 0;
  background: var(--dark);
  z-index: 500;
  display: flex; flex-direction: column;
  padding: 6rem 1.5rem 2rem;
  transform: translateY(-100%);
  transition: transform .75s cubic-bezier(.77,0,.18,1);
  overflow: hidden;
}
.m-overlay::before {
  content: 'AN';
  position: absolute; right: -5vw; bottom: -5vw;
  font-size: 60vw; font-weight: 800;
  color: rgba(232,67,27,.04);
  line-height: 1; letter-spacing: -.05em;
  pointer-events: none;
}
.m-overlay.open { transform: translateY(0); }

.m-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.m-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bd);
  font-size: 13vw; font-weight: 800;
  color: var(--td); letter-spacing: -.04em; line-height: 1;
  opacity: 0; transform: translateY(24px);
  transition: color .3s, opacity .5s var(--ease), transform .5s var(--ease);
}
.m-nav-link:first-child { border-top: 1px solid var(--bd); }
.m-overlay.open .m-nav-link { opacity: 1; transform: translateY(0); }
.m-overlay.open .m-nav-link:nth-child(1) { transition-delay: .12s; }
.m-overlay.open .m-nav-link:nth-child(2) { transition-delay: .18s; }
.m-overlay.open .m-nav-link:nth-child(3) { transition-delay: .24s; }
.m-overlay.open .m-nav-link:nth-child(4) { transition-delay: .30s; }
.m-overlay.open .m-nav-link:nth-child(5) { transition-delay: .36s; }
.m-nav-link:active, .m-nav-link[aria-current="page"] { color: var(--orange); }

.m-nav-num {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; color: var(--orange);
  align-self: flex-start; margin-top: .3rem;
}
.m-nav-arrow { font-size: 8vw; opacity: .3; }

.m-overlay-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.5rem;
  opacity: 0;
  transition: opacity .5s var(--ease) .4s;
}
.m-overlay.open .m-overlay-foot { opacity: 1; }
.m-overlay-email {
  font-size: .8rem; font-weight: 400;
  color: var(--md); letter-spacing: .03em;
}
.m-overlay-avail {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--md);
}

/* ===== HERO (home) ===== */
.hero {
  background: var(--dark);
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 3rem 5.5rem;
  position: relative; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(130px); pointer-events: none;
}
.orb-1 {
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, #E8431B 0%, transparent 62%);
  top: -22%; right: -12%; opacity: .17;
  animation: o1 22s ease-in-out infinite;
}
.orb-2 {
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, #F5C535 0%, transparent 62%);
  bottom: 0%; left: -10%; opacity: .12;
  animation: o2 28s ease-in-out infinite;
}
.orb-3 {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, #FF5C32 0%, transparent 62%);
  top: 45%; left: 40%; opacity: .07;
  animation: o3 18s ease-in-out infinite;
}
@keyframes o1 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-3%,7%) scale(1.07)} 70%{transform:translate(4%,-3%) scale(.93)} }
@keyframes o2 { 0%,100%{transform:translate(0,0) scale(1)} 35%{transform:translate(7%,-5%) scale(1.12)} 65%{transform:translate(-2%,5%) scale(.9)} }
@keyframes o3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6%,9%)} }
.noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 1380px; margin: 0 auto; width: 100%;
}
.hero-avail {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--md); margin-bottom: 2.5rem; opacity: 0;
}
.avail-dot {
  width: 7px; height: 7px; background: #4ADE80;
  border-radius: 50%; box-shadow: 0 0 8px #4ADE80;
  flex-shrink: 0;
  animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-h { font-family: var(--f); line-height: .90; letter-spacing: -.03em; margin-bottom: 2.5rem; }
.hero-line   { display: block; overflow: hidden; }
.hero-line-i { display: block; clip-path: inset(0 0 110% 0); }
.l1 { font-size: clamp(2.6rem,5.5vw,6rem); font-weight: 200; color: rgba(247,238,230,.55); letter-spacing: -.01em; }
.l2 { font-size: clamp(3.4rem,7.5vw,9rem); font-weight: 800; color: var(--orange); letter-spacing: -.045em; font-variation-settings: 'opsz' 96; }

/* Prix, visible immédiatement dans le hero */
.hero-price {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem; opacity: 0;
}
.hero-price-num { font-size: clamp(3rem,6.5vw,5.5rem); font-weight: 800; color: var(--yellow); letter-spacing: -.03em; line-height: 1; font-variation-settings: 'opsz' 72; }
.hero-price-terms { font-size: .95rem; font-weight: 400; color: var(--md); line-height: 1.6; }
.hero-price-note { font-size: .82rem; font-weight: 300; color: var(--md); margin-bottom: 3rem; opacity: 0; }

.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hero-sub { font-size: clamp(.9rem,1.4vw,1.05rem); font-weight: 300; line-height: 1.85; color: var(--md); max-width: 460px; opacity: 0; }
.hero-sub strong { font-weight: 700; color: var(--yellow); }
.hero-btns { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; flex-wrap: wrap; opacity: 0; }

.hero-reassurance {
  border-top: 1px solid var(--bd);
  padding: 1.1rem 3rem;
  display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;
  background: var(--dark-2);
}
.hero-reassurance span { font-size: .74rem; font-weight: 500; letter-spacing: .04em; color: var(--md); }

/* ===== BOUTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 2.1rem; border-radius: 3rem;
  font-family: var(--f); font-size: .84rem; font-weight: 600;
  letter-spacing: .01em;
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s;
  will-change: transform; border: none; cursor: pointer;
}
html:not(.no-js) .btn { cursor: none; }
@media (hover: none) { html:not(.no-js) .btn { cursor: pointer; } }
.btn-p { background: var(--orange); color: white; border: 1.5px solid var(--orange); }
.btn-p:hover { background: var(--orange-2); border-color: var(--orange-2); box-shadow: 0 8px 32px rgba(232,67,27,.4); }
.btn-o { background: transparent; color: var(--td); border: 1.5px solid var(--bd); }
.btn-o:hover { border-color: rgba(247,238,230,.3); background: rgba(247,238,230,.04); }
.btn-o.on-light { color: var(--tl); border-color: var(--bl); }
.btn-o.on-light:hover { border-color: rgba(26,16,8,.3); background: rgba(26,16,8,.04); }

.hero-scroll-hint {
  position: absolute; bottom: 4.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .8rem; opacity: 0;
}
.scroll-label { font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--md); writing-mode: vertical-rl; }
.scroll-bar {
  width: 1px; height: 56px; background: var(--orange);
  transform-origin: top; opacity: .5;
  animation: sbar 2.2s var(--ease) infinite;
}
@keyframes sbar { 0%{transform:scaleY(0);opacity:0} 50%{transform:scaleY(1);opacity:.6} 100%{transform:scaleY(1) translateY(100%);opacity:0} }

.hero-deco-text {
  position: absolute; bottom: 6%; left: -2%;
  font-size: clamp(8rem, 21vw, 27rem);
  font-weight: 800; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232,67,27,.055);
  line-height: 1; pointer-events: none;
  white-space: nowrap; z-index: 1;
  user-select: none; opacity: 0;
}
@media (max-width: 768px) { .hero-deco-text { display: none; } }

/* ===== CURSOR LABEL ===== */
.cur-lbl {
  position: fixed; top: 0; left: 0;
  font-family: var(--f); font-size: .58rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: white; pointer-events: none; z-index: 10000;
  white-space: nowrap; opacity: 0; transition: opacity .2s;
}
.cur-lbl.show { opacity: 1; }

/* ===== PAGE HERO (pages intérieures) ===== */
.page-hero {
  background: var(--dark);
  padding: 10rem 3rem 5rem;
  position: relative; overflow: hidden;
}
.page-hero-inner { max-width: 1380px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero-h { font-size: clamp(2.6rem,6vw,6rem); font-weight: 800; line-height: .96; letter-spacing: -.03em; color: var(--td); margin-bottom: 1.6rem; font-variation-settings: 'opsz' 72; }
.page-hero-sub { font-size: clamp(1rem,1.6vw,1.2rem); font-weight: 300; line-height: 1.8; color: var(--md); max-width: 640px; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--md); margin-bottom: 1.8rem; }
.breadcrumb a { color: var(--md); transition: color .3s; }
.breadcrumb a:hover { color: var(--orange); }

/* ===== TICKER ===== */
.ticker { background: var(--orange); padding: 1.1rem 0; overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: tick 28s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: white; }
.tk-sep { color: rgba(255,255,255,.4); font-size: .55rem; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== STATS ===== */
.stats { background: var(--dark-2); padding: 6rem 3rem; border-top: 1px solid var(--bd); }
.stats-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.stat {
  padding: 3.5rem 2.5rem; background: var(--dark);
  text-align: center; transition: background .4s;
  position: relative; overflow: hidden;
}
.stat:first-child { border-radius: 1.2rem 0 0 1.2rem; }
.stat:last-child  { border-radius: 0 1.2rem 1.2rem 0; }
.stat::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 40%; height: 3px; background: linear-gradient(90deg, var(--orange), var(--yellow)); transition: transform .45s var(--ease); }
.stat:hover::after { transform: translateX(-50%) scaleX(1); }
.stat-num { font-size: clamp(3rem,5vw,6rem); font-weight: 800; line-height: 1; color: var(--td); margin-bottom: .3rem; letter-spacing: -.04em; font-variation-settings: 'opsz' 72; }
.stat-num span { color: var(--yellow); }
.stat-label { font-size: .72rem; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: var(--md); }

/* ===== SECTION GÉNÉRIQUE (fond clair) ===== */
.sect-light { background: var(--light); color: var(--tl); padding: 8rem 3rem; }
.sect-dark  { background: var(--dark);  color: var(--td); padding: 8rem 3rem; }
.sect-dark2 { background: var(--dark-2); color: var(--td); padding: 8rem 3rem; border-top: 1px solid var(--bd); }
.sect-inner { max-width: 1100px; margin: 0 auto; }
.sect-inner-wide { max-width: 1380px; margin: 0 auto; }
.section-label { font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ml); margin-bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; }
.sect-dark .section-label, .sect-dark2 .section-label { color: var(--md); }
.section-label::before { content: ''; display: block; width: 22px; height: 2px; background: var(--orange); }
.section-h { font-weight: 800; line-height: .96; letter-spacing: -.03em; font-variation-settings: 'opsz' 72; font-size: clamp(2.2rem,4.5vw,4.2rem); margin-bottom: 2rem; }
.section-h em { color: var(--orange); font-style: normal; }
.sect-dark .section-h em, .sect-dark2 .section-h em { color: var(--yellow); }
.body-text { font-size: 1.02rem; font-weight: 300; line-height: 1.92; color: #7A5840; margin-bottom: 1.3rem; }
.body-text strong { font-weight: 700; color: var(--tl); }
.sect-dark .body-text, .sect-dark2 .body-text { color: var(--md); }
.sect-dark .body-text strong, .sect-dark2 .body-text strong { color: var(--td); }

/* ===== ABOUT / PHOTO ===== */
.about { background: var(--light); color: var(--tl); padding: 8rem 3rem; }
.about-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-h { font-size: clamp(2.4rem,4.5vw,4.6rem); color: var(--tl); margin-bottom: 2rem; }
.about-sig { font-size: clamp(3rem,5.5vw,5.5rem); font-weight: 800; letter-spacing: -.05em; color: var(--orange); margin-top: 2rem; font-variation-settings: 'opsz' 96; line-height: 1; }
.photo-wrap { position: relative; }
.photo-frame { border-radius: 1.6rem; overflow: hidden; aspect-ratio: 3/4; max-height: 580px; }
.photo-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(145deg, #EDD9C3 0%, #D4A87A 40%, #C49060 70%, #DCB894 100%);
  position: relative; overflow: hidden;
}
.photo-real {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block; position: relative; z-index: 1;
}
.photo-circle-deco {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(26,16,8,.07);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.pcd1 { width: 65%; height: 65%; }
.pcd2 { width: 90%; height: 90%; opacity: .5; }
.pcd3 {
  position: absolute; bottom: -15%; right: -15%;
  width: 55%; height: 55%; border: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,67,27,.13) 0%, transparent 68%);
}
.about-badge { position: absolute; bottom: 2.5rem; right: -2rem; background: var(--dark); color: var(--td); padding: 1.5rem 1.8rem; border-radius: 1.2rem; min-width: 130px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ab-num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--yellow); letter-spacing: -.04em; font-variation-settings: 'opsz' 48; }
.ab-label { font-size: .7rem; font-weight: 300; color: var(--md); margin-top: .3rem; }

/* ===== LISTE OFFRE (icône + texte, pas de grille de cartes) ===== */
.offer-list { display: flex; flex-direction: column; }
.offer-item { padding: 2.2rem 0; border-bottom: 1px solid var(--bl); display: grid; grid-template-columns: 44px 1fr; gap: 1.6rem; align-items: start; }
.sect-dark .offer-item, .sect-dark2 .offer-item { border-bottom-color: var(--bd); }
.offer-item:first-child { border-top: 1px solid var(--bl); }
.sect-dark .offer-item:first-child, .sect-dark2 .offer-item:first-child { border-top-color: var(--bd); }
.offer-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.offer-icon svg { width: 18px; height: 18px; }
.offer-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .5rem; }
.offer-desc { font-size: .95rem; font-weight: 300; line-height: 1.75; color: #7A5840; }
.sect-dark .offer-desc, .sect-dark2 .offer-desc { color: var(--md); }
.offer-box { margin-top: 3rem; padding: 2rem 2.4rem; border-radius: 1.2rem; background: var(--tl); color: var(--td); }
.sect-light .offer-box { background: var(--tl); }
.offer-box strong { color: var(--yellow); }
.offer-box p { font-size: .95rem; font-weight: 400; line-height: 1.7; }

/* ===== CE QUI N'EST PAS INCLUS ===== */
.excl-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1rem; }
.excl-item { display: flex; gap: 1rem; align-items: baseline; font-size: 1rem; font-weight: 300; line-height: 1.75; color: #7A5840; }
.sect-dark .excl-item, .sect-dark2 .excl-item { color: var(--md); }
.excl-item::before { content: '—'; color: var(--orange); font-weight: 700; flex-shrink: 0; }
.excl-item strong { font-weight: 700; color: var(--tl); }
.sect-dark .excl-item strong, .sect-dark2 .excl-item strong { color: var(--td); }

/* ===== ÉTAPES / PROCESS ===== */
.process { background: var(--dark-2); padding: 8rem 3rem; border-top: 1px solid var(--bd); }
.process-inner { max-width: 1380px; margin: 0 auto; }
.process-head { margin-bottom: 4rem; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.step { background: var(--dark); padding: 3rem 2.2rem; transition: background .4s; position: relative; overflow: hidden; }
.step::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--orange), var(--yellow)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.step:hover::after { transform: scaleX(1); }
.step:first-child { border-radius: 1.2rem 0 0 1.2rem; }
.step:last-child  { border-radius: 0 1.2rem 1.2rem 0; }
.step-badge { font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--orange); text-transform: uppercase; margin-bottom: 2.2rem; }
.step-name { font-size: 1.7rem; font-weight: 800; color: var(--td); margin-bottom: 1rem; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'opsz' 36; }
.step-desc { font-size: .86rem; font-weight: 300; line-height: 1.8; color: var(--md); }

/* ===== WORK / RÉALISATIONS ===== */
.work { background: var(--dark); padding: 8rem 3rem; }
.section-top { max-width: 1380px; margin: 0 auto 3.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.work-more { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--md); display: flex; align-items: center; gap: .5rem; padding-bottom: .4rem; flex-shrink: 0; transition: color .3s; }
.work-more:hover { color: var(--orange); }
.work-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.wcard { position: relative; border-radius: 1.2rem; overflow: hidden; aspect-ratio: 5/4; }
html:not(.no-js) .wcard { cursor: none; }
.wcard.w-large { grid-column: span 2; aspect-ratio: 16/9; }
.wcard.w-large .wcard-name { font-size: 2.1rem; }
.wcard.w-large .wcard-body { padding: 2.6rem; }
.wcard a { display: block; width: 100%; height: 100%; }
.wcard-bg { position: absolute; inset: 0; overflow: hidden; transition: transform .65s var(--ease); }
.wcard:hover .wcard-bg { transform: scale(1.06); }
.wcard-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  filter: brightness(.72) saturate(1.05);
  transition: filter .45s;
}
.wcard:hover .wcard-img { filter: brightness(.55) saturate(1.1); }
.wcard-pat { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1px); background-size: 28px 28px; }
.wcard-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 25%, rgba(232,67,27,.08) 0%, transparent 60%); }
.wcard-body { position: absolute; inset: 0; padding: 1.8rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.15) 55%, transparent 100%); }
.wcard-tag { font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,197,53,.65); margin-bottom: .5rem; }
.wcard-name { font-size: 1.55rem; font-weight: 700; color: white; line-height: 1.05; margin-bottom: .4rem; letter-spacing: -.02em; }
.wcard-url { font-size: .73rem; font-weight: 300; color: rgba(255,255,255,.35); }
.wcard-arrow { position: absolute; top: 1.5rem; right: 1.5rem; width: 42px; height: 42px; border: 1.5px solid rgba(232,67,27,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.75) rotate(-45deg); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s; }
.wcard:hover .wcard-arrow { opacity: 1; transform: scale(1) rotate(0deg); background: rgba(232,67,27,.15); }

/* Étude de cas (problème → action → résultat) */
.case-list { display: flex; flex-direction: column; gap: 5rem; max-width: 1380px; margin: 0 auto; }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.case:nth-child(even) .case-media { order: 2; }
.case-media { border-radius: 1.4rem; overflow: hidden; aspect-ratio: 16/10; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-tag { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; }
.case-name { font-size: clamp(1.7rem,3vw,2.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.4rem; line-height: 1.05; }
.case-row { display: flex; gap: .8rem; margin-bottom: .9rem; font-size: .92rem; font-weight: 300; line-height: 1.7; color: var(--md); }
.case-row b { flex-shrink: 0; color: var(--td); font-weight: 700; min-width: 82px; }
.case-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .82rem; font-weight: 600; color: var(--orange); }

/* ===== FAQ (HTML natif, lisible sans JS) ===== */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--bl); }
.sect-dark .faq-item, .sect-dark2 .faq-item { border-bottom-color: var(--bd); }
.faq-item:first-child { border-top: 1px solid var(--bl); }
.sect-dark .faq-item:first-child, .sect-dark2 .faq-item:first-child { border-top-color: var(--bd); }
.faq-item summary {
  padding: 1.6rem 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--orange); flex-shrink: 0; transition: transform .3s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { font-size: .95rem; font-weight: 300; line-height: 1.8; color: #7A5840; padding-bottom: 1.8rem; max-width: 720px; }
.sect-dark .faq-a, .sect-dark2 .faq-a { color: var(--md); }

/* ===== TABLEAUX (formules, comparaison) ===== */
.tbl-wrap { overflow-x: auto; margin: 2rem 0; border-radius: 1rem; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 520px; }
table.cmp th, table.cmp td { padding: 1.1rem 1.4rem; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--bl); }
.sect-dark table.cmp th, .sect-dark table.cmp td, .sect-dark2 table.cmp th, .sect-dark2 table.cmp td { border-bottom-color: var(--bd); }
table.cmp thead th { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ml); }
.sect-dark table.cmp thead th, .sect-dark2 table.cmp thead th { color: var(--md); }
table.cmp .price-cell { font-size: 1.3rem; font-weight: 800; color: var(--orange); }
table.cmp .check { color: var(--orange); font-weight: 700; }
table.cmp .dash { color: var(--ml); }
.sect-dark table.cmp .dash, .sect-dark2 table.cmp .dash { color: var(--md); }
table.cmp .total-row td { font-weight: 800; font-size: 1.1rem; }

/* ===== GRILLE CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* ===== FORMULAIRE ===== */
.form-section { background: var(--tl); border-radius: 1.6rem; padding: 3.5rem; margin-top: 2rem; }
.form-section .section-label { color: var(--md); }
.form-section .section-h { color: var(--td); }
.form-lead { font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--md); margin-bottom: 2.4rem; max-width: 560px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; }
.form-field { display: flex; flex-direction: column; gap: .5rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--md); }
.form-field input {
  background: rgba(247,238,230,.06); border: 1.5px solid var(--bd); border-radius: .7rem;
  padding: .95rem 1.1rem; font-family: var(--f); font-size: .95rem; color: var(--td);
  transition: border-color .3s, background .3s;
}
.form-field input:focus { border-color: var(--orange); background: rgba(247,238,230,.1); outline: none; }
.form-field input::placeholder { color: var(--md); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; font-weight: 300; color: var(--md); margin-top: 1.6rem; line-height: 1.7; }
.form-note a { color: var(--orange); font-weight: 600; }

/* ===== CTA ===== */
.cta { background: var(--dark); padding: 10rem 3rem; text-align: center; position: relative; overflow: hidden; }
.cta-orb { position: absolute; width: 90vw; height: 90vw; border-radius: 50%; background: radial-gradient(circle, rgba(232,67,27,.12) 0%, rgba(245,197,53,.06) 40%, transparent 68%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.cta-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.cta-label { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--md); margin-bottom: 1.8rem; }
.cta-h { font-size: clamp(2.6rem,6.5vw,6.5rem); font-weight: 800; line-height: .96; letter-spacing: -.04em; color: var(--td); margin-bottom: 2rem; font-variation-settings: 'opsz' 96; }
.cta-h em { color: var(--yellow); font-style: normal; }
.cta-sub { font-size: 1rem; font-weight: 300; color: var(--md); margin-bottom: 3rem; }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.cta-mail { font-size: clamp(1.2rem,2.6vw,1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--td); border-bottom: 2px solid var(--bd); padding-bottom: .25rem; transition: color .3s, border-color .3s; }
.cta-mail:hover { color: var(--orange); border-color: var(--orange); }
.cta-or { font-size: .72rem; font-weight: 500; color: var(--md); letter-spacing: .15em; text-transform: uppercase; }

/* ===== FOOTER ===== */
.footer { background: var(--dark); border-top: 1px solid var(--bd); padding: 3.5rem 3rem; }
.footer-inner { max-width: 1380px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo img { height: 34px; width: auto; display: block; border-radius: 6px; }
.footer-nav { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; }
.footer-nav a { font-size: .78rem; font-weight: 400; color: var(--md); letter-spacing: .05em; transition: color .3s; }
.footer-nav a:hover { color: var(--orange); }
.footer-copy { font-size: .72rem; font-weight: 300; color: var(--md); width: 100%; text-align: center; margin-top: 1rem; }

/* ===== MOBILE BOTTOM BAR ===== */
.m-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 300;
  padding: .9rem 1.5rem;
  background: rgba(14,9,4,.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--bd);
  display: none;
  align-items: center; justify-content: space-between;
  transform: translateY(100%);
  transition: transform .5s var(--spring);
}
.m-bar.visible { transform: translateY(0); }
.m-bar-left { display: flex; align-items: center; gap: .6rem; }
.m-bar-avail { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--md); }
.m-bar-btn { padding: .7rem 1.4rem; font-size: .82rem; font-weight: 700; border-radius: 3rem; background: var(--orange); color: white; border: none; letter-spacing: .02em; cursor: pointer; transition: background .3s; }
.m-bar-btn:active { background: var(--orange-2); }

/* ===== REVEAL ===== */
.ru { opacity: 0; transform: translateY(36px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.ru.on { opacity: 1; transform: translateY(0); }
.ru.d1 { transition-delay: .1s; }
.ru.d2 { transition-delay: .2s; }
.ru.d3 { transition-delay: .3s; }
.ru.d4 { transition-delay: .4s; }

/* Sans JavaScript : tout reste visible (pas de reveal caché) */
.no-js .ru { opacity: 1; transform: none; }

/* Respect du confort de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ru { opacity: 1; transform: none; }
  .cur, .cur-ring { display: none !important; }
  body { cursor: auto; }
}

/* ===== TABLET ===== */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(1){ border-radius: 1.2rem 0 0 0; }
  .stat:nth-child(2){ border-radius: 0 1.2rem 0 0; }
  .stat:nth-child(3){ border-radius: 0 0 0 1.2rem; }
  .stat:nth-child(4){ border-radius: 0 0 1.2rem 0; }
  .work-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step:nth-child(1){ border-radius: 1.2rem 0 0 0; }
  .step:nth-child(2){ border-radius: 0 1.2rem 0 0; }
  .step:nth-child(3){ border-radius: 0 0 0 1.2rem; }
  .step:nth-child(4){ border-radius: 0 0 1.2rem 0; }
  .about-grid { grid-template-columns: 1fr; gap: 4rem; }
  .photo-frame { max-height: 380px; }
  .about-badge { right: 0; }
  .case, .case:nth-child(even) .case-media { grid-template-columns: 1fr; order: initial; }
  .case { grid-template-columns: 1fr; }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .nav { padding: 1.2rem 1.5rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 0 1.5rem 5rem; min-height: 100dvh; }
  .hero-avail { margin-bottom: 1.6rem; font-size: .68rem; }
  .hero-h { margin-bottom: 1.6rem; line-height: .9; }
  .l1 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .l2 { font-size: clamp(3rem, 14vw, 5.5rem); }
  .hero-price-num { font-size: clamp(2.4rem,13vw,3.6rem); }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .hero-sub { max-width: 100%; font-size: .95rem; }
  .hero-btns { flex-direction: column; align-items: stretch; width: 100%; gap: .8rem; }
  .hero-btns .btn { justify-content: center; padding: 1rem; font-size: .9rem; }
  .hero-scroll-hint { display: none; }
  .hero-reassurance { padding: 1rem 1.5rem; gap: 1rem; flex-direction: column; text-align: center; }

  .page-hero { padding: 7.5rem 1.5rem 3.5rem; }

  .ticker-item { font-size: .72rem; }

  .stats { padding: 3.5rem 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat { padding: 2rem 1.5rem; }
  .stat-num { font-size: clamp(2.8rem,14vw,4.5rem); }

  .about, .sect-light, .sect-dark, .sect-dark2, .work, .process, .cta { padding-left: 1.5rem; padding-right: 1.5rem; }
  .about { padding-top: 5rem; padding-bottom: 5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-h { font-size: clamp(2.2rem,10vw,3.4rem); }
  .about-sig { font-size: clamp(3rem,16vw,5rem); }
  .photo-frame { aspect-ratio: 4/3; max-height: none; border-radius: 1.2rem; }
  .about-badge { right: 1rem; bottom: 1rem; }

  .sect-light, .sect-dark, .sect-dark2 { padding-top: 5rem; padding-bottom: 5rem; }
  .section-h { font-size: clamp(1.9rem,8.5vw,3rem); }

  .work { padding-top: 5rem; padding-bottom: 5rem; }
  .work-grid { grid-template-columns: 1fr; }
  .wcard.w-large { grid-column: span 1; aspect-ratio: 4/3; }

  .form-section { padding: 2rem 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }

  .process { padding: 5rem 1.5rem; }
  .steps {
    display: flex; flex-direction: column;
    gap: 0; position: relative;
    padding-left: 2.5rem;
  }
  .steps::before {
    content: '';
    position: absolute; left: 7px; top: 12px; bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, var(--orange), var(--yellow));
    border-radius: 2px;
  }
  .step {
    border-radius: 0 1rem 1rem 0 !important;
    padding: 1.6rem 1.4rem;
    position: relative;
    background: transparent !important;
    border-bottom: 1px solid var(--bd);
  }
  .step:last-child { border-bottom: none; }
  .step::before {
    content: '';
    position: absolute; left: -2.5rem; top: 1.8rem;
    width: 16px; height: 16px;
    background: var(--dark-2);
    border: 2.5px solid var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(232,67,27,.5);
  }
  .step:hover { background: transparent !important; }
  .step::after { display: none; }
  .step-name { font-size: 1.4rem; }

  .cta { padding: 6rem 1.5rem 8rem; }
  .cta-h { margin-bottom: 1.6rem; }
  .cta-sub { font-size: .9rem; margin-bottom: 2.4rem; }

  .footer { padding: 2.5rem 1.5rem 7rem; }
  .footer-inner { flex-direction: column; gap: 1.2rem; text-align: center; }
  .footer-nav { justify-content: center; }

  .m-bar { display: flex; }
}
