/* ============================================================
   La Table du Pressoir — restaurant.
   Parti pris : la carte est le contenu, pas la décoration. Pas de photographie
   de plat en pleine page, pas de texture de bois. Un fond os, une olive
   profonde pour le texte, un bordeaux pour ce sur quoi on clique, et une
   typographie resserrée qui laisse la place aux noms des plats.
   Archivo en chasse normale pour les titres, à l'opposé de la chasse élargie
   du site de photographe : deux sites de la même maison ne doivent pas se
   ressembler.

   Contrastes mesurés (WCAG AA, seuil 4,5:1) :
     olive #2f3826 sur os #fbf8f2 : 11,6:1
     gris  #5f6355 sur os         :  5,8:1
     bordeaux #7a2b35 sur os      :  8,9:1
     os sur olive                 : 11,6:1
     os sur bordeaux              :  8,9:1
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('/src/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('/src/fonts/SourceSans3-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --creme: #fbf8f2;
  --creme-fonce: #f3eee3;
  --marine: #2f3826;
  --marine-clair: #3f4a33;
  --cedre: #7a2b35;
  --gris: #5f6355;
  --trait: #e4ddcd;

  --mesure: 64ch;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rythme: clamp(3.5rem, 8vw, 7rem);
  --ecart: clamp(1rem, 2.4vw, 1.75rem);

  --titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--marine);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0 0 0.6em;
  font-family: var(--titre);
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); font-weight: 600; font-family: var(--texte); }

p { margin: 0 0 1.2em; }

.conteneur { width: min(100%, 74rem); margin-inline: auto; padding-inline: var(--gouttiere); }
.mesure > * { max-width: var(--mesure); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut { position: absolute; left: -9999px; }
.saut:focus { left: var(--gouttiere); top: 0.5rem; z-index: 60; padding: 0.6rem 1rem; background: var(--marine); color: var(--creme); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--cedre); outline-offset: 3px; }

/* --- Bandeau « ce site est à vendre » --- */

.bande-vente { position: sticky; top: 0; z-index: 50; background: #0b1016; }

.bande-vente__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1.25rem; padding-block: 0.6rem; font-size: 0.93rem;
}

