/* =====================================================================
   LES CLÉS DE MARJORIE — V2 « Architecture »
   Même contenu, même palette que la V1 — design repensé.
   Direction : éditorial / premium / architectural
   - typographie serif haute tension (Cormorant) + grotesque (Manrope)
   - grilles asymétriques, chevauchements, filets fins
   - images plein cadre avec filtres, parallaxe, révélations au scroll
   ===================================================================== */

/* -------------------------------------------------- */
/*  1. TOKENS (palette identique à la V1)             */
/* -------------------------------------------------- */
:root {
  --cream:        #F4EBDF;
  --cream-soft:   #FBF6EF;
  --cream-deep:   #ECE0D0;
  --ink:          #181B2C;
  --ink-2:        #20243A;   /* nuance de nuit */
  --ink-soft:     #3A3E50;
  --ink-muted:    #6E7180;
  --gold:         #B5853A;
  --gold-light:   #D4A857;
  --gold-deep:    #8C6526;
  --line:         #E0D3C1;
  --line-ink:     rgba(212,168,87,0.22);
  --white:        #FFFFFF;
  --gold-gradient: linear-gradient(120deg, var(--gold-deep), var(--gold) 50%, var(--gold-light));

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  --container: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --space: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --shadow: 0 40px 90px -30px rgba(24,27,44,0.45);
}

/* -------------------------------------------------- */
/*  2. RESET                                          */
/* -------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* -------------------------------------------------- */
/*  3. TYPOGRAPHIE                                    */
/* -------------------------------------------------- */
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); font-weight:500; line-height:1.04; letter-spacing:-0.01em; }
.display {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(3rem, 9vw, 8.5rem);
  line-height:0.98;
  letter-spacing:-0.02em;
}
h1 { font-size:clamp(2.8rem, 7vw, 6rem); font-weight:400; }
h2 { font-size:clamp(2.2rem, 5vw, 4.2rem); font-weight:400; }
h3 { font-size:clamp(1.5rem, 2.5vw, 2.1rem); }
p  { max-width:60ch; }
.lead { font-size:clamp(1.1rem, 1.5vw, 1.35rem); line-height:1.65; color:var(--ink-soft); }
em { font-style:italic; }
.italic { font-style:italic; font-family:var(--font-display); }

/* Étiquette technique en capitales espacées */
.label {
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--font-sans);
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold-deep);
}
.label::before { content:""; width:34px; height:1px; background:var(--gold); display:inline-block; }
.label--light { color:var(--gold-light); }
.label--plain::before { display:none; }

/* Grand numéro de section en contour */
.index {
  font-family:var(--font-display);
  font-size:clamp(3.5rem, 7vw, 6.5rem);
  line-height:1;
  font-weight:500;
  color:transparent;
  -webkit-text-stroke:1px var(--gold);
  text-stroke:1px var(--gold);
}

.text-gold { background:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* -------------------------------------------------- */
/*  4. LAYOUT                                         */
/* -------------------------------------------------- */
.wrap { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--space); position:relative; }
.bg-ink { background:var(--ink); color:rgba(244,235,223,0.8); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4 { color:var(--cream); }
.bg-cream-soft { background:var(--cream-soft); }
.hr { height:1px; background:var(--line); border:0; }
.bg-ink .hr { background:var(--line-ink); }

/* Grille 12 colonnes pour compositions asymétriques */
.grid12 { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:center; }
.col-7 { grid-column:span 7; } .col-6 { grid-column:span 6; } .col-5 { grid-column:span 5; }
.col-4 { grid-column:span 4; } .col-8 { grid-column:span 8; }
/* Blocs prestations (page Services) : image et texte alignés par le haut */
.svc-detail .grid12 { align-items:flex-start; }

/* Séparateur losange (motif logo) */
.diamond { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); display:inline-block; }

