/* ═══════════════════════════════════════════════════════════════
   ROSA BONHEUR — feuille de style du site.

   Extraite de la page d'accueil : elle etait la seule page, tout
   vivait donc dans un <style> en ligne. Les pages qui arrivent
   partagent la meme identite, elles doivent donc partager le meme
   fichier — sinon une couleur changee ici ne suit pas ailleurs.
   ═══════════════════════════════════════════════════════════════ */

:root{
    --paper:        #faf7f4;
    --paper-warm:   #f4ede6;
    --linen:        #ece4dc;
    --mist:         #e8dfe2;
    --mauve-50:     #efe6ea;
    --mauve-100:    #e3d3da;
    --mauve-200:    #c9adb9;
    --mauve-300:    #a6818f;
    --mauve-500:    #6e4c5b;
    --plum:         #3b2530;
    --ink:          #211418;
    --rose-dust:    #d8b9c2;

    --serif: "Cormorant Garamond", "Times New Roman", serif;
    --sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, monospace;

    --rule: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    --rule-soft: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; background:var(--paper); color:var(--ink); }
  body{
    font-family: var(--sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings:"ss01","liga","kern";
  }
  a{ color: inherit; text-decoration: none; }
  em.it{ font-style: italic; color: var(--mauve-500); }

  /* ─────────────── HERO ─────────────── */
  .hero{
    position: relative;
    min-height: 100vh;
    background: var(--paper);
    overflow: hidden;
    display:flex; flex-direction:column;
  }
  .hero canvas{
    position:absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    z-index: 1;
    pointer-events: none;
  }
  .hero::after{
    content:""; position:absolute; inset:0; z-index: 2;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 35% 60%, transparent 0%, transparent 40%, rgba(250,247,244,.45) 80%, var(--paper) 100%);
  }
  .hero-rail{
    position:relative; z-index: 5;
    display:flex; justify-content:space-between; align-items:center;
    padding: 28px 56px 0;
  }
  .hero-rail .l{
    font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
  }
  .hero-rail .l b{ font-weight: 400; color: var(--ink); }
  .hero-rail .right{ display:flex; gap: 28px; align-items:center; }

  .hero-stage{
    flex: 1;
    position: relative; z-index: 5;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 80px 40px 56px;
    text-align: center;
  }
  .seal{ width: 110px; height: 110px; margin-bottom: 36px; opacity: .92; }
  .hero-eyebrow{
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .56em; text-transform: uppercase;
    color: var(--mauve-500);
    display:flex; align-items:center; gap: 18px;
    margin-bottom: 28px;
  }
  .hero-eyebrow .ln{ width: 36px; height: 1px; background: color-mix(in srgb, var(--mauve-500) 50%, transparent); }
  .hero-title{
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(56px, 8.4vw, 144px);
    line-height: 1.02; letter-spacing: -.022em;
    color: var(--plum); margin: 0; white-space: nowrap;
  }
  .hero-title em{ font-style: italic; font-weight: 300; color: var(--mauve-500); }
  .hero-sub{
    margin-top: 32px;
    font-family: var(--sans); font-weight: 300;
    font-size: 12px; letter-spacing: .56em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    display:flex; align-items:center; gap: 18px; justify-content:center;
  }
  .hero-sub .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--mauve-300); }
  .hero-poem{
    margin-top: 44px; max-width: 580px;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; line-height: 1.5; color: var(--plum); text-wrap: pretty;
  }

  /* ─────────────── BOOKING BAR (progressive 2 champs) ─────────────── */
  .booking-wrap{
    position: relative; z-index: 6;
    width: min(680px, calc(100% - 48px));
    margin: 0 auto 72px;
  }
  .booking{
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
    display:grid;
    grid-template-columns: 1fr 1px 1fr 1px auto;
    align-items: stretch;
    box-shadow: 0 30px 70px -38px rgba(33,20,24,.22);
    position: relative;
    overflow: visible;
  }
  .booking .divider{
    background: color-mix(in srgb, var(--plum) 10%, transparent);
    align-self: center; height: 56%;
  }
  .booking .field{
    padding: 22px 26px;
    display:flex; flex-direction:column; gap: 8px;
    position: relative;
  }
  .booking .field-ritual{
    cursor: pointer;
    transition: background .35s ease;
  }
  .booking .field-ritual:hover{ background: color-mix(in srgb, var(--mauve-50) 70%, transparent); }
  .booking .field-ritual.locked{ cursor: default; }
  .booking .field-ritual.locked:hover{ background: transparent; }

  .booking .field .lab{
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--mauve-500);
  }
  .booking .ritual-val{
    display:flex; align-items:center; justify-content: space-between; gap: 10px;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 20px; line-height: 1; color: var(--plum);
  }
  .booking .ritual-chev{
    width: 8px; height: 8px; flex: none;
    border-right: 1px solid var(--mauve-300); border-bottom: 1px solid var(--mauve-300);
    transform: rotate(45deg) translate(-2px,-2px);
    transition: opacity .3s;
  }
  .booking .field-ritual.locked .ritual-chev{ opacity: 0; }

  /* Ritual dropdown */
  .ritual-menu{
    position: absolute; top: calc(100% + 6px);
    left: -1px; right: -1px;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
    box-shadow: 0 20px 48px -16px rgba(33,20,24,.20);
    z-index: 30; display: none;
  }
  .ritual-menu.open{ display: block; }
  .ritual-option{
    padding: 14px 24px;
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--serif); font-weight: 300; font-size: 18px;
    color: var(--plum); cursor: pointer; transition: background .2s;
    border-bottom: 1px solid color-mix(in srgb, var(--plum) 8%, transparent);
  }
  .ritual-option:last-child{ border-bottom: none; }
  .ritual-option:hover{ background: var(--mauve-50); }
  .ritual-option.active{ background: var(--mauve-50); }
  .ritual-option .r-price{ font-style: italic; color: var(--mauve-500); font-size: 15px; }

  /* Progressive field */
  .booking .prog-lab{
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--mauve-500);
    transition: opacity .2s, transform .2s;
  }
  .booking .prog-input{
    background: none; border: none; outline: none;
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 20px; line-height: 1; color: var(--plum);
    width: 100%; padding: 0; cursor: text;
    transition: opacity .2s, transform .2s;
  }
  .booking .prog-input::placeholder{
    color: color-mix(in srgb, var(--plum) 38%, transparent); font-style: italic;
  }
  .booking .prog-input[type="date"],
  .booking .prog-input[type="time"],
  .booking .prog-input[type="number"]{
    font-style: normal; font-size: 17px; color-scheme: light;
  }

  /* Field transition animations */
  .prog-lab.exiting, .prog-input.exiting{
    opacity: 0 !important; transform: translateY(-5px) !important; pointer-events: none;
  }
  .prog-lab.entering{ animation: slideUp .3s ease forwards; }
  .prog-input.entering{ animation: slideUp .3s ease .04s forwards; }
  @keyframes slideUp{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .prog-input.shake{ animation: shake .35s ease; }
  @keyframes shake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    75%{ transform:translateX(5px); }
  }

  /* CTA */
  .booking .cta{
    background: var(--ink); color: var(--paper);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
    padding: 0 30px;
    display:flex; align-items:center; gap: 14px;
    cursor: pointer; transition: background .3s, letter-spacing .3s;
    border: none; white-space: nowrap;
  }
  .booking .cta:hover{ background: var(--plum); letter-spacing: .36em; }
  .booking .cta .arrow{ width: 20px; height: 1px; background: var(--paper); position: relative; flex: none; }
  .booking .cta .arrow::after{
    content:""; position:absolute; right: 0; top: -3px;
    width: 6px; height: 6px;
    border-top: 1px solid var(--paper); border-right: 1px solid var(--paper);
    transform: rotate(45deg);
  }

  /* Booking done */
  .booking-done{
    padding: 32px 40px; text-align: center;
    font-family: var(--serif); font-style: italic;
    font-size: 18px; color: var(--plum);
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: center; gap: 14px;
  }
  .booking-done .check{
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--mauve-500); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-style: normal; font-size: 12px; flex: none;
  }

  /* Booking foot + pips */
  .booking-foot{
    margin-top: 18px;
    display:flex; justify-content: center; align-items:center; gap: 18px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
    transition: opacity .4s;
  }
  .booking-foot .dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--mauve-300); }
  .booking-foot .steps{ display: flex; gap: 5px; align-items: center; }
  .booking-foot .step-pip{
    width: 16px; height: 2px;
    background: color-mix(in srgb, var(--mauve-300) 35%, transparent);
    transition: background .4s;
  }
  .booking-foot .step-pip.done{ background: var(--mauve-500); }

  /* ─────────────── 02 RITUELS ─────────────── */
  .rituels{ background: var(--mauve-50); padding: 160px 56px; position: relative; }
  .rituels-head{
    max-width: 1320px; margin: 0 auto 80px;
    display:grid; grid-template-columns: 1fr auto 1fr; gap: 48px;
    align-items: end; padding-bottom: 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  }
  .rituels-head .num{
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
    text-transform: uppercase; color: var(--mauve-500);
  }
  .rituels-head .title{
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -.018em;
    color: var(--plum); text-align: center; margin: 0;
  }
  .rituels-head .title em{ font-style: italic; color: var(--mauve-500); }
  .rituels-head .meta{
    font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; text-align: right;
    color: color-mix(in srgb, var(--plum) 55%, transparent);
  }

  .rituels-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    max-width: 1320px; margin: 0 auto;
  }
  .ritual{
    position: relative; aspect-ratio: 4/5.4; overflow: hidden;
    cursor: pointer; background: var(--linen);
    border: 1px solid color-mix(in srgb, var(--plum) 10%, transparent);
    opacity: 0; transform: translateY(32px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .ritual.visible{ opacity: 1; transform: translateY(0); }
  .ritual:nth-child(2){ transition-delay: .14s; }
  .ritual:nth-child(3){ transition-delay: .28s; }

  .ritual .photo{
    position:absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.04);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1s;
    filter: grayscale(.15) brightness(.96);
  }
  .ritual:hover .photo{ transform: scale(1.08); filter: grayscale(0) brightness(.78); }
  .ritual .photo::after{
    content:""; position:absolute; inset: 0;
    background: repeating-linear-gradient(14deg,rgba(110,76,91,.18) 0px,rgba(110,76,91,.18) 1px,transparent 1px,transparent 14px),
      linear-gradient(160deg,var(--mauve-100),var(--linen) 60%,var(--mauve-200));
  }
  .ritual.r1 .photo::after{ background:
    repeating-linear-gradient(14deg,rgba(110,76,91,.20) 0 1px,transparent 1px 14px),
    linear-gradient(160deg,#d6c2cb,#b89aa4 70%,#8a6675); }
  .ritual.r2 .photo::after{ background:
    repeating-linear-gradient(-8deg,rgba(110,76,91,.16) 0 1px,transparent 1px 16px),
    linear-gradient(180deg,#ecdfe3,#c9adb9 60%,#a6818f); }
  .ritual.r3 .photo::after{ background:
    repeating-linear-gradient(6deg,rgba(33,20,24,.18) 0 1px,transparent 1px 12px),
    linear-gradient(200deg,#cdb4bc,#8d6976 65%,#4a3340); }

  .ritual::before{
    content:""; position:absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg,rgba(33,20,24,0) 0%,rgba(33,20,24,.15) 50%,rgba(33,20,24,.78) 100%);
    opacity: .55; transition: opacity .6s;
  }
  .ritual:hover::before{ opacity: .92; }

  .ritual .roman{
    position: absolute; top: 22px; left: 24px; z-index: 4;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 36px; line-height: 1; color: var(--paper); letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(33,20,24,.4);
  }
  .ritual .gift{
    position: absolute; top: 24px; right: 24px; z-index: 4;
    background: var(--paper); color: var(--plum);
    font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
    text-transform: uppercase; padding: 7px 12px; white-space: nowrap;
  }
  .ritual .summary{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 32px 32px 30px; color: var(--paper);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .35s;
  }
  .ritual:hover .summary{ transform: translateY(-8px); opacity: 0; }
  .ritual:hover .roman{ opacity: 0; transition: opacity .35s; }
  .ritual .summary h3{
    font-family: var(--serif); font-weight: 300;
    font-size: 44px; line-height: 1; letter-spacing: -.014em;
    margin: 0 0 14px; color: var(--paper);
    text-shadow: 0 2px 14px rgba(33,20,24,.35);
  }
  .ritual .summary h3 em{ font-style: italic; color: var(--rose-dust); }
  .ritual .summary .meta{
    display:flex; justify-content:space-between; align-items:baseline;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb,var(--paper) 30%,transparent);
    font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase;
    color: color-mix(in srgb,var(--paper) 88%,transparent);
  }
  .ritual .summary .meta .price{
    font-family: var(--serif); font-style: italic;
    font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--rose-dust);
  }
  .ritual .detail{
    position: absolute; inset: 0; z-index: 5;
    padding: 40px 36px 36px; color: var(--paper);
    display:flex; flex-direction:column;
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s ease .12s, transform .55s cubic-bezier(.2,.7,.2,1) .12s;
    pointer-events: none;
  }
  .ritual:hover .detail{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .ritual .detail .top{
    display:flex; justify-content:space-between; align-items: baseline;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em;
    text-transform: uppercase; color: var(--rose-dust); margin-bottom: 18px;
  }
  .ritual .detail h3{
    font-family: var(--serif); font-weight: 300;
    font-size: 38px; line-height: 1; letter-spacing: -.012em;
    margin: 0 0 14px; color: var(--paper);
  }
  .ritual .detail h3 em{ font-style: italic; color: var(--rose-dust); }
  .ritual .detail .lede{
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 16px; line-height: 1.45;
    color: color-mix(in srgb,var(--paper) 90%,transparent);
    margin: 0 0 20px; text-wrap: pretty;
  }
  .ritual .detail ol{
    list-style: none; padding: 0; margin: 0 0 auto;
    border-top: 1px solid color-mix(in srgb,var(--paper) 22%,transparent);
  }
  .ritual .detail ol li{
    padding: 11px 0;
    border-bottom: 1px dashed color-mix(in srgb,var(--paper) 18%,transparent);
    display:grid; grid-template-columns: 22px 1fr auto; gap: 12px;
    align-items: baseline;
    font-family: var(--sans); font-weight: 300; font-size: 12.5px; line-height: 1.45;
    color: color-mix(in srgb,var(--paper) 90%,transparent);
  }
  .ritual .detail ol li .n{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--rose-dust); }
  .ritual .detail ol li .dur{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: color-mix(in srgb,var(--paper) 65%,transparent); white-space: nowrap; }
  .ritual .detail .cta{
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid color-mix(in srgb,var(--paper) 22%,transparent);
    display:flex; justify-content: space-between; align-items:center;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--paper);
  }
  .ritual .detail .cta .price{ font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--rose-dust); }
  .ritual .detail .cta .arrow{ width: 28px; height: 1px; background: var(--paper); position: relative; }
  .ritual .detail .cta .arrow::after{
    content:""; position:absolute; right:0; top: -3px;
    width: 6px; height: 6px;
    border-top: 1px solid var(--paper); border-right: 1px solid var(--paper);
    transform: rotate(45deg);
  }
  .rituels-foot{
    max-width: 1320px; margin: 56px auto 0;
    display:flex; justify-content:space-between; align-items:center;
    padding-top: 32px;
    border-top: 1px solid color-mix(in srgb,var(--plum) 14%,transparent);
  }
  .rituels-foot .note{
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 22px; color: var(--plum); max-width: 480px; margin: 0;
  }
  .rituels-foot .more{
    display:flex; align-items:center; gap: 18px; padding: 18px 32px;
    border: 1px solid var(--plum);
    font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--plum);
    transition: background .3s, color .3s; white-space: nowrap;
  }
  .rituels-foot .more:hover{ background: var(--plum); color: var(--paper); }
  .rituels-foot .more .arrow{ width: 28px; height: 1px; background: currentColor; position: relative; }
  .rituels-foot .more .arrow::after{
    content:""; position:absolute; right:0; top: -3px;
    width: 6px; height: 6px;
    border-top: 1px solid currentColor; border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }

  /* ─────────────── 03 INGRÉDIENTS ─────────────── */
  .ingredients{ background: var(--paper); padding: 160px 56px; }
  .ing-head{
    max-width: 1320px; margin: 0 auto 80px;
    display:grid; grid-template-columns: 1fr auto 1fr; gap: 48px;
    align-items: end; padding-bottom: 32px;
    border-bottom: 1px solid color-mix(in srgb,var(--plum) 14%,transparent);
  }
  .ing-head .num{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mauve-500); }
  .ing-head .title{ font-family: var(--serif); font-weight: 300; font-size: clamp(40px,5.4vw,84px); line-height: 1; letter-spacing: -.018em; color: var(--plum); text-align: center; margin: 0; }
  .ing-head .title em{ font-style: italic; color: var(--mauve-500); }
  .ing-head .meta{ font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; text-align: right; color: color-mix(in srgb,var(--ink) 55%,transparent); }

  .ing-grid{
    max-width: 1320px; margin: 0 auto;
    display:grid; grid-template-columns: repeat(5,1fr);
    gap: 1px;
    background: color-mix(in srgb,var(--ink) 8%,transparent);
    border: var(--rule-soft);
  }
  .ing{
    background: var(--paper); padding: 48px 28px 36px;
    display:flex; flex-direction:column; gap: 18px;
    min-height: 360px; position:relative;
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease, background .35s;
  }
  .ing.visible{ opacity: 1; transform: translateY(0); }
  .ing:nth-child(2){ transition-delay: .08s; }
  .ing:nth-child(3){ transition-delay: .16s; }
  .ing:nth-child(4){ transition-delay: .24s; }
  .ing:nth-child(5){ transition-delay: .32s; }
  .ing:hover{ background: var(--paper-warm); }
  .ing .roman{ font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 13px; color: var(--mauve-500); letter-spacing: .12em; }
  .ing .glyph{ width: 52px; height: 52px; color: var(--mauve-500); }
  .ing h4{ font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -.01em; margin: 0; color: var(--plum); }
  .ing .lat{ font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--mauve-500); margin-top: -10px; }
  .ing p{ font-family: var(--sans); font-weight: 300; font-size: 12.5px; line-height: 1.6; color: color-mix(in srgb,var(--ink) 70%,transparent); margin: 0; text-wrap: pretty; }
  .ing .origin{ margin-top: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb,var(--ink) 50%,transparent); padding-top: 14px; border-top: 1px dashed color-mix(in srgb,var(--ink) 10%,transparent); }

  /* ─────────────── 04 TÉMOIGNAGES — palette Lin/Papier ─────────────── */
  .ecrins{
    background: var(--linen);
    color: var(--plum);
    padding: 160px 56px;
    position: relative; overflow: hidden;
  }
  .ecrins::before{
    content:""; position:absolute; inset: 0;
    background: radial-gradient(ellipse 55% 45% at 75% 20%,
      color-mix(in srgb,var(--mauve-200) 28%,transparent), transparent 65%);
    pointer-events: none;
  }
  .ecrins-inner{ max-width: 1320px; margin: 0 auto; position: relative; }

  .ecrins .head{
    display:grid; grid-template-columns: 1fr auto 1fr; gap: 48px;
    align-items: end; padding-bottom: 32px;
    border-bottom: 1px solid color-mix(in srgb,var(--plum) 14%,transparent);
    margin-bottom: 72px;
  }
  .ecrins .head .num{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mauve-500); }
  .ecrins .head .title{
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(32px,4vw,60px); line-height: 1.1; letter-spacing: -.018em;
    color: var(--plum); margin: 0; text-align: center;
  }
  .ecrins .head .title em{ font-style: italic; color: var(--mauve-500); }
  .ecrins .head .meta{ font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; text-align: right; color: color-mix(in srgb,var(--plum) 50%,transparent); }

  .ecrins-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }

  .quote{
    background: var(--paper);
    border: 1px solid color-mix(in srgb,var(--plum) 10%,transparent);
    padding: 40px 44px; position: relative;
    opacity: 0; transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
  }
  .quote.visible{ opacity: 1; transform: translateY(0); }
  .quote:nth-child(2){ transition-delay: .12s; }
  .quote:nth-child(3){ transition-delay: .08s; }
  .quote:nth-child(4){ transition-delay: .2s; }

  .quote .open{
    font-family: var(--serif); font-style: italic;
    font-size: 80px; line-height: .65;
    color: var(--mauve-200); display: block; margin-bottom: 20px;
  }
  .quote blockquote{
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: 22px; line-height: 1.5; letter-spacing: -.005em;
    color: var(--plum); margin: 0 0 28px; text-wrap: pretty;
  }
  .quote .source{
    display:flex; gap: 16px; align-items: baseline;
    font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: color-mix(in srgb,var(--plum) 50%,transparent);
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb,var(--plum) 10%,transparent);
  }
  .quote .source b{ font-weight: 400; color: var(--mauve-500); }

  .press-row{
    margin-top: 64px; padding-top: 36px;
    border-top: 1px solid color-mix(in srgb,var(--plum) 14%,transparent);
    display:flex; justify-content: space-between; align-items: center;
    gap: 32px; flex-wrap: wrap;
  }
  .press-row .pl{ font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mauve-500); }
  .press-row .item{ font-family: var(--serif); font-weight: 300; font-size: 20px; letter-spacing: .04em; color: var(--plum); opacity: .78; }
  .press-row .item em{ font-style: italic; color: var(--mauve-500); }

  /* ─────────────── 05 NOUS RENDRE VISITE ─────────────── */
  .visit{ background: var(--paper-warm); padding: 160px 56px 180px; }
  .visit-head{
    max-width: 1320px; margin: 0 auto 80px;
    display:grid; grid-template-columns: 1fr auto 1fr; gap: 48px;
    align-items: end; padding-bottom: 32px;
    border-bottom: 1px solid color-mix(in srgb,var(--plum) 14%,transparent);
  }
  .visit-head .num{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mauve-500); }
  .visit-head .title{ font-family: var(--serif); font-weight: 300; font-size: clamp(40px,5.4vw,84px); line-height: 1; letter-spacing: -.018em; color: var(--plum); text-align: center; margin: 0; }
  .visit-head .title em{ font-style: italic; color: var(--mauve-500); }
  .visit-head .meta{ font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; text-align: right; color: color-mix(in srgb,var(--plum) 55%,transparent); }

  .visit-grid{
    max-width: 1320px; margin: 0 auto;
    display:grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: start;
  }
  .visit-grid dl{ margin: 0; padding: 0; display:grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .visit-grid dt{ font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mauve-500); margin-bottom: 12px; }
  .visit-grid dd{ margin: 0; font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.5; color: var(--plum); }
  .visit-grid dd a{ color: inherit; border-bottom: 1px solid color-mix(in srgb,var(--plum) 25%,transparent); }
  .visit-grid dd em{ font-style: italic; color: var(--mauve-500); display:block; font-size: 13.5px; margin-top: 6px; font-family: var(--sans); letter-spacing: .03em; font-weight: 300; }
  .visit-grid dd strong{ font-weight: 400; }

  .map-card{ background: var(--paper); border: var(--rule-soft); padding: 28px; display:flex; flex-direction:column; }
  .map-card .map{
    flex: 1;
    background:
      repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 80px),
      repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 80px),
      var(--linen);
    border: var(--rule-soft); position: relative; min-height: 300px; overflow: hidden;
  }
  .map-card .map svg{ position:absolute; inset: 0; width:100%; height:100%; }
  .map-card .pin{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-100%);
    width: 16px; height: 16px;
    border: 1.5px solid var(--ink); background: var(--mauve-500);
    border-radius: 50%; box-shadow: 0 6px 18px -8px rgba(33,20,24,.5);
  }
  .map-card .pin::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height: 22px; background: var(--ink); transform: translateX(-50%); }
  .map-card .label{
    position:absolute; top: calc(50% - 90px); left: 50%; transform: translateX(-50%);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 18px; color: var(--plum); background: var(--paper);
    padding: 6px 12px; border: var(--rule-soft); white-space: nowrap;
  }
  .map-card .foot{ margin-top: 18px; display:flex; justify-content:space-between; align-items:center; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb,var(--ink) 55%,transparent); }
  .map-card .foot a{ border-bottom: 1px solid color-mix(in srgb,var(--ink) 25%,transparent); padding-bottom: 2px; color: var(--plum); }

  .visit-cta{ max-width: 1320px; margin: 120px auto 0; text-align: center; padding-top: 72px; border-top: 1px solid color-mix(in srgb,var(--plum) 14%,transparent); }
  .visit-cta .label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--mauve-500); margin-bottom: 28px; }
  .visit-cta h3{ font-family: var(--serif); font-weight: 300; font-size: clamp(32px,4.4vw,60px); line-height: 1.2; color: var(--plum); margin: 0 0 64px; text-wrap: balance; }
  .visit-cta h3 em{ font-style: italic; color: var(--mauve-500); }

  /* ─────────────── RESPONSIVE ─────────────── */
  @media (max-width: 1100px){
    .ing-grid{ grid-template-columns: repeat(3,1fr); }
  }

  @media (max-width: 980px){
    .hero-rail{ padding: 20px 24px 0; }
    .hero-rail .right{ gap: 14px; }
    .hero-stage{ padding: 48px 24px 36px; }
    .hero-title{ white-space: normal; line-height: 1.04; }
    .hero-poem{ font-size: 18px; margin-top: 28px; }

    /* Booking bar — 2 champs côte à côte, bouton en bas */
    .booking-wrap{ width: calc(100% - 32px); margin-bottom: 40px; }
    .booking{ grid-template-columns: 1fr 1px 1fr; }
    .booking .divider:nth-child(4){ display: none; }
    .booking .cta{
      grid-column: 1 / -1;
      padding: 18px 24px; justify-content: center;
      border-top: 1px solid color-mix(in srgb,var(--plum) 12%,transparent);
    }

    /* Sections */
    .rituels, .ingredients, .visit{ padding: 80px 24px; }
    .ecrins{ padding: 80px 24px; }

    .rituels-head, .ing-head, .visit-head, .ecrins .head{
      grid-template-columns: 1fr; gap: 10px;
    }
    .rituels-head .meta, .ing-head .meta, .visit-head .meta, .ecrins .head .meta,
    .rituels-head .title, .ing-head .title, .visit-head .title, .ecrins .head .title{
      text-align: left;
    }

    /* Rituels — 1 colonne, cartes détail toujours visibles */
    .rituels-grid{ grid-template-columns: 1fr; gap: 16px; }
    .ritual{ aspect-ratio: 4/3.4; }
    .ritual .detail{ opacity: 1; transform: none; pointer-events: auto; background: rgba(33,20,24,.6); }
    .ritual .summary{ display: none; }
    .ritual .roman{ display: none; }
    .ritual:nth-child(2), .ritual:nth-child(3){ transition-delay: 0s; }
    .rituels-foot{ flex-direction: column; align-items: flex-start; gap: 24px; }

    /* Ingrédients — 2 col */
    .ing-grid{ grid-template-columns: repeat(2,1fr); }
    .ing{ min-height: auto; padding: 28px 20px 22px; }
    .ing:nth-child(n){ transition-delay: 0s; }

    /* Témoignages — 1 col */
    .ecrins-grid{ grid-template-columns: 1fr; gap: 16px; }
    .quote{ padding: 28px 28px; }
    .quote blockquote{ font-size: 19px; }
    .press-row{ gap: 18px; justify-content: flex-start; }

    /* Visite */
    .visit-grid{ grid-template-columns: 1fr; gap: 48px; }
    .visit-grid dl{ grid-template-columns: 1fr; gap: 28px; }
    .map-card .map{ min-height: 240px; }
    .visit-cta{ margin-top: 72px; }
  }

  @media (max-width: 600px){
    .hero-title{ font-size: clamp(44px,12vw,80px); white-space: normal; }
    .hero-eyebrow{ font-size: 9px; gap: 10px; letter-spacing: .36em; }
    .hero-sub{ gap: 10px; font-size: 10px; }
    .seal{ width: 80px; height: 80px; margin-bottom: 24px; }

    /* Booking bar — vertical sur très petit écran */
    .booking{ grid-template-columns: 1fr; }
    .booking .divider:nth-child(2){
      height: 1px; width: 100%; align-self: auto;
    }
    .booking .divider:nth-child(4){ display: none; }
    .booking .field-ritual{ border-bottom: 1px solid color-mix(in srgb,var(--plum) 10%,transparent); }

    .ing-grid{ grid-template-columns: 1fr; }
    .quote .open{ font-size: 56px; }
    .quote blockquote{ font-size: 17px; }
    .press-row .item{ font-size: 16px; }
    .visit-grid dd{ font-size: 17px; }
    .visit-cta h3{ font-size: clamp(26px,7vw,42px); }
    .rituels-foot .note{ font-size: 18px; }
  }

