@charset "utf-8";

/* ==================================================================
   Que du Lin — feuille de style du site public

   Direction : le vocabulaire du lin.
   · Palette prise sur le rouissage (vert-gris des tiges couchées au champ)
     plutôt que sur un duo crème / terracotta.
   · Motif « andain » : fines verticales parallèles, à la fois les rangs de
     lin couchés dans le champ et la chaîne d'un tissage. Il sépare les
     sections et structure le hero. C'est la signature de la page.
   · Fraunces pour l'affichage (terminaisons douces, faites main),
     Archivo pour le texte courant et les données techniques.
   ================================================================== */

/* ---------- Jetons ---------- */

:root {
  --lin-cru: #e9e3d6;
  --lin-clair: #f2eee5;
  --papier: #fbf9f4;
  --teille: #c9bba3;
  --teille-clair: #ded3bf;

  --rouissage: #7e8a66;
  --rouissage-fonce: #5d6849;

  --encre: #1e2118;
  --encre-doux: #5c614f;
  --encre-tres-doux: #8a8d7c;

  --lin-bleu: #2f7c8f;
  --roseau: #c08b7d;
  --alerte: #a8503c;

  --display: 'Fraunces', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --texte: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --pas: 0.5rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur: 82rem;
  --largeur-texte: 38rem;

  --transition: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Réinitialisation ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Filet de sécurité : un élément qui déborderait un peu à droite (photo,
     transformation décorative...) ne doit jamais faire apparaître de
     défilement horizontal ni forcer un zoom arrière sur mobile. */
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--lin-clair);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
iframe {
  max-width: 100%;
  display: block;
}

/* Une classe posant `display` l'emporterait sinon sur l'attribut `hidden`. */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--lin-bleu);
  outline-offset: 3px;
}

/* ---------- Utilitaires ---------- */

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

.enveloppe--etroite {
  width: min(100% - 2 * var(--gouttiere), 58rem);
  margin-inline: auto;
}

.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rouissage-fonce);
  color: var(--papier);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.saut-contenu:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Signature : les andains — rangs de lin couchés, chaîne du tissage. */
.andain {
  height: 1.75rem;
  background-image: repeating-linear-gradient(90deg, var(--teille) 0 1px, transparent 1px 10px);
  opacity: 0.75;
}
.andain--fin {
  height: 0.85rem;
  background-image: repeating-linear-gradient(90deg, var(--teille) 0 1px, transparent 1px 7px);
}
.andain--clair {
  background-image: repeating-linear-gradient(90deg, rgba(251, 249, 244, 0.55) 0 1px, transparent 1px 10px);
  opacity: 1;
}

.surtitre {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  margin: 0 0 1rem;
  display: block;
}

.mesure {
  max-width: var(--largeur-texte);
}

/* ---------- Boutons ---------- */

.bouton {
  --fond: var(--rouissage-fonce);
  --texte-bouton: var(--papier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  background: var(--fond);
  color: var(--texte-bouton);
  border: 1px solid var(--fond);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.bouton:hover {
  --fond: var(--encre);
}

.bouton--clair {
  --fond: transparent;
  --texte-bouton: var(--encre);
  border-color: currentColor;
}
.bouton--clair:hover {
  --fond: var(--rouissage-fonce);
  --texte-bouton: var(--papier);
  border-color: var(--rouissage-fonce);
}

.bouton--sur-photo {
  --fond: var(--papier);
  --texte-bouton: var(--encre);
}
.bouton--sur-photo:hover {
  --fond: var(--rouissage-fonce);
  --texte-bouton: var(--papier);
}

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

.bouton[disabled],
.bouton[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.lien-souligne {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--teille);
  padding-bottom: 0.35rem;
  transition: border-color var(--transition);
}
.lien-souligne:hover { border-color: var(--encre); }

/* ---------- En-tête ---------- */

.bandeau {
  background: var(--rouissage-fonce);
  color: var(--lin-cru);
}
.bandeau__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
.bandeau__texte {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0;
}
.bandeau .langues__bouton { min-height: auto; padding: 0.2rem 0; }

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lin-clair);
  border-bottom: 1px solid var(--teille-clair);
}

/* Les `var(--x, y)` de cette section sont pilotés depuis Administration →
   Apparence. La seconde valeur est celle d'origine : sans réglage
   enregistré, le site garde exactement son apparence actuelle. */
.entete__interieur {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--entete-marge, 0.6rem) 0;
}

/* Titre et sous-titre sur la même ligne, étirés sur toute la largeur
   disponible (la recherche/panier vient se poser par-dessus, à droite). */
.marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1.5rem;
  padding-right: clamp(6rem, 13vw, 10rem);
  text-decoration: none;
  transform: translateX(var(--marque-bloc-decalage, -4rem));
}

/* Bandeau du menu principal : bande pleine largeur, sous le bloc titre. */
.entete__menu {
  background: var(--lin-cru);
  border-top: 1px solid var(--teille-clair);
}

