/* =========================================================
   Secrets d’Éditrice — feuille de style unique
   Charte reprise des visuels Instagram (crème / encre / bordeaux).
   Aucun appel à un domaine tiers.
   ========================================================= */

/* ---------- Polices (locales, sous-ensemble latin, woff2) ---------- */

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2212, U+FEFF, U+FFFD;
}

/* ---------- Palette ---------- */

:root {
  /* Crème — fond principal du site */
  --creme-bg:      #F5EFE3;
  --creme-text:    #2E2A26;
  --creme-accent:  #72282C;  /* bordeaux */
  --creme-muted:   #8A8378;

  /* Encre — sections en contraste, pied de page */
  --encre-bg:      #2B2930;
  --encre-text:    #F3ECDE;
  --encre-accent:  #C4A26C;  /* doré */
  --encre-muted:   #9C968E;

  /* Bordeaux — réserve d’accent */
  --bordeaux-bg:   #602226;
  --bordeaux-text: #F3ECDE;
  --bordeaux-rule: #C4A26C;

  /* Tons dérivés : --creme-muted (2,97:1) est réservé aux filets et aux
     bordures. Pour du texte secondaire sur crème, on utilise une version
     assombrie qui passe le contraste AA (4,89:1). */
  --creme-muted-text: #6E675B;
  --creme-hairline:   #DED4C2;
  --encre-hairline:   #413E48;

  /* Rôles actifs : redéfinis par .encre */
  --bg:       var(--creme-bg);
  --text:     var(--creme-text);
  --accent:   var(--creme-accent);
  --soft:     var(--creme-muted-text);
  --hairline: var(--creme-hairline);

  --measure: 28.4em; /* largeur de la colonne de texte — ~75 signes */
  --wrap:    54rem;
}

.encre {
  --bg:       var(--encre-bg);
  --text:     var(--encre-text);
  --accent:   var(--encre-accent);
  --soft:     var(--encre-muted);
  --hairline: var(--encre-hairline);
  background-color: var(--bg);
  color: var(--text);
}

/* ---------- Base ---------- */

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

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

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

body {
  margin: 0;
  background-color: var(--creme-bg);
  /* Grain papier : bruit SVG inline, très subtil, aucun bitmap chargé. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  color: var(--creme-text);
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  font-weight: 530;
  font-size: clamp(1.1875rem, 0.4vw + 1.08rem, 1.3125rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--creme-accent); color: var(--creme-bg); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Titres ---------- */

h1, h2, h3 {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 0.8em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 3vw + 0.6rem, 2.38rem); }
h2 { font-size: clamp(1.32rem, 1.5vw + 0.82rem, 1.72rem); margin-top: 0; }
h3 { font-size: clamp(1.12rem, 0.7vw + 0.95rem, 1.3rem); font-weight: 620; }

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

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

/* ---------- Chapeau en petites capitales espacées ---------- */

.chapeau {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
  line-height: 1.4;
}

/* ---------- Filet de 140 px : signature visuelle ---------- */

.filet {
  width: 140px;
  height: 2px;
  border: 0;
  margin: 3.25rem auto;
  background: var(--accent);
}

.filet--serre { margin: 2.25rem auto; }

/* ---------- Gabarit ---------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.prose { max-width: var(--measure); }
.prose--centre { margin-inline: auto; }

/* Césure automatique dans les deux modes. Elle s’appuie sur lang="fr",
   présent sur <html>. Au fer à gauche elle régularise le drapeau d’une
   colonne étroite ; en justifié elle évite les lézardes.
   Pas de coupure sous six lettres, ni de fragment de moins de trois. */
.prose p,
.definitions dd {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;   /* pas de mot seul en dernière ligne */
}

/* Justification à partir de 38em seulement : en deçà, la colonne tombe sous
   une cinquantaine de signes et le justifié écarte visiblement les mots.
   Pour justifier aussi sur téléphone, supprimer la ligne @media et son
   accolade fermante. */
@media (min-width: 38em) {
  .prose p,
  .definitions dd { text-align: justify; }
}

.section { padding: clamp(2.75rem, 5.5vw, 4rem) 0; }
.section--mince { padding: clamp(2rem, 3.5vw, 2.75rem) 0; }

/* Filet posé seul entre deux sections : l’espace vient des sections. */
.separateur .filet { margin-block: 0; }

.centre { text-align: center; }

.lien-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--creme-accent);
  color: var(--creme-bg);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.lien-saut:focus { left: 0; }

/* ---------- En-tête et navigation ---------- */

.entete {
  border-bottom: 1px solid var(--creme-hairline);
  padding: 1.35rem 0;
}

.entete__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.75rem;
}

.marque {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 640;
  font-size: 1.32rem;
  letter-spacing: 0.005em;
  color: var(--creme-text);
  text-decoration: none;
}
.marque:hover { color: var(--creme-accent); }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--creme-text);
  font-size: 0.9rem;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--creme-accent); }
