@charset "UTF-8";
/* =========================================================================
   Sdakox — feuille de style unique
   Coffee shop & galerie d'art, Paris.

   Organisation :
     1.  Jetons de design (couleurs, rythme, typographie)
     2.  Polices auto-hébergées
     3.  Reset et bases
     4.  Mise en page (sections, rangées, colonnes)
     5.  Typographie
     6.  En-tête et navigation
     7.  Boutons
     8.  Bandeaux de page
     9.  Accueil
     10. Carrousel d'œuvres
     11. Grilles produits et fiches produit
     12. La Carte
     13. La Galerie
     14. Contact et formulaire
     15. Pied de page
     16. Utilitaires
     17. Impression

   Une seule requête CSS pour tout le site : ~32 Ko (≈8 Ko compressés), mis en
   cache un an (cf. .htaccess). Pour quatorze pages qui partagent le même
   en-tête, le même pied et les mêmes composants, découper en plusieurs
   feuilles coûterait plus en requêtes que ça ne ferait gagner en octets.
   ========================================================================= */


/* =========================================================================
   1. Jetons de design
   Les valeurs reprennent celles du thème d'origine pour que la refonte soit
   visuellement identique ; les nommer permet de les changer en un point.
   ========================================================================= */
:root {
  /* Palette de marque */
  --noir:          #14150f;   /* noir olivâtre, couleur primaire */
  --or:            #c9aa74;   /* or patiné, couleur secondaire */
  --creme:         #e5d9bf;   /* crème, couleur d'accent */
  --or-clair:      #fde1a5;   /* or clair, réservé à la carte */
  --bronze:        #7c6144;   /* bouton « La Carte » */
  --terracotta:    #b76e4d;   /* bouton « Boutique » */
  --brun-fonce:    #3d301f;   /* texte sur fond crème */

  /* Neutres */
  --anthracite:    #282828;   /* fond de l'en-tête, texte courant */
  --gris-section:  #272727;   /* sections sombres */
  --gris-clair:    #f6f6f6;   /* sections claires */
  --gris-texte:    #b5b5b5;   /* paragraphes sur fond sombre */
  --gris-doux:     #eaeaea;   /* paragraphes secondaires sur fond sombre */
  --blanc:         #ffffff;
  --nuit:          #1c2328;   /* fond de repli du bandeau d'accueil */
  --brun-footer:   #21170a;   /* fond du pied de page */

  /* Rythme vertical et largeurs — repris des variables du thème d'origine */
  --contenu-largeur:     80%;
  --contenu-max:         1080px;
  --section-padding:     56px;
  --gouttiere-colonne:   5.5%;
  --gouttiere-module:    30px;

  /* Familles */
  --f-titre:   "Cinzel", Georgia, "Times New Roman", serif;
  --f-serif:   "Marcellus", Georgia, "Times New Roman", serif;
  --f-sans:    "Montserrat", Helvetica, Arial, sans-serif;
  --f-plaque:  "Playfair Display", Georgia, "Times New Roman", serif;
  --f-courant: "Open Sans", Arial, sans-serif;

  /* Divers */
  --rayon-pilule: 80px;
  --transition:   300ms ease;
}


/* =========================================================================
   2. Polices auto-hébergées
   Sous-ensemble latin des fichiers variables Google Fonts. Aucune requête
   vers un domaine tiers : un aller-retour DNS de moins, et rien à déclarer
   côté RGPD. `font-display: swap` affiche le texte immédiatement avec la
   police de repli plutôt que de laisser un blanc.
   ========================================================================= */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Marcellus n'existe qu'en une seule graisse. Toutes les règles qui
   l'emploient sont donc calées sur 400 : demander 500 ou 700 ferait
   fabriquer un faux gras au navigateur, qui épaissit les contours au
   pinceau et salit le dessin. La hiérarchie passe par la taille et la
   couleur, ce qui suffit largement ici. */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}