.marque__bloc {
  display: flex;
  flex-direction: column;
  /* Décalage appliqué une seule fois ici, au bloc entier : titre et sous-
     titre n'ont pas la même largeur, le même pourcentage sur chacun les
     déplacerait de quantités différentes et les désaligneraient. */
  transform: translateX(var(--marque-decalage, 50%));
}

.marque__nom {
  font-family: var(--display);
  font-size: var(--marque-taille, 3.3rem);
  font-weight: var(--marque-graisse, 650);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: var(--marque-interlettre, 0.14em);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.marque__metier {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  white-space: nowrap;
  margin-top: 0.35rem;
}

.marque__baseline {
  font-size: var(--baseline-taille, 0.72rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  white-space: nowrap;
  transform: translateX(var(--baseline-decalage, -80%));
}

.navigation {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.2vw, 1.1rem);
}
.navigation--fin {
  justify-content: flex-end;
  /* Superposée à droite plutôt que dans sa propre colonne, pour laisser
     le titre se centrer sur toute la largeur de l'entête. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
/* Une seule ligne, pleine largeur, dans le bandeau .entete__menu. */
.navigation--principale {
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(1.25rem, 3.5vw, var(--menu-espace, 3rem));
  padding: 0.65rem 0;
}

.navigation a,
.navigation button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--menu-taille, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
/* Petites icônes devant les libellés du menu et du panier. */
.nav-icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.navigation a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rouissage-fonce);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.navigation a:hover::after,
.navigation a[aria-current='page']::after {
  transform: scaleX(1);
}

/* Recherche : bouton + panneau dépliant, sur le même principe que le
   sélecteur de langue juste à côté. */
.recherche__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--encre);
}
.recherche__bouton svg { width: 1.05rem; height: 1.05rem; }
/* Point d'ancrage propre au bouton (pas au bloc recherche/panier tout
   entier, qui lui est décalé avec `transform` pour se centrer verticalement) :
   sans ça, le panneau hérite de ce décalage et peut chevaucher visuellement
   la ligne du menu juste en dessous. Voir aussi le calcul en JavaScript
   (site.js) qui ajuste sa position pour toujours passer sous tout l'en-tête. */
.recherche { position: relative; }
.recherche__panneau {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  display: none;
  align-items: stretch;
  gap: 0.4rem;
  background: var(--papier);
  border: 1px solid var(--teille-clair);
  padding: 0.5rem;
  z-index: 50;
  /* Ne dépend jamais uniquement de la position d'ancrage : ne peut pas
     dépasser la largeur de l'écran moins une marge, même sur un mobile étroit. */
  width: min(22rem, calc(100vw - 2rem));
}
.recherche[data-ouvert='true'] .recherche__panneau { display: flex; }
.recherche__panneau input {
  flex: 1;
  min-width: 0;
  border-color: var(--teille);
}
.recherche__panneau button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  background: var(--rouissage-fonce);
  color: var(--papier);
  border: 0;
  cursor: pointer;
}
.recherche__panneau button svg { width: 1rem; height: 1rem; }

.panier-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
}

.panier-pastille {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--rouissage);
  color: var(--papier);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Sélecteur de langue */

.langues {
  position: relative;
}
.langues__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
}
.langues__drapeau {
  width: 1.15rem;
  height: 0.86rem;
  flex-shrink: 0;
  border-radius: 2px;
  outline: 1px solid rgba(30, 33, 24, 0.14);
  outline-offset: -0.5px;
}
.langues__liste {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 11rem;
  background: var(--papier);
  border: 1px solid var(--teille-clair);
  padding: 0.4rem;
  display: none;
  z-index: 50;
}
.langues[data-ouvert='true'] .langues__liste { display: block; }
.langues__liste a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  /* Le panneau est toujours clair, même quand le bouton qui l'ouvre est
     sur un fond sombre (bandeau) : le texte doit rester sombre ici. */
  color: var(--encre);
}
.langues__liste a::after { display: none; }
.langues__liste a:hover { background: var(--lin-cru); }
.langues__liste a[aria-current='true'] { color: var(--rouissage-fonce); }

/* Sous-menu de navigation (ex. « Qui suis-je » > « L'Atelier »), même
   principe que le sélecteur de langue mais utilisable plusieurs fois. */
.sous-menu { position: relative; }
.sous-menu__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.sous-menu__bouton span[aria-hidden] { font-size: 0.7em; }
.sous-menu__liste {
  position: absolute;
  /* Collée au bouton, sans écart : au survol à la souris, un espace ici
     couperait le survol entre le bouton et la liste avant que le curseur
     ne l'atteigne, refermant le menu avant d'avoir pu cliquer dedans. */
  top: 100%;
  left: 0;
  min-width: 11rem;
  background: var(--papier);
  border: 1px solid var(--teille-clair);
  padding: 0.4rem;
  display: none;
  z-index: 50;
}
.sous-menu[data-ouvert='true'] .sous-menu__liste { display: block; }
/* Au clic sur tactile (pas de survol) ; à la souris, le survol suffit
   pour ouvrir tout de suite, sans clic. */
