/* ==========================================================================
   SOCIÉTÉ CAROLE BUSINESS SARL — feuille de style unique
   Ordre de cascade : 1 tokens · 2 base · 3 layout · 4 composants · 5 pages
   Un seul niveau de spécificité (classes) hors reset — pas de sélecteurs
   de type dans les blocs composants, afin d'éviter tout conflit.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Palette dérivée du badge SCBS */
  --marine: #0b1e3c;
  --marine-clair: #132a4e;
  --marine-voile: rgba(11, 30, 60, 0.08);
  --azur: #1b4b8f;
  --azur-fonce: #163d75;
  --or: #c6a15b;
  --or-clair: #dcc08a;
  --or-voile: rgba(198, 161, 91, 0.28);
  --ivoire: #f2ede1;
  --ivoire-ombre: #e8e1d0;
  --ivoire-carte: #f8f5ed;
  --anthracite: #1e2530;
  --gris: #5a6472;
  --gris-clair: #8b94a1;
  --blanc-casse: #fbf9f4;

  /* Typographie */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.15rem, 1.35rem + 3.1vw, 3.35rem);
  --fs-h1: clamp(1.95rem, 1.35rem + 2.2vw, 2.85rem);
  --fs-h2: clamp(1.45rem, 1.15rem + 1.15vw, 1.95rem);
  --fs-h3: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-petit: 0.9375rem;
  --fs-label: 0.75rem;

  /* Rythme */
  --pas: 8px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --largeur: 1180px;
  --largeur-texte: 68ch;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  --transition: 200ms ease;
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* L'en-tête est collant : on décale les arrivées d'ancre d'autant, sinon le
   haut de la section visée passe sous la barre. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--anthracite);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.01em;
}

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

a { color: var(--azur); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azur-fonce); }

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

ul { margin: 0; padding: 0; }

button { font: inherit; }

hr { border: 0; border-top: 1px solid var(--or-voile); margin: 2rem 0; }

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

::selection { background: var(--or-voile); color: var(--anthracite); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. LAYOUT ---------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); }
.section--serre { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--marine {
  background: var(--marine);
  color: var(--blanc-casse);
}

.section--ivoire { background: var(--ivoire); }

.section--ombre {
  background: var(--ivoire-ombre);
  border-block: 1px solid rgba(11, 30, 60, 0.07);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--or);
  color: var(--marine);
  padding: 0.7rem 1.2rem;
  font-size: var(--fs-petit);
  font-weight: 600;
  z-index: 100;
}
.saut-contenu:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- 4. COMPOSANTS ---------- */

/* 4.1 Eyebrow / labels institutionnels */
.surtitre {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azur);
  margin-bottom: 0.9rem;
}
.surtitre--or { color: var(--or); }

/* 4.2 Filet or */
.filet {
  width: 64px;
  height: 1px;
  background: var(--or);
  border: 0;
  margin: 1.5rem 0;
}
.filet--centre { margin-inline: auto; }

/* 4.3 Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-size: var(--fs-petit);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

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

.bouton--contour {
  background: transparent;
  color: var(--blanc-casse);
  border-color: rgba(198, 161, 91, 0.55);
}
.bouton--contour:hover { border-color: var(--or); color: var(--or-clair); }

.bouton--sombre {
  background: var(--marine);
  color: var(--blanc-casse);
  border-color: var(--marine);
}
.bouton--sombre:hover { background: var(--azur); border-color: var(--azur); color: #fff; }

/* 4.4 En-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--marine);
  border-bottom: 1px solid rgba(198, 161, 91, 0.32);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 76px;
}

.marque { margin-right: auto; }
.navigation { order: 2; }
.langues { order: 3; }
.bascule { order: 4; }

/* Filet de séparation avant le sélecteur, seulement quand la barre est large */
@media (min-width: 901px) {
  .langues {
    padding-left: clamp(0.75rem, 1.5vw, 1.4rem);
    border-left: 1px solid rgba(198, 161, 91, 0.3);
  }
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--blanc-casse);
}

/* Le sceau SCBS a des anneaux et un lettrage bleu marine : il est conçu pour
   un fond clair. Sur l'en-tête marine, on le pose sur une pastille ivoire —
   il se lit alors comme un sceau apposé, et non comme une Afrique flottante. */
.marque__badge {
  width: 50px;
  height: 50px;
  flex: none;
  background: var(--blanc-casse);
  border-radius: 50%;
  padding: 2px;
}

.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }

