:root {
  --cp: #1b4752;
  --ca: #c8933f;
  --cf: #f4f1eb;
  --cs: #ffffff;
  --cb: #dbd6cc;
  --ct: #1c1c1a;
  --csg: #68645e;
  --cpc: #e8f0f2;
  --cpa: rgba(200,147,63,0.12);

  --pt: Georgia, 'Times New Roman', serif;
  --pc: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2.5rem;
  --e5: 4rem;
  --e6: 7rem;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;

  --ombre: 0 2px 16px rgba(27,71,82,0.08);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--pc);
  background-color: var(--cf);
  color: var(--ct);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--pt);
  font-weight: normal;
  line-height: 1.25;
  color: var(--cp);
}

h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.65rem); }
h4 { font-size: 1rem; font-family: var(--pc); font-weight: 600; letter-spacing: 0.01em; }

p {
  max-width: 68ch;
  margin-bottom: var(--e3);
}

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

a {
  color: var(--cp);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover, a:focus { color: var(--ca); }

a:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

strong { font-weight: 600; }

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

/* ── GABARIT ───────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--e4);
}

.enveloppe--etroite {
  max-width: 860px;
}

main { flex: 1; }

/* ── EN-TÊTE ───────────────────────────────────────────── */

.site-entete {
  background-color: var(--cs);
  border-bottom: 2px solid var(--cp);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(27,71,82,0.06);
}

.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--e4);
  max-width: 1200px;
  margin: 0 auto;
}

.marque {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.marque img {
  width: 36px;
  height: 36px;
}

.marque-nom {
  font-family: var(--pt);
  font-size: 1.45rem;
  color: var(--cp);
  letter-spacing: -0.01em;
}

.nav-site {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  padding: 0;
}

.nav-site li { margin: 0; }

.nav-site a {
  text-decoration: none;
  color: var(--csg);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-xs);
  letter-spacing: 0.03em;
  transition: background-color 0.2s, color 0.2s;
}

.nav-site a:hover,
.nav-site a:focus {
  background-color: var(--cpc);
  color: var(--cp);
}

.nav-site a.actif {
  color: var(--cp);
  font-weight: 600;
}

/* ── BANDE PRINCIPALE (homepage intro) ─────────────────── */

.bande-principale {
  background-color: var(--cp);
  color: var(--cs);
  padding: var(--e6) var(--e4);
  position: relative;
  overflow: hidden;
}

.bande-principale::before {
  content: '';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 80px solid rgba(200,147,63,0.1);
  pointer-events: none;
}

.bande-principale::after {
  content: '';
  position: absolute;
  right: 12%;
  top: 20%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,0.04);
  pointer-events: none;
}

.bande-principale .enveloppe { position: relative; z-index: 1; }

.bande-principale h1 {
  color: var(--cs);
  max-width: 680px;
  margin-bottom: var(--e3);
}

.sous-titre-intro {
  color: rgba(255,255,255,0.8);
  font-size: 1.15rem;
  max-width: 52ch;
  margin-bottom: var(--e4);
  line-height: 1.7;
}

.etiquette-service {
  display: inline-block;
  background-color: var(--ca);
  color: var(--cs);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  margin-bottom: var(--e3);
}

/* ── RUBRIQUE ──────────────────────────────────────────── */

.rubrique {
  padding: var(--e5) var(--e4);
}

.rubrique--blanche {
  background-color: var(--cs);
}

.rubrique--foncee {
  background-color: var(--cp);
  color: var(--cs);
}

.rubrique--foncee h2,
.rubrique--foncee h3 {
  color: var(--cs);
}

.rubrique--foncee p {
  color: rgba(255,255,255,0.82);
}

.rubrique--bord {
  border-top: 1px solid var(--cb);
}

.en-tete-rubrique {
  margin-bottom: var(--e4);
  max-width: 760px;
}

.en-tete-rubrique h2 {
  margin-bottom: var(--e2);
}

.en-tete-rubrique p {
  color: var(--csg);
  font-size: 1.05rem;
  max-width: none;
}

.en-tete-rubrique--centre {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ── DISPOSITION DEUX COLONNES ─────────────────────────── */

.disposition-deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5);
  align-items: center;
}

.disposition-deux--inverse .colonne-visuelle {
  order: -1;
}

.disposition-trois {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e3);
}

.colonne-visuelle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.colonne-visuelle img {
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-md);
}

/* ── CARTES ────────────────────────────────────────────── */

.carte {
  background-color: var(--cs);
  border: 1px solid var(--cb);
  border-radius: var(--r-md);
  padding: var(--e4);
  box-shadow: var(--ombre);
}