@media (hover: hover) {
  .sous-menu:hover .sous-menu__liste { display: block; }
}
.sous-menu__liste a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: var(--encre);
}
.sous-menu__liste a::after { display: none; }
.sous-menu__liste a:hover { background: var(--lin-cru); }
.sous-menu__liste a[aria-current='page'] { color: var(--rouissage-fonce); }

.menu-bascule { display: none; }

/* ---------- Messages ---------- */

.message {
  padding: 0.9rem 1.25rem;
  margin: 1.5rem auto 0;
  border-left: 3px solid var(--rouissage);
  background: var(--papier);
  font-size: 0.92rem;
}
.message--error { border-color: var(--alerte); }
.message--info { border-color: var(--teille); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  /* Volontairement basse : « La collection » doit rester visible
     sans avoir à faire défiler la page sur un écran de bureau courant.
     Réglable depuis Administration → Apparence. */
  min-height: var(--hero-hauteur, min(56vh, 32rem));
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--teille);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(30, 33, 24, 0.32) 0%, rgba(30, 33, 24, 0.05) 45%, rgba(30, 33, 24, 0.4) 100%);
}

/* Bandeau pleine page en tête de la photo : titre et actions sur un rang,
   fond crème sur toute la largeur — la photo reste visible en dessous. */
.hero__bandeau {
  /* `.hero` est une grille à une seule cellule : sans ceci, son unique
     enfant s'étire par défaut sur toute la hauteur (donc sur toute la
     photo). `align-self: start` le ramène à sa propre hauteur de contenu. */
  align-self: start;
  position: relative;
  z-index: 1;
  background: var(--papier);
  border-bottom: 3px solid var(--rouissage);
}

.hero__bandeau-rang {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  padding-block: 0.9rem;
}

.hero__titre {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  white-space: nowrap;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Pousse les boutons à l'extrémité du rang tant qu'il reste de la place. */
  margin-left: auto;
}
.hero__actions .bouton {
  padding: 0.65rem 1.2rem;
}

.hero__andain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.25rem;
  background-image: repeating-linear-gradient(90deg, rgba(251, 249, 244, 0.5) 0 1px, transparent 1px 11px);
  z-index: -1;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.section--papier { background: var(--papier); }
.section--cru { background: var(--lin-cru); }
.section--encre {
  background: var(--rouissage-fonce);
  color: var(--lin-cru);
}
.section--encre .surtitre { color: var(--teille); }
.section--serre { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Juste sous la photo du hero : on réduit uniquement le blanc du haut. */
.section--haut-serre { padding-top: clamp(1.1rem, 2.5vw, 2rem); }
/* Toujours suivie du pied de page, qui a lui-même du blanc en haut : on
   réduit ici uniquement le bas, pour ne pas cumuler les deux. */
.section--lettre { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
/* Section boutique, toujours suivie d'une section resserrée en haut
   (section--haut-serre) : on réduit ici son propre bas, pour la même
   raison — éviter que les deux paddings ne s'additionnent. */
.section--bas-serre { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.section__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
/* Sur mobile, le lien « Tout voir » ne tient plus à côté du titre : on empile
   proprement plutôt que de laisser le retour à la ligne du flex décider. */
@media (max-width: 30rem) {
  .section__entete { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
.section__entete h2 { margin-bottom: 0; }
.section__entete p {
  color: var(--encre-doux);
  margin: 0;
  max-width: 32rem;
}

/* ---------- Manifeste (intro) ---------- */

.manifeste {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 60rem) {
  .manifeste { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.manifeste__texte {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--encre-doux);
  text-align: justify;
  text-justify: inter-word;
}

/* ---------- Grille produits ---------- */

.grille-produits {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.carte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
}

.carte__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--lin-cru);
  margin-bottom: 1rem;
  border-radius: 6px;
}

.carte__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition), transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte__media img + img { opacity: 0; }
.carte:hover .carte__media img { transform: scale(1.03); }
.carte:hover .carte__media img + img { opacity: 1; }

.carte__etiquette {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: var(--papier);
  color: var(--encre);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}
.carte__etiquette--epuise {
  /* Le rouge d'alerte plutôt que le vert : « épuisé » n'est pas un état
     à confondre visuellement avec un badge de succès. */
  background: var(--alerte);
  color: var(--lin-cru);
}

.carte__nom {
  font-family: var(--display);
  font-size: 1.15rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  margin: 0 0 0.2rem;
}

.carte__resume {
  font-size: 0.88rem;
  color: var(--encre-doux);
  margin: 0 0 0.55rem;
}

/* Galerie de photos de la page « L'Atelier ». */
.galerie-atelier {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.galerie-atelier__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lin-cru);
  border-radius: 6px;
}
.galerie-atelier__media img { width: 100%; height: 100%; object-fit: cover; }

/* Vignette de catégorie, sur l'accueil : une photo et un nom, sans prix ni détail. */
.carte-categorie {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
}
.carte-categorie__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--lin-cru);
  margin-bottom: 1rem;
  border-radius: 6px;
}
.carte-categorie__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.carte-categorie:hover .carte-categorie__media img { transform: scale(1.03); }
.carte-categorie__nom {
  font-family: var(--display);
  font-size: 1.2rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  margin: 0;
  color: var(--encre);
}

