:root {
  --bordeaux: #8B2E28;
  --bordeaux-clair: #A8453E;
  --peche: #EDB87A;
  --foret: #2E5E2E;
  --sepia: #2E1F0F;
  --sable: #F0E0C8;
  --creme: #FAF6EE;
  --gris: #7A7060;

  --titre: "Playfair Display", Georgia, serif;
  --corps: "Lora", Georgia, serif;
  --label: "Raleway", system-ui, sans-serif;

  --max: 1120px;
  --gouttiere: 24px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--sepia);
  font-family: var(--corps);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* ---------- typographie ---------- */

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 0.5em;
  color: var(--bordeaux);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.22rem; color: var(--sepia); }

p { margin: 0 0 1.1em; }

.label {
  font-family: var(--label);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1rem;
}

.chapeau { font-size: 1.16rem; color: #4A3A26; }

.legende {
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--gris);
  text-align: center;
  margin-top: 0.9rem;
}

/* ---------- en-tête ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 246, 238, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(139, 46, 40, 0.14);
}

.barre {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gouttiere);
  display: flex;
  align-items: center;
  gap: 20px;
}

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { width: 52px; }
.marque .nom {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--bordeaux);
  line-height: 1;
}
.marque .baseline {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gris);
  display: block;
  margin-top: 3px;
}

nav.site { margin-left: auto; display: flex; align-items: center; gap: 26px; }
nav.site a {
  font-family: var(--label);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sepia);
  text-decoration: none;
}
nav.site a:hover { color: var(--bordeaux); }
nav.site .lien-nav { display: none; }

/* ---------- boutons ---------- */

