/* Page d'attente - Joëlle Vadell */
@font-face { font-family: 'Gilda Display'; font-display: swap; src: url(../fonts/gilda-display-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'Gilda Display'; font-display: swap; src: url(../fonts/gilda-display-latin-ext.woff2) format('woff2'); unicode-range: U+0100-0151, U+0154-02BA; }
@font-face { font-family: 'Gabriela'; font-display: swap; src: url(../fonts/gabriela-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'Gabriela'; font-display: swap; src: url(../fonts/gabriela-latin-ext.woff2) format('woff2'); unicode-range: U+0100-0151, U+0154-02BA; }

:root { --lilac: #b4a2c0; --deep: #6d5780; --soft: #f1ecf4; --ink: #2f2f2f; --text: #4a4a4a; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font: 17px/1.65 'Gabriela', Georgia, serif; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: 'Gilda Display', Georgia, serif; font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(30px, 4vw, 42px); text-align: center; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
b { color: var(--ink); font-weight: 400; }
a { color: var(--deep); }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

.btn { display: inline-block; padding: 14px 28px; border: 2px solid var(--deep); border-radius: 99px; background: var(--deep); color: #fff; text-decoration: none; text-align: center; transition: background .25s, color .25s; }
.btn:hover { background: #57436a; }
.btn--line { background: #fff; color: var(--deep); }
.btn--line:hover { background: var(--soft); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

.hero { min-height: 92vh; min-height: 92svh; display: grid; place-items: center; padding: 32px 16px; background: #5d6a55 url(../images/hero-accueil.jpg) center/cover; }
.hero__card { max-width: 660px; padding: clamp(28px, 5vw, 52px); background: rgba(255, 255, 255, .95); border-radius: 8px; text-align: center; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.hero__name { color: var(--deep); font-size: 15px; }
.hero h1 { margin-bottom: 16px; font-size: clamp(36px, 6vw, 58px); }
.hero__note { margin-top: 18px; font-size: 15px; }

.essentials { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--deep); color: #fff; }
.essentials div { padding: 24px clamp(16px, 3vw, 36px); text-align: center; }
.essentials div + div { border-left: 1px solid rgba(255, 255, 255, .28); }
.essentials b { display: block; color: #fff; font: 22px/1.3 'Gilda Display', Georgia, serif; }

section:not(.essentials) { padding: clamp(52px, 8vw, 84px) 16px; }
.about { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; max-width: 900px; margin: 0 auto; }
.about img { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; }
.about h2 { margin-bottom: 14px; text-align: left; }

.band { background: var(--soft); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 34px auto 0; }
.cards article { padding: 26px; background: #fff; border-radius: 8px; }
.cards h3 { font-size: 25px; }
.price { margin: 4px 0 12px; color: var(--deep); font: 32px/1.2 'Gilda Display', Georgia, serif; }
.pay { max-width: 760px; margin: 28px auto 0; text-align: center; }

.reasons ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; max-width: 900px; margin: 34px auto 0; padding: 0; list-style: none; }
.reasons li b { display: block; font: 22px/1.3 'Gilda Display', Georgia, serif; }
.reasons__more { margin-top: 26px; text-align: center; }
.warning { max-width: 720px; margin: 22px auto 0; padding: 16px 20px; border-left: 4px solid var(--deep); background: var(--soft); color: var(--ink); }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 34px auto 0; }
.quotes blockquote { margin: 0; padding: 26px; background: #fff; border-radius: 8px; }
.quotes cite { color: var(--deep); font-style: normal; }

.visit { max-width: 760px; margin: 0 auto; text-align: center; }
.visit h2 { margin-bottom: 14px; }

footer { padding: 32px 16px; background: var(--ink); color: #ddd; text-align: center; font-size: 15px; }
footer b { color: #fff; }
footer a { color: #d9cce2; }

.callbar { display: none; }

@media (max-width: 800px) {
  body { padding-bottom: 54px; }
  .essentials, .cards, .quotes, .reasons ul { grid-template-columns: minmax(0, 1fr); }
  .essentials div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
  .about { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .about img { width: 180px; height: 180px; }
  .about h2 { text-align: center; }
  .actions .btn { width: 100%; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0; z-index: 10; padding-bottom: env(safe-area-inset-bottom); background: var(--deep); }
  .callbar a { padding: 15px 8px; color: #fff; text-align: center; text-decoration: none; }
  .callbar a + a { border-left: 1px solid rgba(255, 255, 255, .35); }
}