/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --black:        #0F0F0F;
  --black-soft:   #1A1A1A;
  --black-card:   #252525;
  --white:        #ffffff;
  --off-white:    #FFFFFF;
  --orange:       #E8850A;
  --orange-dark:  #F5960F;
  --orange-glow:  rgba(232,133,10,0.45);
  --gray-700:     #6B6B6B;
  --gray-500:     #6B6B6B;
  --gray-300:     #E2DED8;
  --gray-100:     #F5F2EE;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --container: 1240px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--off-white);
  color:var(--black);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .container{ padding:0 20px; } }
@media (max-width:480px){ .container{ padding:0 16px; } }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--orange); color:var(--white);
  padding:12px 20px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

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

.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--orange); display:inline-block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-family:var(--font-body); font-weight:600;
  font-size:15px; border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--orange); color:var(--white); }
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--orange-glow); }
.btn-ghost-dark{ border-color:rgba(255,255,255,.28); color:var(--white); }
.btn-ghost-dark:hover{ border-color:var(--white); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.btn-ghost-light{ border-color:rgba(10,10,10,.2); color:var(--black); }
.btn-ghost-light:hover{ border-color:var(--black); background:rgba(10,10,10,.05); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Signature element: pipe/flow line divider ------------------------- */
.flow-divider{ position:relative; height:90px; overflow:hidden; }
.flow-divider svg{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; max-width:1400px; height:100%; }
.flow-path{
  fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.6s var(--ease);
}
.flow-divider.is-visible .flow-path{ stroke-dashoffset:0; }
.flow-node{ fill:var(--orange); opacity:0; transition:opacity .4s ease .9s; }
.flow-divider.is-visible .flow-node{ opacity:1; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  background:rgba(10,10,10,.82); backdrop-filter:blur(14px); padding:14px 0;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:88px; width:auto; display:block; transition:height .4s var(--ease); }
.site-header.is-scrolled .logo img{ height:62px; }
.footer-logo img{ height:82px; width:auto; display:block; }
@media (max-width:640px){
  .logo img{ height:60px; }
  .site-header.is-scrolled .logo img{ height:48px; }
  .footer-logo img{ height:64px; }
}

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.9); position:relative; padding:4px 0;
  transition:color .25s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--orange); transition:width .3s var(--ease);
}
.main-nav a:hover{ color:var(--white); }
.main-nav a:hover::after{ width:100%; }

/* --- Onglet "Test de l'eau" : mis en avant discrètement --- */
.main-nav a.nav-highlight{ color:var(--white); }
.main-nav a.nav-highlight::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--orange);
  display:inline-block; margin-right:7px; vertical-align:middle;
}

/* --- Le menu compte 8 entrées : on resserre avant qu'il ne déborde --- */
@media (min-width:961px) and (max-width:1300px){
  .main-nav{ gap:20px; }
  .main-nav a{ font-size:13.5px; }
  .main-nav .btn-primary{ padding:13px 20px; font-size:14px; }
}

.header-actions{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:none; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; transition:transform .3s var(--ease), opacity .25s; }

@media (max-width:960px){
  /* Panneau plein écran, verrouillé : il ne défile pas avec la page */
  .main-nav{
    position:fixed; top:0; left:0; right:0; bottom:0;
    width:100vw; height:100vh; height:100dvh;
    background:#0F0F0F;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:110px 24px 48px;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:none; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), visibility .3s var(--ease);
    z-index:105;
  }
  .main-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
  .main-nav a{
    font-size:21px; padding:14px 10px; width:100%; max-width:340px; text-align:center;
    color:var(--white);
  }
  .main-nav a::after{ display:none; }
  .main-nav a:active{ color:var(--orange); }
  .nav-toggle{ display:block; position:relative; z-index:120; }
  .nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .header-actions .btn-primary{ display:none; }
  .main-nav .btn-primary{ display:inline-flex; margin-top:18px; width:auto; }
  /* Blocage du défilement de la page en arrière-plan */
  body.nav-open{ overflow:hidden; }
  /* Les ancres ne passent plus sous le header fixe */
  #accueil,#a-propos,#services,#realisations,#partenaires,#avis,#contact{ scroll-margin-top:86px; }
}

