/* RYNN — feuille de style commune à toutes les pages */
  :root {
    /* Palette de la brochure RYNN */
    --blush: #ffffff;
    --paper: #fdf8f4;
    --rose: #ac5c58;
    --wine: #8b3c3b;
    --teal: #3f5f5b;
    --teal-soft: #8fbcb8;
    --teal-pale: #dfecea;
    --espresso: #3b2a29;
    --petal: #fbe6de;
    --ink: #2f2826;
    --muted: #6b5f5b;
    --line: rgba(63, 95, 91, .22);
    --heading: "Cinzel", Georgia, serif;
    --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 24px;
    --max: 1200px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--blush); color: var(--ink);
    font-family: var(--body); font-size: 16px; line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  img { max-width: 100%; height: auto; display: block; }
  .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
  h1, h2, h3 { font-family: var(--heading); font-weight: 500; color: var(--wine); line-height: 1.2; margin: 0; }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--paper); padding: 8px 14px; }
  .center { text-align: center; }
  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
  .h2 { font-size: clamp(28px, 3.4vw, 42px); }
  section.block { padding: 110px 0; }

  /* Motif étoile de la marque */
  .star { display: inline-block; width: 1em; height: 1em; }
  .ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px auto 0; }
  .ornament::before, .ornament::after { content: ""; width: 48px; height: 1px; background: var(--rose); }
  .ornament .star { width: 20px; height: 20px; }

  /* Boutons en pilule */
  .btn {
    display: inline-block; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; text-decoration: none; padding: 14px 30px; border-radius: 999px;
    border: 1px solid var(--rose); background: var(--rose); color: var(--paper); cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
  }
  .btn:hover { background: var(--wine); border-color: var(--wine); }
  .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn-small { padding: 9px 18px; font-size: 11px; background: var(--espresso); border-color: var(--espresso); }
  .btn-small:hover { background: var(--rose); border-color: var(--rose); }

  /* Photos */
  .photo { position: relative; overflow: hidden; border-radius: var(--radius); background: #e6d3ca center / cover no-repeat; }
  .reserved {
    background: repeating-linear-gradient(135deg, #efe0d8 0 14px, #f4e8e1 14px 28px);
    border: 1px dashed rgba(173, 92, 88, .5); display: grid; place-items: center; text-align: center; padding: 20px;
  }
  .reserved span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
  .reserved small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }

  /* En-tête */
  header { position: sticky; top: 0; z-index: 30; background: var(--blush); border-bottom: 1px solid var(--line); }
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; gap: 24px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--rose); font-family: var(--heading); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: .04em; }
  .brand .star { width: 38px; height: 38px; flex: none; }
  .brand small { display: block; font-family: var(--body); font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--teal); margin-top: 6px; white-space: nowrap; }
  .brand-logo { height: 56px; width: auto; }
  footer .brand-logo { height: 62px; }
  .menu { display: flex; gap: 30px; }
  .menu a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent; }
  .menu a:hover, .menu a.current { border-color: var(--ink); }
  .nav-end { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
  .social { display: flex; gap: 12px; }
  .social a { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink); }
  .social a:hover { color: var(--rose); }
  .social svg { width: 17px; height: 17px; }
  .nav-end .btn { padding: 11px 22px; font-size: 12px; }
  .menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; justify-self: end; }
  .menu-toggle span { display: block; width: 26px; height: 1px; background: var(--ink); margin: 7px 0; }

  /* Bannière : photos pleine largeur, texte centré, flèches */
  .hero { position: relative; height: min(62vh, 540px); min-height: 420px; overflow: hidden; background: var(--espresso); }
  /* Bande horizontale défilante : flèches, glisser au doigt ou au pavé tactile */
  .hero-track {
    display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .hero-track::-webkit-scrollbar { display: none; }
  .slide {
    position: relative; flex: 0 0 100%; height: 100%; display: grid; place-items: center; text-align: center;
    background: center / cover no-repeat; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .slide::before { content: ""; position: absolute; inset: 0; background: rgba(47, 32, 30, .42); }
  /* Diapo 2, stylo de microneedling : zoom de 25 %, cadrage sur la molette et les mains */
  .slide:nth-child(2) { background-size: 125% auto; background-position: 47% 55%; }
  .slide-content { position: relative; z-index: 2; max-width: 720px; padding: 0 72px; color: var(--paper); }
  .slide-content .kicker { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 16px; color: var(--petal); }
  .slide-content h1, .slide-content h2 { color: var(--paper); font-size: clamp(32px, 4.6vw, 54px); }
  .slide-content p { font-size: 17px; margin: 18px auto 30px; max-width: 520px; }
  .slide-content .btn { background: var(--espresso); border-color: var(--espresso); }
  .slide-content .btn:hover { background: var(--rose); border-color: var(--rose); }
  .arrow {
    position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(47, 32, 30, .78); color: var(--paper); display: grid; place-items: center;
  }
  .arrow:hover { background: var(--rose); }
  .arrow svg { width: 20px; height: 20px; }
  .arrow.prev { left: 24px; }
  .arrow.next { right: 24px; }

  /* Ce qui nous distingue : photo + accordéon */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .duo .photo { aspect-ratio: 4 / 5; max-width: 440px; justify-self: center; width: 100%; }
  .duo-text { max-width: 460px; }
  .duo-text .h2 { text-align: center; margin-bottom: 30px; }
  .accordion { border-top: 1px solid var(--ink); margin-bottom: 30px; }
  .accordion details { border-bottom: 1px solid var(--ink); }
  .accordion summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 0; font-weight: 500; font-size: 15.5px;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary::after {
    content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px;
    border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
    transform: rotate(45deg) translateY(-3px); transition: transform .25s;
  }
  .accordion details[open] summary::after { transform: rotate(-135deg) translate(-3px, 0); }
  .accordion p { margin: 0 0 16px; color: var(--muted); }

  /* Bande signature (ancienne couverture) */
  .signature { background: var(--rose); color: var(--petal); padding: 72px 0; overflow: hidden; }
  .signature .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
  .signature-logo { width: min(240px, 60%); margin: 0 0 22px -5px; }
  .signature h2 { color: var(--paper); font-size: clamp(30px, 3.8vw, 46px); }
  .signature p { font-size: 17px; margin: 18px 0 0; max-width: 500px; }
  .signature .btn { margin-top: 26px; background: var(--petal); color: var(--wine); border-color: var(--petal); }
  .signature .btn:hover { background: var(--paper); border-color: var(--paper); }
  .signature-star { width: 100%; max-width: 340px; justify-self: center; }

  /* Bandeau défilant fin */
  .marquee { display: block; overflow: hidden; background: var(--teal); padding: 9px 0; text-decoration: none; }
  .marquee-track { display: flex; width: max-content; animation: scroll 45s linear infinite; }
  .marquee span { font-style: italic; font-size: 14px; color: var(--petal); white-space: nowrap; padding-right: 26px; display: inline-flex; align-items: center; gap: 26px; }
  .marquee .star { width: 12px; height: 12px; }
  @keyframes scroll { to { transform: translateX(-50%); } }

  /* Soins : cartes défilantes */
  .carousel-wrap { position: relative; margin-top: 56px; }
  .carousel {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; text-align: left; }
  .card .photo { aspect-ratio: 4 / 3; border-radius: 16px; margin-bottom: 20px; }
  .card h3 { font-size: 19px; margin-bottom: 10px; }
  .card p { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
  .carousel-wrap .arrow { top: 28%; }
  .carousel-wrap .arrow.prev { left: -22px; }
  .carousel-wrap .arrow.next { right: -22px; }
  .note { max-width: 640px; margin: 44px auto 0; font-style: italic; font-size: 14.5px; color: var(--muted); }


  /* Avant / après (réservé) */
  .ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 44px auto 0; }
  .ba .photo { aspect-ratio: 3 / 4; border-radius: 16px; }

  /* World PRP */
  .prp { background: var(--espresso); color: var(--petal); }
  .prp h2, .prp h3 { color: var(--paper); }
  .prp .eyebrow { color: #e6b9ae; }
  .prp-sub { font-family: var(--heading); font-size: clamp(19px, 2vw, 24px); color: #e6b9ae; margin: 12px 0 0; }
  .prp-grid { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 56px; margin-top: 56px; align-items: start; }
  .prp .photo { aspect-ratio: 3 / 4; background-position: center 62%; }
  .prp-list { list-style: none; margin: 0; padding: 0; }
  .prp-list li { padding: 18px 0; border-bottom: 1px solid rgba(251,230,222,.18); }
  .prp-list li:first-child { padding-top: 0; }
  .prp-list b { display: block; font-weight: 600; color: #f0c9bf; }
  .prp-col h3 { font-size: 20px; margin-bottom: 18px; }
  .steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
  .steps li { counter-increment: s; padding: 0 0 22px 48px; position: relative; }
  .steps li::before {
    content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #e6b9ae; color: #e6b9ae; display: grid; place-items: center; font-family: var(--heading); font-size: 15px;
  }
  .steps b { color: var(--paper); font-weight: 600; }
  .prp .note { color: #e6b9ae; margin: 36px 0 0; max-width: none; }

  /* Rine */
  .duo.reverse .photo { aspect-ratio: 4 / 5; }
  .about-text { text-align: center; max-width: 480px; justify-self: center; }
  .about-text p { margin: 20px 0 0; }
  .credentials { margin: 26px 0 30px; }
  .credentials strong { display: block; font-family: var(--heading); font-weight: 500; font-size: 20px; color: var(--teal); }
  .credentials span { color: var(--muted); font-size: 14px; }

  /* Bandeau ondulé : préoccupations */
  .wave { position: relative; background: var(--teal); color: var(--petal); padding: 70px 0; margin: 60px 0; }
  .wave::before, .wave::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; background: var(--teal); }
  .wave::before { top: -59px; clip-path: path("M0 60 C 300 0, 600 0, 900 30 S 1600 60, 2400 10 L 2400 60 Z"); }
  .wave::after { bottom: -59px; clip-path: path("M0 0 L 2400 0 L 2400 30 C 1900 60, 1400 60, 900 40 S 300 0, 0 50 Z"); }
  .wave h2 { color: var(--paper); }
  .wave .eyebrow { color: var(--teal-soft); }
  .concerns { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 72px; max-width: 900px; margin: 50px auto 0; text-align: center; }
  .concern h3 { color: var(--paper); font-size: 20px; }
  .concern p { margin: 8px 0 6px; }
  .concern span { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-soft); }
  .treats { max-width: 860px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid rgba(251,230,222,.25); }
  .treats h3 { color: var(--paper); font-size: 20px; }
  .treats p { margin: 14px 0 0; line-height: 2; }

  /* Contact */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .contact p.lead { margin: 20px 0 30px; font-size: 17px; max-width: 460px; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .infos { list-style: none; margin: 0; padding: 0; }
  .infos li { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .infos li:first-child { border-top: 1px solid var(--line); }
  .infos small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); margin-bottom: 2px; }
  .infos a, .infos span { text-decoration: none; word-break: break-word; font-size: 17px; }
  .infos .big { font-family: var(--heading); font-size: 28px; color: var(--wine); }
  .infos a:hover { color: var(--rose); }
  .fine { font-size: 13.5px; color: var(--muted); margin: 26px 0 0; max-width: 460px; }

  /* Pied de page */
  footer { background: var(--teal); color: var(--petal); padding: 40px 0; font-size: 14px; }
  footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  footer .brand { color: var(--paper); font-size: 24px; }
  footer .brand small { color: var(--teal-soft); }
  footer .tagline { font-style: italic; font-size: 16px; text-align: center; }
  footer .foot-end { text-align: right; display: grid; gap: 4px; justify-items: end; }
  footer .social a { color: var(--petal); }
  footer a { color: var(--petal); }
  footer .copy { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--teal-soft); margin-top: 8px; }

  /* Version adoucie : sections foncées remplacées par des tons clairs de la palette */
  .slide::before { background: rgba(47, 32, 30, .32); }
  .marquee { background: var(--petal); border-top: 1px solid rgba(173,92,88,.18); border-bottom: 1px solid rgba(173,92,88,.18); }
  .marquee span { color: var(--wine); }
  .prp { background: #f3e4dc; color: var(--ink); }
  .prp h2, .prp h3 { color: var(--wine); }
  .prp .eyebrow { color: var(--teal); }
  .prp-sub { color: var(--rose); }
  .prp-list li { border-bottom-color: var(--line); }
  .prp-list b { color: var(--wine); }
  .steps li::before { border-color: var(--rose); color: var(--rose); }
  .steps b { color: var(--wine); }
  .prp .note { color: var(--muted); }
  .wave, .wave::before, .wave::after { background: #e3eeec; }
  .wave { color: var(--ink); }
  .wave h2 { color: var(--wine); }
  .wave .eyebrow, .concern span { color: var(--teal); }
  .concern h3 { color: var(--teal); }
  .treats { border-top-color: rgba(63,95,91,.25); }
  .treats h3 { color: var(--wine); }
  footer { background: #efe4dc; color: var(--ink); }
  footer .brand { color: var(--rose); }
  footer .brand small { color: var(--teal); }
  footer a, footer .social a { color: var(--ink); }
  footer a:hover, footer .social a:hover { color: var(--rose); }
  footer .copy { color: var(--muted); }

  /* Version claire et haut de gamme : fonds ivoire et sable très pâles, le rose réservé aux accents */
  .signature { background: #f3ede6; color: var(--muted); }
  .signature h2 { color: var(--wine); }
  .signature .btn { background: var(--rose); color: var(--paper); border-color: var(--rose); }
  .signature .btn:hover { background: var(--wine); border-color: var(--wine); }
  .signature-logo { display: none; }
  .signature-star { max-width: 240px; opacity: .92; }
  .marquee { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .marquee span { color: var(--rose); }
  .prp { background: #f6f1eb; }
  .wave, .wave::before, .wave::after { background: #f3ede6; }
  .concern h3 { color: var(--wine); }
  footer { background: #f3ede6; border-top: 1px solid var(--line); }
  .reserved { background: repeating-linear-gradient(135deg, #f1ebe4 0 14px, #f6f1eb 14px 28px); border-color: rgba(122,108,102,.35); }
  .reserved span { color: var(--muted); }

  /* Responsive */
  @media (max-width: 1020px) {
    .carousel { grid-auto-columns: calc((100% - 24px) / 2); }
    .prp-grid { grid-template-columns: 1fr 1fr; }
    /* Photo du tube trop étroite pour un cadre horizontal : déjà visible dans le diaporama */
    .prp .photo { display: none; }
    .duo, .signature .wrap, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .duo-text, .about-text { justify-self: center; }
    .duo.reverse .photo { order: -1; }
    .menu { gap: 20px; }
    .social { display: none; }
  }
  @media (max-width: 820px) {
    .nav { grid-template-columns: 1fr auto; }
    .menu-toggle { display: block; }
    .nav-end { display: none; }
    .menu {
      position: absolute; top: 84px; left: 0; right: 0; display: none; flex-direction: column; gap: 0;
      background: var(--blush); padding: 8px 24px 24px; border-bottom: 1px solid var(--line);
    }
    .menu.open { display: flex; }
    .menu a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .menu .btn { margin-top: 18px; text-align: center; color: var(--paper); border-bottom: 1px solid var(--rose); }
    section.block { padding: 80px 0; }
    .slide-content { padding: 0 24px; }
    /* Photo du stylo de microneedling : zoom de 25 %, cadrage centré sur le stylo */
    .slide:nth-child(2) { background-size: auto 125%; background-position: 47% center; }
    /* Bannière plein écran sous l'en-tête (85 px) ; svh : hauteur stable avec la barre d'adresse */
    .hero { height: calc(100vh - 85px); height: calc(100svh - 85px); min-height: 480px; }
    .hero .arrow { top: auto; bottom: 20px; transform: none; width: 40px; height: 40px; }
    /* Soins sur mobile : une carte à la fois, flèches posées sur la photo (centre vertical de la photo 4:3) */
    .carousel-wrap .arrow { top: calc((100vw - 48px) * .375); width: 40px; height: 40px; }
    .carousel-wrap .arrow.prev { left: 10px; }
    .carousel-wrap .arrow.next { right: 10px; }
    .carousel { grid-auto-columns: 100%; }
    .card .btn { display: table; margin: 0 auto; }
    .signature { padding: 44px 0 48px; }
    .signature .wrap { gap: 18px; }
    .signature-logo { display: none; }
    .signature p { font-size: 15.5px; margin-top: 12px; }
    .signature .btn { display: table; margin: 22px auto 0; }
    .signature-star { max-width: 120px; order: -1; }
    .concerns { grid-template-columns: 1fr; gap: 32px; }
    .ba { grid-template-columns: 1fr 1fr; }
    .ba .photo:nth-child(3) { display: none; }
    footer .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    footer .foot-end { text-align: center; justify-items: center; }
  }
  @media (min-width: 821px) { .menu .btn { display: none; } }
  @media (max-width: 560px) {
    .wrap { padding: 0 16px; }
    .carousel-wrap .arrow { top: calc((100vw - 32px) * .375); }
    .brand { font-size: 24px; gap: 10px; }
    .brand .star { width: 30px; height: 30px; }
    .brand small { font-size: 8.5px; letter-spacing: .14em; }
    .brand-logo { height: 46px; }
    .prp-grid { grid-template-columns: 1fr; gap: 36px; }
    .slide-content p { font-size: 15.5px; }
    .actions .btn { flex: 1 1 100%; text-align: center; }
    .infos .big { font-size: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee-track { animation: none; }
    .slide { transition: none; }
    .carousel { scroll-behavior: auto; }
  }
  /* Fin de page resserrée : rencontre, préoccupations et contact plus compacts */
  #rine { padding: 72px 0; }
  #rine .duo { gap: 64px; }
  #rine .photo { aspect-ratio: 1 / 1; max-width: 380px; }
  .wave { padding: 48px 0; margin: 40px 0; }
  .wave::before, .wave::after { height: 40px; }
  .wave::before { top: -39px; }
  .wave::after { bottom: -39px; }
  .concerns { grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: none; margin-top: 32px; }
  .treats { margin-top: 32px; padding-top: 24px; }
  .treats p { line-height: 1.9; }
  #contact { padding: 64px 0; }
  #contact .contact-grid { gap: 56px; }
  @media (max-width: 820px) {
    #rine { padding: 48px 0; }
    #rine .duo { gap: 28px; }
    #rine .photo { aspect-ratio: 4 / 3; max-width: none; }
    .wave { padding: 32px 0; margin: 28px 0; }
    .concerns { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 24px; }
    .concern h3 { font-size: 17px; }
    .concern p { font-size: 14px; margin: 4px 0; }
    .concern span { font-size: 10px; letter-spacing: .12em; }
    .treats { margin-top: 24px; padding-top: 20px; }
    .treats p { font-size: 14px; line-height: 1.8; }
    #contact { padding: 48px 0; }
    #contact .contact-grid { gap: 28px; }
  }
  /* Mobile : tous les textes centrés */
  @media (max-width: 820px) {
    main, footer { text-align: center; }
    .duo-text, .about-text, .signature .wrap > div, .contact-grid > div, .prp-col, .card { text-align: center; }
    .duo-text .h2 { text-align: center; }
    .accordion summary { justify-content: center; position: relative; padding-left: 24px; padding-right: 24px; }
    .accordion summary::after { position: absolute; right: 0; }
    .prp-list li, .infos li { text-align: center; }
    .steps li { padding-left: 0; padding-top: 44px; }
    .steps li::before { left: 50%; transform: translateX(-50%); }
    .signature-logo { margin-left: auto; margin-right: auto; }
    .actions { justify-content: center; }
    .ornament, .center .rule { margin-left: auto; margin-right: auto; }
    .card .btn, .signature .btn { margin-left: auto; margin-right: auto; }
    footer .foot-end, footer .social { justify-content: center; justify-items: center; text-align: center; }
    /* Numéro déjà accessible par les boutons Appeler et Texto : on évite le doublon */
    .infos li:first-child { display: none; }
    .infos li:nth-child(2) { border-top: 1px solid var(--line); }
    .infos li:last-child { border-bottom: 0; padding-bottom: 0; }
    footer .social { display: flex; gap: 18px; }
    footer .social svg { width: 20px; height: 20px; }
  }
  /* Alternance de fonds : chaque bloc se distingue du suivant (sable / ivoire) */
  #contenu, #soins, #prp, .wave, .wave::before, .wave::after, footer { background: #fcfaf7; }
  .signature, #resultats, #rine, #contact { background: #ffffff; }
  .marquee { background: #ffffff; }
  /* Bandeaux défilants au vert sarcelle du flocon du logo */
  .marquee { background: #7caea9; border-color: transparent; }
  .marquee span { color: #fffdfa; }
  .marquee .star { filter: brightness(1.35) saturate(.6); }
  /* World PRP : chaque colonne en carte claire, numéros au vert du logo */
  .prp-col { background: #ffffff; border-radius: 18px; padding: 30px 28px; }
  .prp-col h3 { padding-bottom: 14px; border-bottom: 1px solid #7caea9; margin-bottom: 18px; }
  .prp-col .prp-list li:last-child { border-bottom: 0; padding-bottom: 0; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { background: #7caea9; border-color: #7caea9; color: #fffdfa; }
  @media (max-width: 820px) { .prp-col { padding: 24px 20px; } .prp-grid { gap: 16px; } }
  /* Avant / après : 4 photos carrées de Rine, étiquettes ajoutées quand l'image n'en a pas */
  .ba { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 16px; }
  .ba .photo { aspect-ratio: 1 / 1; border-radius: 16px; background-color: #fff; }
  .ba .photo:nth-child(3) { display: block; }
  .ba-tags::before, .ba-tags::after { position: absolute; bottom: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(255,253,250,.9); color: var(--wine); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .ba-tags::before { content: 'Avant'; left: 25%; transform: translateX(-50%); }
  .ba-tags::after { content: 'Après'; left: 75%; transform: translateX(-50%); }
  @media (max-width: 820px) { .ba { grid-template-columns: 1fr 1fr; gap: 10px; } .ba-tags::before, .ba-tags::after { font-size: 9px; padding: 2px 8px; bottom: 8px; } }
  /* Avant / après en carrousel : 2 photos à la fois (1 sur mobile), flèches de part et d'autre */
  .ba-wrap { position: relative; max-width: 900px; margin: 44px auto 0; }
  .ba {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 2); margin: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  }
  .ba::-webkit-scrollbar { display: none; }
  .ba .photo { scroll-snap-align: start; }
  .ba-wrap .arrow.prev { left: -22px; }
  .ba-wrap .arrow.next { right: -22px; }
  @media (max-width: 820px) {
    .ba { grid-template-columns: none; grid-auto-columns: 100%; }
    .ba-wrap .arrow { width: 40px; height: 40px; }
    .ba-wrap .arrow.prev { left: 10px; }
    .ba-wrap .arrow.next { right: 10px; }
  }
  /* Barre de navigation plus claire */
  header { background: rgba(255, 255, 255, .96); border-bottom-color: rgba(59, 42, 41, .08); }
  @media (max-width: 820px) { .menu { background: #fff; } }
  /* En-tête : menu à gauche, logo centré (sans slogan), réseaux et rendez-vous à droite */
  header .nav { grid-template-columns: 1fr auto 1fr; }
  header .menu { grid-column: 1; grid-row: 1; justify-self: start; gap: 26px; }
  header .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  header .nav-end { grid-column: 3; grid-row: 1; }
  header .brand-logo { height: 44px; }
  @media (max-width: 1020px) { header .menu { gap: 16px; } header .menu a { font-size: 13px; } }
  @media (max-width: 820px) {
    header .nav { grid-template-columns: 44px 1fr 44px; }
    header .brand { grid-column: 2; }
    header .menu-toggle { grid-column: 3; grid-row: 1; }
    header .brand-logo { height: 36px; }
    header .menu { grid-column: 1 / -1; justify-self: stretch; }
  }
  /* Slogan sous le logo centré, en texte net plutôt qu'en image */
  header .brand { flex-direction: column; gap: 5px; }
  header .brand-logo { height: 40px; }
  .brand-tag { font-family: var(--body); font-size: 8.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--rose); white-space: nowrap; }
  @media (max-width: 820px) { header .brand-logo { height: 32px; } .brand-tag { font-size: 7.5px; letter-spacing: .2em; } }
  /* Tablette : menu sur une ligne, bouton plus compact */
  header .menu a { white-space: nowrap; }
  @media (max-width: 1100px) and (min-width: 821px) {
    header .menu { gap: 12px; }
    header .menu a { font-size: 12.5px; }
    header .nav-end .btn { padding: 10px 14px; font-size: 10.5px; }
    .brand-tag { font-size: 7.5px; letter-spacing: .18em; }
  }
  /* Charte RYNN (rynn_logo_normes) : logos SVG officiels, Poppins, #ac5c58 / #7caea9 / #feece1 */
  :root { --teal-soft: #7caea9; --petal: #feece1; }
  header .brand-logo { height: 52px; }
  footer .brand-logo { height: 110px; }
  .signature-star { max-width: 210px; }
  @media (max-width: 820px) { header .brand-logo { height: 42px; } footer .brand-logo { height: 96px; } .signature-star { max-width: 110px; } }

/* ===== Pages intérieures (soins, résultats, à propos, FAQ, contact, confidentialité) ===== */
.page-hero { background: #fcfaf7; padding: 76px 0 60px; text-align: center; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); color: var(--wine); }
.page-hero .lead { max-width: 660px; margin: 20px auto 0; font-size: 17px; color: var(--muted); }
.crumbs { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.crumbs a { color: var(--teal); text-decoration: none; }
.section-alt { background: #fcfaf7; }
.section-light { background: #ffffff; }

/* Sommaire des soins */
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 28px; padding-bottom: 4px; }
.toc a { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 13.5px; color: var(--ink); background: #ffffff; }
.toc a:hover { border-color: var(--rose); color: var(--rose); }

/* Bloc soin : photo + texte, en alternance */
.treatment { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.treatment.flip .treatment-media { order: 2; }
.treatment-media .photo { aspect-ratio: 4 / 5; border-radius: var(--radius); width: 100%; }
.treatment-text .h2 { margin-bottom: 6px; }
.treatment-text .tagline-soin { font-family: var(--heading); color: var(--rose); font-size: 19px; margin: 0 0 18px; }
.treatment-text > p { margin: 0 0 16px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 26px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts h3 { font-size: 15px; font-family: var(--body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 22px; font-size: 14.5px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #7caea9; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 12.5px; padding: 5px 13px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(124,174,169,.6); color: var(--teal); }
.section-light .chips span { background: #fcfaf7; }
.notice { font-size: 14px; color: var(--muted); font-style: italic; margin: 0 0 22px; }

/* Étapes */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; counter-reset: st; }
.steps-row li { list-style: none; counter-increment: st; background: #ffffff; border-radius: 18px; padding: 30px 26px; text-align: center; }
.steps-row li::before { content: counter(st); display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; background: #7caea9; color: #fffdfa; font-family: var(--heading); font-size: 18px; }
.steps-row h3 { font-size: 20px; margin-bottom: 8px; }
.steps-row p { margin: 0; font-size: 14.5px; color: var(--muted); }
ol.steps-row { padding: 0; }

/* Bandeau d'appel à l'action */
.cta-band { text-align: center; }
.cta-band .lead { max-width: 560px; margin: 16px auto 28px; color: var(--muted); }
.cta-band .actions { justify-content: center; }

/* Galerie de résultats */
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; }
.result figure { margin: 0; }
.result .photo { aspect-ratio: 1 / 1; border-radius: 18px; background-color: #fff; }
.result figcaption { margin-top: 14px; text-align: center; }
.result figcaption b { display: block; font-family: var(--heading); font-weight: 500; font-size: 19px; color: var(--wine); }
.result figcaption span { font-size: 13.5px; color: var(--muted); }

/* À propos */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about-grid .photo { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.cred-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.cred-list li { padding: 14px 18px; background: #ffffff; border-radius: 14px; font-size: 14.5px; }
.section-light .cred-list li { background: #fcfaf7; }
.cred-list b { color: var(--wine); font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.value-card { background: #ffffff; border-radius: 18px; padding: 28px 22px; text-align: center; }
.value-card h3 { font-size: 18px; margin-bottom: 8px; }
.value-card p { margin: 0; font-size: 14px; color: var(--muted); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group > h2 { font-size: 24px; margin-bottom: 14px; text-align: center; }
.faq .accordion { margin-bottom: 0; }
.faq .accordion summary { font-size: 16px; padding: 18px 0; }
.faq .accordion p { margin: 0 0 18px; color: var(--muted); max-width: 720px; }

/* Contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.contact-card { background: #ffffff; border-radius: 18px; padding: 32px 24px; text-align: center; }
.contact-card small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.contact-card a, .contact-card span { font-size: 17px; text-decoration: none; color: var(--ink); word-break: break-word; }
.contact-card .big { font-family: var(--heading); font-size: 26px; color: var(--wine); }
.contact-card .actions { justify-content: center; margin-top: 16px; }

/* Texte long (confidentialité) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 20px; }

/* Pied de page : liens vers toutes les pages */
.foot-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 18px; }
.foot-nav a { font-size: 13.5px; text-decoration: none; }
.foot-nav a:hover { color: var(--rose); }

@media (max-width: 1020px) {
  .treatment, .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .treatment.flip .treatment-media { order: 0; }
  .treatment-media .photo, .about-grid .photo { aspect-ratio: 4 / 3; }
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .page-hero { padding: 48px 0 40px; }
  .facts, .steps-row, .results, .contact-cards { grid-template-columns: 1fr; }
  .facts { gap: 20px; }
  .checklist li { text-align: left; }
  .chips { justify-content: center; }
  .results { gap: 26px; }
}
@media (max-width: 560px) { .values-grid { grid-template-columns: 1fr; } }

/* Accueil : alternance blanc pur / sable très pâle à partir de la section sous la bannière */
#contenu, #soins, #prp, .wave, .wave::before, .wave::after, footer { background: #fff; }
.signature, #resultats, #rine, #contact { background: #faf7f3; }
.prp-col { background: #fcfaf7; }

/* Préoccupations : une carte par préoccupation (4 côte à côte ; carrousel avec flèches sur mobile) */
.concerns-wrap { position: relative; max-width: 1080px; margin: 40px auto 0; }
.concerns { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: none; margin: 0; }
.concern { display: flex; flex-direction: column; align-items: center; background: #fcfaf7; border-radius: 18px; padding: 30px 22px 26px; }
.concern .star { width: 30px; height: 30px; margin-bottom: 14px; }
.concern h3 { font-size: 19px; }
.concern p { flex: 1; margin: 10px 0 18px; font-size: 14.5px; }
.concern-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.concern-tags span { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(124, 174, 169, .6); color: var(--teal); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.concerns-wrap .arrow { display: none; }
@media (max-width: 820px) {
  .concerns {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; margin: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  }
  .concerns::-webkit-scrollbar { display: none; }
  .concern { scroll-snap-align: start; padding: 32px 60px 28px; }
  .concern h3 { font-size: 20px; }
  .concern p { font-size: 15px; margin: 8px 0 18px; }
  .concern-tags span { font-size: 10.5px; letter-spacing: .12em; }
  .concerns-wrap .arrow { display: grid; width: 40px; height: 40px; }
  .concerns-wrap .arrow.prev { left: 8px; }
  .concerns-wrap .arrow.next { right: 8px; }
}

/* Diapo World PRP : tube sablier entier et centré.
   Mobile : photo plein cadre, tube au centre. Ordinateur : photo entière au centre,
   côtés remplis par la même photo floutée (la bannière est trop large pour la photo). */
/* Zoom de 39 % (15 %, puis 10 % deux fois), décalage de 70 px vers la gauche et 82 px vers le haut */
.slide-prp { background-image: url(assets/images/prp-sablier.jpg); background-size: auto 139%; background-position: calc(27% - 70px) calc(50% - 82px); overflow: hidden; }
@media (min-width: 821px) {
  .slide-prp { background-image: none; }
  .slide-prp::before {
    z-index: 1;
    background: linear-gradient(rgba(47, 32, 30, .32), rgba(47, 32, 30, .32)),
      url(assets/images/prp-sablier.jpg) calc(50% - 10px) calc(50% - 82px) / auto 139% no-repeat;
  }
  .slide-prp::after {
    content: ""; position: absolute; inset: -40px; z-index: 0;
    background: url(assets/images/prp-sablier.jpg) center / cover; filter: blur(30px) brightness(.85);
  }
}