.marque__nom {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.marque__mention {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--or);
  margin-top: 2px;
}

.navigation { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }

.navigation__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
}

.navigation__lien {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  color: rgba(251, 249, 244, 0.86);
  font-size: var(--fs-petit);
  text-decoration: none;
  transition: color var(--transition);
}

.navigation__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.navigation__lien:hover { color: #fff; }
.navigation__lien:hover::after { transform: scaleX(1); }

.navigation__lien[aria-current="page"] { color: var(--or); }
.navigation__lien[aria-current="page"]::after { transform: scaleX(1); }

/* 4.5 Sélecteur de langue */
/* Le sélecteur vit dans la barre d'en-tête, hors du menu déroulant : sur
   téléphone il doit rester visible en permanence, le public du site étant
   majoritairement anglophone. */
.langues {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
}

.langues__lien {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  color: rgba(251, 249, 244, 0.6);
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}
.langues__lien:hover { color: var(--or-clair); }
.langues__lien[aria-current="true"] { color: var(--or); }
.langues__separateur { color: rgba(198, 161, 91, 0.45); font-size: var(--fs-label); }

/* 4.6 Bascule mobile */
.bascule {
  display: none;
  background: none;
  border: 1px solid rgba(198, 161, 91, 0.4);
  color: var(--blanc-casse);
  width: 46px;
  height: 44px;
  flex: none;
  place-items: center;
  cursor: pointer;
  line-height: 0;
}
.bascule__barre {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.bascule__barre + .bascule__barre { margin-top: 5px; }

/* 4.7 Hero d'accueil */
/* Photographie de fond assombrie par deux voiles : un dégradé horizontal qui
   protège la colonne de texte, un voile marine global qui ramène l'image dans
   la charte. Le marine reste en `background-color` : si l'image ne charge pas,
   le hero garde son fond et le texte reste lisible. */
.hero {
  position: relative;
  background-color: var(--marine);
  background-image:
    linear-gradient(to right, rgba(9, 24, 48, 0.94) 0%, rgba(9, 24, 48, 0.82) 34%, rgba(9, 24, 48, 0.42) 68%, rgba(9, 24, 48, 0.3) 100%),
    linear-gradient(rgba(11, 30, 60, 0.42), rgba(11, 30, 60, 0.42)),
    url("../img/hero.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center 42%;
  background-repeat: no-repeat;
  color: var(--blanc-casse);
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* Globe filaire pointillé — dessiné sur canvas par assets/js/globe.js.
   Les opacités sont gérées dans le rendu, pas ici, pour doser séparément
   graticule, trait de côte, semis et routes. */
/* Globe filaire pointillé — désormais en fond de la section Conformité.
   Variante claire : semis azur et routes or sur parchemin (voir globe.js).
   Il s'efface vers la gauche pour ne jamais concurrencer le texte. */
.conformite { position: relative; overflow: hidden; }

.conformite__globe {
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(640px, 78vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.conformite__globe canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 22%, #000 52%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 22%, #000 52%);
}

.conformite .enveloppe { position: relative; }

/* Grille 2×2 figée : en `auto-fit`, le nombre de colonnes variait avec la
   largeur (3 puis 4), et « Diligence raisonnable » ne restait pas sous
   « Lutte anti-blanchiment ». Quatre cartes se lisent mieux en carré. */
.conformite .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ne pas redéfinir max-width ici : .hero__contenu partage l'élément avec
   .enveloppe, et l'écraser recentrerait le hero hors de la grille du site.
   La largeur de lecture est portée par les enfants. */
.hero__contenu { position: relative; }

.hero__titre {
  font-size: var(--fs-hero);
  letter-spacing: -0.018em;
  max-width: 20ch;
}

.hero__intro {
  font-size: var(--fs-lead);
  color: rgba(251, 249, 244, 0.82);
  max-width: 36rem;
}

.hero__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-petit);
  color: var(--or);
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(198, 161, 91, 0.25);
  max-width: 32rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* 4.8 Bandeau de titre (pages intérieures) */
.bandeau {
  background: var(--marine);
  color: var(--blanc-casse);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(198, 161, 91, 0.25);
}

.bandeau__titre { font-size: var(--fs-h1); max-width: 22ch; }

.bandeau__intro {
  color: rgba(251, 249, 244, 0.78);
  max-width: 52ch;
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
}

/* 4.9 Fil d'Ariane */
.ariane {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 249, 244, 0.5);
  margin-bottom: 1.1rem;
}
.ariane__lien {
  color: rgba(251, 249, 244, 0.68);
  text-decoration: none;
  display: inline-block;
  padding: 0.68rem 0.3rem 0.68rem 0;
}
.ariane__lien:hover { color: var(--or); }

/* 4.10 Grille de cartes */
.grille {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.grille--deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.carte {
  background: var(--ivoire-carte);
  border: 1px solid rgba(11, 30, 60, 0.08);
  border-top: 2px solid var(--or);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color var(--transition), transform var(--transition);
}
.carte:hover { border-color: rgba(11, 30, 60, 0.18); border-top-color: var(--or); }

/* Icône filaire et numéro sur une même ligne, façon en-tête de fiche */
.carte__marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.carte__icone {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--or);
  overflow: visible;
}

.carte__numero {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--or);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.75rem;
}

.carte__marque .carte__numero { margin-bottom: 0; }

.carte__titre { font-size: var(--fs-h3); margin-bottom: 0.75rem; }

.carte__texte { color: var(--gris); font-size: var(--fs-petit); }

.carte--sombre {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(198, 161, 91, 0.2);
  border-top-color: var(--or);
}
.carte--sombre:hover { border-color: rgba(198, 161, 91, 0.4); }
.carte--sombre .carte__texte { color: rgba(251, 249, 244, 0.74); }

/* 4.11 Titres de section */
.entete-section { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section__titre { font-size: var(--fs-h2); }
.entete-section__texte { color: var(--gris); margin-top: 1rem; max-width: 56ch; }
.section--marine .entete-section__texte { color: rgba(251, 249, 244, 0.76); }

/* 4.12 Duo de colonnes */
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}
.duo--egal { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* 4.13 Liste à puces or */
/* Même rythme vertical qu'un paragraphe : sans cela, le reset `ul { margin: 0 }`
   collait la liste au bloc suivant. */
.liste { list-style: none; margin-bottom: 1.1em; }
.liste:last-child { margin-bottom: 0; }
.liste__element {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  color: var(--gris);
  font-size: var(--fs-petit);
}
.liste__element::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1px;
  background: var(--or);
}
.liste__element:last-child { margin-bottom: 0; }
.liste__terme { color: var(--anthracite); font-weight: 600; }
.section--marine .liste__element { color: rgba(251, 249, 244, 0.78); }
.section--marine .liste__terme { color: var(--blanc-casse); }

/* 4.14 Corps de texte long */
.prose { max-width: var(--largeur-texte); }
.prose__titre { font-size: var(--fs-h2); margin-top: 2.75rem; margin-bottom: 1.1rem; }
.prose__titre:first-child { margin-top: 0; }
.prose__lead { font-size: var(--fs-lead); color: var(--anthracite); }
.prose__texte { color: var(--gris); }

/* 4.15 Encadré latéral */
.encadre {
  background: var(--ivoire-carte);
  border: 1px solid rgba(11, 30, 60, 0.09);
  border-left: 2px solid var(--or);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.encadre__titre {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azur);
  margin-bottom: 1.1rem;
}
.encadre__ligne { margin-bottom: 0.9rem; font-size: var(--fs-petit); }
.encadre__ligne:last-child { margin-bottom: 0; }
.encadre__etiquette {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
.encadre__valeur { color: var(--anthracite); font-weight: 500; }

/* 4.16 Bande d'appel à l'action */
.appel {
  background: var(--marine);
  color: var(--blanc-casse);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(198, 161, 91, 0.25);
}
.appel__grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.appel__titre { font-size: var(--fs-h2); max-width: 24ch; }
.appel__texte { color: rgba(251, 249, 244, 0.75); margin-top: 0.9rem; max-width: 46ch; }

/* 4.17 Pied de page */
.pied {
  background: var(--marine);
  color: rgba(251, 249, 244, 0.72);
  font-size: var(--fs-petit);
  border-top: 1px solid rgba(198, 161, 91, 0.18);
}
.pied__haut {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.pied__titre {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.2rem;
}
.pied__liste { list-style: none; }
.pied__liste li { margin-bottom: 0.6rem; }
/* Zone tactile confortable au pouce : le pied de page est très visité sur
   téléphone, et ses liens ne faisaient que 20 px de haut. */
.pied__lien {
  color: rgba(251, 249, 244, 0.72);
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0;
  transition: color var(--transition);
}
.pied__lien:hover { color: var(--or-clair); }
.pied__bas {
  border-top: 1px solid rgba(198, 161, 91, 0.16);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(251, 249, 244, 0.5);
}
.pied__marque { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.pied__badge {
  width: 46px;
  height: 46px;
  flex: none;
  background: var(--blanc-casse);
  border-radius: 50%;
  padding: 2px;
}
.pied__nom { font-family: var(--serif); font-size: 1rem; color: var(--blanc-casse); }
.pied__baseline { font-style: italic; color: var(--or); font-size: 0.85rem; max-width: 34ch; }

/* 4.18 Formulaire */
.formulaire { display: grid; gap: 1.15rem; }
.champ { display: grid; gap: 0.45rem; }
.champ__etiquette {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.champ__saisie,
.champ__zone,
.champ__choix {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-petit);
  color: var(--anthracite);
  background: var(--blanc-casse);
  border: 1px solid rgba(11, 30, 60, 0.18);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ__zone { resize: vertical; min-height: 150px; line-height: 1.6; }
.champ__saisie:focus,
.champ__zone:focus,
.champ__choix:focus {
  border-color: var(--azur);
  box-shadow: 0 0 0 2px rgba(27, 75, 143, 0.14);
}
.champ__aide { font-size: 0.8rem; color: var(--gris-clair); }
.champ__requis { color: var(--azur); }

.avis {
  background: var(--ivoire-ombre);
  border-left: 2px solid var(--or);
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
  color: var(--gris);
}

/* 4.19 Blocs de coordonnées */
.coordonnees { list-style: none; }
.coordonnees__element {
  padding-block: 1.05rem;
  border-bottom: 1px solid rgba(11, 30, 60, 0.1);
}
.coordonnees__element:first-child { padding-top: 0; }
.coordonnees__element:last-child { border-bottom: 0; }
.coordonnees__etiquette {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-bottom: 0.3rem;
}
/* Téléphone et courriel sont les deux actions les plus tapées sur mobile :
   on leur donne une hauteur de doigt. */
.coordonnees__valeur a {
  display: inline-block;
  padding: 0.45rem 0;
}

.coordonnees__valeur { color: var(--anthracite); font-size: 1.02rem; }
.coordonnees__valeur a { color: var(--azur); text-decoration: none; }
.coordonnees__valeur a:hover { text-decoration: underline; }

/* 4.20 Citation de direction */
.citation {
  border-left: 2px solid var(--or);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
}
.citation__texte {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--anthracite);
}
.section--marine .citation__texte { color: var(--blanc-casse); }
.citation__auteur {
  margin-top: 1.2rem;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  font-style: normal;
}
.section--marine .citation__auteur { color: var(--or); }

/* 4.21 Étapes numérotées */
.etapes { list-style: none; counter-reset: etape; }
.etape {
  counter-increment: etape;
  position: relative;
  padding-left: 3.25rem;
  padding-bottom: 2rem;
  border-left: 1px solid rgba(11, 30, 60, 0.12);
  margin-left: 0.9rem;
}
.etape:last-child { padding-bottom: 0; border-left-color: transparent; }
.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: -0.9rem;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  background: var(--ivoire);
  color: var(--or);
  font-family: var(--serif);
  font-size: 0.8rem;
  border: 1px solid var(--or-voile);
  border-radius: 50%;
}
.section--ombre .etape::before { background: var(--ivoire-ombre); }
.etape__titre { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.etape__texte { color: var(--gris); font-size: var(--fs-petit); }

/* 4.22 Mentions légales / texte fin */
.mention {
  font-size: 0.82rem;
  color: var(--gris-clair);
  line-height: 1.6;
}

/* 4.23 Groupement CB+ */
.cbplus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.cbplus__marque {
  margin: 0;
  display: flex;
  align-items: flex-start;
  font-family: var(--serif);
  font-size: clamp(3.1rem, 1.8rem + 5.2vw, 5.4rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--blanc-casse);
  border-inline-start: 2px solid var(--or);
  padding-inline-start: clamp(1rem, 2.4vw, 1.8rem);
}

.cbplus__signe {
  color: var(--or);
  font-size: 0.56em;
  line-height: 1;
  margin-inline-start: 0.05em;
}

.cbplus__titre {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--blanc-casse);
  margin: 0 0 1.15rem;
}

.cbplus__socle { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.cbplus__note { margin-top: 1.25rem; max-width: 80ch; }

/* 4.24 Révélation au défilement
   L'état masqué dépend de .js-reveler, posée par site.js : sans JavaScript
   rien n'est caché. Le décalage entre éléments vient de --delai, écrit par
   le script. Registre volontairement sobre : une montée de 18 px, pas
   d'échelle ni de rotation. */
.reveler {
  transition:
    opacity 640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--delai, 0ms),
    transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--delai, 0ms);
}

.js-reveler .reveler {
  opacity: 0;
  transform: translateY(18px);
}

.js-reveler .reveler--vu {
  opacity: 1;
  transform: none;
}

/* Le filet or de la carte se trace de gauche à droite au lieu d'apparaître.
   Il passe en pseudo-élément pour être animable ; la bordure d'origine est
   neutralisée, y compris au survol. */
.js-reveler .reveler-carte,
.js-reveler .reveler-carte:hover { border-top-color: transparent; }

.js-reveler .reveler-carte { position: relative; }

.js-reveler .reveler-carte::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  width: calc(100% + 2px);
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--delai, 0ms);
}

.js-reveler .reveler-carte.reveler--vu::before { transform: scaleX(1); }

/* 4.25 Animation d'entrée
   La première bande de chaque page se compose au chargement — le hero à
   l'accueil, le bandeau de titre sur les pages intérieures. Chaque élément
   monte de 16 px en se révélant, un cran après l'autre. Même courbe et même
   registre sobre que la révélation au défilement : ni échelle ni rotation.

   Réalisée en animation CSS pure avec `both` : l'élément adopte son état
   masqué AVANT que son décalage ne s'écoule, donc aucun clignotement
   au-dessus de la ligne de flottaison, et rien à déclencher en JavaScript.
   Sous prefers-reduced-motion l'animation n'existe pas — le contenu est
   d'emblée en place. Le semis du marquee CB+ (.bandeau > .bandeau__rail)
   n'est pas concerné : il n'a pas d'.enveloppe en enfant direct. */
@media (prefers-reduced-motion: no-preference) {
  .hero__contenu > *,
  .bandeau > .enveloppe > * {
    animation: entree-montee 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .hero__contenu > :nth-child(1),
  .bandeau > .enveloppe > :nth-child(1) { animation-delay: 80ms; }
  .hero__contenu > :nth-child(2),
  .bandeau > .enveloppe > :nth-child(2) { animation-delay: 170ms; }
  .hero__contenu > :nth-child(3),
  .bandeau > .enveloppe > :nth-child(3) { animation-delay: 260ms; }
  .hero__contenu > :nth-child(4),
  .bandeau > .enveloppe > :nth-child(4) { animation-delay: 350ms; }
  .hero__contenu > :nth-child(5) { animation-delay: 440ms; }
  .hero__contenu > :nth-child(6) { animation-delay: 530ms; }
}

@keyframes entree-montee {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* 4.25 Illustration — filet or en bordure haute, comme les cartes.
   Les figures se placent hors des colonnes de prose : à l'intérieur, elles
   restent étroites et laissent une gouttière vide à leur droite. */
.media {
  margin: 0;
  border-top: 2px solid var(--or);
}

.media__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ivoire-ombre);
}

.media__legende {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--gris-clair);
  line-height: 1.5;
}

