/* ==========================================================================
   SYNERGY 2026 — feuille de style du thème
   Registre : artisan industriel de précision. Contrastes WCAG 2.2 AA calculés.
   Aucune police externe, aucune URL distante.
   ========================================================================== */

/* -------------------------------------------------------------- FONDATIONS */
:root {
  --syn-graphite: #1C2126;
  --syn-marine: #143A5A;
  --syn-marine-fonce: #0E2A42;
  --syn-cuivre: #A85B33;
  --syn-cuivre-fonce: #8C4A28;
  --syn-alu: #C9D1D6;
  --syn-alu-bordure: #7C8A97;
  --syn-alu-clair: #E8EDF0;
  --syn-blanc-chaud: #FAF8F5;
  --syn-texte: #22282E;
  --syn-texte-doux: #4A545E;

  --syn-espace-1: 4px;   --syn-espace-2: 8px;   --syn-espace-3: 12px;
  --syn-espace-4: 16px;  --syn-espace-5: 20px;  --syn-espace-6: 24px;
  --syn-espace-7: 28px;  --syn-espace-8: 32px;  --syn-espace-10: 40px;
  --syn-espace-12: 48px; --syn-espace-14: 56px; --syn-espace-16: 64px;
  --syn-espace-20: 80px; --syn-espace-24: 96px; --syn-espace-28: 112px;
  --syn-espace-32: 128px; --syn-espace-36: 144px; --syn-espace-40: 160px;

  --syn-rayon: 4px;
  --syn-transition: 180ms ease;
  --syn-police: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --syn-police-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --syn-fond: var(--syn-blanc-chaud);
  --syn-ink: var(--syn-texte);
  --syn-ink-doux: var(--syn-texte-doux);
  --syn-lien: var(--syn-marine-fonce);
  --syn-lien-survol: var(--syn-cuivre-fonce);
  --syn-bordure: var(--syn-alu-bordure);
  --syn-entete-hauteur: 80px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--syn-entete-hauteur) + 16px); }

body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding-left: var(--syn-espace-6); }
img, video, svg { display: block; max-width: 100%; height: auto; }

body {
  min-width: 320px;
  min-height: 100vh;
  background: var(--syn-fond);
  color: var(--syn-ink);
  font-family: var(--syn-police);
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.syn-menu-ouvert { overflow: hidden; }

::selection { background: var(--syn-marine); color: var(--syn-blanc-chaud); }

h1, h2, h3, h4, h5, h6 {
  color: var(--syn-ink);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(2.125rem, 1.7rem + 2.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -0.02em; }
h4 { font-size: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); line-height: 1.16; }
h5 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.2; }
h6 { font-size: 1.125rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; }

p { color: var(--syn-ink-doux); text-wrap: pretty; }
p + p { margin-top: var(--syn-espace-4); }
strong { color: var(--syn-ink); font-weight: 600; }
small { color: var(--syn-ink-doux); font-size: 0.8125rem; line-height: 1.45; }

a {
  color: var(--syn-lien);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--syn-transition), text-decoration-thickness var(--syn-transition);
}
a:hover { color: var(--syn-lien-survol); text-decoration-thickness: 2px; }

ul, ol { color: var(--syn-ink-doux); }
li + li { margin-top: var(--syn-espace-2); }
li::marker { color: var(--syn-cuivre); }

blockquote {
  margin-block: var(--syn-espace-8);
  padding: var(--syn-espace-2) 0 var(--syn-espace-2) var(--syn-espace-5);
  border-left: 3px solid var(--syn-cuivre);
  color: var(--syn-ink);
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
}
blockquote p { color: inherit; }

code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--syn-bordure);
  border-radius: var(--syn-rayon);
  background: var(--syn-alu-clair);
  color: var(--syn-marine-fonce);
  font-family: var(--syn-police-mono);
  font-size: 0.875em;
}
hr { width: 100%; height: 1px; margin-block: var(--syn-espace-12); border: 0; background: var(--syn-bordure); }

.syn-contenant { width: min(100% - clamp(32px, 6vw, 96px), 1200px); margin-inline: auto; }
.syn-section { padding-block: clamp(64px, 8vw, 160px); }
.syn-section:has(> .syn-heros) { padding-block: 0; }

