/* Chez Véro — feuille de style du site.
   Palette v1 (ETAT-CHEZ-VERO-2026-10-11). Les couleurs sont définies ICI SEULEMENT.
   Contrastes vérifiés (WCAG 1.4.3) : encre sur blanc lin 17,7:1; taupe sur blanc lin 5,6:1, sur lin 4,9:1;
   taupe et eucalyptus foncé interdits sur le papier (3,9:1). */

@font-face { font-family: 'Work Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/work-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/work-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/work-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/caveat-latin-600-normal.woff2') format('woff2'); }

:root {
  --blanc-lin: #FAF7F2;          /* fond du site */
  --lin: #EFE7DC;                /* fond secondaire */
  --papier: #D8D0C3;             /* couleur signature : blocs */
  --eucalyptus: #8A9B8C;         /* décor seulement, jamais de texte */
  --eucalyptus-fonce: #56665A;   /* badge « Nouveau » seulement */
  --taupe: #6B615B;              /* texte secondaire, sur fond clair seulement */
  --encre: #111111;              /* tout le texte, les boutons */
  --erreur: #A3201C;             /* messages d'erreur (fonctionnel, hors marque) */

  --police-texte: 'Work Sans', system-ui, sans-serif;
  --police-titre: 'Cormorant Garamond', Georgia, serif;
  --police-main: 'Caveat', cursive;   /* provisoire, en attendant l'écriture de Véro */

  --largeur: 70rem;
  --lecture: 42rem;
  --rayon: 6px;
  --cible: 3rem;                 /* zones tactiles d'au moins 48 px */
}

/* Caractères délicats par défaut (16 px); « gros caractères » = 21 px. Tout est en rem. */
html { font-size: 100%; }
html.gros { font-size: 131.25%; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blanc-lin);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--encre); text-underline-offset: 0.25em; }
a:hover { color: var(--taupe); }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; line-height: 1.1; margin: 0; }
p { margin: 0; }
.discret { color: var(--taupe); }
.sur-fonce .discret, .sur-fonce p.discret { color: var(--papier); }
.mention { font-size: 0.85rem; color: var(--taupe); }

.evitement { position: absolute; left: -999px; top: 0.5rem; background: var(--encre); color: var(--blanc-lin); padding: 0.75rem 1rem; border-radius: var(--rayon); z-index: 100; }
.evitement:focus { left: 0.5rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenant { max-width: var(--largeur); margin: 0 auto; padding: 0 1.5rem; }
.lecture { max-width: var(--lecture); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4.5rem 0; }
.section--lin { background: var(--lin); }
.section--encre { background: var(--encre); color: var(--blanc-lin); }
.section--encre a:not(.bouton) { color: var(--blanc-lin); }
.empile { display: flex; flex-direction: column; gap: 1.2rem; }
.surtitre { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.titre-section { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.trait-decor { width: 4rem; height: 2px; background: var(--eucalyptus); border: 0; margin: 0; }

/* Logo provisoire : un seul composant (src/partials/logo.html), remplacé par l'écriture de Véro. */
.logo { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible); }
.logo__provisoire { font-family: var(--police-main); font-weight: 600; font-size: 2.1rem; line-height: 1; }

/* En-tête */
.entete { border-bottom: 1px solid var(--papier); background: var(--blanc-lin); }
.entete__barre { max-width: 77rem; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.45em; }
.bouton-taille { font: inherit; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: none; cursor: pointer; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--encre); background: transparent; color: var(--encre); }
.bouton-taille[aria-pressed="true"] { background: var(--encre); color: var(--blanc-lin); }
.entete--photo { position: absolute; inset: 0 0 auto 0; z-index: 3; background: transparent; border-bottom: 0; }
.entete--photo, .entete--photo a { color: var(--blanc-lin); }
.entete--photo a:hover { color: var(--lin); }
.entete--photo .bouton-taille { border-color: rgba(250, 247, 242, 0.75); color: var(--blanc-lin); }
.entete--photo .bouton-taille[aria-pressed="true"] { background: var(--blanc-lin); color: var(--encre); }

/* Boutons */
.bouton { font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 3.25rem; padding: 0 1.7rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--encre); }
.bouton--plein { background: var(--encre); color: var(--blanc-lin); }
.bouton--plein:hover { background: #2b2b2b; color: var(--blanc-lin); }
.bouton--contour { background: transparent; color: var(--encre); font-weight: 500; }
.bouton--clair { background: var(--blanc-lin); color: var(--encre); border-color: var(--blanc-lin); }
.bouton--clair:hover { background: var(--lin); color: var(--encre); }
.bouton--contour-clair { background: transparent; color: var(--blanc-lin); border-color: var(--blanc-lin); font-weight: 500; }
.bouton--contour-clair:hover { color: var(--lin); }
.bouton--grand { min-height: 3.75rem; font-size: 1.15rem; }
.rangee-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }

