:root{
  --noir:#191210;
  --noir-soft:#2A1E1A;
  --nude:#E8C8A8;
  --nude-deep:#C09872;
  --ocre:#B8642E;
  --ivoire:#F5EDDF;
  --ivoire-deep:#EADEC8;
  --muted:#8A7461;
  --rule:#D5C0A5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--noir);background:var(--ivoire);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
a{color:var(--noir);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ocre)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--noir);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:0}

h1,h2,h3{font-family:'Italiana','Georgia',serif;line-height:.95;margin:0;font-weight:400;letter-spacing:-.005em}
.display-xl{font-size:clamp(3rem,9vw,8rem);line-height:.88}
.display-l{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.95}
.small-caps{font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:600}
p{margin:0 0 1rem}

/* DIPTYQUE: signature grammar — 50/50 split sections, bottom-aligned content */
.dip{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;position:relative;overflow:hidden}
.dip-pane{padding:5rem 4vw;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.dip-pane-top{justify-content:flex-start}
.dip-pane-center{justify-content:center}
.dark{background:var(--noir);color:var(--ivoire)}
.dark h1,.dark h2,.dark h3{color:var(--ivoire)}
.nude{background:var(--nude);color:var(--noir)}
.ivoire{background:var(--ivoire-deep);color:var(--noir)}
.ocre{background:var(--ocre);color:var(--ivoire)}
.ocre h1,.ocre h2,.ocre h3{color:var(--ivoire)}

/* Watermark giant letter */
.watermark{position:absolute;font-family:'Italiana',serif;font-size:clamp(20rem,40vw,40rem);line-height:.8;color:var(--noir-soft);opacity:.95;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;font-style:normal;font-weight:400}
.nude .watermark{color:rgba(25,18,16,.07)}
.ivoire .watermark{color:rgba(184,100,46,.08)}
.ocre .watermark{color:rgba(25,18,16,.1)}

.dip-eyebrow{font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:var(--ocre);margin-bottom:1.5rem;position:relative;z-index:1}
.dark .dip-eyebrow{color:var(--nude)}
.dip-pane h2,.dip-pane h1{position:relative;z-index:1}
.dip-pane p{position:relative;z-index:1;max-width:36ch;font-size:1.05rem;color:var(--muted);margin-top:1.5rem}
.dark .dip-pane p{color:rgba(245,237,223,.7)}
.ocre .dip-pane p{color:rgba(245,237,223,.85)}

@media (max-width:880px){
  .dip{grid-template-columns:1fr;min-height:auto}
  .dip-pane{min-height:60vh;padding:3.5rem 1.5rem}
}

/* Rituel — vertical numbered steps */
.rituel{padding:6rem 6vw;background:var(--ivoire)}
.rituel-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;margin-bottom:3rem;border-bottom:1px solid var(--rule);padding-bottom:1.5rem}
.rituel-head h2{font-size:clamp(2.4rem,5vw,4rem);max-width:14ch}
.rituel-head p{max-width:36ch;color:var(--muted)}
.rituel-list{counter-reset:r}
.rituel-row{display:grid;grid-template-columns:80px 1fr 1.6fr;gap:2.5rem;align-items:start;padding:2rem 0;border-bottom:1px solid var(--rule)}
.rituel-row::before{counter-increment:r;content:counter(r,decimal-leading-zero) ".";font-family:'Italiana',serif;font-size:2.5rem;color:var(--ocre);line-height:1}
.rituel-row h3{font-family:'Italiana',serif;font-size:1.8rem}
.rituel-row p{margin:0;color:var(--muted);font-size:1.02rem;max-width:60ch}
@media (max-width:780px){.rituel-row{grid-template-columns:60px 1fr;gap:1rem}.rituel-row p{grid-column:1/-1}}

/* Prix — pricing card boutique */
.prix{background:var(--noir);color:var(--ivoire);padding:6rem 6vw}
.prix h2{color:var(--ivoire);font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.6rem}
.prix .lead{color:rgba(245,237,223,.6);max-width:50ch;margin-bottom:3rem}
.prix-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.prix-col h3{font-family:'Italiana',serif;font-size:1.5rem;color:var(--nude);margin-bottom:1.5rem;padding-bottom:.7rem;border-bottom:1px solid rgba(232,200,168,.2)}
.prix-line{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0;border-bottom:1px solid rgba(245,237,223,.08);font-size:1rem;gap:.8rem}
.prix-line .name{flex:1}
.prix-line .note{font-size:.85rem;color:rgba(245,237,223,.5);font-style:italic;margin-left:.6rem}
.prix-line .val{font-family:'Italiana',serif;font-size:1.4rem;color:var(--ocre)}
@media (max-width:780px){.prix-grid{grid-template-columns:1fr;gap:2.5rem}}

