/* =============================================================
   SCP Jean-François CIRBA & Jean-Christophe TUTTLE
   Feuille de style — page d'accueil
   Direction : dominante marine, or en filets, une seule zone claire.
   ============================================================= */

/* ---------- 1. Polices auto-hébergées (aucun appel extérieur) ---------- */

@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/cinzel-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* TeX Gyre Pagella — version libre de Palatino / Book Antiqua.
   Licence GUST e-foundry, jointe dans assets/fonts/. Sous-ensemble latin. */
@font-face {
  font-family: 'Pagella';
  src: url('/assets/fonts/pagella-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. Jetons de couleur ---------- */

:root {
  --nuit:            #0C1528;
  --marine-fonce:    #0E1830;
  --marine:          #1C2B4E;   /* charte */
  --marine-clair:    #16233E;
  --marine-panneau:  #1A2947;

  --or:              #CFA761;   /* charte */
  --or-survol:       #B8924E;   /* charte */
  --or-fonce:        #8A6E33;   /* charte — texte sur fond clair */

  --clair:           #F8F9FA;   /* charte */
  --blanc:           #FFFFFF;

  --texte:           rgba(255,255,255,.82);
  --texte-attenue:   rgba(255,255,255,.62);
  --filet:           rgba(207,167,97,.30);
  --filet-sombre:    rgba(28,43,78,.16);

  --pas:             clamp(4rem, 9vw, 8rem);
  --transition:      .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. Réglages généraux ---------- */

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

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

body {
  margin: 0;
  background: var(--marine-fonce);
  color: var(--texte);
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;          /* 18 px — plancher imposé */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1.25rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--blanc); }

/* ---------- 4. Titres ---------- */

h1, h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.16;
  color: var(--blanc);
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--blanc);
  margin: 0 0 .6rem;
}

.titre {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.titre--sombre { color: var(--marine); }

/* ---------- 5. Sur-titres ---------- */

.surtitre {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1.5rem;
  max-width: none;
}
.surtitre::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 1px;
  background: var(--or);
  margin-bottom: 1.1rem;
}
.surtitre--sombre { color: var(--or-fonce); }
.surtitre--sombre::before { background: var(--or-fonce); }

/* ---------- 6. Trame ---------- */

.contenu { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }

.section { padding-block: var(--pas); }

.bloc { display: grid; gap: 2.5rem; }

/* Sans ceci, un enfant de grille refuse de se comprimer sous la largeur
   minimale de son contenu : le tableau des tarifs élargissait la page
   entière au lieu de défiler dans son propre cadre. */
.bloc__colonne, .bloc__corps { min-width: 0; }

@media (min-width: 64em) {
  .bloc { grid-template-columns: 14rem minmax(0, 1fr); gap: 4.5rem; }
  .bloc__colonne .surtitre { position: sticky; top: 7.5rem; }
}

/* ---------- 7. Accessibilité ---------- */

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--or); color: var(--marine);
  padding: .85rem 1.5rem; font-weight: 700; text-decoration: none; z-index: 200;
}
.evitement:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}
.section--claire :focus-visible { outline-color: var(--or-fonce); }

/* ---------- 8. En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12, 21, 40, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}

.entete__barre {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.75rem;
}

.marque {
  display: flex; align-items: center; gap: .85rem;
  text-decoration: none; margin-right: auto;
}
.marque__sceau {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.marque__texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque__nom {
  font-family: 'Pagella', 'Book Antiqua', Palatino, 'Palatino Linotype', Georgia, serif;
  font-weight: 400; font-size: 1.3125rem;
  letter-spacing: .045em; text-transform: uppercase;
  color: var(--blanc);
}
.marque__qualite {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texte-attenue);
}

.nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.nav a {
  font-size: .8125rem; letter-spacing: .05em;
  color: var(--texte); text-decoration: none;
  padding-block: .4rem;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--transition), color var(--transition);
}
.nav a:hover { color: var(--blanc); background-size: 100% 1px; }

/* Bouton menu — visible en dessous de 75em */
.bascule {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 1px solid var(--filet); color: var(--texte);
  padding: .55rem .9rem; cursor: pointer;
  font-family: inherit; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  order: 3;
}
.bascule__traits { position: relative; width: 1rem; height: 1px; background: currentColor; }
.bascule__traits::before, .bascule__traits::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
}
.bascule__traits::before { top: -.3rem; }
.bascule__traits::after  { top:  .3rem; }