/* =========================================================================
   3. Reset et bases
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--f-courant);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--anthracite);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* les fonds en plein écran ne doivent pas créer de scroll latéral */
}

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

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

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

/* Cible de focus visible au clavier, invisible à la souris. */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
   4. Mise en page
   Trois primitives suffisent pour tout le site :
     .section  — bande pleine largeur, gère le fond et le rythme vertical
     .rangee   — conteneur centré à 80 % / 1080 px max
     .colonnes — grille fluide, réglée par des classes de gabarit
   ========================================================================= */
.section {
  position: relative;
  padding: var(--section-padding) 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.section--sombre   { background-color: var(--gris-section); color: var(--gris-texte); }
.section--noire    { background-color: var(--noir);         color: var(--gris-texte); }
.section--claire   { background-color: var(--gris-clair);   color: var(--anthracite); }
.section--sans-haut  { padding-top: 0; }
.section--sans-bas   { padding-bottom: 0; }

.rangee {
  width: var(--contenu-largeur);
  max-width: var(--contenu-max);
  margin-inline: auto;
}

.rangee--large { max-width: 1280px; }
.rangee--pleine { width: 95%; max-width: none; }

.colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gouttiere-module) var(--gouttiere-colonne);
  align-items: flex-start;
}

.colonnes--centrees { align-items: center; }

/* Gabarits de colonnes. Les largeurs tiennent compte de la gouttière pour
   que deux colonnes « moitié » tiennent exactement sur une ligne. */
.col-1-2 { flex: 1 1 calc(50% - var(--gouttiere-colonne)); min-width: 0; }
.col-3-5 { flex: 1 1 calc(60% - var(--gouttiere-colonne)); min-width: 0; }
.col-2-5 { flex: 1 1 calc(40% - var(--gouttiere-colonne)); min-width: 0; }
.col-1-4 { flex: 1 1 calc(25% - var(--gouttiere-colonne)); min-width: 0; }
.col-1-1 { flex: 1 1 100%; min-width: 0; }

/* Deux rangées qui se suivent dans une même section sont séparées de 30 px,
   comme les rangées du constructeur d'origine. Les modificateurs ci-dessous
   resserrent cet écart là où la maquette le fait — c'est ce qui colle le
   sous-titre à son titre, ou le lien « Voir tous nos produits » à sa grille. */
.section > .rangee + .rangee { margin-top: 60px; }

.section > .rangee + .rangee.remonte-15 { margin-top: 45px; }
.section > .rangee + .rangee.remonte-25 { margin-top: 35px; }
.section > .rangee + .rangee.remonte-40 { margin-top: 20px; }


/* =========================================================================
   5. Typographie
   ========================================================================= */
.titre-page {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.375rem);   /* 36px → 54px */
  line-height: 1.1;
  color: var(--or);
  padding-bottom: 10px;
}

.sous-titre-page {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.125rem, .95rem + .75vw, 1.5rem);   /* 18px → 24px */
  line-height: 1.3;
  color: var(--gris-clair);
}

/* Titre de section : « Plus qu'un Coffee Shop », « La Boutique »… */
.titre-section--centre { text-align: center; }

.titre-section {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  padding-bottom: 10px;
  color: var(--blanc);
}

.titre-section--sombre { color: var(--noir); }

.texte-courant {
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--gris-texte);
}

.texte-courant--clair { color: var(--gris-doux); }

.lien-souligne {
  display: block;
  font-family: var(--f-sans);
  font-weight: 300;
  text-align: center;
  text-decoration: underline;
  color: var(--blanc);
  transition: color var(--transition);
}

.lien-souligne:hover,
.lien-souligne:focus-visible { color: var(--or); }

.lien-souligne--sombre {
  font-weight: 400;
  color: var(--anthracite);
}

/* Lien souligné au fil du texte (page 404). */
.lien-en-ligne {
  text-decoration: underline;
  color: var(--or);
  transition: color var(--transition);
}