/* -------------------------------------------------- */
/*  5. BOUTONS / LIENS                                */
/* -------------------------------------------------- */
.btn {
  --c:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:0.7rem;
  padding:1.05rem 2.1rem;
  font-size:0.8rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  border:1px solid var(--c); color:var(--c);
  overflow:hidden; transition:color .5s var(--ease); z-index:0;
}
.btn::before { content:""; position:absolute; inset:0; background:var(--c); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1; }
.btn:hover { color:var(--cream); }
.btn:hover::before { transform:translateY(0); }
.btn svg { width:16px; height:16px; transition:transform .5s var(--ease); }
.btn:hover svg { transform:translateX(5px); }
.btn--gold { --c:var(--gold-deep); }
.btn--gold:hover { color:#fff; }
.btn--light { --c:var(--cream); color:var(--cream); }
.btn--light:hover { color:var(--ink); }
.btn--solid { background:var(--ink); color:var(--cream); }
.btn--solid::before { background:var(--gold-deep); }
.btn--solid:hover { color:#fff; }

.arrow {
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.78rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep);
  padding-bottom:0.4rem; border-bottom:1px solid var(--gold); width:fit-content;
}
.arrow svg { width:15px; transition:transform .5s var(--ease); }
.arrow:hover svg { transform:translateX(6px); }

/* -------------------------------------------------- */
/*  6. NAVIGATION                                     */
/* -------------------------------------------------- */
.header { position:fixed; inset:0 0 auto 0; z-index:100; transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease); padding-block:1.5rem; }
.header.scrolled { background:rgba(244,235,223,0.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); padding-block:0.85rem; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:flex; align-items:center; gap:0.8rem; z-index:110; }
.brand img { height:54px; width:auto; transition:height .5s var(--ease); }
.scrolled .brand img { height:44px; }
.brand b { font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--ink); line-height:1; display:block; white-space:nowrap; }
.brand span { font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-deep); }
/* En tête de hero (header transparent), texte clair */
.header:not(.scrolled) .brand b { color:var(--cream); text-shadow:0 1px 14px rgba(24,27,44,0.55); }
.header:not(.scrolled) .brand span { color:var(--gold-light); }
.header:not(.scrolled) .nav__links a { color:var(--cream); text-shadow:0 1px 14px rgba(24,27,44,0.55); }
.header:not(.scrolled) .nav__links a::after { background:var(--gold-light); }
.nav__links { display:flex; align-items:center; gap:clamp(1.4rem,2.4vw,2.6rem); }
.nav__links a { font-size:0.76rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); position:relative; padding-block:0.4rem; transition:color .4s var(--ease); }
.nav__links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .45s var(--ease); }
.nav__links a:hover::after, .nav__links a.active::after { width:100%; }
.nav__right { display:flex; align-items:center; gap:1.5rem; }

.burger { display:none; width:44px; height:44px; position:relative; z-index:120; flex:0 0 auto; margin-right:-10px; background:transparent; }
.burger span { position:absolute; left:50%; width:26px; margin-left:-13px; height:2px; background:var(--ink); transition:all .4s var(--ease); }
.header:not(.scrolled) .burger span { background:var(--cream); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:50%; transform:translateY(-50%);} .burger span:nth-child(3){ bottom:15px; }
.nav.open .burger span { background:var(--ink); }
.nav.open .burger span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg);}
.nav.open .burger span:nth-child(2){ opacity:0;}
.nav.open .burger span:nth-child(3){ bottom:50%; transform:translateY(50%) rotate(-45deg);}

/* Petit écran : titre compact pour ne pas chevaucher le burger */
@media (max-width:560px){
  .nav { gap:1rem; }
  .nav__right { flex:0 0 auto; }
  .brand { min-width:0; gap:0; }
  .brand img { display:none; }                 /* logo masqué sur mobile : toute la place au nom */
  .brand b { font-size:1.02rem; white-space:nowrap; }   /* nom complet, jamais tronqué */
  .brand > span > span { display:none; }        /* masque le sous-titre "Conciergerie · Grenoble" */
}