/* Plein écran (photo ou vidéo sans son) */
.plein-ecran { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; background: var(--encre); color: var(--blanc-lin); overflow: hidden; }
.plein-ecran--bande { min-height: 80vh; min-height: 80svh; }
.plein-ecran__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plein-ecran::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0.6) 0%, rgba(17,17,17,0.35) 38%, rgba(17,17,17,0.82) 100%); }
.plein-ecran--bande::after { background: linear-gradient(180deg, rgba(17,17,17,0.4) 0%, rgba(17,17,17,0.6) 40%, rgba(17,17,17,0.88) 100%); }
.plein-ecran__texte { position: relative; z-index: 2; width: 100%; max-width: 77rem; margin: 0 auto; padding: 8rem 1.5rem 4.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.plein-ecran__texte .surtitre, .plein-ecran__texte .mention { color: var(--lin); }
.promesse { font-size: clamp(2.5rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 11em; }
.chapeau { font-size: 1.1rem; max-width: 30em; }
@media (prefers-reduced-motion: no-preference) {
  .plein-ecran__media--lent { animation: approche 30s ease-out both; }
  @keyframes approche { from { transform: scale(1.08); } to { transform: scale(1); } }
}

/* Grilles */
.grille { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grille--plats { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.carte { background: var(--lin); border-radius: var(--rayon); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.carte h3 { font-weight: 600; font-size: 1.4rem; line-height: 1.2; }
.engagement h3 { font-weight: 600; font-size: 1.55rem; }

/* Plats */
.plat { display: flex; flex-direction: column; gap: 0.6rem; }
.plat__photo { aspect-ratio: 1 / 1; border-radius: var(--rayon); background: var(--papier); color: var(--encre); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-size: 0.9rem; }
.plat__nom { font-family: var(--police-main); font-weight: 600; font-size: 1.75rem; line-height: 1.1; }
.plat__vin { font-size: 0.9rem; }
.plat__vin strong { font-weight: 600; }
.plat__prix { font-weight: 600; }
.badge-nouveau { align-self: flex-start; background: var(--eucalyptus-fonce); color: var(--blanc-lin); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; }

/* Duo texte + image */
.duo { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.duo > * { flex: 1 1 20rem; min-width: 0; }
figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
figcaption { font-size: 0.85rem; color: var(--taupe); }
.section--encre figcaption { color: var(--papier); }
.photo { width: 100%; object-fit: cover; border-radius: var(--rayon); }
.photo--43 { aspect-ratio: 4 / 3; }
.photo--32 { aspect-ratio: 3 / 2; }
.photo--45 { aspect-ratio: 4 / 5; }
.photo--large { aspect-ratio: 21 / 9; }
.citation-vero { font-family: var(--police-titre); font-style: italic; font-size: 1.45rem; line-height: 1.45; }
.signature { font-family: var(--police-main); font-weight: 600; font-size: 2.2rem; line-height: 1; }

/* Récit */
.recit { font-size: 1.08rem; display: flex; flex-direction: column; gap: 1.2rem; }

/* Avis */
.avis { background: var(--blanc-lin); border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.avis blockquote { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 1.3rem; line-height: 1.4; }
.avis--vedette { padding: 2rem; }
.avis--vedette blockquote { font-size: 1.9rem; line-height: 1.3; }
.avis figcaption { font-weight: 600; color: var(--encre); font-size: 1rem; }
.avis .traduction { color: var(--taupe); font-size: 0.92rem; }

/* Formulaires */
.formulaire { display: flex; flex-direction: column; gap: 1.1rem; max-width: 32rem; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ label { font-weight: 500; }
.champ input, .champ select { font: inherit; min-height: 3.25rem; padding: 0 0.9rem; border-radius: var(--rayon); border: 1px solid var(--taupe); background: #FFFFFF; color: var(--encre); }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aide { font-size: 0.88rem; color: var(--taupe); }
.erreur { color: var(--erreur); font-weight: 500; }
.encadre { background: var(--lin); border-radius: var(--rayon); padding: 1.2rem 1.4rem; }

/* Question « gros caractères » */
.taille { border: 0; border-radius: 10px; padding: 2rem; max-width: 30rem; width: calc(100% - 2rem); background: var(--blanc-lin); color: var(--encre); }
.taille::backdrop { background: rgba(17, 17, 17, 0.55); }
.taille h2 { font-weight: 600; font-size: 1.9rem; line-height: 1.15; margin: 0.8rem 0; }
.taille__marque { margin: 0; }
.taille__choix { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.4rem; }

/* Pied de page */
.pied { border-top: 1px solid var(--papier); }
.pied__barre { max-width: var(--largeur); margin: 0 auto; padding: 2.5rem 1.5rem 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; font-size: 0.88rem; color: var(--taupe); }
.pied__marque .logo__provisoire { font-size: 1.6rem; color: var(--encre); }
.pied a { color: var(--taupe); display: inline-flex; align-items: center; min-height: var(--cible); }

@media (max-width: 40rem) {
  .section { padding: 3.5rem 0; }
  .nav { gap: 0 1.1rem; }
  .plein-ecran__texte { padding-top: 14rem; }
  .entete__barre { padding: 0.5rem 1rem; }
}

/* Pages de texte (confidentialité, merci) */
.lecture h2 { font-size: 1.6rem; font-weight: 600; margin-top: 1rem; }

/* Sélecteur de langue : le nom de la langue, écrit dans cette langue */
.nav a[hreflang] { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }

/* Liens texte sur photo : toujours clairs */
.plein-ecran__texte a:not(.bouton) { color: var(--blanc-lin); text-decoration: underline; text-underline-offset: 0.3em; display: inline-flex; align-items: center; min-height: var(--cible); }
@media (max-width: 40rem) {
  .grille--plats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .plat__nom { font-size: 1.5rem; }
}