/* Laqa — design « Nuit d’or » (chargé après app.css, qu’il complète).
   Nuit profonde, aurore dorée animée, motif zellige, verre dépoli, typographie éditoriale.
   Tout reste lisible sans animations (prefers-reduced-motion) et sur téléphone. Retirer ce fichier = ancien design. */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root {
  --header-h: 76px;
  --night: #0E0A08;
  --night-2: #19110D;
  --gold-grad: linear-gradient(115deg, #F6DE96 0%, #E2BF5A 28%, #C59B27 52%, #F3D27A 76%, #B8860B 100%);
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23E2BF5A' stroke-width='1'%3E%3Cpath d='M42 6l11 25 25 11-25 11-11 25-11-25L6 42l25-11z'/%3E%3Crect x='24' y='24' width='36' height='36' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3Cpath d='M0 0l12 12M84 0L72 12M0 84l12-12M84 84L72 72'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Éléments communs ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; }
.sec-h h2 { font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: -.02em; line-height: 1.02; }
.btn { transition: background .25s, border-color .25s, color .25s, transform .2s var(--ease-out), box-shadow .25s, background-position .6s; }
.btn:hover { transform: translateY(-1px); }
.btn.gold, .search-box .btn { background: var(--gold-grad); background-size: 220% 100%; border: 0; color: #1A140B; font-weight: 600;
  box-shadow: 0 12px 28px -12px rgba(197, 155, 39, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.gold:hover, .search-box .btn:hover { background-position: 100% 0; filter: none; box-shadow: 0 16px 34px -12px rgba(197, 155, 39, .95), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* ---------- En-tête flottant en verre ---------- */
header.top { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 0 6px; pointer-events: none; }
header.top .top-in { pointer-events: auto; height: 60px; width: calc(100% - 24px); padding: 0 8px 0 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent); box-shadow: 0 14px 36px -18px rgba(20, 12, 6, .45); }
header.top .logo-dot { box-shadow: 0 0 10px rgba(226, 191, 90, .9); }
.main-nav a, .main-nav button { border-radius: 999px; }
#authSlot .btn { border-radius: 999px; }

/* ---------- Héros « Nuit d’or » ---------- */
.hero { margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 64px) 0 72px; min-height: min(940px, 100svh);
  background: var(--night); overflow: hidden; align-items: center; }
.hero::before { background: radial-gradient(110% 80% at 30% 0%, rgba(14, 10, 8, .25), rgba(14, 10, 8, .88) 72%), linear-gradient(180deg, rgba(14, 10, 8, .45), rgba(14, 10, 8, .95)); }
/* Performances : aucun flou ni mode de fusion sur ce qui bouge. Les halos sont des dégradés déjà doux (pas de « filter: blur »),
   les décors animés ne déplacent que « transform » et « opacity » (calculés par la carte graphique, sans redessiner la page). */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .05; pointer-events: none; }
.hero-bg { opacity: .5; filter: saturate(.85) contrast(1.05); transform: scale(1.06) translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -10px)); transition: transform .8s var(--ease-out); }
.aurora { position: absolute; inset: -160px; /* marge fixe : ne bouge pas quand le haut de page change de hauteur (stabilité de l'affichage) */ z-index: -1; pointer-events: none; }
.aurora i { position: absolute; width: 48vmax; height: 48vmax; animation: drift 24s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: 8%; top: 2%; background: radial-gradient(circle, rgba(226, 191, 90, .46), rgba(226, 191, 90, .17) 34%, transparent 66%); }
.aurora i:nth-child(2) { right: 2%; top: 12%; background: radial-gradient(circle, rgba(176, 72, 96, .36), rgba(176, 72, 96, .13) 34%, transparent 66%); animation-duration: 31s; animation-delay: -8s; }
.aurora i:nth-child(3) { left: 32%; bottom: -6%; background: radial-gradient(circle, rgba(36, 122, 112, .27), rgba(36, 122, 112, .1) 34%, transparent 66%); animation-duration: 38s; animation-delay: -15s; }
@keyframes drift { to { transform: translate(9%, 7%) scale(1.18) rotate(30deg); } }
.zellige { position: absolute; inset: 0; z-index: -1; background: var(--zellige) 0 0 / 84px; opacity: .13; pointer-events: none;
  -webkit-mask-image: radial-gradient(65% 70% at 78% 42%, #000, transparent 72%); mask-image: radial-gradient(65% 70% at 78% 42%, #000, transparent 72%); }
/* Halo qui suit la souris : déplacé par design.js avec « transform » (aucun recalcul de mise en page) */
.hero-glow { position: absolute; z-index: -1; width: 560px; height: 560px; left: 62%; top: 38%; margin: -280px 0 0 -280px;
  background: radial-gradient(circle, rgba(242, 210, 122, .2), transparent 64%); pointer-events: none; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-glow { will-change: transform; } }

.hero-in { text-align: left; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; align-items: center; margin-bottom: 38px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); margin-bottom: 26px;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.live-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #F3D27A; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(243, 210, 122, .7); animation: live 2.2s ease-out infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
.hero h1 { font-size: clamp(2.9rem, 6.2vw, 5.7rem); line-height: .98; letter-spacing: -.025em; max-width: none; margin: 0 0 22px; text-shadow: none; }
.rotator { display: grid; margin-top: .06em; }
/* Mot qui change : fondu et glissement seulement (un flou animé sur du texte doré se redessine à chaque image) */
.rotator > span { grid-area: 1 / 1; font-size: .92em; white-space: nowrap; font-style: italic; font-weight: 500; padding-bottom: .08em; opacity: 0; transform: translateY(40%);
  transition: opacity .5s var(--ease-out) .2s, transform .7s var(--ease-out) .2s;
  background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotator > span.on { opacity: 1; transform: none; }
.rotator > span.out { opacity: 0; transform: translateY(-40%); transition-delay: 0s; transition-duration: .3s; }
.hero .lead { margin: 0; max-width: 50ch; font-size: 1.1rem; color: rgba(255, 255, 255, .8); }

/* Cartes « invitation » qui flottent, avec un léger effet de profondeur à la souris */
.hero-stack { position: relative; height: 470px; perspective: 1200px; }
.hs-card { position: absolute; margin: 0; width: 58%; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .85), 0 0 0 6px rgba(255, 255, 255, .03);
  transform: translate3d(calc(var(--px, 0) * var(--d)), calc(var(--py, 0) * var(--d)), 0) rotate(var(--r));
  transition: transform .7s var(--ease-out); animation: float 8s ease-in-out infinite; }
.hs-card img { width: 100%; height: 100%; object-fit: cover; }
.hs-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 40%, rgba(14, 10, 8, .55)); }
.hs-card figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; padding: 9px 13px; border-radius: 14px; font: 600 .9rem/1.2 var(--sans); color: #fff;
  background: rgba(20, 14, 10, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .18); }