/* Bande large en fin de section : cadrage cinéma */
.media--bande { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.media--bande .media__image { aspect-ratio: 5 / 2; }

/* Paire d'illustrations côte à côte */
.media-paire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* 4.26 Carrousel des raffineries affiliées (section CB+)
   Défilement natif avec accrochage : pas de librairie, pilotable au doigt,
   à la molette, au clavier (Tab puis flèches) et par les deux boutons. */
.carrousel { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

.carrousel__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.carrousel__commandes { display: flex; gap: 0.5rem; flex: none; }

.carrousel__bouton {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--or);
  border: 1px solid rgba(198, 161, 91, 0.45);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.carrousel__bouton:hover { border-color: var(--or); background: rgba(198, 161, 91, 0.1); }
.carrousel__bouton[disabled] { opacity: 0.3; cursor: default; }
.carrousel__bouton svg { width: 17px; height: 17px; }

/* Bandeau défilant en boucle. Le rail contient les fiches en double : la
   seconde série est un clone masqué aux lecteurs d'écran, posé par site.js.
   La translation vaut exactement une série (moitié du rail + un demi-écart),
   d'où une boucle sans saut visible. */
.bandeau {
  --ecart: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}

.bandeau__rail {
  display: flex;
  gap: var(--ecart);
  width: max-content;
  list-style: none;
  animation: bandeau-defile var(--duree, 60s) linear infinite;
}

@keyframes bandeau-defile {
  to { transform: translateX(calc(-1 * var(--serie, 50%))); }
}

/* Trois façons d'arrêter le défilement : le bouton, le survol, et le clavier
   dès qu'un élément du bandeau reçoit le focus. */
.bandeau:hover .bandeau__rail,
.bandeau:focus-within .bandeau__rail,
.bandeau[data-arret="true"] .bandeau__rail { animation-play-state: paused; }

/* Sans animation, le bandeau reste parcourable à la main. */
@media (prefers-reduced-motion: reduce) {
  .bandeau { overflow-x: auto; }
  .bandeau__rail { animation: none; }
}

.carrousel__bouton .bandeau-ctrl__lecture { display: none; }
.carrousel__bouton[aria-pressed="true"] .bandeau-ctrl__pause { display: none; }
.carrousel__bouton[aria-pressed="true"] .bandeau-ctrl__lecture { display: block; }

.fiche {
  flex: 0 0 clamp(220px, 24vw, 268px);
  border-top: 2px solid var(--or);
  background: rgba(255, 255, 255, 0.035);
  border-inline: 1px solid rgba(198, 161, 91, 0.18);
  border-bottom: 1px solid rgba(198, 161, 91, 0.18);
  transition: border-color var(--transition);
}
.fiche:hover { border-inline-color: rgba(198, 161, 91, 0.4); border-bottom-color: rgba(198, 161, 91, 0.4); }

/* Emplacement visuel de la fiche. Il contient aujourd'hui un visuel d'attente :
   les photographies fournies ne représentaient pas les sociétés citées. Pour
   les remplacer, écraser le fichier correspondant dans assets/img/cbplus/ —
   aucune modification du HTML n'est nécessaire. */
.fiche__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--marine-clair);
}