@media (max-width:768px){
  /* Masquer les boutons "Demander un devis" qui se chevauchent sur mobile */
  .hero .btn-primary:first-of-type ~ .btn-primary,
  .services .btn-primary:first-of-type ~ .btn-primary,
  .cta-section:nth-child(n+2) .btn-primary {
    display: none !important;
  }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:var(--black); color:var(--white);
  padding-top:140px; padding-bottom:0;
  overflow:hidden; isolation:isolate;
}
/* Couche 1 — la photo, sur son propre calque pour pouvoir la retoucher
   (contraste et densité) sans jamais toucher au texte posé dessus. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url('../images/accueil.jpg') center 52%/cover no-repeat;
  filter:contrast(1.06) saturate(1.05);
  transform:scale(1.04);
  animation:heroZoom 26s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.11); } to{ transform:scale(1.02); } }

/* Couche 2 — voile léger. La photo étant déjà sombre, on assombrit très peu :
   juste assez sous le texte et en haut pour le menu. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,8,8,.66) 0%, rgba(8,8,8,.16) 20%, transparent 40%),
    linear-gradient(97deg, rgba(6,6,6,.8) 0%, rgba(8,8,8,.56) 24%, rgba(10,10,10,.24) 48%, rgba(12,12,12,.06) 68%, transparent 82%),
    linear-gradient(180deg, transparent 48%, rgba(8,8,8,.78) 82%, var(--black) 100%);
}
@media (max-width:900px){
  .hero::before{ background-position:center 45%; animation:none; transform:none; }
  .hero::after{
    background:
      linear-gradient(180deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.28) 26%, rgba(8,8,8,.5) 58%, rgba(8,8,8,.9) 86%, var(--black) 100%);
  }
}
.hero-inner{ position:relative; z-index:1; padding-bottom:110px; width:100%; }
.hero-title{
  font-size:clamp(2.4rem, 5.4vw, 4.6rem); line-height:1.04; max-width:16ch; font-weight:600;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.hero-title .accent{ color:var(--orange); }
.hero-subtitle{
  margin-top:26px; max-width:52ch; font-size:18px; color:rgba(255,255,255,.85); font-weight:400;
}
.hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12);
  margin-top:64px; border-top:1px solid rgba(255,255,255,.12);
}
.hero-stat{ background:rgba(10,10,10,.42); backdrop-filter:blur(6px); padding:26px 24px; }
.hero-stat .num{ font-family:var(--font-mono); color:var(--orange); font-size:13px; letter-spacing:.05em; }
.hero-stat .label{ margin-top:8px; font-size:15px; font-weight:500; color:var(--white); }
@media (max-width:900px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   4. SECTION HEADERS (generic)
   ========================================================================== */
.section{ padding:120px 0; }
.section--tight{ padding:90px 0; }
@media (max-width:768px){ .section{ padding:80px 0; } }
@media (max-width:480px){ .section{ padding:50px 0; } }
.section-head{ max-width:640px; margin-bottom:64px; }
@media (max-width:480px){ .section-head{ margin-bottom:40px; } }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); }
.section-head .desc{ margin-top:18px; color:var(--gray-700); font-size:16.5px; }
.section--dark{ background:var(--black); color:var(--white); }
.section--dark .section-head .desc{ color:rgba(255,255,255,.8); }

/* ==========================================================================
   5. À PROPOS
   ========================================================================== */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:center; }
@media (max-width:900px){ .about{ grid-template-columns:1fr; gap:44px; } }
.about-photo{
  aspect-ratio:4/5; border-radius:var(--radius-l); background:linear-gradient(160deg,#F5F2EE,#E2DED8);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.about-photo .slot-label{ font-family:var(--font-mono); font-size:12px; color:var(--gray-700); border:1px dashed var(--gray-500); padding:10px 16px; border-radius:8px; }
.about-photo .caption{
  position:absolute; left:20px; bottom:20px; background:var(--black); color:var(--white);
  padding:14px 18px; border-radius:var(--radius-m); font-size:14px; max-width:220px;
}
.about-photo .caption strong{ display:block; font-family:var(--font-display); font-size:16px; }
.about-photo .caption span{ color:rgba(255,255,255,.78); font-size:12.5px; }

.about-values{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
.value-item{ display:flex; align-items:center; gap:12px; font-weight:500; font-size:15px; }
.value-item .mark{ width:8px; height:8px; border-radius:2px; background:var(--orange); transform:rotate(45deg); flex:none; }
@media (max-width:520px){ .about-values{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. SERVICES — ACCORDION
   ========================================================================== */
/* ==========================================================================
   PAGE SERVICES — « sommaire vivant »
   Un index vertical à gauche, le détail du métier à droite.
   Rien à déplier : un clic change le panneau affiché.
   ========================================================================== */
.sv{
  padding:112px 0;
  background:
    radial-gradient(760px 380px at 88% 2%, rgba(232,133,10,.1), transparent 62%),
    linear-gradient(180deg, var(--gray-100) 0%, #FBFAF8 40%, var(--white) 100%);
}
@media (max-width:768px){ .sv{ padding:70px 0; } }

/* --- Bandeau visuel --- */
.sv-banner{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  margin-bottom:56px; aspect-ratio:1024/400; background:var(--gray-100);
}
.sv-banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.07); transition:transform 1.4s var(--ease);
}
.sv-banner:hover img{ transform:scale(1); }
.sv-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(8,8,8,.84) 0%, rgba(10,10,10,.55) 36%, rgba(12,12,12,.1) 64%, transparent 84%);
}
.sv-banner-text{ position:absolute; z-index:2; left:clamp(22px,4vw,52px); bottom:clamp(22px,4vw,44px); right:24px; color:var(--white); }
.sv-banner .tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--orange);
  border:1px solid rgba(232,133,10,.5); background:rgba(232,133,10,.12);
  padding:7px 14px; border-radius:999px;
}
.sv-banner .line{
  margin-top:16px; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.4vw,2.6rem); line-height:1.16; text-shadow:0 2px 20px rgba(0,0,0,.4);
}
@media (max-width:640px){ .sv-banner{ aspect-ratio:4/3; } .sv-banner .line br{ display:none; } }