.hs-card.c1 { left: 0; top: 54px; --r: -9deg; --d: 10px; z-index: 1; }
.hs-card.c2 { right: 0; top: 0; --r: 7deg; --d: 16px; z-index: 2; animation-delay: -2.6s; }
.hs-card.c3 { left: 22%; top: 128px; width: 54%; --r: -1.5deg; --d: 24px; z-index: 3; animation-delay: -5.2s; }
.hs-chip { position: absolute; z-index: 4; padding: 9px 15px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: #fff; white-space: nowrap;
  background: rgba(24, 16, 11, .8); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); animation: float 7s ease-in-out infinite; }
.hs-chip.k1 { left: -6%; top: 12px; animation-delay: -1s; }
.hs-chip.k2 { right: -2%; bottom: 46px; animation-delay: -3s; }
.hs-chip.k3 { left: -8%; bottom: 96px; animation-delay: -4.5s; }
@keyframes float { 50% { translate: 0 -14px; } }

/* Barre de recherche, contour doré : immobile au repos (rien à redessiner), il tourne pendant la saisie */
.search-box { position: relative; max-width: none; margin: 0; border-radius: 26px; background: color-mix(in srgb, var(--surface) 93%, transparent);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.search-box::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; --angle: 200deg;
  background: conic-gradient(from var(--angle), rgba(243, 210, 122, .15) 0 55%, #F6DE96 72%, #C59B27 84%, rgba(243, 210, 122, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.search-box:focus-within::before { animation: spin-border 7s linear infinite; }
@keyframes spin-border { from { --angle: 200deg; } to { --angle: 560deg; } }
.search-field { border-radius: 18px; }
.search-box .btn { border-radius: 18px; }
.hero-meta { justify-content: flex-start; }

/* Bandeau défilant : prolonge la nuit du héros */
.mq { background: var(--night); border: 0; padding: 18px 0; position: relative; }
.mq::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 191, 90, .5), transparent); }
.mq-track span { color: rgba(255, 255, 255, .5); }

/* ---------- Univers en mosaïque (bento) ---------- */
.cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; }
.cat-card { aspect-ratio: auto; border-radius: 26px; transition: box-shadow .4s, transform .4s var(--ease-out); }
.cat-card:first-child { grid-column: span 2; grid-row: span 2; }
.cat-card:nth-child(6) { grid-column: span 2; }
.cat-card::before { background: linear-gradient(180deg, transparent 30%, rgba(12, 9, 7, .82)); }
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 210, 122, .3), transparent 62%); }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(226, 191, 90, .65), 0 26px 50px -26px rgba(44, 30, 24, .7); }
.cat-card:hover::after { opacity: 1; }
.cat-card div { position: relative; z-index: 1; margin: 12px; width: calc(100% - 24px); padding: 12px 40px 12px 14px; border-radius: 18px;
  background: rgba(18, 12, 8, .34); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .16); }
.cat-card div::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translate(-6px, -50%); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s; color: #F3D27A; font-size: 1.1rem; }
.cat-card:hover div::after { transform: translate(0, -50%); opacity: 1; }
.cat-card h3 { font-size: 1.3rem; }
.cat-card:first-child h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.cat-card.active { box-shadow: 0 0 0 2px #E2BF5A, 0 26px 50px -26px rgba(44, 30, 24, .7); }

/* ---------- Cartes prestataires ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 10px; position: relative;
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: 0 34px 60px -34px rgba(44, 30, 24, .55); }
.card-media { border-radius: 19px; }
.card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 236, 180, .28), transparent 62%); }
.card:hover .card-media::after { opacity: 1; }
.card-body { padding: 14px 8px 6px; }
.card-media .badge { background: rgba(255, 255, 255, .92); }
/* Barre de filtres collante : fond presque plein, sans flou d’arrière-plan (sinon recalculé à chaque image du défilement) */
.filter-bar { top: calc(var(--header-h) + 8px); border-radius: 999px; padding: 8px 10px; background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.empty-launch { border-radius: 30px; border-style: solid; background:
  radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%), var(--surface); }

/* ---------- « Réserver sur Laqa » : la nuit revient, étapes reliées par un fil d’or ---------- */
.how { background: var(--night); color: #F5EFE8; position: relative; overflow: hidden; isolation: isolate; }
.how::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zellige) 0 0 / 84px; opacity: .07;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 75%); }
.how::after { content: ""; position: absolute; z-index: -1; width: 70vmax; height: 40vmax; left: 50%; top: 60%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(226, 191, 90, .14), transparent); }
.how .sec-h h2 { color: #fff; }
.how .eyebrow { color: #E2BF5A; }
.how .steps { position: relative; }
.how .steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 191, 90, .75), transparent); }
.how .step { position: relative; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; padding: 30px;
  transition: transform .4s var(--ease-out), border-color .4s, background .4s; }
.how .step:hover { transform: translateY(-6px); border-color: rgba(226, 191, 90, .5); background: rgba(255, 255, 255, .06); }
.how .step b { width: 54px; height: 54px; background: var(--night); color: #F3D27A; border: 1px solid rgba(226, 191, 90, .65); font: italic 600 1.35rem var(--serif);
  box-shadow: 0 0 0 7px rgba(226, 191, 90, .07), 0 0 32px rgba(226, 191, 90, .3); }