/* -------------------------------------------------- */
/*  7. HERO                                           */
/* -------------------------------------------------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; will-change:transform; }
/* Filtre image */
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(24,27,44,0.62) 0%, rgba(24,27,44,0.30) 30%, rgba(24,27,44,0.94) 100%),
    linear-gradient(90deg, rgba(24,27,44,0.72) 0%, rgba(24,27,44,0.28) 48%, rgba(24,27,44,0) 72%);
}
.hero__inner { position:relative; z-index:3; width:100%; padding-bottom:clamp(4rem,9vh,8rem); padding-top:9rem; }
.hero .label { color:var(--gold-light); margin-bottom:2rem; text-shadow:0 1px 16px rgba(24,27,44,0.6); }
.hero h1 { color:var(--cream); max-width:16ch; text-shadow:0 2px 34px rgba(24,27,44,0.55), 0 1px 3px rgba(24,27,44,0.4); }
.hero h1 .italic { color:var(--gold-light); }
.hero__lead { color:#F4EBDF; max-width:46ch; margin-top:2rem; font-size:1.22rem; text-shadow:0 1px 20px rgba(24,27,44,0.75), 0 1px 3px rgba(24,27,44,0.5); }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.8rem; }

/* Étiquette verticale décorative */
.hero__vertical { position:absolute; right:clamp(1rem,4vw,3rem); top:50%; transform:translateY(-50%); z-index:3; writing-mode:vertical-rl; font-size:0.72rem; letter-spacing:0.35em; text-transform:uppercase; color:rgba(244,235,223,0.6); display:flex; align-items:center; gap:1.2rem; }
.hero__vertical::after { content:""; height:70px; width:1px; background:rgba(212,168,87,0.6); }

/* Indicateur scroll */
.scrollcue { position:absolute; left:var(--gutter); bottom:1.6rem; z-index:3; font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(244,235,223,0.6); display:flex; align-items:center; gap:0.8rem; }
.scrollcue i { width:1px; height:42px; background:rgba(244,235,223,0.4); position:relative; overflow:hidden; }
.scrollcue i::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold-light); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue { to { top:120%; } }

/* Bandeau stats chevauchant le hero */
.overlap-stats {
  position:relative; z-index:5; margin-top:-72px;
  background:var(--cream); box-shadow:var(--shadow);
}
.overlap-stats .inner { display:grid; grid-template-columns:repeat(3,1fr); }
.stat { padding:clamp(1.8rem,3vw,2.8rem); border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat b { font-family:var(--font-display); font-weight:500; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--ink); display:block; line-height:1; }
.stat span { font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin-top:0.6rem; display:block; }

/* -------------------------------------------------- */
/*  8. CADRES IMAGE & CHEVAUCHEMENTS                   */
/* -------------------------------------------------- */
.figure { position:relative; overflow:hidden; }
.figure img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.figure:hover img { transform:scale(1.05); }
.figure--tall img { aspect-ratio:3/4; }
.figure--wide img { aspect-ratio:4/3; }
/* Filtre doux teinte ink, se dissipe au survol */
.figure--filter img { filter:saturate(0.85) contrast(1.02); }
.figure--filter::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(24,27,44,0.18), rgba(140,101,38,0.12)); transition:opacity .8s var(--ease); }
.figure--filter:hover::after { opacity:0; }

/* Cadre or décalé (chevauchement) */
.frame-offset { position:relative; }
.frame-offset::before { content:""; position:absolute; inset:0; border:1px solid var(--gold); transform:translate(24px,24px); z-index:-1; transition:transform .8s var(--ease); }
.frame-offset:hover::before { transform:translate(16px,16px); }

/* Image qui déborde vers la section précédente */
.pull-up { margin-top:clamp(-9rem,-10vw,-6rem); }

/* Carte flottante (chevauchement de blocs) */
.float-card { position:relative; z-index:4; background:var(--cream); padding:clamp(1.8rem,3vw,2.6rem); box-shadow:var(--shadow); }
.bg-ink .float-card { background:var(--ink-2); }

