/* ==========================================================================
   La Mie Dorée — boulangerie-pâtisserie (site de démonstration)
   Mobile d'abord, puis 640 px, 768 px et 1024 px.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  --couleur-principale: #5C3A21;   /* brun croûte */
  --couleur-principale-fonce: #44291A;
  --couleur-accent: #C8902E;       /* doré */
  --dore-fonce: #8A5A12;           /* doré lisible sur fond clair */
  --dore-clair: #E9B55A;           /* doré lisible sur fond brun */
  --fond: #FBF6EE;                 /* crème */
  --fond-kraft: #F3E6D0;
  --fond-carte: #FFFDF8;
  --fond-sombre: #2E1C10;
  --texte: #3E2716;
  --texte-doux: #6B4E37;
  --texte-clair: #FBF1E1;
  --brique: #A13D2D;
  --vert: #4F7A2B;
  --bordure: #E3D1B3;

  --police-titres: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rayon: 1.25rem;
  --rayon-petit: .75rem;
  --ombre: 0 14px 34px -16px rgba(92, 58, 33, .38);
  --ombre-legere: 0 6px 18px -10px rgba(92, 58, 33, .3);

  --largeur: 72rem;
  --gouttiere: 1rem;
  --espace-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background-color: var(--fond);
  /* Léger grain « papier » */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .23 0 0 0 0 .13 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-bottom: 5rem; /* place pour la barre d'actions mobile */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--couleur-principale); text-underline-offset: .18em; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-family: var(--police-titres);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--couleur-principale);
  text-wrap: balance;
}
h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--dore-fonce);
}
h1 { font-size: clamp(2.35rem, 1.5rem + 3.8vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 2.9rem); }
h3, h4 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--dore-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1100;
  padding: .7rem 1.1rem;
  background: var(--couleur-principale);
  color: #fff;
  border-radius: var(--rayon-petit);
  font-weight: 800;
}
.lien-evitement:focus { top: 4rem; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

/* Les ancres ne passent pas sous le bandeau démo */
section[id], div[id] { scroll-margin-top: 4.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Icônes ---------- */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Surtitre ---------- */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dore-fonce);
}
.surtitre svg { width: .7rem; height: 1.6rem; color: var(--couleur-accent); }
.surtitre--clair { color: var(--dore-clair); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 800 1rem/1.2 var(--police-texte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: none; }

.bouton--plein {
  background: var(--couleur-principale);
  color: #FFF8EC;
  box-shadow: 0 8px 18px -10px rgba(68, 41, 26, .8);
}
.bouton--plein:hover { background: var(--couleur-principale-fonce); }

.bouton--contour {
  background: transparent;
  border-color: var(--couleur-principale);
  color: var(--couleur-principale);
}
.bouton--contour:hover { background: var(--couleur-principale); color: #FFF8EC; }

.bouton--dore {
  background: var(--couleur-accent);
  color: #2E1C10;
}
.bouton--dore:hover { background: var(--dore-clair); }

.bouton--contour-clair {
  border-color: rgba(251, 241, 225, .7);
  color: var(--texte-clair);
}
.bouton--contour-clair:hover { background: var(--texte-clair); color: var(--couleur-principale); }

.bouton--large { width: 100%; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete {
  position: relative;
  z-index: 50;
  background: var(--fond);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding-block: .8rem;
}
.js .entete__barre { flex-wrap: nowrap; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--couleur-principale);
  text-decoration: none;
}
.logo__pastille {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--couleur-principale);
  color: var(--couleur-accent);
  box-shadow: inset 0 0 0 3px var(--fond), inset 0 0 0 4px var(--couleur-accent);
}
.logo__pastille svg { width: .85rem; height: 1.8rem; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo__nom {
  font-family: var(--police-titres);
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo__metier {
  margin-top: .2rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dore-fonce);
  white-space: nowrap;
}

.entete__actions { display: flex; align-items: center; gap: .5rem; }

/* Sur mobile, le téléphone est dans la barre d'actions fixe en bas d'écran */
.entete__tel { display: none; min-height: 2.9rem; padding: .6rem; width: 2.9rem; }
.entete__tel .icone { width: 1.2rem; height: 1.2rem; }
.entete__tel-texte { display: none; }

/* Bouton du menu (affiché seulement si JavaScript est actif) */
.menu-bouton {
  display: none;
  align-items: center;
  gap: .4rem;
  min-height: 2.9rem;
  padding: .5rem .85rem;
  border: 2px solid var(--couleur-principale);
  border-radius: 999px;
  background: transparent;
  color: var(--couleur-principale);
  font: 800 .95rem/1 var(--police-texte);
  cursor: pointer;
}
.js .menu-bouton { display: inline-flex; }
.menu-bouton .icone--fermer { display: none; }
.menu-bouton[aria-expanded="true"] { background: var(--couleur-principale); color: #FFF8EC; }
.menu-bouton[aria-expanded="true"] .icone--fermer { display: block; }
.menu-bouton[aria-expanded="true"] .icone--ouvrir { display: none; }

/* Navigation : sans JS, liste visible ; avec JS, panneau déroulant */
.nav { order: 3; flex-basis: 100%; }
.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  padding: .55rem 0;
  font-weight: 700;
  text-decoration: none;
  color: var(--couleur-principale);
}
.nav a:hover { color: var(--dore-fonce); }

.js .nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: .5rem var(--gouttiere) 1.25rem;
  background: var(--fond);
  border-bottom: 3px solid var(--couleur-accent);
  box-shadow: 0 20px 30px -20px rgba(46, 28, 16, .45);
}
.js .nav.ouvert { display: block; }
.js .nav__liste { flex-direction: column; gap: 0; }
.js .nav__liste a {
  padding: .9rem .25rem;
  border-bottom: 1px dashed var(--bordure);
  font-family: var(--police-titres);
  font-size: 1.25rem;
  font-weight: 500;
}
.js .nav__liste li:last-child a { border-bottom: 0; }

/* Store rayé de devanture, festonné */
.store {
  height: 26px;
  border-top: 4px solid var(--couleur-principale);
  background: repeating-linear-gradient(90deg, var(--couleur-accent) 0 28px, #F7E9CF 28px 56px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle 14px at 50% 0, #000 97%, transparent 100%) 0 12px / 28px 14px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle 14px at 50% 0, #000 97%, transparent 100%) 0 12px / 28px 14px repeat-x;
}

/* ==========================================================================
   Héros
   ========================================================================== */
.heros {
  position: relative;
  padding-block: 2rem 4rem;
  overflow: clip;
}
.heros::before {
  /* tache de « farine » derrière la photo */
  content: "";
  position: absolute;
  right: -20%;
  top: 30%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 144, 46, .18), transparent 65%);
  pointer-events: none;
}
.heros__grille {
  position: relative;
  display: grid;
  gap: 2.75rem;
}
.heros h1 { margin-bottom: .45em; }
.heros__intro {
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--texte-doux);
}