/* Variante logo : un logo n'est pas une photographie. Il ne doit pas être
   rogné, et beaucoup ont un lettrage sombre invisible sur le fond marine.
   On le pose donc entier, centré, sur une plaque ivoire. */
.fiche__image--logo {
  object-fit: contain;
  background: var(--blanc-casse);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Logo au tracé clair : la plaque ivoire l'effacerait. On le laisse sur un
   fond marine, où son argenté ressort. */
.fiche__image--logo-sombre { background: var(--marine-clair); }

.fiche__corps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.2rem 1.3rem 1.4rem;
}

.fiche__pays {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(198, 161, 91, 0.22);
}

.fiche__nom {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--blanc-casse);
  margin: 0;
}

/* ---------- 5. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .cbplus { grid-template-columns: 1fr; gap: 1.6rem; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .appel__grille { grid-template-columns: 1fr; }
}

/* Même seuil que les colonnes : la navigation horizontale ne tient plus
   au-delà, elle passait sur deux lignes entre 780 et 900 px. */
@media (max-width: 900px) {
  .bascule { display: grid; }

  .navigation {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--marine);
    border-bottom: 1px solid rgba(198, 161, 91, 0.32);
    padding: 0.5rem var(--gouttiere) 1.5rem;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .navigation[data-ouvert="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }

  .navigation__lien {
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(198, 161, 91, 0.14);
    font-size: 1rem;
  }
  .navigation__lien::after { display: none; }


  .conformite__globe { right: -32%; width: min(560px, 96vw); opacity: 0.65; }
  .pied__haut { grid-template-columns: 1fr; }

  /* Sur une colonne, le bouton pause flottait au milieu du bord droit :
     on l'empile sous le chapeau et on lui donne une hauteur de doigt. */
  .carrousel__entete { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .carrousel__bouton { width: 44px; height: 44px; }

  /* Sous 16 px, Safari iOS zoome la page à la mise au point d'un champ et le
     visiteur doit repincer pour lire la suite du formulaire. */
  .champ__saisie,
  .champ__zone,
  .champ__choix { font-size: 1rem; }

  .formulaire .bouton { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .conformite .grille { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .marque__mention { display: none; }
  .marque__badge { width: 44px; height: 44px; }
  .hero__actions .bouton { width: 100%; justify-content: center; }
}

/* ---------- 6. IMPRESSION ---------- */
@media print {
  .entete, .appel, .bascule, .conformite__globe { display: none; }
  body { background: #fff; color: #000; }
  .section--marine, .bandeau, .hero { background: #fff; color: #000; }
}