.syn-section--sombre {
  --syn-fond: var(--syn-graphite);
  --syn-ink: var(--syn-blanc-chaud);
  --syn-ink-doux: var(--syn-alu-clair);
  --syn-lien: var(--syn-alu-clair);
  --syn-lien-survol: var(--syn-blanc-chaud);
  background: var(--syn-fond);
  color: var(--syn-ink);
}
.syn-section--sombre h1, .syn-section--sombre h2, .syn-section--sombre h3,
.syn-section--sombre h4, .syn-section--sombre h5, .syn-section--sombre h6 { color: var(--syn-ink); }
.syn-section--sombre p { color: var(--syn-ink-doux); }
.syn-section--sombre code { background: var(--syn-marine-fonce); color: var(--syn-blanc-chaud); }

.syn-titre-section { display: inline-block; }
.syn-titre-section::after {
  display: block; width: 48px; height: 3px;
  margin-top: var(--syn-espace-5);
  background: var(--syn-cuivre); content: "";
}

.syn-lecteur-ecran {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.syn-saut {
  position: fixed; top: var(--syn-espace-4); left: var(--syn-espace-4); z-index: 1200;
  padding: var(--syn-espace-3) var(--syn-espace-4);
  border-radius: var(--syn-rayon);
  background: var(--syn-blanc-chaud); color: var(--syn-marine-fonce);
  transform: translateY(-200%); transition: transform var(--syn-transition);
}
.syn-saut:focus { transform: translateY(0); }

*:focus-visible { outline: 3px solid var(--syn-cuivre); outline-offset: 2px; }

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

/* -------------------------------------------------------------- NAVIGATION */
.syn-bandeau {
  background-color: var(--syn-graphite);
  color: var(--syn-alu-clair);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding-block: var(--syn-espace-2);
  text-transform: uppercase;
}
.syn-bandeau__contenu { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-espace-4); }

.syn-entete {
  position: sticky; top: 0; z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  height: var(--syn-entete-hauteur);
  background-color: var(--syn-blanc-chaud);
  border-bottom: 1px solid var(--syn-alu);
  transition: height var(--syn-transition), background-color var(--syn-transition), box-shadow var(--syn-transition);
}
.syn-entete--pad { padding-inline: clamp(16px, 3vw, 48px); }
.syn-entete.est-defile { height: 64px; box-shadow: 0 4px 14px rgb(20 28 34 / 8%); }

.syn-entete__logo { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
.syn-entete__logo img, .syn-entete__logo svg { display: block; max-height: 44px; width: auto; }
.syn-entete__logo span { color: var(--syn-marine-fonce); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }

.syn-entete__contact { display: flex; align-items: center; gap: var(--syn-espace-4); justify-self: end; }
.syn-entete__telephone { color: var(--syn-ink); font-weight: 700; text-decoration: none; }
.syn-entete__telephone:hover, .syn-entete__telephone:focus-visible { color: var(--syn-cuivre-fonce); }

.syn-nav { justify-self: center; }
.syn-nav ul { display: flex; align-items: stretch; gap: var(--syn-espace-6); list-style: none; margin: 0; padding: 0; color: inherit; }
.syn-nav li { position: relative; margin-top: 0; }
.syn-nav a {
  display: inline-flex; align-items: center; position: relative;
  min-height: 44px; color: var(--syn-ink);
  font-size: 1rem; font-weight: 600; text-decoration: none;
}
.syn-nav > ul > li > a::after {
  position: absolute; bottom: 7px; left: 0;
  width: 100%; height: 2px; background-color: var(--syn-cuivre);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--syn-transition); content: "";
}
.syn-nav > ul > li > a:hover::after,
.syn-nav > ul > li > a:focus-visible::after,
.syn-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }

.syn-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 1010;
  display: none; flex-direction: column; min-width: 240px;
  padding: var(--syn-espace-2);
  background-color: var(--syn-blanc-chaud);
  border: 1px solid var(--syn-alu);
  box-shadow: 0 8px 20px rgb(20 28 34 / 10%);
}
.syn-nav li:hover > .sub-menu, .syn-nav li:focus-within > .sub-menu { display: flex; }
.syn-nav .sub-menu a { width: 100%; min-height: 44px; padding-inline: var(--syn-espace-4); }
.syn-nav .sub-menu a:hover, .syn-nav .sub-menu a:focus-visible { background-color: var(--syn-alu-clair); }