.statut {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.4rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
  font-size: .95rem;
  font-weight: 700;
  color: var(--texte);
}
.statut__point {
  width: .65rem;
  height: .65rem;
  flex: none;
  border-radius: 50%;
  background: var(--couleur-accent);
}
.statut.est-ouvert .statut__point { background: var(--vert); box-shadow: 0 0 0 4px rgba(79, 122, 43, .2); }
.statut.est-ferme .statut__point { background: var(--brique); box-shadow: 0 0 0 4px rgba(161, 61, 45, .18); }

.heros__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.heros__actions .bouton { flex: 1 1 11rem; }

.specialites {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 2px dashed var(--bordure);
}
.specialites li { display: flex; align-items: center; gap: .8rem; font-size: .98rem; }
.specialites__photo {
  width: 3.6rem;
  height: 2.8rem;
  flex: none;
  object-fit: cover;
  border-radius: .8rem;
  background: var(--fond-kraft);
  box-shadow: 0 0 0 2px var(--fond-carte), var(--ombre-legere);
}
.specialites strong { color: var(--couleur-principale); }

/* Photo en arche */
.heros__visuel {
  position: relative;
  width: min(100%, 27rem);
  margin-inline: auto;
  padding-bottom: 1.5rem;
}
.arche {
  margin: 0;
  aspect-ratio: 10 / 11;
  overflow: hidden;
  border: 8px solid var(--couleur-principale);
  border-radius: 50% 50% 1.5rem 1.5rem / 45.45% 45.45% 1.5rem 1.5rem;
  background: var(--fond-sombre); /* le temps que la photo charge */
  box-shadow: 0 0 0 6px var(--fond), 0 0 0 8px var(--couleur-accent), var(--ombre);
}
.arche img { width: 100%; height: 100%; object-fit: cover; }