@media (max-width: 74.99em) {
  .nav {
    display: none;
    order: 4; flex-basis: 100%;
    border-top: 1px solid var(--filet);
    padding-block: 1rem 1.25rem;
  }
  .nav--ouverte { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding-block: .7rem; font-size: .95rem; background-size: 0 0; }
  .entete__barre { flex-wrap: wrap; padding-block: .6rem; }
}

@media (min-width: 75em) {
  .bascule { display: none; }
}

/* Très petits écrans : le mot « Menu » n'est plus affiché mais reste lu
   par les lecteurs d'écran. */
@media (max-width: 22em) {
  .marque__nom { font-size: .9375rem; }
  .bascule { padding: .55rem .75rem; }
  .bascule__mot {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* Sur petit écran, le numéro quitte la barre et rejoint le menu :
   il resterait sinon deux lignes d'en-tête. */
.nav__tel { display: none; }

@media (max-width: 47.99em) {
  .entete__barre { min-height: 4.25rem; gap: 1rem; }
  .marque { gap: .7rem; }
  .marque__sceau { width: 2.5rem; height: 2.5rem; }
  .marque__nom { font-size: 1rem; }
  .marque__qualite { display: none; }
  .nav__tel { display: block; }
  .nav__tel a { color: var(--or); font-weight: 700; }
  .nav__tel + li { border-top: 1px solid var(--filet); margin-top: .5rem; padding-top: .5rem; }
}

/* ---------- 9. Ouverture ---------- */

.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: min(84vh, 760px);
  padding-block: clamp(3.5rem, 7vw, 4.5rem);
  background:
    radial-gradient(115% 85% at 12% -12%, rgba(207,167,97,.15) 0%, transparent 58%),
    radial-gradient(85% 70% at 92% 8%,   rgba(46,72,126,.55) 0%, transparent 62%),
    linear-gradient(180deg, var(--nuit) 0%, #101C36 58%, var(--marine-fonce) 100%);
  border-bottom: 1px solid var(--filet);
  overflow: hidden;
}

/* Bloc d'ouverture centré */
.hero__contenu { text-align: center; }
.hero .surtitre::before { margin-inline: auto; }
.hero .actions { justify-content: center; }

.hero__titre {
  font-size: clamp(2rem, 5.7vw, 4.15rem);
  max-width: 17ch;
  margin: 0 auto 1.75rem;
}
.hero .chapo { margin-inline: auto; }

/* Ouverture des pages intérieures : plus basse, alignée à gauche.
   L'accueil est une couverture, une page intérieure est un document. */
.hero--page {
  min-height: 0;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  align-items: flex-start;
}
.hero--page .hero__contenu { text-align: left; }
.hero--page .hero__titre { margin-inline: 0; max-width: 22ch; }
.hero--page .chapo { margin-inline: 0; margin-bottom: 2rem; }
.hero--page .actions { justify-content: flex-start; }

/* ---------- 9 bis. Fil d'Ariane ---------- */

.fil {
  background: var(--nuit);
  border-bottom: 1px solid var(--filet);
}
.fil ol {
  list-style: none; margin: 0; padding-block: .85rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: .8125rem; letter-spacing: .02em;
}
.fil li { display: flex; align-items: center; gap: .55rem; }
.fil li + li::before { content: '\203A'; color: var(--or); }
.fil a {
  color: var(--texte-attenue); text-decoration: none;
  transition: color var(--transition);
}
.fil a:hover { color: var(--or); }
.fil [aria-current] { color: var(--texte); }

.chapo {
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.65;
  color: var(--texte);
  max-width: 58ch;
  margin-bottom: 2.25rem;
}

/* ---------- 10. Boutons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 36em) {
  .actions { flex-direction: column; align-items: stretch; }
  .bouton { width: 100%; }
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.375rem; padding-inline: 1.9rem;
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: .875rem;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.bouton--or {
  background: var(--or);
  color: var(--marine);          /* jamais de blanc sur or */
  border-color: var(--or);
}
.bouton--or:hover { background: var(--or-survol); border-color: var(--or-survol); }

.bouton--filet {
  background: transparent; color: var(--or); border-color: var(--or);
}
.bouton--filet:hover { background: var(--or); color: var(--marine); }

/* ---------- 11. Liens fléchés ---------- */

.lien-fleche {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--or); text-decoration: none;
  padding-bottom: .35rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--transition);
}
.lien-fleche::after {
  content: '→';
  transition: transform var(--transition);
}
.lien-fleche:hover { background-size: 100% 1px; }
.lien-fleche:hover::after { transform: translateX(.3rem); }
.lien-fleche--sombre { color: var(--or-fonce); }

