/* =========================================================
   RÉCITS ÉLARGIS — feuille de style commune à toutes les pages
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Karla:wght@400;500;700&display=swap');

:root{
  /* Couleurs — palette validée (voir la page de direction visuelle) */
  --ground:      #F6EFE1; /* fond général, ivoire chaud */
  --paper:       #FDFAF3; /* fond des blocs / cartes, blanc cassé */
  --ink:         #40331F; /* texte principal, brun profond */
  --ink-soft:    #6B5B41; /* texte secondaire */
  --brand:       #8A6C41; /* titres, logo, brun doré */
  --sage:        #79835E; /* vert secondaire */
  --terracotta:  #BC6F45; /* accent chaud, boutons principaux */
  --gold:        #B78A46; /* accents fins, survol */
  --line:        #E3D6BC; /* bordures discrètes */

  --max-width: 1080px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Karla', ui-sans-serif, system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
}

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

a{ color:var(--terracotta); }

h1, h2, h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  margin:0 0 0.6em;
}

p{ margin:0 0 1em; }

.justifie{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.eyebrow{
  font-family:'Karla', sans-serif;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:700;
  margin:0 0 0.6em;
}

/* --- Conteneur --- */
.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.5rem;
}

/* --- En-tête / navigation --- */
.site-header{
  border-bottom:1px solid var(--line);
  padding:1.8rem 0 1.2rem;
}
.site-header .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.9rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:1.1rem;
  text-decoration:none;
}
.brand img{
  width:132px;
  height:132px;
  object-fit:contain;
}
.brand span{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:2.1rem;
  color:var(--brand);
}
nav.main-nav ul{
  list-style:none;
  display:flex;
  gap:1.8rem;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
nav.main-nav a{
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
  font-size:0.95rem;
  padding-bottom:0.2rem;
  border-bottom:2px solid transparent;
}
nav.main-nav a:hover{
  color:var(--terracotta);
}
nav.main-nav a.active{
  color:var(--brand);
  border-bottom-color:var(--gold);
}

/* --- Séparateur boussole --- */
.divider{
  display:flex;
  justify-content:center;
  margin:3.5rem 0;
}
.divider img{
  width:32px;
  height:32px;
  opacity:0.85;
}

/* --- Sections génériques --- */
section{
  padding:3.5rem 0;
}
section p.lede{
  color:var(--ink-soft);
  font-size:1.02rem;
}
section h2{
  margin-top:2.6rem;
}

/* --- Héros (haut de page) --- */
.hero{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:2.5rem;
  align-items:center;
  padding:3.5rem 0;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
}
.hero-content h1{
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  color:var(--brand);
  text-wrap:balance;
}
.hero-content .subhead{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:1.15rem;
  color:var(--ink-soft);
  margin-bottom:1.3rem;
}
.cta-row{
  display:flex;
  gap:0.9rem;
  flex-wrap:wrap;
  margin-top:0.6rem;
}

/* --- Boutons --- */
.btn{
  font-family:'Karla', sans-serif;
  font-weight:700;
  font-size:0.92rem;
  padding:0.85rem 1.6rem;
  border-radius:2px;
  text-decoration:none;
  display:inline-block;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background:var(--terracotta);
  color:var(--paper);
}
.btn-primary:hover{
  background:#a85f3b;
}
.btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink-soft);
}
.btn-secondary:hover{
  border-color:var(--ink);
}

/* --- Cartes (ex. "quelques cartes" sur l'accueil) --- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1.2rem;
}
.carte{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1.6rem 1.4rem;
}
.carte .nom{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--brand);
  margin-bottom:0.5rem;
}
.carte .texte{
  font-size:0.95rem;
  color:var(--ink-soft);
  font-style:italic;
  margin:0;
}

/* --- Galerie d'images (ex. exemple de carte sur "Le jeu") --- */
.galerie-cartes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  margin:2.2rem auto 0;
  max-width:640px;
}
.galerie-cartes figure{
  margin:0;
}
.galerie-cartes img{
  width:100%;
  border:1px solid var(--line);
  border-radius:2px;
}
.galerie-cartes figcaption{
  margin-top:0.55rem;
  font-size:0.82rem;
  color:var(--ink-soft);
  text-align:center;
}

/* --- Citation en exergue --- */
.citation{
  max-width:60ch;
  margin:0 auto;
  text-align:center;
  padding:1rem 0;
}
.citation p.texte{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-size:1.3rem;
  line-height:1.5;
  color:var(--brand);
  margin-bottom:0.8rem;
}
.citation p.eyebrow{
  text-align:center;
}
.citation cite{
  font-style:normal;
  font-size:0.85rem;
  color:var(--ink-soft);
}

/* --- Encart (ex. formation UTHyL) --- */
.encart{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:2px;
  padding:1.8rem 2rem;
}
.encart h3{ font-size:1.1rem; margin-bottom:0.5rem; }

/* --- Formulaire (page Contact) --- */
form{
  max-width:520px;
}
.champ{
  margin-bottom:1.3rem;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.champ label{
  font-size:0.88rem;
  font-weight:700;
  color:var(--ink);
}
.champ input,
.champ textarea{
  font-family:'Karla', sans-serif;
  font-size:1rem;
  padding:0.75rem 0.9rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
}
.champ input:focus,
.champ textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.champ textarea{
  min-height:150px;
  resize:vertical;
}

/* --- Bloc prix (page Acheter) --- */
.prix-bloc{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:2.2rem;
  max-width:480px;
}
.prix-bloc .montant{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:2.2rem;
  color:var(--brand);
}
.prix-bloc .detail{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-top:0.3rem;
}
.prix-bloc .port{
  border-top:1px solid var(--line);
  margin-top:1.3rem;
  padding-top:1.1rem;
  font-size:0.95rem;
  color:var(--ink-soft);
}

/* --- Pied de page --- */
footer{
  border-top:1px solid var(--line);
  padding:2.2rem 0;
  color:var(--ink-soft);
  font-size:0.85rem;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.8rem;
}

/* --- Responsive --- */
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; }
  nav.main-nav ul{ gap:1.1rem 1.4rem; }
  section{ padding:2.6rem 0; }
  .galerie-cartes{ grid-template-columns:repeat(3, 1fr); gap:0.7rem; max-width:100%; }
  .galerie-cartes figcaption{ font-size:0.72rem; }
}