@charset "UTF-8";

/* ==========================================================================
   berdin.group — feuille de style du site public

   Écrite à la main, sans préprocesseur ni étape de construction : ce qui n'a
   pas de build ne casse pas. Elle doit rester lisible dans dix ans.

   Plan
   ----
    1. Polices
    2. Jetons — la charte v1, et les rôles qui s'en déduisent
    3. Base et typographie
    4. Composition
    5. En-tête et navigation
    6. Pied de page
    7. Blocs éditoriaux
    8. Visuels et repères
    9. Réalisations et facettes
   10. Formulaires
   11. Carte des implantations
   12. Impression
   ========================================================================== */


/* 1. Polices ============================================================== */

/* Auto-hébergées : aucune requête vers un domaine tiers, et pas de bandeau
   cookies à gérer. Sous-ensembles latin et latin-ext, woff2 seulement. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/polices/manrope-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/source-sans-3-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/source-sans-3-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/source-sans-3-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/source-sans-3-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Jetons =============================================================== */

:root {
  /* La palette de la charte v1. Le groupe n'a pas de couleur. */
  --noir: #000000;
  --anthracite: #262626;
  --gris-moyen: #8a8a8a;
  --gris-perle: #d9d9d9;
  --papier: #f4f3ef;
  --blanc: #ffffff;

  /* Le gris de la charte tombe à 3,45:1 sur blanc, sous les 4,5:1 exigés pour
     du texte. #8A8A8A reste le gris des filets ; le texte secondaire prend ce
     ton, deux crans plus sombre. Écart documenté dans CONTENU.md §8. */
  --gris-texte: #6e6e6e;

  /* Couleurs de marque, réservées aux blocs qui leur sont consacrés. */
  --bleu-maisons-berdin: #243870;
  --vert-maisons-smart: #00936b;

  /* Rôles — c'est ce que les règles utilisent, jamais la palette directement. */
  --fond: var(--blanc);
  --fond-alt: var(--papier);
  --fond-inverse: var(--anthracite);
  --encre: var(--noir);
  --encre-secondaire: var(--gris-texte);
  --encre-inverse: var(--blanc);
  --encre-inverse-secondaire: var(--gris-perle);
  --filet: var(--gris-perle);
  --filet-inverse: rgb(255 255 255 / 15%);
  --attente: var(--gris-perle);
  --erreur: #a3000f;

  --titre: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle typographique de la charte, en clamp() mobile → desktop. */
  --t-page: clamp(2.125rem, 1.4rem + 3.1vw, 3.75rem);
  --t-section: clamp(1.625rem, 1.29rem + 1.43vw, 2.375rem);
  --t-intertitre: clamp(1.1875rem, 1.13rem + 0.24vw, 1.375rem);
  --t-courant: clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem);
  --t-mention: 0.75rem;
  --t-legende: 0.875rem;

  /* Pas d'arrondi au-delà de 4 px, pas d'ombre, pas de dégradé. */
  --arrondi: 4px;
  --arrondi-fin: 2px;

  --colonne: 75rem;
  --mesure: 68ch;
}

/* Thème sombre. Le monochrome s'inverse proprement : le logotype prend la
   couleur du texte, il n'y a pas de version couleur à corriger.
   Écart à la charte v1, à valider — voir CONTENU.md §8. */
:root[data-theme='sombre'] {
  --fond: #121212;
  --fond-alt: #1c1c1c;
  --fond-inverse: #000000;
  --encre: #f4f3ef;
  --encre-secondaire: #a8a8a8;
  --encre-inverse: #ffffff;
  --encre-inverse-secondaire: #d9d9d9;
  --filet: #3a3a3a;
  --filet-inverse: rgb(255 255 255 / 18%);
  --attente: #2a2a2a;
  --erreur: #ff8a80;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --fond: #121212;
    --fond-alt: #1c1c1c;
    --fond-inverse: #000000;
    --encre: #f4f3ef;
    --encre-secondaire: #a8a8a8;
    --encre-inverse: #ffffff;
    --encre-inverse-secondaire: #d9d9d9;
    --filet: #3a3a3a;
    --filet-inverse: rgb(255 255 255 / 18%);
    --attente: #2a2a2a;
    --erreur: #ff8a80;

    color-scheme: dark;
  }
}