/* Identité (carte signature) */
.identite{padding:6rem 6vw;background:var(--nude);color:var(--noir)}
.identite-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:center}
.identite h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.identite .stamp{display:inline-block;border:1px solid var(--noir);padding:1.8rem 2.5rem;font-family:'Italiana',serif;font-size:1.4rem;line-height:1.4;background:var(--ivoire-deep)}
.identite .stamp .label{display:block;font-family:'Inter',sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ocre);margin-bottom:.6rem}
.identite .stamp .ref{display:block;font-family:'Inter',sans-serif;font-size:.75rem;color:var(--muted);margin-top:.6rem;letter-spacing:.04em}
@media (max-width:780px){.identite-grid{grid-template-columns:1fr;gap:2rem}}

/* Témoignages — gros quote pleine bande */
.temoignages{padding:6rem 6vw;background:var(--ocre);color:var(--ivoire);text-align:center;position:relative;overflow:hidden}
.temoignages::before{content:'"';position:absolute;font-family:'Italiana',serif;font-size:30rem;color:rgba(25,18,16,.1);top:-4rem;left:50%;transform:translateX(-50%);line-height:.8}
.temoignages .stars{font-size:1.2rem;letter-spacing:.4em;margin-bottom:1.5rem;color:var(--ivoire);position:relative}
.temoignages blockquote{font-family:'Italiana',serif;font-size:clamp(1.8rem,4vw,3.2rem);max-width:24ch;margin:0 auto;line-height:1.2;position:relative}
.temoignages cite{display:block;margin-top:2rem;font-style:normal;font-family:'Inter',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(245,237,223,.7);position:relative}
.temoignages .more{margin-top:3rem;display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;position:relative}
.temoignages .more div{max-width:24ch;font-family:'Inter',sans-serif;font-size:.95rem;font-style:italic;color:rgba(245,237,223,.85)}
.temoignages .more div::before{content:'· ';color:var(--noir);font-weight:700}

