/* ============================================================
   L'ATELIER DES EXPLORATEURS — feuille de style
   Les couleurs de la marque sont regroupées en haut :
   modifie une variable ici, elle change partout sur le site.
   ============================================================ */

  @font-face {
  font-family: "Ma Police";
  src: url("polices/Outfit-Medium.ttf") format("truetype");
  font-weight: 400;
}
 
:root {
  --sarcelle: #7d2f17;        /* la couleur de ton titre */
  --sarcelle-fonce: #501b0b;
  --fond-sombre: #674201;     /* fond de l'en-tête et du pied */
  --fond-page: #f7f4ee;       /* fond crème doux du corps */
  --texte: #37373a;
  --bleu-pale: #dabfa4;       /* accents doux */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--fond-page);
  color: var(--texte);
  line-height: 1.6;
  font-family: "Ma Police", Georgia, serif;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

img { max-width: 40%; height: auto; border-radius: 8px; }

h2 { color: var(--sarcelle-fonce); margin-top: 40px; }


/* ---------- En-tête ---------- */
header {
  background: var(--fond-sombre);
  color: #e9d6ba;
  text-align:center;
  padding: 36px 20px 20px;
}

header h1 { margin: 0; font-size: 2.2em; letter-spacing: 1px; }

.logo { width: 100px;}

.slogan {
  color: var(--bleu-pale);
  font-style: italic;
  margin: 6px 0 18px;
}

.entete {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  position:relative;
}

/* ---------- Menu ---------- */
nav a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 10px;
  padding: 6px 4px;
}

nav a:hover { color: var(--bleu-pale); text-decoration: underline; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  background: var(--sarcelle);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 24px;
  text-decoration: none;
  margin: 6px 4px;
}

.bouton:hover { background: var(--sarcelle-fonce); }

/* ---------- Galerie de photos ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* ---------- Pied de page ---------- */
footer {
  background: var(--fond-sombre);
  color: #ffffff;
  text-align: center;
  padding: 22px 20px;
}
/* ---------- Aperçu au survol (« Au recto » / « Au verso ») ---------- */
.apercu { position: relative; cursor: help; }

.apercu img {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 130%;
  transform: translateX(-50%);
  width: 220px;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

.apercu:hover img { display: block; }


footer .signature { color: var(--bleu-pale); font-style: italic; }

/* ============================================================
   THÈME NOËL — pour la page du kit seulement
   ------------------------------------------------------------
   La page kit-noel.html porte <body class="noel"> : les règles
   ci-dessous s'appliquent UNIQUEMENT sur cette page et
   remplacent les couleurs habituelles de l'en-tête.
   Pour essayer : recharge la page du kit.
   Pour revenir comme avant : enlève le mot  noel  dans la
   balise <body class="noel"> de kit-noel.html — c'est tout.
   ============================================================ */

/* L'en-tête devient vert sapin, texte crème */
body.noel header {
  background: #1e4d3a;
  color: #f7ead1;
}

/* Le slogan devient doré */
body.noel .slogan { color: #ecc26a; }

/* Le menu : survol doré */
body.noel nav a:hover { color: #ecc26a; }

/* Les titres de la page : rouge Noël profond */
body.noel h2 { color: #9b1c1c; }

/* Les boutons (Commander sur Etsy) : rouge Noël */
body.noel .bouton { background: #9b1c1c; }
body.noel .bouton:hover { background: #761212; }

/* Le pied de page suit l'en-tête, en sapin */
body.noel footer { background: #1e4d3a; }

/* ---------- Thème Noël, 2e couche : les DÉTAILS festifs ---------- */
/* (c'est eux qui enlèvent l'effet « plate » : lumières, ruban, neige) */

/* Un ruban rayé tout en haut de la page, comme un papier d'emballage */
body.noel::before {
  content: "";
  display: block;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #9b1c1c 0 28px, #ecc26a 28px 40px,
    #1e4d3a 40px 68px, #ecc26a 68px 80px
  );
}

/* La guirlande de lumières sous le menu :
   une rangée de petites lumières rouge, or, vert, or... */
body.noel header {
  border-bottom: 14px dotted #ecc26a;
  border-image: none;
  box-shadow: inset 0 -16px 0 -6px rgba(0, 0, 0, 0.15);
}

body.noel nav {
  padding-bottom: 8px;
  border-bottom: 3px solid #ecc26a;
}

/* Les titres brillent d'un doré doux en ombre portée */
body.noel h2 {
  text-shadow: 1px 1px 0 #ecc26a;
}

/* La liste du kit : des « boules » en guise de puces,
   rouge, or, sapin, en alternance */
body.noel #kit ul { list-style: none; padding-left: 6px; }
body.noel #kit li::before {
  content: "●";
  margin-right: 10px;
  font-size: 0.85em;
}
body.noel #kit li:nth-child(3n+1)::before { color: #9b1c1c; }
body.noel #kit li:nth-child(3n+2)::before { color: #d9a441; }
body.noel #kit li:nth-child(3n)::before   { color: #1e4d3a; }

/* Les flocons qui tombent (créés par le petit script
   au bas de kit-noel.html) : discrets, non cliquables */
.flocon {
  position: fixed;
  top: -4vh;
  color: #ffffff;
  text-shadow: 0 0 4px rgba(30, 77, 58, 0.45);
  pointer-events: none;
  z-index: 50;
  animation-name: chute;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes chute {
  to { transform: translateY(108vh) rotate(300deg); }
}