/* K-Stone — direction Monumental
   Thème clair par défaut, thème sombre en option ([data-theme="dark"]).
   Toutes les couleurs passent par des variables : une seule liste à changer.
   Les zones posées sur une photo (héros, cartes projets, bandeau contact)
   gardent un texte clair dans les deux thèmes. */
:root {
  --bg: #f6f4ef;
  --surface: #fffdf9;
  --surface-2: #ece8df;
  --surface-hover: #f6f2e9;
  --text: #23241f;
  --text-strong: #0e0f0c;
  --muted: #5c5b53;
  --line: rgba(14, 15, 12, 0.14);
  /* Or foncé pour tout ce qui est lu (liens, intertitres, libellés) : il passe
     le seuil de contraste sur fond clair. L'or clair reste pour le décor et
     pour les textes posés sur une photo sombre. */
  --accent: #7a5c18;
  --accent-soft: #c4a35a;
  --btn-bg: #0e0f0c;
  --btn-text: #fffdf9;
  --btn-hover: #2b2d26;
  --btn-border: #0e0f0c;
  --ghost-text: #0e0f0c;
  --ghost-border: rgba(14, 15, 12, 0.28);
  --ghost-hover: rgba(14, 15, 12, 0.06);
  --field-bg: rgba(14, 15, 12, 0.03);
  --field-focus-bg: rgba(14, 15, 12, 0.05);
  --placeholder: rgba(35, 36, 31, 0.45);
  --erreur: #a2422c;
  /* Texte posé sur une photo : identique dans les deux thèmes. */
  --on-media: #ffffff;
  --on-media-soft: rgba(255, 255, 255, 0.82);
  --on-media-faint: rgba(255, 255, 255, 0.6);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0c0a;
  --surface: #141612;
  --surface-2: #141612;
  --surface-hover: #1c1e19;
  --text: #e9e5dc;
  --text-strong: #ffffff;
  --muted: #9a968c;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #c4a35a;
  --accent-soft: #c4a35a;
  --btn-bg: #c4a35a;
  --btn-text: #0b0c0a;
  --btn-hover: #d4b56a;
  --btn-border: #c4a35a;
  --ghost-text: #ffffff;
  --ghost-border: rgba(255, 255, 255, 0.35);
  --ghost-hover: rgba(255, 255, 255, 0.06);
  --field-bg: rgba(255, 255, 255, 0.03);
  --field-focus-bg: rgba(255, 255, 255, 0.06);
  --placeholder: rgba(255, 255, 255, 0.32);
  --erreur: #e0a08f;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* <picture> enveloppe l'image quand plusieurs formats sont proposes : sans ca il
   reste en ligne et decale la mise en page. */
picture { display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Arabe : voir le bloc « droite à gauche » en fin de fichier. */

/* —— En-tête —— */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
  --header-text: var(--text-strong);
  --header-muted: var(--muted);
  --header-border: var(--line);
  --header-accent: var(--accent);
}
/* Accueil : l'en-tête est posé sur la photo du héros. */
body.avec-heros .site-header {
  --header-text: var(--on-media);
  --header-muted: var(--on-media-soft);
  --header-border: rgba(255, 255, 255, 0.3);
  --header-accent: var(--accent-soft);
}
.logo { display: flex; align-items: center; gap: 0.85rem; }
/* L'arche de K-Stone. Les pierres d'appui sont dessinées en `currentColor`, donc
   il suffit de donner une couleur de texte au conteneur : l'arche suit le fond
   clair, le fond sombre et la photo du bandeau d'accueil sans être redessinée.
   Seule la clé de voûte garde son or, en dur dans le SVG. */
.logo-mark {
  width: 42px;
  height: 42px;
  display: block;
  flex-shrink: 0;
  color: var(--header-text, var(--text-strong));
}
.logo-mark .marque-ks { width: 100%; height: 100%; display: block; }
.logo-mark-petit { width: 30px; height: 30px; color: var(--text-strong); }
.logo-word { display: flex; flex-direction: column; line-height: 1.05; }
.logo-word strong {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--header-text);
  font-weight: 700;
}
.logo-word span {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--header-accent);
  font-weight: 600;
  text-transform: uppercase;
}
.nav {
  display: flex;
  gap: 1.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--header-muted);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--header-text); }