.lien-en-ligne:hover,
.lien-en-ligne:focus-visible { color: var(--creme); }

/* Ligne « 6 résultats affichés » au-dessus des grilles produits. */
.compteur-resultats {
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--anthracite);
}

.lien-souligne--sombre:hover,
.lien-souligne--sombre:focus-visible { color: var(--noir); }


/* =========================================================================
   6. En-tête et navigation
   ========================================================================= */
.entete {
  background: var(--anthracite);
  border-bottom: 4px solid var(--or);
  padding: 6px 0;
  position: relative;
  z-index: 100;
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.entete__logo {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.7;          /* reprend la hauteur de l'en-tête d'origine (70 px) */
  color: var(--or);
  white-space: nowrap;
  transition: color var(--transition);
}

.entete__logo:hover,
.entete__logo:focus-visible { color: var(--creme); }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav__lien {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--blanc);
  transition: color var(--transition);
}

.nav__lien:hover,
.nav__lien:focus-visible { color: var(--or); }

.nav__lien[aria-current="page"] { color: var(--creme); }

/* Bouton hamburger — masqué au-dessus de 980 px (cf. section responsive). */
.nav__bascule {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--blanc);
}

.nav__bascule svg { width: 28px; height: 28px; }


/* =========================================================================
   7. Boutons
   Quatre variantes reprises telles quelles de la maquette : elles ne
   diffèrent que par le couple fond / texte.
   ========================================================================= */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em 1em;
  border: 0;
  border-radius: var(--rayon-pilule);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  cursor: pointer;
  transition: padding var(--transition), background-color var(--transition), color var(--transition);
}

.bouton__fleche {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width var(--transition), opacity var(--transition);
}

/* Au survol, le bouton s'allonge et laisse apparaître la flèche : c'est
   l'animation du thème d'origine, réécrite sans police d'icônes. */
.bouton:hover .bouton__fleche,
.bouton:focus-visible .bouton__fleche { width: 1em; opacity: 1; }

.bouton--bronze     { background: var(--bronze);     color: var(--blanc); }
.bouton--creme      { background: var(--creme);      color: var(--brun-fonce); }
.bouton--terracotta { background: var(--terracotta); color: var(--blanc); }
.bouton--or         { background: var(--or);         color: var(--noir); }

.bouton--bronze:hover     { background: #8d6f4f; }
.bouton--creme:hover      { background: #efe5d2; }
.bouton--terracotta:hover { background: #c67e5d; }
.bouton--or:hover         { background: #d6bb8c; }


/* =========================================================================
   8. Bandeaux de page
   Chaque page ouvre sur une bande à fond photographique. L'image est posée
   en `background-image` avec un voile pour garantir le contraste du texte ;
   les variantes 800 / 1280 / 1920 px évitent de servir 1920 px à un mobile.
   ========================================================================= */
.bandeau {
  color: var(--blanc);
  background-color: var(--nuit);
  background-position: center;
  background-size: cover;
}

.bandeau__contenu { text-align: center; }

/* Accueil — bande haute, pas de voile sur grand écran. */
.bandeau--accueil {
  padding: 150px 0;
  background-image: url("../img/fond-accueil-800.webp");
}

/* Carte, Galerie, Contact — bandes plus basses. */
.bandeau--carte {
  padding: var(--section-padding) 0 90px;
  background-color: var(--anthracite);
  background-image: url("../img/fond-carte-header-800.webp");
}

.bandeau--galerie {
  background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
                    url("../img/fond-galerie-800.webp");
}

.bandeau--contact {
  padding: 76px 0;
  background-image: linear-gradient(rgba(0, 0, 0, .46), rgba(0, 0, 0, .46)),
                    url("../img/fond-contact-800.webp");
}

.bandeau--boutique {
  background: var(--gris-clair);
  padding-bottom: 0;
}

.bandeau--carte .titre-page,
.bandeau--galerie .titre-page { padding-top: 20px; }

.bandeau--carte .titre-page { color: var(--or-clair); }

/* Le fond du bandeau d'accueil s'assombrit sur mobile : la photo est
   recadrée, le texte passerait sinon sur une zone claire. */
@media (max-width: 767px) {
  .bandeau--accueil {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0, 0, 0, .1) 0%, rgba(40, 40, 40, .99) 99%),
                      url("../img/fond-accueil-800.webp");
  }
  .bandeau--contact {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0, 0, 0, .1) 0%, rgba(40, 40, 40, .99) 99%),
                      url("../img/fond-contact-800.webp");
  }
}