/* ═══════════════════════════════════════════════════════════════
   EN-TETE ET PIED DE PAGE — ajoutes lors du passage a plusieurs pages.

   Meme vocabulaire que le reste : Cormorant pour le titre, mono en
   petites capitales tres espacees pour les micro-libelles, filets
   fins en color-mix plutot que des gris opaques.
   ═══════════════════════════════════════════════════════════════ */

.rb-skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--plum); color:var(--paper); padding:12px 20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.rb-skip:focus{ left:0; }

/* ── Barre du haut ── */
.rb-head{
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule-soft);
  transition: background .4s ease, border-color .4s ease;
}
/* Sur l'accueil elle flotte au-dessus de la vapeur, puis se pose. */
.rb-head.over{
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
}
.rb-head.over.posee{
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: var(--rule-soft);
}
.rb-head-in{
  max-width: 1320px; margin: 0 auto;
  padding: 14px 56px;
  display: flex; align-items: center; gap: 40px;
}

.rb-mark{ display:flex; align-items:center; gap: 12px; flex: none; color: var(--plum); }
.rb-mark-t{
  font-family: var(--serif); font-size: 21px; font-weight: 300;
  letter-spacing: .01em; color: var(--plum); white-space: nowrap;
}

.rb-nav{ display:flex; gap: 30px; margin-right: auto; }
.rb-nav a{
  font-family: var(--sans); font-weight: 300;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  padding: 6px 0; position: relative; white-space: nowrap;
}
.rb-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--mauve-500); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.rb-nav a:hover::after, .rb-nav a[aria-current]::after{ transform: scaleX(1); }
.rb-nav a[aria-current]{ color: var(--plum); }