.carte__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--teille-clair);
  padding-top: 0.6rem;
}

.carte__prix {
  font-size: 0.95rem;
  font-weight: 500;
}
.carte__prix del {
  color: var(--encre-tres-doux);
  font-weight: 400;
  margin-right: 0.5rem;
}

.carte__tailles {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
}

/* ---------- Valeurs ---------- */

.valeurs {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.valeur__numero {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--rouissage);
  display: block;
  margin-bottom: 0.75rem;
}

.valeur h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.valeur p {
  font-size: 0.92rem;
  color: var(--encre-doux);
  margin: 0;
}

/* ---------- Récit atelier ---------- */

.recit {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) {
  .recit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recit--inverse .recit__media { order: 2; }
  /* Section « De la plante au vêtement » de l'accueil : photo réduite par
     rapport aux autres blocs texte/photo, qui eux restent à moitié-moitié. */
  .recit--photo-reduite { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); }
}

.recit__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--teille);
  border-radius: 6px;
}
.recit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le rouissage est une vraie suite d'étapes : la numérotation porte
   une information, elle ne décore pas. */
/* Grille partagée par toute la liste (pas une par ligne) : la colonne du
   repère s'aligne sur le plus large d'entre eux, sur toutes les lignes —
   sans quoi chaque ligne se cale sur son propre texte, en escalier. */
.etapes {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--teille-clair);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
}

.etapes li { display: contents; }

.etapes b,
.etapes span {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--teille-clair);
  font-size: 0.92rem;
}

.etapes b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--rouissage);
  text-transform: uppercase;
  white-space: nowrap;
}

.etapes span { color: var(--encre-doux); }
.etapes strong {
  color: var(--encre);
  font-weight: 500;
  display: block;
}

/* ---------- Avis ---------- */

.etoiles {
  display: inline-flex;
  gap: 0.12em;
  color: var(--rouissage);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.etoiles span { color: var(--teille); }

/* Avis vedette : le meilleur avis, sorti de la grille et mis en scène
   en grande citation — le reste de la grille vient l'étayer en dessous. */
.avis-vedette {
  max-width: 42rem;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
  padding: 0;
  border: 0;
  text-align: center;
}
.avis-vedette .etoiles { justify-content: center; margin-bottom: 1.1rem; }
.avis-vedette__texte {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  color: var(--lin-cru);
  margin: 0 0 1.1rem;
}
.avis-vedette__auteur {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teille);
}

.avis-liste {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.avis {
  background: var(--papier);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 2px solid var(--rouissage);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.section--encre .avis {
  background: rgba(251, 249, 244, 0.06);
  color: var(--lin-cru);
}

.avis__titre {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0;
}

.avis__corps {
  font-size: 0.94rem;
  color: var(--encre-doux);
  margin: 0;
}
.section--encre .avis__corps { color: var(--teille-clair); }

.avis__meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  margin-top: auto;
}

.avis__reponse {
  border-left: 2px solid var(--teille);
  padding-left: 1rem;
  font-size: 0.88rem;
  color: var(--encre-doux);
}

/* ---------- Boutique ---------- */

.page-entete {
  padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}
.page-entete h1 { margin-bottom: 0.3em; }
.page-entete p {
  color: var(--encre-doux);
  max-width: var(--largeur-texte);
}

.fil {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  margin-bottom: 1.25rem;
}
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-block: 1px solid var(--teille-clair);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.filtres-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.filtres-categories a {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}
.filtres-categories a[aria-current='page'] { border-color: var(--encre); }
.filtres-categories a:hover { border-color: var(--teille); }

.champ-tri {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
}

select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='password'],
textarea {
  background: var(--papier);
  border: 1px solid var(--teille);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition);
}
select { padding-right: 2rem; }
select:focus,
input:focus,
textarea:focus { border-color: var(--rouissage); }

.champ-tri select {
  width: auto;
  border: 0;
  border-bottom: 1px solid var(--teille);
  background: transparent;
  padding: 0.25rem 1.25rem 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  color: var(--encre);
}

.vide {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  color: var(--encre-doux);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pagination a,
.pagination span {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--teille-clair);
  text-decoration: none;
  font-size: 0.85rem;
}
.pagination a:hover { border-color: var(--encre); }
.pagination [aria-current='page'] {
  background: var(--rouissage-fonce);
  color: var(--papier);
  border-color: var(--rouissage-fonce);
}