.syn-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-width: 44px; min-height: 44px;
  padding: var(--syn-espace-2); background: transparent; border: 0; cursor: pointer;
}
.syn-burger__barre {
  display: block; width: 24px; height: 2px; background-color: var(--syn-ink);
  transition: transform var(--syn-transition), opacity var(--syn-transition);
}
.syn-burger[aria-expanded="true"] .syn-burger__barre:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.syn-burger[aria-expanded="true"] .syn-burger__barre:nth-child(2) { opacity: 0; }
.syn-burger[aria-expanded="true"] .syn-burger__barre:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

#syn-menu-mobile {
  position: fixed; top: var(--syn-entete-hauteur); inset-inline: 0; bottom: 0; z-index: 990;
  display: none; flex-direction: column; overflow-y: auto;
  padding: var(--syn-espace-4);
  background-color: var(--syn-blanc-chaud);
}
#syn-menu-mobile ul { list-style: none; margin: 0; padding: 0; }
#syn-menu-mobile li { margin-top: 0; }
#syn-menu-mobile a {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--syn-alu);
  color: var(--syn-ink); font-size: 1.375rem; font-weight: 600; text-decoration: none;
}
#syn-menu-mobile .syn-menu-mobile__actions { display: grid; gap: var(--syn-espace-3); margin-top: auto; padding-top: var(--syn-espace-6); }
#syn-menu-mobile .syn-menu-mobile__actions a { justify-content: center; border-bottom: 0; font-size: 1.0625rem; }

@media (max-width: 1099px) { .syn-entete__telephone { display: none; } }
@media (max-width: 899px) {
  .syn-entete { grid-template-columns: minmax(0, 1fr) auto auto; }
  .syn-nav { display: none; }
  .syn-burger { display: inline-flex; }
  #syn-menu-mobile { display: flex; }
}
@media (max-width: 767px) { .syn-bandeau { display: none; } }
#syn-menu-mobile[hidden] { display: none; }

