/* =========================================================
   Calou — feuille de style principale
   Palette reprise des tissus : crème, bleu Liberty, rouge framboise
   ========================================================= */

:root {
  --creme: #FBF7F1;
  --creme-fonce: #F2E9DD;
  --encre: #2B2A28;
  --encre-doux: #5E5A54;
  --bleu: #30509B;
  --bleu-clair: #6E8BC9;
  --framboise: #C03E55;
  --trait: #E3D8C9;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --largeur: 1180px;
  --rayon: 2px;
  --transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

/* Lien d'évitement : visible uniquement au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: var(--creme);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--framboise);
  margin-bottom: 1.1em;
  font-weight: 400;
}

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

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary {
  background: var(--bleu);
  color: #fff;
  border-color: var(--bleu);
}
.btn-primary:hover { background: var(--encre); border-color: var(--encre); }

.btn-ghost {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait);
}
.btn-ghost:hover { border-color: var(--encre); }

.btn-block { width: 100%; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 241, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), padding var(--transition);
}
/* Classe posée par le JS dès que la page défile */
.site-header.is-scrolled { border-bottom-color: var(--trait); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
}

.logo {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  letter-spacing: 0.1em;
  text-decoration: none;
  line-height: 1;
}

/* « Paris » centré sous le nom, comme dans le logo incrusté de la vidéo.
   text-indent compense l'espace que letter-spacing ajoute après la dernière
   lettre, sinon le mot paraît décalé vers la gauche. */
.logo-paris {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  text-align: center;
  color: var(--encre-doux);
  margin-top: 5px;
}

.nav { display: flex; align-items: center; gap: 34px; }

.nav a {
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-doux);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav a:hover { color: var(--encre); border-bottom-color: var(--framboise); }

.nav .nav-cta {
  color: var(--bleu);
  border-bottom-color: var(--bleu-clair);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--encre);
  transition: transform var(--transition), opacity var(--transition);
}
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Bandeau vidéo ---------- */

.video-hero {
  position: relative;
  width: 100%;
  height: min(86vh, 800px);
  min-height: 440px;
  overflow: hidden;
  background: var(--encre);
}

/* object-fit: cover = la vidéo remplit le cadre sans se déformer,
   quitte à être rognée sur les côtés (indispensable sur mobile). */
.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile dégradé en bas : rend le texte blanc lisible quelle que soit l'image */
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(43, 42, 40, 0) 50%, rgba(43, 42, 40, 0.6) 100%);
  pointer-events: none;
}

.video-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(34px, 6vh, 68px);
  z-index: 2;
  padding: 0 24px;
  text-align: center;
  color: #fff;
}

.video-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  color: #fff;
  margin-bottom: 0.8em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}

.btn-on-video {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}
.btn-on-video:hover {
  background: #fff;
  color: var(--encre);
  border-color: #fff;
}

/* ---------- Présentation ---------- */

.hero { padding: clamp(60px, 9vw, 120px) 0 clamp(70px, 9vw, 130px); }

/* Même rendu que le h1 d'origine, mais en h2 depuis l'ajout du bandeau vidéo */
.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.hero-text .hero-title { margin-bottom: 0.35em; }
.hero-text .hero-title em { font-style: italic; color: var(--bleu); }

.lead {
  font-size: 1.1rem;
  color: var(--encre-doux);
  max-width: 44ch;
  margin-bottom: 2.2em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
}

/* Petit tampon « fait main » posé sur la photo */
.stamp {
  position: absolute;
  bottom: -28px;
  left: -28px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--framboise);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(43, 42, 40, 0.14);
}
.stamp-inner {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  text-align: center;
  line-height: 1.15;
}

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

.section { padding: clamp(64px, 8vw, 110px) 0; }
.section-alt { background: var(--creme-fonce); }

.section-head {
  max-width: 620px;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.section-intro { color: var(--encre-doux); margin-bottom: 0; }

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

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 38px);
}

.card { display: flex; flex-direction: column; }

.card-media {
  overflow: hidden;
  background: #fff;
  border-radius: var(--rayon);
  margin-bottom: 20px;
}
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover .card-media img { transform: scale(1.045); }

.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--encre-doux); font-size: 0.95rem; }

.card-meta {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu) !important;
  margin-bottom: 1em;
}

.card-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 3px;
  transition: border-color var(--transition);
}
.card-link:hover { border-bottom-color: var(--framboise); }

/* ---------- Savoir-faire ---------- */

.grid-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(30px, 4vw, 56px);
}

.value { border-top: 1px solid var(--trait); padding-top: 26px; }
.value-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--framboise);
  margin-bottom: 14px;
}
.value p { color: var(--encre-doux); margin-bottom: 0; }

/* ---------- L'atelier ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.about-media img {
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.about-text p { color: var(--encre-doux); max-width: 56ch; }

.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--encre) !important;
  margin-top: 0.8em;
}

/* ---------- Commander ---------- */