.rb-head-r{ display:flex; align-items:center; gap: 22px; flex: none; }

.rb-lang{ display:flex; gap: 9px; }
.rb-lang a{
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.rb-lang a[aria-current]{ color: var(--mauve-500); }
.rb-lang a:hover{ color: var(--plum); }

.rb-tel{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: color-mix(in srgb, var(--ink) 62%, transparent); white-space: nowrap;
}
.rb-tel:hover{ color: var(--plum); }

.rb-cta{
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--plum); padding: 11px 22px;
  border: 1px solid color-mix(in srgb, var(--plum) 30%, transparent);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.rb-cta:hover{ background: var(--plum); color: var(--paper); border-color: var(--plum); }

/* ── Tiroir telephone ── */
.rb-burger{ display:none; width:34px; height:26px; padding:0; background:none; border:0; cursor:pointer; }
.rb-burger span{ display:block; height:1px; background: var(--plum); margin: 7px 0; transition: transform .3s; }
.rb-burger[aria-expanded="true"] span:first-child{ transform: translateY(4px) rotate(45deg); }
.rb-burger[aria-expanded="true"] span:last-child{ transform: translateY(-4px) rotate(-45deg); }

.rb-drawer{
  position: fixed; inset: 0; z-index: 49;
  background: var(--paper);
  padding: 96px 40px 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
}
.rb-drawer[hidden]{ display:none; }
.rb-drawer nav{ display:flex; flex-direction:column; gap: 4px; }
.rb-drawer nav a{
  font-family: var(--serif); font-weight: 300; font-size: 34px;
  color: var(--plum); padding: 10px 0;
  border-bottom: var(--rule-soft);
}
.rb-drawer-foot{ display:flex; flex-direction:column; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: color-mix(in srgb, var(--ink) 60%, transparent); }

/* ── Fil d'Ariane ── */

/* ── Pied de page ── */
.rb-foot{ background: var(--plum); color: var(--paper-warm); margin-top: 0; }
.rb-foot-in{
  max-width: 1320px; margin: 0 auto; padding: 96px 56px 64px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 56px;
}
.rb-foot-brand{ color: var(--rose-dust); }
.rb-foot-tag{
  margin: 22px 0 0; max-width: 300px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.5; color: var(--paper-warm);
}
.rb-foot-hrs{
  margin: 16px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rose-dust) 80%, transparent);
}