/* -------------------------------------------------- */
/*  9. SERVICES (liste éditoriale numérotée)          */
/* -------------------------------------------------- */
.svc { border-top:1px solid var(--line); }
.svc__row { display:grid; grid-template-columns:90px 1fr auto; gap:2rem; align-items:baseline; padding:clamp(1.6rem,2.6vw,2.4rem) 0; border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease); position:relative; }
.svc__row::before { content:""; position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg, rgba(212,168,87,0.10), transparent); transition:width .5s var(--ease); z-index:0; }
.svc__row:hover::before { width:100%; }
.svc__row:hover { padding-left:1.4rem; }
.svc__row > * { position:relative; z-index:1; }
.svc__num { font-family:var(--font-display); font-size:1.4rem; color:var(--gold); }
.svc__title { font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink); font-weight:500; }
.svc__desc { max-width:46ch; color:var(--ink-muted); font-size:0.98rem; }
@media (min-width:861px){ .svc__desc { text-align:right; } }

/* -------------------------------------------------- */
/* 10. PILIERS (pourquoi) — liste numérotée           */
/* -------------------------------------------------- */
.pillars { display:grid; gap:0; }
.pillar { display:grid; grid-template-columns:auto 1fr; gap:1.6rem; padding:1.8rem 0; border-bottom:1px solid var(--line-ink); align-items:start; }
.pillar:first-child { border-top:1px solid var(--line-ink); }
.pillar .n { font-family:var(--font-display); font-size:1.3rem; color:var(--gold-light); }
.pillar h3 { font-size:1.4rem; margin-bottom:0.4rem; }
.pillar p { color:rgba(244,235,223,0.7); font-size:0.98rem; }

/* -------------------------------------------------- */
/* 11. PROCESSUS (timeline)                           */
/* -------------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.step { padding:2.2rem 1.6rem 2.2rem 0; border-top:2px solid var(--gold); position:relative; }
.step .n { font-family:var(--font-display); font-size:clamp(2.6rem,4vw,3.6rem); color:var(--ink); line-height:1; display:block; margin-bottom:1rem; }
.step h3 { font-size:1.3rem; margin-bottom:0.5rem; }
.step p { font-size:0.95rem; color:var(--ink-muted); max-width:30ch; }

/* -------------------------------------------------- */
/* 12. MARQUEE (secteur dynamique)                    */
/* -------------------------------------------------- */
.marquee { overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:inline-flex; gap:2.5rem; align-items:center; animation:scrollx 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__item { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.6rem); font-weight:500; color:var(--cream); display:inline-flex; align-items:center; gap:2.5rem; }
.marquee__item::after { content:""; width:7px; height:7px; background:var(--gold-light); transform:rotate(45deg); }
@keyframes scrollx { to { transform:translateX(-50%); } }

/* Bandeau plein cadre avec image filtrée (secteur / cta) */
.banner { position:relative; overflow:hidden; }
.banner__bg { position:absolute; inset:0; z-index:0; }
.banner__bg img { position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; will-change:transform; }
.banner__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,27,44,0.82), rgba(24,27,44,0.88)); }
.banner > .wrap { position:relative; z-index:2; }

/* -------------------------------------------------- */
/* 13. CHIPS (communes)                               */
/* -------------------------------------------------- */
.zones { display:flex; flex-wrap:wrap; gap:0.6rem; }
.zone { padding:0.5rem 1.1rem; border:1px solid rgba(244,235,223,0.25); border-radius:100px; font-size:0.85rem; letter-spacing:0.04em; color:var(--cream); transition:all .4s var(--ease); }
.zone:hover { border-color:var(--gold-light); color:var(--gold-light); }
.zone strong { color:var(--gold-light); }

/* -------------------------------------------------- */
/* 14. TÉMOIGNAGES                                    */
/* -------------------------------------------------- */
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.quote { border:1px solid var(--line); padding:2.2rem; background:var(--cream-soft); }
.quote .stars { color:var(--gold); letter-spacing:0.25em; margin-bottom:1.2rem; }
.quote blockquote { font-family:var(--font-display); font-size:1.4rem; line-height:1.4; color:var(--ink); }
.quote cite { display:block; margin-top:1.4rem; font-style:normal; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); }