.commander-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.commander-intro p { color: var(--encre-doux); }

.contact-list { list-style: none; margin: 2em 0 0; padding: 0; }
.contact-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--trait);
  font-size: 0.95rem;
}
.contact-label {
  flex: 0 0 90px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.contact-list a { color: var(--bleu); text-decoration: none; border-bottom: 1px solid var(--bleu-clair); }
.contact-list a:hover { color: var(--framboise); border-bottom-color: var(--framboise); }

/* ---------- Formulaire ---------- */

.form {
  background: var(--creme);
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 13px 15px;
  transition: border-color var(--transition);
}
.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bleu);
}

/* État d'erreur posé par le JS lors de la validation */
.field.has-error input,
.field.has-error textarea { border-color: var(--framboise); }

.field-error {
  display: none;
  font-size: 0.8rem;
  color: var(--framboise);
  margin-top: 6px;
}
.field.has-error .field-error { display: block; }

.form-note {
  font-size: 0.82rem;
  color: var(--encre-doux);
  margin: 16px 0 0;
  text-align: center;
}

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

.site-footer {
  background: var(--encre);
  color: var(--creme);
  padding: 56px 0 40px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}

/* inline-block : le bloc se réduit à la largeur du mot « calou »,
   sinon « Paris » se centrerait sur toute la colonne du pied de page */
.logo-footer { display: inline-block; margin: 0; font-size: 1.8rem; }
/* Sur fond sombre, le gris du logo-paris deviendrait illisible */
.logo-footer .logo-paris { color: rgba(251, 247, 241, 0.65); }

.footer-tag {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, 0.45);
  margin: 16px 0 0;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-nav a {
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, 0.75);
  transition: color var(--transition);
}
.footer-nav a:hover { color: #fff; }

.copyright {
  grid-column: 1 / -1;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 247, 241, 0.15);
  font-size: 0.78rem;
  color: rgba(251, 247, 241, 0.55);
}

/* ---------- Apparition au défilement ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid,
  .about-grid,
  .commander-grid { grid-template-columns: 1fr; }

  .hero-media { order: -1; max-width: 420px; }
  .about-media { max-width: 220px; }
  .stamp { width: 92px; height: 92px; bottom: -20px; left: -16px; }
}

@media (max-width: 760px) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--trait);
    padding: 8px 24px 24px;
    /* Menu replié par défaut, déplié par le JS */
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 16px 0; font-size: 0.9rem; }

  .footer-inner { grid-template-columns: 1fr; }
}

/* Respect de la préférence système « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Bouton panier dans l'en-tête ---------- */

.header-actions { display: flex; align-items: center; gap: 10px; }

.panier-ouvrir {
  position: relative;
  background: none;
  border: 0;
  padding: 10px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-doux);
  transition: color var(--transition);
}
.panier-ouvrir:hover { color: var(--encre); }

/* Pastille du nombre d'articles */
.panier-compte {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--framboise);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0;
}

/* ---------- Prix et actions sur les cartes ---------- */

.card-prix {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--encre) !important;
  margin-bottom: 0.7em;
}

.card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.card-actions .card-link { margin-top: 0; }

.btn-petit { padding: 11px 22px; font-size: 0.74rem; }

/* ---------- Tiroir du panier ---------- */

.panier-voile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(43, 42, 40, 0.45);
}

.panier {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  background: var(--creme);
  border-left: 1px solid var(--trait);
  /* Hors écran par défaut, ramené à 0 par la classe is-open */
  transform: translateX(100%);
  transition: transform var(--transition);
}
.panier.is-open { transform: none; }

.panier-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--trait);
}
.panier-tete h2 { margin: 0; font-size: 1.5rem; }

.panier-fermer {
  background: none;
  border: 0;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--encre-doux);
  cursor: pointer;
  padding: 0 4px;
}
.panier-fermer:hover { color: var(--encre); }

.panier-corps { flex: 1; overflow-y: auto; padding: 8px 24px; }

.panier-vide {
  color: var(--encre-doux);
  text-align: center;
  padding: 42px 0;
}

.panier-ligne {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
}
.panier-ligne img { border-radius: var(--rayon); object-fit: cover; }
.panier-ligne-texte h4 { margin: 0 0 3px; font-size: 1.05rem; }
.panier-ligne-texte p { margin: 0; font-size: 0.9rem; color: var(--encre-doux); }

.panier-qte { display: flex; align-items: center; gap: 10px; }
.panier-qte button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff;
  color: var(--encre);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition);
}
.panier-qte button:hover { border-color: var(--encre); }

.panier-pied { padding: 20px 24px 24px; border-top: 1px solid var(--trait); }

.panier-relance {
  font-size: 0.82rem;
  color: var(--bleu);
  text-align: center;
  margin-bottom: 14px;
}