/* 3. Base et typographie ================================================== */

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

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

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

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-courant);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--titre);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-page);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--t-section);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h3 {
  font-size: var(--t-intertitre);
  font-weight: 600;
  line-height: 1.3;
}

p,
ul,
ol,
dl,
figure {
  margin: 0;
}

a {
  color: inherit;
}

img,
svg {
  max-width: 100%;
}

/* Les ancres de section ne passent pas sous l'en-tête collant. */
:target {
  scroll-margin-top: 6rem;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

::selection {
  background-color: var(--encre);
  color: var(--fond);
}

.mention {
  font-family: var(--titre);
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.legende {
  font-size: var(--t-legende);
}

.secondaire {
  color: var(--encre-secondaire);
}

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

.evitement {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-200%);
  background-color: var(--encre);
  color: var(--fond);
  font-family: var(--titre);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: var(--arrondi);
  text-decoration: none;
}

.evitement:focus {
  transform: translateY(0);
}


/* 4. Composition ========================================================== */

.colonne {
  width: 100%;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .colonne {
    padding-inline: 2.5rem;
  }
}

.section {
  padding-block: 3.5rem;
}

@media (min-width: 48rem) {
  .section {
    padding-block: 5rem;
  }
}

.section--papier {
  background-color: var(--fond-alt);
}

.section--filet {
  border-top: 1px solid var(--filet);
}

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

@media (min-width: 64rem) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .duo--aside {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  /* Alternance des rangées : le visuel passe à gauche une section sur deux.
     C'est la grille qui l'y met, pas le HTML — le texte reste premier dans le
     document, l'ordre de lecture ne dépend pas de la parité de la rangée. */
  .duo--miroir > :first-child {
    grid-column: 2;
  }

  .duo--miroir > :last-child {
    grid-column: 1;
    grid-row: 1;
  }
}

/* La mesure de lecture, pour un bloc qui n'est pas de la prose enchaînée :
   un titre et son accroche se lisent à la même largeur que le texte. */
.mesure {
  max-width: var(--mesure);
}

.prose {
  max-width: var(--mesure);
}

.prose > * + * {
  margin-top: 1.25em;
}

.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5em;
}

.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background-color: currentColor;
}

.prose strong {
  font-weight: 600;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gris-moyen);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.lien-souligne {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--encre);
  border-radius: var(--arrondi);
  background-color: var(--encre);
  color: var(--fond);
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover {
  background-color: var(--anthracite);
  border-color: var(--anthracite);
}

.bouton--filet {
  background-color: transparent;
  color: var(--encre);
}

.bouton--filet:hover {
  background-color: var(--encre);
  color: var(--fond);
}

.bouton--clair {
  background-color: var(--encre-inverse);
  color: var(--fond-inverse);
  border-color: var(--encre-inverse);
}

.bouton--clair:hover {
  background-color: transparent;
  color: var(--encre-inverse);
}

.bouton--contour-clair {
  background-color: transparent;
  color: var(--encre-inverse);
  border-color: var(--encre-inverse);
}

.bouton--contour-clair:hover {
  background-color: var(--encre-inverse);
  color: var(--fond-inverse);
}

.bouton:disabled {
  background-color: var(--gris-moyen);
  border-color: var(--gris-moyen);
  cursor: progress;
}

.inverse {
  background-color: var(--fond-inverse);
  color: var(--encre-inverse);
}

.inverse .secondaire {
  color: var(--encre-inverse-secondaire);
}

/* Grille à filets : le fond gris perle transparaît entre les cellules. */
.grille-filets {
  display: grid;
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--filet);
  border: 1px solid var(--filet);
}

.grille-filets > * {
  background-color: var(--fond);
}