.how .step h3 { color: #fff; }
.how .step .muted { color: rgba(245, 239, 232, .68); }

/* ---------- Bannière Pro : aurore et zellige ---------- */
.pro-banner { isolation: isolate; border-radius: 34px; background: var(--night-2); border: 1px solid rgba(226, 191, 90, .28); }
.pro-banner::before { content: ""; position: absolute; inset: -30%; z-index: -2; opacity: .7;
  background: radial-gradient(35% 40% at 20% 30%, rgba(226, 191, 90, .5), transparent), radial-gradient(35% 40% at 80% 70%, rgba(176, 72, 96, .38), transparent);
  animation: drift 26s ease-in-out infinite alternate; }
.pro-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zellige) 0 0 / 84px; opacity: .08; }
.pro-banner h2 { letter-spacing: -.02em; }

/* ---------- Pied de page de nuit ---------- */
footer { background: var(--night); border-top: 0; color: rgba(245, 239, 232, .72); position: relative; overflow: hidden; }
footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 191, 90, .55), transparent); }
footer h3, footer h4 { color: #fff; }
footer .logo { color: #fff; }
footer .muted { color: rgba(245, 239, 232, .6); }
footer ul a, footer ul button { color: rgba(245, 239, 232, .6); }
footer ul a:hover, footer ul button:hover { color: #F3D27A; }
.foot-bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(245, 239, 232, .5); }
.foot-bottom a:hover { color: #F3D27A; }
.giant { background: linear-gradient(180deg, rgba(243, 210, 122, .42), rgba(243, 210, 122, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Page de connexion : visuel de nuit avec zellige ---------- */
.auth-visual { background: var(--night); }
.auth-visual img { opacity: .75; }
.auth-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--zellige) 0 0 / 84px; opacity: .14;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); }
.auth-visual::after { z-index: 1; background: linear-gradient(180deg, rgba(14, 10, 8, .15) 30%, rgba(14, 10, 8, .9)); }
.auth-quote { z-index: 2; }
.auth-quote p { background: linear-gradient(180deg, #fff 40%, #F3D27A); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Tableaux de bord : touches dorées ---------- */
.stat { transition: transform .3s var(--ease-out), box-shadow .3s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.stat .num.accent { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
dialog::backdrop { background: rgba(10, 7, 5, .7); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Apparition au défilement (activée par design.js) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--rd, 0ms); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Écrans moyens et téléphones ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stack { display: none; }
  .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
}
@media (max-width: 900px) {
  header.top .main-nav { top: calc(var(--header-h) - 2px); left: 12px; right: 12px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
  .search-box { padding: 6px; }
}
@media (max-width: 640px) {
  :root { --header-h: 70px; }
  header.top { padding-top: 8px; }
  header.top .top-in { height: 56px; padding: 0 6px 0 16px; width: calc(100% - 16px); }
  .hero { padding: calc(var(--header-h) + 34px) 0 44px; min-height: 0; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero-kicker { font-size: .68rem; letter-spacing: .1em; padding: 7px 12px; }
  .hero .lead { font-size: 1rem; }
  .hero-grid { margin-bottom: 26px; }
  .cats-grid { grid-auto-rows: 150px; gap: 10px; }
  .cat-card div { margin: 8px; width: calc(100% - 16px); padding: 9px 30px 9px 11px; }
  .cat-card h3 { font-size: 1.1rem; }
  .filter-bar { border-radius: 22px; }
  .how .steps::before { display: none; }
  .pro-banner { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .zellige, .live-dot, .live-dot::after, .rotator > span, .hs-card, .hs-chip, .search-box::before, .pro-banner::before { animation: none !important; }
  .live-dot::after { display: none; }
  .rotator > span { transition: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Nouveautés gardées (onglets, fiche, réservation, « Ma préparation »), au style Nuit d’or ---------- */
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -8px 0 16px; padding-bottom: 2px; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { flex: none; padding: .45rem .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .86rem; font-weight: 500; cursor: pointer; transition: all .2s; }
.cat-tab:hover { border-color: var(--ink); color: var(--ink); }
.cat-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.card-top { padding: 0 6px 8px; font-size: .8rem; font-weight: 500; color: var(--success); }
.pv-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tech { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.tech summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; list-style: none; cursor: pointer; font: 600 1.25rem var(--serif); }
.tech summary::-webkit-details-marker { display: none; }
.tech summary small { font: 400 .85rem var(--sans); color: var(--muted); }
.tech summary::after { content: "+"; margin-left: auto; font: 400 1.3rem/1 var(--sans); color: var(--accent); transition: transform .25s; }
.tech[open] summary::after { transform: rotate(45deg); }
.tech[open] summary { border-bottom: 1px solid var(--line); }
.tech-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.tech-body h4 { margin-top: 6px; font-size: 1.1rem; }
.specs { display: grid; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.specs div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.specs div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); font-size: .85rem; }
.specs dd { margin: 0; font-size: .92rem; }
.notice-steps { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.bk-step { display: grid; gap: 10px; }
.bk-label { font: 600 1.05rem var(--serif); color: var(--accent); }
.pv-sticky { display: none; }
.access-panel { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 22px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.access-card { position: relative; aspect-ratio: 1.6; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #F5EFE8;
  background: radial-gradient(70% 90% at 0% 0%, rgba(197, 155, 39, .45), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(176, 72, 96, .35), transparent 60%), #1A120E;
  border: 1px solid rgba(226, 191, 90, .45); box-shadow: 0 30px 60px -30px rgba(44, 30, 24, .8); }
.access-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zellige) 0 0 / 84px; opacity: .12; }
.ac-top, .ac-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 239, 232, .75); }
.ac-event { font: italic 600 clamp(1.8rem, 3vw, 2.3rem)/1 var(--serif); color: #F3D27A; }
.ac-date { font-size: .9rem; color: rgba(245, 239, 232, .85); }
.ac-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ac-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); transition: width .6s var(--ease-out); }
.ac-info .eyebrow { margin-bottom: 8px; }
.ac-badges { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; }
.ac-badges li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); font-size: .9rem; }
.ac-badges li i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); font-style: normal; font-size: .72rem; }
.ac-badges li.ok { border-style: solid; border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--ink); background: var(--gold-soft); }
.ac-badges li.ok i { background: var(--gold); border-color: var(--gold); color: #1A140B; }
@media (max-width: 1000px) {
  .pv-sticky { display: flex; position: sticky; bottom: -34px; z-index: 4; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -34px -34px; padding: 12px 16px;
    background: color-mix(in srgb, var(--surface) 97%, transparent); border-top: 1px solid var(--line); }
}
@media (max-width: 900px) { .access-panel { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .specs div { grid-template-columns: 1fr; gap: 2px; }
  .ac-badges { grid-template-columns: 1fr; }
  .pv-sticky { bottom: -32px; margin: 16px -16px -32px; }
}

/* Espace Pro : agenda synchronisé (Google Agenda, iPhone, Outlook) */
.cal-sync { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft); display: grid; gap: 12px; }
.cal-sync-head { display: flex; gap: 14px; align-items: flex-start; }
.cal-sync-head h3 { font-size: 1.35rem; margin-bottom: 4px; }
.cal-sync-ico { font-size: 1.6rem; line-height: 1; }
.cal-sync > .btn { justify-self: start; }
.cal-sync-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-sync-url { display: flex; gap: 8px; }
.cal-sync-url .input { flex: 1; min-width: 0; font-size: .82rem; color: var(--muted); }

/* Bandeau « Confirmez votre adresse e-mail » affiché : l’accueil ne remonte plus sous l’en-tête (il cacherait le bandeau).
   Sélecteur « frère suivant » (~) et non « body:has(…) » : avec :has, chaque élément affiché ou masqué n’importe où
   obligeait le navigateur à recalculer toute la page (saccade de 16 ms au début du défilement). */
#verifyBanner:not([hidden]) ~ main .hero { margin-top: 0; padding-top: 64px; }
@media (max-width: 640px) { #verifyBanner:not([hidden]) ~ main .hero { padding-top: 34px; } }

/* Logo : monogramme « L. » doré devant le nom (assets/img/logo-icone-512.png, favicons dérivés) */
.logo-mark { width: 32px; height: 32px; border-radius: 9px; align-self: center; margin-right: 8px; flex: none; }
@media (max-width: 640px) { .logo-mark { width: 28px; height: 28px; border-radius: 8px; margin-right: 6px; } }

/* Section ouverte depuis une notification : visible sous l’en-tête fixe, brièvement soulignée */
.panel, .dash .stats { scroll-margin-top: 90px; }
.flash-target { animation: flash-target 2.2s ease; }
@keyframes flash-target { 0%, 60% { box-shadow: 0 0 0 3px var(--gold), 0 0 40px -6px color-mix(in srgb, var(--gold) 60%, transparent); } 100% { box-shadow: none; } }

/* Bouton WhatsApp sur la fiche */
.btn.wa-btn { border-color: #25D366; color: #128C4A; }
.btn.wa-btn:hover { background: #25D366; color: #fff; }

/* Alerte « nouveau prestataire disponible à ma date » (sous les résultats) et liste dans « Mon événement » */
.alert-box { margin-top: 22px; padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--bg-soft); }
.alert-box p { margin: 0; max-width: 62ch; }
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alert-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }

/* Abonnement Laqa Pro : formule mensuelle ou annuelle */
.sub-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.sub-plan { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.sub-plan.best { border-color: var(--gold); background: color-mix(in srgb, var(--gold-soft) 55%, transparent); }
.sub-plan .sub-price { margin: 4px 0 0; }
.sub-plan .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 640px) { .sub-plans { grid-template-columns: 1fr; } }

/* Badge « Répond rapidement » (lib/reactivite.php) */
.badge.fast { background: color-mix(in srgb, #3B9C6E 16%, var(--surface)); color: #2F8A5F; }
:root[data-theme="dark"] .badge.fast { color: #6FCB9C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.fast { color: #6FCB9C; } }

/* Conseils (articles.php) */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 26px; }
.art-card { display: grid; grid-template-rows: 180px auto; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.art-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.art-card img { width: 100%; height: 100%; object-fit: cover; }
.art-card > div { padding: 16px 18px 20px; display: grid; gap: 6px; }
.art-card h2 { font-size: 1.35rem; line-height: 1.2; }
.article-page { max-width: 780px; }
.article-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin: 8px 0 12px; }
.lead-art { font-size: 1.1rem; color: var(--ink-2); }
.art-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 18px; margin: 22px 0 8px; }
.art-body h2 { font-size: 1.6rem; margin: 30px 0 10px; }
.art-body p, .art-body li { line-height: 1.7; }
.art-body p + p { margin-top: 10px; }
.art-body ul, .art-body ol { margin: 10px 0 0 22px; display: grid; gap: 6px; }
.art-body a, .art-more a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.art-more { margin: 10px 0 30px; }
.art-more ul { margin: 10px 0 0 20px; display: grid; gap: 6px; }

/* Questions fréquentes (faq.php) */
.faq-page { max-width: 860px; }
.faq-sec { margin-top: 34px; display: grid; gap: 10px; }
.faq-sec h2 { font-size: 1.6rem; margin-bottom: 6px; }
.faq-sec .tech-body p + p { margin-top: 8px; }
.faq-sec .tech-body ul, .faq-sec .tech-body ol { margin: 8px 0 0 20px; display: grid; gap: 4px; }
.faq-contact { margin: 44px 0 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft); display: grid; gap: 12px; }
.faq-contact p:last-child { display: flex; flex-wrap: wrap; gap: 10px; }

/* Jauge de la fiche : étapes restantes repliables */
.complete-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; margin-top: 10px; }
.complete-done { margin: 12px 0 0; }

/* Messages en « popover » (au-dessus des fenêtres ouvertes) : on retire le style par défaut du navigateur */
/* Téléphone : un petit message au centre de l’écran (plus visible, ne recouvre pas les boutons du bas) */
@media (max-width: 640px) {
  .toasts, .has-assistant .toasts { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 48px)); }
  .toast { box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55); font-size: .95rem; }
}