/* ---------- Fiche produit ---------- */

.produit {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  /* La photo occupe désormais moins de place que les informations,
     plutôt que l'inverse. */
  .produit { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .produit__infos {
    position: sticky;
    top: 7.5rem;
  }
}

.galerie__principale {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--lin-cru);
  border-radius: 6px;
  max-width: 22rem;
  margin-inline: auto;
}
.galerie__principale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie__angle {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--papier);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
}

/* Loupe qui suit la souris : un cercle agrandi sur la photo en pleine
   résolution (pas juste la version affichée, réduite), pour vraiment
   distinguer le tissage, les coutures, les finitions. */
.galerie__loupe {
  position: absolute;
  width: 11rem;
  height: 11rem;
  border: 2px solid var(--papier);
  border-radius: 999px;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 120ms ease;
  box-shadow: 0 6px 20px rgba(30, 33, 24, 0.35);
  z-index: 5;
}
@media (hover: none) {
  /* Pas de souris : la loupe qui suit le curseur n'a pas de sens. Le
     bouton juste en dessous ouvre déjà la photo en plein écran. */
  .galerie__loupe { display: none; }
}

/* Bouton loupe : ouvre la photo en grand. */
.galerie__zoom {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--papier);
  border: 0;
  border-radius: 999px;
  color: var(--encre);
  cursor: zoom-in;
  box-shadow: 0 2px 6px rgba(30, 33, 24, 0.18);
}
.galerie__zoom svg { width: 1.15rem; height: 1.15rem; }
.galerie__zoom:hover { background: var(--lin-cru); }

/* Photo agrandie, en plein écran. */
.zoom-photo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 33, 24, 0.92);
}
.zoom-photo[hidden] { display: none; }
.zoom-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}
.zoom-photo__fermer {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(251, 249, 244, 0.12);
  border: 1px solid rgba(251, 249, 244, 0.35);
  border-radius: 999px;
  color: var(--lin-cru);
  cursor: pointer;
}
.zoom-photo__fermer svg { width: 1.2rem; height: 1.2rem; }
.zoom-photo__fermer:hover { background: rgba(251, 249, 244, 0.22); }

.galerie__vignettes {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  max-width: 22rem;
  margin-inline: auto;
  justify-content: center;
}

.galerie__vignette {
  width: 4.75rem;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid transparent;
  background: var(--lin-cru);
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  transition: border-color var(--transition), opacity var(--transition);
  opacity: 0.72;
}
.galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galerie__vignette:hover { opacity: 1; }
.galerie__vignette[aria-current='true'] {
  border-color: var(--encre);
  opacity: 1;
}

.produit__categorie {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  text-decoration: none;
}

.produit__titre {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  margin: 0.75rem 0 0.5rem;
}

.produit__resume {
  color: var(--encre-doux);
  font-size: 1.02rem;
}

.produit__prix {
  font-size: 1.5rem;
  font-family: var(--display);
  margin: 1.25rem 0;
}
.produit__prix del {
  font-size: 1rem;
  color: var(--encre-tres-doux);
  margin-right: 0.6rem;
}

.produit__note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--encre-doux);
  text-decoration: none;
  margin-bottom: 0.5rem;
}

/* Bande technique : le grammage et la référence sont de vraies données
   du métier, présentées comme telles. */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  border-block: 1px solid var(--teille-clair);
  padding-block: 0.85rem;
  margin: 1.5rem 0;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  color: var(--encre-doux);
}
.specs div { display: flex; gap: 0.45rem; }
.specs dt {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--encre-tres-doux);
}
.specs dd { margin: 0; font-weight: 500; }

.tailles__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.tailles__titre {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Lien vers le tableau des mesures : la taille est la première hésitation
   avant l'achat, il doit être juste là, pas relégué en pied de page. */
.tailles__guide {
  margin-right: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--rouissage-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tailles__guide:hover { color: var(--encre); }

.guide-tailles {
  border: 1px solid var(--teille);
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 2rem);
  width: min(34rem, calc(100vw - 2rem));
  background: var(--papier);
  color: var(--encre);
}
.guide-tailles::backdrop { background: rgba(30, 33, 24, 0.55); }
.guide-tailles__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.guide-tailles__entete h2 { margin: 0; font-size: 1.35rem; }
.guide-tailles__fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--teille-clair);
  border-radius: 999px;
  color: var(--encre);
  cursor: pointer;
}
.guide-tailles__fermer svg { width: 1rem; height: 1rem; }
.guide-tailles__fermer:hover { background: var(--lin-cru); }
/* Un tableau de mesures peut être plus large que la boîte sur un téléphone :
   il défile alors sur lui-même plutôt que d'élargir la page. */
