/* =========================================================================
   Hekalu Group & Associates — feuille de style unique.

   Aucune ressource externe : ni police distante, ni bibliotheque, ni CDN.
   L'ancien site chargeait Google Fonts et huit paquets « vendor » dont trois
   jeux d'icones concurrents. Ici tout est local, ce qui supprime autant de
   points de defaillance que de requetes vers des tiers.

   Les couleurs sont relevees au pixel sur le logo de l'entreprise :
   charbon #404040, bleu #00508f, rouge #920001, ambre #bd6f00.

   Parti pris de mise en page : pas de grille de cartes identiques. Les
   activites principales sont presentees en bandes alternees texte/photo, les
   secondaires en listes denses. Une page ou chaque bloc a la meme forme se
   lit comme un gabarit, pas comme une entreprise.
   ========================================================================= */

/* ---------- 1. Jetons ---------------------------------------------------- */

:root {
  --bleu: #00508f;
  --bleu-vif: #1673be;
  --rouge: #920001;
  --ambre: #bd6f00;
  --charbon: #404040;

  --fond: #ffffff;
  --fond-alterne: #f3f5f8;
  --surface: #ffffff;
  --texte: #1b1e23;
  --texte-doux: #565d67;
  --bordure: #dde2e8;
  --ombre: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -12px rgb(16 24 40 / 18%);
  --ombre-relief: 0 2px 4px rgb(16 24 40 / 8%), 0 18px 40px -18px rgb(16 24 40 / 28%);

  --accent: var(--bleu);
  --anneau: color-mix(in srgb, var(--bleu) 45%, transparent);

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rayon: 10px;
  --rayon-large: 16px;
  --largeur: 1180px;
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);
  --rythme: clamp(4rem, 9vw, 7rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #13161b;
    --fond-alterne: #181c22;
    --surface: #1b1f26;
    --texte: #e8ecf1;
    --texte-doux: #a0a9b5;
    --bordure: #2b313b;
    --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -14px rgb(0 0 0 / 70%);
    --ombre-relief: 0 2px 6px rgb(0 0 0 / 45%), 0 22px 48px -20px rgb(0 0 0 / 80%);
    --accent: var(--bleu-vif);
    --anneau: color-mix(in srgb, var(--bleu-vif) 55%, transparent);
  }
}

/* La bascule manuelle doit l'emporter dans les deux sens, sinon un visiteur
   dont le systeme est en sombre ne pourrait jamais repasser en clair. */
:root[data-theme="light"] {
  --fond: #ffffff;
  --fond-alterne: #f3f5f8;
  --surface: #ffffff;
  --texte: #1b1e23;
  --texte-doux: #565d67;
  --bordure: #dde2e8;
  --ombre: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -12px rgb(16 24 40 / 18%);
  --ombre-relief: 0 2px 4px rgb(16 24 40 / 8%), 0 18px 40px -18px rgb(16 24 40 / 28%);
  --accent: var(--bleu);
  --anneau: color-mix(in srgb, var(--bleu) 45%, transparent);
}

:root[data-theme="dark"] {
  --fond: #13161b;
  --fond-alterne: #181c22;
  --surface: #1b1f26;
  --texte: #e8ecf1;
  --texte-doux: #a0a9b5;
  --bordure: #2b313b;
  --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -14px rgb(0 0 0 / 70%);
  --ombre-relief: 0 2px 6px rgb(0 0 0 / 45%), 0 22px 48px -20px rgb(0 0 0 / 80%);
  --accent: var(--bleu-vif);
  --anneau: color-mix(in srgb, var(--bleu-vif) 55%, transparent);
}

/* ---------- 2. Socle ----------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* L'en-tete est fixe : sans ce decalage, une ancre place le titre vise
     derriere la barre de navigation. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

@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;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  font-weight: 700;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
  border-radius: 4px;
}

.conteneur {
  width: min(100% - var(--gouttiere) * 2, var(--largeur));
  margin-inline: auto;
}

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

.lien-evitement {
  position: absolute;
  left: 50%;
  translate: -50% -150%;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.3rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  font-weight: 600;
  text-decoration: none;
  transition: translate 0.18s ease;
}
.lien-evitement:focus { translate: -50% 0; }

/* ---------- 3. Boutons et liens ------------------------------------------ */