@media (min-width: 48rem) {
  .grille-filets--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grille-filets--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 5. En-tête et navigation ================================================ */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--fond);
  border-bottom: 1px solid var(--filet);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

@media (min-width: 48rem) {
  .entete__barre {
    padding-block: 1.25rem;
  }
}

/* Le logotype se dimensionne par la hauteur de sa capitale, comme la charte :
   le cadre mesure 111 unités pour un « B » de 72. La marge de 0,25 H incluse
   dans le fichier est neutralisée à gauche pour aligner le glyphe sur la
   colonne, et compensée à droite pour tenir la zone de réserve. */
.logo {
  display: inline-flex;
  margin-inline-start: calc(var(--capitale) * -0.25);
  padding-inline-end: calc(var(--capitale) * 0.75);
}

.logo svg {
  display: block;
  width: auto;
  height: calc(var(--capitale) * var(--ratio-logo));
}

@media (min-width: 48rem) {
  .logo {
    --capitale: var(--capitale-large);
  }
}

.entete__lien-logo {
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}

.nav {
  display: none;
}

@media (min-width: 48rem) {
  .nav {
    display: block;
  }
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 64rem) {
  .nav__liste {
    gap: 2.25rem;
  }
}

.nav__lien {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.nav__lien:hover,
.nav__lien[aria-current='page'] {
  border-bottom-color: currentColor;
}

.entete__outils {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bascule-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--arrondi);
  color: inherit;
  cursor: pointer;
}

.bascule-theme:hover {
  border-color: var(--encre);
}

.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .bouton-menu {
    display: none;
  }
}

.menu-mobile {
  border-top: 1px solid var(--filet);
  background-color: var(--fond);
}

@media (min-width: 48rem) {
  .menu-mobile {
    display: none;
  }
}

.menu-mobile__liste {
  list-style: none;
  margin: 0;
  padding-block: 0.5rem;
}

.menu-mobile__liste li {
  border-bottom: 1px solid var(--filet);
}

.menu-mobile__liste li:last-child {
  border-bottom: 0;
}

.menu-mobile__lien {
  display: block;
  padding-block: 1rem;
  font-family: var(--titre);
  font-weight: 600;
  text-decoration: none;
}


/* 6. Pied de page ========================================================= */

.pied {
  background-color: var(--fond-inverse);
  color: var(--encre-inverse);
  border-top: 1px solid var(--filet-inverse);
}

.pied__colonnes {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

@media (min-width: 48rem) {
  .pied__colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-block: 4rem;
  }
}

.pied__titre {
  font-family: var(--titre);
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-inverse-secondaire);
  margin: 0;
}

.pied address {
  font-style: normal;
  color: var(--encre-inverse-secondaire);
  margin-top: 1rem;
}

.pied__liens {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  color: var(--encre-inverse-secondaire);
}

.pied__liens li + li {
  margin-top: 0.5rem;
}

.pied a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gris-moyen);
}

.pied a:hover {
  color: var(--encre-inverse);
  text-decoration-color: currentColor;
}

.pied__bas {
  border-top: 1px solid var(--filet-inverse);
}

.pied__bas-contenu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.5rem;
  font-size: var(--t-legende);
  color: var(--encre-inverse-secondaire);
}