.guide-tailles__cadre { overflow-x: auto; }
.guide-tailles__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.guide-tailles__table th,
.guide-tailles__table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--teille-clair);
  white-space: nowrap;
}
.guide-tailles__table thead th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.guide-tailles__table tbody th { font-weight: 600; }
.guide-tailles__table tbody tr:last-child th,
.guide-tailles__table tbody tr:last-child td { border-bottom: 0; }
.guide-tailles__texte { font-size: 0.95rem; }
.guide-tailles__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--encre-doux);
}

/* Repères de réassurance, sous le bouton d'achat. */
.reassurance {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--teille-clair);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
}
.reassurance li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--encre-doux);
}
.reassurance svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  color: var(--rouissage);
}
@media (max-width: 26rem) {
  .reassurance { grid-template-columns: 1fr; }
}

/* Formulaire « prévenez-moi » quand une taille est épuisée. */
.alerte-stock {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--lin-clair);
  border: 1px solid var(--teille-clair);
}
.alerte-stock__titre {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--encre);
}
.alerte-stock__champs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.alerte-stock__champs select,
.alerte-stock__champs input[type='email'] {
  flex: 1 1 12rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--teille-clair);
  background: var(--papier);
  font-size: 0.85rem;
  color: var(--encre);
}
.alerte-stock__taille {
  font-size: 0.82rem;
  color: var(--encre-doux);
}
.tailles__reste {
  font-size: 0.76rem;
  color: var(--alerte);
}

.tailles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}
.tailles legend { display: none; }

.taille {
  position: relative;
}
.taille input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.taille span {
  display: grid;
  place-items: center;
  min-width: 3.4rem;
  height: 3rem;
  padding: 0 0.75rem;
  border: 1px solid var(--teille);
  background: var(--papier);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.taille input:hover + span { border-color: var(--rouissage-fonce); }
.taille input:checked + span {
  background: var(--rouissage-fonce);
  border-color: var(--rouissage-fonce);
  color: var(--papier);
}
.taille input:focus-visible + span {
  outline: 2px solid var(--lin-bleu);
  outline-offset: 2px;
}
.taille input:disabled + span {
  color: var(--encre-tres-doux);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
}

.achat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.quantite {
  display: flex;
  align-items: center;
  border: 1px solid var(--teille);
  background: var(--papier);
}
.quantite button {
  width: 2.75rem;
  height: 100%;
  min-height: 3.1rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--encre-doux);
  transition: color var(--transition);
}
.quantite button:hover { color: var(--encre); }
.quantite input {
  width: 2.6rem;
  border: 0;
  background: none;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
}
.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.repli {
  border-top: 1px solid var(--teille-clair);
}
.repli summary {
  cursor: pointer;
  padding: 1.05rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.repli summary::-webkit-details-marker { display: none; }
.repli summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--encre-tres-doux);
}
.repli[open] summary::after { content: '–'; }
.repli__corps {
  padding-bottom: 1.25rem;
  font-size: 0.94rem;
  color: var(--encre-doux);
}

/* ---------- Panier et commande ---------- */

.colonnes-commande {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 60rem) {
  .colonnes-commande { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.ligne-panier {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--teille-clair);
  align-items: start;
}
.ligne-panier:first-child { border-top: 1px solid var(--teille-clair); }

.ligne-panier__image {
  aspect-ratio: 3 / 4;
  background: var(--lin-cru);
  overflow: hidden;
}
.ligne-panier__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ligne-panier__nom {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
  text-decoration: none;
}
.ligne-panier__detail {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  margin: 0 0 0.75rem;
}

.ligne-panier__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ligne-panier__actions .quantite input { width: 2.4rem; }
.ligne-panier__actions .quantite button { min-height: 2.5rem; }

.bouton-texte {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.bouton-texte:hover { color: var(--alerte); }

.ligne-panier__prix {
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.recap {
  background: var(--papier);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 3px solid var(--rouissage);
}
.recap h2 {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}
.recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.94rem;
}
.recap__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--teille);
  margin-top: 0.75rem;
  padding-top: 1rem;
  font-family: var(--display);
  font-size: 1.3rem;
}
.recap .bouton { margin-top: 1.5rem; }

.jauge-livraison {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--encre-doux);
}
.jauge-livraison__barre {
  height: 3px;
  background: var(--teille-clair);
  margin-top: 0.5rem;
  overflow: hidden;
}
.jauge-livraison__barre i {
  display: block;
  height: 100%;
  background: var(--rouissage);
}

/* Formulaires */

.groupe-champs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 1.25rem;
}
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ--large { grid-column: 1 / -1; }
.champ label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.champ small {
  font-size: 0.76rem;
  color: var(--encre-tres-doux);
}
.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea { border-color: var(--alerte); }

.bloc-formulaire {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bloc-formulaire > h2 {
  font-size: 1.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--teille-clair);
  margin-bottom: 1.5rem;
}