.panier-totaux {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 0;
  margin: 0 0 18px;
  font-size: 0.95rem;
}
.panier-totaux dt { color: var(--encre-doux); }
.panier-totaux dd { margin: 0; text-align: right; }
.panier-total-label,
.panier-total-valeur {
  padding-top: 11px;
  border-top: 1px solid var(--trait);
  font-size: 1.15rem;
  color: var(--encre) !important;
}

.panier-message {
  font-size: 0.88rem;
  color: var(--framboise);
  margin-bottom: 14px;
  text-align: center;
}

.panier-note {
  font-size: 0.75rem;
  color: var(--encre-doux);
  text-align: center;
  margin: 12px 0 0;
}

/* ---------- Bouton désactivé ---------- */

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--bleu); border-color: var(--bleu); }

/* ---------- Page de remerciement ---------- */

.merci {
  max-width: 600px;
  text-align: center;
  padding: clamp(40px, 8vw, 90px) 24px;
}
.merci h1 { margin-bottom: 0.3em; }
.merci p { color: var(--encre-doux); }
.merci .btn { margin-top: 1.4em; }

/* ---------- Carrousel produit ---------- */

.carrousel {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--rayon);
  margin-bottom: 20px;
}

/* scroll-snap : le glissement au doigt est géré nativement par le
   navigateur, le JS ne sert qu'aux flèches et aux points. */
.carrousel-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }

/* Une diapositive est soit une image seule (fiche produit), soit une image
   enveloppée d'un lien vers la fiche (grille d'accueil). Dans les deux cas,
   c'est l'enfant direct de la piste qui porte la largeur et l'accroche. */
.carrousel-piste > img,
.carrousel-piste > .carrousel-lien {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
}

.carrousel-piste > img,
.carrousel-lien img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.carrousel-lien { display: block; }
.carrousel-lien img { transition: opacity var(--transition); }
.carrousel-lien:hover img { opacity: 0.88; }

.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 241, 0.92);
  color: var(--encre);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition);
}
.carrousel:hover .carrousel-fleche,
.carrousel-fleche:focus-visible { opacity: 1; }
.carrousel-fleche[disabled] { opacity: 0 !important; pointer-events: none; }

.carrousel-prec { left: 10px; }
.carrousel-suiv { right: 10px; }

/* Sur écran tactile, on glisse : les flèches n'ont pas lieu d'être */
@media (hover: none) {
  .carrousel-fleche { display: none; }
}

.carrousel-points {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carrousel-points button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 3px rgba(43, 42, 40, 0.45);
  cursor: pointer;
  transition: background var(--transition);
}
.carrousel-points button[aria-current="true"] { background: #fff; }

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

.fil {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--encre-doux);
  padding: 28px 0 0;
}
.fil a { text-decoration: none; }
.fil a:hover { color: var(--encre); }
.fil span[aria-current] { color: var(--encre); }

.fiche-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  padding: clamp(30px, 4vw, 54px) 0 clamp(50px, 7vw, 90px);
}

/* Le carrousel reste visible pendant qu'on lit la description */
.fiche-media { position: sticky; top: 110px; }
.carrousel-grand { margin-bottom: 0; }
.carrousel-grand .carrousel-fleche { opacity: 1; }

.fiche-texte h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-bottom: 0.2em;
}

.fiche-accroche {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--encre-doux);
  margin-bottom: 0.9em;
}

.fiche-prix {
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 1.2em;
}

.fiche-description p {
  color: var(--encre-doux);
  max-width: 52ch;
}

.fiche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 2em 0 2.6em;
}

/* Liste de définitions : titre à gauche, valeur à droite */
.fiche-details {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--trait);
}
.fiche-details dt {
  padding: 15px 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
  border-bottom: 1px solid var(--trait);
}
.fiche-details dd {
  margin: 0;
  padding: 15px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--trait);
}

/* ---------- Les autres créations ---------- */

.fiche-autres {
  padding: clamp(40px, 6vw, 70px) 0 clamp(50px, 7vw, 90px);
  border-top: 1px solid var(--trait);
}
.fiche-autres h2 {
  font-size: 1.9rem;
  margin-bottom: 1.2em;
}

.grid-autres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
}

.autre {
  display: block;
  text-decoration: none;
}
.autre img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 12px;
  transition: opacity var(--transition);
}
.autre:hover img { opacity: 0.82; }

.autre-nom {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.autre-prix {
  display: block;
  font-size: 0.85rem;
  color: var(--encre-doux);
  margin-top: 2px;
}

/* Titre de carte cliquable sur la page d'accueil */
.card-body h3 a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.card-body h3 a:hover { border-bottom-color: var(--framboise); }

@media (max-width: 860px) {
  .fiche-grid { grid-template-columns: 1fr; }
  .fiche-media { position: static; }
  .fiche-details { grid-template-columns: 110px 1fr; }
}