/* Marleine Koula — Salon de beauté
   Direction : naturel et authentique. Fond sable et lin, encre bleu nuit du logo,
   bronze pour les accents, arches pour les photos, mèche ondulée en séparateur.
   L'enseigne (haut de l'accueil) garde les couleurs du logo : bleu nuit et or. */

:root {
  --sable: #EFE7DA;      /* fond général */
  --lin: #F8F3EA;        /* cartes */
  --argile: #E4D6C1;     /* panneaux, photos à venir */
  --argile-fonce: #CDB99C;
  --nuit: #0B2230;       /* bleu nuit du logo : titres, enseigne */
  --nuit-2: #14303F;
  --cacao: #3A2B22;      /* texte courant */
  --cacao-doux: #6B5A4C;
  --bronze: #8E6526;     /* liens, petits textes accent */
  --or: #D9B85E;         /* sur fond bleu nuit */
  --or-clair: #F1E2A9;
  --peche: #EBC7B3;
  --feuille: #5E6A4C;
  --blanc-casse: #F5F0E6;

  --f-titre: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-texte: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-main: "Caveat", "Segoe Print", cursive;

  --rayon: 18px;
  --arche: 999px 999px var(--rayon) var(--rayon);
  --ombre: 0 1px 0 rgba(58, 43, 34, .05), 0 10px 30px -18px rgba(58, 43, 34, .45);
  --largeur: 1180px;
  --gouttiere: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sable);
  color: var(--cacao);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* grain de papier */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .22; mix-blend-mode: multiply;
  background-image: 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%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: var(--bronze); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(56px, 8vw, 104px); }

h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; color: var(--nuit); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.surtitre { font-size: .78rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: var(--bronze); }
.main { font-family: var(--f-main); font-size: 1.6rem; line-height: 1.1; color: var(--bronze); }
.intro { max-width: 60ch; color: var(--cacao-doux); font-size: 1.05rem; }
.entete-section { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 760px; }
.entete-section.centre { margin-inline: auto; text-align: center; justify-items: center; }

/* mèche ondulée : séparateur */
.meche { display: block; width: 120px; height: 18px; color: var(--bronze); }
.meche path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-decoration: none;
  border: 1.5px solid var(--nuit); background: var(--nuit); color: var(--blanc-casse);
  cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--nuit-2); }
.btn.contour { background: transparent; color: var(--nuit); }
.btn.contour:hover { background: var(--nuit); color: var(--blanc-casse); }
.btn.or { background: var(--or); border-color: var(--or); color: var(--nuit); }
.btn.or:hover { background: var(--or-clair); border-color: var(--or-clair); }
.btn.whatsapp { background: var(--feuille); border-color: var(--feuille); color: #fff; }
.btn.whatsapp:hover { background: #4C573D; }
.btn svg { width: 18px; height: 18px; flex: none; }
.actions-centre { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--sable) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--argile-fonce) 50%, transparent);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nuit); min-width: 0; }
.marque img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.marque span { font-family: var(--f-titre); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--cacao); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:hover { background: var(--argile); }
.nav a[aria-current="page"] { background: var(--nuit); color: var(--blanc-casse); }
.outils-entete { display: flex; align-items: center; gap: 6px; }
.icone-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--nuit);
}
.icone-btn:hover { background: var(--argile); }
.icone-btn svg { width: 22px; height: 22px; }
.pastille {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--bronze); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.burger { display: none; }
@media (max-width: 860px) {
  .burger { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gouttiere) 18px; background: var(--sable);
    border-bottom: 1px solid var(--argile-fonce);
  }
  .nav:not(.ouvert) { display: none; }
  .nav a { padding: 12px 14px; }
  .marque span { font-size: 1rem; }
}
@media (max-width: 380px) { .marque span { display: none; } }

