/* =============================================
       TOKENS
    ============================================= */
    :root {
      --creme:    #F9F6F0;
      --creme2:   #F5F2EB;
      --creme3:   #ede5d8;
      --noir:     #1e1e1e;
      --or:       #c8a97e;
      --or2:      #dfc9a8;
      --or3:      #f0e8d8;
      --gris:     #4a4a4a;
      --grisL:    #8a8a8a;
      --sep:      #e0dbd3;
      --ph:       #e8e2d9;   /* placeholder photo */
      --fft: 'Cormorant Garamond', Georgia, serif;
      --ffb: 'Jost', system-ui, sans-serif;
      --mw: 1000px;
      --r: 2px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--ffb); background: var(--creme); color: var(--noir); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    .page { display: none; }
    .page.active { display: block; }

    /* =============================================
       HEADER
    ============================================= */
    #hdr {
      background: var(--creme);
      border-bottom: 1px solid var(--sep);
      padding: 1.25rem 2rem 0;
      position: sticky; top: 0; z-index: 200;
    }
    .hdr-top {
	  display: flex;
	  flex-direction: column;       /* ← empilement vertical */
	  align-items: center;
	  justify-content: center;
	  gap: 0.6rem;
	  padding-bottom: 1rem;
}
    .hdr-brand { text-align: center; }
    .hdr-brand h1 { font-family: var(--fft); font-size: 1.5rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
    .hdr-brand p { font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--grisL); margin-top: .2rem; line-height: 1.6; }
    .ear-logo { flex-shrink: 0; cursor: pointer; }
    nav { border-top: 1px solid var(--sep); }
    nav ul { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
    nav ul li a {
      display: block; padding: .75rem 1.4rem;
      font-size: .65rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris);
      border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; text-align: center; line-height: 1.4;
    }
    nav ul li a:hover, nav ul li a.active { color: var(--or); border-bottom-color: var(--or); }

    /* =============================================
       UTILITAIRES
    ============================================= */
    .wrap { max-width: var(--mw); margin: 0 auto; padding: 0 2rem; }
    .label { display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or); border-bottom: 1px solid var(--or2); padding-bottom: .1rem; margin-bottom: 1rem; }
    .btn-or {
      display: inline-block; background: var(--or); color: #fff;
      font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
      padding: .85rem 2rem; border-radius: var(--r); border: none; cursor: pointer; transition: background .25s;
    }
    .btn-or:hover { background: #b0916a; }
    .btn-out {
      display: inline-block; background: transparent; color: var(--or);
      font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
      padding: .8rem 1.8rem; border-radius: var(--r); border: 1.5px solid var(--or); cursor: pointer; transition: all .25s;
    }
    .btn-out:hover { background: var(--or); color: #fff; }
    .citation {
      font-family: var(--fft); font-size: 1.05rem; font-style: italic; color: var(--gris);
      border-left: 2px solid var(--or); padding-left: 1.1rem; line-height: 1.7;
    }
    .note-med {
      display: flex; gap: .75rem; align-items: flex-start;
      background: var(--or3); border: 1px solid var(--or2); border-radius: var(--r);
      padding: 1rem 1.2rem; margin-top: 1.5rem;
      font-size: .82rem; color: var(--gris); line-height: 1.65;
    }
    .note-med span { flex-shrink: 0; font-size: 1rem; }


    /* Photo placeholder paysage (proportions 2268:4032 → inversé → largeur/hauteur = 2268/4032 ≈ 0.5625 => portrait) */
    /* L'utilisateur a 2268×4032 = portrait en réalité. On crée un placeholder portrait 3/4 ou full. */
    /* En relisant : "paysage" = format large. On garde proportions 4032×2268 paysage (16/9 ~) */
    .photo-land {
      width: 100%; background: var(--ph); border-radius: var(--r);
      aspect-ratio: 2268 / 4032; /* paysage */
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .photo-land img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .photo-land .ph-label {
      position: absolute; font-size: .7rem; font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase; color: #b0a898;
    }
    /* Portrait placeholder */
    .photo-port {
      background: var(--ph); border-radius: var(--r);
      aspect-ratio: 2268 / 4032;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .photo-port img { width: 100%; height: 100%; object-fit: cover; }
    .photo-port .ph-label {
      font-size: .7rem; font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase; color: #b0a898;
    }

    /* =============================================
       PAGE : ACCUEIL
    ============================================= */

    /* ─ Hero ─ */
    .hero {
      max-width: var(--mw); margin: 0 auto;
      padding: 4rem 2rem 3rem;
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;
    }
    .hero-txt { order: 1; }
    .hero-txt h2 { font-family: var(--fft); font-size: 2.4rem; font-weight: 400; line-height: 1.12; margin-bottom: 1.25rem; }
    .hero-txt h2 em { font-style: italic; color: var(--or); }
    .hero-txt .tagline { font-size: 1rem; font-weight: 300; color: var(--gris); font-style: italic; font-family: var(--fft); margin-bottom: .6rem; }
    .hero-txt .spec { font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--grisL); margin-bottom: 1.75rem; }
    .hero-txt .spec span { color: var(--or); margin: 0 .4rem; }
    .hero-txt .result { font-size: .88rem; color: var(--gris); margin-bottom: 2rem; line-height: 1.7; }
    .hero-txt .result strong { color: var(--noir); font-weight: 500; }
    .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
    .hero-photo { order: 2; }

    /* ─ Spécialités tableau ─ */
    .s-specs { border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); background: var(--creme); }
    .s-specs-in { max-width: var(--mw); margin: 0 auto; padding: 3.5rem 2rem; }
    .specs-intro { text-align: center; margin-bottom: 2.5rem; }
    .specs-intro h3 { font-family: var(--fft); font-size: 1.6rem; font-weight: 500; margin-bottom: .5rem; }
    .specs-intro p { font-size: .88rem; color: var(--gris); max-width: 520px; margin: 0 auto; font-style: italic; font-family: var(--fft); }
    .specs-tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--sep); }
    .specs-tbl th { padding: 1rem 1.3rem .8rem; text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--noir); border-bottom: 1px solid var(--sep); background: var(--creme2); }
    .specs-tbl th:not(:last-child), .specs-tbl td:not(:last-child) { border-right: 1px solid var(--sep); }
    .specs-tbl td { padding: 1rem 1.3rem; vertical-align: top; }
    .specs-tbl tr.accent td { background: var(--creme2); }
    .specs-tbl .acc { font-family: var(--fft); font-size: 1.05rem; font-style: italic; color: var(--gris); display: block; }
    .specs-tbl .desc { font-size: .85rem; color: var(--gris); line-height: 1.65; display: block; margin: .5rem 0 1rem; }
    .btn-sm { display: inline-block; background: var(--or); color: #fff; font-size: .63rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .5rem 1rem; border-radius: var(--r); transition: background .2s; cursor: pointer; }
    .btn-sm:hover { background: #b0916a; }

    /* ─ Auriculothérapie ─ */
    .s-auri { border-bottom: 1px solid var(--sep); }
    .s-auri-in { max-width: var(--mw); margin: 0 auto; padding: 5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
    .auri-txt h3 { font-family: var(--fft); font-size: 1.8rem; font-weight: 500; line-height: 1.2; margin-bottom: 1.25rem; }
    .auri-txt p { font-size: .88rem; color: var(--gris); margin-bottom: 1rem; line-height: 1.8; }
    .auri-txt p strong { color: var(--noir); font-weight: 500; }
    .methode-items { margin-top: 1.5rem; }
    .m-item { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid var(--sep); }
    .m-item:last-child { border-bottom: 1px solid var(--sep); }
    .m-dash { flex-shrink: 0; font-size: 1.3rem; color: var(--or); font-family: var(--fft); line-height: 1.4; }
    .m-item h4 { font-size: .8rem; font-weight: 600; letter-spacing: .06em; margin-bottom: .3rem; }
    .m-item p { font-size: .84rem; color: var(--gris); line-height: 1.65; margin: 0; }
    .auri-visual { display: flex; flex-direction: column; gap: 1rem; }
    /* SVG oreille grande */

    /* ─ Témoignages ─ */
    .s-temo { background: var(--creme2); border-bottom: 1px solid var(--sep); }
    .s-temo-in { max-width: var(--mw); margin: 0 auto; padding: 4.5rem 2rem; }
    .s-temo-in > .head { text-align: center; margin-bottom: 3rem; }
    .s-temo-in > .head h3 { font-family: var(--fft); font-size: 1.8rem; font-weight: 500; margin-bottom: .4rem; }
    .s-temo-in > .head p { font-size: .82rem; color: var(--grisL); letter-spacing: .06em; }
    .temo-masonry { columns: 3; gap: 1.5rem; }
    .temo-card {
      break-inside: avoid; background: var(--creme); border: 1px solid var(--sep);
      border-radius: var(--r); padding: 1.4rem; margin-bottom: 1.5rem;
    }
    .temo-stars { color: var(--or); font-size: .85rem; letter-spacing: .1em; margin-bottom: .7rem; }
    .temo-txt { font-size: .86rem; color: var(--gris); line-height: 1.75; font-style: italic; margin-bottom: 1rem; font-family: var(--fft); }
    .temo-aut { font-size: .73rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .temo-src { font-size: .7rem; color: var(--grisL); margin-top: .15rem; }

    /* ─ CTA accueil ─ */
    .s-cta-home { border-bottom: 1px solid var(--sep); }
    .s-cta-home-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
    .s-cta-home-in h3 { font-family: var(--fft); font-size: 1.7rem; font-weight: 400; line-height: 1.3; }
    .s-cta-home-in h3 em { font-style: italic; color: var(--or); }

    /* =============================================
       PAGES ACCOMPAGNEMENTS (sous-pages)
    ============================================= */
    .s-acc-hero { border-bottom: 1px solid var(--sep); }
    .s-acc-hero-in { max-width: var(--mw); margin: 0 auto; padding: 4.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
    .acc-txt h2 { font-family: var(--fft); font-size: 2.1rem; font-weight: 400; line-height: 1.15; margin-bottom: .5rem; }
    .acc-txt h2 em { font-style: italic; color: var(--or); }
    .acc-txt .acc-intro { font-size: .9rem; color: var(--gris); margin: 1rem 0 1.75rem; line-height: 1.8; }

    .s-acc-meca { border-bottom: 1px solid var(--sep); }
    .s-acc-meca-in { max-width: var(--mw); margin: 0 auto; padding: 4.5rem 2rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 5rem; align-items: start; }
    .meca-txt h3 { font-family: var(--fft); font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; }
    .meca-txt p { font-size: .88rem; color: var(--gris); margin-bottom: 1rem; line-height: 1.8; }
    .meca-txt p strong { color: var(--noir); font-weight: 500; }
    .meca-list { margin: 1.5rem 0; }
    .meca-list li { display: flex; align-items: flex-start; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--sep); font-size: .86rem; color: var(--gris); line-height: 1.6; }
    .meca-list li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--or); margin-top: .55rem; }
    .meca-photo { display: flex; flex-direction: column; gap: 1rem; }

    .s-acc-types { background: var(--creme2); border-bottom: 1px solid var(--sep); }
    .s-acc-types-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; }
    .s-acc-types-in h3 { font-family: var(--fft); font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; }
    .types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
    .type-card { background: var(--creme); border: 1px solid var(--sep); border-radius: var(--r); padding: 1.3rem 1.4rem; }
    .type-card h4 { font-family: var(--fft); font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
    .type-card p { font-size: .83rem; color: var(--gris); line-height: 1.65; }

    /* =============================================
       PAGE : QUI SUIS-JE
    ============================================= */
    .s-qui-hero { border-bottom: 1px solid var(--sep); }
    .s-qui-in { max-width: var(--mw); margin: 0 auto; padding: 4.5rem 2rem; display: grid; grid-template-columns: 1fr 1.65fr; gap: 4.5rem; align-items: start; }
    .qui-photo-wrap { display: flex; flex-direction: column; gap: 1rem; }
    .qui-txt h2 { font-family: var(--fft); font-size: 2.1rem; font-weight: 400; line-height: 1.15; margin-bottom: 1.5rem; }
    .qui-txt h2 em { font-style: italic; color: var(--or); }
    .qui-txt p { font-size: .88rem; color: var(--gris); margin-bottom: 1rem; line-height: 1.8; }
    .qui-txt p strong { color: var(--noir); font-weight: 500; }

    .s-methode { border-bottom: 1px solid var(--sep); }
    .s-methode-in { max-width: var(--mw); margin: 0 auto; padding: 4.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
    .methode-left h3 { font-family: var(--fft); font-size: 1.6rem; font-weight: 500; margin-bottom: 1.25rem; line-height: 1.2; }
    .methode-left p { font-size: .88rem; color: var(--gris); margin-bottom: 1rem; line-height: 1.8; }

    /* =============================================
       PAGE : INFOS PRATIQUES
    ============================================= */
    .s-infos-hero { border-bottom: 1px solid var(--sep); }
    .s-infos-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }

    .infos-bloc h3 { font-family: var(--fft); font-size: 1.4rem; font-weight: 600; margin-bottom: 1.5rem; }
    .info-row { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--sep); align-items: flex-start; }
    .info-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--or3); border: 1px solid var(--or2); display: flex; align-items: center; justify-content: center; font-size: .9rem; margin-top: .1rem; }
    .info-row p { font-size: .86rem; color: var(--gris); line-height: 1.65; }
    .info-row strong { color: var(--noir); font-weight: 500; }
    .info-row em { color: var(--grisL); font-style: normal; font-size: .8rem; }

    /* Tarifs */
    .s-tarifs { background: var(--creme2); border-bottom: 1px solid var(--sep); }
    .s-tarifs-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; }
    .s-tarifs-in h3 { font-family: var(--fft); font-size: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
    .s-tarifs-in .sub { font-size: .84rem; color: var(--gris); font-style: italic; font-family: var(--fft); margin-bottom: 2.5rem; }
    .tarif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .tarif-card { background: var(--creme); border: 1px solid var(--sep); border-radius: var(--r); padding: 1.75rem 1.5rem; }
    .tarif-card.feat { border-color: var(--or); position: relative; }
    .tarif-card.feat::before { content: 'Accompagnement personnalisé'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--or); color: #fff; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .8rem; border-radius: 20px; white-space: nowrap; }
    .tarif-card h4 { font-family: var(--fft); font-size: 1.05rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.3; }
    .tarif-card .duree { font-size: .75rem; color: var(--grisL); letter-spacing: .06em; margin-bottom: 1rem; }
    .tarif-card .prix { font-family: var(--fft); font-size: 2.2rem; font-weight: 300; color: var(--or); }
    .tarif-card .prix sup { font-size: 1rem; }
    .tarif-note { font-size: .8rem; color: var(--grisL); margin-top: 2rem; font-style: italic; }

    /* Accès */
    .s-acces { border-bottom: 1px solid var(--sep); }
    .s-acces-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
    .acces-txt h3 { font-family: var(--fft); font-size: 1.4rem; font-weight: 600; margin-bottom: 1.5rem; }
    .acces-ligne { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .85rem; }
    .acces-ligne .puce { flex-shrink: 0; color: var(--or); font-size: .9rem; margin-top: .15rem; }
    .acces-ligne p { font-size: .86rem; color: var(--gris); line-height: 1.6; }
    .map-placeholder { background: var(--ph); border-radius: var(--r); height: 300px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sep); }
    .map-placeholder p { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #b0a898; }

    /* Contact form */
    .s-contact { border-bottom: 1px solid var(--sep); }
    .s-contact-in { max-width: var(--mw); margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
    .contact-intro h3 { font-family: var(--fft); font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; }
    .contact-intro p { font-size: .87rem; color: var(--gris); margin-bottom: 1rem; line-height: 1.8; }
    .f-lbl { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin: 1rem 0 .35rem; }
    .f-lbl:first-child { margin-top: 0; }
    .f-inp { width: 100%; padding: .7rem .95rem; border: 1px solid var(--sep); border-radius: var(--r); font-family: var(--ffb); font-size: .85rem; background: var(--creme); color: var(--noir); outline: none; transition: border-color .2s; }
    .f-inp:focus { border-color: var(--or2); }

    /* =============================================
       PAGE : FAQ
    ============================================= */
    .s-faq { border-bottom: 1px solid var(--sep); }
    .s-faq-in { max-width: 740px; margin: 0 auto; padding: 5rem 2rem; }
    .s-faq-in h2 { font-family: var(--fft); font-size: 2rem; font-weight: 400; text-align: center; margin-bottom: .6rem; }
    .faq-sub { font-size: .85rem; color: var(--grisL); text-align: center; margin-bottom: 3.5rem; font-style: italic; font-family: var(--fft); }
    .faq-it { border-bottom: 1px solid var(--sep); }
    .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 0; cursor: pointer; gap: 1rem; }
    .faq-q h4 { font-family: var(--fft); font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
    .faq-tog { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--or2); display: flex; align-items: center; justify-content: center; color: var(--or); font-size: 1.2rem; line-height: 1; transition: transform .25s; }
    .faq-it.open .faq-tog { transform: rotate(45deg); }
    .faq-r { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
    .faq-it.open .faq-r { max-height: 400px; }
    .faq-r p { font-size: .88rem; color: var(--gris); line-height: 1.8; padding-bottom: 1.4rem; }

    /* =============================================
       FOOTER
    ============================================= */
    #ftr { background: var(--noir); color: #8a8a8a; padding: 3rem 2rem 1.5rem; }
    .ftr-in { max-width: var(--mw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem; border-bottom: 1px solid #2c2c2c; }
    .ftr-brand h3 { font-family: var(--fft); font-size: 1.25rem; font-weight: 400; letter-spacing: .08em; color: #fff; margin-bottom: .4rem; }
    .ftr-brand p { font-size: .72rem; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; color: #666; }
    .ftr-brand .ftr-adresse { font-size: .83rem; margin-top: 1rem; line-height: 1.7; text-transform: none; letter-spacing: 0; color: #888; }
    .ftr-col h4 { font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or2); margin-bottom: 1rem; }
    .ftr-col ul li { margin-bottom: .5rem; font-size: .83rem; }
    .ftr-col ul li a:hover { color: var(--or2); }
    .ftr-col p { font-size: .83rem; line-height: 1.7; }
    .ftr-bot { max-width: var(--mw); margin: 1.5rem auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .75rem; }
    .ftr-bot a { color: var(--or2); }

    /* =============================================
       RESPONSIVE
    ============================================= */
    @media (max-width: 800px) {
      .hero, .s-auri-in, .s-acc-hero-in, .s-acc-meca-in, .s-qui-in, .s-methode-in, .s-infos-in, .s-acces-in, .s-contact-in, .ftr-in { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero-photo { order: -1; }
      .temo-masonry { columns: 1; }
      .tarif-grid { grid-template-columns: 1fr; }
      .types-grid { grid-template-columns: 1fr; }
      .s-cta-home-in { grid-template-columns: 1fr; text-align: center; }
      nav ul li a { padding: .65rem .9rem; font-size: .6rem; }
      .specs-tbl thead { display: none; }
      .specs-tbl, .specs-tbl tbody, .specs-tbl tr, .specs-tbl td { display: block; width: 100%; }
      .specs-tbl td { border-right: none !important; border-bottom: 1px solid var(--sep); padding: 1rem 1.1rem; }
      .specs-tbl td::before { content: attr(data-label); display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: .4rem; }
    }
/*BONUS*/

/* Séparateur stylisé entre paragraphes */
.sep-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}
.sep-or::before,
.sep-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #c8a97e, transparent);
}
.sep-or span {
  font-family: 'Cormorant Garamond', serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c8a97e;
  white-space: nowrap;
}

/* Warning pleine largeur */
.note-med-full {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: linear-gradient(135deg, #f0e8d8, #faf8f5);
  border: 1px solid #dfc9a8;
  border-left: 4px solid #c8a97e;
  border-radius: 2px;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  grid-column: 1 / -1; /* pleine largeur si dans une grid */
}
.note-med-full .icone {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #c8a97e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: .1rem;
}
.note-med-full .note-txt strong {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c8a97e;
  margin-bottom: .4rem;
}
.note-med-full .note-txt p {
  font-size: .85rem;
  color: #4a4a4a;
  line-height: 1.75;
  margin: 0;
}