/* --- Disposition en deux colonnes --- */
.sv-layout{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:900px){ .sv-layout{ grid-template-columns:1fr; gap:26px; } }

/* --- Index des métiers --- */
.sv-index{ position:sticky; top:100px; display:flex; flex-direction:column; }
@media (max-width:900px){
  .sv-index{
    position:static; flex-direction:row; gap:8px; overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .sv-index::-webkit-scrollbar{ height:0; }
}
.idx-item{
  position:relative; display:flex; align-items:center; gap:14px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--gray-300);
  padding:17px 6px 17px 0; text-align:left; color:var(--gray-700);
  transition:color .3s, padding-left .4s var(--ease);
}
.idx-item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; background:var(--orange); border-radius:3px;
  transition:height .4s var(--ease);
}
.idx-item:hover{ color:var(--black); padding-left:12px; }
.idx-item:hover::before{ height:34%; }
.idx-item.is-active{ color:var(--black); padding-left:16px; }
.idx-item.is-active::before{ height:76%; }
.idx-num{ font-family:var(--font-mono); font-size:12px; color:var(--orange); letter-spacing:.08em; }
.idx-name{ font-family:var(--font-display); font-size:17.5px; font-weight:600; letter-spacing:-.01em; }
.idx-arrow{ margin-left:auto; opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s var(--ease); color:var(--orange); }
.idx-item.is-active .idx-arrow{ opacity:1; transform:translateX(0); }
@media (max-width:900px){
  .idx-item{
    width:auto; flex:none; scroll-snap-align:start; white-space:nowrap;
    border:1px solid var(--gray-300); border-radius:999px; padding:11px 18px; background:var(--white);
  }
  .idx-item::before{ display:none; }
  .idx-item:hover, .idx-item.is-active{ padding-left:18px; }
  .idx-item.is-active{ background:var(--black); border-color:var(--black); color:var(--white); }
  .idx-item.is-active .idx-name{ color:var(--white); }
  .idx-arrow{ display:none; }
}

/* --- Panneau de détail --- */
.sv-stage{
  position:relative; background:var(--white); border:1px solid var(--gray-300);
  border-radius:var(--radius-l); padding:clamp(28px,4vw,52px); overflow:hidden;
  box-shadow:0 30px 64px -44px rgba(0,0,0,.3);
}
/* Liseré orange en haut du panneau */
.sv-stage::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--orange), rgba(232,133,10,.25) 55%, transparent);
}
.sv-panel[hidden]{ display:none; }
.sv-panel{ animation:svIn .5s var(--ease) both; }
@keyframes svIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* Numéro en filigrane */
.sv-num{
  position:absolute; top:clamp(10px,2vw,20px); right:clamp(16px,3vw,34px);
  font-family:var(--font-display); font-weight:700; font-size:clamp(3.4rem,8vw,6.4rem);
  line-height:1; color:rgba(10,10,10,.045); letter-spacing:-.04em; pointer-events:none; user-select:none;
}
.sv-title{
  position:relative; font-family:var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.05;
}
.sv-lead{
  margin-top:12px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.sv-desc{ margin-top:20px; max-width:58ch; font-size:16.5px; color:var(--gray-700); }
.sv-count{
  margin-top:32px; padding-bottom:12px; border-bottom:1px solid var(--gray-300);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-500);
}

/* Prestations, en apparition décalée */
.sv-tags{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px 30px; }
@media (max-width:520px){ .sv-tags{ grid-template-columns:1fr; } }
.sv-tags li{
  position:relative; padding-left:18px; font-size:14.5px; line-height:1.6; color:var(--gray-700);
  animation:tagIn .45s var(--ease) both; transition:color .25s;
}
.sv-tags li:hover{ color:var(--black); }
.sv-tags li::before{
  content:""; position:absolute; left:0; top:.72em; width:8px; height:1px;
  background:var(--orange); transition:width .3s var(--ease);
}
.sv-tags li:hover::before{ width:13px; }
@keyframes tagIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:translateX(0); } }
.sv-tags li:nth-child(1){ animation-delay:.10s; }
.sv-tags li:nth-child(2){ animation-delay:.14s; }
.sv-tags li:nth-child(3){ animation-delay:.18s; }
.sv-tags li:nth-child(4){ animation-delay:.22s; }
.sv-tags li:nth-child(5){ animation-delay:.26s; }
.sv-tags li:nth-child(6){ animation-delay:.30s; }
.sv-tags li:nth-child(7){ animation-delay:.34s; }
.sv-tags li:nth-child(8){ animation-delay:.38s; }
.sv-tags li:nth-child(9){ animation-delay:.42s; }
.sv-tags li:nth-child(n+10){ animation-delay:.46s; }