.bouton {
  --fond-bouton: transparent;
  --texte-bouton: var(--texte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--fond-bouton);
  color: var(--texte-bouton);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bouton:hover { transform: translateY(-1px); text-decoration: none; }
.bouton:active { transform: translateY(0); }

.bouton--principal { --fond-bouton: var(--accent); --texte-bouton: #fff; }
.bouton--principal:hover { --fond-bouton: color-mix(in srgb, var(--accent) 86%, black); }

.bouton--fantome {
  --texte-bouton: var(--texte);
  border-color: var(--bordure);
  background: var(--surface);
}
.bouton--fantome:hover { border-color: var(--accent); --texte-bouton: var(--accent); }

.bouton--vert { --fond-bouton: #1c8c4c; --texte-bouton: #fff; }
.bouton--vert:hover { --fond-bouton: #16733e; }

.bouton--grand { padding: 0.95rem 1.8rem; font-size: 1.03rem; }
.bouton--large { width: 100%; padding: 0.95rem 1.5rem; }
.bouton__icone { width: 1.2em; height: 1.2em; fill: currentColor; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.6rem;
  font-weight: 650;
  text-decoration: none;
}
.lien-fleche::after {
  content: "→";
  transition: translate 0.18s ease;
}
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche:hover::after { translate: 4px 0; }

/* ---------- 4. En-tete --------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.entete.est-detachee {
  border-bottom-color: var(--bordure);
  box-shadow: var(--ombre);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4.6rem;
}

.entete__marque { display: flex; align-items: center; flex-shrink: 0; }
.entete__logo { width: auto; height: 2.7rem; }

/* Le logo est un aplat charbon : sur fond sombre il disparaitrait. On
   l'eclaircit plutot que de maintenir deux fichiers a jour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entete__logo,
  :root:not([data-theme="light"]) .pied__logo { filter: brightness(0) invert(1) opacity(0.92); }
}
:root[data-theme="dark"] .entete__logo,
:root[data-theme="dark"] .pied__logo { filter: brightness(0) invert(1) opacity(0.92); }

.navigation { margin-inline-start: auto; }
.navigation__liste {
  display: flex;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation__liste a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--rayon);
  color: var(--texte-doux);
  font-weight: 550;
  font-size: 0.94rem;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.navigation__liste a:hover { color: var(--texte); background: var(--fond-alterne); }
.navigation__liste a.est-active { color: var(--accent); }

.entete__actions { display: flex; align-items: center; gap: 0.6rem; }

/* Le telephone reste visible en permanence : sur ce marche, l'appel est le
   premier canal de contact, loin devant le formulaire. */
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  font-weight: 650;
  font-size: 0.93rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.entete__tel:hover { border-color: var(--accent); color: var(--accent); }
.entete__tel svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

@media (max-width: 78rem) { .entete__tel span { display: none; } .entete__tel { padding: 0.5rem 0.65rem; } }

.bascule-theme {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bascule-theme:hover { color: var(--accent); border-color: var(--accent); }
.bascule-theme__icone { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.bascule-theme__lune { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule-theme__soleil { display: none; }
  :root:not([data-theme="light"]) .bascule-theme__lune { display: block; }
}
:root[data-theme="dark"] .bascule-theme__soleil { display: none; }
:root[data-theme="dark"] .bascule-theme__lune { display: block; }
:root[data-theme="light"] .bascule-theme__soleil { display: block; }
:root[data-theme="light"] .bascule-theme__lune { display: none; }

.bascule-menu { display: none; }

/* ---------- 5. Banniere -------------------------------------------------- */

.banniere {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(ellipse 90% 130% at 8% -10%, color-mix(in srgb, var(--bleu) 42%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 100% at 100% 0%, color-mix(in srgb, var(--rouge) 24%, transparent), transparent 60%),
    linear-gradient(168deg, #1d2129 0%, #14171d 58%, #101317 100%);
  color: #f2f5f8;
  isolation: isolate;
}

.banniere__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.losange {
  position: absolute;
  rotate: 45deg;
  border-radius: 4px;
  opacity: 0.16;
}
.losange--bleu   { width: 15rem; height: 15rem; right: -3rem;  top: 14%;  background: var(--bleu); }
.losange--rouge  { width: 9rem;  height: 9rem;  right: 9rem;   top: 4%;   background: var(--rouge); opacity: 0.22; }
.losange--ambre  { width: 6.5rem; height: 6.5rem; right: 4rem; bottom: 12%; background: var(--ambre); opacity: 0.2; }

@media (max-width: 62rem) { .banniere__decor { opacity: 0.55; } }

.banniere__interieur { position: relative; max-width: 46rem; }

.banniere__surtitre {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #cfd8e2;
}

.banniere__titre {
  font-size: clamp(2.2rem, 1.35rem + 4.1vw, 4rem);
  letter-spacing: -0.033em;
  margin-bottom: 1.1rem;
}
.accentue {
  background: linear-gradient(96deg, var(--ambre), #e8a53c 55%, var(--ambre));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.banniere__texte {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: #c4cdd8;
  max-width: 40rem;
  margin-bottom: 2.1rem;
}
.banniere__texte strong { color: #fff; font-weight: 650; }

.banniere__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.banniere .bouton--fantome {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 26%);
  --texte-bouton: #fff;
}
.banniere .bouton--fantome:hover { background: rgb(255 255 255 / 14%); border-color: #fff; --texte-bouton: #fff; }

.banniere__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 2.8rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 1px solid rgb(255 255 255 / 14%);
  list-style: none;
}
.banniere__preuves li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: 0.95rem;
  color: #b9c3cf;
}
.banniere__preuves li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  top: 0.6em;
  width: 0.45rem; height: 0.45rem;
  rotate: 45deg;
  background: var(--ambre);
}

/* ---------- 6. Sections -------------------------------------------------- */

.section { padding-block: var(--rythme); }
.section--alterne { background: var(--fond-alterne); }

.section--sombre {
  background: linear-gradient(160deg, #1d2129, #14171d 70%);
  color: #e6ebf1;
}
.section--sombre .section__titre { color: #fff; }
.section--sombre .section__oeil { color: #e8a53c; }

.section__entete { max-width: 44rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section__entete--centre { margin-inline: auto; text-align: center; }

.section__oeil {
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__titre {
  font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.section__chapeau { color: var(--texte-doux); font-size: 1.06rem; }

/* ---------- 7. Bandes alternees ------------------------------------------ */

.bande { padding-block: var(--rythme); }

.bande__interieur {
  display: grid;
  /* Volontairement inegal : deux colonnes identiques donnent une page qui
     respire mal et qui a l'air auto-generee. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.bande--inverse .bande__texte { order: 2; }
.bande--inverse .bande__visuel { order: 1; }

@media (max-width: 60rem) {
  .bande__interieur { grid-template-columns: 1fr; }
  .bande--inverse .bande__texte,
  .bande--inverse .bande__visuel { order: initial; }
}

.bande__numero {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.bande__numero span {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 50%;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.bande__texte h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.35rem);
  margin-bottom: 0.9rem;
}
.bande__chapeau { color: var(--texte-doux); font-size: 1.04rem; }
.bande__chapeau em { color: var(--texte); font-style: italic; }

.bande__visuel { margin: 0; }
.bande__visuel img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon-large);
  box-shadow: var(--ombre-relief);
}
.bande__visuel figcaption {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  color: var(--texte-doux);
  text-align: center;
}

/* ---------- 8. Listes de specifications ---------------------------------- */

.specifications {
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0;
}
.specifications > div {
  padding: 0.95rem 0 0.95rem 1.15rem;
  border-inline-start: 2px solid var(--bordure);
  transition: border-color 0.2s ease;
}
.specifications > div:hover { border-inline-start-color: var(--ambre); }
.specifications dt { font-weight: 650; margin-bottom: 0.15rem; }
.specifications dd { margin: 0; color: var(--texte-doux); font-size: 0.96rem; }

/* ---------- 9. Illustrations dessinees ----------------------------------- */

/* Schemas traces a la main plutot que photographies. Deux raisons : aucune
   banque d'images n'etait accessible depuis ce poste, et surtout une photo de
   baie ne dit pas ce que fait l'offre — un schema LAN/MAN/WAN, si.
   Tout est en variables CSS, donc les deux themes suivent la bascule
   manuelle, ce qu'un fichier .svg appele en <img> ne saurait pas faire. */

.illu {
  --illu-vert: #1c8c4c;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--police);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .illu { --illu-vert: #46b878; }
}
:root[data-theme="dark"] .illu { --illu-vert: #46b878; }

/* Surfaces et traits */
.illu-surface { fill: var(--surface); stroke: none; }
.illu-surface-relief { fill: var(--fond); stroke: none; }
.illu-remplissage-doux { fill: color-mix(in srgb, var(--texte-doux) 9%, transparent); stroke: none; }

.illu-trait { fill: none; stroke: var(--bordure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu-trait-fin { fill: none; stroke: var(--bordure); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.illu-trait-accent { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; }

/* Aplats et teintes de la palette du logo */
.illu-accent-plein { fill: var(--accent); stroke: none; }
.illu-accent-doux  { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke: none; }
.illu-accent-trait { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illu-ambre-plein  { fill: var(--ambre); stroke: none; }
.illu-ambre-doux   { fill: color-mix(in srgb, var(--ambre) 16%, var(--surface)); stroke: none; }
.illu-ambre-trait  { fill: none; stroke: var(--ambre); stroke-width: 2.4; stroke-linecap: round; }
.illu-vert-plein   { fill: var(--illu-vert); stroke: none; }
.illu-vert-doux    { fill: color-mix(in srgb, var(--illu-vert) 18%, var(--surface)); stroke: none; }
.illu-vert-trait   { fill: none; stroke: var(--illu-vert); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.illu-point { fill: var(--bordure); stroke: none; }

/* Liaisons entre blocs */
.illu-liaison {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
.illu-pointe { fill: color-mix(in srgb, var(--accent) 45%, transparent); stroke: none; }

/* Textes. Les tailles sont exprimees dans le repere du viewBox (720 de large
   pour environ 520 pixels a l'ecran) : il faut donc majorer d'un tiers pour
   obtenir la taille reellement lue. */
/* Chaque regle est prefixee par `.illu` : sans cela `.illu text` (0,1,1)
   l'emporterait sur `.illu-etiquette` (0,1,0) et tous les libelles atténues
   s'afficheraient en pleine couleur. */
.illu text { fill: var(--texte); }
.illu .illu-etiquette   { font-size: 17px; font-weight: 600; fill: var(--texte-doux); text-anchor: middle; }
.illu .illu-valeur      { font-size: 18px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.illu .illu-titre-carte { font-size: 17px; font-weight: 650; text-anchor: middle; }
.illu .illu-sous-carte  { font-size: 15px; fill: var(--texte-doux); text-anchor: middle; }
.illu .illu-badge-texte { font-size: 15px; font-weight: 650; text-anchor: middle; }
.illu .illu-badge-texte--accent { fill: var(--accent); }
.illu .illu-mono        { font-size: 15px; fill: var(--texte-doux); }
.illu .illu-cellule     { font-size: 15px; fill: var(--texte-doux); }
.illu .illu-reponse     { font-size: 16px; fill: var(--texte-doux); }
.illu .illu-reponse--accent { fill: var(--accent); font-weight: 650; }

/* Dans la premiere illustration, le libelle suit une icone placee a sa
   gauche : centrer le texte le ferait chevaucher le dessin. */
.illu .illu-aligne-debut { text-anchor: start; }

/* Ces libelles-la sont les plus longs du schema et disposent du moins de
   place : on les compose un cran plus petit. */
.illu .illu-titre-carte.illu-carte-compacte { font-size: 15px; }
.illu .illu-sous-carte.illu-carte-compacte  { font-size: 13px; }

/* Sur telephone, un schema de 720 unites reduit a 338 pixels rend son texte a
   6 pixels : illisible. Plutot que de le mutiler ou de le cacher, on lui
   laisse sa taille et on le fait defiler dans son propre cadre. La page,
   elle, ne defile jamais horizontalement. */
@media (max-width: 46rem) {
  .bande__visuel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.4rem;
  }
  .bande__visuel .illu { min-width: 40rem; }
  /* La legende reste lisible quel que soit le defilement du schema. */
  .bande__visuel figcaption {
    position: sticky;
    inset-inline-start: 0;
    width: min(100%, 92vw);
  }
}

/* ---------- 10. Raisons -------------------------------------------------- */

.raisons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: raison;
}
.raisons li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: #b9c3cf;
  counter-increment: raison;
}
.raisons p { margin: 0; }
.raisons strong { color: #fff; font-weight: 650; }

.raison__icone {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--rayon);
  background: rgb(255 255 255 / 6%);
}
.raison__icone svg {
  width: 1.6rem; height: 1.6rem;
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Deux teintes suffisent a hierarchiser le dessin : le detail signifiant
   passe en ambre, le reste reste neutre. */
.raison__icone svg .ambre { stroke: #e8a53c; }
.raison__icone svg .plein { fill: #e8a53c; stroke: none; }

/* Le numero se lit en filigrane derriere l'icone : la liste reste ordonnee
   sans qu'un chiffre vienne disputer la vedette au dessin. */
.raison__icone::after {
  content: counter(raison, decimal-leading-zero);
  position: absolute;
  top: -0.5rem;
  inset-inline-start: -0.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: #e8a53c;
  color: #17191d;
  font-size: 0.66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. Catalogue ------------------------------------------------ */

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem);
}

.famille__titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
  font-size: 1.05rem;
}
.famille--secondaire .famille__titre {
  border-bottom-color: var(--bordure);
  color: var(--texte-doux);
}

.famille__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.35rem; height: 2.35rem;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 12%, var(--fond-alterne));
}
.famille__icone svg {
  width: 1.4rem; height: 1.4rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.famille__icone svg .ambre { stroke: var(--ambre); }
.famille__icone svg .plein { fill: var(--ambre); stroke: none; }

/* Les familles secondaires s'effacent : meme dessin, teinte neutre. */
.famille--secondaire .famille__icone { background: var(--fond-alterne); }
.famille--secondaire .famille__icone svg { stroke: var(--texte-doux); }
.famille--secondaire .famille__icone svg .ambre { stroke: var(--texte-doux); }
.famille--secondaire .famille__icone svg .plein { fill: var(--texte-doux); }

.famille__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.famille__liste li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.96rem;
  color: var(--texte-doux);
}
.famille__liste li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 0.4rem; height: 0.4rem;
  rotate: 45deg;
  background: var(--ambre);
}
.famille--secondaire .famille__liste li::before { background: var(--bordure); }

/* ---------- 12. Vignettes metiers ---------------------------------------- */

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vignette {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-large);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vignette:hover { transform: translateY(-3px); box-shadow: var(--ombre-relief); }
.vignette img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vignette__texte { padding: 1.15rem 1.25rem 1.35rem; }
.vignette h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.vignette p { font-size: 0.91rem; color: var(--texte-doux); }

/* ---------- 13. Realisations --------------------------------------------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.filtre {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.93rem;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.filtre:hover { color: var(--texte); border-color: var(--accent); }
.filtre.est-actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.realisation.est-masquee { display: none; }

.realisation__ouvrir {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.realisation__ouvrir:hover { transform: translateY(-2px); box-shadow: var(--ombre-relief); }

.realisation__ouvrir img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: scale 0.35s ease;
}
.realisation__ouvrir:hover img { scale: 1.05; }

.realisation__etiquette {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.9rem 0.75rem 0.6rem;
  background: linear-gradient(transparent, rgb(9 11 14 / 82%));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: start;
}

.galerie__note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--texte-doux); }

/* ---------- 14. Visionneuse ---------------------------------------------- */

.visionneuse {
  width: min(94vw, 68rem);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: none;
  border-radius: var(--rayon-large);
  background: transparent;
  overflow: visible;
}
.visionneuse::backdrop { background: rgb(8 10 13 / 88%); backdrop-filter: blur(3px); }

.visionneuse__figure { margin: 0; }
.visionneuse__figure img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--rayon);
  background: #0d0f12;
}
.visionneuse__figure figcaption {
  margin-top: 0.85rem;
  text-align: center;
  color: #dfe5ec;
  font-size: 0.95rem;
}

.visionneuse__fermer,
.visionneuse__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
  background: rgb(20 23 28 / 78%);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.visionneuse__fermer:hover,
.visionneuse__nav:hover { background: rgb(40 46 56 / 95%); }
.visionneuse__fermer svg,
.visionneuse__nav svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.visionneuse__fermer { top: -1.2rem; inset-inline-end: -1.2rem; }
.visionneuse__nav { top: 50%; translate: 0 -50%; }
.visionneuse__nav--precedent { inset-inline-start: -1.4rem; }
.visionneuse__nav--suivant { inset-inline-end: -1.4rem; }

@media (max-width: 48rem) {
  .visionneuse__fermer { top: -1rem; inset-inline-end: -0.4rem; }
  .visionneuse__nav--precedent { inset-inline-start: -0.5rem; }
  .visionneuse__nav--suivant { inset-inline-end: -0.5rem; }
}

/* ---------- 15. Contact -------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .contact { grid-template-columns: 1fr; } }

.coordonnees { display: grid; gap: 1.2rem; list-style: none; margin: 2rem 0; padding: 0; }
.coordonnees li { display: flex; gap: 1rem; align-items: flex-start; }
.coordonnees__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 13%, var(--fond-alterne));
  color: var(--accent);
}
.coordonnees__icone svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.coordonnees h3 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texte-doux); margin-bottom: 0.15rem; font-weight: 650; }
.coordonnees p { font-size: 1.02rem; }
.coordonnees a { color: var(--texte); text-decoration: none; }
.coordonnees a:hover { color: var(--accent); text-decoration: underline; }

.contact__directs { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.contact__formulaire {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-large);
  background: var(--surface);
  box-shadow: var(--ombre);
}

.formulaire__intro {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  border-radius: var(--rayon);
  background: var(--fond-alterne);
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.champ { margin-bottom: 1.05rem; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 30rem) { .champ-double { grid-template-columns: 1fr; gap: 0; } }

.champ label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.champ label span { color: var(--rouge); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .champ label span { color: #e07a6f; } }
:root[data-theme="dark"] .champ label span { color: #e07a6f; }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.15s ease;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }

.formulaire__erreur {
  margin-bottom: 1rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--rouge) 12%, transparent);
  color: color-mix(in srgb, var(--rouge) 82%, var(--texte));
  font-size: 0.92rem;
  font-weight: 550;
}

/* ---------- 16. Pied ----------------------------------------------------- */

.pied {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--fond-alterne);
  border-top: 1px solid var(--bordure);
}

.pied__interieur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.8rem;
}
@media (max-width: 56rem) { .pied__interieur { grid-template-columns: 1fr; } }

.pied__logo { width: auto; height: 3.2rem; margin-bottom: 1rem; }
.pied__marque p { color: var(--texte-doux); font-style: italic; }

.pied__liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem;
}
.pied__liens h2 {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.9rem;
}
.pied__liens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pied__liens li { font-size: 0.95rem; color: var(--texte-doux); }
.pied__liens a { color: var(--texte-doux); text-decoration: none; }
.pied__liens a:hover { color: var(--accent); text-decoration: underline; }

.pied__bas {
  padding-block: 1.4rem;
  border-top: 1px solid var(--bordure);
}
.pied__bas p { font-size: 0.88rem; color: var(--texte-doux); }

/* ---------- 17. Navigation repliee --------------------------------------- */

@media (max-width: 68rem) {
  .bascule-menu {
    display: grid;
    place-items: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    cursor: pointer;
  }
  .bascule-menu__barres,
  .bascule-menu__barres::before,
  .bascule-menu__barres::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: translate 0.2s ease, rotate 0.2s ease, opacity 0.15s ease;
  }
  .bascule-menu__barres { position: relative; }
  .bascule-menu__barres::before { content: ""; position: absolute; translate: 0 -6px; }
  .bascule-menu__barres::after  { content: ""; position: absolute; translate: 0 6px; }

  .bascule-menu[aria-expanded="true"] .bascule-menu__barres { background: transparent; }
  .bascule-menu[aria-expanded="true"] .bascule-menu__barres::before { translate: 0 0; rotate: 45deg; }
  .bascule-menu[aria-expanded="true"] .bascule-menu__barres::after  { translate: 0 0; rotate: -45deg; }

  .navigation {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 0.6rem var(--gouttiere) 1.1rem;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-relief);
    display: none;
  }
  .navigation.est-ouverte { display: block; }
  .navigation__liste { flex-direction: column; gap: 0.15rem; }
  .navigation__liste a { padding: 0.75rem 0.8rem; font-size: 1.02rem; }
}