/* --------------------------------------------------- BOUTONS ET BLOCS */
.syn-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--syn-espace-3) var(--syn-espace-6);
  border: 2px solid transparent; border-radius: var(--syn-rayon);
  font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--syn-transition), color var(--syn-transition),
              border-color var(--syn-transition), transform var(--syn-transition);
}
.syn-bouton:hover { transform: translateY(-1px); }
.syn-bouton:focus-visible { outline: 3px solid var(--syn-cuivre); outline-offset: 3px; }
.syn-bouton--primaire { background-color: var(--syn-cuivre); color: #fff; }
.syn-bouton--primaire:hover { background-color: var(--syn-cuivre-fonce); color: #fff; }
.syn-bouton--primaire:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.syn-bouton--contour { background-color: transparent; border-color: var(--syn-marine-fonce); color: var(--syn-marine-fonce); }
.syn-bouton--contour:hover { background-color: var(--syn-marine-fonce); color: #fff; }
.syn-section--sombre .syn-bouton--contour { border-color: var(--syn-blanc-chaud); color: var(--syn-blanc-chaud); }
.syn-section--sombre .syn-bouton--contour:hover { background-color: var(--syn-blanc-chaud); color: var(--syn-graphite); }

.syn-heros { display: grid; align-items: center; gap: clamp(32px, 5vw, 80px); padding-block: clamp(64px, 9vw, 144px); }
.syn-heros h1 { margin-block-start: 0; }
.syn-heros__sous-titre {
  max-width: 54ch; margin-block-start: var(--syn-espace-6);
  color: var(--syn-ink-doux); font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
}
.syn-heros__actions { display: flex; flex-wrap: wrap; gap: var(--syn-espace-4); margin-block-start: var(--syn-espace-10); }
.syn-heros__visuel { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--syn-rayon); }
@media (min-width: 901px) { .syn-heros { grid-template-columns: 7fr 5fr; } }
@media (max-width: 900px) { .syn-heros { grid-template-columns: 1fr; } }

.syn-gages {
  display: flex; flex-wrap: wrap; gap: var(--syn-espace-6);
  margin-block-start: var(--syn-espace-12); padding-block-start: var(--syn-espace-8);
  border-block-start: 1px solid var(--syn-alu);
}
.syn-gage { color: var(--syn-ink-doux); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.syn-gage + .syn-gage { padding-inline-start: var(--syn-espace-6); border-inline-start: 1px solid var(--syn-alu); }
@media (max-width: 640px) {
  .syn-gages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syn-gage + .syn-gage { padding-inline-start: 0; border-inline-start: 0; }
}

.syn-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (min-width: 901px) {
  .syn-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syn-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .syn-grille--2, .syn-grille--3 { grid-template-columns: 1fr; } }

.syn-carte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background-color: #fff; border: 1px solid var(--syn-alu); border-radius: var(--syn-rayon);
  transition: transform var(--syn-transition), border-color var(--syn-transition), box-shadow var(--syn-transition);
}
.syn-carte:hover, .syn-carte:focus-within {
  transform: translateY(-2px); border-color: var(--syn-cuivre); box-shadow: 0 6px 18px rgb(20 28 34 / 8%);
}
.syn-carte__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.syn-carte__corps { flex: 1; padding: var(--syn-espace-6); }
.syn-carte__titre { margin-block-start: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: normal; }
.syn-carte__titre a { text-decoration: none; }
.syn-carte__lien::after { position: absolute; inset: 0; content: ""; }
.syn-carte__lien:focus-visible { outline: 3px solid var(--syn-cuivre); outline-offset: -3px; }
.syn-carte p { margin-top: var(--syn-espace-3); font-size: 1rem; }
.syn-section--sombre .syn-carte { background-color: var(--syn-marine-fonce); border-color: var(--syn-alu-bordure); }
.syn-section--sombre .syn-carte__titre, .syn-section--sombre .syn-carte a { color: var(--syn-blanc-chaud); }

.syn-fil ol {
  display: flex; flex-wrap: wrap; gap: var(--syn-espace-2);
  margin: 0 0 var(--syn-espace-8); padding: 0;
  color: var(--syn-ink-doux); font-size: 0.875rem; list-style: none;
}
.syn-fil li { display: flex; align-items: center; margin-top: 0; }
.syn-fil li + li::before { margin-inline-end: var(--syn-espace-2); color: var(--syn-bordure); content: "/"; }
.syn-fil [aria-current="page"] { color: var(--syn-ink); font-weight: 600; }
.syn-fil a { color: inherit; text-decoration: none; }
.syn-fil a:hover { text-decoration: underline; }

/* ------------------------------------- ÉDITORIAL, FORMULAIRES, PIED */
.syn-article p, .syn-article ul, .syn-article ol, .syn-article blockquote, .syn-article h3 { max-width: 68ch; }
.syn-article h2 { margin-block: var(--syn-espace-16) var(--syn-espace-5); }
.syn-article h3 { margin-top: var(--syn-espace-12); }
.syn-article ul, .syn-article ol { padding-inline-start: var(--syn-espace-8); }
.syn-article > img, .syn-article figure {
  width: min(100%, 76ch); max-width: 100%;
  border: 1px solid var(--syn-alu); border-radius: var(--syn-rayon);
}
.syn-article figure { margin: var(--syn-espace-8) 0; overflow: hidden; }
.syn-article figure img { display: block; width: 100%; height: auto; }
.syn-article figcaption {
  margin-top: var(--syn-espace-3); padding-inline: var(--syn-espace-3);
  color: var(--syn-ink-doux); font-size: 0.875rem; text-align: center;
}
.syn-billet__image { width: 100%; margin-bottom: var(--syn-espace-10); border-radius: var(--syn-rayon); }

.syn-meta-article {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--syn-espace-4);
  margin-bottom: var(--syn-espace-10); color: var(--syn-ink-doux); font-size: 0.875rem;
}
.syn-meta-article > * + *::before { margin-inline-end: var(--syn-espace-4); color: var(--syn-cuivre); content: "·"; }

.syn-mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }

.syn-aside {
  padding: var(--syn-espace-6);
  border: 1px solid var(--syn-alu); border-radius: var(--syn-rayon);
  background: var(--syn-alu-clair);
}
.syn-aside__titre {
  margin-bottom: var(--syn-espace-5); color: var(--syn-marine-fonce);
  font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.syn-aside__telephone {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--syn-marine-fonce); font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700; line-height: 1.1; text-decoration: none;
}
.syn-aside__telephone:hover { text-decoration: underline; text-decoration-color: var(--syn-cuivre); }
.syn-aside .syn-bouton { width: 100%; margin-top: var(--syn-espace-5); }