/* Demande de devis groupée : sélection sur les cartes, barre du bas, comparaison des tarifs */
.card-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.quote-pick[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.quote-bar { position: fixed; z-index: 1500; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px); padding: 10px 12px 10px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); font-size: .92rem; }
.quote-bar[hidden] { display: none; }
.gq-picked { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.gq-picked li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; }
.gq-picked img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.gq-picked span { flex: 1; min-width: 0; display: grid; }
.gq-picked small { color: var(--muted); }
.gq-list, #clientQuotes { display: grid; gap: 14px; }
.gq-req { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--bg-soft); display: grid; gap: 8px; }
.gq-req.sent { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.gq-req-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.gq-req p { margin: 0; }
.gq-msg { font-style: italic; color: var(--ink-2); }
.gq-rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.gq-rows li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 16px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.gq-rows li.declined { opacity: .6; }
.gq-who p { margin: 4px 0 0; color: var(--ink-2); }
.gq-price { display: grid; justify-items: end; gap: 4px; }
.gq-price strong { font-size: 1.1rem; }
.gq-answer { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; align-items: end; margin-top: 6px; }
.gq-answer .actions { grid-column: 1 / -1; }
.gq-req details summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
@media (max-width: 640px) {
  .quote-bar { bottom: 16px; gap: 10px; padding-left: 14px; font-size: .85rem; }
  .has-assistant .quote-bar { bottom: 84px; } /* au-dessus de la bulle de l’assistant */
  .gq-rows li, .gq-answer { grid-template-columns: 1fr; }
  /* Tableaux de bord : chiffres sur deux colonnes, pour voir plus vite les réservations en dessous */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stat { padding: 14px 14px; }
  .stat .num { font-size: 1.3rem; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Onglets de l’Espace Pro : tous visibles (2 par ligne) plutôt qu’une ligne qui défile */
  .tabs:has(> .tab:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; overflow: visible; }
  .tabs:has(> .tab:nth-child(4)) .tab { white-space: normal; padding: 10px 6px; font-size: .88rem; }
  .gq-price { justify-items: start; }
}

/* Fiche sans formule : fourchette de prix au-dessus de la demande de devis */
.bk-range { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 2px 0 6px; }
.book-panel .btn.block + .btn.block { margin-top: 8px; }
.gq-price small { font-size: .74rem; text-align: right; }
@media (max-width: 640px) { .gq-price small { text-align: left; } }

/* Formules de l'Espace Pro : prix et boutons sous le texte sur téléphone, boutons bien visibles même pour une formule inactive */
.service-row.inactive { opacity: 1; }
.service-row.inactive > div:first-child { opacity: .55; }
.service-side { display: grid; justify-items: end; gap: 8px; flex-shrink: 0; }
.service-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.btn.danger-text { color: var(--danger); }
@media (max-width: 640px) {
  .service-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .service-side { justify-items: start; }
  .service-btns { justify-content: flex-start; }
  .service-btns .btn { flex: 1 1 0; min-height: 40px; }
}
/* Espace Pro : courbe des vues de la fiche */
.views-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 14px; margin-bottom: 14px; }
.vc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vc-head h3 { font-size: 1.25rem; }
.vc-ranges { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.vc-ranges button { border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.vc-ranges button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vc-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 6px; }
.vc-hero strong { font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.vc-hero .muted { flex-basis: 100%; }
.vc-trend { font-size: .82rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.vc-trend.up { background: var(--success-soft); color: var(--success); }
.vc-trend.down { background: var(--danger-soft); color: var(--danger); }
.vc-plot { position: relative; margin: 6px -6px 0; touch-action: pan-y; }
.vc-plot svg { display: block; overflow: visible; outline: none; }
.vc-plot svg:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
.vc-axis text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.vc-grid { stroke: var(--line); stroke-dasharray: 2 4; }
.vc-base { stroke: var(--line-strong, var(--line)); }
.vc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vc-stop1 { stop-color: var(--accent); stop-opacity: .22; }
.vc-stop2 { stop-color: var(--accent); stop-opacity: 0; }
.vc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.vc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.vc-hit { cursor: crosshair; }
.vc-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 6px 10px; font-size: .78rem; line-height: 1.3; display: grid; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.vc-tip span { opacity: .75; }
.vc-facts { margin: 8px 0 4px; }
.vc-table summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: 4px 0; }
.vc-table table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 6px; }
.vc-table th, .vc-table td { text-align: left; padding: 5px 0; border-bottom: 1px solid var(--line); }
.vc-table td:last-child, .vc-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vc-table tbody { display: block; max-height: 240px; overflow: auto; }
.vc-table thead, .vc-table tbody tr { display: table; width: 100%; table-layout: fixed; }
@media (max-width: 640px) { .views-card { padding: 16px 14px 12px; } .vc-hero strong { font-size: 1.9rem; } }
/* En-tête d'un compte connecté sur téléphone : les boutons tiennent sans déborder, même sur un écran de 320 px */
@media (max-width: 420px) {
  .top-in { gap: 6px; padding-left: 12px; }
  .nav-actions { gap: 0; }
  .nav-actions .icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 360px) { .nav-actions .icon-btn { width: 30px; height: 30px; } .top-in { padding-left: 8px; gap: 4px; } .top-in .logo { font-size: 1.35rem; gap: 5px; } .top-in .logo-mark { width: 26px; height: 26px; } }
/* Fiche prestataire sur téléphone : boutons d'action en grille de 2 colonnes (au lieu de 4 lignes) */
@media (max-width: 640px) {
  .pv-head { flex-direction: column; align-items: stretch; }
  .pv-head .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: none; }
  .pv-head .chips > .btn { width: 100%; justify-content: center; text-align: center; min-height: 42px; }
  .pv-head .chips > .quote-pick { grid-column: 1 / -1; order: 5; }
}@media (max-width: 640px) { .pv-head .card-line > span[aria-hidden="true"] { display: none; } .pv-head .card-line { column-gap: 12px; } }

/* Connexion / inscription : barre du site en haut, formulaire épuré et centré, photo pleine hauteur à droite */
.auth-page { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); }
.auth-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 32px; border-bottom: 1px solid var(--line); background: var(--surface); }
.auth-bar-actions { display: flex; align-items: center; gap: 8px; }
.auth-pro-link { padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-weight: 500; font-size: .9rem; text-decoration: none; transition: background .2s; }
.auth-pro-link:hover { background: var(--line); color: var(--ink); }
.auth { flex: 1; min-height: 0; }
@media (min-width: 1001px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-side { padding: 0 32px; justify-content: center; }
.auth-box { max-width: 400px; padding: 56px 0; }
.auth-box h1 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); text-align: center; margin: 0 0 24px; }
.auth-lead { text-align: center; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 30px 0 24px; color: var(--muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-sub { text-align: center; font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 500; margin: 0 0 16px; }
.auth-visual { margin: 0; border-radius: 0; min-height: 520px; }
@media (max-width: 640px) {
  .auth-bar { padding: 8px 14px; }
  .auth-pro-link { display: none; }
  .auth-side { padding: 0 16px; }
  .auth-box { padding: 30px 0 40px; }
}
/* Devenir partenaire (partenaire.html) : accueil à 2 choix, puis parcours en 3 étapes avec présentation à gauche */
.partner-page { min-height: 100dvh; background: var(--bg); }
.logo-pro { font: 700 .42em/1 var(--sans, inherit); letter-spacing: .1em; margin-left: 4px; color: var(--accent); align-self: flex-start; }
.partner-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; }
.partner-intro-box { max-width: 700px; margin: 7vh auto 64px; padding: 0 20px; }
.partner-intro-box h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1.08; margin: 0 0 14px; }
.partner-lead { font-size: 1.1rem; color: var(--ink-2); margin: 0; }
.partner-checks { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 12px; color: var(--ink-2); }
.partner-checks li { display: flex; gap: 10px; align-items: flex-start; }
.partner-checks svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
.choice-list { display: grid; gap: 14px; }
.choice { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 22px 24px; border: 1px solid var(--accent); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; transition: box-shadow .2s, transform .2s, background .2s; }
.choice:hover { box-shadow: 0 8px 24px rgba(44, 30, 24, .1); transform: translateY(-1px); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice > span:not(.choice-ico) { flex: 1; display: grid; gap: 4px; min-width: 0; }
.choice b { font-size: 1.06rem; font-weight: 600; }
.choice small { color: var(--ink-2); font-size: .92rem; }
.choice-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--accent); }
.choice-ico svg { width: 22px; height: 22px; }
.choice-arrow { width: 22px; height: 22px; flex: none; color: var(--ink); }

