/* Polices chargées via dans le de chaque page (préconnexion +
feuille directe, pas d'@import qui chaîne une requête bloquante derrière
le parsing de ce fichier — voir docs/plans/promos-et-identite-visuelle.md,
Lot 8, constat 16). */
/* ── Layout de base ─────────────────────────────────────────────────────── */
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--space-md);
}
section { position: relative; }
.section-head {
text-align: center;
max-width: 560px;
margin: 0 auto var(--space-lg);
}
.section-head h2 { margin-top: var(--space-xs); }
.section-head p { margin-top: var(--space-sm); color: var(--text-dim); font-size: 1rem; }
/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem var(--space-md);
background: var(--surface-translucent);
backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar__brand { display: flex; align-items: center; gap: 0.6rem; }
.topbar__brand img { height: 34px; width: auto; display: block; }
.topbar__brand span {
font-family: var(--ff-display);
font-size: 1.15rem;
letter-spacing: 0.02em;
color: var(--text);
}
.topbar__brand span strong { color: var(--gold-ink); font-weight: 600; }
.topbar__nav { display: flex; gap: var(--space-lg); }
.topbar__nav a {
font-size: var(--fs-small);
letter-spacing: 0.04em;
color: var(--text-dim);
transition: color 0.2s;
}
.topbar__nav a:hover { color: var(--gold-ink); }
@media (max-width: 720px) {
.topbar__nav { display: none; }
}
/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 1.9rem;
border-radius: 999px;
font-family: var(--ff-body);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.02em;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s, color 0.2s;
min-height: 48px;
}
.btn:active { transform: scale(0.97); }
/* Remplissage plein + bordure --gold-ink (règle 3 : un contrôle rempli d'or
a besoin d'une limite ≥ 3:1, l'or seul contre --surface échoue à 2,05:1). */
.btn--gold {
background: var(--gold);
border-color: var(--gold-ink);
color: var(--text-on-accent);
}
.btn--gold:hover { box-shadow: var(--shadow-gold); }
.btn--ghost {
background: transparent;
border-color: var(--line-strong);
color: var(--text);
}
.btn--ghost:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.btn--navy {
background: linear-gradient(135deg, var(--navy-soft), var(--navy));
color: var(--text-on-inv);
}
.btn--navy:hover { box-shadow: var(--shadow-navy); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding: var(--space-xl) var(--space-md);
}
/* Texture décorative (Lot 12, docs/plans/promos-et-identite-visuelle.md) —
matière assumée (mockup IA autorisé, jamais présentée comme un produit
réel — alt="" + aria-hidden). Opacité très faible : sur fond clair une
texture ASSOMBRIT (inverse de l'hypothèse sombre initiale), la marge de
contraste sous le h1 doit rester large. */
.hero__texture {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0.1;
mix-blend-mode: multiply;
pointer-events: none;
}
.hero__texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un halo lumineux n'existe pas sur fond clair (Lot 9, partie 2, item 1) —
remplacé par un voile chaud, sans le rendu "tache" d'un halo sombre. */
.hero__halo {
position: absolute;
top: 50%; left: 50%;
width: min(900px, 140vw);
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle, var(--surface-warm) 0%, transparent 65%);
animation: breathe 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes breathe {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.06); }
}
/* Particules zellige flottantes — motif navy discret (Lot 9, item 2 : un
ornement doit être plus foncé et plus discret sur fond clair). */
.hero__particle {
position: absolute;
width: 26px; height: 26px;
background-color: var(--navy);
-webkit-mask-image: var(--zellige-mask);
mask-image: var(--zellige-mask);
-webkit-mask-size: 26px 26px;
mask-size: 26px 26px;
-webkit-mask-position: -47px -47px;
mask-position: -47px -47px;
opacity: 0.18;
animation: drift 14s ease-in-out infinite;
pointer-events: none;
}
.hero__particle:nth-child(1) { top: 18%; left: 12%; animation-duration: 16s; }
.hero__particle:nth-child(2) { top: 68%; left: 8%; animation-duration: 12s; animation-delay: -3s; }
.hero__particle:nth-child(3) { top: 24%; right: 10%; animation-duration: 18s; animation-delay: -6s; }
.hero__particle:nth-child(4) { top: 70%; right: 14%; animation-duration: 13s; animation-delay: -1s; }
.hero__particle:nth-child(5) { top: 45%; left: 4%; animation-duration: 15s; animation-delay: -8s; width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
.hero__particle:nth-child(6) { top: 40%; right: 5%; animation-duration: 17s; animation-delay: -4s; width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
@keyframes drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(14px, -20px) rotate(20deg); }
}
/* Médaillon vidéo (Lot 11) : la vidéo garde son propre fond papier texturé
(décision client — pas de détourage mix-blend-mode:multiply, le grain
resterait visible). Présentée comme un médaillon encadré, pas fondue
dans la page : cercle, filet, ombre portée. */
.hero__emblem {
position: relative;
width: 132px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
opacity: 0;
animation: emblemIn 1.1s var(--ease-out) 0.1s forwards;
}
.hero__emblem img,
.hero__emblem video { width: 100%; height: auto; display: block; cursor: pointer; }
@keyframes emblemIn {
from { opacity: 0; transform: scale(0.85) rotate(-6deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.hero__eyebrow { opacity: 0; margin-top: var(--space-md); animation: rise 0.8s var(--ease-out) 0.5s forwards; }
.hero h1 {
font-size: var(--fs-hero);
max-width: 15ch;
margin-top: var(--space-sm);
opacity: 0;
animation: rise 0.9s var(--ease-out) 0.65s forwards;
}
.hero h1 em {
font-style: italic;
color: var(--gold-ink);
}
.hero p.hero__sub {
margin-top: var(--space-sm);
max-width: 38ch;
color: var(--text-dim);
font-size: 1.1rem;
opacity: 0;
animation: rise 0.9s var(--ease-out) 0.8s forwards;
}
.hero__ctas {
margin-top: var(--space-lg);
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
justify-content: center;
opacity: 0;
animation: rise 0.9s var(--ease-out) 0.95s forwards;
}
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Prestations (vitrine éditoriale) ──────────────────────────────────── */
.prestations-list { max-width: 640px; margin: 0 auto; }
.prestation-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
padding: 1.1rem 0;
border-bottom: 1px solid var(--line);
}
.prestation-row:first-child { border-top: 1px solid var(--line); }
.prestation-row__nom { font-family: var(--ff-display); font-size: 1.25rem; }
/* Catalogue groupé par catégorie (comme en DB) — sans prix, replié par défaut.
Densité volontairement serrée : ces accordéons sont d'abord pensés mobile
(formulaire de RDV en particulier), le desktop hérite de la même échelle. */
.categorie-accordeon {
border-bottom: 1px solid var(--line);
}
.categorie-accordeon:first-child { border-top: 1px solid var(--line); }
.categorie-accordeon + .categorie-accordeon { margin-top: 0; }
.categorie-group__titre {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
font-family: var(--ff-body);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-ink);
padding: 0.65rem 0.2rem;
cursor: pointer;
list-style: none;
min-height: 40px; /* zone de tap confortable malgré le padding réduit */
}
.categorie-group__titre::-webkit-details-marker { display: none; }
.categorie-group__titre::after {
content: '+';
font-family: var(--ff-body);
font-size: 1rem;
color: var(--text-dim);
transition: transform 0.2s;
flex-shrink: 0;
}
.categorie-accordeon[open] > .categorie-group__titre::after { content: '−'; }
.categorie-accordeon .prestation-row {
padding: 0.55rem 0;
}
.categorie-accordeon .prestation-row:first-child { border-top: 1px solid var(--line); }
.categorie-accordeon .prestation-row__nom { font-size: 1rem; }
.categorie-accordeon .chip-group { padding-bottom: 0.65rem; gap: 0.4rem; }
.categorie-accordeon .chip { padding: 0.4rem 0.85rem; font-size: 0.82rem; min-height: 34px; }
.catalogue-cta { text-align: center; margin-top: var(--space-md); }
@media (max-width: 480px) {
.categorie-group__titre { font-size: 0.66rem; padding: 0.55rem 0.1rem; }
.categorie-accordeon .prestation-row { padding: 0.45rem 0; }
.categorie-accordeon .prestation-row__nom { font-size: 0.92rem; }
.categorie-accordeon .chip-group { gap: 0.35rem; }
.categorie-accordeon .chip { padding: 0.35rem 0.7rem; font-size: 0.78rem; min-height: 32px; }
}
/* ── Créneaux horaires — grille compacte (RDV, étape 1) ───────────────────── */
.heures-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.4rem;
}
.heures-grid .chip--heure {
min-width: 0;
width: 100%;
padding: 0.5rem 0.3rem;
font-size: 0.82rem;
min-height: 38px;
}
@media (min-width: 480px) {
.heures-grid { grid-template-columns: repeat(6, 1fr); }
}
.creneaux-loading,
.creneaux-empty {
grid-column: 1 / -1;
text-align: center;
padding: 1rem 0.5rem;
color: var(--text-dim);
font-size: 0.88rem;
}
/* ── Prestations — lignes compactes à cocher (RDV, étape 2) ────────────────
Remplace les chips pilules par une liste type "checklist", plus dense et
plus rapide à scanner que des pastilles de largeur variable. */
.prestation-select-list { padding-bottom: 0.5rem; }
.prestation-select-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
width: 100%;
padding: 0.6rem 0.2rem;
border: none;
border-top: 1px solid var(--line);
background: transparent;
color: var(--text-dim);
font-family: var(--ff-body);
font-size: 0.92rem;
text-align: left;
cursor: pointer;
min-height: 40px;
}
.prestation-select-row:hover { color: var(--text); }
.prestation-select-row.is-active { color: var(--gold-ink); }
.prestation-select-row__nom { flex: 1; }
.prestation-select-row__duree {
flex-shrink: 0;
font-size: 0.78rem;
color: var(--text-dim);
font-family: var(--ff-mono);
}
.prestation-select-row__check {
width: 20px;
height: 20px;
border-radius: 6px;
border: 1px solid var(--line-strong);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.prestation-select-row.is-active .prestation-select-row__check {
background: var(--gold);
border-color: var(--gold-ink);
}
.prestation-select-row.is-active .prestation-select-row__check::after {
content: '✓';
color: var(--text-on-accent);
font-size: 0.68rem;
line-height: 1;
}
/* ── Sélecteur de prestations — onglets + recherche + panier épinglé ──────
Remplace les accordéons empilés : la page ne s'allonge plus quand on
change de catégorie (la liste interne défile, pas la page), et le panier
de chips reste visible sans avoir à redescendre pour vérifier ses choix. */
.prestations-picker {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-raised);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* ── Bloc « en promotion » (Lot 5, docs/plans/promos-et-identite-visuelle.md)
Un encadré, pas une catégorie de plus : fond légèrement distinct + filet
or, toujours en tête, avant la recherche. Contrastes validés d'avance
(Lot 5) : navy sur beige 10,65:1, prix barré --text-dim sur beige 6,04:1,
badge or plein à texte navy 5,65:1. */
.prestations-picker__promos {
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--line-gold);
background: var(--surface-warm);
}
.prestations-picker__promos-titre {
margin: 0 0 0.3rem;
font-family: var(--ff-body);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-ink);
}
.prestation-select-row--promo { border-top: 1px solid var(--line-gold); }
.prestation-select-row--promo:first-of-type { border-top: none; }
.prestation-select-row__prix {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--ff-mono);
font-size: 0.78rem;
white-space: nowrap;
}
.prestation-select-row__prix s { color: var(--text-dim); font-weight: 400; }
.prestation-select-row__badge {
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: var(--gold);
color: var(--text-on-accent);
font-size: 0.68rem;
font-weight: 600;
}
/* ── Un picker par personne (nb_personnes > 1) — chaque personne dans son
propre , la première dépliée par défaut, les suivantes repliées
pour ne pas noyer l'écran (docs/plans/rdv-multi-personnes.md, Lot 6). ── */
.personnes-pickers { display: flex; flex-direction: column; gap: 0.7rem; }
.personne-accordeon {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.personne-accordeon__titre {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 0.75rem 0.9rem;
cursor: pointer;
list-style: none;
font-weight: 600;
}
.personne-accordeon__titre::-webkit-details-marker { display: none; }
.personne-accordeon__titre::after {
content: '+';
font-family: var(--ff-body);
font-size: 1.1rem;
color: var(--text-dim);
flex-shrink: 0;
}
.personne-accordeon[open] > .personne-accordeon__titre::after { content: '−'; }
.personne-accordeon__corps { padding: 0 0.9rem 0.9rem; }
.personne-accordeon .prestations-picker { border-radius: var(--radius); }
.prestations-picker__search {
padding: 0.6rem 0.7rem;
border-bottom: 1px solid var(--line);
}
.prestations-picker__search-input {
width: 100%;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 999px;
color: var(--text);
font-family: var(--ff-body);
font-size: 0.9rem;
padding: 0.55rem 0.9rem;
min-height: 40px;
}
.prestations-picker__search-input::placeholder { color: var(--text-dim); }
.prestations-picker__search-input:focus { border-color: var(--gold-ink); outline: none; }
.prestations-picker__selected {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.6rem 0.7rem;
border-bottom: 1px solid var(--line);
background: var(--wash-gold-soft);
}
.prestation-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.5rem 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--gold-ink);
background: var(--gold);
color: var(--text-on-accent);
font-family: var(--ff-body);
font-size: 0.8rem;
font-weight: 600;
min-height: 32px;
cursor: pointer;
}
.prestation-chip:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--text-on-inv); }
.prestation-chip__remove { font-family: var(--ff-mono); font-size: 0.9rem; line-height: 1; opacity: 0.7; }
.prestation-chip:hover .prestation-chip__remove { opacity: 1; }
.prestations-picker__tabs {
display: flex;
gap: 0.4rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.55rem 0.7rem;
border-bottom: 1px solid var(--line);
}
.prestations-picker__tabs::-webkit-scrollbar { display: none; }
.chip--categorie { flex-shrink: 0; white-space: nowrap; padding: 0.45rem 0.9rem; font-size: 0.78rem; }
.chip--categorie__badge { font-family: var(--ff-mono); font-size: 0.68rem; margin-left: 0.35rem; opacity: 0.75; }
.prestations-picker__list {
max-height: 46vh;
overflow-y: auto;
padding: 0 0.7rem;
}
@media (min-width: 768px) {
.prestations-picker__list { max-height: 320px; }
}
.prestations-picker__list .prestation-select-row:first-child { border-top: none; }
.prestations-picker__empty { padding: 1.2rem 0.9rem; text-align: center; color: var(--text-dim); font-size: 0.88rem; }
@keyframes prestation-row-confirm {
0% { background: var(--wash-gold-strong); }
100% { background: transparent; }
}
.prestation-select-row.is-just-added { animation: prestation-row-confirm 0.5s var(--ease-out); }
@media (max-width: 480px) {
.prestations-picker__list { max-height: 42vh; }
.chip--categorie { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
}
/* ── Assistant en étapes (RDV) ──────────────────────────────────────────── */
.wizard-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-bottom: var(--space-lg);
}
.wizard-step {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--ff-body);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.wizard-step__num {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--text-dim);
font-family: var(--ff-body);
font-size: 0.75rem;
flex-shrink: 0;
transition: all 0.2s;
}
.wizard-step.is-active { color: var(--text); }
.wizard-step.is-active .wizard-step__num { border-color: var(--gold-ink); color: var(--gold-ink); }
.wizard-step.is-done .wizard-step__num { background: var(--gold); border-color: var(--gold-ink); color: var(--text-on-accent); }
.wizard-connector { width: 1.6rem; height: 1px; background: var(--line-strong); flex-shrink: 0; }
@media (max-width: 480px) {
.wizard-step span:not(.wizard-step__num) { display: none; }
.wizard-connector { width: 1rem; }
}
.wizard-panel { animation: wizard-fade-in 0.25s var(--ease-out); }
@keyframes wizard-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.wizard-actions--end { justify-content: flex-end; }
.wizard-actions .btn { width: auto; min-width: 130px; }
.wizard-count { color: var(--gold-ink); font-family: var(--ff-mono); font-size: 0.7rem; text-transform: none; letter-spacing: 0.02em; }
.wizard-hint { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.4rem; }
.wizard-hint--ok { color: var(--success); font-weight: 600; }
.wizard-recap {
font-size: var(--fs-small);
color: var(--text-dim);
background: var(--surface-warm);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0.65rem 0.9rem;
margin-bottom: var(--space-md);
}
/* ── Confirmation de RDV — écran dédié, pas un simple message discret ────── */
.booking-confirm { position: relative; text-align: center; padding: var(--space-lg) var(--space-sm) var(--space-md); overflow: hidden; }
.booking-confirm__texture {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.12;
mix-blend-mode: multiply;
}
.booking-confirm__texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-confirm__icon {
width: 60px;
height: 60px;
margin: 0 auto var(--space-sm);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gold);
color: var(--text-on-accent);
font-size: 1.6rem;
font-weight: 700;
box-shadow: var(--shadow-gold);
animation: booking-confirm-pop 0.45s var(--ease-out);
}
@keyframes booking-confirm-pop {
from { transform: scale(0.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.booking-confirm__title { margin-top: var(--space-xs); }
.booking-confirm__title span { color: var(--gold-ink); }
.booking-confirm__text { color: var(--text-dim); margin-top: 0.4rem; }
.booking-confirm__recap {
text-align: left;
max-width: 420px;
margin: var(--space-md) auto;
background: var(--surface-warm);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.3rem var(--space-md);
font-size: 0.9rem;
}
.booking-confirm__recap-row {
display: flex;
justify-content: space-between;
gap: var(--space-sm);
padding: 0.55rem 0;
border-top: 1px solid var(--line);
color: var(--text-dim);
}
.booking-confirm__recap-row:first-child { border-top: none; }
.booking-confirm__recap-row strong { color: var(--text); font-weight: 600; text-align: right; }
/* ── Rail de dates (30 jours glissants) ────────────────────────────────── */
.rail-dates {
display: flex;
gap: 0.6rem;
overflow-x: auto;
padding: 0.4rem 0.2rem 1.1rem;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.rail-dates::-webkit-scrollbar { height: 6px; }
.rail-dates::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.rail-day {
scroll-snap-align: start;
flex: none;
width: 62px;
padding: 0.85rem 0.4rem;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface-raised);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.rail-day:hover { border-color: var(--gold-ink); transform: translateY(-2px); }
.rail-day__dow { font-family: var(--ff-body); font-size: 0.68rem; text-transform: uppercase; color: var(--text-dim); }
.rail-day__num { font-family: var(--ff-display); font-size: 1.5rem; color: var(--text); }
.rail-day__mois { font-family: var(--ff-body); font-size: 0.65rem; color: var(--text-dim); }
.rail-day--today { border-color: var(--gold-ink); }
.rail-day--today .rail-day__num { color: var(--gold-ink); }
.rail-day--selected {
background: linear-gradient(160deg, var(--navy-soft), var(--navy));
border-color: var(--navy-soft);
}
.rail-day--selected .rail-day__dow,
.rail-day--selected .rail-day__mois { color: var(--text-on-inv); }
.rail-day--selected .rail-day__num { color: var(--text-on-inv); }
/* ── Promotions (docs/plans/promos-et-identite-visuelle.md, Lot 4 ; refonte
du badge 2026-08-12 — remplace le point plat par un médaillon "✦", plus
soigné) ── Liseré fin, pas de remplissage plein : le rail doit rester
lisible avec 30 jours marqués, seul le médaillon porte l'information. */
.rail-day--promo { border-color: var(--gold-ink); position: relative; }
.rail-day__promo-badge {
position: absolute;
top: -7px;
right: -6px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 32% 28%, var(--gold) 0%, var(--gold-ink) 100%);
box-shadow: var(--shadow-gold), 0 0 0 2px var(--surface-raised);
font-size: 0.62rem;
line-height: 1;
color: var(--text-on-accent);
}
.rail-day__promo-badge::before { content: '✦'; }
@media (prefers-reduced-motion: no-preference) {
.rail-day__promo-badge { animation: promoBadgeShimmer 2.6s ease-in-out infinite; }
}
@keyframes promoBadgeShimmer {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* ── Jours complets — mise en avant marketing (retour utilisateur 2026-08-12) :
"victime de son succès" doit se lire comme un signe de qualité, pas comme
une erreur grisée. Ruban navy en pointe haute + trame diagonale discrète
sur la carte (jamais un simple opacity: 0.4 qui lirait comme "désactivé"). */
.rail-day--complet { position: relative; }
.rail-day--complet::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius);
background: repeating-linear-gradient(135deg, transparent 0 8px, var(--wash-navy) 8px 9px);
pointer-events: none;
}
.rail-day__complet-badge {
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.22rem;
padding: 0.16rem 0.5rem;
border-radius: 999px;
background: var(--navy);
color: var(--text-on-inv);
font-family: var(--ff-body);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: var(--shadow-sm);
z-index: 1;
}
.rail-day__complet-badge::before { content: '✦'; font-size: 0.6rem; }
.promo-jour {
margin-top: 0.6rem;
padding: 0.7rem 0.9rem;
border-radius: var(--radius);
border: 1px solid var(--line-gold);
background: var(--surface-warm);
animation: promoJourIn 0.25s ease-out;
}
.promo-jour__texte { margin: 0; font-size: 0.85rem; color: var(--text); }
@keyframes promoJourIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.promo-jour { animation: none; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Formulaire (RDV + carte) ──────────────────────────────────────────── */
.panel {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-lg);
}
.field { margin-bottom: var(--space-md); }
.field label {
display: block;
font-family: var(--ff-body);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 0.5rem;
}
.field input[type="text"],
.field input[type="tel"] {
width: 100%;
padding: 0.9rem 1rem;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 10px;
color: var(--text);
font-family: var(--ff-body);
font-size: 1rem;
min-height: 48px;
transition: border-color 0.2s;
}
.field input:focus { border-color: var(--gold-ink); outline: none; }
.field input::placeholder { color: var(--text-dim); }
/* Choix déjà/nouvelle cliente, avant nom + téléphone (retour utilisateur
2026-08-12 : "avant de saisir nom et numéro de tel, trancher déjà
cliente / nouvelle cliente"). Même logique de contraste que .btn--gold
ci-dessus une fois l'option active (fond plein --gold, bordure --gold-ink). */
.segmented { display: flex; gap: 0.5rem; }
.segmented__opt {
flex: 1;
padding: 0.8rem 0.6rem;
border-radius: 10px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
font-family: var(--ff-body);
font-size: 0.92rem;
min-height: 48px;
cursor: pointer;
transition: all 0.2s;
}
.segmented__opt:hover { border-color: var(--gold-ink); }
.segmented__opt.is-active { background: var(--gold); border-color: var(--gold-ink); color: var(--text-on-accent); font-weight: 600; }
/* Saisie du numéro de carte : préfixe "ARIANE-FID-" figé + 4 chiffres à saisir */
.input-prefixed {
display: flex;
align-items: stretch;
border: 1px solid var(--line-strong);
border-radius: 10px;
overflow: hidden;
background: var(--surface);
transition: border-color 0.2s;
}
.input-prefixed:focus-within { border-color: var(--gold-ink); }
.input-prefixed__prefix {
display: flex;
align-items: center;
padding: 0 0 0 1rem;
font-family: var(--ff-mono);
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--text-dim);
white-space: nowrap;
}
.input-prefixed input {
width: 100%;
border: none !important;
background: transparent !important;
padding: 0.9rem 1rem 0.9rem 0.35rem !important;
color: var(--text);
font-family: var(--ff-mono);
font-size: 1rem;
letter-spacing: 0.08em;
min-height: 48px;
}
.input-prefixed input:focus { outline: none; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
padding: 0.55rem 1.05rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--text-dim);
font-size: 0.88rem;
cursor: pointer;
transition: all 0.2s;
min-height: 40px;
}
.chip:hover { border-color: var(--gold-ink); color: var(--text); }
.chip.is-active { background: var(--gold); border-color: var(--gold-ink); color: var(--text-on-accent); font-weight: 600; }
.stepper {
display: inline-flex;
align-items: center;
gap: var(--space-md);
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 0.4rem 0.6rem;
}
.stepper button {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--gold-ink);
font-size: 1.1rem;
cursor: pointer;
}
.stepper button:hover { background: var(--gold); border-color: var(--gold-ink); color: var(--text-on-accent); }
.stepper__val { font-family: var(--ff-mono); min-width: 1.5ch; text-align: center; }
.form-msg { margin-top: var(--space-sm); font-size: var(--fs-small); }
.form-msg--error { color: var(--error); }
.form-msg--success { color: var(--success); }
/* ── Carte de fidélité (le "wow") — surface volontairement inversée, reste
sombre sur la page claire : un objet premium, pas un oubli de migration
(Lot 9, partie 2, item 4). ──────────────────────────────────────────── */
.loyalty-stage {
display: flex;
justify-content: center;
padding: var(--space-lg) 0;
perspective: 1200px;
}
.card-bank {
width: min(380px, 88vw);
aspect-ratio: 1.586;
border-radius: 20px;
position: relative;
padding: 1.6rem 1.7rem;
color: var(--inv-text);
background:
radial-gradient(120% 140% at 15% 10%, var(--inv-wash-gold), transparent 55%),
radial-gradient(120% 140% at 90% 100%, var(--inv-wash-navy), transparent 60%),
linear-gradient(150deg, var(--inv-surface-2) 0%, var(--inv-surface) 100%);
border: 1px solid var(--inv-border);
box-shadow: var(--shadow-deep), inset 0 1px 0 var(--inv-highlight);
display: flex;
flex-direction: column;
justify-content: space-between;
transform-style: preserve-3d;
transition: transform 0.15s var(--ease-out);
backdrop-filter: blur(2px);
}
.card-bank::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--gold);
-webkit-mask-image: var(--zellige-mask);
mask-image: var(--zellige-mask);
-webkit-mask-size: 90px 90px;
mask-size: 90px 90px;
opacity: 0.14;
mix-blend-mode: overlay;
}
.card-bank__top { display: flex; align-items: center; justify-content: space-between; }
.card-bank__brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--ff-display); font-size: 1rem; letter-spacing: 0.02em; }
.card-bank__brand img { height: 24px; width: auto; }
.card-bank__brand strong { color: var(--gold); }
.card-bank__chip {
width: 30px; height: 22px;
border-radius: 5px;
background-color: var(--gold);
-webkit-mask-image: var(--zellige-mask);
mask-image: var(--zellige-mask);
-webkit-mask-size: 30px 30px;
mask-size: 30px 30px;
-webkit-mask-position: -45px -45px;
mask-position: -45px -45px;
border: 1px solid var(--inv-line);
opacity: 0.9;
}
.card-bank__number {
font-family: var(--ff-mono);
font-size: clamp(1rem, 4vw, 1.25rem);
letter-spacing: 0.08em;
color: var(--inv-text);
}
.card-bank__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); }
.card-bank__name { font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inv-text-dim); }
.card-bank__name strong { display: block; font-family: var(--ff-body); font-size: 1rem; color: var(--inv-text); text-transform: none; margin-top: 0.15rem; }
.card-bank__gauge { width: 100%; margin-top: 0.6rem; }
.card-bank__gauge-track {
height: 4px;
border-radius: 999px;
background: var(--inv-track);
overflow: hidden;
}
.card-bank__gauge-fill {
height: 100%;
background: linear-gradient(90deg, var(--navy-soft), var(--gold));
border-radius: 999px;
transition: width 0.6s var(--ease-out);
}
.card-bank__gauge-label {
display: flex;
justify-content: space-between;
font-family: var(--ff-mono);
font-size: 0.65rem;
color: var(--inv-text-dim);
margin-top: 0.35rem;
}
.loyalty-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: var(--space-lg); }
.loyalty-tabs button {
padding: 0.6rem 1.3rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--text-dim);
cursor: pointer;
font-size: 0.88rem;
}
.loyalty-tabs button.is-active { background: var(--gold); border-color: var(--gold-ink); color: var(--text-on-accent); font-weight: 600; }
.code-reveal {
text-align: center;
padding: var(--space-lg);
background: var(--surface-warm);
border: 1px dashed var(--line-gold);
border-radius: var(--radius-lg);
margin-top: var(--space-md);
}
.code-reveal__code {
font-family: var(--ff-mono);
font-size: 2rem;
letter-spacing: 0.15em;
color: var(--gold-ink);
margin: var(--space-sm) 0;
}
.code-reveal__warning { color: var(--text-dim); font-size: var(--fs-small); max-width: 40ch; margin: 0 auto; }
/* ── Admin : en-tête + menu (Demandes RDV / Cartes fidélité / Prospects) ──
Retour utilisateur : l'ancien .admin-nav (3 liens texte discrets, sans
cadre) n'était pas assez visible/intuitif. Remplacé par une vraie barre
de navigation en onglets, collante en haut de page, partagée par les 3
écrans admin-rdv/admin-fidelite/admin-prospects. */
.admin-topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
padding: 0.75rem var(--space-md);
background: var(--surface-translucent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.admin-topbar__brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ff-display);
font-size: 1.05rem;
color: var(--text);
flex-shrink: 0;
}
.admin-topbar__brand img { height: 28px; width: auto; display: block; }
.admin-topbar__brand strong { color: var(--gold-ink); font-weight: 600; }
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-nav a {
display: inline-flex;
align-items: center;
padding: 0.55rem 1.1rem;
min-height: 40px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-dim);
transition: all 0.2s;
}
.admin-nav a:hover { color: var(--text); background: var(--surface-warm); }
.admin-nav a.is-active { color: var(--gold-ink); background: var(--surface-warm); border-color: var(--line-gold); }
/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
padding: var(--space-xl) var(--space-md) var(--space-lg);
text-align: center;
border-top: 1px solid var(--line);
margin-top: var(--space-xl);
}
footer .footer__logo { width: 44px; margin: 0 auto var(--space-sm); display: block; }
footer address { font-style: normal; color: var(--text-dim); font-size: var(--fs-small); line-height: 1.9; }
footer .footer__brand { font-family: var(--ff-display); font-size: 1.3rem; margin-bottom: var(--space-sm); }
/* ── Contact & réseaux (docs/plans/promos-et-identite-visuelle.md, Lot 6) ── */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-sm);
margin-top: var(--space-md);
}
.contact-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
padding: var(--space-md);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-raised);
box-shadow: var(--shadow-sm);
color: var(--text);
text-decoration: none;
transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.contact-card:hover, .contact-card:focus-visible {
border-color: var(--gold-ink);
transform: translateY(-2px);
background: var(--surface-warm);
}
/* Filet de matière en coin (Lot 12) — très discret, décoratif pur (CSS
background : invisible pour les technologies d'assistance, pas besoin
d'alt). image-set() donne l'AVIF avec repli WebP natif. */
.contact-card {
position: relative;
overflow: hidden;
}
.contact-card::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 56px;
height: 56px;
background-image: image-set(
url('/assets/img/texture-marbre-or-2.avif') type('image/avif'),
url('/assets/img/texture-marbre-or-2.webp') type('image/webp')
);
background-size: cover;
opacity: 0.14;
mix-blend-mode: multiply;
pointer-events: none;
}
.contact-card__icone { color: var(--gold-ink); }
.contact-card__libelle { font-family: var(--ff-display); font-size: 1.1rem; }
.contact-card__handle { color: var(--text-dim); font-size: var(--fs-small); }
.contact-card__cta { margin-top: 0.3rem; font-family: var(--ff-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-ink); }
.social-row {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin: var(--space-sm) 0;
}
.social-row__lien {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--text-dim);
transition: border-color 0.2s, color 0.2s;
}
.social-row__lien:hover, .social-row__lien:focus-visible { border-color: var(--gold-ink); color: var(--gold-ink); }
.qr-details { margin-top: var(--space-md); text-align: center; }
.qr-details summary {
cursor: pointer;
font-family: var(--ff-body);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gold-ink);
}
.qr-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-md);
}
/* Les QR ne servent qu'en présentiel/desktop : repliés par défaut, quel
que soit l'écran (comportement natif, fiable partout). */
/* Fond du QR : blanc pur, EXCEPTION nommée de la règle "tokens uniquement"
(contrainte de scannabilité, jamais esthétique — voir scripts/generer-
qr.js et test/public/palette.test.js). Un filet --line l'entoure pour ne
pas flotter sur --surface (1,09:1, règle 5). */
.qr {
position: relative;
width: 120px;
height: 120px;
padding: 8px;
background: var(--qr-bg);
border-radius: var(--radius);
border: 1px solid var(--line);
}
.qr__code { width: 100%; height: 100%; display: block; }
.qr__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 22%;
aspect-ratio: 1;
object-fit: contain;
background: var(--qr-bg);
border-radius: 50%;
padding: 3px;
}
/* ── Toast — reste sombre (surface inversée assumée, standard du web) ────── */
.toast {
position: fixed;
bottom: var(--space-md);
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--inv-surface);
border: 1px solid var(--inv-line);
color: var(--inv-text);
padding: 0.9rem 1.4rem;
border-radius: 12px;
font-size: var(--fs-small);
opacity: 0;
pointer-events: none;
transition: all 0.3s var(--ease-out);
z-index: 200;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.panel { padding: var(--space-md); }
}