/* ============================================================
   index.css — Styles propres à index.html (design rouge/or)
   Extrait des <style> inline d'origine — voir style.css pour les
   styles mutualisés (reset, accessibilité) chargés AVANT ce fichier.
   ============================================================ */

    :root {
      --red: #c41e3a;
      --red-dim: rgba(196,30,58,0.12);
      --red-glow: rgba(196,30,58,0.35);
      --bg: #080808;
      --surface: #111111;
      --surface-2: #191919;
      --border: rgba(255,255,255,0.07);
      --border-strong: rgba(255,255,255,0.25);
      --text: #e8e8e8;
      --text-muted: #8a8a8a;
      --text-dim: #4a4a4a;
      --gold: #c9a84c;
      --radius: 12px;
      --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    /* ─── THÈME CLAIR ─── */
    [data-theme="light"] {
      --bg: #faf9f7;
      --surface: #ffffff;
      --surface-2: #f2f0ed;
      --border: rgba(0,0,0,0.09);
      --border-strong: rgba(0,0,0,0.18);
      --text: #1a1a1a;
      --text-muted: #5c5c5c;
      --text-dim: #9a9a9a;
      --gold: #9c7a2e;
    }
    [data-theme="light"] .nav.scrolled { background: rgba(250,249,247,0.92); }
    [data-theme="light"] .nav-links { background: rgba(255,255,255,0.98); }
    [data-theme="light"] .modal-backdrop { background: rgba(20,20,20,0.55); }
    [data-theme="light"] .about-img-wrap img { filter: grayscale(10%); }
    .lang-toggle { background:none; border:1px solid var(--border); color:var(--text-muted); min-width:36px; height:36px; padding:0 .6rem; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all var(--transition); margin-left:.5rem; font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.03em; }
    .lang-toggle:hover { color:var(--text); border-color:var(--border-strong); }
    .theme-toggle { background:none; border:1px solid var(--border); color:var(--text-muted); width:36px; height:36px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all var(--transition); margin-left:.5rem; }
    .theme-toggle:hover { color:var(--text); border-color:var(--border-strong); }
    .theme-toggle .icon-sun { display:none; }
    [data-theme="light"] .theme-toggle .icon-moon { display:none; }
    [data-theme="light"] .theme-toggle .icon-sun { display:block; }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

    /* ─── ACCESSIBILITÉ RGAA ─── */
    .skip-link { position:absolute; top:-48px; left:1rem; z-index:2000; background:var(--red); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 8px 8px; text-decoration:none; font-size:.85rem; font-weight:600; transition:top var(--transition); }
    .skip-link:focus { top:0; }
    :focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
    section[tabindex="-1"]:focus { outline:none; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    }

    /* ─── NAV ─── */
    .nav {
      position: fixed; top:0; width:100%; z-index:900;
      padding: 1.1rem 2rem;
      display:flex; align-items:center; justify-content:space-between;
      transition: background var(--transition), backdrop-filter var(--transition);
    }
    .nav.scrolled { background: rgba(8,8,8,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
    .nav-logo { font-family: 'Cormorant Garamond', serif; font-size:1.35rem; font-weight:600; letter-spacing:.08em; color:var(--text); text-decoration:none; }
    .nav-logo span { color: var(--red); }
    .nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
    .nav-links a { color: var(--text-muted); text-decoration:none; font-size:.88rem; letter-spacing:.04em; font-weight:500; transition: color var(--transition); }
    .nav-links a:hover { color: var(--text); }
    .nav-cta { background: var(--red); color:#fff; border:none; padding:.6rem 1.4rem; border-radius:6px; cursor:pointer; font-size:.88rem; font-weight:500; font-family:inherit; transition: all var(--transition); }
    .nav-cta:hover { background: #a0172e; transform: translateY(-1px); box-shadow: 0 4px 16px var(--red-glow); }
    .nav-hamburger { display:none; background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; }
    @media(max-width:768px){
      .nav-links { position:fixed; top:60px; right:0; width:240px; flex-direction:column; background:rgba(17,17,17,0.97); backdrop-filter:blur(20px); padding:1.5rem; gap:1.2rem; border-left:1px solid var(--border); transform:translateX(100%); transition:transform var(--transition); height:calc(100vh - 60px); }
      .nav-links.open { transform:translateX(0); }
      .nav-hamburger { display:block; }
    }

    /* ─── HERO ─── */
    .hero { min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 6rem 2rem 4rem; position:relative; overflow:hidden; }
    .hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(196,30,58,0.08) 0%, transparent 70%); pointer-events:none; }
    .hero-inner { max-width:720px; position:relative; padding-bottom:2rem; }
    .hero-eyebrow { font-size:.78rem; letter-spacing:.25em; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; font-weight:500; }
    .hero-name { font-family:'Cormorant Garamond', serif; font-size:clamp(3rem,8vw,6.5rem); font-weight:300; line-height:1; letter-spacing:-.01em; margin-bottom:.5rem; }
    .hero-name b { color:var(--gold); }
    .hero-tagline { font-size:clamp(.95rem,2vw,1.15rem); color:var(--text-muted); font-weight:300; margin-bottom:2.5rem; max-width:480px; margin-left:auto; margin-right:auto; }
    .hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
    /* Calendrier déplacé dans le hero (avant les CTA) : légèrement plus compact que la version
       standalone (480px) pour rester proportionné à l'ensemble du hero. Marge basse généreuse
       pour bien séparer visuellement le calendrier des boutons "Prendre rendez-vous"/"Voir les
       prestations" — volontairement large (5rem) à la demande explicite d'un espacement net. */
    .hero-calendar-wrap { max-width:380px; margin:0 auto 5rem; }
    .hero-cal-label { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:.6rem; }
    .hero-cal-sub { font-size:.85rem; color:var(--text-muted); max-width:420px; margin:0 auto 1.3rem; line-height:1.6; }
    .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.8rem; border-radius:7px; font-size:.9rem; font-weight:500; font-family:inherit; cursor:pointer; border:none; text-decoration:none; transition:all var(--transition); }
    .btn-primary { background:var(--red); color:#fff; }
    .btn-primary:hover { background:#a0172e; transform:translateY(-2px); box-shadow:0 6px 24px var(--red-glow); }
    .btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
    .btn-ghost:hover { border-color: var(--border-strong); background:var(--surface); }
    .hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:var(--text-dim); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
    .hero-scroll::after { content:''; width:1px; height:40px; background:linear-gradient(to bottom, var(--text-dim), transparent); }

    /* ─── SECTION BASE ─── */
    .section { padding: 6rem 2rem; }
    .section-inner { max-width:1200px; margin:0 auto; }
    .section-label { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:500; margin-bottom:.8rem; }
    .section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3rem); font-weight:300; line-height:1.2; margin-bottom:1rem; }
    .section-sub { color:var(--text-muted); font-size:.95rem; max-width:540px; }
    .section-header { margin-bottom:3.5rem; }
    .divider { width:48px; height:2px; background:var(--red); margin:1.2rem 0; }

    /* ─── ABOUT ─── */
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .about-img-wrap { position:relative; }
    .about-img-wrap img { width:100%; border-radius:var(--radius); object-fit:cover; aspect-ratio:4/5; display:block; filter:grayscale(20%); }
    .about-img-badge { position:absolute; bottom:1.5rem; right:-1.5rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.4rem; backdrop-filter:blur(10px); }
    .badge-num { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:600; color:var(--gold); line-height:1; }
    .badge-label { font-size:.75rem; color:var(--text-muted); }
    .about-text p { color:var(--text-muted); font-size:.95rem; line-height:1.8; margin-bottom:1rem; }
    .about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
    .stat-item { border-top:1px solid var(--border); padding-top:1.2rem; }
    .stat-num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:600; color:var(--text); line-height:1; }
    .stat-label { font-size:.78rem; color:var(--text-muted); margin-top:.3rem; }
    @media(max-width:900px){ .about-grid { grid-template-columns:1fr; gap:2.5rem; } .about-img-badge { right:1rem; } }

    /* ─── SERVICES ─── */
    .services-bg { background: var(--surface); }
    .services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
    .service-card { background:var(--surface); padding:2.5rem 2rem; transition:background var(--transition); }
    .service-card:hover { background:var(--surface-2); }
    .service-icon-wrap { width:48px; height:48px; border-radius:10px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; color:var(--red); font-size:1.2rem; margin-bottom:1.5rem; }
    .service-card h3 { font-size:1.05rem; font-weight:500; margin-bottom:.6rem; }
    .service-card p { color:var(--text-muted); font-size:.88rem; line-height:1.7; }

    /* ─── REELS INSTAGRAM ───
       Note thème clair/sombre : les overlays sur les vignettes/lightbox (dégradés noirs,
       fonds ".reel-lb"/".gallery-lb", texte blanc rgba) restent volontairement identiques
       dans les deux thèmes. Ce sont des visionneuses de médias (photos/vidéos) : comme un
       lecteur vidéo classique, elles gardent un habillage sombre constant pour le contraste
       et le confort de visionnage, indépendamment du thème choisi pour le reste du site.
       Idem pour les box-shadow (rgba(0,0,0,...)) : une ombre reste conventionnellement sombre
       dans les deux thèmes (pratique standard, y compris dans les design systems "light"). */
    .reels-section-bg { background: var(--surface); }
    .reels-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 1rem;
    }
    @media(min-width:900px) { .reels-grid { grid-template-columns: repeat(4, 1fr); } }
    @media(max-width:600px) { .reels-grid { grid-template-columns: repeat(2, 1fr); gap:.75rem; } }

    .reel-card {
      position: relative;
      aspect-ratio: 9/16;
      border-radius: 14px;
      overflow: hidden;
      background: var(--surface-2);
      cursor: pointer;
      border: 1px solid var(--border);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      -webkit-tap-highlight-color: transparent;
    }
    .reel-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0,0,0,.6); border-color: rgba(225,48,108,.35); }
    .reel-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

    /* Thumbnail */
    .reel-thumb {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .reel-card:hover .reel-thumb { transform: scale(1.06); }

    /* Gradient overlay */
    .reel-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.15) 45%,
        rgba(0,0,0,.3) 100%
      );
    }

    /* Skeleton loader */
    .reel-skeleton {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: .6rem;
      color: var(--text-dim);
      font-size: .75rem;
    }
    .reel-skeleton-icon { font-size: 2rem; }
    .sk-pulse { animation: skPulse 1.6s ease-in-out infinite; }
    @keyframes skPulse { 0%,100%{opacity:.25} 50%{opacity:.65} }

    /* TikTok / plateforme badge */
    .reel-platform-badge {
      position: absolute; top: .75rem; right: .75rem;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      border-radius: 20px;
      padding: .22rem .55rem;
      display: flex; align-items: center; gap: .3rem;
      font-size: .7rem;
      color: rgba(255,255,255,.85);
      border: 1px solid rgba(255,255,255,.1);
      pointer-events: none;
    }
    .reel-platform-badge svg { width: 13px; height: 13px; flex-shrink: 0; }

    /* Play button centré */
    .reel-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 54px; height: 54px;
      border-radius: 50%;
      background: rgba(196,30,58,.92);
      backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      padding-left: 4px;
      box-shadow: 0 0 0 10px rgba(196,30,58,.18), 0 8px 28px rgba(0,0,0,.5);
      opacity: 0;
      transition: opacity var(--transition), transform var(--transition);
    }
    .reel-play svg { width: 22px; height: 22px; }
    .reel-card:hover .reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }

    /* Caption bas de carte */
    .reel-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: .9rem .85rem .85rem;
      font-size: .75rem;
      color: rgba(255,255,255,.88);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Numéro de reel */
    .reel-num {
      position: absolute; bottom: .75rem; right: .75rem;
      font-size: .65rem; font-weight: 700;
      color: rgba(255,255,255,.4);
      pointer-events: none;
    }

    /* ─── LIGHTBOX REELS ─── */
    .reel-lightbox {
      display: none;
      position: fixed; inset: 0;
      z-index: 2000;
      background: rgba(0,0,0,.94);
      backdrop-filter: blur(20px);
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .reel-lightbox.open { display: flex; }

    .reel-lb-inner {
      position: relative;
      width: min(420px, 92vw);
      max-height: 94vh;
      border-radius: 18px;
      overflow: hidden;
      background: #000;
      border: 1px solid rgba(255,255,255,.08);
      display: flex;
      flex-direction: column;
      box-shadow: 0 40px 100px rgba(0,0,0,.8);
    }

    /* Header lightbox */
    .reel-lb-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: .8rem 1rem;
      background: #0a0a0a;
      border-bottom: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
    }
    .reel-lb-brand { display: flex; align-items: center; gap: .5rem; }
    .reel-lb-brand-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; }
    .reel-lb-brand-name { font-size: .82rem; font-weight: 600; color: #fff; }
    .reel-lb-brand-sub { font-size: .7rem; color: rgba(255,255,255,.4); }
    .reel-lb-controls { display: flex; align-items: center; gap: .4rem; }
    .reel-lb-ext {
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: .72rem; color: rgba(255,255,255,.5);
      text-decoration: none;
      padding: .28rem .6rem;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 6px;
      transition: all var(--transition);
    }
    .reel-lb-ext:hover { border-color: #e1306c; color: #e1306c; }
    .reel-lb-close {
      background: rgba(255,255,255,.06); border: none;
      color: rgba(255,255,255,.6); font-size: 1rem;
      cursor: pointer; width: 28px; height: 28px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .reel-lb-close:hover { background: rgba(255,255,255,.12); color: #fff; }

    /* Zone embed scrollable */
    .reel-lb-embed {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      background: #000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-height: 500px;
    }
    .reel-lb-embed::-webkit-scrollbar { display: none; }

    /* Le blockquote Instagram prend toute la largeur */
    .reel-lb-embed .instagram-media {
      margin: 0 !important;
      min-width: 100% !important;
      border: none !important;
      border-radius: 0 !important;
    }

    /* État loading lightbox */
    .reel-lb-loading {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 1rem;
      padding: 4rem 2rem;
      color: rgba(255,255,255,.4);
      font-size: .85rem;
      width: 100%;
    }
    .reel-lb-loading .ig-spin {
      font-size: 2.2rem;
      background: linear-gradient(135deg,#f09433,#dc2743,#bc1888);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: spin .9s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* État erreur lightbox */
    .reel-lb-error {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 1rem; padding: 3rem 2rem;
      text-align: center; width: 100%;
    }
    .reel-lb-error i { font-size: 2rem; color: rgba(225,48,108,.6); }
    .reel-lb-error p { color: rgba(255,255,255,.45); font-size: .83rem; line-height: 1.6; }
    .reel-lb-error a { color: #e1306c; font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; padding: .55rem 1.1rem; border: 1px solid rgba(225,48,108,.4); border-radius: 8px; transition: all var(--transition); }
    .reel-lb-error a:hover { background: rgba(225,48,108,.1); }

    /* Boutons navigation prev / next */
    .reel-nav-btn {
      position: fixed;
      top: 50%; transform: translateY(-50%);
      width: 42px; height: 42px;
      border-radius: 50%;
      background: rgba(20,20,20,.85);
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.7);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: .95rem;
      transition: all var(--transition);
      z-index: 2001;
      backdrop-filter: blur(8px);
    }
    .reel-nav-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
    .reel-nav-btn.prev { left: calc(50% - min(210px,46vw) - 56px); }
    .reel-nav-btn.next { right: calc(50% - min(210px,46vw) - 56px); }
    @media(max-width:600px){
      .reel-nav-btn.prev { left: .5rem; }
      .reel-nav-btn.next { right: .5rem; }
    }

    /* Counter en bas de lightbox */
    .reel-lb-counter {
      text-align: center;
      padding: .55rem;
      background: #0a0a0a;
      font-size: .72rem;
      color: rgba(255,255,255,.3);
      border-top: 1px solid rgba(255,255,255,.05);
      flex-shrink: 0;
      letter-spacing: .05em;
    }

    /* ─── RÉPERTOIRE ─── */
    .repertoire-bg { background: var(--surface); }
    .repertoire-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
    .rep-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; transition:border-color var(--transition); }
    .rep-card:hover { border-color: rgba(196,30,58,0.3); }
    .rep-card h3 { font-size:.9rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; }
    .rep-card ul { list-style:none; }
    .rep-card li { padding:.45rem 0; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:.88rem; }
    .rep-card li:last-child { border-bottom:none; }

    /* ─── CONTACT ─── */
    .contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
    .contact-info-block h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; margin-bottom:1.5rem; }
    .contact-item { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 0; border-bottom:1px solid var(--border); }
    .contact-item:first-of-type { border-top:1px solid var(--border); }
    .contact-item-icon { color:var(--red); font-size:1rem; margin-top:.15rem; width:18px; }
    .contact-item-text { font-size:.9rem; }
    .contact-item-text strong { display:block; color:var(--text); margin-bottom:.2rem; font-weight:500; }
    .contact-item-text a, .contact-item-text span { color:var(--text-muted); text-decoration:none; transition:color var(--transition); }
    .contact-item-text a:hover { color:var(--red); }
    .contact-form-block { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2.5rem; }
    .contact-form-block h3 { font-size:1.1rem; font-weight:500; margin-bottom:2rem; }
    .fg { margin-bottom:1.3rem; }
    .fg label { display:block; font-size:.8rem; font-weight:500; letter-spacing:.04em; color:var(--text-muted); margin-bottom:.5rem; text-transform:uppercase; }
    .fg input, .fg textarea, .fg select { width:100%; padding:.75rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; font-size:.9rem; transition: border-color var(--transition), box-shadow var(--transition); }
    .fg input:focus, .fg textarea:focus, .fg select:focus { outline:none; border-color:rgba(196,30,58,0.5); box-shadow:0 0 0 3px rgba(196,30,58,0.08); }
    .fg textarea { resize:vertical; min-height:100px; }
    /* Bloc d'information dédié au parcours de rétractation (formulaire de contact) */
    .callout-inline { background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25); border-radius:8px; padding:.85rem 1rem; font-size:.82rem; color:var(--text-muted); line-height:1.6; }
    .fg select { appearance:none; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media(max-width:900px){ .contact-grid { grid-template-columns:1fr; gap:2rem; } }

    /* ─── FOOTER ─── */
    .footer { border-top:1px solid var(--border); padding:2.5rem 2rem; }
    .footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
    .footer-copy { color:var(--text-dim); font-size:.82rem; }
    .footer-socials { display:flex; gap:1.2rem; }
    .footer-socials a { color:var(--text-dim); font-size:1.1rem; transition:color var(--transition); }
    .footer-socials a:hover { color:var(--red); }
    .footer-links { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; width:100%; order:3; margin-top:.5rem; padding-top:1rem; border-top:1px solid var(--border); }
    .footer-links button { background:none; border:none; padding:0; color:var(--text-dim); font-size:.8rem; font-family:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color var(--transition); }
    .footer-links button:hover { color:var(--text-muted); }

    /* ─── FAQ ─── */
    .faq-section-bg { background: var(--surface); }
    .faq-list { display:flex; flex-direction:column; gap:.75rem; max-width:760px; }
    .faq-item { background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
    .faq-item summary { cursor:pointer; list-style:none; padding:1.1rem 1.4rem; font-size:.95rem; font-weight:500; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background var(--transition); }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-item summary::after { content:'+'; font-size:1.3rem; color:var(--red); flex-shrink:0; transition:transform var(--transition); line-height:1; }
    .faq-item[open] summary::after { transform:rotate(45deg); }
    .faq-item summary:hover { background:var(--surface-2); }
    .faq-item summary:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
    .faq-answer { padding:0 1.4rem 1.2rem; color:var(--text-muted); font-size:.88rem; line-height:1.75; }

    /* ─── LEGAL POPINS ─── */
    .legal-progress { height:3px; background:var(--border); flex-shrink:0; overflow:hidden; }
    .legal-progress-bar { height:100%; width:0%; background:var(--red); transition:width .08s linear; }
    @media (prefers-reduced-motion: reduce) { .legal-progress-bar { transition:none; } }
    .legal-modal-body h3 { color:var(--text); font-size:1rem; font-weight:600; margin:1.4rem 0 .6rem; }
    .legal-modal-body h3:first-child { margin-top:0; }
    .legal-modal-body p { color:var(--text-muted); font-size:.88rem; line-height:1.75; margin:0 0 .9rem; }
    .legal-modal-body ul { margin:0 0 .9rem; padding-left:1.2rem; }
    .legal-modal-body li { color:var(--text-muted); font-size:.88rem; line-height:1.7; margin-bottom:.4rem; }
    .legal-modal-body strong { color:var(--text); }
    .legal-modal-body a { color:var(--red); }
    .legal-tabs { display:flex; gap:.5rem; margin-bottom:1.6rem; border-bottom:1px solid var(--border); }
    .legal-tab { background:none; border:none; padding:.7rem 1rem; font-family:inherit; font-size:.85rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--transition), border-color var(--transition); }
    .legal-tab.active { color:var(--text); border-bottom-color:var(--red); }
    .legal-tab-panel { display:none; }
    .legal-tab-panel.active { display:block; }

    /* ─── BOOKING CTA (sous le calendrier) ─── */
    .booking-cta { max-width:480px; margin:2rem auto 0; text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:2rem 1.75rem; }
    .booking-cta p { color:var(--text-muted); font-size:.9rem; line-height:1.7; margin-bottom:1.4rem; }
    .booking-cta .btn { width:100%; justify-content:center; }

    /* ─── MODAL INFO BANNER (rappel appel 30min) ─── */
    .modal-info-banner { display:flex; gap:.75rem; align-items:flex-start; background:rgba(196,30,58,0.07); border:1px solid rgba(196,30,58,0.18); border-radius:9px; padding:.9rem 1.1rem; margin-bottom:1.6rem; font-size:.82rem; color:var(--text-muted); line-height:1.55; }
    .modal-info-banner svg { flex-shrink:0; margin-top:.1rem; color:var(--red); }
    .modal-info-banner strong { color:var(--text); }
    .modal-info-banner a { color:var(--red); font-weight:500; }

    /* ─── SKELETON LOADERS ─── */
    .skeleton-block { position:relative; overflow:hidden; background:var(--surface-2); border-radius:8px; }
    .skeleton-block::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation:skeletonSweep 1.5s ease-in-out infinite; }
    @keyframes skeletonSweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
    @media (prefers-reduced-motion: reduce) { .skeleton-block::after { animation:none; } }

    /* ─── BOOKING MODAL ─── */
    .modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); z-index:1000; padding:1.5rem; }
    .modal-backdrop.open { display:flex; align-items:flex-start; justify-content:center; }
    .modal-box { background:var(--surface); border:1px solid var(--border); border-radius:20px; width:100%; max-width:700px; margin:auto; overflow:hidden; display:flex; flex-direction:column; max-height:90vh; }
    .modal-top { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 2rem; border-bottom:1px solid var(--border); }
    .modal-top-left { display:flex; align-items:center; gap:1rem; }
    .modal-brand { width:38px; height:38px; background:var(--red); border-radius:9px; display:flex; align-items:center; justify-content:center; }
    .modal-brand-text { font-size:.65rem; font-weight:700; color:#fff; letter-spacing:.05em; }
    .modal-title-block h2 { font-size:1rem; font-weight:600; }
    .modal-title-block p { font-size:.78rem; color:var(--text-muted); }
    .modal-close-btn { background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
    .modal-close-btn:hover { background:var(--surface-2); color:var(--text); }

    /* Progress bar */
    .modal-progress { flex-shrink:0; padding:.75rem 2rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; }
    .step-label { font-size:.75rem; color:var(--text-muted); white-space:nowrap; }
    .progress-bars { display:flex; gap:.3rem; flex:1; }
    .progress-bar { flex:1; height:3px; border-radius:2px; background:var(--border); transition: background var(--transition); }
    .progress-bar.done { background:var(--red); }
    .progress-bar.active { background:var(--red); }

    /* Step content */
    .modal-body { padding:2.5rem 2rem; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-height:0; }
    .step-head { margin-bottom:2rem; }
    .step-head h3 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:300; }
    .step-head p { color:var(--text-muted); font-size:.88rem; margin-top:.3rem; }
    .form-step { display:none; }
    .form-step.active { display:block; animation: fadeUp .3s ease; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

    /* Step 1 — service cards */
    .service-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
    .service-opt { position:relative; border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; cursor:pointer; transition:all var(--transition); }
    .service-opt:hover { border-color:rgba(196,30,58,0.4); background:var(--red-dim); }
    .service-opt input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
    .service-opt.selected { border-color:var(--red); background:var(--red-dim); }
    .service-opt .opt-icon { font-size:1.5rem; color:var(--red); margin-bottom:.8rem; }
    .service-opt .opt-name { font-size:.95rem; font-weight:500; }
    .service-opt .opt-desc { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }
    .service-opt .opt-check { position:absolute; top:.8rem; right:.8rem; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:.65rem; color:transparent; transition:all var(--transition); }
    .service-opt.selected .opt-check { background:var(--red); border-color:var(--red); color:#fff; }

    /* Step 2 — dates from DB */
    .dates-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
    .date-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:1.2rem 1rem; cursor:pointer; text-align:center; transition:all var(--transition); }
    .date-card:hover:not(.unavailable) { border-color:rgba(196,30,58,0.4); background:var(--red-dim); }
    .date-card.selected { border-color:var(--red); background:var(--red-dim); }
    .date-card.unavailable { opacity:.35; cursor:not-allowed; }
    .date-card .dc-icon { font-size:1.2rem; color:var(--red); margin-bottom:.5rem; }
    .date-card .dc-day { font-size:.9rem; font-weight:600; }
    .date-card .dc-date { font-size:.78rem; color:var(--text-muted); margin-top:.2rem; }
    .dates-loading { text-align:center; padding:2rem; color:var(--text-muted); }

    /* Step 3 — time slots from DB */
    .times-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; max-height:340px; overflow-y:auto; padding-right:.3rem; }
    .times-grid::-webkit-scrollbar { width:4px; } .times-grid::-webkit-scrollbar-track { background:transparent; } .times-grid::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
    .time-slot-btn { border:1.5px solid var(--border); border-radius:8px; padding:.8rem .5rem; cursor:pointer; text-align:center; font-size:.88rem; background:transparent; color:var(--text); font-family:inherit; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:.4rem; }
    .time-slot-btn i { color:var(--red); font-size:.8rem; }
    .time-slot-btn:hover:not(:disabled) { border-color:rgba(196,30,58,0.4); background:var(--red-dim); }
    .time-slot-btn.selected { border-color:var(--red); background:var(--red-dim); color:var(--text); }
    .time-slot-btn:disabled { opacity:.3; cursor:not-allowed; }

    /* Step 4 — info */
    .info-preview { background:var(--surface-2); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1.5rem; font-size:.85rem; color:var(--text-muted); }
    .info-preview strong { color:var(--text); }
    .modal-fg { margin-bottom:1rem; }
    .modal-fg label { display:block; font-size:.78rem; font-weight:500; letter-spacing:.04em; color:var(--text-muted); margin-bottom:.4rem; text-transform:uppercase; }
    .modal-fg input, .modal-fg select { width:100%; padding:.7rem .9rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; font-size:.9rem; transition:border-color var(--transition); }
    .modal-fg input:focus, .modal-fg select:focus { outline:none; border-color:rgba(196,30,58,0.5); }
    /* Icônes natives des sélecteurs date/heure : invisibles par défaut (noires) sur fond sombre */
    .modal-fg input[type="date"]::-webkit-calendar-picker-indicator,
    .modal-fg input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
    [data-theme="light"] .modal-fg input[type="date"]::-webkit-calendar-picker-indicator,
    [data-theme="light"] .modal-fg input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }
    .modal-fg select { appearance:none; }
    .modal-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

    /* Step 5 — confirmation */
    .confirm-card { background:var(--surface-2); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
    .confirm-header { background:rgba(196,30,58,0.08); border-bottom:1px solid var(--border); padding:1.2rem 1.5rem; display:flex; align-items:center; gap:.8rem; }
    .confirm-icon { width:40px; height:40px; border-radius:50%; background:rgba(46,204,113,0.15); border:1px solid rgba(46,204,113,0.3); display:flex; align-items:center; justify-content:center; color:#2ecc71; }
    .confirm-header h4 { font-size:1rem; font-weight:500; }
    .confirm-header p { font-size:.8rem; color:var(--text-muted); }
    .confirm-rows { }
    .confirm-row { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); }
    .confirm-row:last-child { border-bottom:none; }
    .confirm-row-icon { color:var(--red); width:16px; margin-top:.15rem; }
    .confirm-row-label { font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2rem; }
    .confirm-row-val { font-size:.9rem; }
    .confirm-time-big { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--red); font-weight:300; }
    .notice-box { background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25); border-radius:8px; padding:1rem 1.2rem; font-size:.82rem; color:rgba(201,168,76,0.9); margin-top:1.5rem; }
    .consent-check { display:flex; align-items:flex-start; gap:.65rem; margin-top:1rem; font-size:.82rem; color:var(--text-muted); line-height:1.5; cursor:pointer; }
    .consent-check input[type="checkbox"] { flex-shrink:0; width:17px; height:17px; margin-top:.15rem; accent-color:var(--red); cursor:pointer; }
    .consent-check a { color:var(--red); text-decoration:underline; text-underline-offset:2px; }
    .consent-check.consent-error { color:#dc2626; }
    .consent-check.consent-error input[type="checkbox"] { outline:2px solid #dc2626; outline-offset:2px; border-radius:3px; }
    .notice-box strong { display:block; margin-bottom:.3rem; }
    .confirm-actions { display:flex; gap:1rem; margin-top:1.5rem; }

    /* Modal footer nav */
    .modal-foot { flex-shrink:0; padding:1.2rem 2rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }

    /* ─── BOTTOM-SHEET SUR MOBILE ─── */
    /* Placé après les règles de base .modal-box/.modal-backdrop pour être prioritaire en cascade */
    @media (max-width:640px) {
      .modal-backdrop { padding:0; align-items:flex-end; }
      .modal-backdrop.open { align-items:flex-end; }
      .modal-box { max-width:100%; width:100%; border-radius:20px 20px 0 0; max-height:92vh; margin:0; animation:sheetUp .28s cubic-bezier(0.4,0,0.2,1); }
      @keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
      @media (prefers-reduced-motion: reduce) { .modal-box { animation:none; } }
      .legal-modal-body { font-size:.95rem; }
      .legal-modal-body h3 { font-size:1.05rem; }
      .legal-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    }
    .btn-back { background:none; border:1px solid var(--border); color:var(--text-muted); padding:.65rem 1.3rem; border-radius:7px; cursor:pointer; font-family:inherit; font-size:.88rem; display:flex; align-items:center; gap:.4rem; transition:all var(--transition); }
    .btn-back:hover { border-color:var(--border-strong); color:var(--text); }
    .btn-next-step { background:var(--red); color:#fff; border:none; padding:.65rem 1.6rem; border-radius:7px; cursor:pointer; font-family:inherit; font-size:.88rem; font-weight:500; display:flex; align-items:center; gap:.4rem; transition:all var(--transition); }
    .btn-next-step:hover:not(:disabled) { background:#a0172e; }
    .btn-next-step:disabled { opacity:.45; cursor:not-allowed; }
    /* Erreur inline dans les steps (remplace les alert JS) */
    .step-inline-err { display:none; margin-top:1rem; font-size:.83rem; }
    .btn-next-step:disabled { opacity:.5; cursor:not-allowed; }

    /* Alerts */
    .alert { padding:.9rem 1.2rem; border-radius:8px; font-size:.85rem; margin-top:1rem; }
    .alert-success { background:rgba(46,204,113,0.1); border:1px solid rgba(46,204,113,0.3); color:#2ecc71; }
    .alert-error { background:rgba(231,76,60,0.1); border:1px solid rgba(231,76,60,0.3); color:#e74c3c; }
    .spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border-strong); border-top-color:var(--red); border-radius:50%; animation:spin .6s linear infinite; }
    /* Sur un bouton à fond rouge constant (identique dans les deux thèmes), le spinner reste blanc sur rouge — jamais rouge sur rouge */
    .btn-primary .spinner, .btn-next-step .spinner { border-color: rgba(255,255,255,0.35); border-top-color:#fff; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* Video section placeholder */
    .video-placeholder { aspect-ratio:16/9; background:var(--surface); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); border:1px dashed var(--border); }
    .video-placeholder svg { width: 2.5rem; height: 2.5rem; margin-bottom:.8rem; color:var(--text-dim); }
    .video-placeholder span { font-size:.82rem; }

    /* ─── IMAGE PLEINE LARGEUR ─── */
    .full-img-divider {
      width: 100%;
      height: 100%;
      overflow: hidden;
      line-height: 0;
    }
    .full-img-divider img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    @media (max-width: 600px) {
      .full-img-divider, .full-img-divider img { height: 100%; }
    }

    /* ─── GALERIE PHOTOS ─── */
    .gallery-section-bg { background: var(--bg); }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
    @media(min-width:900px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
    @media(max-width:600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }

    .gallery-item {
      position: relative;
      aspect-ratio: 4/3;
      border-radius: 12px;
      overflow: hidden;
      background: var(--surface-2);
      cursor: zoom-in;
      border: 1px solid var(--border);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .gallery-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.5); border-color: rgba(196,30,58,.3); }
    .gallery-item:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
    .gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
    .gallery-item:hover img { transform: scale(1.06); }
    .gallery-item-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%); opacity:0; transition: opacity var(--transition); }
    .gallery-item:hover .gallery-item-overlay { opacity:1; }
    .gallery-item-caption { position:absolute; bottom:0; left:0; right:0; padding: .7rem .85rem; font-size:.75rem; color:rgba(255,255,255,.88); opacity:0; transition: opacity var(--transition); }
    .gallery-item:hover .gallery-item-caption { opacity:1; }

    /* Lightbox galerie */
    .gallery-lightbox {
      display: none; position: fixed; inset: 0; z-index: 2100;
      background: rgba(0,0,0,.96); backdrop-filter: blur(20px);
      align-items: center; justify-content: center; padding: 1rem;
    }
    .gallery-lightbox.open { display: flex; }
    .gallery-lb-img { max-width: min(90vw, 1000px); max-height: 90vh; border-radius: 10px; object-fit: contain; box-shadow: 0 40px 100px rgba(0,0,0,.8); }
    .gallery-lb-close {
      position: fixed; top: 1.2rem; right: 1.4rem;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      color: rgba(255,255,255,.7); font-size: 1.2rem; cursor: pointer;
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition); z-index: 2101;
    }
    .gallery-lb-close:hover { background: rgba(255,255,255,.15); color: #fff; }
    .gallery-lb-nav {
      position: fixed; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(20,20,20,.85); border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all var(--transition); z-index: 2101; backdrop-filter: blur(8px);
    }
    .gallery-lb-nav:hover { background: var(--red); border-color: var(--red); color: #fff; }
    .gallery-lb-prev { left: 1.2rem; }
    .gallery-lb-next { right: 1.2rem; }
    .gallery-lb-nav svg { width: 20px; height: 20px; }
    .gallery-empty { grid-column: 1/-1; text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
    .gallery-empty svg { width: 3rem; height: 3rem; margin-bottom: 1rem; opacity: .3; display: block; margin-left: auto; margin-right: auto; }

    .calendar-section-bg { background: var(--surface); }
    .calendar-wrap { max-width:480px; margin:0 auto; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
    .calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
    .cal-nav-btn { background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); }
    .cal-nav-btn:hover { border-color:rgba(196,30,58,.4); color:var(--red); }
    .cal-month-label { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; text-transform:capitalize; }
    .calendar-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.7rem; color:var(--text-dim); text-transform:uppercase; margin-bottom:.5rem; }
    .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
    .cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; font-size:.82rem; color:var(--text-muted); position:relative; cursor:pointer; }
    .cal-day.empty { visibility:hidden; cursor:default; }
    .cal-day.past { color:var(--text-dim); opacity:.4; cursor:not-allowed; pointer-events:none; }
    .cal-day:hover:not(.empty):not(.past) { background:var(--surface-2); }
    /* Jour avec une prestation confirmée ou une absence déclarée : même teinte bleue sur le
       calendrier public (le visiteur n'a pas besoin de distinguer les deux cas — cette
       distinction n'est faite que sur le calendrier admin, voir admin.html) */
    .cal-day.has-booking { cursor:pointer; color:var(--blue,#3b82f6); font-weight:600; }
    .cal-day.has-booking:hover { background:var(--surface-2); }
    .cal-day.today { border:1px solid var(--gold); box-sizing:border-box; }
    .cal-day.selected { background:var(--red); color:#fff; }
    .calendar-day-info { margin-top:1rem; font-size:.85rem; color:var(--text-muted); min-height:1.2rem; }
    .calendar-day-info strong { color:var(--text); }
    .calendar-legend { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.72rem; color:var(--text-muted); margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }
    .calendar-legend span { display:inline-flex; align-items:center; gap:.4rem; }
    .calendar-legend i { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }

    /* ─── Boutons "Aller à une date" / "Aujourd'hui" (au-dessus du calendrier public) ─── */
    .cal-picker-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
    .cal-picker-actions-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); font-family:inherit; font-size:.72rem; font-weight:600; padding:.45rem .8rem; border-radius:20px; cursor:pointer; transition:all var(--transition); }
    .cal-picker-actions-btn:hover { border-color:rgba(196,30,58,.4); color:var(--text); }

    /* ─── Popin sélecteur de date (année → mois → jour facultatif) ─── */
    .cal-picker-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:700; align-items:center; justify-content:center; padding:1rem; }
    .cal-picker-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.5rem; width:100%; max-width:360px; position:relative; }
    .cal-picker-close { position:absolute; top:1rem; right:1rem; background:none; border:1px solid var(--border); color:var(--text-muted); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .cal-picker-close:hover { color:var(--text); border-color:rgba(196,30,58,.4); }
    .cal-picker-title { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:500; color:var(--text); margin:0 0 1rem; text-align:center; text-transform:capitalize; }
    .cal-picker-subhead { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
    .cal-picker-subhead .cal-picker-title { margin:0; flex:1; text-align:center; }
    .cal-picker-back { background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
    .cal-picker-back:hover { color:var(--text); border-color:rgba(196,30,58,.4); }
    .cal-picker-grid { display:grid; gap:.5rem; margin-bottom:1rem; }
    .cal-picker-grid-year { grid-template-columns:repeat(3,1fr); }
    .cal-picker-grid-month { grid-template-columns:repeat(3,1fr); }
    .cal-picker-cell { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:.85rem; padding:.7rem .5rem; border-radius:9px; cursor:pointer; transition:all var(--transition); text-transform:capitalize; }
    .cal-picker-cell:hover { border-color:rgba(196,30,58,.5); }
    .cal-picker-cell.selected { background:var(--red); border-color:var(--red); color:#fff; }
    .cal-picker-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.65rem; color:var(--text-dim); text-transform:uppercase; margin-bottom:.4rem; }
    .cal-picker-day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; margin-bottom:.9rem; }
    .cal-picker-day { aspect-ratio:1; background:none; border:none; color:var(--text-muted); font-family:inherit; font-size:.78rem; border-radius:6px; cursor:pointer; }
    .cal-picker-day:hover:not(:disabled) { background:var(--surface-2); color:var(--text); }
    .cal-picker-day.empty { visibility:hidden; }
    .cal-picker-day.past { opacity:.35; cursor:not-allowed; }
    .cal-picker-hint { font-size:.72rem; color:var(--text-dim); text-align:center; margin:0 0 .8rem; }

    @media (max-width:420px) {
      .calendar-wrap { padding:1rem .8rem; }
      .cal-day { font-size:.72rem; }
      .calendar-legend { font-size:.68rem; gap:.6rem .9rem; }
      .cal-picker-box { padding:1.2rem; }
    }
    .alert-info { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.3); color:#60a5fa; }

    /* ─── NAV ONGLET GALERIE ─── */
  

/* ── Bloc 2 (anciennement <style> inline, section suivante de la page) ── */

  @media(max-width:700px){ #fichePublicWrap { grid-template-columns:1fr !important; } }

/* ── Bloc 3 (anciennement <style> inline, section suivante de la page) ── */

  .temo-section-bg { background:var(--bg); }
  .temo-public-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
  @media(max-width:640px) { .temo-public-grid { grid-template-columns:1fr; } }

  /* Card */
  /* min-width:0 est le correctif clé : par défaut, un item de grille CSS ne peut pas
     rétrécir en dessous de la largeur intrinsèque de son contenu ("min-width: auto").
     Or l'embed Instagram (voir .temo-pub-video-slot ci-dessous) impose sa propre largeur
     fixe (souvent ~328-540px) via son script officiel — sans ce reset, cette largeur
     intrinsèque élargissait toute la carte (et donc la grille) au-delà du viewport sur
     mobile, provoquant un débordement horizontal visible (texte et bouton "Voir le
     profil" coupés à droite, cf. capture d'écran). */
  .temo-pub-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; display:flex; flex-direction:column; gap:1rem; transition:border-color var(--transition), transform var(--transition); min-width:0; max-width:100%; overflow:hidden; }
  .temo-pub-card:hover { border-color:rgba(196,30,58,0.25); transform:translateY(-2px); }
  .temo-pub-head { display:flex; align-items:center; gap:1rem; min-width:0; }
  .temo-pub-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(196,30,58,0.2); flex-shrink:0; }
  .temo-pub-avatar-init { width:52px; height:52px; border-radius:50%; background:rgba(196,30,58,0.1); border:2px solid rgba(196,30,58,0.2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; color:var(--red); flex-shrink:0; font-family:'Cormorant Garamond',serif; }
  .temo-pub-nom { font-size:.95rem; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
  .temo-pub-role { font-size:.75rem; color:var(--text-muted); margin-top:.1rem; overflow-wrap:anywhere; }
  .temo-pub-stars { color:#c9a84c; font-size:1rem; letter-spacing:.08em; margin-top:.15rem; }
  .temo-pub-quote { font-size:.9rem; color:var(--text-muted); line-height:1.7; font-style:italic; flex:1; overflow-wrap:anywhere; word-break:break-word; }
  .temo-pub-quote::before { content:'"'; }
  .temo-pub-quote::after  { content:'"'; }
  .temo-pub-video { margin-top:.5rem; border-radius:10px; overflow:hidden; border:1px solid var(--border); max-width:100%; }
  .temo-pub-video-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--red); text-decoration:none; border:1px solid rgba(196,30,58,.2); padding:.4rem .9rem; border-radius:20px; transition:all var(--transition); margin-top:.5rem; }
  .temo-pub-video-link:hover { background:rgba(196,30,58,.07); }

  /* Nav buttons */
  .temo-nav-btn { background:var(--surface); border:1px solid var(--border); border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); transition:all var(--transition); }
  .temo-nav-btn:hover:not(:disabled) { border-color:rgba(196,30,58,.3); color:var(--red); }
  .temo-nav-btn:disabled { opacity:.3; cursor:not-allowed; }

  /* Voir plus */
  .temo-voir-plus { display:inline-flex; align-items:center; gap:.5rem; background:none; border:1px solid var(--border); color:var(--text-muted); padding:.6rem 1.5rem; border-radius:20px; cursor:pointer; font-family:inherit; font-size:.85rem; transition:all var(--transition); }
  .temo-voir-plus:hover { border-color:rgba(196,30,58,.3); color:var(--red); }

  .temo-pub-video-slot { border-radius:10px; overflow:hidden; border:1px solid var(--border); margin-top:.75rem; min-height:60px; display:flex; align-items:center; justify-content:center; max-width:100%; }
  /* L'embed Instagram (blockquote.instagram-media) et les iframes TikTok/Drive imposent leur
     propre largeur fixe en style inline une fois traités par leur script — on la force à
     100% du slot (sans jamais dépasser), c'est ce qui causait le débordement horizontal
     visible sur mobile (cf. capture d'écran : carte témoignage coupée à droite). */
  .temo-pub-video-slot iframe,
  .temo-pub-video-slot .instagram-media,
  .temo-pub-video-slot blockquote {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .temo-vid-loading { display:flex; align-items:center; justify-content:center; padding:1.5rem; }
  @keyframes spin { to { transform:rotate(360deg); } }