.sv-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-size:14.5px; font-weight:600; color:var(--orange);
  border-bottom:1px solid rgba(232,133,10,.35); padding-bottom:3px;
  transition:gap .3s var(--ease), border-color .3s;
}
.sv-cta:hover{ gap:14px; border-bottom-color:var(--orange); }
.sv-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   7. RÉALISATIONS — GALERIE
   ========================================================================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{
  padding:11px 20px; border-radius:999px; border:1px solid var(--gray-300); background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--gray-700); transition:all .3s var(--ease);
}
.filter-btn:hover{ border-color:var(--orange); color:var(--orange); }
.filter-btn.is-active{ background:var(--black); border-color:var(--black); color:var(--white); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px;
}
.gallery-item{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-m); overflow:hidden; cursor:zoom-in;
  background:linear-gradient(150deg,#E2DED8,#C9C3BA);
}
.gallery-item .slot-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11.5px; color:rgba(10,10,10,.55); text-align:center; padding:10px;
}
.gallery-item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%);
  opacity:0; transition:opacity .35s;
}
.gallery-item .gtag{
  position:absolute; left:14px; bottom:14px; color:var(--white); font-size:13px; font-weight:600;
  opacity:0; transform:translateY(8px); transition:all .35s var(--ease); z-index:1;
}
.gallery-item:hover{ transform:scale(1.015); }
.gallery-item:hover::after, .gallery-item:hover .gtag{ opacity:1; transform:translateY(0); }
.gallery-item img, .gallery-item .ph-inner{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover .ph-inner{ transform:scale(1.08); }
.gallery-item[hidden]{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.is-open{ display:flex; }
.lightbox-box{ max-width:1000px; width:100%; aspect-ratio:16/10; background:#252525; border-radius:var(--radius-m); position:relative; display:flex; align-items:center; justify-content:center; }
.lightbox-close{
  position:absolute; top:-52px; right:0; background:none; border:1px solid rgba(255,255,255,.3);
  color:var(--white); width:40px; height:40px; border-radius:50%; font-size:18px;
}
/* Navigation interne à la catégorie affichée */
.lightbox-nav{
  position:absolute; top:50%; margin-top:-23px; z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.28);
  color:var(--white); font-size:26px; line-height:1; padding-bottom:3px;
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox-nav:hover{ background:var(--orange); border-color:var(--orange); }
.lightbox-prev{ left:14px; }
.lightbox-next{ right:14px; }
.lightbox-nav[hidden]{ display:none; }
.lightbox-counter{
  position:absolute; bottom:-32px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.65);
}
@media (max-width:600px){
  .lightbox{ padding:20px; }
  .lightbox-nav{ width:38px; height:38px; margin-top:-19px; font-size:22px; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
}

/* ==========================================================================
   8. PARTENAIRES
   ========================================================================== */
.partners-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:800px){ .partners-grid{ grid-template-columns:1fr; } }
.partner-card{
  background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-l);
  padding:40px; display:flex; flex-direction:column; gap:20px;
}
.partner-logo-slot{
  width:120px; height:56px; border:1px dashed var(--gray-500); border-radius:var(--radius-s);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10.5px; color:var(--gray-500);
}
.partner-logo-slot.has-logo{
  width:auto; height:96px; border:none; padding:0; justify-content:flex-start;
}
.partner-logo-slot.has-logo img{ height:100%; width:auto; object-fit:contain; }
.partner-card h3{ font-size:22px; }
.partner-card p{ color:var(--gray-700); font-size:15px; }
.partner-link{ font-weight:600; color:var(--orange); font-size:14px; display:inline-flex; align-items:center; gap:6px; }

/* ==========================================================================
   9. AVIS CLIENTS
   ========================================================================== */
/* ==========================================================================
   PAGE AVIS CLIENTS
   ========================================================================== */

/* --- Bandeau de titre avec la note moyenne --- */
.rv-hero{
  position:relative; background:var(--black); color:var(--white);
  padding:178px 0 92px; overflow:hidden;
}
.rv-hero::before{
  content:""; position:absolute; top:-200px; left:-120px; width:640px; height:640px;
  background:radial-gradient(closest-side, rgba(232,133,10,.17), transparent 72%); pointer-events:none;
}
/* Guillemet géant en filigrane */
.rv-hero::after{
  content:"“"; position:absolute; right:2vw; top:-4vw; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:30vw; line-height:1;
  color:rgba(255,255,255,.04); pointer-events:none; user-select:none;
}
.rv-hero .container{ position:relative; z-index:1; }
.rv-hero .breadcrumb{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:26px;
}
.rv-hero .breadcrumb a:hover{ color:var(--orange); }
.rv-hero-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media (max-width:820px){ .rv-hero-grid{ grid-template-columns:1fr; gap:38px; } }
.rv-hero h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(2rem,4.6vw,3.7rem); line-height:1.05;
}
.rv-hero h1 .accent{ color:var(--orange); }
.rv-hero .lead{ margin-top:24px; max-width:52ch; font-size:16.5px; color:rgba(255,255,255,.76); }
.rv-hero-btn{ margin-top:32px; }
.rv-hero-rule{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--orange) 0%, rgba(232,133,10,.35) 22%, rgba(255,255,255,.08) 55%, transparent 100%);
}
@media (max-width:768px){ .rv-hero{ padding:130px 0 66px; } }