@media (min-width: 48rem) {
  .pied__bas-contenu {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* 7. Blocs éditoriaux ===================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--noir);
  color: var(--blanc);
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__fond .visuel {
  height: 100%;
  aspect-ratio: auto;
}

.hero__fond .visuel img {
  height: 100%;
  object-fit: cover;
}

/* Le repère de visuel manquant se range en haut à droite, hors du titre. */
.hero__fond .visuel__attente {
  inset: 1.5rem 1.5rem auto auto;
  align-items: flex-end;
  text-align: right;
}

/* Voile noir à 45 % : la zone qui porte le texte blanc est assombrie. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(0 0 0 / 45%);
}

.hero__texte {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(60vh, 30rem);
  padding-block: 5rem 4rem;
}

@media (min-width: 48rem) {
  .hero__texte {
    min-height: min(66vh, 38rem);
    padding-block: 8rem 6rem;
  }
}

.hero__contexte {
  max-width: 52ch;
  margin-top: 1.5rem;
  color: var(--gris-perle);
}

.hero__action {
  margin-top: 2rem;
}

.entete-page {
  border-bottom: 1px solid var(--filet);
  padding-block: 2.5rem;
}

@media (min-width: 48rem) {
  .entete-page {
    padding-block: 3.5rem;
  }
}

.entete-page h1 {
  max-width: 20ch;
  margin-top: 1.25rem;
}

.entete-page__chapo {
  max-width: 62ch;
  margin-top: 1.5rem;
  color: var(--encre-secondaire);
}

.fil {
  font-size: var(--t-legende);
  color: var(--encre-secondaire);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fil li {
  display: flex;
  gap: 0.5ch;
}

.fil a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fil [aria-current='page'] {
  color: var(--encre);
}

/* Sommaire d'ancres : la page des métiers est longue et ses sections sont
   liées depuis l'accueil. Trois liens en tête donnent la carte avant la
   lecture — ce sont des ancres, elles fonctionnent sans JavaScript. */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bloc-metier {
  position: relative;
  height: 100%;
  padding: 2rem 1.75rem 3.5rem;
}

.bloc-metier:hover {
  background-color: var(--fond-alt);
}

.bloc-metier a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.bloc-metier__fleche {
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  font-family: var(--titre);
}

/* Deux marques aujourd'hui, trois demain : la grille suit le nombre de blocs
   au lieu de figer un nombre de colonnes. */
.grille-marques {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.bloc-marque {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filet);
  background-color: var(--fond);
}

.bloc-marque__enseigne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 2rem 1.75rem;
  border-bottom: 1px solid var(--filet);
}

/* Seule zone du site où une couleur de marque est admise. */
.bloc-marque__nom {
  font-family: var(--titre);
  font-size: var(--t-intertitre);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--couleur-marque, var(--encre));
  margin: 0;
}

.bloc-marque__corps {
  flex: 1;
  padding: 1.75rem;
}

.chiffres {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
}

@media (min-width: 40rem) {
  .chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chiffres dt {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.chiffres dd {
  max-width: 26ch;
  margin: 0.5rem 0 0;
  color: var(--encre-secondaire);
}

.engagements {
  counter-reset: engagement;
}

.engagements > li {
  padding: 1.75rem;
}

/* Le numéro de l'engagement : deux chiffres, au-dessus du titre. Il est
   décoratif — l'ordre est déjà porté par la liste ordonnée et par la base. */
.engagements > li::before {
  counter-increment: engagement;
  content: counter(engagement, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--titre);
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--encre-secondaire);
}

/* Les offres d'emploi, sur la page Carrières.

   Des filets plutôt que des cartes : la liste compte rarement plus de trois
   entrées, et trois cartes isolées dans une grille font une page qui a l'air
   vide. La table peut d'ailleurs rester vide — la page dit alors sa phrase, et
   ces règles ne servent pas. */
.offres {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--filet);
  max-width: 52rem;
}

.offre {
  padding: 2rem 0;
  border-bottom: 1px solid var(--filet);
}

.tableau-comparatif {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
}

.tableau-comparatif th,
.tableau-comparatif td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.25rem 1rem 0;
  border-bottom: 1px solid var(--filet);
}

.tableau-comparatif thead th {
  font-family: var(--titre);
  font-size: var(--t-mention);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-secondaire);
  border-bottom-color: var(--encre);
}

.tableau-comparatif tbody th {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.9375rem;
  width: 12rem;
}

.tableau-comparatif td {
  color: var(--encre-secondaire);
}

.defilable {
  overflow-x: auto;
}


/* Identité de l'éditeur, sur les mentions légales : une suite de couples
   intitulé / valeur, et non un tableau — chaque ligne se lit seule, et une
   valeur manquante y tient son repère sans déformer la colonne. */
.identite {
  margin-top: 1.5rem;
}

.identite > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--filet);
}