.outils-header { display: flex; align-items: center; gap: 0.9rem; }

/* Sélecteur de langue */
.langues {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--header-muted);
}
.langues a, .langues span {
  padding: 0.3rem 0.45rem;
  text-transform: uppercase;
}
.langues a:hover { color: var(--header-text); }
.langues [aria-current="true"] { color: var(--header-accent); }
.langues .sep { opacity: 0.4; padding: 0; }

/* Bouton thème et burger */
.icone-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--header-border);
  color: var(--header-text);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.icone-btn:hover { background: var(--ghost-hover); border-color: var(--header-text); }
.icone-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.icone-lune { display: none; }
[data-theme="dark"] .icone-soleil { display: none; }
[data-theme="dark"] .icone-lune { display: block; }
.burger { display: none; }
.burger .barres { display: grid; gap: 4px; }
.burger .barres i {
  display: block;
  width: 18px;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger[aria-expanded="true"] .barres i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] .barres i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .barres i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* Panneau du menu mobile.
   Il vit hors de l'en-tête : les couleurs `--header-*` y sont redéclarées,
   sinon les éléments partagés avec l'en-tête (langues) perdent leur teinte. */
.panneau {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  color: var(--text);
  --header-text: var(--text-strong);
  --header-muted: var(--muted);
  --header-border: var(--line);
  --header-accent: var(--accent);
  display: flex;
  flex-direction: column;
  padding: 5.6rem 1.5rem 2.5rem;
  overflow-y: auto;
}
.panneau[hidden] { display: none; }
.panneau nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.panneau nav a {
  padding: 1.15rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.7rem;
  color: var(--text-strong);
}
.panneau nav a[aria-current="page"] { color: var(--accent); }
.panneau .panneau-bas {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.panneau .langues { color: var(--muted); font-size: 0.85rem; }
.panneau .langues a:hover { color: var(--text-strong); }
.panneau-contact { font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
.panneau-contact a { color: var(--accent); }
body.menu-ouvert { overflow: hidden; }
/* Menu ouvert : l'en-tête passe au-dessus du panneau pour garder le logo et la
   croix de fermeture accessibles, et reprend les couleurs du thème. */
body.menu-ouvert .site-header {
  position: fixed;
  top: 0;
  z-index: 50;
  --header-text: var(--text-strong);
  --header-muted: var(--muted);
  --header-border: var(--line);
  --header-accent: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 1.45rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 0.88rem;
  font-weight: 650;
  border: 1px solid var(--btn-border);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ghost-text);
  border-color: var(--ghost-border);
}
.btn-ghost:hover { border-color: var(--ghost-text); background: var(--ghost-hover); }

/* WhatsApp. Le vert de la marque est garde : c'est ce qui fait reconnaitre le
   canal en un coup d'oeil. Il est volontairement le seul vert du site.
   #0f7568 et non le vert clair habituel : avec du texte blanc il donne 5,58:1,
   au-dessus du minimum de 4,5:1. Le vert d'origine tombait a 4,14:1. */
.btn-whatsapp,
a.btn-whatsapp {
  background: #0f7568;
  color: #fff;
  border-color: #0f7568;
}
.btn-whatsapp:hover,
a.btn-whatsapp:hover { background: #0b5f55; border-color: #0b5f55; color: #fff; }
.hero a.btn-whatsapp, .cta a.btn-whatsapp, .contact-accueil a.btn-whatsapp {
  background: #0f7568;
  color: #fff;
  border-color: #0f7568;
}
.contact-accueil-actions { margin: 1.4rem 0 0; }

/* Bouton flottant, uniquement sur telephone : c'est la que WhatsApp est
   installe, et sur grand ecran un rond qui suit le defilement fait pauvre. */
.whatsapp-flottant { display: none; }
@media (max-width: 860px) {
  .whatsapp-flottant {
    position: fixed;
    inset-inline-end: 1rem;
    inset-block-end: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    background: #0f7568;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 650;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }
  body.menu-ouvert .whatsapp-flottant { display: none; }
}
/* Boutons posés sur une photo : l'ocre ressort mieux qu'un noir sur une image
   sombre, dans les deux thèmes. */
.hero .btn, .cta .btn {
  background: var(--accent-soft);
  color: #0b0c0a;
  border-color: var(--accent-soft);
}
.hero .btn:hover, .cta .btn:hover { background: #d4b56a; border-color: #d4b56a; }
.hero .btn-ghost, .cta .btn-ghost {
  background: transparent;
  color: var(--on-media);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero .btn-ghost:hover, .cta .btn-ghost:hover {
  border-color: var(--on-media);
  background: rgba(255, 255, 255, 0.08);
}
button.btn { cursor: pointer; font: inherit; }
button.btn[disabled] { opacity: 0.55; cursor: default; }

/* —— Héros —— */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 4.5rem;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: ken 18s var(--ease) both;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,10,0.45) 0%, rgba(11,12,10,0.35) 40%, rgba(11,12,10,0.88) 100%),
    linear-gradient(90deg, rgba(11,12,10,0.55) 0%, transparent 55%);
}
[dir="rtl"] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(11,12,10,0.45) 0%, rgba(11,12,10,0.35) 40%, rgba(11,12,10,0.88) 100%),
    linear-gradient(270deg, rgba(11,12,10,0.55) 0%, transparent 55%);
}
@keyframes ken {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 2rem;
  align-items: end;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 1rem;
  opacity: 0;
  animation: rise 0.9s 0.1s var(--ease) both;
}
.hero .eyebrow { color: var(--accent-soft); }
.hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--on-media);
  max-width: 13ch;
  margin-bottom: 1.35rem;
  opacity: 0;
  animation: rise 0.9s 0.2s var(--ease) both;
}
[dir="rtl"] .hero h1 { max-width: 18ch; line-height: 1.25; }
.hero h1 em { font-style: italic; color: var(--accent-soft); }
.hero-lead {
  max-width: 36rem;
  font-size: 1.08rem;
  color: var(--on-media-soft);
  margin-bottom: 2rem;
  opacity: 0;
  animation: rise 0.9s 0.32s var(--ease) both;
}
.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.9s 0.42s var(--ease) both;
}
.hero-meta {
  text-align: end;
  font-size: 0.82rem;
  color: var(--on-media-faint);
  opacity: 0;
  animation: rise 0.9s 0.5s var(--ease) both;
}
.hero-meta strong {
  display: block;
  color: var(--on-media);
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* —— Bandeau de chiffres —— */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}
.strip article { padding: 2rem 1.5rem; border-inline-end: 1px solid var(--line); }
.strip article:last-child { border-inline-end: 0; }
.strip strong {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}
.strip span { font-size: 0.82rem; color: var(--muted); }
.strip strong { font-size: clamp(1.5rem, 2.2vw, 2rem); }