@media (min-width: 801px) {
  .bandeau--accueil  { background-image: url("../img/fond-accueil-1280.webp"); }
  .bandeau--carte    { background-image: url("../img/fond-carte-header-1280.webp"); }
  .bandeau--galerie  { background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
                                         url("../img/fond-galerie-1280.webp"); }
  .bandeau--contact  { background-image: linear-gradient(rgba(0, 0, 0, .46), rgba(0, 0, 0, .46)),
                                         url("../img/fond-contact-1280.webp"); }
}

@media (min-width: 1281px) {
  .bandeau--accueil  { background-image: url("../img/fond-accueil-1920.webp"); }
  .bandeau--carte    { background-image: url("../img/fond-carte-header-1920.webp"); }
  .bandeau--galerie  { background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)),
                                         url("../img/fond-galerie-1800.webp"); }
  .bandeau--contact  { background-image: linear-gradient(rgba(0, 0, 0, .46), rgba(0, 0, 0, .46)),
                                         url("../img/fond-contact-1920.webp"); }
}

/* Trois boutons sous le titre d'accueil, sur une ligne resserrée. */
.bandeau__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 90%;
  margin: 22px auto 0;
}

.bandeau__actions .bouton { flex: 0 1 auto; }

@media (max-width: 767px) {
  .bandeau__actions {
    gap: 16px;
    width: 90%;
  }
}


/* =========================================================================
   9. Accueil
   ========================================================================= */
/* Bande « Plus qu'un Coffee Shop, une Scène » */
.presentation__texte { max-width: 34em; }
.presentation__texte p { margin-bottom: 1em; }

/* Bande « L'Exposition du Moment » : mur sombre texturé. */
.section--mur {
  background-color: var(--noir);
  background-image: url("../img/fond-mur-sombre-800.webp");
}

@media (min-width: 801px) {
  .section--mur { background-image: url("../img/fond-mur-sombre-1280.webp"); }
}

.section__titre-seul { padding-bottom: 0; }


/* =========================================================================
   10. Carrousel d'œuvres
   Trois œuvres visibles sur grand écran, deux sur tablette, une sur mobile.
   Le défilement utilise `scroll-snap` : il fonctionne à la souris, au doigt
   et au clavier même si le JavaScript ne se charge pas — les flèches ne font
   qu'ajouter un confort supplémentaire.
   ========================================================================= */
/* Le bloc porte data-carrousel : il englobe la piste, les flèches ET les
   puces, pour que le script les retrouve toutes depuis un seul point. */
.carrousel-bloc { position: relative; }

.carrousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.carrousel__piste {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  overflow-x: auto;
  /* Calage natif pour le cas sans JavaScript. Le script le désactive dès son
     démarrage : un `scroll-snap` obligatoire ramène de force la piste sur son
     point de calage courant et annule les déplacements programmés — c'est ce
     qui empêchait les flèches d'agir. Une fois le script en place, c'est lui
     qui aligne la piste, de façon prévisible. */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* la barre est remplacée par les puces */
  -ms-overflow-style: none;
}

.carrousel__piste::-webkit-scrollbar { display: none; }