/* Encadré de la note moyenne */
.rv-score{
  background:linear-gradient(160deg,#161616,#0D0D0D); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-l); padding:34px 30px; text-align:center;
}
.rv-score-num{
  font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,6vw,4.4rem);
  line-height:1; letter-spacing:-.03em; color:var(--white);
}
.rv-score-stars{ margin-top:12px; font-size:22px; color:var(--orange); letter-spacing:3px; }
.rv-score-meta{ margin-top:14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.rv-score-note{ margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.45); }

/* --- Liste des avis --- */
.rv-list{ background:linear-gradient(180deg, var(--gray-100) 0%, #FBFAF8 60%, var(--white) 100%); }
.rv-list-head{ margin-bottom:40px; }
.rv-list-head h2{ font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; }
.rv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .rv-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .rv-grid{ grid-template-columns:1fr; } }

.review-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-l);
  padding:30px 28px; overflow:hidden;
  animation:rvIn .55s var(--ease) both;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
@keyframes rvIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.review-card:nth-child(2){ animation-delay:.07s; }
.review-card:nth-child(3){ animation-delay:.14s; }
.review-card:nth-child(n+4){ animation-delay:.2s; }
.review-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.review-card:hover{ transform:translateY(-5px); box-shadow:0 30px 56px -34px rgba(0,0,0,.3); }
.review-card:hover::before{ transform:scaleX(1); }
.review-card .stars{ font-size:15px; color:var(--orange); letter-spacing:2px; }
.review-card .comment{ font-size:15px; line-height:1.65; color:var(--gray-700); flex:1; }
.review-card .review-photo-slot{
  border:1px dashed var(--gray-300); border-radius:var(--radius-m); padding:16px;
  text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--gray-500);
}
.review-card .meta{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding-top:14px; border-top:1px solid var(--gray-300); font-size:13px; color:var(--gray-500);
}
.review-card .meta strong{ color:var(--black); font-weight:600; font-family:var(--font-display); font-size:15px; }

/* État vide */
.reviews-empty{
  grid-column:1/-1; text-align:center; padding:64px 26px;
  border:1px dashed var(--gray-300); border-radius:var(--radius-l); background:var(--white);
}
.reviews-empty p{ margin:6px 0; font-size:15px; color:var(--gray-700); }
.reviews-empty p:first-child{
  font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--black);
}

/* --- Formulaire --- */
.rv-form-section{ background:var(--black); color:var(--white); }
.rv-form-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,70px); align-items:start; }
@media (max-width:900px){ .rv-form-grid{ grid-template-columns:1fr; gap:40px; } }
.rv-form-intro h2{ margin-top:6px; font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; }
.rv-form-intro .body{ margin-top:18px; color:rgba(255,255,255,.75); font-size:16px; max-width:48ch; }
.rv-tips{ margin-top:30px; display:flex; flex-direction:column; gap:2px; }
.rv-tips li{
  display:flex; align-items:center; gap:16px; padding:15px 4px;
  border-top:1px solid rgba(255,255,255,.13); font-size:15px; color:rgba(255,255,255,.86);
  transition:padding-left .35s var(--ease), color .3s;
}
.rv-tips li:last-child{ border-bottom:1px solid rgba(255,255,255,.13); }
.rv-tips li:hover{ padding-left:12px; color:var(--white); }
.rv-tips .n{ font-family:var(--font-mono); font-size:12px; color:var(--orange); letter-spacing:.1em; }

.rv-form-card{
  background:var(--white); color:var(--black); border-radius:var(--radius-l);
  padding:clamp(26px,3.4vw,44px); box-shadow:0 40px 80px -46px rgba(0,0,0,.75);
}
.rv-form-card .field{ margin-bottom:24px; }
.rv-form-card .field label{
  display:block; font-family:var(--font-mono); font-size:11px; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--gray-500); margin-bottom:10px;
}
.rv-form-card .field label .opt{ text-transform:none; letter-spacing:0; }
.rv-form-card input[type=text], .rv-form-card textarea{
  width:100%; background:var(--gray-100); border:1px solid var(--gray-300); border-radius:10px;
  padding:13px 15px; font-family:inherit; font-size:15px; color:inherit;
  transition:border-color .25s, background .25s;
}
.rv-form-card input[type=text]:focus, .rv-form-card textarea:focus{
  border-color:var(--orange); background:var(--white); outline:none;
}
.rv-form-card textarea{ resize:vertical; min-height:120px; }

