/* ============================================================
   Le Fournil des Sept Portes — boulangerie.

   Deuxième version. La première partait d'un bleu émaillé pour fuir le cliché
   crème et terre cuite : le site ressemblait à un site de bord de mer, ce qui
   n'est pas le métier. Les couleurs viennent maintenant de la matière, comme
   les boulangeries de référence le font (Bluebird Bakery, Fabrique, Firebrand) :
   le parchemin de la farine, le brun de la croûte, et le pain lui-même qui
   apporte la seule couleur vive. Deux teintes dominantes, pas davantage.

   Serif humaniste pour les titres, parce que c'est ce que portent les enseignes
   du métier, et des photographies en grand plutôt que des aplats.
   Aucun angle entièrement arrondi : ni bouton, ni badge en pilule.

   Contrastes mesurés (WCAG AA) :
     croûte #3d2416 sur parchemin #fbf4e6 : 13,1:1
     gris   #6b5744 sur parchemin         :  6,3:1
     blé    #7d5110 sur parchemin         :  6,3:1
     parchemin sur croûte                 : 13,1:1
     parchemin sur blé (boutons)          :  6,3:1
     parchemin sur noir de four #1c1613   : 16,4:1
   ============================================================ */

@font-face {
  font-family: 'Spectral';
  src: url('/src/fonts/Spectral-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('/src/fonts/Spectral-600.woff2') format('woff2');
  font-weight: 600;
  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 {
  --parchemin: #fbf4e6;
  --creme: #f3e9d6;
  --croute: #3d2416;
  --four: #1c1613;
  --ble: #7d5110;
  --gris: #6b5744;
  --trait: #e2d4ba;

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

  --titre: 'Spectral', Georgia, 'Times New Roman', 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(--parchemin);
  color: var(--croute);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0 0 0.55em;
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.2em; }

.conteneur { width: min(100%, 76rem); 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(--croute); color: var(--parchemin); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--ble); 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; 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 : noir de four, l'enseigne en serif --- */

.entete { position: relative; z-index: 40; background: var(--four); color: var(--parchemin); }
.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: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; }
.marque__baseline { display: block; margin-top: 0.1rem; color: #c3b49a; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }

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

.entete__bouton { display: none; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid rgba(251,244,230,0.4); color: inherit; cursor: pointer; }
.entete__barres, .entete__barres::before, .entete__barres::after { display: block; width: 20px; 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.9rem; border-bottom: 1px solid rgba(251,244,230,0.18); }
}

/* --- Ouverture : la devanture en pleine largeur, le titre posé dessus --- */

.ouverture { position: relative; background: var(--four); }

.ouverture__image img {
  width: 100%;
  height: clamp(26rem, 76vh, 44rem);
  object-fit: cover;
  filter: brightness(0.78) saturate(1.05);
}

/* Voile dégradé plutôt qu'un assombrissement général : la photographie garde
   sa lumière en haut, et le texte posé en bas tient son contraste quelle que
   soit la devanture mise à sa place après la vente. */
.ouverture::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 12, 9, 0.94) 0%, rgba(18, 12, 9, 0.82) 32%, rgba(18, 12, 9, 0.28) 62%, rgba(18, 12, 9, 0.12) 100%);
  content: '';
  pointer-events: none;
}

.ouverture__texte { z-index: 2; }

.ouverture__texte {
  position: absolute;
  inset: auto 0 0 0;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  color: var(--parchemin);
}