.sceau {
  position: absolute;
  left: -.25rem;
  bottom: 0;
  width: clamp(6.5rem, 26vw, 8rem);
  filter: drop-shadow(0 8px 14px rgba(46, 28, 16, .35));
}
.sceau text { font-family: var(--police-texte); }
.sceau .sceau__annee { font-family: var(--police-titres); }
.sceau__texte { transform-origin: 60px 60px; }

.etiquette {
  position: absolute;
  right: 0;
  top: 12%;
  max-width: 10.5rem;
  margin: 0;
  padding: .7rem .9rem .75rem 1.4rem;
  background: var(--fond-carte);
  border-radius: .6rem;
  box-shadow: var(--ombre);
  font-size: .85rem;
  line-height: 1.35;
  font-weight: 600;
  transform: rotate(3deg);
  clip-path: polygon(.8rem 0, 100% 0, 100% 100%, .8rem 100%, 0 50%);
}
.etiquette::before {
  content: "";
  position: absolute;
  left: .65rem;
  top: 50%;
  width: .4rem;
  height: .4rem;
  margin-top: -.2rem;
  border-radius: 50%;
  background: var(--fond-kraft);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.etiquette__titre {
  display: block;
  margin-bottom: .15rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dore-fonce);
}

/* ==========================================================================
   Sections communes
   ========================================================================== */
.section { padding-block: var(--espace-section); }
.section__entete { max-width: 44rem; margin-bottom: 2.5rem; }
.section__entete > p:not(.surtitre) { color: var(--texte-doux); font-size: 1.1rem; }
.section__entete--centre { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Produits
   ========================================================================== */
.produits { position: relative; }

.raccourcis { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.raccourcis a {
  padding: .5rem 1rem;
  border: 1.5px solid var(--bordure);
  border-radius: 999px;
  background: var(--fond-carte);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.raccourcis a:hover { border-color: var(--couleur-accent); background: #FDF0D8; }

.categorie + .categorie { margin-top: 3.25rem; }
.categorie__entete {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 2px dashed var(--bordure);
}
.categorie__entete h3 { margin-bottom: .15rem; font-size: 1.6rem; }
.categorie__entete p { margin: 0; color: var(--texte-doux); }
.categorie__numero {
  font-family: var(--police-titres);
  font-size: 3.2rem;
  font-style: italic;
  font-weight: 600;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--couleur-accent);
}

.cartes {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carte {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
  transition: transform .25s, box-shadow .25s;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }

/* Photo en haut de carte, toujours au même format */
.carte__visuel {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--fond-kraft); /* le temps que la photo charge */
}
.carte__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.carte:hover .carte__visuel img { transform: scale(1.06); }

.carte__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .9rem 1rem 1rem;
}
.carte__corps h4 { margin-bottom: .3rem; font-size: 1.15rem; }
.carte__corps p { margin-bottom: .7rem; font-size: .95rem; line-height: 1.5; color: var(--texte-doux); }

.pastille {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--couleur-principale);
  color: #FBEBD0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Prix en forme d'étiquette */
.carte__corps .prix {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  margin: auto 0 0;
  padding: .25rem .8rem .25rem 1.35rem;
  background: #F7E4BE;
  color: var(--couleur-principale);
  clip-path: polygon(.75rem 0, 100% 0, 100% 100%, .75rem 100%, 0 50%);
  border-radius: 0 .4rem .4rem 0;
}
.prix::before {
  content: "";
  position: absolute;
  left: .6rem;
  top: 50%;
  width: .35rem;
  height: .35rem;
  margin-top: -.175rem;
  border-radius: 50%;
  background: var(--fond-carte);
}
.prix span { font-family: var(--police-titres); font-size: 1.15rem; font-weight: 700; }
.prix small { font-size: .78rem; font-weight: 700; color: var(--texte-doux); }

.note-prix {
  margin: 2rem 0 0;
  font-size: .9rem;
  font-style: italic;
  color: var(--texte-doux);
}

/* ==========================================================================
   Gâteaux sur commande (bande brune festonnée)
   ========================================================================== */
.gateaux {
  position: relative;
  margin-block: 14px;
  background-color: var(--couleur-principale);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(200, 144, 46, .25), transparent 40%),
    radial-gradient(rgba(251, 241, 225, .07) 1.5px, transparent 2px);
  background-size: 100% 100%, 22px 22px;
  color: var(--texte-clair);
}
.gateaux::before,
.gateaux::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-size: 28px 14px;
  background-repeat: repeat-x;
}
.gateaux::before {
  top: -13px;
  background-image: radial-gradient(circle 14px at 50% 100%, var(--couleur-principale) 97%, transparent 100%);
}
.gateaux::after {
  bottom: -13px;
  background-image: radial-gradient(circle 14px at 50% 0, var(--couleur-principale) 97%, transparent 100%);
}