@media (min-width: 48rem) {
  .identite > div {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.identite dt {
  font-family: var(--titre);
  font-size: var(--t-legende);
  font-weight: 600;
  color: var(--encre-secondaire);
}

.identite dd {
  margin: 0;
}

/* Une adresse postale se lit en romain : l'italique par défaut du navigateur
   n'ajoute rien, et les pages légales en publient trois. */
.identite address,
.prose address {
  font-style: normal;
}

/* La liste des pages du site, sur la 404 : des liens de la taille d'un
   intertitre, parce qu'ils sont la seule chose à faire sur cette page. */
.plan-liens {
  list-style: none;
  max-width: var(--mesure);
  margin: 2rem 0 0;
  padding: 0;
}

.plan-liens li {
  border-top: 1px solid var(--filet);
}

.plan-liens li:last-child {
  border-bottom: 1px solid var(--filet);
}

.plan-liens a {
  display: block;
  padding-block: 0.85rem;
  font-family: var(--titre);
  font-size: var(--t-intertitre);
  font-weight: 600;
  text-decoration: none;
}

.plan-liens a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* 8. Visuels et repères =================================================== */

.visuel {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  background-color: var(--attente);
}

.visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visuel__attente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  margin: 0;
  text-align: center;
  color: var(--anthracite);
}

:root[data-theme='sombre'] .visuel__attente {
  color: var(--encre);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) .visuel__attente {
    color: var(--encre);
  }
}

.visuel__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: var(--t-legende);
  word-break: break-all;
}

.visuel__dimensions {
  font-size: var(--t-legende);
  color: #5a5a5a;
}

:root[data-theme='sombre'] .visuel__dimensions {
  color: var(--encre-secondaire);
}

/* Le repère d'information manquante. Visible à dessein : un placeholder qu'on
   voit vaut mieux qu'un chiffre plausible. */
.a-completer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5ch;
  margin-top: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px dashed var(--gris-moyen);
  border-radius: var(--arrondi-fin);
  background-color: var(--fond-alt);
  color: var(--encre);
  font-size: var(--t-legende);
  line-height: 1.4;
}

.a-completer .mention {
  color: var(--encre-secondaire);
}

.a-completer--compact {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-secondaire);
}

.inverse .a-completer,
.pied .a-completer {
  background-color: transparent;
  color: var(--encre-inverse-secondaire);
}

.inverse .a-completer .mention,
.pied .a-completer .mention {
  color: var(--encre-inverse-secondaire);
}


/* Mention portée par une image de banque : elle dit ce que la photo n'est pas.
   Sans elle, un lotissement photographié ailleurs passerait pour une opération
   du groupe. */
.visuel__mention {
  margin: 0;
  padding: 0.4rem 1.5rem 0;
  font-size: var(--t-mention);
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-secondaire);
}


/* 9. Réalisations et facettes ============================================= */

.facettes {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--filet);
}

.facettes fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.facettes legend {
  padding: 0;
  margin-bottom: 0.75rem;
  color: var(--encre-secondaire);
}

.facettes__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque facette est un lien : elle a son adresse et son HTML, rendus par le
   serveur. Un filtre en JavaScript seul rendrait la liste invisible des
   moteurs de recherche. */
.facette {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--filet);
  border-radius: var(--arrondi);
  text-decoration: none;
}

.facette:hover {
  border-color: var(--encre);
}

.facette[aria-current='true'] {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--fond);
}

.grille-realisations {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 48rem) {
  .grille-realisations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grille-realisations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fiche {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--filet);
}

.fiche__corps {
  flex: 1;
  padding: 1.5rem;
}

.fiche__donnees {
  margin-top: 1.25rem;
}

.fiche__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-top: 1px solid var(--filet);
  font-size: var(--t-legende);
}

.fiche__ligne dt {
  color: var(--encre-secondaire);
}

.fiche__ligne dd {
  margin: 0;
  font-family: var(--titre);
  font-weight: 600;
}

/* Le titre porte le seul lien de la carte : deux liens vers la même adresse
   feraient deux arrêts au clavier pour un seul but. */
