/* ──────────────────────────────────────────────────────────────────────────
   Studio Crousillat — coiffure & institut, cours Victor Hugo,
   Salon-de-Provence.

   PARTI PRIS : un salon vit de deux objets, le TARIF et l'HORLOGE. La page les
   met devant, pas derrière une grande photo d'ambiance. Le tarif est composé
   comme un vrai tableau de prix, avec des points de conduite entre la
   prestation et son prix ; l'état d'ouverture est affiché en clair, calculé sur
   l'horloge de l'appareil, sans réseau.

   /!\ Deux pièges de mise volontairement écartés : le fond crème chaud avec
       serif à fort contraste et accent terre cuite (c'est la combinaison la
       plus attendue, et elle rendrait ce site interchangeable), et la grille de
       cartes arrondies à ombre grise. Ici : papier froid, prune, laiton sur les
       seuls chiffres, et des réglures de tarif au lieu de cartes.

   Ce fichier est autonome. Il n'importe RIEN de phenix-tech ni du site voisin.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/cormorant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/karla-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f5f4f1;   /* papier neutre, légèrement froid */
  --wash: #ece6e8;    /* bandeau doux */
  --line: #e2dcdd;
  --ink: #241d24;     /* prune-noir */
  --slate: #7a7279;
  --plum: #5b2e46;    /* accent */
  --plum-d: #41202f;
  --brass: #93793f;   /* chiffres et filets seulement, jamais un bouton */
  --r: 999px;         /* pilules */
  --rs: 3px;          /* surfaces */
  --gut: clamp(1.15rem, 5vw, 2rem);
  --sp: clamp(3rem, 9vw, 5rem);
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.22vw, 1.075rem)/1.7 'Karla', system-ui, sans-serif;
}

.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 42rem; }

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0.012em;
  line-height: 1.12;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 5.2vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.55rem); }
h3 { font-size: 1.22rem; }
p + p { margin-top: 0.9em; }
a { color: var(--plum-d); text-underline-offset: 3px; }

.skip-link { background: var(--ink); color: var(--paper); text-decoration: none; }

/* ── En-tête ────────────────────────────────────────────────────────────── */

.top { position: sticky; top: var(--demo-bar-h); z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 0.9rem; min-height: 3.6rem; }
.wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 1.4rem; letter-spacing: 0.03em; text-decoration: none; color: inherit; margin-right: auto;
}
.nav { display: flex; gap: 1.2rem; }
.nav a { font-size: 0.9rem; text-decoration: none; color: var(--slate); padding-block: 0.4rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brass); }

.nav-btn { display: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: var(--rs); }
.nav-btn i, .nav-btn::before, .nav-btn::after { content: ''; display: block; width: 1.05rem; height: 1px; background: var(--ink); margin: 4px auto; }

@media (max-width: 48rem) {
  .nav-btn { display: block; order: 3; }
  .nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--line); padding-block: 0.3rem; }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 0.7rem; }
  .top-in { flex-wrap: wrap; gap: 0.5rem; }
  .wordmark { font-size: 1.2rem; }
  .nav-btn { width: 2.25rem; height: 2.25rem; }
  /* La barre collante du bas porte deja « Prendre rendez-vous » : le doublon
     dans l'en-tete faisait passer le bouton de menu a la ligne. */
  .top .btn { display: none; }
}

/* ── Boutons : pilules ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: 0.55rem 1.5rem;
  border-radius: var(--r); font-family: 'Karla', sans-serif; font-weight: 500; font-size: 0.95rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color 200ms cubic-bezier(.22,1,.36,1), color 200ms cubic-bezier(.22,1,.36,1), border-color 200ms ease;
}
.btn--solid { background: var(--plum); color: #fff; }
.btn--solid:hover { background: var(--plum-d); }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }

/* ── Sections ───────────────────────────────────────────────────────────── */

