/* =====================================================
   La Belle Image · feuille de style
   Direction : carte de visite typographique fin XIXe.
   Papier kraft, encre noire, encre rouge oxblood, ardoise et craie.
   Aucun fait-main enfantin : rigueur des filets, ornements
   discrets, petites capitales, lettrines.
   ===================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Kraft / papier ancien */
  --kraft-clair:      #e8d6ae;
  --kraft:            #c9a373;
  --kraft-fonce:      #8a6c3f;
  --kraft-tres-fonce: #4f3c20;

  /* Encre noire et papier crème */
  --encre:            #14100e;
  --encre-douce:      #2a221c;
  --papier:           #f5ecd6;
  --papier-fond:      #ede1c1;

  /* Encre rouge · oxblood / cinabre vieilli, pas minium */
  --rouge:            #8a2418;
  --rouge-sombre:     #5a1a13;

  /* Ardoise & craie */
  --ardoise:          #1f2622;
  --ardoise-claire:   #2d3631;
  --craie:            #f0e8d6;

  /* Typographie */
  --serif-titre: "IM Fell DW Pica SC", "IM Fell English SC", "Cormorant Garamond", "Garamond", "Georgia", serif;
  --serif-italique: "IM Fell English", "Cormorant Garamond", "Garamond", "Georgia", serif;
  --serif:       "Cormorant Garamond", "Garamond", "Georgia", serif;
  --craie-script: "Caveat", "Bradley Hand", "Marker Felt", cursive;

  --max-largeur: 1080px;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.05vw + 14px, 19px);
  line-height: 1.6;
  color: var(--encre);
  background-color: var(--papier-fond);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(138,108,63,0.08), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(79,60,32,0.07), transparent 60%),
    repeating-linear-gradient(127deg,
      rgba(79,60,32,0.020) 0 1px,
      transparent 1px 6px);
  min-height: 100vh;
}

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

a {
  color: var(--rouge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--rouge-sombre); }

::selection { background: var(--rouge); color: var(--papier); }

.skip {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip:focus {
  position: static; width: auto; height: auto;
  padding: 0.6rem 1rem;
  background: var(--encre); color: var(--papier);
}

/* ---------- Bandeau / wordmark ---------- */
.bandeau {
  background: var(--papier);
  border-top: 4px double var(--encre);
  border-bottom: 4px double var(--encre);
}
.bandeau-inner {
  max-width: var(--max-largeur);
  margin: 0 auto;
  padding: 1.6rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.wordmark {
  display: inline-block;
  font-family: var(--serif-titre);
  text-decoration: none;
  color: var(--encre);
  text-transform: uppercase;
  font-feature-settings: "smcp", "c2sc";
}
.wordmark-line-1 {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;       /* compense pour rester centré */
  font-style: italic;
  color: var(--rouge);
}
.wordmark-line-2 {
  display: block;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1;
  margin-top: 0.2rem;
  font-weight: 400;
}
.wordmark:hover { color: var(--rouge-sombre); }

.wordmark-ornement {
  display: block;
  margin: 0.6rem auto 0;
  font-family: var(--serif-italique);
  font-size: 1rem;
  color: var(--kraft-tres-fonce);
  letter-spacing: 0.1em;
}
.wordmark-ornement::before,
.wordmark-ornement::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--rouge);
}

.nav-principale {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.6rem;
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1.05rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--kraft-fonce);
  width: 100%;
}
.nav-principale a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
.nav-principale a:hover,
.nav-principale a:focus-visible {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}

/* ---------- Sections ---------- */
.section {
  padding: 4rem 1.6rem 3.6rem;
  position: relative;
}
.section + .section::before {
  /* ornement de séparation entre sections */
  content: "❦";
  display: block;
  text-align: center;
  font-size: 1.4rem;
  color: var(--rouge);
  margin: -2rem 0 2.4rem;
}
.section-inner { max-width: var(--max-largeur); margin: 0 auto; }