/* Étoiles cliquables */
.rating-picker{ display:flex; gap:6px; }
.rating-picker button{
  background:none; border:none; padding:2px; font-size:30px; line-height:1;
  color:var(--gray-300); transition:color .2s, transform .25s var(--ease);
}
.rating-picker button:hover{ transform:scale(1.14); }
.rating-picker button.is-selected{ color:var(--orange); }

/* Piège à robots : masqué aux visiteurs, lu par les robots */
.rv-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Message de retour après envoi */
.rv-message{ margin-top:16px; font-size:14px; line-height:1.55; display:none; }
.rv-message.is-error{ display:block; color:#B91C1C; }
.rv-message.is-success{
  display:block; color:#166534; background:#EBF7EF; border-left:3px solid #1F9D55;
  padding:13px 16px; border-radius:0 8px 8px 0;
}
.rv-submit{ width:100%; margin-top:6px; }
.rv-legal{ margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--gray-500); }

/* ==========================================================================
   10. FORMULAIRES
   ========================================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; gap:14px; } }
@media (max-width:480px){ .form-grid{ gap:10px; } }
.field label{ display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; color:var(--gray-500); }
.section--dark .field label{ color:rgba(255,255,255,.72); }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(0,0,0,.2);
  padding:12px 2px; font-family:inherit; font-size:15px; color:inherit; transition:border-color .3s;
}
.section--dark .field input, .section--dark .field select, .section--dark .field textarea{ border-bottom-color:rgba(255,255,255,.25); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:96px; }
.file-drop{
  border:1px dashed rgba(255,255,255,.3); border-radius:var(--radius-m); padding:22px; text-align:center;
  font-size:13.5px; color:rgba(255,255,255,.72); margin-top:6px;
}
.section:not(.section--dark) .file-drop{ border-color:var(--gray-300); color:var(--gray-500); }

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-info-item{ padding:24px 0; border-top:1px solid rgba(255,255,255,.12); }
.contact-info-item:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.contact-info-item .label{ font-family:var(--font-mono); font-size:11.5px; color:var(--orange); letter-spacing:.08em; text-transform:uppercase; }
.contact-info-item .value{ margin-top:8px; font-family:var(--font-display); font-size:22px; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer{ background:#0F0F0F; color:rgba(255,255,255,.8); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-col h4{ color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; font-size:14.5px; }
.footer-col a:hover{ color:var(--orange); }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
  position:relative; width:38px; height:38px; border-radius:11px;
  border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); overflow:hidden;
  transition:border-color .35s, color .35s, transform .35s var(--ease);
}
/* Dégradé Instagram, révélé au survol */
.footer-social a::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease);
  background:linear-gradient(45deg,#F09433 0%,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888 100%);
}
.footer-social a:hover{ border-color:transparent; color:#fff; transform:translateY(-2px); }
.footer-social a:hover::before{ opacity:1; }
.footer-social svg{
  position:relative; z-index:1; width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:13px; }

/* Utility */
.mt-lg{ margin-top:60px; }

/* ==========================================================================
   LEGAL MODAL — Modales pour Mentions légales & Politique de confidentialité
   ========================================================================== */
.legal-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(15,15,15,.75); backdrop-filter:blur(6px);
  align-items:flex-start; justify-content:center;
  padding:60px 20px;
  overflow-y:auto;
}
.legal-overlay.open{display:flex;}
.legal-modal{
  background:var(--off-white); border-radius:18px; max-width:700px; width:100%;
  padding:40px 40px 46px; position:relative; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.legal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--gray-300); background:var(--off-white); font-size:16px; color:var(--black); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.legal-close:hover{background:var(--gray-100); border-color:var(--gray-300);}
.legal-panel h2{font-size:24px; margin-bottom:22px; font-family:var(--font-display); color:var(--black);}
.legal-panel h3{font-size:14.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin:22px 0 8px; font-family:var(--font-mono);}
.legal-panel h3:first-of-type{margin-top:0;}
.legal-panel p{font-size:14.5px; line-height:1.7; color:var(--gray-700); margin:0 0 4px;}
.legal-panel a{color:var(--orange); font-weight:600;}
.legal-panel a:hover{text-decoration:underline;}

/* ==========================================================================
   PAGE LÉGALE — styles additionnels
   ========================================================================== */
.legal-hero{
  padding:170px 0 60px; background:var(--black);
}
.legal-hero .eyebrow{ margin-bottom:14px; }
.legal-hero h1{ color:var(--white); font-size:clamp(30px,4vw,44px); }
.legal-hero p{ color:rgba(255,255,255,.72); margin-top:14px; font-size:15.5px; max-width:640px; }