.choix {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.choix label {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  border: 1px solid var(--teille);
  background: var(--papier);
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--transition);
  font-size: 0.94rem;
}
.choix label:hover { border-color: var(--encre-doux); }
.choix input { margin-top: 0.25rem; accent-color: var(--rouissage); }
.choix input:checked ~ * { font-weight: 500; }
.choix label:has(input:checked) { border-color: var(--encre); }
.choix small {
  display: block;
  font-weight: 400;
  color: var(--encre-tres-doux);
  font-size: 0.8rem;
}

.piege { position: absolute; left: -9999px; }

/* ---------- Confirmation ---------- */

.confirmation {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.confirmation__ref {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--teille);
  background: var(--papier);
  padding: 0.75rem 1.75rem;
  margin: 1.25rem 0 2rem;
}
.encart {
  background: var(--papier);
  border-left: 3px solid var(--rouissage);
  padding: 1.5rem;
  text-align: left;
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: 0.94rem;
}
.encart code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  background: var(--lin-cru);
  padding: 0.1rem 0.4rem;
}

/* ---------- Qui suis-je ---------- */

.portrait {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) {
  .portrait { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  /* Page « De la plante au vêtement » : la photo laisse plus de place aux étapes. */
  .portrait--etroit { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); }
}
.portrait__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--teille);
  border-radius: 6px;
}
.portrait__media img { width: 100%; height: 100%; object-fit: cover; }

.texte-long {
  font-size: 1.05rem;
  color: var(--encre-doux);
  max-width: var(--largeur-texte);
}
/* Un article a une photo flottante à côté : le texte a besoin de plus de
   largeur que la lecture habituelle, sans quoi il reste coincé dans une
   colonne étroite avec beaucoup de blanc inutilisé à droite. */
.texte-long--article { max-width: none; text-align: justify; text-justify: inter-word; }
.texte-long p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.4rem;
  float: left;
  line-height: 0.82;
  padding: 0.1em 0.12em 0 0;
  color: var(--rouissage-fonce);
}
.texte-long p { margin-bottom: 1.35em; }

.signature {
  font-family: var(--display);
  font-size: 1.9rem;
  font-style: italic;
  color: var(--rouissage-fonce);
  margin-top: 2rem;
}

/* ---------- Actualités ---------- */

.grille-articles {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}

/* Photo à gauche, texte à droite — la photo prend moins de place qu'avant
   (environ 40 % de la carte, contre la pleine largeur auparavant). */
.article-carte {
  text-decoration: none;
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.article-carte__media {
  flex: 0 0 40%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lin-cru);
  border-radius: 6px;
}
.article-carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.article-carte:hover .article-carte__media img { transform: scale(1.03); }
.article-carte__texte { flex: 1 1 auto; min-width: 0; }
.article-carte__date {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
}
.article-carte h3 { margin: 0.5rem 0 0.4rem; font-size: 1.15rem; }
.article-carte p { font-size: 0.9rem; color: var(--encre-doux); margin: 0; text-align: justify; text-justify: inter-word; }

@media (max-width: 30rem) {
  /* Trop étroit pour rester côte à côte lisiblement : on repasse en pile. */
  .article-carte { flex-direction: column; }
  .article-carte__media { flex-basis: auto; width: 100%; }
}

.article-entete {
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem);
}
.article-couverture {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--lin-cru);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: 6px;
}
.article-couverture img { width: 100%; height: 100%; object-fit: cover; }

/* Taille et emplacement choisis depuis Administration → Actualités.
   « Grande » reste hors de la colonne de texte (voir post.ejs) : pleine
   largeur, sans rapport avec la position. Les autres tailles vivent dans
   la colonne de texte elle-même : centrée, le texte reste dessous ;
   à gauche/à droite, la photo flotte et le texte s'enroule autour. */
.article-couverture--petite { max-width: 24rem; }
.article-couverture--moyenne { max-width: 40rem; }
.article-couverture--grande { max-width: none; }
.article-couverture--centre,
.article-couverture--pleine-largeur { margin-inline: auto; }

/* Toujours plus étroite que sa taille nominale une fois flottante : sans
   quoi elle occuperait toute la colonne de texte et rien ne s'enroulerait. */
.article-couverture--gauche,
.article-couverture--droite { max-width: min(45%, 20rem); }
.article-couverture--gauche { float: left; margin: 0 2.25rem 1.25rem 0; }
.article-couverture--droite { float: right; margin: 0 0 1.25rem 2.25rem; }

/* ---------- Contact ---------- */

.contact-grille {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) {
  .contact-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

.infos-boutique {
  background: var(--papier);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 3px solid var(--rouissage);
}
.infos-boutique h2 { font-size: 1.3rem; }
.infos-boutique dl { margin: 0; }
.infos-boutique dt {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-tres-doux);
  margin-top: 1.25rem;
}
.infos-boutique dd { margin: 0.3rem 0 0; }

.horaires {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}
.horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  border-bottom: 1px dotted var(--teille-clair);
}
.horaires li:last-child { border-bottom: 0; }
.horaires b { font-weight: 500; }