.nav a[aria-current="page"] {
  color: var(--creme-accent);
  border-bottom-color: var(--creme-accent);
}

/* ---------- Accueil : entrée en matière ---------- */

.accroche {
  font-size: 1.06em;
  color: var(--creme-text);
  max-width: 30em;
  margin-inline: auto;
}

/* ---------- Liens de prose ---------- */

.prose a, .accroche a, .colonne a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}
.prose a:hover, .accroche a:hover, .colonne a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Trois blocs de l’accueil ---------- */

.colonnes {
  display: grid;
  gap: 0;
}

.colonne { text-align: center; }
.colonne h2 a {
  color: var(--creme-accent);
  text-decoration: none;
}
.colonne h2 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}
.colonne h2 { font-size: clamp(1.12rem, 0.6vw + 1rem, 1.24rem); }

/* Texte de renvoi, plus discret que le corps de la page : ces colonnes
   servent à orienter, pas à être lues longuement. */
.colonne p {
  color: var(--creme-text);
  font-size: 0.87em;
  line-height: 1.52;
}

@media (min-width: 46em) {
  .colonnes {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .colonne .filet { margin-top: 0; }
}

/* ---------- Sections à deux colonnes ---------- */
/* Sur grand écran, le chapeau et le titre passent dans la marge de gauche.
   La page raccourcit d’autant, les titres deviennent des repères pour l’œil
   qui parcourt, et le texte cesse d’être une colonne unique au milieu.
   En dessous de 64em, tout se réempile : le mobile prime. */

.duo__corps > *:first-child { margin-top: 0; }

@media (min-width: 64em) {
  .prose--duo {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--measure));
    column-gap: 3rem;
    max-width: none;
    justify-content: center;
  }
  .duo__titre { align-self: start; }
  .duo__titre h2 {
    font-size: clamp(1.28rem, 0.9vw + 1.05rem, 1.5rem);
    margin-bottom: 0;
  }
  .duo__titre .chapeau { margin-bottom: 0.5rem; }
}

/* ---------- Listes sobres ---------- */

.liste-sobre {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: var(--measure);
}

.liste-sobre li {
  padding: 0.78rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.9em;
  line-height: 1.5;
}
.liste-sobre li:last-child { border-bottom: 1px solid var(--hairline); }

/* ---------- Étapes numérotées (page Méthode) ---------- */

.etapes-bloc { max-width: var(--measure); margin-inline: auto; }

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
}

.etapes > li {
  counter-increment: etape;
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline);
}
.etapes > li:last-child { border-bottom: 1px solid var(--hairline); }

/* Le numéro tient le rôle du chapeau des autres pages. */
.etapes .duo__titre::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 640;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.etapes h2 { font-size: clamp(1.15rem, 0.9vw + 0.98rem, 1.32rem); margin-bottom: 0.4em; }

@media (min-width: 64em) {
  .etapes-bloc { max-width: none; }
  .etapes > li {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--measure));
    column-gap: 3rem;
    justify-content: center;
    align-items: start;
  }
  .etapes h2 { margin-bottom: 0; }
}

/* ---------- Blocs à compléter par la cliente ---------- */
/* Repérables volontairement : à supprimer une fois renseignés. */

.a-fournir {
  border: 1px dashed var(--accent);
  padding: 1rem 1.2rem 1.1rem;
  margin: 1.75rem 0;
  max-width: var(--measure);
  font-size: 0.94em;
  color: var(--text);
}
.a-fournir .chapeau { margin-bottom: 0.55rem; }
.a-fournir p { margin-bottom: 0.7em; }
.a-fournir p:last-child { margin-bottom: 0; }

/* ---------- Bloc de contact ---------- */

.contact { text-align: center; }
.contact h2 { margin-bottom: 0.5em; }
.contact p { color: var(--text); }

.contact__adresse {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 620;
  font-size: clamp(1.05rem, 1.3vw + 0.78rem, 1.3rem);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  word-break: break-word;
}
.contact__adresse:hover { text-decoration-thickness: 2px; }

/* ---------- Pied de page ---------- */

.pied {
  border-top: 1px solid var(--encre-hairline);
  padding: 2.25rem 0 2.75rem;
  font-size: 0.88rem;
  color: var(--encre-muted);
}

.pied__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

.pied a { color: var(--encre-text); text-decoration: none; border-bottom: 1px solid var(--encre-hairline); }
.pied a:hover { border-bottom-color: var(--encre-accent); color: var(--encre-accent); }

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied__marque {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 620;
  color: var(--encre-text);
  font-size: 0.95rem;
}

/* ---------- Définitions (mentions légales) ---------- */

.definitions { margin: 0 0 1.5em; max-width: var(--measure); }
.definitions dt {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 620;
  font-size: 0.98rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
}
.definitions dd { margin: 0.2rem 0 0.9rem; font-size: 0.93em; }

/* ---------- Impression ---------- */

@media print {
  .entete, .contact, .nav, .lien-saut { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}