/* Clo Signature — feuille de styles unique.
   Palette : ivoire de boutique, encre aubergine, grenat (vins du Biterrois),
   rose poudré (essayage), olive (le Minervois d'origine). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs nommées */
  --ivoire: #f7f1ea;        /* fond */
  --ivoire-fonce: #efe5da;  /* fond secondaire */
  --encre: #2a1b22;         /* texte */
  --encre-douce: #5a4650;   /* texte secondaire (contraste 7,72:1 sur ivoire) */
  --grenat: #7a2e3a;        /* accent (contraste 8,21:1 sur ivoire) */
  --rose-poudre: #ead2c9;   /* accent secondaire, surfaces */
  --olive: #4f5536;         /* accent tertiaire (contraste 6,97:1 sur ivoire) */
  --etat-a-renseigner-fond: #fff0bf;
  --etat-a-renseigner-texte: #5c3d00;
  --etat-focus: #1d4ed8;

  /* Typographie : 5 tailles */
  --police-titre: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --police-texte: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.875rem;
  --t-s: 1.0625rem;
  --t-m: 1.375rem;
  --t-l: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  --t-xl: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);

  /* Espacements, rayons, ombres */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --rayon-s: 4px;
  --rayon-m: 12px;
  --rayon-l: 999px;
  --ombre-douce: 0 1px 2px rgb(42 27 34 / 0.06), 0 8px 24px rgb(42 27 34 / 0.07);
  --largeur: 68rem;
  --couture: repeating-linear-gradient(90deg, var(--grenat) 0 10px, transparent 10px 18px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-s);
  line-height: 1.65;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 var(--e-2);
  letter-spacing: 0.005em;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3, .h3 { font-size: var(--t-m); }
h1 em, h2 em { font-style: italic; font-weight: 600; color: var(--grenat); }

p { margin: 0 0 var(--e-2); max-width: 65ch; }

a { color: var(--grenat); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; color: var(--encre); }
:focus-visible {
  outline: 3px solid var(--etat-focus);
  outline-offset: 3px;
  border-radius: var(--rayon-s);
}

.lien-evitement {
  position: absolute;
  left: var(--e-2);
  top: -4rem;
  background: var(--encre);
  color: var(--ivoire);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--rayon-s);
  z-index: 10;
}
.lien-evitement:focus { top: var(--e-2); color: var(--ivoire); }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--e-2); }
@media (min-width: 48rem) { .conteneur { padding: 0 var(--e-4); } }

/* En-tête */
.entete { border-bottom: 1px solid rgb(42 27 34 / 0.12); background: var(--ivoire); }
.entete .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  padding-top: var(--e-2);
  padding-bottom: var(--e-2);
}
.logotype {
  font-family: var(--police-titre);
  font-size: 1.75rem;
  color: var(--encre);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
.logotype em { font-style: italic; font-weight: 600; color: var(--grenat); }
.logotype:hover { color: var(--encre); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.nav a {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  padding: 0.5rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--grenat); color: var(--grenat); }

/* Héros typographique (aucune photo disponible avec droits établis) */
.heros { padding: var(--e-5) 0 var(--e-4); position: relative; overflow: hidden; }
.heros::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: 2rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--rose-poudre), transparent 70%);
  z-index: -1;
}
.surtitre {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: var(--e-2);
  font-weight: 500;
}
.couture { height: 2px; background: var(--couture); border: 0; margin: var(--e-4) 0; max-width: 12rem; }
.chapeau { font-size: var(--t-m); line-height: 1.5; color: var(--encre-douce); max-width: 40ch; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayon-l);
  background: var(--encre);
  color: var(--ivoire);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.bouton:hover { background: var(--grenat); color: var(--ivoire); }
.bouton--secondaire { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton--secondaire:hover { background: var(--encre); color: var(--ivoire); }

/* Sections */
.section { padding: var(--e-4) 0; }
.section--teinte { background: var(--ivoire-fonce); }
.grille { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.carte {
  background: var(--ivoire);
  border-radius: var(--rayon-m);
  padding: var(--e-3);
  box-shadow: var(--ombre-douce);
  border-top: 3px solid var(--rose-poudre);
}
.section--teinte .carte { background: #fbf7f2; }
.carte h3 { margin-bottom: var(--e-1); }

/* Note d'avis */
.note { display: flex; align-items: baseline; gap: var(--e-1); flex-wrap: wrap; }
.note__valeur { font-family: var(--police-titre); font-size: var(--t-xl); line-height: 1; color: var(--grenat); }
.petit { font-size: var(--t-xs); color: var(--encre-douce); }

/* Horaires */
.horaires { border-collapse: collapse; width: 100%; max-width: 26rem; }
.horaires th, .horaires td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid rgb(42 27 34 / 0.12); vertical-align: top; }
.horaires th { font-weight: 500; padding-right: var(--e-3); }
.horaires .ferme { color: var(--encre-douce); }

/* Champs à renseigner : volontairement visibles */
.a-renseigner {
  background: var(--etat-a-renseigner-fond);
  color: var(--etat-a-renseigner-texte);
  padding: 0.05em 0.35em;
  border-radius: var(--rayon-s);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  outline: 1px dashed currentColor;
  outline-offset: -1px;
}
.alerte {
  background: var(--etat-a-renseigner-fond);
  color: var(--etat-a-renseigner-texte);
  border-left: 4px solid currentColor;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--rayon-s);
  margin: var(--e-3) 0;
}

/* Textes longs (mentions légales, confidentialité) */
.prose { max-width: 46rem; }
.prose h2 { margin-top: var(--e-4); }
.prose h3 { margin-top: var(--e-3); font-size: 1.3rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35rem; }
.definitions { display: grid; grid-template-columns: 1fr; gap: 0.1rem var(--e-3); margin: 0 0 var(--e-3); }
.definitions dt { font-weight: 500; margin-top: var(--e-1); }
.definitions dd { margin: 0; }
@media (min-width: 40rem) {
  .definitions { grid-template-columns: minmax(10rem, 14rem) 1fr; }
  .definitions dt, .definitions dd { margin-top: 0; padding: 0.4rem 0; border-bottom: 1px solid rgb(42 27 34 / 0.1); }
}

/* Pied de page */
.pied { background: var(--encre); color: var(--ivoire); padding: var(--e-4) 0 var(--e-3); margin-top: var(--e-5); }
.pied a { color: var(--ivoire); }
.pied a:hover { color: var(--rose-poudre); }
.pied .logotype { color: var(--ivoire); }
.pied .logotype em { color: var(--rose-poudre); }
.pied .petit { color: #d9cbd1; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.35rem; }
.pied .a-renseigner { color: var(--etat-a-renseigner-texte); }

.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;
}

@media print {
  .entete .nav, .pied, .actions, .lien-evitement { display: none; }
  body { background: #fff; }
}