/* 2026-08-08 : badges-logo reels dans l'aside des pages interieures --
   reutilisation du meme composant visuel que .syn-confiance__logo (accueil),
   en petit format, cf. backlog P09. */
.syn-aside__badges {
  display: flex; flex-wrap: wrap; gap: var(--syn-espace-4);
  margin-top: var(--syn-espace-6); padding-top: var(--syn-espace-5);
  border-top: 1px solid var(--syn-alu);
}
.syn-aside__badge {
  display: block; width: 40px; height: 40px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

.syn-aside ul { margin: var(--syn-espace-6) 0 0; padding: 0; font-size: 0.875rem; list-style: none; }
.syn-aside li { margin-top: 0; padding-block: var(--syn-espace-3); border-top: 1px solid var(--syn-alu); }
.syn-aside li:last-child { border-bottom: 1px solid var(--syn-alu); }

.syn-tableau { max-width: 100%; overflow-x: auto; border: 1px solid var(--syn-alu); border-radius: var(--syn-rayon); }
.syn-tableau table, .syn-article table { width: 100%; border-collapse: collapse; }
.syn-tableau th, .syn-article th {
  padding: var(--syn-espace-3) var(--syn-espace-4);
  border-bottom: 2px solid var(--syn-alu-bordure);
  background: var(--syn-alu-clair); color: var(--syn-marine-fonce);
  font-weight: 700; text-align: left;
}
.syn-tableau td, .syn-article td { padding: var(--syn-espace-3) var(--syn-espace-4); border-bottom: 1px solid var(--syn-alu); }
.syn-tableau tbody tr:nth-child(even), .syn-article tbody tr:nth-child(even) { background: rgb(232 237 240 / 45%); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], textarea, select {
  width: 100%; min-height: 48px;
  padding: var(--syn-espace-3) var(--syn-espace-4);
  border: 1px solid var(--syn-alu-bordure); border-radius: var(--syn-rayon);
  background-color: #fff; color: var(--syn-ink);
  font: inherit; font-size: 1.0625rem;
  transition: border-color var(--syn-transition), box-shadow var(--syn-transition);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--syn-cuivre); outline: none;
  box-shadow: 0 0 0 3px rgb(168 91 51 / 20%);
}
label { display: block; margin-bottom: var(--syn-espace-2); font-weight: 600; }
.syn-requis { color: var(--syn-cuivre-fonce); }
.syn-erreur { margin-top: var(--syn-espace-2); color: var(--syn-cuivre-fonce); font-size: 0.875rem; }
textarea { min-height: 160px; resize: vertical; }
select {
  padding-right: var(--syn-espace-10); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--syn-marine-fonce) 50%),
                    linear-gradient(135deg, var(--syn-marine-fonce) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
}
.syn-recherche { display: flex; flex-wrap: wrap; gap: var(--syn-espace-3); max-width: 560px; margin-block: var(--syn-espace-6); }
.syn-recherche input[type="search"] { flex: 1 1 240px; width: auto; }
.syn-recherche label { margin: 0; }

