/* ==========================================================================
   Le Roi de la Clé, feuille de style unique

   La direction visuelle vient de l'atelier, pas d'un modèle :
   - le jaune de la couronne du logo, posé en panneau perforé comme le mur
     d'ébauches de clés de la boutique ;
   - le gris clair de la clé du logo, pour les plaques gravées en aluminium,
     et le noir du trait du logo. Trois couleurs, celles du logo, et aucune
     autre (choix de Victorien, 2026-10-29 : un bleu marine tiré des photos
     a été essayé puis écarté) ;
   - Big Shoulders Display, étroite et lourde, pour les titres, dans l'esprit
     des lettres d'enseigne ; Besley, un caractère à empattements de type
     Clarendon, pour le texte, comme sur les plaques gravées.

   La seule audace est le panneau perforé et ses plaques suspendues. Tout le
   reste est volontairement calme.
   ========================================================================== */

/* Polices hébergées sur le site lui-même, pas chez Google : sinon chaque
   visite enverrait l'adresse IP du visiteur à Google (RGPD). Licence SIL OFL. */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}
/* Lobster, pour les titres en cursive : choix de Victorien (2026-10-29),
   parmi six polices libres comparées au nom du logo. Le logo lui-même est
   une image, sa police d'origine n'est pas connue. */
@font-face {
  font-family: "Lobster";
  src: url("../fonts/lobster.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("../fonts/besley.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("../fonts/besley-italique.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --jaune: #ffe100;      /* la couronne du logo */
  --gris-clair: #d3d5d4; /* la clé du logo, l'aluminium des plaques */
  --noir: #000;          /* le trait du logo */
  --blanc: #fff;
  --alu: #e8eae9;        /* plateau de la machine à graver */
  --gris: #4f555a;       /* texte secondaire, contraste 7,5:1 sur blanc */
  --trou: rgba(0, 0, 0, .2);

  --titre: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texte: "Besley", Georgia, serif;
  --cursive: "Lobster", "Brush Script MT", cursive;

  --largeur: 1200px;
  --marge: 16px;
  /* Hauteur fixe de l'en-tête : le diaporama de l'accueil s'en sert pour
     remplir exactement le reste de l'écran. */
  --entete: 80px;
  --barre-mobile: 64px;
  /* Hauteur commune du bouton téléphone (ou du bouton Menu sur téléphone) et
     de la pastille du logo : les deux s'alignent (Victorien, 2026-10-29). */
  --cta: 46px;
  /* Hauteur du bandeau des congés : 0 quand il n'est pas affiché (voir la
     section « Bandeau des congés »). Toutes les hauteurs liées à l'en-tête
     l'ajoutent, pour que rien ne passe dessous. */
  --bandeau: 0px;
}

@media (min-width: 700px) {
  :root { --marge: 32px; }
}

/* --- Base --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
}
@media (min-width: 700px) {
  body { font-size: 1.125rem; }
}

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

h1, h2 {
  font-family: var(--titre);
  font-weight: 800;
  line-height: .95;
  letter-spacing: .005em;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 {
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 .35em;
}
p { margin: 0 0 1em; }

a { color: inherit; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: 3px;
}

.evitement {
  position: absolute;
  left: var(--marge);
  top: -60px;
  background: var(--noir);
  color: var(--blanc);
  padding: .5em 1em;
  z-index: 10;
}
.evitement:focus { top: 8px; }

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.section { padding: clamp(56px, 9vw, 112px) 0; }

.texte-court { max-width: 62ch; }

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

.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }

.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: .02em;
  line-height: 1;
  padding: .7em 1.1em;
  text-decoration: none;
  background: var(--noir);
  color: var(--blanc);
  border: 2px solid var(--noir);
  border-radius: 4px;
}
.bouton:hover { background: var(--jaune); color: var(--noir); border-color: var(--noir); }
.bouton--clair { background: transparent; color: var(--noir); }
.bouton--clair:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.bouton--jaune { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }
.bouton--jaune:hover { background: var(--blanc); border-color: var(--blanc); }
.bouton--contour-clair { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.bouton--contour-clair:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

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

.entete { position: relative; z-index: 6; }

.entete-int {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  /* Plus large que le contenu : le menu complet a besoin de la place. */
  max-width: 1440px;
  height: var(--entete);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.logo {
  /* Largeurs du personnage et du nom, réutilisées par l'animation du laser. */
  --perso: var(--cta);
  --nom: 180px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  flex-shrink: 0;
}
/* Le corps du roi est transparent dans le fichier d'origine, pas blanc : sur
   la photo de l'accueil, il disparaissait. Une pastille blanche le porte
   (invisible sur l'en-tête blanc des autres pages).
   Le disque blanc est un fond dessiné, pas un border-radius : arrondir une
   image arrondit aussi l'image elle-même (règle CSS des images), ce qui
   rognait le rond de la clé, dans le coin bas gauche. 13 % de marge de chaque
   côté font tenir tout le dessin dans le disque. */
.logo-personnage {
  width: var(--perso);
  aspect-ratio: 1;
  object-fit: contain;
  padding: calc(var(--perso) * .13);
  /* Disque blanc cerclé de noir : sur un en-tête blanc, la pastille seule
     se confondait avec le fond et le logo paraissait plus petit que le
     bouton voisin. Le cercle la rend visible, à la même hauteur. */
  background: radial-gradient(circle closest-side,
    var(--blanc) 93%, var(--noir) 94%, var(--noir) 98.5%, transparent 100%);
}
.logo-titre { width: var(--nom); }

.nav-bureau { display: none; }

.nav-bureau a,
.menu-mobile nav a {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: .02em;
}
.nav-bureau a { padding: 6px 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-bureau a:hover,
.nav-bureau a[aria-current="page"] { border-bottom-color: var(--jaune); }

.entete-tel {
  display: none;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3rem;
  text-decoration: none;
  background: var(--noir);
  color: var(--blanc);
  height: var(--cta);
  align-items: center;
  padding: 0 .8em;
  border-radius: 4px;
  white-space: nowrap;
}
.entete-tel:hover { background: var(--jaune); color: var(--noir); }

.menu-mobile summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3rem;
  height: var(--cta);
  display: flex;
  align-items: center;
  padding: 0 .8em;
  border: 2px solid var(--noir);
  border-radius: 4px;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary { background: var(--noir); color: var(--blanc); }

.menu-mobile nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-top: 3px solid var(--noir);
  border-bottom: 3px solid var(--noir);
  padding: 8px var(--marge) 16px;
}
.menu-mobile nav a { padding: 10px 0; border-bottom: 1px solid var(--alu); }
.menu-mobile nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 4px; }

/* Menu complet à partir de 1120 px : cinq entrées tiennent avec le logo et
   le bouton (mesuré le 2026-10-29). En dessous, bouton Menu. */
@media (min-width: 1120px) {
  :root { --entete: 96px; --barre-mobile: 0px; --cta: 56px; }
  .logo { --nom: 200px; }
  .nav-bureau { display: flex; gap: 26px; }
  .nav-bureau a { font-size: 1.25rem; }
  .entete-tel { display: inline-flex; font-size: 1.45rem; }
  .menu-mobile { display: none; }
}

/* --- Le panneau perforé ---------------------------------------------------
   Des trous ronds réguliers sur fond jaune, comme le mur d'ébauches de la
   boutique. Dessiné en CSS : aucune image à charger. */

.panneau {
  background-color: var(--jaune);
  background-image: radial-gradient(circle, var(--trou) 3px, transparent 3.6px);
  background-size: 26px 26px;
  background-position: 13px 13px;
  border-top: 3px solid var(--noir);
  border-bottom: 3px solid var(--noir);
}

/* Un texte posé sur le panneau a son propre fond plein : les trous derrière
   des lettres fines gêneraient la lecture. */
.panneau-texte {
  background: var(--jaune);
  padding: 20px 22px 24px;
  box-shadow: 0 0 0 10px var(--jaune);
}

.accueil-haut {
  display: grid;
  gap: 40px;
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.accueil-haut h2 { font-size: clamp(2.75rem, 6vw, 4.75rem); max-width: 12ch; }
.accueil-haut .chapeau { font-size: 1.15em; max-width: 36ch; }
.horaires-court { font-size: .95rem; margin: 1.2em 0 0; }

@media (min-width: 960px) {
  .accueil-haut { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; }
}

/* --- Les plaques suspendues ------------------------------------------------
   Chaque métier est une plaque gravée accrochée au panneau : un trou en haut,
   une cheville dedans, un filet gravé à l'intérieur du bord, comme sur les
   plaques en aluminium que grave la maison. */

.plaques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 22px;
}
.plaques li { display: flex; }
.plaques .plaque--vedette-li { grid-column: 1 / -1; }

.plaque {
  --penche: 0deg;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 118px;
  padding: 34px 16px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--noir);
  background: var(--gris-clair);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 6px var(--gris-clair),
    inset 0 0 0 7px rgba(0, 0, 0, .45),
    0 6px 0 rgba(0, 0, 0, .22);
  transform: rotate(var(--penche));
  transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
/* Le trou de la plaque, qui laisse voir le jaune du panneau. */
.plaque::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}
/* La cheville du panneau, passée dans le trou. */
.plaque::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #3a3a3a;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .35);
}
.plaque-titre {
  font-family: var(--texte);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.15;
}
.plaque-texte {
  margin-top: 6px;
  font-size: .9rem;
  line-height: 1.35;
  color: #33373a;
}