.rb-foot-col h3{
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--mauve-200);
}
.rb-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 11px; }
.rb-foot-col a{
  font-family: var(--sans); font-weight: 300; font-size: 13.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--paper-warm) 82%, transparent);
}
.rb-foot-col a:hover{ color: var(--paper); }

.rb-foot-bar{
  max-width: 1320px; margin: 0 auto;
  padding: 26px 56px 40px;
  border-top: 1px solid color-mix(in srgb, var(--paper-warm) 14%, transparent);
  display:flex; align-items:center; gap: 28px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-warm) 55%, transparent);
}
.rb-foot-bar .rb-lang a{ color: color-mix(in srgb, var(--paper-warm) 55%, transparent); }
.rb-foot-bar .rb-lang a[aria-current]{ color: var(--rose-dust); }
.rb-foot-bar a:hover{ color: var(--paper); }
.rb-foot-bar .rb-vsf{ margin-left: auto; }

/* L'accueil demarre sous une barre fixe : on lui rend sa hauteur. */
.p-inner main{ display: block; }

@media (max-width: 1080px){
  .rb-head-in{ padding: 12px 28px; gap: 20px; }
  .rb-nav, .rb-tel{ display: none; }
  .rb-burger{ display: block; }
  .rb-foot-in{ grid-template-columns: 1fr 1fr; gap: 40px; padding: 64px 28px 48px; }
    .rb-foot-bar{ padding: 22px 28px 32px; }
}
@media (max-width: 620px){
  .rb-mark-t{ display: none; }
  .rb-cta{ padding: 9px 16px; font-size: 10px; }
  .rb-foot-in{ grid-template-columns: 1fr; }
  .rb-foot-bar .rb-vsf{ margin-left: 0; }
}