/* —— Donneurs d'ordre, preuve, engagements —— */
.confiance { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.clients {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}
.clients li {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.6rem 1.05rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-strong);
}
.preuve-forte {
  margin-top: 2.25rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--accent-soft);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--text-strong);
}
.engagements { margin-top: 2.5rem; }
.engagements h3,
.secteurs h3 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 1rem;
}
.engagements ul,
.secteurs ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 2rem;
  list-style: none;
}
.engagements li,
.secteurs li {
  padding-inline-start: 1.15rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--text);
}
.engagements li::before,
.secteurs li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.secteurs { margin-top: 2.75rem; }

/* —— Chantier : contrainte, réponse, résultat —— */
.cas-chantier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3rem;
}
.cas-chantier article { background: var(--surface); padding: 2rem 1.9rem; }
.cas-chantier h2 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 0.9rem;
}
.cas-chantier p { font-size: 0.95rem; color: var(--text); line-height: 1.7; }

/* Ce que le visiteur obtient s'il écrit. */
.promesses { list-style: none; margin: 1.5rem 0 0; display: grid; gap: 0.6rem; }
.promesses li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
}
.promesses li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 9px;
  height: 5px;
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.promesses.sur-photo li { color: var(--on-media-soft); }
.promesses.sur-photo li::before { border-color: var(--accent-soft); }