.carrousel__element {
  flex: 0 0 33.3333%;
  scroll-snap-align: start;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carrousel__element img { width: 100%; }

/* Copies posées de part et d'autre par main.js pour que la boucle soit
   continue. Elles sont décoratives : hors du parcours clavier et ignorées
   par les lecteurs d'écran. */
.carrousel__element--clone { pointer-events: none; }

/* Étiquette « plaque de musée » sous chaque œuvre. */
.plaque {
  width: 61%;
  min-width: 150px;
  margin-top: 14px;
  padding: 4px 8px;
  text-align: center;
  font-family: var(--f-plaque);
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  background: url("../img/plaque-400.webp") center / 100% 100% no-repeat;
}

.plaque em { font-style: italic; }

.carrousel__fleche {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: #b1b1b1;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}

.carrousel__fleche:hover { color: var(--or); }

.carrousel__puces {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.carrousel__puce {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dcdcdc;
  opacity: .3;
  cursor: pointer;
}

.carrousel__puce[aria-current="true"] { opacity: 1; }

@media (max-width: 980px) {
  .carrousel__element { flex-basis: 50%; padding: 0 20px; }
}

@media (max-width: 767px) {
  .carrousel__element { flex-basis: 100%; padding: 0 10px; }
  .carrousel__fleche  { display: none; }
}


/* =========================================================================
   11. Grilles produits et fiches produit
   ========================================================================= */
.produits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 5.5%;
}

.produit-carte { text-align: left; }

.produit-carte__visuel {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--blanc);
}

.produit-carte__visuel img {
  width: 100%;
  transition: transform 400ms ease;
}

/* Voile blanc au survol, repris du thème : il éclaircit la vignette sans
   masquer l'œuvre. */
.produit-carte__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #e5e5e5;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.produit-carte:hover .produit-carte__visuel::after { opacity: 1; }

.produit-carte__titre {
  margin-top: 10px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--or);
}

.produit-carte__prix {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--noir);
}

/* Sur fond sombre (galerie), le prix doit rester lisible. */
.produits--sombre .produit-carte__prix { color: var(--or); }
.produits--sombre .produit-carte__titre { color: var(--or); }

@media (max-width: 980px) {
  .produits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .produits { grid-template-columns: 1fr; }
}

/* --- Fiche produit ------------------------------------------------------ */
.fiche {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gouttiere-module) var(--gouttiere-colonne);
}

.fiche__visuel { flex: 1 1 calc(45% - var(--gouttiere-colonne)); min-width: 0; }
.fiche__infos  { flex: 1 1 calc(55% - var(--gouttiere-colonne)); min-width: 0; }

.fiche__titre {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  color: var(--creme);
  padding-bottom: 10px;
}

.fiche__prix {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 22px;
  color: var(--or);
  margin-bottom: 1em;
}

.fiche__description {
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--gris-texte);
  margin-bottom: 1.5em;
}

.fiche__meta {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--gris-texte);
  margin-top: 1.5em;
}

.fiche__meta a { color: var(--or); text-decoration: underline; }

/* Fil d'Ariane */
.fil-ariane {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--gris-texte);
  margin-bottom: 28px;
}

.fil-ariane a { color: var(--or); }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane li { display: inline; }
.fil-ariane li + li::before { content: " / "; color: var(--gris-texte); }


/* =========================================================================
   12. La Carte
   Le menu est un tableau de prix : chaque ligne pose le libellé à gauche et
   le prix à droite, alignés sur une grille 5fr/1fr comme dans la maquette.
   ========================================================================= */
.carte {
  background: url("../img/fond-carte-1000.webp") center / cover no-repeat;
  padding: 35px;
}

@media (min-width: 1001px) {
  .carte { background-image: url("../img/fond-carte-1600.webp"); }
}

.carte__colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 40px var(--gouttiere-colonne);
}

.carte__colonne { flex: 1 1 calc(50% - var(--gouttiere-colonne)); min-width: 0; }

.carte__famille {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--or-clair);
  padding-bottom: 10px;
}

/* 15 px entre deux articles : c'est l'espacement obtenu sur le site d'origine
   (marge de module de 30 px, resserrée de 15 px par le groupe). */
.carte__liste {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 34px;
}