/* ---------- Photos : réelles ou à venir ---------- */
.photo { position: relative; overflow: hidden; background: var(--argile); max-width: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.arche { border-radius: var(--arche); }
.photo.arrondi { border-radius: var(--rayon); }
.a-venir {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px;
  color: var(--cacao-doux); text-align: center; padding: 16px;
  background:
    radial-gradient(120% 80% at 30% 20%, color-mix(in srgb, var(--lin) 80%, transparent), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(142, 101, 38, .05) 14px 15px),
    var(--argile);
}
.a-venir svg { width: 46px; height: 46px; opacity: .6; }
.a-venir small { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .8; }

/* ---------- Enseigne (accueil) ---------- */
.enseigne { background: var(--nuit); color: var(--blanc-casse); position: relative; overflow: hidden; }
.enseigne::after {
  content: ""; position: absolute; inset: auto -10% -1px -10%; height: 60px;
  background: var(--sable); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.enseigne .conteneur {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: clamp(48px, 7vw, 88px) clamp(80px, 9vw, 120px); position: relative; z-index: 1;
}
.enseigne h1 { color: var(--or-clair); text-transform: uppercase; letter-spacing: .06em; }
.enseigne .surtitre { color: var(--or); }
.bandeau {
  display: inline-block; background: var(--peche); color: var(--nuit); padding: 6px 18px;
  font-weight: 700; letter-spacing: .32em; text-transform: uppercase; font-size: .82rem;
}
.enseigne .texte { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.enseigne .sous { color: #CBD3D6; max-width: 46ch; font-size: 1.08rem; }
.enseigne .main { color: var(--or); font-size: 1.9rem; }
.enseigne .visuel { position: relative; justify-self: center; width: min(100%, 420px); }
.enseigne .visuel .photo { aspect-ratio: 4 / 5; border: 1px solid rgba(217, 184, 94, .35); background: var(--nuit-2); }
.enseigne .visuel .a-venir { background: radial-gradient(90% 70% at 50% 30%, rgba(217,184,94,.12), transparent 70%), var(--nuit-2); color: #9FB0B8; }
.enseigne .logo-flottant {
  position: absolute; left: -28px; bottom: -28px; width: clamp(110px, 16vw, 150px); border-radius: 50%;
  box-shadow: 0 0 0 6px var(--nuit), 0 18px 40px -12px rgba(0,0,0,.6);
}
@media (max-width: 800px) {
  .enseigne .conteneur { grid-template-columns: 1fr; }
  .enseigne .visuel { width: min(100%, 340px); }
  .enseigne .logo-flottant { left: -12px; }
}

/* ---------- Catégories ---------- */
.grille-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 26px); }
.carte-categorie { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.carte-categorie .photo { aspect-ratio: 3 / 4; transition: transform .35s ease; }
.carte-categorie:hover .photo { transform: translateY(-6px); }
.carte-categorie h3 { font-size: 1.25rem; }
.carte-categorie p { color: var(--cacao-doux); font-size: .92rem; }
.carte-categorie .fleche { color: var(--bronze); font-weight: 600; font-size: .88rem; }
@media (max-width: 900px) { .grille-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Propriétaire ---------- */
.proprietaire { background: var(--lin); overflow: hidden; }
.proprietaire .conteneur { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.proprietaire .cadre { position: relative; width: min(100%, 400px); justify-self: center; }
.proprietaire .cadre::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid var(--bronze); border-radius: var(--arche);
}
.proprietaire .photo { aspect-ratio: 3 / 4; }
.proprietaire .texte { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.proprietaire .fonction { color: var(--feuille); font-weight: 600; }
.proprietaire .presentation { font-size: 1.08rem; max-width: 56ch; }
.proprietaire blockquote { margin: 0; font-family: var(--f-main); font-size: 2rem; color: var(--bronze); line-height: 1.1; }
@media (max-width: 800px) { .proprietaire .conteneur { grid-template-columns: 1fr; } }

/* ---------- Produits ---------- */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.carte-produit {
  display: grid; grid-template-rows: auto 1fr; background: var(--lin); border-radius: calc(var(--rayon) + 4px);
  padding: 10px; box-shadow: var(--ombre); min-width: 0;
}
.carte-produit .photo { aspect-ratio: 1; border-radius: var(--rayon); }
.carte-produit .corps { display: grid; gap: 8px; padding: 14px 8px 8px; align-content: start; grid-template-rows: auto auto 1fr auto; }
.carte-produit .categorie { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--bronze); font-weight: 600; }
.carte-produit h3 { font-size: 1.18rem; }
.carte-produit .desc { color: var(--cacao-doux); font-size: .9rem; }
.carte-produit .details { font-size: .8rem; color: var(--feuille); }
.carte-produit .pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.prix { font-weight: 700; color: var(--nuit); font-variant-numeric: tabular-nums; font-size: 1.05rem; white-space: nowrap; }
.prix s { color: var(--cacao-doux); font-weight: 400; font-size: .85rem; margin-right: 6px; }
.btn-panier {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 0; background: var(--nuit); color: var(--blanc-casse); font-weight: 600; font-size: .86rem; cursor: pointer;
  transition: background .2s;
}
.btn-panier:hover { background: var(--bronze); }
.btn-panier[disabled] { background: var(--argile-fonce); cursor: not-allowed; }
.btn-panier svg { width: 16px; height: 16px; }
.etiquettes { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; }
.etiquette { background: var(--peche); color: var(--nuit); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.etiquette.vert { background: var(--feuille); color: #fff; }
.jaime {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--lin) 92%, transparent); display: grid; place-items: center; cursor: pointer; color: var(--nuit);
  transition: transform .2s;
}
.jaime:hover { transform: scale(1.08); }
.jaime svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jaime[aria-pressed="true"] { color: #B4483A; }
.jaime[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Contacts (accueil) ---------- */
.contacts { background: var(--argile); }
.grille-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte-contact {
  display: grid; gap: 6px; padding: 24px; border-radius: var(--rayon); background: var(--lin); text-decoration: none; color: inherit;
  min-width: 0; transition: transform .2s;
}
.carte-contact:hover { transform: translateY(-3px); }
.carte-contact .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--nuit); color: var(--or); margin-bottom: 6px; }
.carte-contact .ico svg { width: 22px; height: 22px; }
.carte-contact strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.2rem; color: var(--nuit); }
.carte-contact span { color: var(--cacao-doux); overflow-wrap: anywhere; }
.abonnement {
  margin-top: 24px; padding: clamp(24px, 4vw, 40px); border-radius: var(--rayon); background: var(--nuit); color: var(--blanc-casse);
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.abonnement h3 { color: var(--or-clair); font-size: 1.6rem; }
.abonnement p { color: #CBD3D6; margin-top: 6px; }
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; }
.reseau {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(217, 184, 94, .5); color: var(--or-clair); text-decoration: none; font-weight: 500;
}
.reseau:hover { background: var(--or); color: var(--nuit); }
.reseau svg { width: 18px; height: 18px; }
@media (max-width: 800px) { .grille-contacts { grid-template-columns: 1fr; } .abonnement { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.pied-page { background: var(--nuit); color: #CBD3D6; padding-block: 64px 28px; }
.pied-page .haut { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 32px 40px; align-items: start; }
.pied-page .logo { width: 150px; border-radius: 50%; }
.pied-page h4 { margin: 0 0 8px; font-family: var(--f-titre); font-weight: 400; color: var(--or-clair); font-size: 1.1rem; }
.pied-page p, .pied-page a { color: #CBD3D6; font-size: .93rem; overflow-wrap: anywhere; }
.pied-page a { text-decoration: none; display: block; }
.pied-page a:hover { color: var(--or); }
.pied-page .bas { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(203, 211, 214, .18); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; }
@media (max-width: 860px) { .pied-page .haut { grid-template-columns: 1fr 1fr; } .pied-page .logo { width: 120px; } }
@media (max-width: 520px) { .pied-page .haut { grid-template-columns: 1fr; } }

/* ---------- En-tête de page intérieure ---------- */
.tete-page { padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); }
.tete-page .conteneur { display: grid; gap: 14px; }

/* ---------- Boutique ---------- */
.barre-boutique { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-bottom: 18px; }
.recherche { position: relative; }
.recherche svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--cacao-doux); }
.recherche input {
  width: 100%; min-height: 50px; padding: 12px 18px 12px 46px; border-radius: 999px; border: 1.5px solid var(--argile-fonce);
  background: var(--lin); font: inherit; color: var(--cacao);
}
.recherche input:focus { outline: none; border-color: var(--bronze); }
.boutons-boutique { display: flex; gap: 8px; }
.onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 28px; scrollbar-width: thin; }
.onglet {
  flex: none; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--argile-fonce); background: transparent;
  cursor: pointer; font-weight: 500; font-size: .92rem; color: var(--cacao);
}
.onglet:hover { border-color: var(--nuit); }
.onglet[aria-selected="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--blanc-casse); }
.info-paiement { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--rayon); background: var(--lin); color: var(--cacao-doux); font-size: .9rem; margin-bottom: 24px; }
.info-paiement svg { width: 20px; height: 20px; flex: none; color: var(--feuille); margin-top: 2px; }
.vide { text-align: center; padding: 48px 16px; color: var(--cacao-doux); }
.compteur { color: var(--cacao-doux); font-size: .9rem; margin-bottom: 14px; }
@media (max-width: 640px) { .barre-boutique { grid-template-columns: 1fr; } .boutons-boutique .btn { flex: 1; } }

/* ---------- À propos ---------- */
.apropos-intro .conteneur { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.apropos-intro .photo { aspect-ratio: 4 / 5; width: min(100%, 420px); justify-self: center; }
.apropos-intro .texte { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 800px) { .apropos-intro .conteneur { grid-template-columns: 1fr; } }
.savoir-faire { display: flex; flex-wrap: wrap; gap: 10px; }
.savoir-faire li { list-style: none; padding: 10px 18px; border-radius: 999px; background: var(--lin); border: 1px solid var(--argile-fonce); font-weight: 500; }
.savoir-faire { padding: 0; margin: 0; }
.grille-distinctions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.distinction { padding: 28px 22px; background: var(--lin); border-radius: var(--arche); text-align: center; display: grid; gap: 10px; justify-items: center; padding-top: 44px; }
.distinction .feuille { width: 34px; height: 34px; color: var(--feuille); }
.distinction p { color: var(--cacao-doux); font-size: .93rem; }
@media (max-width: 900px) { .grille-distinctions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grille-distinctions { grid-template-columns: 1fr; } }
.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs-boite { overflow-x: auto; background: var(--lin); border-radius: var(--rayon); padding: 8px clamp(12px, 3vw, 28px); }
.tarifs th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--bronze); padding: 16px 10px 10px; font-weight: 600; }
.tarifs td { padding: 14px 10px; border-top: 1px dashed var(--argile-fonce); vertical-align: top; }
.tarifs td:first-child { font-family: var(--f-titre); font-size: 1.1rem; color: var(--nuit); }
.tarifs td.num, .tarifs th.num { text-align: right; white-space: nowrap; }
.tarifs td.num { font-weight: 700; color: var(--nuit); }
.note { margin-top: 14px; color: var(--cacao-doux); font-size: .9rem; }
.communaute { background: var(--argile); text-align: center; }
.communaute p { color: var(--cacao-doux); }
.communaute .reseau { color: var(--nuit); border-color: var(--bronze); }
.communaute .reseau:hover { background: var(--nuit); color: var(--blanc-casse); }
.communaute .conteneur { display: grid; gap: 18px; justify-items: center; }

/* ---------- Contact ---------- */
.grille-contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.bloc { background: var(--lin); border-radius: var(--rayon); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; min-width: 0; }
.bloc h2 { font-size: 1.6rem; }
.ligne-contact { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.ligne-contact .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--nuit); color: var(--or); display: grid; place-items: center; }
.ligne-contact .ico svg { width: 20px; height: 20px; }
.ligne-contact small { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.ligne-contact a, .ligne-contact span { color: var(--cacao); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.ligne-contact a:hover { color: var(--bronze); }
.horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horaires td { padding: 10px 4px; border-top: 1px dashed var(--argile-fonce); }
.horaires td:last-child { text-align: right; }
.horaires tr.aujourdhui td { font-weight: 700; color: var(--nuit); }
.statut { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; padding: 6px 14px; border-radius: 999px; background: var(--argile); justify-self: start; }
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cacao-doux); }
.statut.ouvert { color: var(--feuille); }
.statut.ouvert::before { background: var(--feuille); box-shadow: 0 0 0 4px rgba(94, 106, 76, .2); }
@media (max-width: 800px) { .grille-contact-page { grid-template-columns: 1fr; } }

/* ---------- Panier ---------- */
.voile { position: fixed; inset: 0; background: rgba(11, 34, 48, .45); z-index: 200; opacity: 0; transition: opacity .25s; }
.voile.visible { opacity: 1; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(100%, 420px); z-index: 201;
  background: var(--sable); display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform .3s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
}
.tiroir.ouvert { transform: none; visibility: visible; box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); }
.tiroir .tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--argile-fonce); }
.tiroir .tete h2 { font-size: 1.5rem; }
.tiroir .liste { overflow-y: auto; padding: 8px 20px; display: grid; align-content: start; gap: 4px; }
.article-panier { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--argile-fonce); }
.article-panier .photo { width: 64px; height: 64px; border-radius: 12px; }
.article-panier .photo .a-venir svg { width: 22px; height: 22px; }
.article-panier .photo .a-venir small { display: none; }
.article-panier h3 { font-size: 1rem; }
.article-panier .p { font-size: .88rem; color: var(--cacao-doux); font-variant-numeric: tabular-nums; }
.quantite { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.quantite button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--argile-fonce); background: var(--lin); cursor: pointer; }
.quantite span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.retirer { border: 0; background: none; color: var(--cacao-doux); cursor: pointer; font-size: .8rem; text-decoration: underline; }
.tiroir .pied { padding: 18px 20px; border-top: 1px solid var(--argile-fonce); display: grid; gap: 12px; background: var(--lin); }
.total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; color: var(--nuit); font-variant-numeric: tabular-nums; }
.champ { display: grid; gap: 4px; }
.champ label { font-size: .8rem; font-weight: 600; color: var(--cacao-doux); }
.champ input { min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--argile-fonce); background: var(--sable); font: inherit; color: var(--cacao); }
.champ input:focus { outline: none; border-color: var(--bronze); }
.petite-note { font-size: .8rem; color: var(--cacao-doux); }

/* ---------- Fenêtre réseaux ---------- */
.fenetre { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; }
.fenetre .boite { background: var(--nuit); color: var(--blanc-casse); border-radius: 24px; padding: 32px; width: min(100%, 440px); display: grid; gap: 16px; position: relative; }
.fenetre h2 { color: var(--or-clair); }
.fenetre .fermer { position: absolute; top: 12px; right: 12px; color: var(--or-clair); }
.fenetre .fermer:hover { background: var(--nuit-2); }

/* ---------- Message éphémère ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--nuit); color: var(--blanc-casse); padding: 12px 20px; border-radius: 999px; z-index: 300;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; font-weight: 500; font-size: .92rem;
  max-width: calc(100% - 32px);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* apparition douce (contenu visible même sans animation) */
@media (prefers-reduced-motion: no-preference) {
  .apparait { animation: monte .7s ease both; }
  @keyframes monte { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}