.plaques li:nth-child(2) .plaque { --penche: -1.6deg; }
.plaques li:nth-child(3) .plaque { --penche: 1.2deg; }
.plaques li:nth-child(4) .plaque { --penche: .8deg; }
.plaques li:nth-child(5) .plaque { --penche: -1deg; }

.plaque:hover,
.plaque:focus-visible { transform: rotate(calc(var(--penche) * -1.5)); }

/* La plaque des clés de voiture est noire, titre jaune : c'est le message
   que la maison veut faire passer en premier. */
.plaque--vedette {
  background: var(--noir);
  color: var(--jaune);
  min-height: 150px;
  box-shadow:
    inset 0 0 0 6px var(--noir),
    inset 0 0 0 7px rgba(255, 225, 0, .6),
    0 6px 0 rgba(0, 0, 0, .22);
}
.plaque--vedette .plaque-titre { font-size: clamp(1.45rem, 3vw, 1.9rem); }
.plaque--vedette .plaque-texte { color: var(--blanc); font-size: 1rem; }

/* Le seul mouvement non demandé du site : au chargement, les plaques se
   balancent une fois sur leur cheville, puis s'immobilisent. */
@keyframes balancier {
  0%   { transform: rotate(calc(var(--penche) + 7deg)); }
  35%  { transform: rotate(calc(var(--penche) - 4deg)); }
  65%  { transform: rotate(calc(var(--penche) + 1.5deg)); }
  100% { transform: rotate(var(--penche)); }
}
/* « backwards » et non « both » : une fois le balancement fini, l'animation
   rend la main, sinon elle bloquerait le mouvement au survol. */