.bouton {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid var(--bordeaux);
  transition: background-color .18s ease, color .18s ease;
}
.bouton.plein { background: var(--bordeaux); color: var(--creme); }
.bouton.plein:hover { background: #71241F; border-color: #71241F; }
.bouton.vide { background: transparent; color: var(--bordeaux); }
.bouton.vide:hover { background: var(--bordeaux); color: var(--creme); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; }

/* ---------- sections ---------- */

section { padding: clamp(56px, 8vw, 104px) 0; }
section.sable { background: var(--sable); }
section.creme-fonce { background: #F5EFE3; }

.filet {
  width: 64px;
  height: 2px;
  background: var(--bordeaux);
  margin: 0 0 1.6rem;
  border: 0;
}
.filet.centre { margin-left: auto; margin-right: auto; }

.centre { text-align: center; }
.centre .filet { margin-left: auto; margin-right: auto; }
.mesure { max-width: 60ch; }
.mesure.centre { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */

.hero { padding-top: clamp(44px, 6vw, 76px); }
.hero .grille {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.hero h1 { margin-bottom: 0.38em; }
.hero .chapeau { font-size: 1.24rem; max-width: 34ch; }

.badges {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badges li {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  border: 1px solid rgba(139, 46, 40, 0.34);
  border-radius: 100px;
  padding: 7px 15px;
  background: rgba(255, 255, 255, 0.45);
}

.visuel-hero { position: relative; }
.visuel-hero img { margin: 0 auto; filter: drop-shadow(0 18px 34px rgba(46, 31, 15, 0.19)); }

/* ---------- cartes ---------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 2.6rem;
}
.carte {
  background: var(--creme);
  border: 1px solid rgba(139, 46, 40, 0.16);
  border-top: 3px solid var(--bordeaux);
  padding: 26px 24px 22px;
}
section.sable .carte { background: #FBF6EC; }
.carte h3 { margin-bottom: 0.45em; }
.carte p { margin: 0; font-size: 0.97rem; color: #4A3A26; }
.carte .puce {
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--peche);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* ---------- deux colonnes ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.duo.etroit { grid-template-columns: 0.85fr 1.15fr; }
.duo img { border-radius: 2px; }

/* ---------- étapes ---------- */

.etapes { counter-reset: etape; margin-top: 2.6rem; display: grid; gap: 0; }
.etape {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid rgba(139, 46, 40, 0.18);
  align-items: start;
}
.etape:last-child { border-bottom: 1px solid rgba(139, 46, 40, 0.18); }
.etape::before {
  content: counter(etape);
  font-family: var(--titre);
  font-size: 2.6rem;
  line-height: 0.9;
  color: var(--peche);
}
.etape h3 { margin-bottom: 0.3em; }
.etape p { margin: 0; color: #4A3A26; }

/* ---------- portrait ---------- */

.portrait {
  width: 300px;
  border: 8px solid var(--creme);
  box-shadow: 0 14px 30px rgba(46, 31, 15, 0.2);
}
section.sable .portrait { border-color: var(--sable); }

.signature-nom {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--bordeaux);
  margin-top: 1.4rem;
}

/* ---------- zone ---------- */

.zones {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.zones li {
  border-left: 3px solid var(--foret);
  padding: 4px 0 4px 18px;
}
.zones strong { display: block; font-family: var(--titre); font-size: 1.12rem; color: var(--bordeaux); }
.zones span { font-size: 0.95rem; color: #4A3A26; }

/* ---------- contact ---------- */

.contact-bloc { text-align: center; }
.coordonnees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: 2rem;
  font-family: var(--label);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.coordonnees a { text-decoration: none; font-weight: 600; }
.coordonnees a:hover { text-decoration: underline; }

/* ---------- pied ---------- */

footer.site {
  background: var(--sepia);
  color: #D8CDBC;
  padding: 44px 0 38px;
  font-size: 0.88rem;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: center; }
footer.site a { color: var(--peche); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .marque-pied {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.32rem;
  color: var(--peche);
}
footer.site .droite { margin-left: auto; color: var(--gris); }

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .hero .grille, .duo, .duo.etroit { grid-template-columns: 1fr; }
  .visuel-hero { order: -1; }
  .visuel-hero img { max-width: 340px; }
  .duo .portrait { margin: 0 auto; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .barre { gap: 12px; padding: 10px var(--gouttiere); }
  .marque img { width: 42px; }
  .marque .nom { font-size: 1.35rem; }
  .marque .baseline { display: none; }
  nav.site { gap: 14px; }
  nav.site .lien-nav { display: none; }
  .etape { grid-template-columns: 52px 1fr; gap: 14px; }
  .etape::before { font-size: 2rem; }
  .actions .bouton { width: 100%; text-align: center; }
  .portrait { width: 100%; max-width: 280px; }
  footer.site .droite { margin-left: 0; }
}

@media (min-width: 621px) {
  nav.site .lien-nav { display: inline; }
}

/* ---------- logo mis en avant ---------- */

.marque img { width: 64px; }

.bandeau-marque {
  background: var(--sepia);
  padding: 34px 0 30px;
  text-align: center;
}
.bandeau-marque img {
  width: 132px;
  margin: 0 auto 14px;
}
.bandeau-marque .devise {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  color: var(--peche);
  margin: 0;
}
.bandeau-marque .sous-devise {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9C8F7C;
  margin: 10px 0 0;
}

footer.site .logo-pied { width: 46px; }

/* ---------- figures ---------- */

figure { margin: 0; }
figure img { border-radius: 2px; }
figure figcaption {
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--gris);
  margin-top: 0.8rem;
  line-height: 1.5;
}

.figure-large {
  background: #FFFDF8;
  border: 1px solid rgba(139, 46, 40, 0.18);
  padding: clamp(16px, 3vw, 38px);
  margin: 2.8rem 0 1rem;
}
.figure-large img { margin: 0 auto; width: 100%; max-width: 960px; }
.figure-large figcaption { text-align: center; margin-top: 1.2rem; }

.photo-paris { width: 100%; max-width: 340px; }

/* ---------- page méthode ---------- */

.page-titre {
  background: var(--sable);
  padding: clamp(48px, 7vw, 82px) 0 clamp(36px, 5vw, 58px);
}
.page-titre .fil {
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1rem;
}
.page-titre .fil a { color: var(--gris); text-decoration: none; }
.page-titre .fil a:hover { color: var(--bordeaux); }
.page-titre h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 0.35em; }
.page-titre p { max-width: 62ch; margin: 0; font-size: 1.1rem; }

.grille-marqueurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 26px 34px;
  margin-top: 2.8rem;
}
.marqueur { border-top: 2px solid var(--peche); padding-top: 14px; }
.marqueur h3 { font-size: 1.08rem; color: var(--bordeaux); margin-bottom: 0.35em; }
.marqueur p { margin: 0; font-size: 0.96rem; color: #4A3A26; }
.marqueur .outil {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foret);
  border: 1px solid rgba(46, 94, 46, 0.4);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 0.7rem;
}

.rappel {
  border-left: 3px solid var(--bordeaux);
  padding: 4px 0 4px 22px;
  margin: 2.6rem 0 0;
  font-style: italic;
  color: #4A3A26;
  max-width: 62ch;
}

@media (max-width: 620px) {
  .marque img { width: 48px; }
  .bandeau-marque img { width: 104px; }
  .photo-paris { max-width: 100%; }
}

/* ---------- correctif largeurs minimales ---------- */

/* Dans une grille, un élément remplacé impose sa taille comme minimum.
   min-width:0 rend les colonnes réellement compressibles sous 360px. */
.hero .grille > *,
.duo > *,
.cartes > *,
.grille-marqueurs > * { min-width: 0; }

@media (max-width: 880px) {
  .visuel-hero img { width: 100%; max-width: 340px; }
}

@media (max-width: 400px) {
  :root { --gouttiere: 16px; }
  .bouton { padding: 12px 18px; font-size: 0.78rem; letter-spacing: 0.06em; }
  .barre { gap: 8px; }
  .marque { gap: 8px; }
  .marque .nom { font-size: 1.2rem; }
  .coordonnees { gap: 10px 20px; font-size: 0.95rem; }
  footer.site .wrap { gap: 10px 18px; }
}

.portrait { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ==========================================================
   Correctifs de l'audit du 22 septembre 2026
   ========================================================== */

/* --- Contrastes : valeurs calculées pour atteindre WCAG AA --- */

:root {
  --gris-texte: #6C6355;  /* 4,56 sur sable, 5,48 sur crème */
  --puce-texte: #9C7950;  /* 3,70 sur les cartes */
  --gris-pied:  #90887B;  /* 4,54 sur sépia */
}

.label,
.legende,
figure figcaption,
.marque .baseline,
.page-titre .fil,
.page-titre .fil a,
.marqueur .outil,
.zones span,
.carte p,
.etape p,
.chapeau { color: var(--gris-texte); }

.chapeau, .carte p, .etape p, .zones span { color: #453623; }

.carte .puce { color: var(--puce-texte); }

footer.site { color: #CFC4B2; }
footer.site .droite { color: var(--gris-pied); }

/* --- Cibles tactiles : 44px minimum --- */

.coordonnees {
  gap: 8px 28px;
  align-items: center;
}
.coordonnees a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

footer.site a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

nav.site .lien-nav {
  display: none;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 621px) {
  nav.site .lien-nav { display: inline-flex; }
}

/* --- Hero : sur mobile, la promesse avant l'image --- */

@media (max-width: 880px) {
  .hero .grille { gap: 28px; }
  .visuel-hero { order: 0; }          /* annule l'inversion précédente */
  .hero .texte-hero { order: -1; }    /* le titre passe en premier */
  .visuel-hero img { max-width: 280px; }
  .hero .actions { margin-top: 1.4rem; }
}

/* --- Page spécimen --- */

.specimen { margin-top: 2.8rem; }
.specimen img {
  width: 100%;
  box-shadow: 0 16px 34px rgba(46, 31, 15, 0.22);
}
.specimen figcaption { text-align: center; }

/* --- Questions fréquentes --- */

.questions { margin-top: 2.6rem; display: grid; gap: 0; }
.question {
  border-top: 1px solid rgba(139, 46, 40, 0.18);
  padding: 22px 0;
}
.question:last-child { border-bottom: 1px solid rgba(139, 46, 40, 0.18); }
.question h3 { color: var(--bordeaux); margin-bottom: 0.4em; font-size: 1.12rem; }
.question p { margin: 0; color: #453623; max-width: 68ch; }