.gateaux h2, .gateaux h3 { color: #FFF6E6; }
.gateaux h2 em { color: var(--dore-clair); }
.gateaux__grille { display: grid; gap: 3rem; }
.gateaux__intro { max-width: 36rem; font-size: 1.1rem; color: #F1E0C6; }

.occasions {
  display: grid;
  gap: .75rem;
  margin: 1.75rem 0 2.25rem;
  padding: 0;
  list-style: none;
}
.occasions li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(251, 241, 225, .16);
  border-radius: var(--rayon-petit);
  background: rgba(46, 28, 16, .22);
  line-height: 1.35;
  font-size: .95rem;
  color: #EAD7BA;
}
.occasions strong { display: block; color: #FFF6E6; font-size: 1rem; }
.occasions__icone {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--dore-clair);
  color: var(--dore-clair);
}

.etapes {
  display: grid;
  gap: .9rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etapes li {
  position: relative;
  padding-left: 3rem;
  counter-increment: etape;
  color: #EAD7BA;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--couleur-accent);
  color: #2E1C10;
  font-family: var(--police-titres);
  font-weight: 700;
}
.etapes strong { color: #FFF6E6; }

.gateaux__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.gateaux__actions .bouton { flex: 1 1 13rem; }

.gateaux__visuel { display: grid; gap: 1.75rem; align-content: start; }
/* Photo du gâteau, en arche comme celle du héros */
.gateau-photo {
  width: min(100% - 1rem, 26rem);
  margin: .5rem auto 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 6px solid var(--fond);
  border-radius: 50% 50% var(--rayon) var(--rayon) / 40% 40% var(--rayon) var(--rayon);
  background: var(--fond-kraft);
  box-shadow: 0 0 0 6px var(--couleur-principale), 0 0 0 8px var(--dore-clair), 0 26px 40px -22px rgba(0, 0, 0, .7);
}
.gateau-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

.tarifs {
  display: grid;
  gap: 0;
  margin: 0;
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.tarifs div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 1.2rem;
}
.tarifs div + div { border-top: 1px dashed var(--bordure); }
.tarifs dt { font-family: var(--police-titres); font-weight: 600; font-size: 1.1rem; color: var(--couleur-principale); }
.tarifs dd { margin: 0; font-weight: 700; color: var(--dore-fonce); text-align: right; }

.gateaux__delai {
  display: flex;
  gap: .6rem;
  margin: 0;
  font-size: .95rem;
  color: #EAD7BA;
}
.gateaux__delai .icone { margin-top: .15rem; color: var(--dore-clair); }

/* ==========================================================================
   Notre histoire
   ========================================================================== */
.histoire { background-color: var(--fond-kraft); }
.histoire__grille { display: grid; gap: 2.75rem; align-items: center; }
.histoire__visuel { width: min(100%, 26rem); margin: 0 auto; }
.histoire__photos { position: relative; padding: 0 1.25rem 1.25rem 0; }
/* Petite photo ronde posée sur le coin de l'arche */
.histoire__medaillon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(6.5rem, 30vw, 9rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--fond-kraft);
  background: var(--fond-sombre);
  box-shadow: var(--ombre);
}
.histoire__visuel figcaption {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--police-titres);
  font-style: italic;
  color: var(--texte-doux);
}
.histoire__texte > p { max-width: 38rem; }

.frise {
  position: relative;
  display: grid;
  gap: 1.1rem;
  margin: 2rem 0;
  padding: 0 0 0 1.6rem;
  list-style: none;
}
.frise::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .4rem;
  bottom: .4rem;
  border-left: 2px dashed var(--couleur-accent);
}
.frise li { position: relative; }
.frise li::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: .35rem;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: var(--fond-kraft);
  border: 3px solid var(--couleur-principale);
}
.frise__annee {
  font-family: var(--police-titres);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dore-fonce);
}
.frise p { margin: .1rem 0 0; }