/* —— Sections —— */
section { padding: 5.5rem 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.75rem;
}
.section-head h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 400;
  color: var(--text-strong);
  max-width: 14ch;
  line-height: 1.08;
}
[dir="rtl"] .section-head h2 { max-width: 20ch; line-height: 1.35; }
.section-head p { max-width: 28rem; color: var(--muted); font-size: 1rem; }

.metiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.metier { background: var(--surface); padding: 2.4rem 2rem; transition: background 0.3s; }
.metier:hover { background: var(--surface-hover); }
.metier .num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.85rem;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.metier h3 {
  font-size: 1.2rem;
  color: var(--text-strong);
  margin-bottom: 0.7rem;
  font-weight: 600;
}
.metier h3 a { color: var(--text-strong); }
.metier h3 a:hover { color: var(--accent); }
.metier p { color: var(--muted); font-size: 0.95rem; }

/* —— Projets en vitrine —— */
.projets { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.15rem; }
.projet {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #111;
  isolation: isolate;
}
.projet.tall { grid-row: span 2; min-height: 620px; }
/* Même piège que `.cta-bg` : sans ça, `picture` prend la hauteur de la photo
   et le texte tombe dans le fond noir sous l’image. */
.projet picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.projet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transition: transform 0.8s var(--ease);
}
.projet:hover img { transform: scale(1.05); }
.projet > a {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
}
.projet-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 1.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
.projet-caption .eyebrow { color: var(--accent-soft); }
.projet-caption h3 {
  font-size: 1.25rem;
  color: var(--on-media);
  margin: 0.3rem 0 0.2rem;
  font-weight: 600;
}
.projet-caption p { font-size: 0.85rem; color: var(--on-media-faint); }

/* —— Pages intérieures —— */
.page-hero {
  padding: 8.5rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at top left, rgba(196,163,90,0.16), transparent 55%),
    var(--bg);
}
[dir="rtl"] .page-hero {
  background:
    radial-gradient(ellipse at top right, rgba(196,163,90,0.16), transparent 55%),
    var(--bg);
}
.page-hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--text-strong);
  margin-top: 0.6rem;
}
.page-hero .lead { max-width: 38rem; color: var(--muted); margin-top: 1rem; font-size: 1.05rem; }
.grille-refs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  padding: 3rem 0 5rem;
}
.carte-ref {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s;
}
.carte-ref:hover { border-color: rgba(196,163,90,0.55); }
.carte-ref .ph { aspect-ratio: 16/10; overflow: hidden; }
.carte-ref .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.carte-ref:hover .ph img { transform: scale(1.04); }
.carte-ref .pb { padding: 1.4rem 1.5rem 1.7rem; }
.carte-ref .loc {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}
.carte-ref h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--text-strong);
  margin: 0.4rem 0 0.5rem;
}
.carte-ref p { color: var(--muted); font-size: 0.92rem; }
.carte-ref a { display: block; color: inherit; }
.carte-ref .lire {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}

