/* ==========================================================================
   Feuille de style unique du site.
   Organisation : 1) variables  2) base  3) mise en page  4) composants
   Les "variables" en haut sont les seuls endroits a toucher pour changer
   l'ambiance du site (couleurs, polices, arrondis).
   ========================================================================== */

/* 0) POLICES -------------------------------------------------------------
   @font-face fait le pont entre un FICHIER sur le disque et un NOM utilisable
   dans le CSS. Une fois declare ici, "Bodoni Moda" s'ecrit comme n'importe
   quelle police installee sur l'ordinateur du visiteur.

   Ce sont des polices VARIABLES : un seul fichier contient toutes les
   graisses, d'ou "font-weight: 400 900" qui annonce la plage disponible.
   Sans cette plage, le navigateur n'utiliserait qu'une seule epaisseur.

   font-display: swap = afficher immediatement le texte avec une police de
   secours, puis basculer des que la vraie police est chargee. Sans ca, le
   texte reste invisible pendant le telechargement.

   Fichiers convertis depuis les .ttf de Google Fonts : sous-ensemble latin
   uniquement, puis compression WOFF2. Licence SIL Open Font (voir le dossier).
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 1) VARIABLES ---------------------------------------------------------- */
:root {
  /* Couleurs : papier chaud + encre + terracotta */
  --papier: #fdfaf5;
  --papier-2: #f5efe6;
  --encre: #2a2521;
  --encre-doux: #6a615a;
  --accent: #c4704f;
  --accent-fonce: #a55a3c;
  --vert: #7c8a6e;
  --bordure: #e3dad0;
  --blanc: #ffffff;
  --succes: #4a7c59;
  --erreur: #b3453a;

  /* Typographie — les deux seules lignes a changer pour toute la mise en forme.
     Les polices listees apres la premiere sont des secours : elles s'affichent
     si le fichier n'a pas encore ete telecharge. */
  --titre: "Bodoni Moda", Didot, "Times New Roman", Georgia, serif;
  --texte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --rayon: 4px;
  --rayon-l: 10px;
  --ombre: 0 1px 2px rgba(42, 37, 33, .04), 0 8px 24px rgba(42, 37, 33, .06);
  --ombre-forte: 0 4px 12px rgba(42, 37, 33, .1), 0 16px 40px rgba(42, 37, 33, .12);
  --largeur: 1180px;
  --transition: 180ms ease;
}

/* 2) BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;

  /* Taille optique figee sur la valeur de labeur de la police (opsz 11).
     Par defaut le navigateur reglerait cet axe sur la taille du texte : un
     titre de 58 px recevrait la version la plus fine que Bodoni sache
     dessiner, juste pour une affiche imprimee, mais trop fragile a l'ecran
     ou les delies tombent sous le pixel et se delavent.
     Voir la section 0) POLICES pour l'explication des axes variables. */
  font-optical-sizing: none;

  /* Pas de "-webkit-font-smoothing: antialiased" ici : ce reglage amincit
     le rendu sur les appareils Apple, ce qui aggrave le probleme sur une
     police a fort contraste comme Bodoni. */
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }

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

a { color: var(--accent-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }

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

/* Accessibilite : le focus clavier doit rester visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: var(--papier);
  padding: .7rem 1.2rem;
  z-index: 200;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* 3) MISE EN PAGE -------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section--serree { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--papier { background: var(--papier-2); }

.entete-section { max-width: 62ch; margin-bottom: 2.5rem; }
.entete-section p { color: var(--encre-doux); }

.surtitre {
  display: block;
  font-family: var(--texte);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8rem;
}

/* --- En-tete / navigation --- */
.site-entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 245, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.site-entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}
.logo {
  font-family: var(--titre);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo:hover { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav a {
  color: var(--encre);
  text-decoration: none;
  font-size: .95rem;
  padding: .3rem 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--encre); font-weight: 500; }

.bouton-panier {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--encre);
  color: var(--papier);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .9rem;
  text-decoration: none;
  border: none;
  transition: background var(--transition);
}
.bouton-panier:hover { background: var(--accent-fonce); color: var(--papier); }
.bouton-panier .compteur {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 600;
  padding-inline: 5px;
}
.bouton-panier .compteur[hidden] { display: none; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .5rem .7rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--encre);
}