.signature {
  font-family: var(--police-titres);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--couleur-principale);
  margin: 0;
}
.signature::before { content: "— "; color: var(--couleur-accent); }

/* ==========================================================================
   Avis
   ========================================================================== */
.note-globale {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .8rem;
  margin: .5rem 0 0;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
}
.section__entete .note-globale { color: var(--texte); font-size: 1rem; }
.note-globale__chiffre { font-family: var(--police-titres); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--couleur-principale); }
.note-globale__texte { font-weight: 600; }

.etoiles { display: inline-flex; gap: .15rem; color: var(--couleur-accent); }
.etoiles svg { width: 1.15rem; height: 1.15rem; }

.temoignages {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.temoignage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
}
.temoignage::before {
  content: "“";
  position: absolute;
  right: 1.1rem;
  top: -.4rem;
  font-family: var(--police-titres);
  font-size: 6rem;
  line-height: 1;
  color: var(--fond-kraft);
}
.temoignage blockquote { position: relative; margin: .9rem 0 1.2rem; }
.temoignage blockquote p {
  margin: 0;
  font-family: var(--police-titres);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--texte);
}
.temoignage__auteur {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--bordure);
  font-size: .92rem;
  line-height: 1.3;
  color: var(--texte-doux);
}
.temoignage__auteur strong { display: block; color: var(--couleur-principale); font-size: 1rem; }
.temoignage__initiale {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--couleur-accent);
  color: #2E1C10;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 1.15rem;
}

/* ==========================================================================
   Bandeau photo de la boutique (texte sur photo + voile)
   ========================================================================== */
.bandeau-photo {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(22rem, 55vw, 30rem);
  margin: 0;
  overflow: hidden;
  background: var(--fond-sombre);
}
.bandeau-photo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* Voile dégradé : garde le texte lisible quelle que soit la photo */
.bandeau-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(46, 28, 16, .94) 0%, rgba(46, 28, 16, .78) 42%, rgba(46, 28, 16, .2) 100%);
}
.bandeau-photo__texte {
  position: relative;
  z-index: 2;
  padding-block: 3rem 2.75rem;
}
.bandeau-photo__phrase {
  max-width: 32rem;
  margin-bottom: .6rem;
  font-family: var(--police-titres);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  color: #FFF6E6;
  text-wrap: balance;
}
.bandeau-photo__phrase em { font-weight: 500; color: var(--dore-clair); }
.bandeau-photo__detail { margin: 0; font-weight: 700; color: #F1E0C6; }

/* ==========================================================================
   Horaires & accès
   ========================================================================== */
.horaires { background-color: var(--fond-kraft); }
.horaires__grille { display: grid; gap: 2.5rem; }
.statut--carte { margin-bottom: 1.2rem; }

.tableau-horaires {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
}
.tableau-horaires th,
.tableau-horaires td {
  padding: .8rem 1.1rem;
  border-bottom: 1px dashed var(--bordure);
  text-align: left;
}
.tableau-horaires tr:last-child th,
.tableau-horaires tr:last-child td { border-bottom: 0; }
.tableau-horaires th { font-weight: 700; color: var(--couleur-principale); }
.tableau-horaires td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau-horaires .ferme td { color: var(--brique); font-weight: 800; }
.tableau-horaires .aujourdhui th,
.tableau-horaires .aujourdhui td { background: #FDF0D8; }
.tableau-horaires .aujourdhui th { box-shadow: inset 4px 0 0 var(--couleur-accent); }
.badge-jour {
  display: inline-block;
  margin-left: .5rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--couleur-principale);
  color: #FBEBD0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .12em;
}
.horaires__note { margin: 1rem 0 0; font-size: .92rem; color: var(--texte-doux); }

.plan {
  position: relative;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 6px solid var(--fond-carte);
  box-shadow: var(--ombre);
}
.plan svg { width: 100%; height: auto; font-family: var(--police-texte); }
.plan figcaption {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  font-size: .75rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.adresse {
  margin-bottom: 1rem;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5;
}
.adresse strong { font-family: var(--police-titres); font-size: 1.3rem; color: var(--couleur-principale); }

.acces__liste { display: grid; gap: .55rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.acces__liste li { display: flex; align-items: flex-start; gap: .6rem; }
.acces__liste .icone { margin-top: .15rem; color: var(--dore-fonce); }

.acces__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.acces__actions .bouton { flex: 1 1 10rem; }

/* ==========================================================================
   Contact / formulaire
   ========================================================================== */
.contact__grille { display: grid; gap: 2.5rem; }
.contact__intro > p { color: var(--texte-doux); font-size: 1.1rem; max-width: 34rem; }

.carte-contact {
  display: grid;
  gap: .25rem;
  margin-top: 1.75rem;
  padding: .6rem;
  border-radius: var(--rayon);
  background: var(--fond-kraft);
}
.carte-contact__ligne {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0;
  padding: .7rem .7rem;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  color: var(--couleur-principale);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
a.carte-contact__ligne:hover { background: var(--fond-carte); }
.carte-contact__ligne small {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dore-fonce);
}
.carte-contact__icone {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--couleur-principale);
  color: var(--fond);
}

.formulaire {
  padding: 1.5rem 1.25rem;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--ombre);
  border-top: 6px solid var(--couleur-accent);
}
.formulaire__aide { font-size: .9rem; color: var(--texte-doux); }
.champs-duo { display: grid; gap: 0 1rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; margin-bottom: .35rem; font-weight: 700; color: var(--couleur-principale); }
.champ label span { color: var(--brique); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .95rem;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: #FFFFFF;
  font: inherit;
  color: var(--texte);
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--couleur-principale);
  box-shadow: 0 0 0 4px rgba(200, 144, 46, .3);
}
.champ__aide { margin: .35rem 0 0; font-size: .85rem; color: var(--texte-doux); }