/* ---------- 12. Double entrée — égalité stricte ---------- */

.double {
  background: var(--marine-panneau);
  border-bottom: 1px solid var(--filet);
}
.double__grille { display: grid; }

.voie {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.voie + .voie { border-top: 1px solid var(--filet); }

.voie__titre {
  font-family: 'Lato', sans-serif;   /* plus de 6 mots : pas de Cinzel */
  font-weight: 700;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0;
}
.voie__texte { margin: 0; }
.voie__precision {
  margin: 0; color: var(--texte-attenue); font-size: 1rem;
}
.voie .lien-fleche { align-self: start; margin-top: auto; padding-top: 1rem; }

@media (min-width: 56em) {
  .double__grille { grid-template-columns: 1fr 1fr; }
  .voie:first-child { padding-right: clamp(2rem, 4vw, 4rem); }
  .voie + .voie {
    border-top: 0;
    border-left: 1px solid var(--filet);
    padding-left: clamp(2rem, 4vw, 4rem);
  }
}

/* ---------- 13. Domaines ---------- */

.section--domaines {
  background: linear-gradient(180deg, var(--marine-fonce) 0%, #121E39 100%);
}

.domaines { list-style: none; margin: 0; padding: 0; }

.domaine {
  display: grid; gap: .35rem 2.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--filet);
}
.domaine:last-child { border-bottom: 1px solid var(--filet); }
.domaine__titre { margin: 0; }
.domaine__qualite {
  display: block; margin-top: .3rem;
  font-weight: 400; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--or);
}
.domaine p { margin-bottom: 1rem; }
.domaine .lien-fleche { justify-self: start; }

@media (min-width: 48em) {
  .domaine { grid-template-columns: 13rem minmax(0, 1fr); }
  .domaine__titre { grid-row: span 3; }
}

/* ---------- 14. Méthode ---------- */