.carte__liste:last-child { margin-bottom: 0; }

.carte__ligne {
  display: grid;
  grid-template-columns: 5fr auto;
  gap: 10px;
  align-items: baseline;
  color: var(--or-clair);
  font-family: var(--f-courant);
  font-weight: 400;          /* descriptions et prix en graisse normale… */
  line-height: 1.7;
}

.carte__nom { font-weight: 700; }   /* …seul le nom du produit est en gras */

.carte__prix { text-align: right; white-space: nowrap; }

@media (max-width: 767px) {
  .carte { padding: 22px; }
  .carte__colonne { flex-basis: 100%; }
}


/* =========================================================================
   13. La Galerie
   ========================================================================= */
.artiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gouttiere-module) var(--gouttiere-colonne);
  align-items: center;
}

.artiste__visuel { flex: 1 1 calc(40% - var(--gouttiere-colonne)); min-width: 0; }
.artiste__texte  { flex: 1 1 calc(60% - var(--gouttiere-colonne)); min-width: 0; }

.appel-artistes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gouttiere-module) var(--gouttiere-colonne);
  align-items: center;
}

.appel-artistes__texte {
  flex: 1 1 calc(60% - var(--gouttiere-colonne));
  min-width: 0;
  /* Titre, paragraphe et bouton séparés du même intervalle : sans cela le
     bouton se colle au texte, les trois blocs n'ayant pas de marge propre. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.appel-artistes__texte .titre-section { padding-bottom: 0; }

.appel-artistes__visuel { flex: 1 1 calc(40% - var(--gouttiere-colonne)); min-width: 0; }


/* =========================================================================
   14. Contact et formulaire
   ========================================================================= */
.contact__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 40px var(--gouttiere-colonne);
  align-items: flex-start;
}

.contact__formulaire { flex: 1 1 calc(66.666% - var(--gouttiere-colonne)); min-width: 0; }
.contact__infos      { flex: 1 1 calc(33.333% - var(--gouttiere-colonne)); min-width: 0; }

/* Nom et e-mail côte à côte : deux champs courts sur une même ligne, qui
   repassent l'un sous l'autre dès que la colonne devient étroite. */
.champs-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.champ { margin-bottom: 14px; }

.champ__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--gris-texte);
}

.champ__saisie {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #eee;
  color: #333;
  font-family: var(--f-sans);
  font-size: 14px;
}

.champ__saisie:focus {
  outline: 2px solid var(--or);
  outline-offset: 0;
}

/* Le libellé s'affiche dans le champ et disparaît à la saisie. Le <label>
   reste présent dans le HTML, masqué visuellement : un placeholder seul
   n'est pas annoncé de façon fiable par les lecteurs d'écran. */
.champ__saisie::placeholder {
  color: #6b6b6b;
  opacity: 1;
}

textarea.champ__saisie {
  min-height: 150px;
  resize: vertical;
}

.formulaire__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

/* Question anti-robot : une addition, comme sur le site d'origine. */
.anti-robot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--gris-texte);
}

.anti-robot__saisie { width: 80px; padding: 10px; }

/* Messages renvoyés par contact.php */
.formulaire__message {
  padding: 14px 16px;
  margin-bottom: 18px;
  font-family: var(--f-sans);
  font-size: 14px;
}

.formulaire__message--ok      { background: rgba(201, 170, 116, .15); color: var(--creme); border-left: 3px solid var(--or); }
.formulaire__message--erreur  { background: rgba(183, 110, 77, .15);  color: #f0c9b9;      border-left: 3px solid var(--terracotta); }

/* Blocs d'information à droite du formulaire. */
.info-bloc { margin-bottom: 25px; }

.info-bloc__titre {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--creme);
  padding-bottom: 10px;
}

.info-bloc__contenu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--blanc);
}

.info-bloc__icone {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: var(--or);
}

.info-bloc__contenu a:hover { text-decoration: underline; }