.syn-pagination, .pagination, .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--syn-espace-2);
  margin-top: var(--syn-espace-12); font-weight: 600;
}
.syn-pagination a, .pagination a, .nav-links a, .nav-links .current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--syn-espace-3);
  border: 1px solid var(--syn-alu); border-radius: var(--syn-rayon); text-decoration: none;
}
.nav-links .current { background: var(--syn-marine-fonce); border-color: var(--syn-marine-fonce); color: #fff; }

.syn-pied { padding-block: clamp(64px, 7vw, 112px); }
.syn-pied__titre { margin-bottom: var(--syn-espace-5); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.syn-pied ul { margin: 0; padding: 0; list-style: none; }
.syn-pied li + li { margin-top: var(--syn-espace-2); }
.syn-pied a { text-decoration: none; }
.syn-pied a:hover, .syn-pied a:focus-visible { text-decoration: underline; text-underline-offset: 0.16em; }
.syn-pied address { font-style: normal; }
.syn-pied__bas {
  margin-top: var(--syn-espace-12); padding-top: var(--syn-espace-8);
  border-top: 1px solid rgb(250 248 245 / 30%); font-size: 0.875rem;
}

/* 2026-08-08 : icones reseaux sociaux du pied de page -- comptes reels deja
   declares dans le schema Organization (sameAs), jamais lies visuellement
   avant ce jour, cf. audit visuel P09. */
.syn-pied__social {
  display: flex; gap: var(--syn-espace-4); margin-top: var(--syn-espace-5);
}
.syn-pied__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgb(250 248 245 / 30%);
  color: var(--syn-ink); opacity: 0.85;
  transition: opacity var(--syn-transition), border-color var(--syn-transition), background var(--syn-transition);
}
.syn-pied__social a:hover, .syn-pied__social a:focus-visible {
  opacity: 1; text-decoration: none;
  border-color: var(--syn-cuivre); background: rgb(250 248 245 / 8%);
}
@media (min-width: 1025px) {
  .syn-mise-en-page { grid-template-columns: minmax(0, 1fr) 340px; }
  .syn-aside { position: sticky; top: calc(var(--syn-entete-hauteur) + 24px); align-self: start; }
  .syn-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1024px) { .syn-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .syn-grille--4 { grid-template-columns: 1fr; } }

.syn-barre-mobile { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 56px; }
  .syn-barre-mobile {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 100;
    display: flex; height: 56px;
    box-shadow: 0 -4px 16px rgb(28 33 38 / 18%);
  }
  .syn-barre-mobile a {
    display: flex; flex: 1; align-items: center; justify-content: center;
    color: #fff; font-size: 1.0625rem; font-weight: 700; text-decoration: none;
  }
  .syn-barre-mobile__appeler { background: var(--syn-cuivre); }
  .syn-barre-mobile__soumission { background: var(--syn-marine); }
}

@media print {
  .syn-bandeau, .syn-entete, .syn-nav, .syn-barre-mobile, .syn-aside, .syn-pied, .syn-bouton, .syn-saut { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; padding-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; overflow-wrap: anywhere; }
  h1, h2, h3, h4, h5, h6 { break-after: avoid; }
}

/* ============================================================
   CORRECTIFS D'EN-TÊTE — mesurés sur capture réelle à 1440 px
   ============================================================ */

/* Les libellés se brisaient au milieu (« Soffite / et / fascia » sur 3 lignes). */
.syn-nav a {
  white-space: nowrap;
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
}

/* Huit entrées de premier niveau : il faut resserrer. */
.syn-nav ul { gap: clamp(12px, 1.4vw, 24px); }

/* « Nous joindre » chevauchait le téléphone : les zones doivent se repousser. */
.syn-entete { column-gap: var(--syn-espace-6); }
.syn-entete__logo,
.syn-entete__contact { flex-shrink: 0; }
.syn-entete__contact { white-space: nowrap; }
/* Indispensable : sans min-width:0, une piste minmax(0,1fr) ne rétrécit pas. */
.syn-nav { min-width: 0; }

/* Le téléphone disparaît avant que le menu ne manque d'espace. */
@media (max-width: 1359px) {
  .syn-entete__telephone { display: none; }
}

/* Le héros réservait 5fr à une colonne vide quand la page n'a pas d'image. */
@media (min-width: 901px) {
  .syn-heros:not(:has(.syn-heros__visuel)) { grid-template-columns: 1fr; }
  .syn-heros:not(:has(.syn-heros__visuel)) > :first-child { max-width: 72ch; }
}

/* Sous-titre trop aéré : les lignes se détachaient les unes des autres. */
.syn-heros__sous-titre { line-height: 1.45; }

/* ============================================================
   CORRECTIFS v2 — 12 défauts mesurés sur capture pleine page
   ============================================================ */

/* --- LOT 1 : chevauchement dans l'en-tête ------------------- */
/* flex-shrink n'a aucun effet sur un enfant de grille : c'était le vrai bug. */
.syn-entete__logo,
.syn-entete__contact { min-width: max-content; }
.syn-entete__logo span {
  font-size: clamp(0.9375rem, 0.75rem + 0.5vw, 1.25rem);
  white-space: nowrap;
}
.syn-nav { inline-size: 100%; min-width: 0; overflow: hidden; }