.titre-section {
  font-family: var(--serif-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 0.4rem;
  color: var(--encre);
}
.titre-section + .surtitre,
.surtitre {
  display: block;
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  color: var(--kraft-tres-fonce);
  margin: 0 0 1.6rem;
}
.titre-filets {
  display: block;
  text-align: center;
  margin: 0 0 2rem;
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  padding: 0.4rem 0;
  position: relative;
}
.titre-filets::before,
.titre-filets::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--encre);
}
.titre-filets::before {
  margin: -0.45rem auto 0.4rem;
  width: 40%;
}
.titre-filets::after {
  margin: 0.4rem auto -0.45rem;
  width: 40%;
}

.sous-titre {
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--encre-douce);
  max-width: 60ch;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.kicker {
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1rem;
  color: var(--rouge);
  margin: 0 0 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rouge { color: var(--rouge); font-feature-settings: "lnum"; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  max-width: var(--max-largeur);
  margin: 0 auto;
  padding: 4.4rem 1.6rem 3.4rem;
  align-items: center;
}
.hero-carton {
  background: var(--papier);
  padding: 2.4rem 2.2rem 2.6rem;
  border: 1px solid var(--kraft-fonce);
  outline: 1px solid var(--kraft-fonce);
  outline-offset: 6px;
  position: relative;
}
.hero h1 {
  font-family: var(--serif-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
  color: var(--encre);
}
.hero h1 em {
  font-family: var(--serif-italique);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.lede {
  font-size: 1.12rem;
  margin: 0 0 1.8rem;
  max-width: 38ch;
  color: var(--encre-douce);
}
.lede::first-letter {
  /* lettrine */
  font-family: var(--serif-titre);
  float: left;
  font-size: 3.4rem;
  line-height: 0.85;
  padding: 0.2rem 0.5rem 0 0;
  color: var(--rouge);
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
}

.btn-primaire,
.btn-secondaire {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid var(--encre);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn-primaire {
  background: var(--encre); color: var(--papier);
  outline: 1px solid var(--encre); outline-offset: 3px;
}
.btn-primaire:hover,
.btn-primaire:focus-visible {
  background: var(--rouge); border-color: var(--rouge);
  outline-color: var(--rouge); color: var(--papier);
}
.btn-secondaire {
  background: transparent; color: var(--encre);
}
.btn-secondaire:hover,
.btn-secondaire:focus-visible {
  background: var(--encre); color: var(--papier);
}

/* Cadre souvenir hero · épreuve photo passe-partout */
.hero-aside { display: flex; justify-content: center; }
.cadre-souvenir {
  background: var(--papier);
  padding: 1rem 1rem 1.4rem;
  border: 1px solid var(--kraft-tres-fonce);
  outline: 1px solid var(--kraft-tres-fonce);
  outline-offset: 4px;
  box-shadow: 0 10px 24px rgba(20,16,14,0.22);
  max-width: 460px;
  margin: 0;
}
.cadre-photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--encre);
  background: var(--encre);
}
.cadre-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.92);
}
.cadre-legende {
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--encre-douce);
  margin: 0.9rem 0 0;
  text-align: center;
  letter-spacing: 0.08em;
}

/* ---------- Concept (3 promesses) ---------- */
.trois-promesses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--kraft-fonce);
  border-bottom: 1px solid var(--kraft-fonce);
}
.promesse {
  padding: 2rem 1.6rem;
  border-right: 1px solid var(--kraft-fonce);
  text-align: center;
}
.promesse:last-child { border-right: none; }
.promesse .numero {
  font-family: var(--serif-titre);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--rouge);
  display: block;
  margin-bottom: 0.7rem;
}
.promesse h3 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  font-size: 1.2rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--encre);
  display: inline-block;
}
.promesse p {
  margin: 0; font-size: 1rem;
  color: var(--encre-douce);
}