.champ--case { display: flex; align-items: flex-start; gap: .7rem; }
.champ--case input {
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  margin: .2rem 0 0;
  flex: none;
  accent-color: var(--couleur-principale);
}
.champ--case label { font-weight: 400; font-size: .92rem; color: var(--texte); }

.formulaire__demo {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .85rem;
  font-style: italic;
  color: var(--texte-doux);
}
.formulaire__message {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: var(--rayon-petit);
  background: #EEF3E4;
  border-left: 5px solid var(--vert);
  color: #2F4A18;
  font-weight: 700;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied {
  position: relative;
  margin-top: 14px;
  padding-top: 3.5rem;
  background: var(--fond-sombre);
  color: #E7D6BC;
  font-size: .98rem;
}
.pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  height: 14px;
  background: radial-gradient(circle 14px at 50% 100%, var(--fond-sombre) 97%, transparent 100%) 0 0 / 28px 14px repeat-x;
}
.pied a { color: #FBE7C4; }
.pied a:hover { color: var(--dore-clair); }
.pied :focus-visible { outline-color: var(--dore-clair); }
.pied__grille { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
.logo--clair { color: #FFF6E6; margin-bottom: 1rem; }
.logo--clair .logo__pastille { box-shadow: inset 0 0 0 3px var(--fond-sombre), inset 0 0 0 4px var(--couleur-accent); }
.logo--clair .logo__metier { color: var(--dore-clair); }
.pied__marque p:last-child { max-width: 22rem; }
.pied__titre {
  margin-bottom: .8rem;
  font-family: var(--police-texte);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dore-clair);
}
.pied__reseaux { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pied__reseaux a { display: inline-flex; align-items: center; gap: .5rem; padding-block: .2rem; }

.mentions {
  padding-block: 2rem;
  border-top: 1px solid rgba(231, 214, 188, .15);
  font-size: .88rem;
  color: #CDB89A;
}
.mentions__grille { display: grid; gap: .25rem 2rem; }
.mentions strong { color: #E7D6BC; }

.pied__bas {
  padding-block: 1.2rem;
  border-top: 1px solid rgba(231, 214, 188, .15);
  font-size: .88rem;
  color: #CDB89A;
}
.pied__bas-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.pied__bas p { margin: 0; }

/* ---------- Barre d'actions fixe (mobile) ---------- */
.barre-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  padding: .6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 246, 238, .96);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -10px 24px -16px rgba(46, 28, 16, .5);
}
.barre-actions .bouton { min-height: 2.9rem; padding-inline: .6rem; font-size: .95rem; }
.barre-actions .bouton--contour { background: var(--fond-carte); }
@supports (backdrop-filter: blur(8px)) {
  .barre-actions { background: rgba(251, 246, 238, .85); backdrop-filter: blur(8px); }
}

/* ---------- Apparitions au défilement (seulement si JS) ---------- */
.js .apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .apparition.visible { opacity: 1; transform: none; }

/* ---------- Animation décorative du sceau ---------- */
@keyframes tourner { to { transform: rotate(360deg); } }
.sceau__texte { animation: tourner 36s linear infinite; }

/* ==========================================================================
   Tablettes (≥ 640 px)
   ========================================================================== */
@media (min-width: 640px) {
  .cartes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .carte__corps { padding: 1.1rem 1.25rem 1.3rem; }
  .occasions { grid-template-columns: repeat(2, 1fr); }
  .champs-duo { grid-template-columns: repeat(2, 1fr); }
  .formulaire { padding: 2rem; }
  .temoignages { grid-template-columns: repeat(2, 1fr); }
  .mentions__grille { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Tablettes larges (≥ 768 px)
   ========================================================================== */
@media (min-width: 768px) {
  :root { --gouttiere: 1.5rem; }
  body { padding-bottom: 0; }
  .barre-actions { display: none; }

  .logo__nom { font-size: 1.55rem; }
  .logo__metier { font-size: .68rem; }
  .logo__pastille { width: 3rem; height: 3rem; }

  .entete__tel { display: inline-flex; width: auto; padding: .6rem 1.1rem; }
  .logo__metier { letter-spacing: .16em; }
  .entete__tel-texte { display: inline; }
  .entete__tel-cache { display: none; }

  .heros { padding-block: 3rem 5rem; }
  .specialites { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .specialites li { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .specialites__photo { width: 4.4rem; height: 3.3rem; }

  .etiquette { right: -1rem; }
  .sceau { left: -1.5rem; }

  .horaires__grille { grid-template-columns: repeat(2, 1fr); align-items: start; gap: 3rem; }
  .contact__grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ordinateurs (≥ 1024 px)
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --gouttiere: 2rem; }

  /* Menu en ligne, sans bouton */
  .js .menu-bouton { display: none; }
  .nav { order: 0; flex-basis: auto; }
  .js .nav {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .js .nav__liste,
  .nav__liste { flex-direction: row; flex-wrap: nowrap; gap: 1.5rem; }
  .js .nav__liste a {
    position: relative;
    padding: .5rem 0;
    border: 0;
    font-family: var(--police-texte);
    font-size: .98rem;
    font-weight: 700;
  }
  .nav__liste a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .15rem;
    height: 2px;
    background: var(--couleur-accent);
    transform: scaleX(0);
    transition: transform .25s;
  }
  .nav__liste a:hover::after { transform: scaleX(1); }

  .heros { padding-block: 4rem 6rem; }
  .heros__grille { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 4rem; }
  .heros__visuel { width: 100%; max-width: 29rem; }
  .heros__actions .bouton { flex: 0 0 auto; }

  .cartes { grid-template-columns: repeat(4, 1fr); }

  .gateaux__grille { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
  .gateaux__actions .bouton { flex: 0 0 auto; }

  .histoire__grille { grid-template-columns: .9fr 1.1fr; gap: 5rem; }

  /* Texte à gauche, voile qui s'éclaircit vers la droite */
  .bandeau-photo { align-items: center; }
  .bandeau-photo::before {
    background: linear-gradient(90deg, rgba(46, 28, 16, .92) 0%, rgba(46, 28, 16, .78) 38%, rgba(46, 28, 16, .1) 75%);
  }

  .temoignages { grid-template-columns: repeat(3, 1fr); }
  .temoignage:nth-child(2) { transform: translateY(1.5rem); }
  .js .temoignage.apparition.visible:nth-child(2) { transform: translateY(1.5rem); }

  .horaires__grille { grid-template-columns: .9fr 1.1fr; gap: 4rem; }

  .contact__grille { grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
  .contact__intro { position: sticky; top: 4rem; }

  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr .8fr; }
}

/* Entre 1024 et 1199 px : bouton téléphone réduit à l'icône pour laisser la place au menu */
@media (min-width: 1024px) and (max-width: 1199px) {
  .entete__tel { width: 2.9rem; padding: .6rem; }
  .entete__tel-texte { display: none; }
  .entete__tel-cache { display: inline; }
  .js .nav__liste, .nav__liste { gap: 1.2rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .apparition { opacity: 1; transform: none; }
  .bouton:hover, .carte:hover, .carte:hover .carte__visuel img { transform: none; }
}