.carte--accent-gauche {
  border-left: 3px solid var(--ca);
}

.carte--accent-haut {
  border-top: 3px solid var(--ca);
}

.carte h3 {
  font-size: 1.15rem;
  margin-bottom: var(--e2);
}

.carte p {
  font-size: 0.93rem;
  color: var(--csg);
  max-width: none;
}

.numerotation {
  font-family: var(--pt);
  font-size: 2.5rem;
  color: var(--cpa);
  color: rgba(200,147,63,0.4);
  line-height: 1;
  margin-bottom: var(--e2);
  display: block;
}

/* ── LISTE DES FONCTIONNALITÉS ─────────────────────────── */

.liste-fonctions {
  list-style: none;
  padding: 0;
}

.liste-fonctions li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e2);
  align-items: start;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--cb);
  margin: 0;
}

.liste-fonctions li:last-child { border-bottom: none; }

.icone-fonction {
  width: 2rem;
  height: 2rem;
  background-color: var(--cp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.icone-fonction svg {
  width: 1rem;
  height: 1rem;
}

.corps-fonction strong {
  display: block;
  color: var(--cp);
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.corps-fonction p {
  font-size: 0.92rem;
  color: var(--csg);
  max-width: none;
  margin: 0;
}

/* ── ÉTAPES ────────────────────────────────────────────── */

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

.etape {
  counter-increment: num-etape;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--e3);
  align-items: start;
  margin-bottom: var(--e4);
  position: relative;
}

.etape:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.45rem;
  top: 3.2rem;
  bottom: calc(-1 * var(--e4) + 0.2rem);
  width: 2px;
  background: linear-gradient(to bottom, var(--cp), transparent);
}

.etape:last-child { margin-bottom: 0; }

.etape-num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--cp);
  color: var(--cs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pt);
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.etape-num::before { content: counter(num-etape); }

.etape-contenu h3 {
  font-size: 1.1rem;
  margin-bottom: var(--e1);
  padding-top: 0.5rem;
}

.etape-contenu p {
  font-size: 0.93rem;
  color: var(--csg);
  max-width: none;
  margin: 0;
}

/* ── ENCADRÉS ──────────────────────────────────────────── */

.encadre {
  background-color: var(--cpc);
  border-left: 4px solid var(--cp);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--e3) var(--e4);
  margin: var(--e4) 0;
}

.encadre h4 {
  color: var(--cp);
  margin-bottom: var(--e1);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.encadre p {
  font-size: 0.91rem;
  color: var(--csg);
  max-width: none;
  margin: 0;
}

/* ── GRILLE CARACTÉRISTIQUES ───────────────────────────── */

.grille-caracteristiques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}

.item-caracteristique {
  padding: var(--e3);
  border: 1px solid var(--cb);
  border-radius: var(--r-sm);
  background-color: var(--cs);
}

.item-caracteristique h4 {
  margin-bottom: var(--e1);
  font-size: 0.95rem;
  color: var(--cp);
}

.item-caracteristique p {
  font-size: 0.88rem;
  color: var(--csg);
  max-width: none;
  margin: 0;
}

/* ── TABLEAU ───────────────────────────────────────────── */

.tableau-synthese {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.tableau-synthese th {
  background-color: var(--cp);
  color: var(--cs);
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-family: var(--pc);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.tableau-synthese th:first-child { border-radius: var(--r-xs) 0 0 0; }
.tableau-synthese th:last-child { border-radius: 0 var(--r-xs) 0 0; }

.tableau-synthese td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--cb);
  vertical-align: top;
  color: var(--ct);
}

.tableau-synthese tr:last-child td { border-bottom: none; }

.tableau-synthese tr:nth-child(even) td {
  background-color: rgba(244,241,235,0.5);
}

/* ── FAQ ───────────────────────────────────────────────── */

.faq { list-style: none; padding: 0; }

.faq-item {
  border-bottom: 1px solid var(--cb);
  margin: 0;
}

.faq-item:first-child { border-top: 1px solid var(--cb); }

.faq-bouton {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--e3) 0;
  font-family: var(--pc);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--cp);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e2);
  transition: color 0.2s;
}

.faq-bouton:hover { color: var(--ca); }

.faq-bouton:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.faq-indicateur {
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1;
}

.faq-corps {
  padding-bottom: var(--e3);
}

.faq-corps p {
  font-size: 0.93rem;
  color: var(--csg);
  max-width: 72ch;
  margin-bottom: var(--e2);
}

.faq-corps p:last-child { margin-bottom: 0; }

/* ── ZONE CTA ──────────────────────────────────────────── */