.section--methode {
  background: linear-gradient(180deg, #121E39 0%, var(--marine-fonce) 100%);
}

.etapes { list-style: none; margin: 0 0 2.75rem; padding: 0; }

.etape {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1.75rem;
  padding-block: clamp(1.5rem, 3vw, 2.125rem);
  border-top: 1px solid var(--filet);
}
.etape:last-child { border-bottom: 1px solid var(--filet); }

.etape__rang {
  grid-row: span 2;
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.etape__titre { margin: 0 0 .35rem; align-self: center; }
.etape p { margin: 0; color: var(--texte-attenue); }

/* ---------- 15. Honoraires — unique zone claire ---------- */

/* La seule zone claire de la page. Elle est raccordée au marine par deux
   bandes dégradées, en haut et en bas, plutôt que par une rupture nette. */
.section--claire {
  position: relative;
  isolation: isolate;
  background: var(--clair);
  color: var(--marine);
}
.section--claire::before,
.section--claire::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: clamp(2.5rem, 6vw, 5rem);
  z-index: -1;
  pointer-events: none;
}
.section--claire::before {
  top: 0;
  background: linear-gradient(180deg, var(--marine-fonce) 0%, var(--clair) 100%);
}
.section--claire::after {
  bottom: 0;
  background: linear-gradient(180deg, var(--clair) 0%, var(--marine-fonce) 100%);
}
.section--claire strong { color: var(--marine); }
.section--claire h3 { color: var(--marine); }
.section--claire .liste li::before { background: var(--or-fonce); }

.texte-clair { color: #2C3A5C; }

.tableau-enveloppe { overflow-x: auto; margin-block: 2.25rem; }

.tarifs {
  width: 100%; border-collapse: collapse;
  font-size: 1.0625rem; min-width: 34rem;
}
.tarifs th, .tarifs td {
  text-align: left; padding: 1rem .75rem;
  border-bottom: 1px solid var(--filet-sombre);
}
.tarifs thead th {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-fonce);
  border-bottom-color: var(--or-fonce);
  padding-bottom: .8rem;
}
.tarifs tbody th { font-weight: 700; color: var(--marine); }
.tarifs__precision {
  display: block; margin-top: .15rem;
  font-weight: 400; font-size: .875rem; color: #45536F;
}
.tarifs tbody td { color: #2C3A5C; font-variant-numeric: tabular-nums; }
.tarifs tbody tr:last-child th,
.tarifs tbody tr:last-child td { border-bottom: 0; }

/* ---------- 16. L'Étude — les chiffres ---------- */

.section--etude {
  background: linear-gradient(180deg, var(--marine-fonce) 0%, var(--marine-clair) 100%);
}

.chiffres {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem; margin: 0 0 2.75rem;
}
@media (min-width: 56em) {
  .chiffres { gap: 2.5rem 3rem; max-width: 34rem; }
}

.chiffre { border-top: 1px solid var(--filet); padding-top: 1.25rem; }
.chiffre__valeur {
  font-weight: 300; font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  line-height: 1; color: var(--or);
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
  margin: .85rem 0 0; font-size: .9375rem; line-height: 1.5;
  color: var(--texte-attenue);
}

/* ---------- 17. Bandeau — vue de Fort-de-France ---------- */

.bandeau {
  position: relative;
  margin: 0;
  background: var(--nuit);
  overflow: hidden;
}
.bandeau img {
  display: block;
  width: 100%;
  height: clamp(13rem, 28vw, 24rem);
  object-fit: cover;
  object-position: center 42%;
}
/* Le bandeau se fond dans les sections marine qui l'encadrent, plutôt que
   de s'y coller par une arête. Même principe que la zone des honoraires. */
.bandeau::before, .bandeau::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: clamp(2.5rem, 6vw, 5rem);
  pointer-events: none;
}
.bandeau::before {
  top: 0;
  background: linear-gradient(180deg, var(--marine-clair) 0%, transparent 100%);
}
.bandeau::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--nuit) 0%, transparent 100%);
}

/* ---------- 18. Clôture ---------- */

.cloture {
  padding-block: var(--pas);
  background:
    radial-gradient(90% 120% at 50% 120%, rgba(207,167,97,.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--nuit) 0%, #101C36 100%);
  border-top: 1px solid var(--filet);
}
.cloture__titre {
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

/* ---------- 19. Pied de page ---------- */

.pied {
  background: var(--nuit);
  border-top: 1px solid var(--filet);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: 1rem;
  line-height: 1.65;
}
.pied__grille { display: grid; gap: 2.5rem; }

@media (min-width: 56em) {
  .pied__grille { grid-template-columns: 17rem minmax(0, 1fr) auto; gap: 4rem; }
}

.pied__sceau { width: 5.5rem; height: 5.5rem; border-radius: 50%; margin-bottom: 1.25rem; }
.pied__raison { margin: 0; font-weight: 700; color: var(--blanc); max-width: none; }
.pied__qualite {
  margin: .25rem 0 0; font-size: .8125rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or); max-width: none;
}

.pied__coordonnees p { margin: 0 0 .5rem; color: var(--texte-attenue); max-width: 52ch; }
.pied__coordonnees address { font-style: normal; margin-bottom: 1.25rem; color: var(--texte); }
.pied__coordonnees a { color: var(--blanc); font-weight: 700; text-decoration: none; }
.pied__coordonnees a:hover { color: var(--or); }

.pied__liens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pied__liens a {
  color: var(--texte-attenue); text-decoration: none; font-size: .9375rem;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size var(--transition), color var(--transition);
  padding-bottom: .2rem;
}
.pied__liens a:hover { color: var(--blanc); background-size: 100% 1px; }

/* ---------- 19 bis. Le bon moment : avant / pendant / après ---------- */

.moments { list-style: none; margin: 0 0 2rem; padding: 0; }

.moment {
  display: grid; gap: .35rem 1.75rem;
  padding-block: clamp(1.25rem, 2.6vw, 1.75rem);
  border-top: 1px solid var(--filet);
}
.moment:last-child { border-bottom: 1px solid var(--filet); }
.moment__quand {
  font-weight: 700; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--or);
}
.moment p { margin: 0; }