/* Trouver */
.trouver{padding:6rem 6vw;background:var(--ivoire-deep)}
.trouver-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
.trouver h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1rem}
.trouver-info{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;font-family:'Inter',sans-serif;font-size:1rem;margin-top:2rem}
.trouver-info .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ocre);font-weight:600}
.trouver-info .v{color:var(--noir);font-weight:500}
.trouver-tag{display:inline-block;font-family:'Italiana',serif;font-size:1.5rem;font-style:italic;color:var(--ocre);margin-bottom:.5rem}
.trouver-stamp{background:var(--noir);color:var(--ivoire);padding:3rem;border-radius:3px}
.trouver-stamp h3{color:var(--nude);font-size:1.3rem;margin-bottom:.7rem}
.trouver-stamp p{color:rgba(245,237,223,.7);font-size:.95rem;margin-bottom:1.5rem}
.trouver-stamp a.call{display:inline-block;background:var(--ocre);color:var(--ivoire);padding:.85rem 1.4rem;text-decoration:none;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
.trouver-stamp a.call:hover{background:var(--ivoire);color:var(--noir)}
@media (max-width:780px){.trouver-grid{grid-template-columns:1fr;gap:2.5rem}}

/* CTA final diptyque */
.cta-final{display:grid;grid-template-columns:1fr 1fr;min-height:60vh}
.cta-final .pane{padding:5rem 4vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.cta-final .pane.dark h2{font-size:clamp(2.4rem,5vw,4rem)}
.cta-final .pane.dark .phone{display:block;font-family:'Italiana',serif;font-style:italic;font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--ocre);text-decoration:none;margin-top:2rem;letter-spacing:-.01em}
.cta-final .pane.dark .phone:hover{color:var(--nude)}
.cta-final .pane.ocre{color:var(--ivoire);text-align:center;justify-content:center}
.cta-final .pane.ocre h3{color:var(--ivoire);font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:18ch;margin:0 auto 1.2rem}
.cta-final .pane.ocre p{color:rgba(245,237,223,.8);font-family:'Italiana',serif;font-style:italic;font-size:1.2rem;margin:0;max-width:24ch}
@media (max-width:880px){.cta-final{grid-template-columns:1fr;min-height:auto}.cta-final .pane{min-height:40vh;padding:3.5rem 1.5rem}}

footer{padding:1.5rem 6vw;background:#000;color:rgba(245,237,223,.5);font-size:.85rem;text-align:center}

/* ═══════════════════════════════════════════════════════════
   ANIMATION PASS — added by AnimationDesigner
   Fully encapsulé dans prefers-reduced-motion: no-preference
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* --- Scroll-reveal : éléments individuels ---------------------- */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
  }
  [data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- Scroll-reveal : groupes avec stagger ---------------------- */
  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
  }
  [data-reveal-stagger].revealed > * { opacity: 1; transform: translateY(0); }
  [data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
  [data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: .08s; }
  [data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: .16s; }
  [data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: .24s; }
  [data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: .32s; }
  [data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: .40s; }
  [data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: .48s; }
  [data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: .56s; }

  /* --- Hover cartes génériques ----------------------------------- */
  .card, .service-card, .feature-card, .feat, .prestations-card,
  .menu-item, .offer-card, .avis-card, .tarif-card, .gallery-item,
  .partner, .blog-card, .room-card, .product-card {
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .card:hover, .service-card:hover, .feature-card:hover, .feat:hover,
  .prestations-card:hover, .menu-item:hover, .offer-card:hover,
  .avis-card:hover, .tarif-card:hover, .gallery-item:hover,
  .partner:hover, .blog-card:hover, .room-card:hover, .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
  }

  /* --- Hover liens nav ------------------------------------------- */
  nav a, .nav-link, header a {
    transition: opacity .18s ease, color .18s ease;
  }

  /* --- CTA boutons ---------------------------------------------- */
  .btn, .cta-btn, .cta-link, .button, [class*="btn-"], [class*="-btn"],
  .hero-cta, .bigcta a, .band-cta a {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:hover, .cta-btn:hover, .cta-link:hover, .button:hover,
  [class*="btn-"]:hover, [class*="-btn"]:hover,
  .hero-cta:hover, .bigcta a:hover, .band-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
  }

  /* --- Focus visible ring élégant ------------------------------- */
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* === Animations spécifiques Template A/E — Diptyque Salon ====== */

  /* --- Cover hero — entrée des deux volets (gauche/droite) ------- */
  @keyframes panel-enter-left {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes panel-enter-right {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .dip .dip-pane:first-child {
    animation: panel-enter-left .55s ease both;
    animation-delay: .05s;
  }
  .dip .dip-pane:last-child {
    animation: panel-enter-right .55s ease both;
    animation-delay: .18s;
  }

  /* --- Watermark P/★ — dérive douce (amplitude 10 px, 9 s) ----- */
  @keyframes watermark-drift {
    0%,100% { transform: translate(-50%,-50%) translateY(0px); }
    50%      { transform: translate(-50%,-50%) translateY(-10px); }
  }
  .watermark {
    animation: watermark-drift 9s ease-in-out infinite;
  }

  /* --- Rituel rows — reveal individuel au scroll ---------------- */
  /* (les li.rituel-row ont data-reveal posé dans le HTML)        */

  /* --- Prix ligne — glissement + valeur qui s'illumine ---------- */
  .prix-line {
    transition: padding-left .2s ease;
  }
  .prix-line .val {
    transition: color .2s ease;
  }
  .prix-line:hover {
    padding-left: .55rem;
  }
  .prix-line:hover .val {
    color: var(--nude-deep);
  }

  /* --- Stamp identité — lift au survol -------------------------- */
  .identite .stamp {
    transition: transform .28s ease, box-shadow .28s ease;
  }
  .identite .stamp:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(25,18,16,.14);
  }

  /* --- Trouver stamp — lift au survol + CTA call button --------- */
  .trouver-stamp {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .trouver-stamp:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }
  .trouver-stamp a.call {
    transition: background .2s ease, color .2s ease, transform .18s ease;
  }
  .trouver-stamp a.call:hover {
    transform: translateY(-2px);
  }

  /* --- Numéro de téléphone — espacement animé au survol --------- */
  .cta-final .pane.dark .phone {
    transition: color .22s ease, letter-spacing .3s ease;
  }
  .cta-final .pane.dark .phone:hover {
    letter-spacing: .01em;
  }

}
/* End animation pass */