.zone-cta {
  background-color: var(--cp);
  padding: var(--e5) var(--e4);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.zone-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: rgba(200,147,63,0.06);
  pointer-events: none;
}

.zone-cta .enveloppe { position: relative; z-index: 1; }

.zone-cta h2 {
  color: var(--cs);
  margin-bottom: var(--e2);
}

.zone-cta p {
  color: rgba(255,255,255,0.8);
  margin: 0 auto var(--e4);
  max-width: 50ch;
}

.groupe-boutons {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  align-items: center;
}

.groupe-boutons--centre { justify-content: center; }

/* ── BOUTONS ───────────────────────────────────────────── */

.bouton {
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem 1.8rem;
  border-radius: var(--r-xs);
  font-family: var(--pc);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1.4;
}

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

.bouton--principal {
  background-color: var(--ca);
  color: var(--cs);
  border-color: var(--ca);
}

.bouton--principal:hover,
.bouton--principal:focus {
  background-color: #b07830;
  border-color: #b07830;
  color: var(--cs);
}

.bouton--contour-clair {
  background-color: transparent;
  color: var(--cs);
  border-color: rgba(255,255,255,0.6);
}

.bouton--contour-clair:hover,
.bouton--contour-clair:focus {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--cs);
  color: var(--cs);
}

.bouton--contour-fonce {
  background-color: transparent;
  color: var(--cp);
  border-color: var(--cp);
}

.bouton--contour-fonce:hover,
.bouton--contour-fonce:focus {
  background-color: var(--cp);
  color: var(--cs);
}

/* ── FORMULAIRE ────────────────────────────────────────── */

.formulaire-contact {
  background-color: var(--cs);
  border-radius: var(--r-md);
  padding: var(--e4);
  border: 1px solid var(--cb);
  box-shadow: var(--ombre);
}

.champ {
  margin-bottom: var(--e3);
}

.champ label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--csg);
  margin-bottom: 0.4rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--pc);
  font-size: 0.97rem;
  color: var(--ct);
  background-color: var(--cs);
  border: 1.5px solid var(--cb);
  border-radius: var(--r-xs);
  padding: 0.65rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--cp);
  box-shadow: 0 0 0 3px rgba(27,71,82,0.12);
}

.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%231b4752' d='M7 10L1 4h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.champ textarea {
  resize: vertical;
  min-height: 120px;
}

.champ .note {
  font-size: 0.77rem;
  color: var(--csg);
  margin-top: 0.35rem;
  max-width: none;
}

.deux-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}

/* ── BLOC COORDONNÉES ──────────────────────────────────── */

.bloc-coordonnees {
  background-color: var(--cp);
  border-radius: var(--r-md);
  padding: var(--e4);
  color: var(--cs);
  height: 100%;
}

.bloc-coordonnees h3 {
  color: var(--cs);
  font-size: 1.35rem;
  margin-bottom: var(--e3);
}

.liste-coordonnees {
  list-style: none;
  padding: 0;
}

.liste-coordonnees li {
  padding: var(--e2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin: 0;
}

.liste-coordonnees li:last-child { border-bottom: none; }

.coord-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.25rem;
}

.coord-valeur {
  color: var(--cs);
  font-size: 0.93rem;
  line-height: 1.55;
}

.coord-valeur a {
  color: var(--cs);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.coord-valeur a:hover { color: var(--ca); }

/* ── TITRE DE PAGE ─────────────────────────────────────── */

.titre-page {
  background-color: var(--cp);
  padding: var(--e5) var(--e4) var(--e4);
  position: relative;
  overflow: hidden;
}

.titre-page::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 50px solid rgba(200,147,63,0.1);
  pointer-events: none;
}

.titre-page .enveloppe { position: relative; z-index: 1; }

.titre-page h1 {
  color: var(--cs);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  margin-bottom: var(--e2);
}

.titre-page .chapeau {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  max-width: 56ch;
  margin: 0;
}

.fil-navigation {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--e2);
}

.fil-navigation a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}

.fil-navigation a:hover { color: var(--cs); }

.fil-navigation span { color: rgba(255,255,255,0.35); }

/* ── PAGES LÉGALES ─────────────────────────────────────── */

.contenu-page {
  padding: var(--e5) var(--e4);
}

.section-juridique {
  margin-bottom: var(--e5);
}

.section-juridique h2 {
  font-size: 1.45rem;
  margin-bottom: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--cb);
}

.section-juridique h3 {
  font-size: 1.05rem;
  font-family: var(--pc);
  font-weight: 600;
  color: var(--cp);
  margin-top: var(--e3);
  margin-bottom: var(--e2);
}

.section-juridique h3:first-child { margin-top: 0; }