.carte-geo {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--teille);
  background: var(--lin-cru);
  overflow: hidden;
  margin-top: 1.5rem;
}
.carte-geo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Lettre d'information ---------- */

.lettre {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .lettre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.lettre__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.lettre__form input {
  flex: 1 1 14rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--teille);
  color: inherit;
  padding: 0.8rem 0;
}
.lettre__form input::placeholder { color: var(--encre-tres-doux); }
.section--encre .lettre__form input {
  border-color: rgba(233, 227, 214, 0.35);
  color: var(--lin-cru);
}
.section--encre .lettre__form input::placeholder { color: var(--teille); }
.section--encre .bouton {
  --fond: var(--lin-cru);
  --texte-bouton: var(--encre);
}
.section--encre .bouton:hover {
  --fond: var(--rouissage);
  --texte-bouton: var(--papier);
}

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

.pied {
  background: var(--rouissage-fonce);
  color: var(--teille-clair);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) 2rem;
  font-size: 0.9rem;
}

.pied__grille {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: 2.5rem;
}

.pied h2 {
  font-family: var(--texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lin-cru);
  margin-bottom: 1rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.5rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--lin-cru); text-decoration: underline; }

.pied__marque {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lin-cru);
  margin-bottom: 0.6rem;
}

.pied__bas {
  border-top: 1px solid rgba(233, 227, 214, 0.16);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.78rem;
  color: var(--encre-tres-doux);
}

/* Label professionnel (Textile Métiers d'Art Bretagne), discret dans le bas de page. */
.pied__label {
  height: 2.75rem;
  width: auto;
  border-radius: 3px;
}

.reseaux {
  display: flex;
  gap: 1rem;
}
.reseaux a {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Erreur ---------- */

.page-erreur {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
}
.page-erreur__code {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 1;
  color: var(--teille);
}

/* ---------- Mobile ---------- */

@media (max-width: 60rem) {
  /* Sur petit écran, le titre partagé avec le bouton recherche/panier sur
     une seule ligne n'a jamais assez de place (il finit par les chevaucher) :
     on met le bloc menu/recherche/panier sur sa propre ligne, et le titre
     en dessous, sur toute la largeur — chacun a l'espace qu'il lui faut. */
  .entete__interieur {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'menu . nav' 'marque marque marque';
    row-gap: 0.4rem;
    column-gap: 1rem;
  }
  .marque {
    grid-area: marque;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    gap: 0;
    padding-right: 0;
    transform: none;
  }
  .marque__bloc { transform: none; min-width: 0; }
  /* Remplace la taille fixe (pensée pour un grand écran) par une taille qui
     suit la largeur de l'écran, avec de la marge : même sur toute la largeur,
     rien ne garantit que le titre tienne sur une ligne à sa taille d'origine. */
  .marque__nom { font-size: clamp(1.6rem, 9vw, 2.6rem); }
  .marque__baseline { margin-top: 0.3rem; transform: none; }
  .navigation--fin {
    position: static;
    transform: none;
    grid-area: nav;
  }
  /* Sur mobile, le panneau doit s'ancrer à toute la largeur de l'en-tête
     (via .entete__interieur, plus haut dans l'arborescence), pas au petit
     bouton recherche lui-même : sinon il déborde à gauche de l'écran,
     puisque ce bouton n'est pas collé au bord droit ici. */
  .recherche { position: static; }
  /* Position explicite : plus sûr que le placement automatique, qui
     dépendrait de l'ordre des éléments dans le HTML. */
  .menu-bascule { grid-area: menu; }
  .menu-bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.35rem 0;
  }
  /* Le bandeau du menu ne s'affiche qu'une fois déplié, en colonne. */
  .entete__menu { display: none; }
  .entete[data-menu='ouvert'] .entete__menu { display: block; }
  .navigation--principale {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 0 1rem;
  }
  .navigation--principale a,
  .navigation--principale .sous-menu__bouton {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    width: 100%;
    font-size: 0.95rem;
    padding: 0.5rem 0;
  }
  .bandeau__interieur { flex-wrap: wrap; row-gap: 0.25rem; }
  /* Quand les horaires passent à la ligne, le sélecteur de langue se
     retrouve seul sur sa propre ligne : avec « space-between », un
     élément seul se colle à gauche, ce qui entraîne aussi son menu
     déroulant (ancré à droite du bouton) hors de l'écran. */
  .langues { margin-left: auto; }
  .produit__infos { position: static; }
}

@media (max-width: 34rem) {
  .ligne-panier {
    grid-template-columns: 4.5rem 1fr;
  }
  .ligne-panier__prix {
    grid-column: 2;
    text-align: left;
  }
  .achat { grid-template-columns: 1fr; }
}

/* ---------- Impression ---------- */

@media print {
  .entete, .pied, .bandeau, .andain, .bouton, .lettre { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carte:hover .carte__media img,
  .article-carte:hover .article-carte__media img { transform: none; }
}