.partner-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
.partner-flow[hidden], .partner-intro[hidden] { display: none; }
.partner-pitch { background: var(--night, #17120F); color: #F5F2EE; padding: 40px 8% 0; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.partner-pitch .logo { color: #fff; }
.partner-pitch h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 500; line-height: 1.08; margin: 5vh 0 0; color: #fff; max-width: 15ch; }
.partner-pitch p { color: rgba(255, 255, 255, .72); max-width: 46ch; margin: 0; }
.partner-pitch b { color: #fff; font-weight: 600; }
.partner-pitch .partner-checks { color: rgba(255, 255, 255, .86); margin: 6px 0 0; }
.partner-pitch .partner-checks svg { color: #E2BF5A; }
.partner-arches { display: flex; gap: 14px; margin: auto 0 0; padding-top: 30px; max-width: 400px; align-items: flex-end; }
.partner-arches > img { width: 54%; aspect-ratio: 3 / 4.3; object-fit: cover; border-radius: 999px 999px 0 0; }
.partner-arches > div { display: grid; gap: 14px; width: 42%; }
.partner-arches > div img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.partner-arches > div img:first-child { border-radius: 0 100% 0 0; }
.partner-arches > div img:last-child { border-radius: 999px 999px 0 0; }
.partner-form { padding: 72px 8% 48px; display: flex; flex-direction: column; width: 100%; max-width: 640px; justify-self: center; }
.partner-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 56px; }
.partner-steps span { height: 5px; border-radius: 3px; background: var(--line); transition: background .3s; }
.partner-steps span.on { background: var(--ink); }
.partner-form h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.15; margin: 0 0 24px; }
.partner-back { align-self: center; display: inline-flex; gap: 8px; align-items: center; margin-top: 26px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; padding: 8px 12px; }
.partner-back[hidden] { display: none; }
.partner-back svg { width: 20px; height: 20px; }
.partner-foot { text-align: center; margin: 28px 0 0; }
.partner-price { text-align: center; margin: 0; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); cursor: pointer; }
.check-line input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
#partnerSubmit:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
  .partner-flow { grid-template-columns: 1fr; min-height: 0; }
  .partner-pitch { padding: 18px 16px 22px; gap: 10px; }
  .partner-pitch h2 { font-size: 1.5rem; margin: 6px 0 0; max-width: none; }
  .partner-pitch p, .partner-pitch .partner-checks, .partner-arches { display: none; }
  .partner-form { padding: 26px 16px 40px; }
  .partner-steps { margin-bottom: 28px; }
  .choice { padding: 18px; gap: 14px; }
  .choice-ico { width: 44px; height: 44px; }
  .partner-intro-box { margin-top: 3vh; }
}
/* Petits écrans d'ordinateur : « Vous êtes prestataire ? » reste visible, en pastille */
@media (max-width: 1100px) {
  .pro-link:not([hidden]) { display: inline-flex; align-items: center; }
  .pro-link { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .84rem; color: var(--ink); white-space: nowrap; }
}