/* ---------- Offres ---------- */
.offres { background: var(--papier); }
.grille-offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--encre);
  background: var(--papier);
}
.offre {
  padding: 1.6rem 1.4rem 1.8rem;
  border-right: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  display: flex; flex-direction: column;
  background: var(--papier);
}
.offre:nth-child(3n) { border-right: none; }
.offre:nth-last-child(-n+3) { border-bottom: none; }
.offre-secondaire {
  background: var(--kraft-clair);
}

.offre-tete {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--encre);
}
.offre-tete h3 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.offre .prix {
  margin: 0;
  font-family: var(--serif-italique);
  font-size: 1.6rem;
  line-height: 1;
}
.offre .prix .rouge { font-weight: 500; }
.offre-detail {
  margin: 0; padding: 0; list-style: none;
  font-size: 0.98rem;
  text-align: center;
}
.offre-detail li {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--kraft-fonce);
}
.offre-detail li:last-child { border-bottom: none; }

.note-prix {
  margin: 2rem auto 0;
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  max-width: 720px;
}
.note-prix::before,
.note-prix::after {
  content: "❦";
  color: var(--rouge);
  margin: 0 0.6em;
  font-style: normal;
  font-size: 0.9em;
}

/* ---------- Spots · section ardoise / craie ---------- */
.spots {
  background: var(--papier-fond);
}
.spots .section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.tableau-noir {
  background: var(--ardoise);
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.05), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(87deg,
      rgba(255,255,255,0.025) 0 1px,
      transparent 1px 7px);
  color: var(--craie);
  padding: 2.4rem 2rem 2.6rem;
  border: 14px solid var(--kraft-tres-fonce);
  border-image: linear-gradient(135deg, #5a4626, #3a2c14, #5a4626) 1;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.35),
    inset 0 0 80px rgba(0,0,0,0.5);
  margin-top: 2rem;
}
.tableau-noir h3 {
  font-family: var(--craie-script);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.4rem;
  text-align: center;
  color: var(--craie);
  letter-spacing: 0.02em;
}
.tableau-noir .ardoise-soustitre {
  font-family: var(--craie-script);
  text-align: center;
  color: var(--craie);
  opacity: 0.85;
  margin: 0 0 1.6rem;
  font-size: 1.15rem;
}
.tableau-noir .ardoise-soustitre::before,
.tableau-noir .ardoise-soustitre::after {
  content: "·"; margin: 0 0.6em; opacity: 0.6;
}

.liste-spots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 2rem;
  font-family: var(--craie-script);
  font-size: 1.4rem;
  color: var(--craie);
}
.liste-spots li {
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(240,232,214,0.25);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.spots .puce {
  color: #d8b878;
  font-size: 0.9rem;
}

.bloc-meteo {
  background: var(--papier);
  color: var(--encre);
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--encre);
  outline: 1px solid var(--encre);
  outline-offset: 4px;
  margin-top: 3rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.bloc-meteo h3 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 400;
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  color: var(--rouge);
  text-align: center;
}
.bloc-meteo p { margin: 0; }

.appel-insta {
  text-align: center;
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1.15rem;
  margin: 2rem 0 0;
}
.lien-insta {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-style: normal;
  font-size: 1rem;
  color: var(--rouge);
  text-decoration: none;
  border-bottom: 1px solid var(--rouge);
  padding-bottom: 2px;
  margin-left: 0.4rem;
}
.lien-insta:hover { color: var(--rouge-sombre); border-color: var(--rouge-sombre); }

/* ---------- Contact / privatisation ---------- */
.grille-contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.4rem;
  align-items: start;
}
.bloc-formule {
  background: var(--papier);
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--encre);
  outline: 1px solid var(--encre);
  outline-offset: 4px;
}
.bloc-formule h3 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--kraft-fonce);
}
.bloc-formule ul { margin: 0; padding-left: 1.1rem; }
.bloc-formule li { margin-bottom: 0.5rem; }