@media (min-width: 40em) {
  .moment { grid-template-columns: 8rem minmax(0, 1fr); }
}

/* ---------- 19 quinquies. Listes à filet or ---------- */

.liste {
  list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 68ch;
}
.liste li { position: relative; padding-left: 1.6rem; margin-bottom: .65rem; }
.liste li:last-child { margin-bottom: 0; }
.liste li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: .7rem; height: 1px; background: var(--or);
}

/* ---------- 19 sexies. Tableau sur fond marine ---------- */

.tableau {
  width: 100%; border-collapse: collapse;
  font-size: 1.0625rem; min-width: 30rem;
}
.tableau th, .tableau td {
  text-align: left; padding: .95rem .75rem;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.tableau thead th {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--or); border-bottom-color: var(--or);
  padding-bottom: .8rem;
}
.tableau tbody th { font-weight: 700; color: var(--blanc); }
.tableau tbody td { color: var(--texte-attenue); }
.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td { border-bottom: 0; }

/* ---------- 19 sexies bis. Carte de la Martinique ----------
   Tracé vectoriel construit à partir du contour officiel du département 972
   (données ouvertes, Licence Ouverte). Aucun service cartographique
   extérieur n'est appelé : le dessin fait partie de la page. */

.carte-cadre { margin-top: 2.5rem; }
.carte {
  display: block;
  width: 100%; max-width: 24rem; height: auto;
}
.carte__ile {
  fill: rgba(207, 167, 97, .14);
  stroke: var(--or);
  stroke-width: 4.5;
  stroke-linejoin: round;
}
.carte__point { fill: var(--or); }
.carte__ville {
  fill: var(--texte);
  font-family: 'Lato', sans-serif;
  font-size: 42px;
  letter-spacing: 1.5px;
}

/* ---------- 19 sexies ter. Plan du centre-ville ----------
   Trame des rues tirée d'OpenStreetMap (licence ODbL, attribution portée
   par la légende). Dessin inclus dans la page : aucun appel extérieur,
   donc aucun cookie et aucun bandeau de consentement. */

.plan-cadre { margin: 2.5rem 0 0; }
.plan {
  display: block; width: 100%; height: auto;
  background: var(--nuit);
  border: 1px solid var(--filet);
}
.plan__voie,
.plan__voie--majeure,
.plan__voie--pietonne {
  fill: none;
  stroke: var(--or);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan__voie          { stroke-width: 2.5; opacity: .40; }
.plan__voie--majeure { stroke-width: 5;   opacity: .65; }
.plan__voie--pietonne{ stroke-width: 1.5; opacity: .28; }
.plan__halo  { fill: var(--or); opacity: .18; }
.plan__point { fill: var(--or); }
.plan__libelle {
  fill: var(--blanc);
  font-family: 'Lato', sans-serif;
  font-weight: 700; font-size: 26px;
  letter-spacing: 1px;
}
.plan-legende {
  margin-top: .9rem;
  font-size: .875rem;
  color: var(--texte-attenue);
  max-width: 62ch;
}

/* ---------- 19 septies. Emplacement encore vide ---------- */

.emplacement {
  border: 1px dashed var(--filet);
  min-height: clamp(9rem, 18vw, 13rem);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem 1.5rem; gap: .6rem;
  margin: 2rem 0 0;
}
.emplacement__mention {
  margin: 0; font-weight: 700; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--or);
}
.emplacement__note {
  margin: 0; max-width: 44ch; font-size: .9375rem; color: var(--texte-attenue);
}

/* ---------- 19 octies. Pages liées ---------- */

.pages-liees {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2.25rem;
}

/* ---------- 19 quater. Lien dans un paragraphe ---------- */