.plaques .plaque { animation: balancier 1.4s ease-out backwards; }
.plaques li:nth-child(2) .plaque { animation-delay: .08s; }
.plaques li:nth-child(3) .plaque { animation-delay: .16s; }
.plaques li:nth-child(4) .plaque { animation-delay: .24s; }
.plaques li:nth-child(5) .plaque { animation-delay: .32s; }

@media (max-width: 420px) {
  .plaques { grid-template-columns: 1fr; gap: 34px; }
}

/* --- Bandeau noir (clés de voiture, appels) ---------------------------- */

.bandeau {
  background: var(--noir);
  color: var(--blanc);
}
.bandeau h2 { color: var(--jaune); }
.bandeau a:not(.bouton) { color: var(--blanc); }

.bandeau-grille { display: grid; gap: 36px; align-items: center; }
.bandeau-grille img { border-radius: 6px; }
@media (min-width: 900px) {
  .bandeau-grille { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.liste-points { padding-left: 1.2em; margin: 0 0 1em; }
.liste-points li { margin-bottom: .35em; }
.liste-points li::marker { color: var(--jaune); }
.section:not(.bandeau) .liste-points li::marker { color: var(--noir); }

/* --- L'histoire --------------------------------------------------------- */

.deux-colonnes { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: 1.1fr .9fr; gap: 72px; }
}


.photo-legende { font-size: .9rem; color: var(--gris); margin-top: .6em; }

/* --- Galerie ------------------------------------------------------------ */

.galerie { display: grid; gap: 12px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .galerie { grid-template-columns: 2fr 1fr 1fr; }
  .galerie img { aspect-ratio: auto; height: 340px; }
}

/* --- Marques ------------------------------------------------------------ */

.fond-alu { background: var(--alu); }

.marques {
  list-style: none;
  margin: 2em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 28px 32px;
  align-items: center;
}
.marques img {
  width: 100%;
  height: 46px;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: .8;
}

/* --- Citation ----------------------------------------------------------- */

.citation { margin: 0; max-width: 40ch; }
.citation p {
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.5;
}
.citation figcaption { color: var(--gris); font-size: .95rem; }

/* --- Venir à l'atelier -------------------------------------------------- */

.venir { display: grid; gap: 36px; }
@media (min-width: 860px) {
  .venir { grid-template-columns: repeat(3, 1fr); }
}
.horaires { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.horaires dt { font-weight: 700; }
.horaires dd { margin: 0; }

/* --- Pages intérieures -------------------------------------------------- */

.page-haut {
  display: grid;
  gap: 32px;
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
  align-items: center;
}
.page-haut img { border: 3px solid var(--noir); border-radius: 6px; }
@media (min-width: 900px) {
  .page-haut { grid-template-columns: 1.2fr .8fr; gap: 56px; }
}

.fil {
  font-size: .9rem;
  margin: 0 0 1em;
}
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil li + li::before { content: "/"; margin-right: 6px; }

.prose { max-width: 66ch; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* Des étapes vraiment successives : la numérotation porte une information. */
.etapes { list-style: none; counter-reset: etape; margin: 1.5em 0 0; padding: 0; display: grid; gap: 22px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 52px 1fr; gap: 16px; }
.etapes li::before {
  content: counter(etape);
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--gris-clair);
  color: var(--noir);
  box-shadow: inset 0 0 0 4px var(--gris-clair), inset 0 0 0 5px rgba(0, 0, 0, .45);
}
.etapes p { margin: 0; }

/* Étiquette de prix des clés de voiture : une étiquette noire, comme celles
   accrochées aux ébauches du mur de clés. */
.etiquette-prix {
  display: inline-block;
  margin: 0 0 1.2em;
  padding: .35em .9em .4em;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  border-radius: 4px;
  transform: rotate(-1.5deg);
}
.etiquette-prix strong { color: var(--jaune); font-size: 1.45em; font-weight: 800; }

.faq details { border-bottom: 1px solid #c9cccb; padding: 14px 0; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  list-style-position: outside;
}
.faq details p { margin: .7em 0 0; }

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

.pied {
  border-top: 6px solid var(--jaune);
  background: var(--noir);
  color: var(--blanc);
  padding: 56px 0 24px;
}
.pied a { color: var(--blanc); }
.pied-grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
  display: grid;
  gap: 32px;
}
@media (min-width: 860px) {
  .pied-grille { grid-template-columns: 1.3fr 1fr 1.2fr 1.1fr; }
}
.pied h2 { font-size: 1.5rem; color: var(--jaune); margin-bottom: .5em; }
.pied ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.pied li { margin-bottom: .5em; }
.pied-maison img {
  width: 110px;
  padding: 15px;
  margin-bottom: 14px;
  /* Même disque dessiné que dans l'en-tête, pour ne pas rogner la clé. */
  background: radial-gradient(circle closest-side, var(--blanc) 98.5%, transparent 100%);
}
.pied-maison p { font-size: .95rem; max-width: 30ch; }
.pied-bas {
  max-width: var(--largeur);
  margin: 40px auto 0;
  padding: 18px var(--marge) 0;
  border-top: 1px solid #3a3a3a;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .85rem;
  color: #c8c8c8;
}

/* Barre d'appel fixe en bas de l'écran, sur téléphone uniquement : c'est là
   que se décide l'appel. */
.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 3px solid var(--noir);
}
.barre-mobile a {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3rem;
  text-align: center;
  text-decoration: none;
  padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
  background: var(--jaune);
  color: var(--noir);
}
.barre-mobile a:first-child { background: var(--noir); color: var(--blanc); }
body { padding-bottom: 64px; }
@media (min-width: 1120px) {
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  .plaques .plaque { animation: none; }
  .plaque { transition: none; }
}