.legal-content{ padding:70px 0 100px; background:var(--off-white); }
.legal-content .container{ max-width:880px; }
.legal-block{ margin-bottom:44px; }
.legal-block h2{
  font-size:20px; color:var(--black); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--gray-300);
}
.legal-block h3{ font-size:16px; margin:18px 0 8px; color:var(--black); }
.legal-block p, .legal-block li{ color:var(--gray-700); font-size:15px; line-height:1.75; }
.legal-block ul{ padding-left:20px; margin:10px 0; }
.legal-block li{ list-style:disc; margin-bottom:6px; }
.legal-block a{ color:var(--orange); font-weight:600; }
.legal-block a:hover{ text-decoration:underline; }

.legal-placeholder{
  display:inline-block; background:var(--gray-100); border:1px dashed var(--gray-500);
  border-radius:4px; padding:1px 8px; font-family:var(--font-mono); font-size:13.5px;
  color:var(--gray-700);
}
.legal-updated{
  font-family:var(--font-mono); font-size:12.5px; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:30px;
}
.legal-back{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  color:var(--black); margin-bottom:26px;
}
.legal-back:hover{ color:var(--orange); }


/* ==========================================================================
   AJOUT — SITE MULTI-PAGES
   Styles nécessaires au découpage en pages séparées.
   ========================================================================== */

/* Bandeau de titre en haut des pages intérieures */
.page-hero{
  position:relative; background:linear-gradient(150deg,#161616 0%,var(--black) 70%);
  color:var(--white); padding:170px 0 78px; border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:768px){ .page-hero{ padding:130px 0 58px; } }
.page-hero .breadcrumb{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:20px;
}
.page-hero .breadcrumb a:hover{ color:var(--orange); }
.page-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.08; max-width:20ch; letter-spacing:-.02em; }
.page-hero .desc{ margin-top:20px; max-width:62ch; font-size:16.5px; color:rgba(255,255,255,.76); }

/* Onglet actif du menu */
.main-nav a.is-current{ color:var(--white); }
.main-nav a.is-current::after{ width:100%; }

/* Cartes de navigation (page d'accueil)
   Grille à filets : les cartes sont séparées par un trait d'1 px, sans
   espace, comme une grille éditoriale. Toutes rigoureusement identiques. */
.nav-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--gray-300); border:1px solid var(--gray-300);
  border-radius:var(--radius-l); overflow:hidden;
}
@media (max-width:900px){ .nav-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .nav-cards{ grid-template-columns:1fr; } }

.nav-card{
  position:relative; display:flex; flex-direction:column; min-height:270px;
  background:var(--white); color:var(--black); padding:38px 34px 34px;
  transition:background .45s var(--ease), color .45s var(--ease);
}
/* Filet orange qui se déploie en haut de la carte au survol */
.nav-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-card:hover::before, .nav-card:focus-visible::before{ transform:scaleX(1); }
.nav-card:hover, .nav-card:focus-visible{ background:var(--black); color:var(--white); }

.nav-card .idx{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; color:var(--orange);
}
.nav-card h3{
  margin-top:16px; font-family:var(--font-display); font-size:21px; font-weight:600;
  letter-spacing:-.01em; color:inherit;
}
.nav-card p{
  margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--gray-700);
  transition:color .45s var(--ease);
}
.nav-card:hover p, .nav-card:focus-visible p{ color:rgba(255,255,255,.72); }

/* Libellé + pastille fléchée, alignés en bas de chaque carte */
.nav-card .go{
  margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:12px;
  font-size:14px; font-weight:600; color:inherit;
}
.nav-card .go::after{
  content:"→"; margin-left:auto; width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gray-300); border-radius:50%; font-size:15px; color:var(--gray-700);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.nav-card:hover .go::after, .nav-card:focus-visible .go::after{
  background:var(--orange); border-color:var(--orange); color:var(--white); transform:translateX(4px);
}

/* Transition douce entre les cartes et les partenaires */
.tone-divider{
  position:relative; height:150px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--gray-100) 0%, #FAF8F5 55%, var(--white) 100%);
}
.tone-divider .glow{
  position:absolute; width:min(880px,90vw); height:320px;
  background:radial-gradient(closest-side, rgba(232,133,10,.18), rgba(232,133,10,.05) 55%, transparent 75%);
  opacity:0; transition:opacity 1.4s var(--ease);
}
.tone-divider .rule{
  position:relative; height:1px; width:0; max-width:min(820px,80vw);
  background:linear-gradient(90deg, transparent 0%, var(--gray-300) 16%, var(--orange) 50%, var(--gray-300) 84%, transparent 100%);
  transition:width 1.6s var(--ease);
}
.tone-divider .gem{
  position:absolute; width:9px; height:9px; background:var(--orange);
  transform:rotate(45deg) scale(0); box-shadow:0 0 0 6px rgba(232,133,10,.12);
  transition:transform .7s var(--ease) .5s;
}
.tone-divider.is-visible .glow{ opacity:1; }
.tone-divider.is-visible .rule{ width:min(820px,80vw); }
.tone-divider.is-visible .gem{ transform:rotate(45deg) scale(1); }
@media (max-width:640px){ .tone-divider{ height:110px; } }