/* -------------------------------------------------- */
/* 15. FAQ                                            */
/* -------------------------------------------------- */
.faq { max-width:880px; margin-inline:auto; }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; text-align:left; font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.7rem); color:var(--ink); font-weight:500; }
.faq__ic { flex-shrink:0; width:24px; height:24px; position:relative; }
.faq__ic::before,.faq__ic::after { content:""; position:absolute; background:var(--gold-deep); transition:transform .45s var(--ease); }
.faq__ic::before { top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq__ic::after { left:50%; top:0; height:100%; width:2px; transform:translateX(-50%); }
.faq__item.open .faq__ic::after { transform:translateX(-50%) scaleY(0); }
.faq__a { max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.faq__a p { padding-bottom:1.6rem; color:var(--ink-soft); max-width:80ch; }

/* -------------------------------------------------- */
/* 16. FORMULAIRE                                     */
/* -------------------------------------------------- */
.form { display:grid; gap:1.4rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field { display:flex; flex-direction:column; gap:0.5rem; }
.field label { font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); }
.field input,.field select,.field textarea {
  font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:0.7rem 0; transition:border-color .4s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--gold); }
.field textarea { resize:vertical; min-height:120px; }
.consent { display:flex; gap:0.7rem; align-items:flex-start; font-size:0.82rem; color:var(--ink-muted); }
.consent input { margin-top:0.3rem; }
.form-success { display:none; padding:1rem 1.3rem; background:rgba(181,133,58,0.1); border:1px solid var(--gold-light); color:var(--gold-deep); font-weight:600; }
.contact-line { display:flex; gap:1.1rem; align-items:center; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.contact-line .ic { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--gold-light); color:var(--gold-deep); border-radius:50%; }
.contact-line .ic svg { width:20px; }
.contact-line h4 { font-family:var(--font-sans); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:0.15rem; }
.contact-line a,.contact-line p { font-size:1.15rem; color:var(--ink); font-family:var(--font-display); }

/* -------------------------------------------------- */
/* 17. PAGE-HERO (pages internes)                     */
/* -------------------------------------------------- */
.page-hero { position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.page-hero__bg { position:absolute; inset:0; z-index:0; }
.page-hero__bg img { position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; will-change:transform; }
.page-hero__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,27,44,0.5), rgba(24,27,44,0.82)); }
.page-hero .wrap { position:relative; z-index:2; padding-bottom:clamp(3rem,6vh,5rem); padding-top:9rem; }
.page-hero h1 { color:var(--cream); }
.page-hero .label { color:var(--gold-light); margin-bottom:1.6rem; }
.breadcrumb { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,235,223,0.6); margin-bottom:1.4rem; }
.breadcrumb a:hover { color:var(--gold-light); }

/* -------------------------------------------------- */
/* 18. FOOTER                                         */
/* -------------------------------------------------- */
.footer { background:var(--ink); color:rgba(244,235,223,0.65); padding-top:clamp(4rem,7vw,6rem); }
.footer__top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer__brand img { height:74px; margin-bottom:1.3rem; }
.footer__brand p { max-width:32ch; font-size:0.95rem; }
.footer h4 { color:var(--cream); font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:1.3rem; }
.footer ul { display:grid; gap:0.7rem; }
.footer a { font-size:0.95rem; transition:color .3s var(--ease); }
.footer a:hover { color:var(--gold-light); }
.footer__social { display:flex; gap:0.8rem; margin-top:1.2rem; }
.footer__social a { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(244,235,223,0.2); border-radius:50%; }
.footer__social a:hover { border-color:var(--gold-light); }
.footer__social svg { width:18px; }
.footer__bottom { margin-top:clamp(3rem,5vw,4rem); border-top:1px solid rgba(244,235,223,0.12); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.78rem; letter-spacing:0.04em; }

/* -------------------------------------------------- */
/* 19. ANIMATIONS                                     */
/* -------------------------------------------------- */
/* Par défaut (sans JS) : tout est visible. Les états cachés ne s'appliquent
   que si <html class="js"> est présent → aucune image ne peut rester masquée. */