.horaires {
  margin-top: 35px;
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--blanc);
}


/* =========================================================================
   15. Pied de page
   ========================================================================= */
.pied {
  background-color: var(--brun-footer);
  background-image: url("../img/fond-footer-1000.webp");
  background-position: center;
  background-size: cover;
  padding: var(--section-padding) 0;
  text-align: center;
}

@media (min-width: 1001px) {
  .pied { background-image: url("../img/fond-footer-1792.webp"); }
}

.pied__logo {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  color: var(--or);
  padding-bottom: 10px;
}

.pied__baseline {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gris-clair);
}

/* Filet dégradé : dense au centre, effacé sur les bords. */
.pied__filet {
  width: 62%;
  height: 1px;
  margin: 18px auto 0;
  border: 0;
  background: radial-gradient(circle at center, var(--or) 0%, rgba(255, 255, 255, 0) 100%);
}

.pied__colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px var(--gouttiere-colonne);
  margin-top: 24px;
  text-align: center;
}

.pied__colonne { flex: 1 1 calc(25% - var(--gouttiere-colonne)); min-width: 160px; }

.pied__titre,
.pied__lien,
.pied__texte,
.pied__mentions {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--or);
}

.pied__titre { font-size: 18px; padding-bottom: 6px; }

.pied__lien {
  display: block;
  transition: color var(--transition);
}

.pied__lien:hover,
.pied__lien:focus-visible {
  color: var(--creme);
  text-decoration: underline;
}

.pied__reseaux {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.pied__reseau {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  color: var(--blanc);
  transition: opacity var(--transition);
}

.pied__reseau:hover { opacity: .8; }
.pied__reseau svg { width: 16px; height: 16px; fill: currentColor; }

.pied__reseau--facebook  { background: #3b5998; }
.pied__reseau--instagram { background: #ea2c59; }

.pied__mentions { margin-top: 25px; }


/* =========================================================================
   16. Utilitaires
   ========================================================================= */
/* Visible uniquement pour les lecteurs d'écran. */
.lecteur-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : apparaît au premier Tab. */
.evitement {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 10px 18px;
  background: var(--or);
  color: var(--noir);
  font-family: var(--f-sans);
  font-size: 14px;
  transition: transform 200ms ease;
}

.evitement:focus { transform: translate(-50%, 0); }

.centre { text-align: center; }
.milieu { margin-inline: auto; }


/* =========================================================================
   17. Responsive — navigation repliée
   Le point de rupture 980 px est celui du thème d'origine, pour que le
   passage au menu mobile se fasse exactement au même endroit.
   ========================================================================= */
@media (max-width: 980px) {
  :root { --contenu-largeur: 90%; }

  .nav__bascule { display: block; }

  .nav__liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    background: var(--anthracite);
    border-bottom: 2px solid var(--creme);
    display: none;
  }

  .nav__liste[data-ouvert="true"] { display: flex; }

  .nav__lien {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(229, 217, 191, .15);
  }

  .colonnes > [class^="col-"] { flex-basis: 100%; }

  .fiche__visuel,
  .fiche__infos,
  .artiste__visuel,
  .artiste__texte,
  .appel-artistes__texte,
  .appel-artistes__visuel,
  .contact__formulaire,
  .contact__infos { flex-basis: 100%; }
}

@media (max-width: 767px) {
  :root { --section-padding: 40px; }

  .pied__colonne { flex-basis: calc(50% - var(--gouttiere-colonne)); }
}

@media (max-width: 479px) {
  .pied__colonne { flex-basis: 100%; }
}


/* =========================================================================
   18. Impression — on retire les fonds et la navigation.
   ========================================================================= */
@media print {
  .entete, .pied, .carrousel__fleche, .carrousel__puces, .bandeau__actions { display: none; }
  body { color: #000; background: #fff; }
  .section, .bandeau { background: none !important; color: #000; padding: 12px 0; }
  .titre-page, .titre-section, .carte__famille, .carte__ligne { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}