@media (max-width: 1499px) {
  .syn-nav ul { gap: clamp(8px, 0.8vw, 14px); }
  .syn-nav a { font-size: 0.875rem; }
}
/* Huit entrées, un logo long et un bouton ne tiennent pas sous 1280 px. */
@media (max-width: 1279px) {
  .syn-entete { grid-template-columns: minmax(0, 1fr) auto auto; }
  .syn-nav { display: none; }
  .syn-burger { display: inline-flex; }
  #syn-menu-mobile { display: flex; }
}

/* --- LOT 2 : le texte sortait des cartes -------------------- */
.syn-grille { align-items: start; }
.syn-carte { height: 100%; min-width: 0; overflow-x: clip; overflow-y: visible; }
.syn-carte__corps { min-width: 0; overflow-wrap: break-word; }

/* --- LOT 3 : héros et pied de page -------------------------- */
/* h1 { max-width: 14ch } brisait le titre en quatre lignes. */
.syn-heros h1 { max-width: 20ch; }
.syn-heros > div:has(> .syn-heros__visuel) { width: 100%; }
.syn-heros__visuel {
  width: 100%; height: auto; max-width: none;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--syn-rayon);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}
/* En flex, deux gages passaient sur une ligne fantôme au-dessus. */
.syn-gages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--syn-espace-4) var(--syn-espace-6);
}
.syn-gage + .syn-gage { border-inline-start: 0; padding-inline-start: 0; }
.syn-gage + .syn-gage::before {
  content: ""; display: inline-block;
  width: 2px; height: 1em;
  margin-inline-end: var(--syn-espace-3);
  vertical-align: -0.1em;
  background: var(--syn-cuivre);
}
/* Palliatif : le correctif propre est côté gabarit (titre émis sans contenu). */
.syn-pied .syn-grille--4 > div:has(.syn-pied__titre:only-child) { display: none; }

/* ============================================================
   CORRECTIFS v3 — deux régressions de la passe v2, corrigées
   ============================================================ */

/* v2 : des colonnes de grille de 180 px tronquaient « INSTALLATEUR ÉLITE ALU-REX ».
   Retour au flex : chaque gage garde sa largeur intrinsèque. */
.syn-gages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--syn-espace-3) var(--syn-espace-5);
  row-gap: var(--syn-espace-4);
  grid-template-columns: none;
}
.syn-gage {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.syn-gage + .syn-gage { border-inline-start: 0; padding-inline-start: 0; }
.syn-gage + .syn-gage::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: 2px; height: 1em;
  margin-inline-end: var(--syn-espace-3);
  vertical-align: -0.1em;
  background: var(--syn-cuivre);
}
@media (max-width: 700px) {
  .syn-gage + .syn-gage::before { display: none; }
}

/* v2 : height:100% avec align-items:start figeait la carte à la hauteur de la piste,
   et overflow-y:visible rendait le debordement VISIBLE au lieu de le supprimer. */
.syn-grille { align-items: stretch; }
.syn-carte { align-self: stretch; height: auto; min-width: 0; overflow: visible; }
.syn-carte__corps { flex: 1; min-width: 0; overflow-wrap: break-word; }

/* ============================================================
   CORRECTIFS v4 — menu tronqué à 1440 px (mesuré sur capture)
   ============================================================ */
/* À 1440 px : logo ~380px + bouton ~250px + téléphone ~160px = 790px,
   il ne reste que ~650px pour huit entrées. « Projets » était coupé,
   « Blogue » et « Contact » disparaissaient sous le téléphone.
   Le téléphone du bandeau doit donc s'effacer plus tôt : il reste
   accessible par le bouton et par la barre mobile. */
@media (max-width: 1560px) {
  .syn-entete__telephone { display: none; }
}
/* Le nom du site prend moins de place au profit de la navigation. */
@media (max-width: 1560px) {
  .syn-entete__logo span { font-size: clamp(0.875rem, 0.7rem + 0.4vw, 1.0625rem); }
}
/* Espace excessif entre les gages et la section suivante : le héros
   apportait déjà son padding, la section en ajoutait un second. */
.syn-section:has(> .syn-heros) + .syn-section { padding-block-start: clamp(32px, 4vw, 72px); }