.figure-nue { margin: 0; }
.chapeau { font-size: 1.15em; max-width: 40ch; }
.page-haut h1 { max-width: 16ch; }

/* Un numéro de téléphone ne se coupe jamais en fin de ligne. */
a[href^="tel:"], a[href^="sms:"] { white-space: nowrap; }

/* --- Diaporama plein écran de l'accueil ------------------------------------
   Cinq photos de l'atelier en fondu enchaîné, sans JavaScript.

   Le cycle dure 30 s, 6 s par photo. Chaque photo suit la même animation,
   décalée de 6 s. Les décalages partent de -1,2 s : la première photo est
   ainsi déjà visible au chargement, au lieu d'apparaître depuis le noir.

   Pas de bouton pause : retiré à la demande de Victorien (2026-10-29), en
   connaissance de cause. La règle d'accessibilité WCAG 2.2.2 le recommande
   pour tout mouvement de plus de 5 s ; elle n'est pas obligatoire pour un
   commerce de cette taille. Les appareils réglés sur « animations réduites »
   affichent une photo fixe (voir plus bas). */

.diaporama {
  position: relative;
  overflow: hidden;
  /* Tout l'écran, moins l'en-tête et, sur téléphone, la barre d'appel du
     bas. Pas de hauteur maximale : sur un grand écran, une limite laissait
     voir la section suivante (corrigé le 2026-10-29). */
  height: calc(100svh - var(--entete) - var(--barre-mobile));
  min-height: 520px;
  background: var(--noir);
  color: var(--blanc);
}
/* Sur l'accueil, l'en-tête est posé sur le diaporama : celui-ci prend donc
   tout l'écran, en-tête compris. */
.accueil .diaporama {
  height: auto;
  min-height: calc(100svh - var(--barre-mobile));
}
/* Hauteur minimale et non fixe : sur une fenêtre basse, le diaporama
   s'allonge plutôt que de glisser le titre sous l'en-tête. */
.diaporama { display: flex; flex-direction: column; }

.diapos, .diapo, .diaporama-voile {
  position: absolute;
  inset: 0;
}
.diapo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fondu 30s linear infinite;
}
.diapo:nth-child(1) { animation-delay: -1.2s; }
.diapo:nth-child(2) { animation-delay: 4.8s; }
.diapo:nth-child(3) { animation-delay: 10.8s; }
.diapo:nth-child(4) { animation-delay: 16.8s; }
.diapo:nth-child(5) { animation-delay: 22.8s; }

/* Chaque photo arrive en noir et blanc, comme une photo d'archive, puis la
   couleur monte : l'ancien et le moderne, dans le même geste. */
@keyframes fondu {
  0%   { opacity: 0; filter: grayscale(1); }
  4%   { opacity: 1; filter: grayscale(1); }
  11%  { filter: grayscale(0); }
  20%  { opacity: 1; filter: grayscale(0); }
  24%  { opacity: 0; filter: grayscale(0); }
  100% { opacity: 0; }
}

/* Un voile sombre à gauche et en bas, pour que le texte blanc reste lisible
   quelle que soit la photo. */
.diaporama-voile {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, 0) 80%);
}

.diaporama-texte {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  padding-top: calc(var(--entete) + var(--bandeau) + 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 92px;
}
.diaporama-texte h1 { max-width: 12ch; }
.diaporama-texte .chapeau { max-width: 40ch; }
.diaporama-texte .horaires-court { color: #e2e2e2; }
.diaporama-texte .bouton--contour-clair:hover { color: var(--noir); }

.diaporama-commandes {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Les cinq points avancent au rythme des photos : même animation, mêmes
   décalages, ils s'arrêtent avec elles. */
.diaporama-points { display: flex; gap: 8px; }
.diaporama-points span {
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, .35);
  position: relative;
  overflow: hidden;
}
.diaporama-points span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jaune);
  opacity: 0;
  animation: point 30s linear infinite;
}
/* L'animation « point » est la même que « fondu », décalée de 1,2 s dans
   ses propres étapes : même rythme que les photos, sans décalage négatif.
   Vérifié dans Chrome le 2026-10-29, photos et points restent synchrones. */
.diaporama-points span:nth-child(2)::after { animation-delay: 6s; }
.diaporama-points span:nth-child(3)::after { animation-delay: 12s; }
.diaporama-points span:nth-child(4)::after { animation-delay: 18s; }
.diaporama-points span:nth-child(5)::after { animation-delay: 24s; }

@keyframes point {
  0%   { opacity: 1; }
  16%  { opacity: 1; }
  20%  { opacity: 0; }
  96%  { opacity: 0; }
  100% { opacity: 1; }
}


/* Animations réduites sur l'appareil : la première photo, immobile. */
@media (prefers-reduced-motion: reduce) {
  .diapo { animation: none; }
  .diapo:first-child { opacity: 1; }
  .diaporama-commandes { display: none; }
  .diaporama-texte { padding-bottom: 48px; }
}

/* --- En-tête posé sur le diaporama (accueil uniquement) --------------------
   Un blanc franc tranchait avec les photos. Sur l'accueil, l'en-tête devient
   transparent et repose sur un dégradé noir qui s'efface vers le bas : le
   menu reste lisible, la photo continue jusqu'en haut de l'écran. Le dégradé
   descend plus bas que la barre elle-même, pour un fondu sans ligne visible.
   Les autres pages gardent l'en-tête blanc : il n'y a pas de photo derrière. */