.band { padding-block: var(--sp); }
.band--wash { background: var(--wash); }
.band--ink { background: var(--ink); color: #ece6e8; }
.band--ink h2 { color: #fff; }
.band--tight { padding-block: clamp(1.8rem, 5vw, 2.6rem); }
.lede { color: var(--slate); font-size: clamp(1.03rem, 0.97rem + 0.4vw, 1.18rem); max-width: 46ch; }
.band--ink .lede { color: #bdb2b8; }

/* ── Ouverture : le nom, une phrase, l'état d'ouverture ─────────────────── */

.opening { padding-block: clamp(2.4rem, 7vw, 4.25rem) clamp(1.8rem, 5vw, 2.75rem); }
.opening h1 { max-width: 11ch; }
.opening .lede { margin-top: 1.4rem; }

/* L'état d'ouverture est calculé sur l'horloge de l'appareil : c'est le premier
   renseignement que cherche quelqu'un qui tombe sur un salon, et c'est ce qu'une
   page Facebook rend le plus mal. */
.state {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--r); padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem;
}
.state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate); flex: none; }
.state[data-open="oui"] .dot { background: #4a7a4e; }
.state[data-open="non"] .dot { background: var(--brass); }

/* ── Tableau de tarifs : points de conduite, comme un vrai tarif ────────── */

.tariff { margin-top: 1.9rem; }
.tariff h3 {
  font-size: 1.06rem; padding-bottom: 0.55rem; margin-top: 2.1rem;
  border-bottom: 1px solid var(--brass);
}
.tariff h3:first-child { margin-top: 0; }
.tariff ul { display: grid; }
.tariff li {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 0 0.65rem;
  padding: 0.72rem 0; border-bottom: 1px solid var(--line);
}
.tariff .name { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.tariff .name b { font-weight: 500; }
/* Points de conduite : le trait caractéristique d'un tarif imprimé. */
.tariff .name i {
  flex: 1 1 auto; min-width: 1.5rem; height: 1px; align-self: center;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.tariff .dur { color: var(--slate); font-size: 0.85rem; white-space: nowrap; }
.tariff .price { font-weight: 500; color: var(--brass); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tariff .book { grid-column: 1 / -1; justify-self: start; margin-top: 0.35rem; }
.tariff .book button {
  font-size: 0.82rem; color: var(--plum-d); border-bottom: 1px solid currentColor; padding: 0 0 1px;
}
.tariff .book button:hover { color: var(--ink); }
.tva { margin-top: 1.4rem; font-size: 0.84rem; color: var(--slate); }

/* ── L'horloge de la semaine ────────────────────────────────────────────── */

.week { margin-top: 1.6rem; display: grid; gap: 0; max-width: 30rem; }
.week div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid rgba(236,230,232,.18); }
.week dt { font-weight: 500; }
.week dd { margin: 0; color: #bdb2b8; font-variant-numeric: tabular-nums; }
.week div[data-today="oui"] dt, .week div[data-today="oui"] dd { color: #fff; }
.week div[data-today="oui"] dt::before { content: '— '; color: var(--brass); }
.week .shut dd { color: #8d8289; }

/* ── Photos du lieu : une bande, pas une grille de cartes ───────────────── */

.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 1.9rem; }
@media (min-width: 46rem) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* height: auto est OBLIGATOIRE : l'attribut height du HTML est une indication de
   presentation qui ecrase l'aspect-ratio des qu'on pose width: 100%. */
.strip img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; border-radius: var(--rs); }
.strip figure { margin: 0; }
.strip figcaption { font-size: 0.82rem; color: var(--slate); margin-top: 0.4rem; }

/* ── L'équipe : pastilles typographiques, aucun visage ──────────────────── */

.team { display: grid; gap: 1.5rem; margin-top: 1.9rem; }
@media (min-width: 40rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team li { display: grid; grid-template-columns: 3.1rem 1fr; gap: 0 1rem; align-items: center; }
.team .badge {
  grid-row: span 2; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plum); color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; font-weight: 600;
}
.team h3 { font-size: 1.08rem; }
.team p { grid-column: 2; font-size: 0.9rem; color: var(--slate); line-height: 1.5; }

/* ── Avis ───────────────────────────────────────────────────────────────── */

.says { display: grid; gap: 1.9rem; margin-top: 1.9rem; }
@media (min-width: 52rem) { .says { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.says figure { margin: 0; }
.says blockquote {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.24rem; line-height: 1.42;
}
.says figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--slate); }

/* ── Prise de rendez-vous ───────────────────────────────────────────────── */

.rdv { margin-top: 1.9rem; border: 1px solid var(--line); border-radius: var(--rs); background: var(--paper); overflow: hidden; }
.rdv-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--wash); }
.rdv-head h2 { font-size: 1.3rem; margin-right: auto; }
.rdv-head p { font-size: 0.87rem; color: var(--slate); }
.rdv-body { padding: 1.2rem; }

.stepbar { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.8rem; color: var(--slate); margin-bottom: 1.2rem; }
.stepbar span { display: inline-flex; align-items: center; gap: 0.35rem; }
.stepbar span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.stepbar span[data-done="oui"] { color: var(--ink); }
.stepbar span[data-done="oui"]::before { background: var(--plum); }

.choices { display: grid; gap: 0.5rem; }
@media (min-width: 34rem) { .choices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.choices button {
  text-align: left; border: 1px solid var(--line); border-radius: var(--rs);
  padding: 0.7rem 0.9rem; background: var(--paper);
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.choices button:hover { border-color: var(--plum); }
.choices button[aria-pressed="true"] { border-color: var(--plum); background: var(--wash); }
.choices b { font-weight: 500; font-size: 0.94rem; }
.choices em { font-style: normal; color: var(--brass); font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.cal-head strong { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.25rem; }
.cal-nav { display: flex; gap: 0.3rem; }
.cal-nav button { width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 50%; line-height: 1; }
.cal-nav button:hover:not(:disabled) { border-color: var(--plum); }
.cal-nav button:disabled { opacity: 0.35; cursor: default; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .dow { font-size: 0.72rem; color: var(--slate); text-align: center; padding-bottom: 0.3rem; }
.cal button {
  aspect-ratio: 1; border-radius: 50%; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.cal button:hover:not(:disabled) { border-color: var(--plum); }
.cal button:disabled { color: #c3bcbe; cursor: default; }
.cal button[aria-pressed="true"] { background: var(--plum); color: #fff; }
.cal .pad { visibility: hidden; }

.slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.slots button { border: 1px solid var(--line); border-radius: var(--r); padding: 0.45rem 0.95rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.slots button:hover:not(:disabled) { border-color: var(--plum); }
.slots button:disabled { color: #c3bcbe; text-decoration: line-through; cursor: default; }
.slots button[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }

.recap { margin-top: 1.2rem; padding: 0.9rem 1rem; background: var(--wash); border-radius: var(--rs); font-size: 0.93rem; }
.recap b { font-weight: 500; }

/* ── Formulaires ────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.field { display: grid; gap: 0.3rem; }
.field label { font-weight: 500; font-size: 0.92rem; }
.field .hint { font-size: 0.82rem; color: var(--slate); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: var(--rs); background: #fff; padding: 0.62rem 0.8rem; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.pair { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.req { color: var(--plum); }
.check { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; align-items: start; font-size: 0.87rem; color: var(--slate); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; }

.done { border-left: 2px solid var(--plum); background: var(--wash); padding: 1.1rem 1.25rem; border-radius: var(--rs); margin-top: 1.2rem; }
.done h2 { font-size: 1.3rem; }
.done p { margin-top: 0.4rem; color: var(--slate); }

/* Barre collante mobile : sur un téléphone, « prendre rendez-vous » doit être
   atteignable au pouce à tout moment. */
.sticky-rdv {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  padding: 0.6rem var(--gut) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(245,244,241,.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.sticky-rdv .btn { width: 100%; }
@media (min-width: 48rem) { .sticky-rdv { display: none; } }
body.has-sticky { padding-bottom: 4.6rem; }
@media (min-width: 48rem) { body.has-sticky { padding-bottom: 0; } }

/* ── Colonne latérale et pied ───────────────────────────────────────────── */

.split { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .split { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } }
.aside dl { display: grid; gap: 0.9rem; }
.aside dt { font-weight: 500; font-size: 0.92rem; }
.aside dd { margin: 0; color: var(--slate); font-size: 0.92rem; }
.aside h2 { font-size: 1.3rem; margin-bottom: 0.9rem; }

.foot { background: var(--ink); color: #bdb2b8; padding-block: 2.6rem 2rem; font-size: 0.9rem; }
.foot a { color: var(--wash); }
.foot h2 { font-size: 1.15rem; color: #fff; margin-bottom: 0.6rem; }
.foot-top { display: grid; gap: 1.6rem; }
@media (min-width: 46rem) { .foot-top { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot ul { display: grid; gap: 0.35rem; }
.foot-legal { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(236,230,232,.16); font-size: 0.82rem; }

/* ── Pages de texte ─────────────────────────────────────────────────────── */

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.3rem; font-size: 1.6rem; }
.prose p, .prose li { color: var(--slate); }
.prose ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.3rem; margin-top: 0.6rem; }
.prose .tpl { border: 1px dashed var(--line); border-radius: var(--rs); padding: 1rem 1.15rem; margin-top: 1rem; background: var(--wash); }
.prose .tpl dt { font-weight: 500; color: var(--ink); }
.prose .tpl dd { margin: 0 0 0.6rem; color: var(--slate); }
.crumb { font-size: 0.85rem; color: var(--slate); padding-top: 1.3rem; }
.crumb a { color: var(--slate); }