/* —— Page chantier —— */
.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.fil a { color: var(--muted); }
.fil a:hover { color: var(--text-strong); }
.fil span[aria-current] { color: var(--accent); }
.projet-visuel { margin: 3rem 0 0; border: 1px solid var(--line); background: var(--surface); }
.galerie-chantier + .projet-video { margin-top: 1rem; }
.projet-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #111;
  display: block;
}
figure.projet-visuel img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.projet-visuel figcaption,
.galerie-legende {
  padding: 0.9rem 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.galerie-legende {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.galerie-compteur { color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.galerie-cadre {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #111;
  overflow: hidden;
}
.galerie-slide {
  position: absolute;
  inset: 0;
}
.galerie-slide[hidden] { display: none; }
.galerie-slide picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.galerie-slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}
.galerie-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #0b0c0a;
  color: #f6f4ef;
  border: 1px solid rgba(246, 244, 239, 0.35);
  cursor: pointer;
}
.galerie-nav:hover { background: #1a1b18; }
.galerie-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.galerie-prec { inset-inline-start: 0.8rem; }
.galerie-suiv { inset-inline-end: 0.8rem; }
[dir="rtl"] .galerie-nav svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .galerie-nav { transition: none; }
}

/* Colonne de lecture. Elle reste à 40rem pour le texte courant : au-delà, l'œil
   perd sa ligne. Les sections encadrées (`.bloc-texte`) débordent volontairement
   cette largeur pour poser leur intertitre dans une colonne à part. */
.texte-long { max-width: 58rem; padding: 3rem 0 5rem; color: var(--muted); font-size: 1.08rem; }
.texte-long > p,
.texte-long > ul,
.texte-long > blockquote { max-width: 40rem; }
.texte-long p { margin-bottom: 1.1rem; }
.texte-long strong { color: var(--text-strong); font-weight: 600; }
.texte-long h2 {
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 2.6rem 0 0.9rem;
}
.texte-long a { color: var(--accent); }
/* Une section de page de texte : intertitre à gauche, contenu à droite.
   Avant, l'intertitre restait dans le fil du texte, à peine plus gros que le
   paragraphe : une page d'activité se lisait comme un seul bloc compact, avec la
   moitié droite de l'écran vide. Placé au-dessus de `.texte-long h2`, ce style
   serait perdu : à spécificité égale, la dernière règle gagne. */
.bloc-texte {
  display: grid;
  grid-template-columns: 14rem minmax(0, 40rem);
  gap: 0 3rem;
  margin-top: 3rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.bloc-texte h2 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.bloc-texte .bloc-corps > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .bloc-texte {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
  }
  .bloc-texte h2 { font-size: 1.5rem; }
}
.liste-points { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.liste-points li { position: relative; padding-inline-start: 1.4rem; margin-bottom: 0.6rem; }
.liste-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}

/* —— Fiche chiffrée d'un chantier —— */
.fiche-chantier {
  margin-top: 3rem;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.8rem 1.6rem 1.2rem;
}
.fiche-chantier h2 {
  color: var(--text-strong);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.1rem;
}
.fiche-chantier table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.fiche-chantier th,
.fiche-chantier td {
  text-align: start;
  vertical-align: top;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.fiche-chantier tr:first-child th,
.fiche-chantier tr:first-child td { border-top: 0; }
.fiche-chantier th {
  color: var(--muted);
  font-weight: 500;
  width: 34%;
  padding-inline-end: 1.5rem;
}
.fiche-chantier td { color: var(--text-strong); }
@media (max-width: 640px) {
  .fiche-chantier th { width: 42%; }
}

/* —— Formulaire de contact —— */
.bloc-formulaire {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 2.4rem 2rem 2rem;
  margin-bottom: 5rem;
  max-width: 52rem;
}
.bloc-formulaire h2 {
  color: var(--text-strong);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.form-intro { color: var(--muted); margin-bottom: 2rem; font-size: 1rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.champ { margin: 0 0 1.2rem; }
.champ-large { grid-column: 1 / -1; }
.champ label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.champ label span { color: var(--accent); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 2px;
  transition: border-color 0.25s, background 0.25s;
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--field-focus-bg);
}
.champ input::placeholder,
.champ textarea::placeholder { color: var(--placeholder); }
/* Le rouge n'apparaît qu'après une saisie fautive, pas dès l'ouverture. */
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: var(--erreur); }
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* La flèche du menu déroulant est dessinée par deux dégradés : en arabe, il faut
   inverser leurs positions pour que le chevron reste un chevron. */
[dir="rtl"] .champ select {
  background-position: 12px center, 18px center;
}
/* Champ piège : invisible pour un humain, rempli par les robots. */
.piege {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-erreur { color: var(--erreur); font-size: 0.92rem; margin: 0 0 1rem; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin: 1.6rem 0 0;
}
.form-note { color: var(--muted); font-size: 0.9rem; }
.form-note a { color: var(--accent); }
.form-confidentialite {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .champs { grid-template-columns: 1fr; }
  .bloc-formulaire { padding: 1.8rem 1.3rem 1.5rem; }
}

/* —— Page contact : le formulaire d'abord —— */
.page-hero-court { padding-bottom: 2rem; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 2.5rem;
  padding: 2.5rem 0 1rem;
  align-items: start;
}
.contact-grid .bloc-formulaire { margin: 0; max-width: none; }
.carte-infos {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 1.8rem 1.6rem;
  position: sticky;
  top: 1.5rem;
}
.carte-infos h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-strong);
  margin-bottom: 0.4rem;
}
.carte-infos-note { color: var(--muted); font-size: 0.92rem; }
.carte-infos-actions {
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
}
.carte-infos-actions .btn { width: 100%; font-size: 0.82rem; padding: 0.8rem 1rem; }
.contact-grid + .texte-long { padding-top: 1.5rem; }

/* Coordonnées : accueil (sur photo) et page contact (dans la carte) */
.contact-liste {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}
.contact-liste strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--text-strong);
  margin-bottom: 0.2rem;
}
.contact-liste a { color: var(--accent); }
.contact-liste.sur-photo {
  color: var(--on-media-soft);
  border-top-color: rgba(255, 255, 255, 0.22);
  margin-top: 2rem;
  padding-top: 2rem;
}
.contact-liste.sur-photo strong { color: var(--on-media); }
.contact-liste.sur-photo a { color: var(--accent-soft); }