.ouverture__texte > * { max-width: 44rem; }
.ouverture h1 { color: var(--parchemin); margin-bottom: 0.3em; }
.ouverture .chapo { color: #e8dcc6; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

.surtitre { margin-bottom: 0.9rem; font-family: var(--texte); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ble); }
.ouverture .surtitre { color: #e2b765; }

.chapo { color: var(--gris); font-size: 1.15rem; }

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

/* --- Boutons : angles droits, jamais de pilule --- */

.bouton {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: 0.8rem 1.7rem;
  background: var(--ble); color: var(--parchemin);
  border: 0; border-radius: 0;
  font-family: var(--texte); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease;
}

.bouton:hover, .bouton:focus-visible { background: #603d0b; }
.bouton--clair { background: var(--parchemin); color: var(--croute); }
.bouton--clair:hover, .bouton--clair:focus-visible { background: #fff; }
.ouverture .bouton { background: var(--parchemin); color: var(--croute); }
.ouverture .bouton:hover { background: #fff; }

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

/* --- Sections --- */

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

.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(--croute); color: var(--parchemin); }
.entete-page h1 { color: var(--parchemin); }
.entete-page .surtitre { color: #e2b765; }
.entete-page .chapo { color: #e3d6bf; }
.entete-page__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.entete-page--image .entete-page__inner { grid-template-columns: 1.3fr 1fr; align-items: center; }
.entete-page__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

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

/* --- Bande de chiffres, sur le noir de four --- */

.bande-chiffres { background: var(--four); color: var(--parchemin); }
.chiffres { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); margin: 0; padding-block: clamp(2.2rem, 4vw, 3rem); list-style: none; }
.chiffres li { flex: 0 1 10rem; text-align: center; }
.chiffres__valeur { display: block; font-family: var(--titre); font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 600; line-height: 1; }
.chiffres__libelle { display: block; margin-top: 0.5rem; color: #c3b49a; font-size: 0.95rem; }

/* --- Texte et photographie côte à côte --- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo--inverse > :first-child { order: 2; }
.duo__texte > :last-child { margin-bottom: 0; }
.duo__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo figure { margin: 0; }
.duo figcaption { margin-top: 0.7rem; color: var(--gris); font-size: 0.9rem; }

@media (max-width: 55.99em) {
  .duo { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
}

/* --- Les pains : photographie, nom, poids, prix --- */

.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; }

@media (max-width: 47.99em) { .pains { grid-template-columns: 1fr; } }

.pain { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: start; }
.pain img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pain h3 { margin-bottom: 0.15rem; }
.pain__ligne { margin-bottom: 0.5rem; color: var(--ble); font-weight: 700; }
.pain p:last-child { margin-bottom: 0; color: var(--gris); }

@media (max-width: 29.99em) { .pain { grid-template-columns: 6rem 1fr; gap: 1rem; } }

/* --- Bandeau photographique pleine largeur --- */

.bande-photo { position: relative; }
.bande-photo img { width: 100%; height: clamp(16rem, 40vw, 28rem); object-fit: cover; }

/* --- Cartes, étapes, listes --- */

.cartes, .etapes, .formules { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ecart); margin: 0; padding: 0; list-style: none; }
.cartes > li, .etapes > li { flex: 1 1 18rem; max-width: 26rem; }
.formules > li { flex: 1 1 17rem; max-width: 24rem; }

.carte { padding: 1.6rem 0 0; border-top: 3px solid var(--croute); }
.carte p, .etapes p { margin-bottom: 0; color: var(--gris); }
.etapes__num { display: block; margin-bottom: 0.4rem; color: var(--ble); font-family: var(--titre); font-size: 2.4rem; font-weight: 600; line-height: 1; }

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

.formule { display: flex; flex-direction: column; padding: 1.6rem 0 0; border-top: 3px solid var(--croute); }
.formule--vedette { border-top-color: var(--ble); }
.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.9rem; font-weight: 400; }
.formule__pour { color: var(--gris); }
.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.2rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.1rem; }
.faq summary::after { color: var(--ble); content: '+'; font-size: 1.5rem; }
.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.95rem; font-weight: 700; }
.champ input, .champ select, .champ textarea { min-height: 52px; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--trait); border-radius: 0; color: var(--croute); font: inherit; }
.champ textarea { min-height: 9rem; resize: vertical; }
.mention { color: var(--gris); font-size: 0.9rem; }

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

/* --- Maillage --- */

.maillage { padding-block: 0 var(--rythme); }
.maillage__titre { font-family: var(--texte); font-size: 0.85rem; letter-spacing: 0.16em; 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(--ble); text-underline-offset: 5px; }

/* --- Bandeau d'appel --- */

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

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

.pied { padding-block: var(--rythme) 2rem; background: var(--four); color: var(--parchemin); }
.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.3rem; font-weight: 600; }
.pied__titre { margin-bottom: 0.9rem; color: #c3b49a; font-family: var(--texte); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.pied__texte { color: #d6c8b0; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: 0.55rem; }
.pied li a, .pied__texte a { color: #d6c8b0; text-underline-offset: 4px; }
.pied li a:hover, .pied__texte a:hover { color: var(--parchemin); }

.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 rgba(251,244,230,0.2); color: #c3b49a; font-size: 0.88rem; }
.pied__bas p { margin: 0; }
.pied__credit a { text-decoration: underline; text-underline-offset: 3px; }

/* Crédits des photographies : obligatoire pour les licences CC BY et CC BY-SA. */
.credits { margin: 1.5rem 0 0; color: #a2927a; font-size: 0.8rem; line-height: 1.6; }
.credits a { color: #c3b49a; }

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

/* Rangées symétriques : modificateur posé par le gabarit d'après le nombre
   d'éléments. 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; }
}