.accueil .entete {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--entete) + var(--bandeau) + 70px);
  color: var(--blanc);
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .5) 45%,
    rgba(0, 0, 0, 0) 100%);
}
/* Le nom du logo est noir sur transparent : inversé, il devient blanc. Le
   personnage garde ses couleurs, son fond blanc ressort bien sur le noir. */
.accueil .logo-titre { filter: invert(1); }
.accueil .nav-bureau a { color: var(--blanc); }
.accueil .entete-tel { background: var(--jaune); color: var(--noir); }
.accueil .entete-tel:hover { background: var(--blanc); }
.accueil .menu-mobile summary { border-color: var(--blanc); }
.accueil .menu-mobile[open] summary { background: var(--blanc); color: var(--noir); }
.accueil .menu-mobile nav { color: var(--noir); }
.accueil .entete :focus-visible { outline-color: var(--jaune); }

/* --- Le logo animé -----------------------------------------------------------
   À l'ouverture de l'accueil, une seule séquence :
   1. le roi arrive à cheval sur sa clé, avec un rebond ;
   2. le nom apparaît de gauche à droite, précédé d'un point jaune lumineux,
      comme gravé au laser : la machine à graver de l'atelier.
   Au survol, sur toutes les pages : le roi tremble sous ses coups de marteau.
   Rien de tout cela si l'appareil demande des animations réduites. */

@keyframes chevauchee {
  0%   { transform: translateX(-46px) rotate(-14deg); opacity: 0; }
  55%  { transform: translateX(5px) rotate(4deg); opacity: 1; }
  78%  { transform: translateX(-2px) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes gravure-nom {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes laser {
  0%   { opacity: 1; transform: translateX(0); }
  92%  { opacity: 1; transform: translateX(var(--nom)); }
  100% { opacity: 0; transform: translateX(var(--nom)); }
}
@keyframes coups-de-marteau {
  0%, 100% { transform: none; }
  15% { transform: rotate(-5deg); }
  30% { transform: rotate(2deg); }
  45% { transform: rotate(-4deg); }
  60% { transform: rotate(1.5deg); }
  75% { transform: rotate(-2deg); }
}

.logo-personnage { transform-origin: 35% 85%; }

.accueil .logo-personnage {
  animation: chevauchee .9s cubic-bezier(.2, .8, .3, 1) .15s backwards;
}
.accueil .logo-titre {
  animation: gravure-nom 1.1s ease-in-out .85s backwards;
}
/* Le point du laser, posé au début du nom, qui le parcourt pendant qu'il
   apparaît (même durée, même départ). */
.accueil .logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--perso) + 10px);
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 8px 3px rgba(255, 225, 0, .85), 0 0 2px 1px var(--blanc);
  opacity: 0;
  pointer-events: none;
  animation: laser 1.1s ease-in-out .85s;
}

.logo:hover .logo-personnage,
.logo:focus-visible .logo-personnage {
  animation: coups-de-marteau .55s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .accueil .logo-personnage,
  .accueil .logo-titre,
  .accueil .logo::after,
  .logo:hover .logo-personnage,
  .logo:focus-visible .logo-personnage { animation: none; }
}

/* --- En-tête qui s'efface et revient -----------------------------------------
   Actif seulement si assets/js/entete.js tourne (classe js-entete sur <html>).
   Sans le script, l'en-tête reste à sa place en haut de la page.
   - en haut de la page : l'en-tête habituel (dégradé sur l'accueil) ;
   - on descend : il sort par le haut ;
   - on remonte : il revient, toujours blanc, pour rester lisible au-dessus du
     contenu, y compris sur l'accueil. */

html { scroll-padding-top: calc(var(--entete) + var(--bandeau)); }

.js-entete .entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--blanc);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* L'en-tête fixe ne prend plus de place dans la page : on la lui rend, sauf
   sur l'accueil où il est posé sur le diaporama. */
.js-entete body:not(.accueil) { padding-top: calc(var(--entete) + var(--bandeau)); }