/* --- Pied de page --- */
.site-pied {
  background: var(--encre);
  color: #cdc4bc;
  padding-block: 3.5rem 2rem;
  margin-top: 4rem;
  font-size: .92rem;
}
.site-pied a { color: #f0e7dd; }
.site-pied h3 { color: var(--papier); font-size: 1rem; margin-bottom: .8rem; }
.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pied-grille ul { list-style: none; margin: 0; padding: 0; }
.pied-grille li { margin-bottom: .45rem; }
.pied-bas {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: #9a918a;
}

/* 4) COMPOSANTS ---------------------------------------------------------- */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  padding: .8rem 1.6rem;
  border-radius: var(--rayon);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--principal { background: var(--encre); color: var(--papier); }
.btn--principal:hover { background: var(--accent-fonce); color: var(--papier); }
.btn--secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--secondaire:hover { background: var(--encre); color: var(--papier); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-fonce); color: #fff; }
.btn--large { padding: 1rem 2rem; font-size: 1.05rem; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Accueil : hero --- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero-texte p.chapeau {
  font-size: 1.15rem;
  color: var(--encre-doux);
  max-width: 46ch;
}
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
/* Pas de rapport impose ici : le cadre prend la hauteur de l'image, qui
   garde donc ses proportions naturelles. Carree, A4 ou panoramique, elle
   s'affiche entiere et sans marge. */
.hero-image {
  border-radius: var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
  background: var(--papier-2);
}
.hero-image img {
  width: 100%;
  height: auto;
  /* display: block supprime les quelques pixels de blanc sous une image,
     hérités du fait qu'une image est par defaut alignee comme du texte. */
  display: block;
}

/* --- Grilles d'oeuvres --- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-lien { text-decoration: none; color: inherit; display: block; }
/* Cadre des vignettes.
   Le rapport 1/1.414 est celui de toute la serie A : un A5, un A4 et un A3
   ont exactement les memes proportions. Une oeuvre scannee proprement
   remplit donc le cadre sans marge visible.
   object-fit: contain garantit qu'aucune oeuvre n'est JAMAIS rognee, quel
   que soit son format : une piece hors norme s'affiche entiere, avec des
   marges couleur papier, comme dans un passe-partout. */
.carte-visuel {
  position: relative;
  aspect-ratio: 1 / 1.414;
  background: var(--papier-2);
  overflow: hidden;
  padding: .75rem;
}
.carte-visuel img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 300ms ease;
}
/* Pas de zoom au survol : agrandir une image affichee en "contain" la
   ferait deborder de son cadre, donc rogner l'oeuvre — exactement ce
   qu'on cherche a eviter. Le souleve de la carte suffit a signaler le survol. */
.carte:hover .carte-visuel img { opacity: .92; }
.carte-corps { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.carte-corps h3 { margin-bottom: .2rem; font-size: 1.1rem; }
.carte-meta { font-size: .85rem; color: var(--encre-doux); margin-bottom: .9rem; }
.carte-pied {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.prix { font-family: var(--titre); font-size: 1.15rem; font-weight: 600; }
.prix small { font-family: var(--texte); font-size: .78rem; color: var(--encre-doux); font-weight: 400; }

/* Pastilles (original / vendu / dernier exemplaire) */
.pastille {
  position: absolute;
  top: .8rem;
  left: .8rem;
  background: var(--blanc);
  color: var(--encre);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  box-shadow: var(--ombre);
}
.pastille--original { background: var(--encre); color: var(--papier); }
.pastille--vendu { background: var(--erreur); color: #fff; }
.pastille--dernier { background: var(--accent); color: #fff; }

/* --- Filtres --- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtre {
  font: inherit;
  font-size: .88rem;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: .4rem 1rem;
  cursor: pointer;
  color: var(--encre-doux);
  transition: all var(--transition);
}
.filtre:hover { border-color: var(--encre); color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }

/* --- Page produit --- */
.produit {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.produit-visuel {
  border-radius: var(--rayon-l);
  overflow: hidden;
  background: var(--papier-2);
  border: 1px solid var(--bordure);
}
.produit-infos .fiche {
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.2rem 0;
  border-block: 1px solid var(--bordure);
  font-size: .93rem;
}
.produit-infos .fiche li { display: flex; gap: 1rem; padding: .3rem 0; }
.produit-infos .fiche span:first-child { color: var(--encre-doux); min-width: 9rem; }
.prix-produit { font-family: var(--titre); font-size: 2rem; font-weight: 600; margin: .5rem 0 1.5rem; }

.champ { margin-bottom: 1.2rem; }
.champ label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.champ select, .champ input, .champ textarea {
  font: inherit;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select:focus, .champ input:focus, .champ textarea:focus { border-color: var(--accent); }
.aide { font-size: .82rem; color: var(--encre-doux); margin-top: .4rem; }

.stock-info { font-size: .88rem; margin-bottom: 1.2rem; }
.stock-info.bas { color: var(--accent-fonce); font-weight: 500; }
.stock-info.rupture { color: var(--erreur); font-weight: 500; }

/* --- Panier --- */
.ligne-panier {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--bordure);
}
.ligne-panier img {
  width: 90px; height: 110px;
  object-fit: cover;
  border-radius: var(--rayon);
  background: var(--papier-2);
}
.ligne-panier h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.ligne-panier .variante { font-size: .85rem; color: var(--encre-doux); }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.qte button {
  font: inherit; background: var(--blanc); border: none;
  width: 32px; height: 34px; cursor: pointer; color: var(--encre);
}
.qte button:hover:not(:disabled) { background: var(--papier-2); }
.qte button:disabled { opacity: .3; cursor: not-allowed; }
.qte span { min-width: 34px; text-align: center; font-size: .95rem; }
.lien-supprimer {
  background: none; border: none; font: inherit; font-size: .82rem;
  color: var(--encre-doux); cursor: pointer; text-decoration: underline; padding: 0; margin-top: .5rem;
}
.lien-supprimer:hover { color: var(--erreur); }

.recap {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}
.recap-ligne { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .95rem; }
.recap-total {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--bordure);
  margin-top: .8rem; padding-top: .9rem;
  font-family: var(--titre); font-size: 1.3rem; font-weight: 600;
}
.grille-panier { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }

/* --- Messages --- */
.message {
  padding: .9rem 1.1rem;
  border-radius: var(--rayon);
  font-size: .92rem;
  margin-bottom: 1.2rem;
  border-left: 3px solid;
}
.message--erreur { background: #fbeeed; border-color: var(--erreur); color: #7d2f27; }
.message--succes { background: #eef4ef; border-color: var(--succes); color: #2f5238; }
.message--info { background: var(--papier-2); border-color: var(--encre-doux); color: var(--encre); }

.vide { text-align: center; padding: 4rem 1rem; color: var(--encre-doux); }

/* --- Notification flottante (ajout au panier) --- */
.toast {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  background: var(--encre);
  color: var(--papier);
  padding: .9rem 1.3rem;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  z-index: 300;
  font-size: .92rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: translateY(0); }

/* --- Visionneuse galerie (lightbox) --- */
.visionneuse {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 19, .93);
  z-index: 400;
  display: none;
  place-items: center;
  padding: 2rem;
}
.visionneuse[open], .visionneuse.ouverte { display: grid; }
.visionneuse img { max-width: min(90vw, 1000px); max-height: 78vh; object-fit: contain; border-radius: var(--rayon); }
.visionneuse figcaption { color: #e8ded4; text-align: center; margin-top: 1rem; font-size: .95rem; }
.visionneuse button {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: none;
  width: 46px; height: 46px;
  border-radius: 999px;
  font-size: 1.4rem;
  cursor: pointer;
  display: grid; place-items: center;
}
.visionneuse button:hover { background: rgba(255, 255, 255, .22); }
.visionneuse .fermer { top: 1.5rem; right: 1.5rem; }
.visionneuse .prec { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: 1.5rem; top: 50%; transform: translateY(-50%); }

/* --- Bandeau texte / a propos --- */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.portrait { border-radius: var(--rayon-l); overflow: hidden; box-shadow: var(--ombre); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }

.citation {
  font-family: var(--titre);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.4;
  max-width: 26ch;
  color: var(--encre);
}

/* --- Etapes / rassurance --- */
.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; }
.trois h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.trois p { font-size: .93rem; color: var(--encre-doux); }
.trois .puce {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--papier-2);
  border: 1px solid var(--bordure);
  display: grid; place-items: center;
  font-family: var(--titre);
  margin-bottom: .9rem;
}

/* 5) RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero, .produit, .deux-colonnes { grid-template-columns: 1fr; }
  .grille-panier { grid-template-columns: 1fr; }
  .recap { position: static; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--bordure);
    padding: .5rem 1.2rem 1.2rem;
    box-shadow: var(--ombre);
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--bordure); }
  .nav a:last-child { border-bottom: none; }
  .site-entete .conteneur { position: relative; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.8rem; }
  .ligne-panier { grid-template-columns: 70px 1fr; }
  .ligne-panier img { width: 70px; height: 85px; }
  .ligne-panier > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

/* Respect des preferences systeme : pas d'animation si l'utilisateur n'en veut pas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impression : on retire le superflu */
@media print {
  .site-entete, .site-pied, .btn, .toast { display: none !important; }
}