/* Téléphone et tablette, comme une appli : ☰ à gauche, logo au centre, compte à droite ; tout le reste dans le menu latéral */
.m-burger { display: none; }
.login-btn svg { display: none; width: 22px; height: 22px; }
@media (max-width: 900px) {
  header.top .top-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 0 6px; }
  .m-burger { display: inline-flex; justify-self: start; }
  .top-in .logo { justify-self: center; }
  .nav-actions { justify-self: end; margin-left: 0; gap: 2px; }
  .main-nav, .burger, .pro-link, #favBtn { display: none !important; }
}
@media (max-width: 640px) {
  .login-btn { width: 46px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; }
  .login-btn span { display: none; }
  .login-btn svg { display: block; }
}

/* Menu latéral */
dialog.drawer { margin: 0; inset: 0 auto 0 0; width: min(86vw, 380px); max-width: none; height: 100dvh; max-height: none; border-radius: 0 22px 22px 0; overflow-y: auto; }
dialog.drawer[open] { animation: drawer-in .26s cubic-bezier(.2, .8, .2, 1); display: block; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-in { display: flex; flex-direction: column; min-height: 100%; padding: 16px 24px 32px; }
.drawer-x { align-self: flex-end; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; font-size: 1.25rem; color: var(--ink); cursor: pointer; }
.drawer-x:hover { background: var(--surface-2); }
.drawer-account { display: grid; gap: 12px; margin: 6px 0 22px; }
.drawer-hello { margin: 0 0 2px; color: var(--ink-2); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav button, .drawer-nav a { text-align: left; background: none; border: 0; padding: 13px 0; font: inherit; font-size: 1.05rem; color: var(--ink); cursor: pointer; text-decoration: none; }
.drawer-nav button:hover, .drawer-nav a:hover { color: var(--accent); }
.drawer-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
/* Page d'une spécialité (#/specialite/…) : titre, recherche par ville, autour de moi, raccourcis par ville */
.cat-page { max-width: 640px; padding-top: calc(var(--header-h) + 40px); padding-bottom: 72px; }
.cat-page h1 { font-size: clamp(2.1rem, 7vw, 3rem); font-weight: 500; line-height: 1.1; text-align: center; margin: 0 0 30px; }
.cat-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 18px; box-shadow: var(--sh-xs, 0 1px 3px rgba(0,0,0,.06)); }
.cat-search.ac-host, .cat-search .ac-host { position: relative; }
.cat-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 10px 0; outline: none; }
.cat-search .ac-list { left: 0; right: 0; top: calc(100% + 6px); }
.cat-search-go { width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; }
.cat-search-go svg { width: 22px; height: 22px; }
.cat-near { margin-top: 16px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.cat-near svg { width: 22px; height: 22px; }
.cat-sub { font: 500 1.05rem/1.3 var(--sans, inherit); color: var(--ink-2); margin: 44px 0 16px; }
.city-cards { display: grid; gap: 14px; margin-bottom: 18px; }
.city-card { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(44, 30, 24, .05); transition: transform .2s, box-shadow .2s; }
.city-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(44, 30, 24, .1); }
.city-card img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.city-card span { display: grid; gap: 2px; min-width: 0; }
.city-card small { color: var(--ink-2); font-size: .88rem; }
.city-card b { font-size: 1.12rem; font-weight: 500; }
.city-card em { font-style: normal; font-size: .8rem; color: var(--accent); margin-top: 2px; }
@media (max-width: 640px) { .cat-page { padding-top: calc(var(--header-h) + 24px); } }
/* Barre du haut sur ordinateur : spécialités + « Toutes les prestations » */
.nav-cats { display: contents; }
.main-nav a[data-cat-link] { white-space: nowrap; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: "▾"; font-size: .75em; margin-left: 6px; opacity: .7; }
.nav-more summary:hover, .nav-more[open] summary { background: var(--surface-2); color: var(--ink); }
.nav-more-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 250px; display: grid; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg, 0 18px 40px rgba(0,0,0,.18)); }
.nav-more-pop a { padding: 10px 12px !important; border-radius: 10px !important; }
@media (max-width: 1240px) { .nav-cats > a[data-cat-link]:nth-of-type(n+3) { display: none; } }