/* Bandeau d'appel à l'action en bas de page */
.cta-band{ background:var(--black); color:var(--white); padding:70px 0; }
.cta-band .inner{ display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.cta-band h2{ font-family:var(--font-display); font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600; max-width:22ch; }
.cta-band p{ margin-top:12px; color:rgba(255,255,255,.72); font-size:15.5px; max-width:46ch; }
.cta-band .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   PAGE À PROPOS
   ========================================================================== */

/* --- Bandeau de titre --- */
.about-hero{
  position:relative; background:var(--black); color:var(--white);
  padding:180px 0 96px; overflow:hidden;
}
.about-hero::before{
  content:""; position:absolute; top:-180px; right:-140px; width:620px; height:620px;
  background:radial-gradient(closest-side, rgba(232,133,10,.2), transparent 72%);
  pointer-events:none;
}
/* Filigrane : le sigle en très grand, à peine visible */
.about-hero::after{
  content:"EGIDE"; position:absolute; right:-2vw; bottom:-3.2vw; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:19vw; line-height:.8;
  color:rgba(255,255,255,.035); letter-spacing:-.04em; pointer-events:none; user-select:none;
}
.about-hero .container{ position:relative; z-index:1; }
.about-hero .breadcrumb{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:22px;
}
.about-hero .breadcrumb a:hover{ color:var(--orange); }
.about-hero h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5vw,4rem); line-height:1.06;
}
.about-hero h1 .accent{ color:var(--orange); }
.about-hero .lead{ margin-top:26px; max-width:58ch; font-size:17px; color:rgba(255,255,255,.76); }
.about-hero-rule{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--orange) 0%, rgba(232,133,10,.35) 22%, rgba(255,255,255,.08) 55%, transparent 100%);
}
@media (max-width:768px){ .about-hero{ padding:132px 0 68px; } }

/* --- Portrait --- */
.portrait-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(40px,6vw,86px); align-items:center; }
@media (max-width:900px){ .portrait-grid{ grid-template-columns:1fr; gap:44px; } }
.portrait-media{ position:relative; }
.portrait-media img{
  position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
  border-radius:var(--radius-l); display:block;
}
/* Cadre orange décalé, en arrière-plan */
.portrait-media .frame{
  position:absolute; z-index:0; inset:26px -26px -26px 26px;
  border:1.5px solid var(--orange); border-radius:var(--radius-l);
}
.portrait-caption{
  position:absolute; z-index:2; left:22px; bottom:22px;
  background:var(--black); color:var(--white); padding:15px 20px; border-radius:var(--radius-m);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.6);
}
.portrait-caption strong{ display:block; font-family:var(--font-display); font-size:16.5px; font-weight:600; }
.portrait-caption span{ font-size:12.5px; color:rgba(255,255,255,.7); }
@media (max-width:900px){ .portrait-media .frame{ inset:20px -18px -20px 20px; } }

.portrait-copy .statement{
  margin-top:20px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.95rem); line-height:1.3; letter-spacing:-.015em;
  padding-left:26px; border-left:3px solid var(--orange);
}
.portrait-copy .body{ margin-top:22px; color:var(--gray-700); font-size:16.5px; max-width:56ch; }
.portrait-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* --- Domaines & zone --- */
.scope{ background:var(--black); color:var(--white); }
.scope-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,80px); align-items:start; }
@media (max-width:900px){ .scope-grid{ grid-template-columns:1fr; gap:52px; } }
.scope h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; color:var(--white); }
.scope-list{ margin-top:30px; border-top:1px solid rgba(255,255,255,.14); }
.scope-list li{
  display:flex; align-items:center; gap:18px; padding:15px 4px;
  border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--font-display);
  font-size:18px; font-weight:500; transition:padding-left .35s var(--ease), color .35s;
}
.scope-list li:hover{ padding-left:14px; color:var(--orange); }
.scope-list li span{ font-family:var(--font-mono); font-size:12px; color:var(--orange); letter-spacing:.1em; }
.scope-link{ display:inline-block; margin-top:26px; font-size:14.5px; font-weight:600; color:var(--orange); }
.scope-link:hover{ text-decoration:underline; }

.scope-zone{
  background:linear-gradient(160deg,#161616,#0D0D0D); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-l); padding:40px 36px;
}
.zone-title{
  margin-top:14px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.12; letter-spacing:-.02em;
}
.zone-text{ margin-top:18px; color:rgba(255,255,255,.68); font-size:15px; }
.zone-contacts{ margin-top:30px; display:grid; gap:12px; }
.zone-contacts a{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-m);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.zone-contacts a:hover{ border-color:var(--orange); background:rgba(232,133,10,.08); transform:translateX(4px); }
.zone-contacts .lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.zone-contacts .val{ font-family:var(--font-display); font-size:19px; font-weight:600; }