/* —— Accueil : bandeau contact avec le formulaire —— */
.contact-accueil { position: relative; padding: 5.5rem 0; overflow: hidden; }
.contact-accueil .cta-bg { position: absolute; inset: 0; z-index: 0; }
.contact-accueil .wrap { position: relative; z-index: 1; }
.contact-accueil-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: start;
}
.contact-accueil-texte { color: var(--on-media-soft); }
.contact-accueil-texte h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--on-media);
  margin-bottom: 0.9rem;
}
[dir="rtl"] .contact-accueil-texte h2 { line-height: 1.35; }
.contact-accueil .bloc-formulaire {
  margin: 0;
  max-width: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
  .contact-grid, .contact-accueil-grille { grid-template-columns: 1fr; }
  .carte-infos { position: static; }
}

/* —— Questions fréquentes ——
   Un <details> par question : le dépliant fonctionne sans JavaScript, et la
   réponse reste dans la page même repliée, donc lisible par les moteurs. */
.faq-liste {
  max-width: 62rem;
  margin: 3.5rem auto 0;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  flex: 1;
}
[dir="rtl"] .faq-item summary h2 { line-height: 1.5; }
/* Le signe se transforme en moins à l'ouverture : on voit d'un coup d'oeil ce
   qui est déplié. */
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  flex: none;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover h2 { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-reponse { padding: 0 0 1.6rem; max-width: 54rem; }
.faq-reponse p { color: var(--text-soft); margin: 0; }
.faq-liste + .texte-long { padding-top: 2.5rem; }

/* —— Méthode —— */
.methode { background: var(--surface-2); border-block: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.step { border-top: 2px solid var(--accent-soft); padding-top: 1.25rem; }
.step strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
  font-weight: 650;
}
.step h3 { font-size: 1.1rem; color: var(--text-strong); font-weight: 600; margin-bottom: 0.5rem; }
.step p { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

/* —— Bandeau de contact (sur photo) —— */
.cta { position: relative; padding: 6rem 1.5rem; text-align: center; overflow: hidden; }
/* Fond photo des bandeaux d'appel. La photo est une vraie image et non un fond
   CSS : un fond CSS se telecharge des que l'element existe, meme tout en bas de
   page, alors qu'une image peut attendre qu'on approche. Le degrade reste en CSS,
   par dessus, pour garder le texte lisible. */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* L'image est enveloppée dans un `picture` (un format par navigateur). Sans
   cette règle, c'est le `picture` qui décide de la hauteur, d'après les
   proportions de la photo : une panoramique ne couvrait alors que le haut du
   bandeau et le bas retombait sur un aplat gris. */
.cta-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Le voile qui garde le texte lisible par-dessus la photo. Il était si dense
   (0,88) que la photo ne se voyait plus : le bandeau ressemblait à un aplat
   noir. Mesuré le 31/08/2026 sur la panoramique de SP1, 0,80 à 0,58 laisse
   passer la photo tout en gardant le titre blanc et la ligne d'adresse nets. */
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(11,12,10,0.80), rgba(11,12,10,0.58));
}
/* Sur l'accueil, le formulaire pose des champs clairs sur cette photo : le voile
   y reste un cran plus dense pour que les bords des champs se détachent. */