/* Page d'une spécialité : sur ordinateur, barre « Que cherchez-vous ? | Où ? | Rechercher » et cartes de villes en 3 colonnes */
.cat-field { display: grid; flex: 1; min-width: 0; }
.cat-field.cat-what, .cat-field small, .cat-search-go span { display: none; }
.cat-where.ac-host { position: relative; }
@media (min-width: 901px) {
  .cat-page { max-width: 1040px; }
  .cat-page h1 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
  .cat-search { max-width: 980px; margin: 0 auto; padding: 10px 10px 10px 26px; gap: 14px; border-radius: 16px; }
  .cat-field.cat-what { display: grid; border-right: 1px solid var(--line); padding-right: 14px; }
  .cat-field small { display: block; font-size: .8rem; color: var(--muted); }
  .cat-field select { border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); padding: 4px 0; cursor: pointer; outline: none; }
  .cat-where { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; background: var(--bg-soft, var(--surface-2)); }
  .cat-where input { padding: 4px 0; font-size: 1rem; }
  .cat-search-go { width: auto; height: 52px; padding: 0 26px; gap: 8px; display: inline-flex; align-items: center; font: inherit; font-weight: 600; }
  .cat-search-go span { display: inline; }
  .cat-search-go svg { width: 18px; height: 18px; }
  .cat-near { width: auto; margin: 18px auto 0; display: flex; background: none; color: var(--ink); border: 1px solid var(--line); }
  .cat-sub { margin-top: 56px; }
  .city-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-page > .btn.ghost.block { max-width: 420px; margin: 8px auto 0; }
}@media (min-width: 901px) { .cat-page .cat-near.btn { display: flex; width: fit-content; margin: 18px auto 0; padding-inline: 26px; } .cat-page > .btn.ghost.block { display: flex; margin: 8px auto 0; } }