.fiche__titre {
  margin-top: 0.5rem;
}

.fiche__titre a {
  text-decoration: none;
}

.fiche__titre a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* « Commune à confirmer » tient la même ligne qu'une commune connue : la carte
   ne changera pas de hauteur quand la donnée arrivera. */
.fiche__lieu {
  margin-top: 0.35rem;
  font-size: var(--t-legende);
  color: var(--encre-secondaire);
}

.fiche__resume {
  margin-top: 0.75rem;
}

/* La sortie du filtrage s'aligne sur les facettes, pas sur leurs légendes. */
.facettes__reprise {
  align-self: flex-end;
  margin: 0;
}

/* Un filtre sans résultat le dit — il ne rend pas une grille vide. */
.aucun-resultat {
  margin-top: 2.5rem;
  color: var(--encre-secondaire);
}


/* 10. Formulaires ========================================================= */

.formulaire {
  max-width: 46rem;
}

/* Avis en tête de formulaire : la boîte de réception n'est pas renseignée. Il
   n'a pas la couleur d'une erreur — rien n'est cassé pour l'internaute, mais
   il doit savoir que personne ne sera prévenu automatiquement. */
.formulaire__avis {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background-color: var(--fond-alt);
  border-left: 3px solid var(--encre);
  font-size: var(--t-legende);
}

.formulaire__avis a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.formulaire__champs {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .formulaire__champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .champ--large {
    grid-column: 1 / -1;
  }
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.champ label,
.formulaire label {
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
}

.champ__note {
  font-family: var(--texte);
  font-weight: 400;
  color: var(--encre-secondaire);
}

.formulaire input[type='text'],
.formulaire input[type='email'],
.formulaire input[type='tel'],
.formulaire select,
.formulaire textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background-color: var(--fond);
  border: 1px solid var(--gris-moyen);
  border-radius: var(--arrondi-fin);
}

.formulaire input[type='file'] {
  font: inherit;
  padding: 0.6rem 0;
}

.formulaire textarea {
  resize: vertical;
  min-height: 9rem;
}

.formulaire :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 1px;
  border-color: var(--encre);
}

.formulaire [aria-invalid='true'] {
  border-color: var(--erreur);
  border-width: 2px;
}

.erreur {
  font-size: var(--t-legende);
  color: var(--erreur);
}

.erreur:empty {
  display: none;
}

.resume-erreurs {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--erreur);
  border-radius: var(--arrondi-fin);
  color: var(--erreur);
}

.resume-erreurs ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

.resume-erreurs a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consentement {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

.consentement input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.35rem;
  accent-color: var(--encre);
}

.consentement label {
  font-family: var(--texte);
  font-weight: 400;
  font-size: var(--t-legende);
  line-height: 1.5;
}

.consentement a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Champ leurre : invisible pour un internaute, rempli par les robots. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.formulaire__repli {
  font-size: var(--t-legende);
  color: var(--encre-secondaire);
}

.formulaire__repli a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* 11. Carte des implantations ============================================= */

.carte {
  margin: 0;
}

.carte__dessin {
  width: 100%;
  max-width: 26rem;
  height: auto;
}

.carte__departement {
  fill: var(--gris-perle);
  stroke: var(--fond);
  stroke-width: 2;
}

.carte__departement--siege {
  fill: var(--encre);
}

.carte__etiquette {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  fill: var(--anthracite);
}

:root[data-theme='sombre'] .carte__etiquette {
  fill: var(--noir);
}

.carte__etiquette--siege {
  fill: var(--fond);
}

.carte__point {
  fill: var(--fond);
  stroke: var(--encre);
  stroke-width: 3;
}

.carte__legende {
  margin-top: 1rem;
  font-size: var(--t-legende);
  color: var(--encre-secondaire);
}

.carte__legende a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* 12. Impression ========================================================== */

@media print {
  .entete,
  .pied,
  .bandeau,
  .facettes,
  .evitement,
  .bascule-theme,
  .bouton-menu {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .visuel {
    display: none;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }
}