.js-entete .entete:not(.entete--en-haut) { box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.js-entete .entete.entete--cache { transform: translateY(-100%); box-shadow: none; }

/* Accueil, en haut : le dégradé sur la photo, sans fond blanc. */
.js-entete .accueil .entete.entete--en-haut { background-color: transparent; }

/* Accueil, après défilement : retour à l'en-tête blanc des autres pages. */
.js-entete .accueil .entete:not(.entete--en-haut) {
  height: calc(var(--entete) + var(--bandeau));
  color: var(--noir);
  background-image: none;
}
.js-entete .accueil .entete:not(.entete--en-haut) .logo-titre { filter: none; }
.js-entete .accueil .entete:not(.entete--en-haut) .nav-bureau a { color: var(--noir); }
.js-entete .accueil .entete:not(.entete--en-haut) .entete-tel { background: var(--noir); color: var(--blanc); }
.js-entete .accueil .entete:not(.entete--en-haut) .entete-tel:hover { background: var(--jaune); color: var(--noir); }
.js-entete .accueil .entete:not(.entete--en-haut) .menu-mobile summary { border-color: var(--noir); }
.js-entete .accueil .entete:not(.entete--en-haut) .menu-mobile[open] summary { background: var(--noir); color: var(--blanc); }
.js-entete .accueil .entete:not(.entete--en-haut) :focus-visible { outline-color: var(--noir); }

@media (prefers-reduced-motion: reduce) {
  .js-entete .entete { transition: none; }
}

/* --- Titres en cursive -------------------------------------------------------
   La police du logo, réservée aux titres qui parlent de la maison (histoire,
   métiers, marques, venir, pied de page). Les titres qui vendent ou guident
   (grand titre, clés de voiture, pages métier) gardent la police étroite :
   une cursive se lit moins vite. */
h2.titre-cursive,
.accueil-haut h2.titre-cursive {
  font-family: var(--cursive);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: 0;
}
.pied h2.titre-cursive { font-size: 1.6rem; margin-bottom: .35em; }

/* --- Page contact ----------------------------------------------------------- */

.contact-haut {
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.contact-haut .panneau-texte { max-width: 760px; }

.moyens { display: grid; gap: 20px; margin-top: 1.4em; }
@media (min-width: 860px) {
  .moyens { grid-template-columns: repeat(3, 1fr); }
}
.moyen {
  padding: 24px;
  border: 2px solid var(--noir);
  border-radius: 6px;
}
.moyen p { margin: 0 0 .5em; }
.moyen-lien {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  text-decoration-color: var(--jaune);
  text-decoration-thickness: 4px;
}
.moyen-lien--mail { font-size: 1.4rem; overflow-wrap: anywhere; }

.contact-horaires { margin-top: 48px; max-width: 420px; }

/* --- Carte du magasin ----------------------------------------------------------
   Dessinée par outils/carte.py d'après OpenStreetMap, en noir et blanc. La
   seule couleur est le jaune du repère. Les styles ci-dessous donnent l'état
   final ; l'animation n'est ajoutée que si l'appareil accepte le mouvement :
   1. les bâtiments apparaissent ;
   2. les grands axes se tracent, puis les rues, puis les chemins ;
   3. les noms de rues apparaissent ;
   4. le repère tombe sur le magasin avec un rebond, puis une onde s'en
      échappe de temps en temps. */

.carte-bloc { margin: 0; }
.carte-cadre {
  position: relative;
  border-bottom: 3px solid var(--noir);
  background: var(--blanc);
}
.carte {
  display: block;
  width: 100%;
  height: clamp(420px, 56vw, 640px);
}
.carte-fond { fill: var(--blanc); }
.carte-verts path { fill: #ececec; }
.carte-batiments path { fill: #dcdcdc; }
.carte-voies path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carte-voies--grande path { stroke: var(--noir); stroke-width: 9; }
.carte-voies--rue path { stroke: #2b2b2b; stroke-width: 4.5; }
.carte-voies--chemin path { stroke: #9a9a9a; stroke-width: 1.6; }
.carte-noms text {
  font-family: var(--texte);
  font-size: 15px;
  font-style: italic;
  /* Avec startOffset="50%" (posé par carte.py), le nom est centré sur la rue
     au lieu d'y commencer, ce qui le coupait. */
  text-anchor: middle;
  fill: #3a3a3a;
  /* Un halo blanc autour des lettres : elles restent lisibles par-dessus les
     rues et les bâtiments. */
  paint-order: stroke;
  stroke: var(--blanc);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.carte-epingle path { fill: var(--jaune); stroke: var(--noir); stroke-width: 3; }
.carte-epingle circle { fill: var(--noir); }
.carte-onde { fill: none; stroke: var(--noir); stroke-width: 2; opacity: 0; }

.carte-fiche {
  background: var(--blanc);
  padding: 24px var(--marge) 28px;
  border-top: 3px solid var(--noir);
}
.carte-fiche h2 { margin-bottom: .2em; }
.carte-adresse { font-weight: 700; font-size: 1.15rem; }
@media (min-width: 900px) {
  .carte-fiche {
    position: absolute;
    top: 40px;
    left: max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge)));
    width: 340px;
    padding: 26px 28px 30px;
    border: 3px solid var(--noir);
    border-radius: 6px;
    box-shadow: 8px 8px 0 var(--jaune);
  }
}
.carte-credit { font-size: .85rem; color: var(--gris); margin-top: 10px; }

/* Sur téléphone, la carte est réduite à environ la moitié de sa taille : les
   noms de rues et le repère sont agrandis d'autant pour rester lisibles.
   .carte-taille est un groupe intermédiaire : le repère porte déjà un
   transform (sa position), qu'une échelle CSS écraserait. */
@media (max-width: 700px) {
  /* 22 px : au-delà, « Rue du Colombier » dépasse la longueur de sa rue. */
  .carte-noms text { font-size: 22px; stroke-width: 6px; }
  .carte-taille { transform: scale(1.7); }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes carte-apparait { from { opacity: 0; } to { opacity: 1; } }
  @keyframes carte-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes carte-chute {
    0%   { transform: translateY(-140px); opacity: 0; }
    45%  { transform: translateY(0); opacity: 1; }
    62%  { transform: translateY(-22px); }
    78%  { transform: translateY(0); }
    88%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }
  @keyframes carte-onde {
    0%   { transform: scale(.6); opacity: .7; }
    70%  { opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
  }
  @keyframes fiche-arrive {
    from { transform: translateX(-24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  .carte-verts, .carte-batiments { animation: carte-apparait .9s ease-out backwards; }
  .carte-batiments { animation-delay: .15s; }

  /* pathLength="1" sur chaque voie : un tiret de longueur 1 couvre toute la
     rue, quelle que soit sa vraie longueur. Le faire glisser la dessine. */
  .carte-voies path {
    stroke-dasharray: 1;
    animation: carte-trace 1.3s cubic-bezier(.4, 0, .2, 1) backwards;
  }
  .carte-voies--grande path { animation-delay: .25s; }
  .carte-voies--rue path { animation-delay: .7s; }
  .carte-voies--chemin path { animation-delay: 1.1s; }

  .carte-noms { animation: carte-apparait .8s ease-out 1.8s backwards; }

  .carte-epingle { animation: carte-chute 1.1s ease-out 2.1s backwards; }
  .carte-onde {
    transform-box: fill-box;
    transform-origin: center;
    animation: carte-onde 2.4s ease-out 3s infinite;
  }

  @media (min-width: 900px) {
    .carte-fiche { animation: fiche-arrive .7s ease-out 2.6s backwards; }
  }
}

/* --- Signature « Depuis 1973 » --------------------------------------------
   La cursive de l'enseigne d'époque posée sur la typographie d'aujourd'hui. */
.signature {
  font-family: var(--cursive);
  color: var(--jaune);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1;
  margin: 0 0 .15em;
  transform: rotate(-4deg);
  transform-origin: left bottom;
}

/* --- Hier et aujourd'hui ----------------------------------------------------- */

.hier-aujourdhui .texte-court { margin-bottom: 0; }

.illustration {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: clamp(28px, 5vw, 56px) auto clamp(28px, 5vw, 48px);
  overflow: visible;
}
.illustration .trait {
  fill: none;
  stroke: var(--noir);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illustration .trait--fin { stroke-width: 2.5; }
.illustration .fil-du-temps circle { fill: var(--noir); }
.illustration .puce { fill: var(--jaune); stroke: var(--noir); stroke-width: 3; }
.illustration .ondes path { fill: none; stroke: var(--noir); stroke-width: 3; stroke-linecap: round; }
.illustration .annee {
  font-family: var(--cursive);
  font-size: 40px;
  text-anchor: middle;
  fill: var(--noir);
}

.deux-epoques { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .deux-epoques { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.epoque { margin: 0; }
.epoque img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--noir); border-radius: 6px; }
.epoque figcaption { padding-top: 16px; }
.epoque h3 {
  font-family: var(--cursive);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
}

/* Le dessin se trace quand il entre à l'écran : la clé ancienne, puis le fil
   du temps, puis la clé moderne ; la puce s'allume, le signal part. Les
   animations n'existent que si apparition.js tourne (classe js-apparition)
   et si l'appareil accepte le mouvement. Sinon : dessin terminé, immobile. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dessin-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes dessin-apparait { from { opacity: 0; } to { opacity: 1; } }
  @keyframes puce-allume { from { fill: var(--blanc); } to { fill: var(--jaune); } }
  @keyframes onde-signal {
    0%, 100% { opacity: .15; }
    50%      { opacity: 1; }
  }

  .js-apparition .illustration .trait {
    stroke-dasharray: 1;
    animation: dessin-trace 1.2s cubic-bezier(.4, 0, .2, 1) backwards paused;
  }
  .js-apparition .illustration .fil-du-temps .trait { animation-duration: .7s; animation-delay: 1.2s; }
  .js-apparition .illustration .fil-du-temps circle { animation: dessin-apparait .3s ease-out 1.1s backwards paused; }
  .js-apparition .illustration .fil-du-temps circle:last-of-type { animation-delay: 1.85s; }
  .js-apparition .illustration .cle-moderne .trait { animation-delay: 1.9s; }
  .js-apparition .illustration .puce { animation: puce-allume .4s ease-out 3.1s backwards paused; }
  .js-apparition .illustration .ondes path { animation: onde-signal 1.6s ease-in-out 3.4s infinite backwards paused; }
  .js-apparition .illustration .ondes path:nth-child(2) { animation-delay: 3.6s; }
  .js-apparition .illustration .ondes path:nth-child(3) { animation-delay: 3.8s; }
  .js-apparition .illustration .annee { animation: dessin-apparait .6s ease-out backwards paused; }
  .js-apparition .illustration .annee:last-of-type { animation-delay: 2.4s; }

  .js-apparition .illustration.est-visible *,
  .js-apparition .illustration.est-visible { animation-play-state: running; }
}

/* Sur téléphone, le dessin est réduit à environ un tiers : traits et années
   épaissis d'autant pour rester lisibles. */
@media (max-width: 700px) {
  .illustration .trait { stroke-width: 8; }
  .illustration .trait--fin { stroke-width: 5; }
  .illustration .ondes path, .illustration .puce { stroke-width: 6; }
  /* 58 px : au-delà, les années touchent le bas des clés. */
  .illustration .annee { font-size: 58px; }
  .illustration { margin-bottom: 40px; }
}

/* --- La médaille du concours ------------------------------------------------
   Argent (le gris clair du site) pour une deuxième place, ruban jaune pour le
   détail doré. Même filet gravé que les plaques des métiers. */

.medaille-grille { display: grid; gap: 28px; align-items: center; }
@media (min-width: 760px) {
  .medaille-grille { grid-template-columns: 300px 1fr; gap: 72px; }
}
.medaille { width: 230px; height: auto; overflow: visible; }
@media (min-width: 760px) {
  .medaille { width: 300px; }
}
.medaille .ruban { fill: var(--jaune); stroke: var(--noir); stroke-width: 3; stroke-linejoin: round; }
.medaille .ruban-filet { fill: none; stroke: var(--noir); stroke-width: 2; opacity: .55; }
.medaille .anneau { fill: var(--gris-clair); stroke: var(--noir); stroke-width: 3; }
.medaille .disque { fill: var(--gris-clair); stroke: var(--noir); stroke-width: 4; }
.medaille .disque-filet { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 2; }
.medaille .disque-rang {
  font-family: var(--texte);
  font-weight: 700;
  font-size: 84px;
  text-anchor: middle;
  fill: var(--noir);
}
.medaille .disque-e { font-size: 40px; }
.medaille .reflet { fill: var(--blanc); opacity: 0; }
.medaille-bloc h2 { max-width: 18ch; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes medaille-balance {
    0%   { transform: translateY(-30px) rotate(-14deg); opacity: 0; }
    30%  { transform: rotate(9deg); opacity: 1; }
    52%  { transform: rotate(-5deg); }
    72%  { transform: rotate(2.5deg); }
    88%  { transform: rotate(-1deg); }
    100% { transform: none; }
  }
  @keyframes medaille-reflet {
    0%   { transform: translateX(-80px); opacity: 0; }
    15%  { opacity: .75; }
    85%  { opacity: .75; }
    100% { transform: translateX(260px); opacity: 0; }
  }
  /* La médaille pend à son ruban : elle pivote autour du haut du ruban. */
  .medaille-balance { transform-box: view-box; transform-origin: 120px 0; }
  .js-apparition .medaille .medaille-balance { animation: medaille-balance 1.6s ease-out backwards paused; }
  .js-apparition .medaille .reflet { animation: medaille-reflet 1s ease-in-out 1.5s backwards paused; }
  .js-apparition .medaille.est-visible .medaille-balance,
  .js-apparition .medaille.est-visible .reflet { animation-play-state: running; }
  /* Au survol, le reflet repasse. Une animation au nom distinct : reprendre
     le même nom ne la relancerait pas. Le sélecteur porte la même priorité
     que la règle d'apparition, et vient après elle. */
  @keyframes medaille-reflet-survol {
    0%   { transform: translateX(-80px); opacity: 0; }
    15%  { opacity: .75; }
    85%  { opacity: .75; }
    100% { transform: translateX(260px); opacity: 0; }
  }
  .medaille:hover .reflet,
  .js-apparition .medaille.est-visible:hover .reflet { animation: medaille-reflet-survol 1s ease-in-out; }
}

/* Texte lu par les lecteurs d'écran, invisible à l'œil : « Prix d'origine »
   devant un prix barré, que la vue comprend seule. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Déstockage : le carrousel de l'accueil --------------------------------
   Une rangée qui défile seule (doigt, pavé tactile) avec un arrêt net sur
   chaque produit. Les flèches n'apparaissent que si carrousel.js tourne.
   L'étiquette de prix reprend le magasin : ancien prix barré d'un trait jaune
   comme au marqueur, nouveau prix sur étiquette noire, pastille de remise. */

.destockage-tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}
.destockage-tete .texte-court { margin-bottom: 0; }

.carrousel-fleches { display: none; gap: 10px; flex-shrink: 0; }
.js-carrousel .carrousel-fleches { display: flex; }
.carrousel-fleches button {
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  background: var(--noir);
  color: var(--blanc);
  border: 2px solid var(--noir);
  border-radius: 50%;
}
.carrousel-fleches button:hover:not(:disabled) { background: var(--jaune); color: var(--noir); }
.carrousel-fleches button:disabled { background: var(--blanc); color: #9a9a9a; border-color: #c9cccb; cursor: default; }

.carrousel {
  list-style: none;
  margin: 0;
  padding: 6px 2px 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 290px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--noir) var(--alu);
}
.carrousel:focus-visible { outline-offset: 6px; }

.produit {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--noir);
  border-radius: 6px;
  background: var(--blanc);
  overflow: hidden;
}
.produit-image { position: relative; background: var(--alu); }
.produit-image img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.produit-remise {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--jaune);
  border: 2px solid var(--noir);
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.3rem;
  transform: rotate(-10deg);
}
.produit h3 { margin: 16px 18px 4px; }
.produit-desc { margin: 0 18px 12px; font-size: .95rem; color: var(--gris); }
.produit-prix {
  margin: auto 18px 18px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.produit-prix del {
  font-size: 1.1rem;
  color: var(--gris);
  text-decoration: none;
  /* Le trait jaune, posé de biais comme au marqueur, à la place du trait
     de barré habituel. */
  background: linear-gradient(-12deg, transparent 44%, var(--jaune) 44%, var(--jaune) 60%, transparent 60%);
}
.produit-prix strong {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  padding: .15em .45em .2em;
  background: var(--noir);
  color: var(--jaune);
  border-radius: 4px;
}
.produit-ttc { font-size: .85rem; color: var(--gris); }

/* --- Bandeau des congés -------------------------------------------------------
   Affiché à la demande, réglé dans outils/communs.py (CONGES). Placé dans
   l'en-tête, au-dessus de la barre : il s'efface et revient avec elle. Sa
   hauteur est fixe, pour que l'en-tête et le diaporama sachent de combien se
   décaler (variable --bandeau, posée ici seulement s'il est présent). */
:root:has(.bandeau-conges) { --bandeau: 54px; }
@media (min-width: 760px) {
  :root:has(.bandeau-conges) { --bandeau: 42px; }
}
/* Téléphone : texte court sur deux lignes. Ordinateur : texte complet sur une. */
.bandeau-long { display: none; }
@media (min-width: 760px) {
  .bandeau-long { display: inline; }
  .bandeau-court { display: none; }
}
.bandeau-conges {
  height: var(--bandeau);
  margin: 0;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--jaune);
  color: var(--noir);
  border-bottom: 2px solid var(--noir);
  font-size: .88rem;
  line-height: 1.3;
}
.bandeau-conges strong {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  margin-right: .5em;
  white-space: nowrap;
}