.formulaire-contact {
  background: var(--papier);
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--encre);
  outline: 1px solid var(--encre);
  outline-offset: 4px;
}
.champ {
  margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.champ label {
  font-family: var(--serif-italique);
  font-style: italic;
  font-size: 1rem;
  color: var(--encre-douce);
}
.champ input,
.champ textarea {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--encre);
  background: #fbf3df;
  color: var(--encre);
  resize: vertical;
}
.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--rouge);
  outline-offset: 1px;
  border-color: var(--rouge);
}
.champ-rgpd {
  margin: 0.8rem 0 1rem;
  font-size: 0.95rem;
  font-family: var(--serif-italique);
  font-style: italic;
}
.champ-rgpd label {
  display: flex; gap: 0.55rem; align-items: flex-start;
}
.champ-rgpd input { margin-top: 0.3rem; }
.actions { margin: 0; }
.note-formulaire {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--encre-douce);
  font-family: var(--serif-italique);
  font-style: italic;
}

/* Honeypot : invisible à l'écran et au flux clavier, repérable par les bots. */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pied de page ---------- */
.pied-page {
  background: var(--encre);
  color: var(--papier);
  padding: 3.2rem 1.6rem 2rem;
  border-top: 4px double var(--kraft-fonce);
}
.pied-inner {
  max-width: var(--max-largeur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
  text-align: left;
}
.pied-wordmark {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  color: var(--papier);
}
.pied-tagline {
  font-family: var(--serif-italique);
  font-style: italic;
  margin: 0;
  color: var(--kraft-clair);
  font-size: 0.95rem;
}
.pied-nav {
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 1rem;
}
.pied-nav a {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid var(--kraft-fonce);
  padding-bottom: 2px;
  display: inline-block;
  width: fit-content;
}
.pied-nav a:hover {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}
.pied-rendu {
  margin: 0;
  font-family: var(--serif-italique);
  font-style: italic;
  color: var(--kraft-clair);
  font-size: 0.95rem;
}
.pied-rendu a { color: var(--papier); }

/* ---------- Pages texte (mentions / RGPD) ---------- */
.page-texte {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.6rem;
}
.page-texte h1 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.6rem;
  text-align: center;
  border-top: 4px double var(--encre);
  border-bottom: 4px double var(--encre);
  padding: 0.8rem 0;
}
.page-texte > p:first-of-type {
  text-align: center;
  font-family: var(--serif-italique);
  font-style: italic;
  color: var(--encre-douce);
  margin-bottom: 2.4rem;
}
.page-texte h2 {
  font-family: var(--serif-titre);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 1.2rem;
  margin: 2.4rem 0 0.6rem;
  color: var(--rouge);
  text-align: center;
}
.page-texte h3 {
  font-family: var(--serif-italique);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.4rem 0 0.4rem;
  color: var(--encre);
}
.page-texte p, .page-texte li { font-size: 1rem; }
.page-texte a { color: var(--rouge); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-aside { order: -1; }
  .trois-promesses { grid-template-columns: 1fr; }
  .promesse { border-right: none; border-bottom: 1px solid var(--kraft-fonce); }
  .promesse:last-child { border-bottom: none; }
  .grille-offres { grid-template-columns: 1fr 1fr; }
  .offre:nth-child(3n) { border-right: 1px solid var(--encre); }
  .offre:nth-child(2n) { border-right: none; }
  .offre:nth-last-child(-n+3) { border-bottom: 1px solid var(--encre); }
  .offre:nth-last-child(-n+2) { border-bottom: none; }
  .grille-contact { grid-template-columns: 1fr; }
  .pied-inner { grid-template-columns: 1fr 1fr; }
  .liste-spots { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grille-offres { grid-template-columns: 1fr; }
  .offre { border-right: none !important; border-bottom: 1px solid var(--encre) !important; }
  .offre:last-child { border-bottom: none !important; }
  .pied-inner { grid-template-columns: 1fr; text-align: left; }
  .wordmark-line-1 { letter-spacing: 0.4em; text-indent: 0.4em; }
  .wordmark-line-2 { letter-spacing: 0.12em; text-indent: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}