/* Résultats : ville de recherche + « Autour de moi », et titre visible sous la barre du haut */
#resultats { scroll-margin-top: calc(var(--header-h) + 20px); }
.res-where { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; flex-wrap: wrap; }
.res-city { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; }
.res-city > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.res-city input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); padding: 11px 0; outline: none; }
.res-city .ac-list { left: 0; right: 0; top: calc(100% + 6px); }
.res-near { display: inline-flex; align-items: center; gap: 6px; }
.res-near svg { width: 18px; height: 18px; }
/* Paiement Stripe intégré (acompte, abonnement) */
dialog.pay-modal { max-width: 600px; }
.pay-trust { margin: 0 0 16px; font-size: .86rem; color: var(--muted); }
#payMount { border-radius: 14px; overflow: hidden; background: #fff; min-height: 120px; }
@media (max-width: 640px) { dialog.pay-modal .dlg-body { padding: 22px 10px 24px; } dialog.pay-modal .dlg-title { font-size: 1.5rem; padding: 0 44px 0 8px; } .pay-trust { padding: 0 8px; } }
/* Spécialités du prestataire (Ma fiche) et formules rangées par spécialité (fiche) */
.spec-pick { border: 0; padding: 0; margin: 0; }
.spec-pick legend { font-size: .86rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
.spec-pick legend small { font-weight: 400; }
.spec-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.spec-chip input { accent-color: var(--accent); }
.spec-chip.on { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.spec-chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.formula-group { font: 600 .78rem/1.2 var(--sans, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 18px 0 8px; }
.formula-group:first-of-type { margin-top: 4px; }
/* Réseaux et WhatsApp avec leurs vrais logos (fiche prestataire) */
.btn.wa-btn { background: #25D366; border-color: #25D366; color: #fff; gap: 8px; display: inline-flex; align-items: center; }
.btn.wa-btn:hover { background: #1EBE5A; color: #fff; }
.btn.wa-btn svg, .btn.wa-share svg { width: 18px; height: 18px; flex: none; }
.btn.wa-share { border-color: var(--line); color: var(--ink); gap: 8px; display: inline-flex; align-items: center; }
.btn.wa-share:hover { background: var(--surface-2); color: var(--ink); }
.social-links a.soc { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; color: var(--ink); font-weight: 500; }
.soc-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.soc-ico svg { width: 17px; height: 17px; }
.soc-instagram .soc-ico { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.soc-tiktok .soc-ico { background: #010101; box-shadow: inset -1.5px 0 0 #FE2C55, inset 1.5px 0 0 #25F4EE; }
.soc-tiktok .soc-ico svg { filter: drop-shadow(1px 1px 0 #FE2C55) drop-shadow(-1px -1px 0 #25F4EE); }

/* Slogan */
.slogan { font: italic 500 clamp(1.45rem, 2.6vw, 1.9rem)/1.25 var(--serif); color: var(--gold, #C59B27); letter-spacing: .02em; margin: 14px 0 0; }
.slogan-sm { font-size: 1.05rem; margin: 12px 0 0; }
/* Logos des moyens de paiement (fiche, pied de page, fenêtre de paiement) */
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-badge { width: 46px; height: 30px; border-radius: 6px; background: #fff; border: 1px solid #E3DED6; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pay-badge svg { width: 38px; height: 24px; }
/* Espace Pro : boutons d'en-tête (Mon abonnement, Messages clients) */
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* « Signaler cette fiche » : lien discret sous les rubriques de la fiche */
.report-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 0; padding: 4px 0; color: var(--muted); font-size: .84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.report-link:hover { color: var(--danger, #c0392b); }
.report-link svg { width: 14px; height: 14px; }
/* Champ piège anti-robots (invisible pour les humains) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Administration : formules d'un prestataire (retirer / remettre en ligne) */
.admin-svc { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); }
.admin-svc:last-child { border-bottom: 0; }
.admin-svc .btn { flex: none; }

/* Espace Pro : raccourcis vers les rubriques (défilent à l'horizontale sur téléphone) */
.pro-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -12px 0 22px; padding-bottom: 2px; }
.pro-quick::-webkit-scrollbar { display: none; }
.pro-quick button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pro-quick button:hover { border-color: var(--accent); color: var(--accent); }
.pro-quick button:first-child { background: var(--accent); border-color: var(--accent); color: var(--bg, #fff); }
.pro-quick svg { width: 17px; height: 17px; }
.field.flash-target, #proHours.flash-target, #proGallery.flash-target { border-radius: 10px; }

/* Espace Pro : fiche cachée aux clients, étapes manquantes */
.vis-notice ul { list-style: none; margin: 10px 0 0; padding: 0; }
.vis-notice li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; }

/* Résultats : sur téléphone, filtres et tri repliés derrière « Filtres et tri » (les résultats arrivent tout de suite) */
.filter-more { display: contents; }
.filter-toggle { display: none; }
@media (max-width: 640px) {
  .filter-toggle { display: inline-flex; }
  .filter-bar:not(.open) .filter-more { display: none; }
  .filter-bar.open .filter-more { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 100%; }
  .filter-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
}
/* Fiche : acompte pas ou pas entièrement remboursable si le client annule */
.refund-warn { color: var(--warning, #B7791F); font-size: .86rem; line-height: 1.45; }
.empty-alert { margin-top: 18px; text-align: left; }
.empty-alert .field { margin: 10px 0; max-width: 260px; }

/* Critère de classement des résultats (obligation d'information) et pied de page des pages connexion / partenaire */
.rank-info { margin: -6px 0 14px; }
.rank-info a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mini-foot { text-align: center; padding: 22px 16px 30px; font-size: .82rem; color: rgba(245, 239, 232, .72); } /* fond nuit (footer) dans les deux thèmes */
.mini-foot a { color: inherit; }

/* Chiffres du haut de page (remplis après le chargement) : place réservée, le haut de page ne change pas de hauteur */
.hero-meta { min-height: 22px; }
@media (max-width: 640px) { .hero-meta { min-height: 72px; } }