.contact-accueil .cta-bg::after {
  background: linear-gradient(120deg, rgba(11,12,10,0.86), rgba(11,12,10,0.68));
}
/* Le fond photo reste en absolu : il ne doit pas être remis dans le flux. */
.cta > *:not(.cta-bg) { position: relative; z-index: 1; }
.cta h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--on-media);
  margin: 0.5rem auto 1rem;
  max-width: 16ch;
}
[dir="rtl"] .cta h2 { max-width: 22ch; }
.cta p { color: var(--on-media-soft); margin: 0 auto 1.75rem; max-width: 32rem; }
.cta .eyebrow { color: var(--accent-soft); }

/* —— Pied de page —— */
/* —— Pages d'intervention par ville —— */
.zones-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  padding: 2.5rem 0 5rem;
}
.carte-zone {
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s, background 0.3s;
}
.carte-zone:hover { border-color: rgba(196, 163, 90, 0.55); background: var(--surface-hover); }
.carte-zone a { display: block; padding: 1.9rem; color: inherit; text-decoration: none; }
.carte-zone .loc {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 0.7rem;
}
.carte-zone h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-strong);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.carte-zone p { font-size: 0.92rem; color: var(--muted); }
.carte-zone .lire {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* Liens de pied de page : c'est aussi ce qui relie les pages entre elles. */
.pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding-top: 3rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.pied-liens a { color: var(--muted); }
.pied-liens a:hover { color: var(--accent); }
/* Revenir sur son choix de mesure d'audience : c'est un bouton, pas un lien,
   mais il doit se lire comme les autres entrées du pied de page. */
.lien-consentement {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.lien-consentement:hover { color: var(--accent); }

/* Bandeau de consentement. Google Analytics dépose des traceurs : rien ne part
   avant la réponse. Masqué par défaut, il n'apparaît qu'en l'absence de choix
   enregistré, ce qui évite qu'il clignote à chaque page pour ceux qui ont
   déjà répondu. */
.consentement {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.16);
}
.consentement[hidden] { display: none; }
.consentement-texte { max-width: 46rem; }
.consentement-titre {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.consentement-texte p { font-size: 0.88rem; color: var(--text); line-height: 1.7; }
.consentement-texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.consentement-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consentement-actions .btn { padding: 0.7rem 1.4rem; font-size: 0.82rem; }
/* Le bouton WhatsApp flottant se poserait par-dessus le bandeau sur téléphone. */
body:has(.consentement:not([hidden])) .whatsapp-flottant { display: none; }
@media (max-width: 640px) {
  .consentement { gap: 1rem; }
  .consentement-actions { width: 100%; }
  .consentement-actions .btn { flex: 1; justify-content: center; text-align: center; }
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.site-footer .brand { display: flex; align-items: center; gap: 0.75rem; }
.site-footer a { color: var(--accent); }

@media (max-width: 900px) {
  .nav { display: none; }
  .langues-desktop { display: none; }
  .btn-header { display: none; }
  .burger { display: inline-grid; }
  .hero-inner, .section-head, .metiers, .projets, .grille-refs, .contact-grid, .strip,
  .cas-chantier, .zones-grille {
    grid-template-columns: 1fr;
  }
  .hero-meta { text-align: start; margin-top: 1.5rem; }
  .projet.tall { grid-row: auto; min-height: 360px; }
  .strip article { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .hero { min-height: 92svh; padding-bottom: 2.5rem; }
  .site-header { width: calc(100% - 2.5rem); }
  .wrap, .hero-inner { width: calc(100% - 2.5rem); }
  .section-head { align-items: start; }
}
@media (min-width: 901px) {
  .panneau { display: none !important; }
}

/* —— Les boutons gardent leurs couleurs partout ——
   Plusieurs blocs colorent leurs liens en ocre (`.texte-long a`,
   `.panneau-contact a`, `.contact-liste a`…). Sans ces règles, un bouton placé
   dans ces blocs héritait de l'ocre : illisible en thème sombre, où le fond du
   bouton est lui aussi ocre. */
a.btn { color: var(--btn-text); }
a.btn-ghost { color: var(--ghost-text); }
.hero a.btn,
.cta a.btn { color: #0b0c0a; }
.hero a.btn-ghost,
.cta a.btn-ghost { color: var(--on-media); }
/* Le bouton WhatsApp garde son vert et son texte blanc : posé plus haut dans la
   feuille, il perdait sinon son texte blanc au profit de `--btn-text`, qui est
   sombre en thème sombre. Sur le vert, cela tombait à 3,5:1, sous le minimum. */
a.btn-whatsapp,
.hero a.btn-whatsapp,
.cta a.btn-whatsapp,
.contact-accueil a.btn-whatsapp,
.texte-long a.btn-whatsapp { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Ces éléments partent d'une opacité nulle et ne deviennent visibles que par
     l'animation d'apparition. Sans elle, il faut les révéler à la main, sinon
     le titre du héros et les sur-titres restent invisibles. */
  .eyebrow,
  .hero h1,
  .hero-lead,
  .hero-actions,
  .hero-meta {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-media img { transform: none; }
}

/* —— Arabe, lecture de droite à gauche ——
   DM Sans et Instrument Serif n'ont aucun glyphe arabe : sans cette section,
   le navigateur choisit une police de secours au hasard, avec des espaces et
   des ligatures approximatives. Le préfixe `html` donne à ces règles plus de
   poids que les polices posées plus haut, composant par composant. */
html[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .strip strong,
html[dir="rtl"] .metier .num,
html[dir="rtl"] .panneau nav a {
  font-family: "Noto Kufi Arabic", "Geeza Pro", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}
html[dir="rtl"] .hero h1 em,
html[dir="rtl"] em { font-style: normal; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .carte-ref .loc,
html[dir="rtl"] .champ label,
html[dir="rtl"] .contact-liste strong,
html[dir="rtl"] .step strong { letter-spacing: 0.04em; }

/* —— Réglages ponctuels —— */
/* Remplacent les attributs style="" des pages : la politique de sécurité
   (CSP "style-src 'self'") refuse les styles écrits dans le HTML. Le !important
   reproduit la priorité qu'avait l'attribut style. */
.u-marge-0 { margin: 0 !important; }
.u-marge-haut-2 { margin-top: 2rem !important; }
.u-retrait-bas-0 { padding-bottom: 0 !important; }
.u-retrait-haut-3-5 { padding-top: 3.5rem !important; }