.lien-texte {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
.lien-texte:hover { color: var(--blanc); }

/* Sur fond clair, l'or pur ne passe pas le contraste : on descend à l'or foncé */
.section--claire .lien-texte { color: var(--or-fonce); }
.section--claire .lien-texte:hover { color: var(--marine); }

.espace-avant { margin-top: 2rem; }

/* Page courante dans la navigation : couleur ET filet, jamais la couleur seule */
.nav [aria-current="page"] { color: var(--or); background-size: 100% 1px; }

/* ---------- 19 ter. Mention sous les boutons ---------- */

.note-formulaire {
  margin-top: 1.75rem;
  font-size: .9375rem;
  color: var(--texte-attenue);
  max-width: 56ch;
  border-left: 1px solid var(--filet);
  padding-left: 1.1rem;
}

/* ---------- 19 nonies. Formulaire ----------
   Le formulaire occupe la zone claire : c'est là qu'on agit, et une saisie
   se lit mieux sur fond clair. */

.piege {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.formulaire__alerte {
  border-left: 3px solid #A3282C;
  background: #FBEDED;
  color: #7A1F22;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  max-width: 62ch;
  font-size: 1rem;
}

.champ-groupe {
  border: 0; padding: 0;
  margin: 0 0 clamp(2.25rem, 5vw, 3.25rem);
  border-top: 1px solid var(--filet-sombre);
  padding-top: 1.75rem;
}
.champ-groupe:first-of-type { border-top: 0; padding-top: 0; }

.champ-groupe__titre {
  display: flex; align-items: baseline; gap: .9rem;
  padding: 0; margin: 0 0 1.75rem;
  font-weight: 700; font-size: 1.1875rem;
  color: var(--marine);
}
.champ-groupe__rang {
  font-weight: 300; font-size: 1.75rem;
  color: var(--or-fonce);
  font-variant-numeric: tabular-nums;
}

.champ { border: 0; padding: 0; margin: 0 0 1.75rem; }
.champ:last-child { margin-bottom: 0; }

.champ__libelle {
  display: block; padding: 0;
  margin-bottom: .55rem;
  font-weight: 700; font-size: 1rem;
  color: var(--marine);
}
.champ__obligatoire {
  font-weight: 400; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--or-fonce);
  margin-left: .4rem;
}
.champ__aide {
  margin: .5rem 0 0; max-width: 62ch;
  font-size: .9375rem; color: #45536F;
}

.champ__saisie {
  display: block; width: 100%; max-width: 34rem;
  padding: .75rem .9rem;
  font-family: inherit; font-size: 1.0625rem; line-height: 1.5;
  color: var(--marine);
  background: var(--blanc);
  border: 1px solid rgba(28, 43, 78, .30);
  border-radius: 0;
  transition: border-color var(--transition);
}
.champ__saisie--long { max-width: 44rem; }
.champ__saisie:hover { border-color: rgba(28, 43, 78, .55); }
.champ__saisie:focus { border-color: var(--or-fonce); outline-offset: 1px; }
textarea.champ__saisie { resize: vertical; }

.choix { display: grid; gap: .55rem; }
.choix__item {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: 1.0625rem; color: #2C3A5C;
  cursor: pointer;
}
.choix__item input { margin-top: .35rem; flex-shrink: 0; accent-color: #8A6E33; }

.consentement {
  display: flex; align-items: flex-start; gap: .8rem;
  max-width: 62ch; font-size: 1rem; color: #2C3A5C;
  cursor: pointer;
}
.consentement input { margin-top: .3rem; flex-shrink: 0; accent-color: #8A6E33; }

.formulaire .bouton { margin-top: .5rem; }

.coordonnees {
  font-style: normal;
  margin: 1.5rem 0 0;
  line-height: 1.9;
}

/* ---------- 20. Apparition des blocs ---------- */

.js .anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .anim.vu { opacity: 1; transform: none; }

.js .domaine:nth-child(2), .js .etape:nth-child(2) { transition-delay: .07s; }
.js .domaine:nth-child(3), .js .etape:nth-child(3) { transition-delay: .14s; }
.js .etape:nth-child(4) { transition-delay: .21s; }
.js .chiffre:nth-child(2) { transition-delay: .07s; }
.js .chiffre:nth-child(3) { transition-delay: .14s; }
.js .chiffre:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .anim { opacity: 1; transform: none; transition: none; }
  .lien-fleche, .lien-fleche::after, .nav a, .bouton,
  .pied__liens a { transition: none; }
}

/* ---------- 21. Impression ---------- */

@media print {
  .entete, .bascule, .bandeau, .cloture .actions { display: none; }
  body { background: #fff; color: #000; }
}