.bande-vente p { margin: 0; }
.bande-vente__titre { font-weight: 700; color: #fff; }
.bande-vente__accroche { color: #b9c4cd; }

.bande-vente__cta {
  padding: 0.45rem 1rem; border-radius: 0.4rem;
  background: #00d4d6; color: #10232b; font-weight: 700; text-decoration: none;
}

.bande-vente__cta:hover, .bande-vente__cta:focus-visible { background: #2ae4e6; }

@media (max-width: 47.99em) { .bande-vente__accroche { display: none; } }

/* --- En-tête : marine plein, pour asseoir la marque --- */

.entete { position: relative; z-index: 40; background: var(--marine); color: var(--creme); }

.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }

.marque { text-decoration: none; line-height: 1.15; }
.marque__nom { display: block; font-family: var(--titre); font-size: 1.35rem; font-weight: 600; }
.marque__baseline { display: block; margin-top: 0.1rem; color: #b6c2d1; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }

.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); margin: 0; padding: 0; list-style: none; }
.nav a { padding-block: 0.4rem; font-size: 0.95rem; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a:focus-visible, .nav [aria-current='page'] { border-bottom-color: var(--creme); }

.entete__bouton { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(247,245,241,0.35); border-radius: 0.3rem; color: inherit; cursor: pointer; }
.entete__barres, .entete__barres::before, .entete__barres::after { display: block; width: 18px; height: 2px; margin-inline: auto; background: currentColor; content: ''; }
.entete__barres::before { transform: translateY(-6px); }
.entete__barres::after { transform: translateY(4px); }

@media (max-width: 55.99em) {
  .entete__bouton { display: block; }
  .entete__inner { flex-wrap: wrap; }
  .nav { display: none; flex-basis: 100%; }
  .nav[data-ouvert] { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-block: 0.5rem; }
  .nav a { display: block; padding-block: 0.8rem; border-bottom: 1px solid rgba(247,245,241,0.18); }
}

/* --- Ouverture : texte à gauche, image à droite, sans superposition --- */

.ouverture { background: var(--marine); color: var(--creme); }

.ouverture .conteneur,
.ouverture__texte { position: relative; }

.ouverture__image img { width: 100%; height: clamp(14rem, 34vw, 24rem); object-fit: cover; }

.ouverture__texte { padding-block: var(--rythme); }
.ouverture__texte > * { max-width: 44rem; }
.ouverture h1 { color: var(--creme); }

.surtitre { margin-bottom: 0.9rem; color: #9fb4cb; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.chapo { color: #cdd8e4; font-size: 1.12rem; }
.ouverture .chapo { max-width: 42rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* --- Boutons --- */

.bouton {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0.75rem 1.5rem;
  background: var(--cedre); color: var(--creme);
  border: 0; border-radius: 0;
  font-family: var(--texte); font-size: 1rem; font-weight: 650;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease;
}

.bouton:hover, .bouton:focus-visible { background: #5e2029; }
.bouton--clair { background: var(--creme); color: var(--marine); }
.bouton--clair:hover, .bouton--clair:focus-visible { background: #fff; }

.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; text-underline-offset: 5px; }
.lien-fleche::after { content: '\2192'; }
.ouverture .lien-fleche { color: var(--creme); }

/* --- Sections --- */

.section { padding-block: var(--rythme); }
.section--sombre { background: var(--creme-fonce); }

.section:not(.section--sombre) + .section:not(.section--sombre),
.section--sombre + .section--sombre { padding-top: 0; }

.tete-section { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.tete-section p { color: var(--gris); }
.tete-section__titre { margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.tete-section__lien { margin-top: 2rem; margin-bottom: 0; }

.entete-page { padding-block: clamp(2.5rem, 6vw, 5rem) var(--rythme); background: var(--marine); color: var(--creme); }
.entete-page h1 { color: var(--creme); }
.entete-page__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.entete-page--image .entete-page__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
.entete-page__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }

@media (max-width: 55.99em) { .entete-page--image .entete-page__inner { grid-template-columns: 1fr; } }

/* --- Rangées --- */

.grille-photos, .cartes, .etapes, .formules {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--ecart); margin: 0; padding: 0; list-style: none;
}

.grille-photos > li { flex: 1 1 20rem; max-width: 32rem; }
.cartes > li, .etapes > li { flex: 1 1 18rem; max-width: 26rem; }
.formules > li { flex: 1 1 17rem; max-width: 24rem; }

.grille-photos figure { margin: 0; }
.grille-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.grille-photos figcaption { margin-top: 0.6rem; color: var(--gris); font-size: 0.88rem; }

.carte { padding: 1.5rem 0 0; background: none; border: 0; border-top: 2px solid var(--marine); }

.carte p, .etapes p { margin-bottom: 0; color: var(--gris); }
.carte h3 a { text-decoration-color: var(--cedre); text-underline-offset: 4px; }

.etapes__num { display: block; margin-bottom: 0.5rem; color: var(--cedre); font-family: var(--titre); font-size: 2.2rem; font-weight: 600; line-height: 1; }

/* --- Listes --- */

.coches { margin: 1.3rem 0 0; padding: 0; list-style: none; }
.coches li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; color: var(--gris); }
.coches li::before { position: absolute; left: 0; color: var(--cedre); content: '\2022'; }

/* --- Formules --- */

.formule { display: flex; flex-direction: column; padding: 1.6rem 0 0; border-top: 2px solid var(--marine); }
.formule--vedette { border-top-color: var(--cedre); }
.formule__prix { margin: 0.2rem 0 0.4rem; font-family: var(--titre); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; }
.formule__prix span { display: block; margin-top: 0.45rem; color: var(--gris); font-family: var(--texte); font-size: 0.85rem; font-weight: 400; }
.formule__pour { color: var(--gris); font-size: 0.95rem; }
.formule .coches { margin-top: auto; padding-top: 1rem; }

/* --- Questions fréquentes --- */

.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.05rem; }
.faq summary::after { color: var(--cedre); content: '+'; font-size: 1.4rem; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 1.2rem; color: var(--gris); max-width: var(--mesure); }

/* --- Contact --- */

.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 55.99em) { .contact { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.champ label { font-size: 0.9rem; font-weight: 600; }
.champ input, .champ select, .champ textarea { min-height: 48px; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--trait); border-radius: 0; color: var(--marine); font: inherit; }
.champ textarea { min-height: 9rem; resize: vertical; }
.mention { color: var(--gris); font-size: 0.86rem; }

.contact__infos dl { margin: 0; }
.contact__infos dt { margin-top: 1.1rem; color: var(--gris); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.contact__infos dd { margin: 0.2rem 0 0; }

/* --- Maillage --- */

.maillage { padding-block: 0 var(--rythme); }
.maillage__titre { font-family: var(--texte); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.maillage ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.maillage a { text-decoration-color: var(--cedre); text-underline-offset: 5px; }

/* --- Bandeau d'appel : marine plein, en contrepoint du fond clair --- */

.bande-cta { padding-block: clamp(3rem, 7vw, 5rem); background: var(--marine); color: var(--creme); text-align: center; }
.bande-cta h2 { color: var(--creme); margin-bottom: 0.4em; }
.bande-cta p { max-width: 42rem; margin-inline: auto; color: #cdd8e4; }

/* --- Pied de page --- */

.pied { padding-block: var(--rythme) 2rem; background: var(--creme-fonce); border-top: 1px solid var(--trait); }
.pied__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 47.99em) { .pied__grille { grid-template-columns: 1fr; } }

.pied__marque { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; }
.pied__titre { margin-bottom: 0.9rem; color: var(--gris); font-family: var(--texte); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.pied__texte { color: var(--gris); font-size: 0.95rem; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: 0.5rem; }
.pied li a, .pied__texte a { color: var(--gris); text-underline-offset: 4px; }
.pied li a:hover, .pied__texte a:hover { color: var(--marine); }

.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--trait); color: var(--gris); font-size: 0.86rem; }
.pied__bas p { margin: 0; }
.pied__credit a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Rangées symétriques : le gabarit pose le modificateur d'après le nombre
   d'éléments. Placé en fin de feuille pour l'emporter sur les composants. */
@media (min-width: 56em) {
  .rangee--2 > li { flex-basis: calc((100% - var(--ecart)) / 2); max-width: none; }
  .rangee--3 > li { flex-basis: calc((100% - 2 * var(--ecart)) / 3); max-width: none; }
}