.reveal { transition:opacity 1s var(--ease), transform 1s var(--ease); }
.clip { transition:clip-path 1.1s var(--ease); }
html.js .reveal { opacity:0; transform:translateY(40px); }
html.js .reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.12s; }
.reveal[data-d="2"]{ transition-delay:.24s; }
.reveal[data-d="3"]{ transition-delay:.36s; }
html.js .clip { clip-path:inset(0 100% 0 0); }
html.js .clip.in { clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; } .clip{ clip-path:none; }
  .marquee__track{ animation:none; }
}

/* -------------------------------------------------- */
/* 20. RESPONSIVE                                     */
/* -------------------------------------------------- */
@media (max-width:1080px){
  .footer__top { grid-template-columns:1fr 1fr; gap:2rem; }
  .footer__brand { grid-column:1/-1; }
}
@media (max-width:860px){
  .burger { display:block; }
  .nav__links {
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(84vw,380px); z-index:115;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.6rem;
    background:var(--cream-soft); padding:6.5rem 2.6rem 3rem; transform:translateX(100%);
    transition:transform .55s var(--ease); box-shadow:var(--shadow);
  }
  .nav.open .nav__links { transform:translateX(0); }
  .nav.open .brand { opacity:0; pointer-events:none; }   /* titre masqué quand le menu est ouvert */
  /* Mobile : pas de backdrop-filter sur l'en-tête scrollé (sinon il "capture" le menu fixe
     → le fond crème ne couvrait plus tout l'écran). Fond crème opaque à la place. */
  .header.scrolled { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--cream-soft); }
  .header:not(.scrolled) .nav__links a { color:var(--ink); }
  .nav__links a { font-size:1.5rem; font-family:var(--font-display); letter-spacing:0; text-transform:none; }
  .nav__right .btn { display:none; }

  /* !important : neutralise les grid-column posés en style inline (03, 05, services…) */
  .grid12 > [class^="col-"] { grid-column:1 / -1 !important; order:0 !important; }
  /* Services : sur mobile, le paragraphe (col-6) toujours AVANT la photo (col-5) */
  .svc-detail .grid12 > .col-6 { order:-1 !important; }
  .overlap-stats .inner { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid var(--line); }
  .stat:last-child { border-bottom:0; }
  .svc__row { grid-template-columns:auto 1fr; }
  .svc__desc { grid-column:1/-1; text-align:left!important; }
  .steps { grid-template-columns:1fr 1fr; }
  .quotes { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
  .pull-up { margin-top:0; }
  .hero__vertical { display:none; }
  .frame-offset::before { transform:translate(14px,14px); }
}
@media (max-width:520px){
  .steps { grid-template-columns:1fr; }
  .footer__top { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; }
}

/* ============================================================
   V3 — Hero CLAIR : image lumineuse, sans surcouche sombre, texte foncé.
   Ciblé via <body class="hero-light"> → n'affecte que l'accueil.
   ============================================================ */
.hero-light .hero { background:var(--cream); }
/* Léger dégradé crème vertical (bas) pour poser les boutons sur l'image */
.hero-light .hero__media::after {
  background: linear-gradient(180deg, rgba(246,238,228,0.10) 0%, rgba(246,238,228,0) 42%, rgba(246,238,228,0.38) 100%);
}
/* Bandeau « frosté » crème à gauche (teinte + léger flou), MASQUÉ pour ne pas toucher
   la partie droite de l'image → lisibilité garantie du texte, sans surcouche sombre. */