.section-juridique p {
  max-width: 80ch;
  margin-bottom: var(--e2);
  font-size: 0.95rem;
}

.section-juridique ul {
  max-width: 72ch;
  margin-bottom: var(--e2);
  font-size: 0.95rem;
}

/* ── BANNIÈRE LIENS INTERNES ───────────────────────────── */

.barre-liens {
  background-color: var(--cs);
  border-top: 1px solid var(--cb);
  padding: var(--e4);
}

.barre-liens .enveloppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}

.barre-liens span {
  font-size: 0.85rem;
  color: var(--csg);
  margin-right: var(--e1);
}

.barre-liens a {
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--cb);
  border-radius: var(--r-xs);
  text-decoration: none;
  color: var(--cp);
  transition: background-color 0.2s, color 0.2s;
}

.barre-liens a:hover,
.barre-liens a:focus {
  background-color: var(--cp);
  color: var(--cs);
  border-color: var(--cp);
}

/* ── PIED DE PAGE ──────────────────────────────────────── */

.pied-page {
  background-color: #141412;
  color: rgba(255,255,255,0.65);
  padding: var(--e5) var(--e4) var(--e3);
}

.pied-contenu {
  max-width: 1200px;
  margin: 0 auto;
}

.pied-superieur {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pied-marque .marque-nom {
  color: var(--cs);
  display: block;
  margin-bottom: var(--e2);
}

.pied-marque img {
  width: 32px;
  height: 32px;
  margin-bottom: var(--e2);
}

.pied-description {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  max-width: 30ch;
}

.pied-colonne h4 {
  color: var(--cs);
  font-family: var(--pc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--e2);
}

.pied-liens {
  list-style: none;
  padding: 0;
}

.pied-liens li { margin-bottom: 0.45rem; }

.pied-liens a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.pied-liens a:hover,
.pied-liens a:focus { color: var(--ca); }

.pied-inferieur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e3);
  flex-wrap: wrap;
  gap: var(--e2);
}

.pied-copyright {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}

.pied-mentions {
  display: flex;
  gap: var(--e3);
}

.pied-mentions a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
}

.pied-mentions a:hover { color: var(--ca); }

/* ── RESPONSIVE 900px ──────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --e5: 3rem;
    --e6: 4.5rem;
  }

  .disposition-deux {
    grid-template-columns: 1fr;
    gap: var(--e4);
  }

  .disposition-deux--inverse .colonne-visuelle {
    order: 0;
  }

  .disposition-trois {
    grid-template-columns: 1fr 1fr;
  }

  .pied-superieur {
    grid-template-columns: 1fr 1fr;
  }

  .deux-champs {
    grid-template-columns: 1fr;
  }

  .grille-caracteristiques {
    grid-template-columns: 1fr;
  }

  .tableau-synthese {
    font-size: 0.87rem;
  }

  .tableau-synthese th,
  .tableau-synthese td {
    padding: 0.65rem 0.9rem;
  }
}

/* ── RESPONSIVE 600px ──────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --e4: 1.75rem;
    --e5: 2.5rem;
    --e6: 3.5rem;
  }

  .enveloppe {
    padding: 0 var(--e2);
  }

  .entete-interieur {
    padding: 0.75rem var(--e2);
    flex-wrap: wrap;
    gap: var(--e1);
  }

  .nav-site {
    flex-wrap: wrap;
    gap: 0.1rem;
  }

  .nav-site a {
    font-size: 0.82rem;
    padding: 0.38rem 0.65rem;
  }

  .bande-principale {
    padding: var(--e5) var(--e2);
  }

  .bande-principale::before,
  .bande-principale::after { display: none; }

  .rubrique {
    padding: var(--e4) var(--e2);
  }

  .disposition-trois {
    grid-template-columns: 1fr;
  }

  .pied-superieur {
    grid-template-columns: 1fr;
    gap: var(--e3);
  }

  .pied-inferieur {
    flex-direction: column;
    align-items: flex-start;
  }

  .titre-page {
    padding: var(--e4) var(--e2);
  }

  .titre-page::after { display: none; }

  .contenu-page {
    padding: var(--e4) var(--e2);
  }

  .formulaire-contact {
    padding: var(--e3) var(--e2);
  }

  .bloc-coordonnees {
    padding: var(--e3) var(--e2);
  }

  .etape {
    grid-template-columns: 2.5rem 1fr;
  }

  .etape-num {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .pied-page {
    padding: var(--e4) var(--e2) var(--e3);
  }

  .barre-liens {
    padding: var(--e3) var(--e2);
  }

  .zone-cta {
    padding: var(--e4) var(--e2);
  }
}