.rb-eyebrow{
  font-family: var(--mono); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--mauve-500);
}
.rb-link{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mauve-500);
}
.rb-link:hover{ color: var(--plum); }

.rb-btn{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--plum); padding: 13px 26px;
  border: 1px solid color-mix(in srgb, var(--plum) 28%, transparent);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.rb-btn:hover{ background: var(--plum); color: var(--paper); border-color: var(--plum); }
.rb-btn.plein{ background: var(--plum); color: var(--paper); border-color: var(--plum); }
.rb-btn.plein:hover{ background: var(--mauve-500); border-color: var(--mauve-500); }

/* Prix : gros chiffre, mention discrete dessous. */
.rb-price{
  font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1;
  color: var(--plum); display: flex; flex-direction: column; gap: 5px;
}
.rb-price small{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.rb-price.grand{ font-size: 58px; }

@media (max-width: 1080px){
  .rb-lead{ margin-left: 0; text-align: left; }
  .rb-rits{ padding: 48px 28px 80px; }
  .rb-rit{ grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .rb-rit-vis{ aspect-ratio: 16/10; }
  .rb-fiche{ grid-template-columns: 1fr; gap: 40px; padding: 56px 28px 0; }
  .rb-autres{ padding: 72px 28px 90px; }
}
@media (max-width: 620px){
  .rb-rit-steps{ grid-template-columns: 1fr; }
  .rb-price{ font-size: 34px; }
  .rb-price.grand{ font-size: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   RITUELS — liste et fiche.

   Le VISUEL seul s'inspire des cartes de l'accueil : trame diagonale
   et degrade prune, une teinte par rituel. Sans photo, on obtient une
   matiere, pas un aplat gris. Le reste de la page garde sa mise en
   page propre — colonne visuelle a gauche, texte a droite.
   ═══════════════════════════════════════════════════════════════ */

/* ── Le visuel, inspire du fond des cartes de l'accueil ── */
.rb-vis{
  position: relative; display: block; overflow: hidden;
  background: var(--linen) center/cover no-repeat;
  border: 1px solid color-mix(in srgb, var(--plum) 10%, transparent);
  aspect-ratio: 4/5;
  transition: filter 1s;
}
.rb-vis::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(14deg,rgba(110,76,91,.18) 0 1px,transparent 1px 14px),
              linear-gradient(160deg,var(--mauve-100),var(--linen) 60%,var(--mauve-200));
}
.rb-vis.r1::after{ background:
  repeating-linear-gradient(14deg,rgba(110,76,91,.20) 0 1px,transparent 1px 14px),
  linear-gradient(160deg,#d6c2cb,#b89aa4 70%,#8a6675); }
.rb-vis.r2::after{ background:
  repeating-linear-gradient(-8deg,rgba(110,76,91,.16) 0 1px,transparent 1px 16px),
  linear-gradient(180deg,#ecdfe3,#c9adb9 60%,#a6818f); }
.rb-vis.r3::after{ background:
  repeating-linear-gradient(6deg,rgba(33,20,24,.18) 0 1px,transparent 1px 12px),
  linear-gradient(200deg,#cdb4bc,#8d6976 65%,#4a3340); }
/* Une photo deposee passe devant la trame. */
.rb-vis[style*="background-image"]::after{ opacity: 0; }
.rb-vis::before{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg,rgba(33,20,24,0) 40%,rgba(33,20,24,.42) 100%);
}
a.rb-vis:hover{ filter: brightness(.92); }

.rb-vis-num{
  position:absolute; top: 20px; left: 22px; z-index: 4;
  font-family: var(--serif); font-size: 27px; font-style: italic; font-weight: 300;
  color: var(--paper); text-shadow: 0 1px 14px rgba(33,20,24,.45);
}
.rb-vis-tag{
  position:absolute; top: 20px; right: 20px; z-index: 4;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
}
.rb-vis.grand{ aspect-ratio: 4/4.6; }
.rb-vis.petit{ aspect-ratio: 3/2; }
.rb-vis.petit .rb-vis-num{ font-size: 20px; top: 12px; left: 14px; }

/* ── Liste ── */
.rb-rits{ max-width: 1320px; margin: 0 auto; padding: 80px 56px 120px;
  display: flex; flex-direction: column; }
.rb-rit{
  display: grid; grid-template-columns: 340px 1fr; gap: 56px;
  padding: 56px 0; align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 10%, transparent);
}
.rb-rit:first-child{ border-top: 1px solid color-mix(in srgb, var(--plum) 10%, transparent); }
.rb-rit-dur{
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mauve-500);
}
.rb-rit-txt h2{
  margin: 10px 0 0;
  font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.06; letter-spacing: -.015em; color: var(--plum);
}
.rb-rit-txt h2 a:hover{ color: var(--mauve-500); }
.rb-rit-txt p{
  margin: 18px 0 0; max-width: 620px;
  font-size: 14.5px; line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.rb-rit-steps{
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 32px;
}
.rb-rit-steps li{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 58%, transparent);
  padding-left: 16px; position: relative;
}
.rb-rit-steps li::before{
  content:""; position:absolute; left:0; top:.62em;
  width: 6px; height: 1px; background: var(--mauve-300);
}
.rb-rit-foot{ margin-top: 34px; display:flex; align-items:flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ── Fiche ── */
.rb-fiche-bar{
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
  display:flex; align-items:flex-end; justify-content:space-between; gap: 28px; flex-wrap: wrap;
}
.rb-fiche-cta{ display:flex; gap: 10px; flex-wrap: wrap; }
.rb-fiche{
  max-width: 1320px; margin: 0 auto; padding: 80px 56px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.rb-fiche-list ol{ list-style:none; margin: 26px 0 34px; padding: 0; }
.rb-fiche-list li{
  display:flex; gap: 20px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid color-mix(in srgb, var(--plum) 9%, transparent);
  font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.rb-fiche-list li .n{
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--mauve-300); flex: none;
}

/* ── Les autres rituels ── */
.rb-autres{ max-width: 1320px; margin: 0 auto; padding: 100px 56px 120px; }
.rb-autres-head{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
}
.rb-autres-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px; margin-top: 40px;
}
.rb-autre{ display:flex; flex-direction:column; gap: 16px; }
.rb-autre-txt{ display:flex; flex-direction:column; gap: 5px; }
.rb-autre .nom{ font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--plum); }
.rb-autre:hover .nom{ color: var(--mauve-500); }
.rb-autre .dur{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.rb-autre .prix{ margin-top: 6px; font-family: var(--serif); font-size: 22px; color: var(--mauve-500); }

@media (max-width: 1080px){
  .rb-rits{ padding: 48px 28px 80px; }
  .rb-rit{ grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .rb-vis{ aspect-ratio: 16/10; }
  .rb-fiche{ grid-template-columns: 1fr; gap: 40px; padding: 56px 28px 0; }
  .rb-autres{ padding: 72px 28px 90px; }
}
@media (max-width: 620px){
  .rb-rit-steps{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SCEAU AU CENTRE DU VISUEL

   Un degrade seul reste une surface vide : rien n'annonce de quel
   rituel il s'agit. On pose donc au centre l'embleme du rituel —
   couronne, lotus, sultan — dans le meme trait fin que le reste du
   site, entoure d'un double cercle comme le sceau « RB » de
   l'accueil. C'est ce qui fait la difference entre un aplat et une
   image de marque, tant qu'aucune photo n'a ete deposee.
   ═══════════════════════════════════════════════════════════════ */

.rb-vis-ic{
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rb-vis-ic svg{
  width: 44%; height: auto; max-width: 190px;
  stroke: var(--paper); stroke-width: .85; fill: none;
  opacity: .42;
  filter: drop-shadow(0 2px 18px rgba(33,20,24,.28));
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
/* Le double cercle du sceau, dessine en CSS : pas de fichier de plus. */
.rb-vis-ic::before,
.rb-vis-ic::after{
  content:""; position:absolute; top:50%; left:50%;
  border-radius: 50%; transform: translate(-50%,-50%);
  border: 1px solid color-mix(in srgb, var(--paper) 34%, transparent);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s;
}
.rb-vis-ic::before{ width: 62%; padding-top: 62%; max-width: 268px; }
.rb-vis-ic::after{
  width: 55%; padding-top: 55%; max-width: 238px;
  border-color: color-mix(in srgb, var(--paper) 18%, transparent);
}

a.rb-vis:hover .rb-vis-ic svg{ opacity: .58; transform: scale(1.04); }
a.rb-vis:hover .rb-vis-ic::before{ transform: translate(-50%,-50%) scale(1.05); }

/* Une photo deposee prend toute la place : le sceau s'efface. */
.rb-vis[style*="background-image"] .rb-vis-ic{ opacity: .3; }

/* Chaque rituel a sa propre teinte de sceau, accordee a son fond. */
.rb-vis.r1 .rb-vis-ic svg{ stroke: #fbf1ea; }
.rb-vis.r2 .rb-vis-ic svg{ stroke: #4a3340; opacity: .32; filter: none; }
.rb-vis.r2 .rb-vis-ic::before{ border-color: color-mix(in srgb, #4a3340 22%, transparent); }
.rb-vis.r2 .rb-vis-ic::after{ border-color: color-mix(in srgb, #4a3340 12%, transparent); }
.rb-vis.r3 .rb-vis-ic svg{ stroke: #f3e3e8; }

/* Petit format : le sceau respire moins, on retire les cercles. */
.rb-vis.petit .rb-vis-ic::before,
.rb-vis.petit .rb-vis-ic::after{ display: none; }
.rb-vis.petit .rb-vis-ic svg{ width: 36%; opacity: .34; }

/* ═══════════════════════════════════════════════════════════════
   EN-TETE DE PAGE — le hero de l'accueil, a l'echelle d'une page.

   La premiere version alignait numero / titre / mention sur trois
   colonnes : une grammaire de tableau, etrangere au site. On reprend
   exactement la composition du bandeau d'accueil, en plus court —
   sceau, surtitre encadre de deux filets, grand titre dont la
   seconde moitie passe en italique mauve, sous-titre ponctue de
   points, puis l'accroche en italique.

   Memes valeurs que le hero : letter-spacing .56em, filets de 36px,
   points de 4px. Ce sont ces chiffres qui font la parente, pas une
   ressemblance approximative.
   ═══════════════════════════════════════════════════════════════ */

.rb-hero{
  position: relative;
  /* La barre du haut flotte au-dessus (fixe, transparente) : le
     bandeau prend donc l'ecran depuis y=0 et menage lui-meme la
     place — exactement la mecanique de l'accueil. */
  padding: 158px 56px 84px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 10%, transparent);
}
/* La vraie vapeur (Three.js), sous tout le reste. */
.rb-hero .rb-vapor{
  position: absolute; inset: 0; z-index: 0;
  width: 100% !important; height: 100% !important;
  pointer-events: none;
}
/* Le meme voile que .hero::after sur l'accueil : la vapeur se fond
   dans le papier vers les bords au lieu de s'arreter net. */
.rb-hero::after{
  content:""; position:absolute; inset:0; z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 35% 60%, transparent 0%, transparent 40%, rgba(250,247,244,.45) 80%, var(--paper) 100%);
}
.rb-hero > *{ position: relative; z-index: 2; }
.rb-hero .rb-vapor{ z-index: 0; }

.rb-hero-seal{ width: 74px; height: 74px; margin-bottom: 30px; opacity: .92; }

.rb-hero-eyebrow{
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .56em; text-transform: uppercase;
  color: var(--mauve-500);
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 26px;
}
.rb-hero-eyebrow .ln{
  width: 36px; height: 1px;
  background: color-mix(in srgb, var(--mauve-500) 50%, transparent);
}

.rb-hero h1{
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 6.6vw, 108px);
  line-height: 1.02; letter-spacing: -.022em;
  color: var(--plum);
}
.rb-hero h1 em{ font-style: italic; font-weight: 300; color: var(--mauve-500); }

.rb-hero-sub{
  margin-top: 28px;
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: .56em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.rb-hero-sub .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--mauve-300); }

.rb-hero-poem{
  margin-top: 40px; max-width: 580px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5;
  color: var(--plum); text-wrap: pretty;
}

@media (max-width: 1080px){
  .rb-hero{ padding: 64px 28px 52px; }
  .rb-hero-seal{ width: 60px; height: 60px; margin-bottom: 22px; }
  .rb-hero-eyebrow{ letter-spacing: .34em; gap: 12px; font-size: 9.5px; }
  .rb-hero-eyebrow .ln{ width: 22px; }
  .rb-hero-sub{ letter-spacing: .3em; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOCLE DES PAGES INTERIEURES — retabli.

   La regle de base .rb-page etait partie avec l'ancien en-tete de
   page lors du passage au bandeau : la barre de prix s'etalait d'un
   bord a l'autre de l'ecran, collee au pied de page. Le controle
   « chaque classe a une regle » n'a rien vu — il restait une regle
   en media query. Un conteneur doit avoir sa largeur, son centrage
   et son air, sur toutes les tailles d'ecran.
   ═══════════════════════════════════════════════════════════════ */

.rb-page{
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 56px 104px;
}
.rb-page > .rb-fiche-bar:first-child{ margin-top: 0; }

/* ── La barre de prix sur telephone : empilee, boutons pleine
      largeur. Deux boutons a moitie coupes au bord, c'est ce qu'on
      vient de corriger — la cible principale est le mobile. ── */
@media (max-width: 720px){
  .rb-page{ padding: 40px 24px 72px; }
  .rb-fiche-bar{
    flex-direction: column; align-items: stretch; gap: 26px;
  }
  .rb-fiche-bar .rb-price{ align-items: center; text-align: center; }
  .rb-fiche-cta{ flex-direction: column; }
  .rb-fiche-cta .rb-btn{ justify-content: center; }
}

/* ── Bandeau : la barre du haut est FIXE, le bandeau doit degager
      sa propre place aussi sur telephone. 64px ne suffisaient pas,
      le sceau passait sous la barre. ── */
@media (max-width: 1080px){
  .rb-hero{ padding: 128px 24px 56px; }
}

/* ── Filets de securite mobile ── */
html, body{ overflow-x: hidden; }
.rb-btn{ max-width: 100%; white-space: normal; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   SOINS & TARIFS — la carte.

   Une carte de soins se lit comme un menu : le nom a gauche, le
   prix a droite, un filet pointille qui relie les deux. Chiffre
   romain par famille, intro en italique — le meme vocabulaire que
   le reste du site.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sommaire des familles ── */
.rb-svc-som{
  max-width: 1320px; margin: 0 auto;
  padding: 40px 56px 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.rb-svc-som a{ flex: none; white-space: nowrap; }
.rb-svc-som a{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.rb-svc-som a:hover{ background: var(--plum); color: var(--paper); border-color: var(--plum); }
.rb-svc-som .n{
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--mauve-300); text-transform: none;
}
.rb-svc-som a:hover .n{ color: var(--rose-dust); }
.rb-svc-som .c{
  font-family: var(--mono); font-size: 9px; color: color-mix(in srgb, var(--ink) 40%, transparent);
}
.rb-svc-som a:hover .c{ color: color-mix(in srgb, var(--paper) 65%, transparent); }

/* ── Une famille ── */
.rb-svc{ max-width: 1100px; margin: 0 auto; padding: 24px 56px 110px; }
.rb-svc-cat{ padding-top: 72px; }
.rb-svc-cat:target{ scroll-margin-top: 96px; }

.rb-svc-head{
  display: flex; align-items: flex-start; gap: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 16%, transparent);
}
.rb-svc-num{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 40px; line-height: 1; color: var(--mauve-200);
  flex: none; width: 52px;
}
.rb-svc-tt{ flex: 1; }
.rb-svc-tt h2{
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.015em;
  color: var(--plum);
}
.rb-svc-tt p{
  margin: 12px 0 0; max-width: 640px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 16.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.rb-svc-ic{ flex: none; color: var(--mauve-300); margin-top: 6px; }
.rb-svc-ic svg{ stroke: currentColor; }

/* ── Les lignes de soins ── */
.rb-svc-list{ list-style: none; margin: 0; padding: 0; }
.rb-svc-list li{
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 8%, transparent);
}
.rb-svc-main{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rb-svc-name{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.3; color: var(--plum);
}
.rb-svc-desc{
  font-size: 13.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  max-width: 520px;
}
/* Le filet pointille du menu, qui relie le nom au prix. */
.rb-svc-fil{
  flex: 1; min-width: 34px;
  border-bottom: 1px dotted color-mix(in srgb, var(--plum) 30%, transparent);
  transform: translateY(-4px);
}
.rb-svc-meta{ flex: none; display: flex; align-items: baseline; gap: 18px; }
.rb-svc-dur{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 45%, transparent);
  white-space: nowrap;
}
.rb-svc-prix{
  font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1;
  color: var(--plum); display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  white-space: nowrap;
}
.rb-svc-prix small{
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.rb-svc-note{
  margin: 64px 0 0; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.rb-svc-cta{
  margin-top: 30px;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 720px){
  /* Une seule ligne qui glisse au doigt : quatre familles empilees
     mangeaient un demi-ecran de telephone avant le premier soin. */
  .rb-svc-som{
    padding: 28px 24px 0;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .rb-svc-som::-webkit-scrollbar{ display: none; }
  .rb-svc-som a{ scroll-snap-align: start; }
  .rb-svc{ padding: 8px 24px 80px; }
  .rb-svc-cat{ padding-top: 52px; }
  .rb-svc-head{ gap: 16px; }
  .rb-svc-num{ font-size: 30px; width: 38px; }
  .rb-svc-ic{ display: none; }
  .rb-svc-list li{ flex-wrap: wrap; gap: 8px 14px; }
  .rb-svc-fil{ display: none; }
  .rb-svc-main{ flex: 1 1 100%; }
  .rb-svc-meta{ width: 100%; justify-content: space-between; }
  .rb-svc-prix{ align-items: flex-end; }
  .rb-svc-cta .rb-btn{ width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   DUO & COUPLES.
   La suite signature en deux colonnes (visuel / texte), puis la
   carte des experiences a deux — memes lignes que /soins — et la
   demande speciale, centree comme une invitation.
   ═══════════════════════════════════════════════════════════════ */

.rb-duo{
  max-width: 1320px; margin: 0 auto;
  padding: 72px 56px 40px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px;
  align-items: center;
}
.rb-duo-vis{ aspect-ratio: 4/4.8; }
.rb-duo-txt h2{
  margin: 14px 0 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -.018em;
  color: var(--plum);
}
.rb-duo-txt h2 em{ font-style: italic; color: var(--mauve-500); }
.rb-duo-quote{
  margin: 24px 0 0; padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--mauve-500) 45%, transparent);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.55; color: var(--plum);
}
.rb-duo-desc{
  margin: 18px 0 0; max-width: 560px;
  font-size: 14.5px; line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.rb-duo-feats{ margin-top: 24px; }

.rb-duo-all{ padding-top: 40px; }
.rb-duo-all-head{ text-align: center; padding-top: 40px; }
.rb-duo-all-head h2{
  margin: 14px 0 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.05; color: var(--plum);
}
.rb-duo-all-head p{
  margin: 18px auto 0; max-width: 620px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 17px; line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

/* ── Demande speciale ── */
.rb-req{
  max-width: 720px; margin: 0 auto;
  padding: 8px 56px 120px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rb-req-ic{ color: var(--mauve-300); margin-bottom: 16px; }
.rb-req-ic svg{ stroke: currentColor; }
.rb-req h2{
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px); color: var(--plum);
}
.rb-req > p{
  margin: 14px 0 0; max-width: 520px;
  font-size: 14px; line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.rb-req-form{
  margin-top: 32px; width: 100%;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.rb-req-lbl{
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mauve-500);
}
.rb-req-form select,
.rb-req-form textarea{
  width: 100%; padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
  border-radius: 0; background: var(--paper);
  font-family: var(--sans); font-weight: 300; font-size: 14px;
  color: var(--ink); resize: vertical;
}
.rb-req-form select:focus,
.rb-req-form textarea:focus{
  outline: none; border-color: var(--mauve-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mauve-500) 14%, transparent);
}
.rb-req-form .rb-btn{ align-self: center; margin-top: 6px; }

@media (max-width: 1080px){
  .rb-duo{ grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 24px; }
  .rb-duo-vis{ aspect-ratio: 16/10; }
  .rb-req{ padding: 8px 24px 90px; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGES SIMPLES — enfants, promotions, politique.
   ═══════════════════════════════════════════════════════════════ */

.rb-actions-centre{
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  text-align: center;
}
.rb-page.rb-actions-centre{ padding-top: 48px; }

/* ── Texte legal ── */
.rb-legal{ max-width: 760px; }
.rb-legal h2{
  margin: 44px 0 0;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--mauve-500);
}
.rb-legal h2:first-child{ margin-top: 0; }
.rb-legal p{
  margin: 14px 0 0;
  font-size: 14.5px; line-height: 1.8;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.rb-legal a{ color: var(--mauve-500); border-bottom: 1px solid color-mix(in srgb, var(--mauve-500) 40%, transparent); }
.rb-legal a:hover{ color: var(--plum); border-color: var(--plum); }
.rb-legal-back{ margin-top: 56px !important; }
.rb-legal-back a{ border: none; }

/* ── Promotions actives (des que l'administration existera) ── */
.rb-promos{ max-width: 860px; display: flex; flex-direction: column; gap: 20px; }
.rb-promo{
  padding: 36px 40px;
  border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  background: var(--paper);
}
.rb-promo.phare{ background: var(--mauve-50); border-color: color-mix(in srgb, var(--plum) 22%, transparent); }
.rb-promo-badge{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mauve-500);
}
.rb-promo h2{
  margin: 10px 0 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--plum);
}
.rb-promo p{
  margin: 12px 0 0; font-size: 14px; line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.rb-promo-foot{
  margin-top: 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.rb-promo-label{ font-family: var(--serif); font-size: 24px; color: var(--mauve-500); }
.rb-promo-fin{
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.rb-promo-foot .rb-btn{ margin-left: auto; }
@media (max-width: 620px){
  .rb-promo{ padding: 26px 22px; }
  .rb-promo-foot .rb-btn{ margin-left: 0; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CARTES CADEAUX — le parcours en 4 etapes.

   A gauche, la carte se dessine en direct pendant qu'on la remplit ;
   a droite, les etapes. Les classes (gift-*, gc-*) sont celles du
   parcours d'origine : le JavaScript s'y accroche, on ne les renomme
   pas — on les habille.
   ═══════════════════════════════════════════════════════════════ */

.gift{ max-width: 1320px; margin: 0 auto; padding: 56px 56px 120px; }
.gift-layout{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.gift-preview-col{ position: sticky; top: 110px; }

/* ── L'apercu de la carte ── */
.gc-card{
  aspect-ratio: 10/14; max-width: 440px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--plum) 18%, transparent);
  box-shadow: 0 30px 70px -38px rgba(33,20,24,.28);
  padding: 14px;
}
.gc-frame{
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--mauve-500) 35%, transparent);
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 26px; text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--mauve-50) 60%, transparent) 0%, transparent 55%),
    var(--paper);
}
.gc-occasion{
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--mauve-500);
}
.gc-motif{ margin: 26px 0 10px; color: var(--mauve-300); }
.gc-motif svg{ stroke: currentColor; }
.gc-hand{ flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; }
.gc-line{ font-size: 13px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.gc-lbl{
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.gc-write{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 21px; color: var(--plum);
}
.gc-msg{ font-size: 17px; line-height: 1.5; max-width: 300px; margin: 0 auto; }
.gc-gift{
  font-family: var(--serif); font-weight: 300; font-size: 15px;
  color: var(--mauve-500); min-height: 1.2em;
}
.gc-logo{ margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gc-logo-t{
  font-family: var(--serif); font-size: 15px; font-weight: 300;
  letter-spacing: .04em; color: var(--plum);
}

/* ── Le rail des etapes ── */
.gift-steps{
  list-style: none; margin: 0 0 40px; padding: 0;
  display: flex; gap: 6px;
}
.gift-steps li{
  flex: 1; display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
}
.gift-steps li span{
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--plum) 25%, transparent);
  border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 12px;
}
.gift-steps li.active{ color: var(--plum); border-bottom-color: var(--mauve-500); }
.gift-steps li.active span{ background: var(--plum); border-color: var(--plum); color: var(--paper); }

.gift-h{
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--plum);
}
.gift-h3{
  margin: 34px 0 18px;
  font-family: var(--serif); font-weight: 300; font-size: 22px; color: var(--plum);
}

/* ── Etape 1 : les modeles ── */
.gc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gc-thumb{
  aspect-ratio: 10/12; padding: 16px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--plum) 16%, transparent);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.gc-thumb:hover{ border-color: var(--mauve-500); }
.gc-thumb.sel{
  border-color: var(--plum);
  box-shadow: 0 0 0 1px var(--plum), 0 14px 30px -18px rgba(33,20,24,.3);
  background: var(--mauve-50);
}
.gc-thumb-occasion{
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mauve-500); text-align: center;
}
.gc-thumb-motif{ color: var(--mauve-300); }
.gc-thumb-motif svg{ stroke: currentColor; }

/* ── Etape 2 : onglets soin / montant ── */
.gift-tabs{ display: flex; gap: 8px; margin-bottom: 22px; }
.gift-tab{
  flex: 1; padding: 13px 10px; cursor: pointer;
  font-family: var(--sans); font-weight: 300;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum); background: transparent;
  border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
  transition: background .3s, color .3s;
}
.gift-tab.active{ background: var(--plum); color: var(--paper); border-color: var(--plum); }

/* ── Champs ── */
.gift-field{ margin-bottom: 18px; }
.gift-lbl{
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mauve-500);
}
.gift-input, .gift-select{
  width: 100%; padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
  border-radius: 0; background: var(--paper);
  font-family: var(--sans); font-weight: 300; font-size: 14px;
  color: var(--ink); resize: vertical;
}
.gift-input:focus, .gift-select:focus{
  outline: none; border-color: var(--mauve-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mauve-500) 14%, transparent);
}
.gift-hint{
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* ── Navigation d'etape ── */
.gift-nav{ display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.gift-nav .btn, .gift-addmore, .gift-submit{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; cursor: pointer;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--plum); background: transparent;
  border: 1px solid color-mix(in srgb, var(--plum) 28%, transparent);
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.gift-nav .btn-primary, .gift-nav .btn-dark, .gift-submit{
  background: var(--plum); color: var(--paper); border-color: var(--plum);
}
.gift-nav .btn:hover, .gift-addmore:hover{ border-color: var(--plum); }
.gift-nav .btn-primary:hover, .gift-submit:hover{ background: var(--mauve-500); border-color: var(--mauve-500); }
.gift-nav .btn:disabled, .gift-submit:disabled{ opacity: .4; cursor: not-allowed; }
.gift-nav:has(> :only-child){ justify-content: flex-end; }

/* ── Panier ── */
.gift-cart{ display: flex; flex-direction: column; gap: 10px; }
.gift-cart-empty{
  padding: 26px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  border: 1px dashed color-mix(in srgb, var(--plum) 22%, transparent);
}
.gift-cart-item{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  background: var(--mauve-50);
}
.gci-main{ flex: 1; min-width: 0; }
.gci-occ{
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mauve-500); margin-bottom: 5px;
}
.gci-sub{ font-size: 13.5px; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.gci-sub:first-of-type{ font-family: var(--serif); font-size: 16px; color: var(--plum); }
.gci-remove{
  flex: none; width: 28px; height: 28px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--plum) 20%, transparent);
  background: transparent; color: var(--plum); font-size: 15px; line-height: 1;
}
.gci-remove:hover{ background: var(--plum); color: var(--paper); }
.gift-addmore{ margin-top: 14px; }

/* ── Consentement + envoi ── */
.gift-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gift-rgpd{
  display: flex; gap: 11px; align-items: flex-start;
  margin: 6px 0 20px;
  font-size: 12.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.gift-rgpd input{ margin-top: 3px; accent-color: var(--plum); }
.gift-rgpd a{ color: var(--mauve-500); text-decoration: underline; }
.gift-submit{ width: 100%; position: relative; }
.gift-submit .spin{
  display: none; width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, var(--paper) 40%, transparent);
  border-top-color: var(--paper); border-radius: 50%;
  animation: rb-spin .7s linear infinite;
}
.gift-submit.loading .spin{ display: inline-block; }
@keyframes rb-spin{ to{ transform: rotate(360deg); } }
.gift-msg{ margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; }
.gift-msg.ok{ color: #3d6b4f; }
.gift-msg.err{ color: #a2453b; }

@media (max-width: 1080px){
  .gift{ padding: 36px 24px 90px; }
  .gift-layout{ grid-template-columns: 1fr; gap: 40px; }
  .gift-preview-col{ position: static; }
  .gc-card{ max-width: 320px; }
  .gc-grid{ grid-template-columns: repeat(2, 1fr); }
  .gift-steps li{ font-size: 0; gap: 0; justify-content: center; }
  .gift-steps li span{ font-size: 12px; }
  .gift-row2{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RETOUCHES MOBILE (constat sur telephone).
   ═══════════════════════════════════════════════════════════════ */

/* 1. Cartes /soins et /duo : le prix se calait a gauche quand le
      soin n'a pas de duree (Manucure, Pedicure) — les montants
      zigzaguaient d'une ligne a l'autre. Duree a gauche, prix a
      droite, TOUJOURS, sur une seule ligne. */
@media (max-width: 720px){
  .rb-svc-meta{ width: 100%; display: flex; align-items: baseline; }
  .rb-svc-dur{ margin-right: auto; }
  .rb-svc-prix{ margin-left: auto; align-items: flex-end; }
}

/* 2. Accueil : le sceau collait a la barre fixe. On lui rend l'air
      que la barre lui prend. */
.hero-stage{ padding-top: 112px; }
@media (max-width: 1080px){
  .hero-stage{ padding-top: 128px; }
}

/* 3. Les grands visuels (fiche rituel, suite duo) gardaient leur
      format portrait 4/4.6 sur telephone : .rb-vis.grand pesait plus
      lourd que la regle mobile. Un panneau sans photo n'a pas a
      manger tout l'ecran — paysage court, la suite du contenu
      apparait sans defiler. */
@media (max-width: 1080px){
  .rb-vis.grand,
  .rb-duo .rb-vis.grand{
    aspect-ratio: 16/9;
    max-height: 300px;
    width: 100%;
  }
  .rb-vis.grand .rb-vis-ic svg{ width: 26%; max-width: 120px; }
  .rb-vis.grand .rb-vis-ic::before{ width: 40%; padding-top: 40%; }
  .rb-vis.grand .rb-vis-ic::after{ width: 34%; padding-top: 34%; }
}

  /* ── Reservation reelle : erreur d'envoi + mention legale ── */
  .booking-done.err .check{ background: #a04434; }
  .booking-done .retry{
    font: inherit; font-style: normal; font-family: var(--mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    background: none; border: 1px solid var(--mauve-300); border-radius: 999px;
    color: var(--mauve-500); padding: 6px 14px; cursor: pointer; flex: none;
  }
  .booking-done .retry:hover{ border-color: var(--mauve-500); }
  .booking-foot .foot-legal{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .booking-foot .foot-legal:hover{ color: var(--mauve-500); }

  /* ── Menu de reservation etendu (catalogue complet) ── */
  .ritual-menu{ max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
  .ritual-group{
    padding: 10px 18px 4px; font-family: var(--mono);
    font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--mauve-300); border-top: 1px solid var(--mauve-50);
    pointer-events: none;
  }
  .ritual-option.active{ position: relative; }
  .ritual-option.active::before{
    content: '✓'; position: absolute; left: 5px; top: 50%;
    transform: translateY(-50%); font-size: 10px; color: var(--mauve-500);
  }
  select.prog-select{
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 0; cursor: pointer;
  }

  /* ── Signature VSF AGENCY (standard commun a tous les sites VSF) ── */
  .footer-credit{ display:inline-flex; align-items:center; gap:8px; font-family:"League Spartan",sans-serif; }
  .footer-credit .credit-text{ font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:none; color:rgba(244,237,230,.55); }
  .footer-credit .credit-heart{ width:17px; height:17px; fill:var(--rose-dust); animation:heartBeat 1.5s ease-in-out infinite; }
  .footer-credit .credit-agency{ font-weight:700; font-size:12.5px; letter-spacing:.14em; color:rgba(244,237,230,.85); text-decoration:none; }
  .footer-credit .credit-agency:hover{ color:var(--rose-dust); }
  @keyframes heartBeat{ 0%,100%{transform:scale(1)} 10%,30%{transform:scale(1.2)} 20%,40%{transform:scale(1)} }