.hero-light .hero::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(102deg, rgba(246,238,228,0.92) 0%, rgba(246,238,228,0.84) 40%, rgba(246,238,228,0.52) 60%, rgba(246,238,228,0) 84%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(102deg, #000 0%, #000 50%, rgba(0,0,0,0) 86%);
  mask-image: linear-gradient(102deg, #000 0%, #000 50%, rgba(0,0,0,0) 86%);
}
/* Texte du hero en foncé + halo crème discret (filet de sécurité de lisibilité) */
.hero-light .hero .label { color:var(--gold-deep); text-shadow:0 1px 8px rgba(246,238,228,0.7); }
.hero-light .hero h1 { color:var(--ink); text-shadow:0 1px 12px rgba(246,238,228,0.78); }
.hero-light .hero h1 .italic { color:var(--gold-deep); }
.hero-light .hero__lead { color:var(--ink-soft); text-shadow:0 1px 9px rgba(246,238,228,0.82); }
.hero-light .hero__vertical { color:var(--ink-muted); }
.hero-light .hero__vertical::after { background:rgba(140,101,38,0.55); }
.hero-light .scrollcue { color:var(--ink-muted); }
.hero-light .scrollcue i { background:rgba(24,27,44,0.22); }
/* En-tête transparent au-dessus d'un hero clair : logo, liens et burger en foncé */
.hero-light .header:not(.scrolled) .brand b { color:var(--ink); text-shadow:none; }
.hero-light .header:not(.scrolled) .brand span { color:var(--gold-deep); }
.hero-light .header:not(.scrolled) .nav__links a { color:var(--ink); text-shadow:none; }
.hero-light .header:not(.scrolled) .nav__links a::after { background:var(--gold); }
.hero-light .header:not(.scrolled) .burger span { background:var(--ink); }
/* Même traitement clair pour le bandeau de titre de la page Services */
.hero-light .page-hero { background:var(--cream); }
.hero-light .page-hero__bg::after {
  background: linear-gradient(180deg, rgba(246,238,228,0.10) 0%, rgba(246,238,228,0) 42%, rgba(246,238,228,0.40) 100%);
}
.hero-light .page-hero::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(102deg, rgba(246,238,228,0.92) 0%, rgba(246,238,228,0.84) 40%, rgba(246,238,228,0.52) 60%, rgba(246,238,228,0) 84%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(102deg, #000 0%, #000 50%, rgba(0,0,0,0) 86%);
  mask-image: linear-gradient(102deg, #000 0%, #000 50%, rgba(0,0,0,0) 86%);
}
.hero-light .page-hero h1 { color:var(--ink); text-shadow:0 1px 12px rgba(246,238,228,0.78); }
.hero-light .page-hero h1 .italic { color:var(--gold-deep); }
.hero-light .page-hero .label { color:var(--gold-deep); text-shadow:0 1px 8px rgba(246,238,228,0.7); }
.hero-light .page-hero .lead { text-shadow:0 1px 9px rgba(246,238,228,0.82); }
.hero-light .breadcrumb { color:var(--ink-muted); }

/* Petits écrans : voile frosté plein cadre (pas de « côté droit net » à préserver) → lisibilité maximale */
@media (max-width:860px){
  .hero-light .hero::before,
  .hero-light .page-hero::before {
    background: linear-gradient(180deg, rgba(246,238,228,0.88) 0%, rgba(246,238,228,0.74) 100%);
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ============================================================
   Pages légales (mentions légales / politique de confidentialité)
   ============================================================ */
.legal { max-width:900px; }
.legal h2 { font-size:clamp(1.3rem,2.2vw,1.75rem); margin:2.4rem 0 0.8rem; }
.legal h3 { font-size:1.12rem; margin:1.5rem 0 0.5rem; }
.legal p, .legal li { color:var(--ink-soft); }
.legal p { margin-bottom:0.9rem; max-width:none; }
.legal ul { list-style:disc; padding-left:1.4rem; margin:0 0 0.9rem; display:grid; gap:0.4rem; }
.legal a { color:var(--gold-deep); text-decoration:underline; }
.legal strong { color:var(--ink); }
.legal .updated { font-size:0.85rem; color:var(--ink-muted); font-style:italic; margin-bottom:2rem; }

/* Crédit discret en pied de page */
.footer__credit { text-align:center; padding-bottom:1.5rem; font-size:0.72rem; letter-spacing:0.05em; color:rgba(244,235,223,0.4); }
.footer__credit a { color:inherit; transition:color .3s var(--ease); }
.footer__credit a:hover { color:var(--gold-light); }