/* --------------------------------------------------------------------------
   SLIDER HERO — 4 photos réelles, rotation CSS pure (aucune librairie JS,
   aucune dépendance réseau). Rendu en <div style="background-image:...">
   plutôt qu'en <img> : un système de lazy-load tiers non identifié (hors
   thème, hors mu-plugin) réécrit tout <img> du HTML final en placeholder
   SVG vide via un filtre de sortie regex — confirmé par curl brut, persiste
   malgré loading=eager/fetchpriority=high. Un div à fond CSS est invisible
   à ce filtre (il ne cible que la balise <img>), donc garanti d'afficher
   la photo. Décalage de chaque diapo via --syn-diapo-i (posé en style
   inline par front-page.php) : delai négatif = démarre déjà « en cours »
   dans son propre créneau, donnant une rotation round-robin sans JS.
   -------------------------------------------------------------------------- */
.syn-heros__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
}
.syn-heros__diapo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation-name: syn-diaporama;
  animation-duration: calc(var(--syn-diapo-n, 4) * 6s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: calc(var(--syn-diapo-i, 0) * -6s);
}
.syn-heros__diapo:first-child { opacity: 1; }
@keyframes syn-diaporama {
  0%, 21% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .syn-heros__diapo { animation: none; opacity: 0; }
  .syn-heros__diapo:first-child { opacity: 1; }
}

/* --------------------------------------------------------------------------
   MENU MOBILE — sous-menus en accordéon (bouton injecté par synergy.js).
   Avant : tous les sous-menus (~30 liens au total) s'affichaient dépliés en
   permanence, empilés visuellement les uns sous les autres.
   -------------------------------------------------------------------------- */
#syn-menu-mobile li.syn-a-sous-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
#syn-menu-mobile li.syn-a-sous-menu > a {
  flex: 1 1 auto !important;
  border-bottom: 0 !important;
}
#syn-menu-mobile .syn-sous-menu-bascule {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--syn-alu-bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--syn-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
#syn-menu-mobile li.syn-sous-menu-ouvert .syn-sous-menu-bascule span { transform: rotate(45deg); display: inline-block; }
#syn-menu-mobile li.syn-a-sous-menu { border-bottom: 1px solid var(--syn-alu); }
#syn-menu-mobile ul.sub-menu {
  flex-basis: 100%;
  width: 100%;
  padding-left: var(--syn-espace-5) !important;
  background: var(--syn-alu-clair);
}
#syn-menu-mobile ul.sub-menu a {
  min-height: 48px !important;
  font-size: 1rem !important;
  color: var(--syn-ink-doux);
}
#syn-menu-mobile ul.sub-menu[hidden] { display: none !important; }

/* ==========================================================================
   SYNERGY 2026 — couche additive « premium »
   Chargée après synergy.css. N'écrase aucune variable de couleur existante.
   Zéro police externe, zéro image externe, zéro requête réseau.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CORRECTIF DÉFENSIF — en-tête écrasé par du CSS Fusion Builder/Avada résiduel
   (plugin toujours actif en arrière-plan, hors du contrôle du thème actif).
   getComputedStyle() en production montre .syn-entete en display:block au
   lieu de grid malgré la règle claire dans synergy.css : une règle externe
   de spécificité/ordre plus fort gagne. Cause racine non isolée parmi 90+
   fichiers CSS minifiés (déjà tenté en session antérieure, non concluant) —
   contournement ciblé et documenté plutôt qu'une chasse non bornée.
   -------------------------------------------------------------------------- */
header.syn-entete {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  flex-direction: unset !important;
}
.syn-entete__logo {
  display: inline-flex !important;
  align-items: center !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
/* Le logo débordait de l'en-tête (ancre <a> imbriquée dans l'ancre WordPress
   the_custom_logo() — HTML invalide, le navigateur refermait la nôtre trop
   tôt et l'image sortait du conteneur flex). Corrigé côté header.php ; cette
   règle fixe la hauteur pour un rendu net dans les 80px de l'en-tête. */
.syn-entete__logo-img {
  display: block !important;
  height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
}
.syn-nav {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.syn-nav ul { display: flex !important; flex-direction: row !important; }
.syn-entete__contact {
  display: flex !important;
  flex-direction: row !important;
  justify-self: end !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: max-content !important;
  position: static !important;
}
@media (max-width: 899px) {
  .syn-nav { display: none !important; }
  .syn-burger { display: inline-flex !important; }
  /* Le bouton « Soumission gratuite » pleine taille débordait de l'en-tête
     mobile (coincé entre logo et burger, hors cadre à droite). L'action est
     déjà dupliquée dans le tiroir #syn-menu-mobile (bouton + appel) : on
     masque simplement le bloc contact de l'en-tête sous 900px plutôt que
     de le rétrécir en un bouton illisible. */
  .syn-entete__contact { display: none !important; }
  header.syn-entete { grid-template-columns: auto 1fr auto !important; }
  .syn-burger { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; }
}
@media (max-width: 1279px) and (min-width: 900px) {
  header.syn-entete { grid-template-columns: minmax(0, 1fr) auto auto !important; }
}

/* Trois seuils contradictoires accumulés par correctifs successifs
   (1099px, 1359px, 1560px) pour la même règle .syn-entete__telephone —
   un seul seuil fait foi désormais, celui documenté par calcul explicite
   (logo+bouton+téléphone ≈ 790px, huit entrées de nav ont besoin du reste). */
@media (min-width: 900px) and (max-width: 1560px) {
  .syn-entete__telephone { display: none !important; }
}
@media (min-width: 1561px) {
  .syn-entete__telephone { display: inline !important; }
}

:root{
  --syn-rayon-doux:8px;
  --syn-ombre-1:0 3px 10px rgba(28,33,38,.10);
  --syn-ombre-2:0 12px 28px rgba(20,58,90,.18);
  --syn-ombre-cuivre:0 8px 18px rgba(168,91,51,.28);
}

/* -------------------------------------------------------------- TYPOGRAPHIE */
h1{
  font-family:var(--syn-police);
  font-size:clamp(2.5rem,5vw,5.25rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
}

h2.syn-titre-section{
  font-family:var(--syn-police);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.12;
}

h3{
  font-family:var(--syn-police);
  font-weight:700;
  letter-spacing:-.005em;
  line-height:1.2;
}

/* ------------------------------------------------------------------ BOUTONS */
/* Direction couleur (2026-08-02, retour client « j'aime le bleu ») : le
   primaire passe du cuivre au marine — plus institutionnel, plus « haut de
   gamme ». Le cuivre reste la couleur d'accent (soulignements, cercles
   d'étapes, barre de carte, bouton contour au survol) : il ne disparaît pas,
   il change de rôle. */
.syn-bouton--primaire,
a.syn-bouton--primaire,
button.syn-bouton--primaire{
  background-color: var(--syn-marine) !important;
  border-color: var(--syn-marine) !important;
  color: #fff !important;
  border-radius:var(--syn-rayon-doux);
  box-shadow: 0 8px 18px rgba(20,58,90,.30);
  transition:
    transform var(--syn-transition),
    box-shadow var(--syn-transition),
    background-color var(--syn-transition),
    border-color var(--syn-transition),
    color var(--syn-transition);
}

.syn-bouton--primaire:hover,
a.syn-bouton--primaire:hover,
button.syn-bouton--primaire:hover{
  background-color: var(--syn-marine-fonce) !important;
  border-color: var(--syn-marine-fonce) !important;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(20,58,90,.38);
}

.syn-bouton--primaire:focus-visible,
a.syn-bouton--primaire:focus-visible,
button.syn-bouton--primaire:focus-visible{
  outline:3px solid rgba(20,58,90,.35);
  outline-offset:3px;
}

.syn-bouton--contour,
a.syn-bouton--contour,
button.syn-bouton--contour{
  border-radius:var(--syn-rayon-doux);
  transition:
    transform var(--syn-transition),
    box-shadow var(--syn-transition),
    background-color var(--syn-transition),
    border-color var(--syn-transition),
    color var(--syn-transition);
}

.syn-bouton--contour:hover,
a.syn-bouton--contour:hover,
button.syn-bouton--contour:hover{
  box-shadow:var(--syn-ombre-1);
}

.syn-bouton--contour:focus-visible,
a.syn-bouton--contour:focus-visible,
button.syn-bouton--contour:focus-visible{
  outline:3px solid rgba(20,58,90,.25);
  outline-offset:3px;
}

.syn-entete.est-defile{
  box-shadow:var(--syn-ombre-2);
}

/* ------------------------------------------------------------ GAGES/BADGES */
.syn-gages{
  margin-top:var(--syn-espace-6);
  padding-top:var(--syn-espace-5);
  border-top:1px solid rgba(20,58,90,.14);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:var(--syn-espace-4);
  min-width:0;
  max-width:100%;
}

/* Les 4 certifications (CAA/RBQ/Alu-Rex/APCHQ) au même format de carte —
   demande explicite Nathan : plus de hiérarchie de taille entre CAA et les
   3 autres, toutes doivent avoir le même poids visuel. CAA garde sa couleur
   de marque rouge (variante par défaut) ; les 3 autres utilisent la variante
   --marine (couleur secondaire de Synergy, pas une couleur de marque tierce
   inventée). */
.syn-gage-caa{
  display:flex;
  align-items:center;
  gap:var(--syn-espace-4);
  width:100%;
  max-width:420px;
  box-sizing:border-box;
  padding:.7rem 1.4rem .7rem .7rem;
  background:#fff;
  border:2px solid #C41E2D;
  border-radius:var(--syn-rayon-doux);
  box-shadow:var(--syn-ombre-2);
  text-decoration:none;
  transition:transform var(--syn-transition), box-shadow var(--syn-transition);
}
.syn-gage-caa:hover,
.syn-gage-caa:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(196,30,45,.26);
}
.syn-gage-caa--marine{
  border-color:var(--syn-marine);
}
.syn-gage-caa--marine:hover,
.syn-gage-caa--marine:focus-visible{
  box-shadow:0 16px 34px rgba(20,58,90,.26);
}
.syn-gage-caa--marine .syn-gage-caa__titre{
  color:var(--syn-marine);
}
.syn-gage-caa__logo{
  display:inline-block;
  flex:none;
  width:68px;
  height:68px;
  border-radius:8px;
  background-repeat:no-repeat;
  background-position:center;
  /* contain, pas cover : les logos RBQ/Alu-Rex/APCHQ sont en format paysage
     (jusqu'à ~3:1) — cover les rognerait sur les côtés dans un cadre carré. */
  background-size:contain;
  background-color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.syn-gage-caa__texte{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.syn-gage-caa__titre{
  font-family:var(--syn-police);
  font-size:1.05rem;
  font-weight:800;
  color:#A31421;
  letter-spacing:.01em;
  line-height:1.2;
  overflow-wrap:break-word;
}
.syn-gage-caa__sous-titre{
  font-family:var(--syn-police);
  font-size:.82rem;
  font-weight:500;
  color:var(--syn-texte-doux);
  line-height:1.3;
  overflow-wrap:break-word;
}
@media (max-width:420px){
  .syn-gage-caa{ max-width:100%; }
}

.syn-gages__secondaires{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.syn-gage{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:max-content;
  max-width:100%;
  padding:.5rem 1rem .5rem .5rem;
  border:1px solid rgba(168,91,51,.28);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--syn-ombre-1);
  color:var(--syn-cuivre-fonce);
  font-family:var(--syn-police);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.1;
  white-space:nowrap;
  text-decoration:none;
  transition:transform var(--syn-transition), box-shadow var(--syn-transition);
}
.syn-gage:hover,
.syn-gage:focus-visible{
  transform:translateY(-1px);
  box-shadow:var(--syn-ombre-cuivre);
  border-color:rgba(168,91,51,.45);
}

.syn-gage--marine{
  border-color:rgba(20,58,90,.20);
  background:rgba(20,58,90,.07);
  color:var(--syn-marine);
}

.syn-gage__logo{
  display:inline-block;
  flex:none;
  width:40px;
  height:40px;
  border-radius:7px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}

/* ------------------------------------------------------- IMAGE DE PAGE */
/* Photo réelle en tête des pages de service/ville (page.php) — la grande
   majorité des ~190 pages n'affichaient aucune image avant ce correctif. */
.syn-page__image{
  display:block;
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:var(--syn-rayon-doux);
  box-shadow:var(--syn-ombre-1);
  margin-block:var(--syn-espace-6) var(--syn-espace-8);
}

/* Pages de certification (CAA/RBQ/Alu-Rex/APCHQ) : l'image vedette est le logo
   officiel de l'organisme, pas une photo de chantier. object-fit:cover agrandit
   la marge blanche déjà présente dans le PNG source — rendu illisible/perdu.
   Cadre contenu, fond blanc net, logo à sa taille réelle plutôt qu'étiré. */
.syn-page__image--logo{
  max-width:320px;
  max-height:200px;
  width:auto;
  object-fit:contain;
  background:#fff;
  padding:var(--syn-espace-6);
  box-sizing:border-box;
}

/* --------------------------------------------------------- CARTES SERVICE */
.syn-carte {
  position: relative;
  overflow: hidden;
  background: var(--syn-blanc-chaud);
  border: 1px solid rgba(124, 138, 151, 0.18);
  border-radius: 14px;
  box-shadow: var(--syn-ombre-1);
  transform: translateY(0) scale(1);
  transition:
    transform var(--syn-transition),
    box-shadow var(--syn-transition),
    border-color var(--syn-transition),
    background-color var(--syn-transition);
}

.syn-carte::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: var(--syn-cuivre);
  border-radius: 14px 14px 0 0;
  opacity: 0.72;
  transform: scaleX(0.78);
  transform-origin: center;
  transition:
    transform var(--syn-transition),
    opacity var(--syn-transition),
    background-color var(--syn-transition);
}

.syn-carte:hover,
.syn-carte:focus-within {
  border-color: rgba(168, 91, 51, 0.22);
  box-shadow: var(--syn-ombre-2);
  transform: translateY(-4px) scale(1.01);
}

.syn-carte:hover::before,
.syn-carte:focus-within::before {
  background: var(--syn-cuivre-fonce);
  opacity: 1;
  transform: scaleX(1);
}

.syn-carte__corps {
  position: relative;
}

.syn-carte__titre {
  font-weight: 750;
  letter-spacing: -0.01em;
}

.syn-carte__lien {
  transition: color var(--syn-transition);
}

.syn-carte__lien:hover,
.syn-carte__lien:focus-visible {
  color: var(--syn-cuivre-fonce);
}

/* ------------------------------------------------------------- ÉTAPES (ol) */
.syn-section .syn-contenant > ol {
  display: block;
  margin: var(--syn-espace-8) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: syn-etape;
}

.syn-section .syn-contenant > ol > li {
  position: relative;
  min-height: 56px;
  padding: 4px 0 var(--syn-espace-8) 76px;
  color: var(--syn-texte);
  counter-increment: syn-etape;
}

.syn-section .syn-contenant > ol > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  content: counter(syn-etape, decimal-leading-zero);
  color: var(--syn-blanc-chaud);
  background: var(--syn-marine);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(20, 58, 90, 0.18);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.syn-section .syn-contenant > ol > li:nth-child(even)::before {
  background: var(--syn-cuivre);
  box-shadow: 0 6px 16px rgba(168, 91, 51, 0.2);
}

.syn-section .syn-contenant > ol > li:not(:last-child)::after {
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 27px;
  width: 2px;
  content: "";
  background: linear-gradient(
    to bottom,
    rgba(124, 138, 151, 0.42),
    rgba(124, 138, 151, 0.12)
  );
}

.syn-section .syn-contenant > ol > li strong {
  color: var(--syn-marine-fonce);
  font-weight: 800;
}

@media (min-width: 900px) {
  .syn-section .syn-contenant > ol:has(> li:nth-child(4):last-child) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--syn-espace-8);
  }

  .syn-section .syn-contenant > ol:has(> li:nth-child(4):last-child) > li {
    min-height: 0;
    padding: var(--syn-espace-5);
    text-align: center;
    background: rgba(250, 248, 245, 0.72);
    border-radius: var(--syn-rayon-doux);
  }

  .syn-section .syn-contenant > ol:has(> li:nth-child(4):last-child) > li::before {
    position: static;
    margin: 0 auto var(--syn-espace-4);
  }

  .syn-section .syn-contenant > ol:has(> li:nth-child(4):last-child) > li::after {
    display: none;
  }
}

/* --------------------------------------------------------- SECTIONS SOMBRES */
.syn-section--sombre {
  background-color: var(--syn-graphite);
  background-image:
    radial-gradient(
      ellipse 70% 55% at 92% 8%,
      rgba(250, 248, 245, 0.10) 0%,
      rgba(250, 248, 245, 0.03) 28%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 60% 70% at 8% 100%,
      rgba(20, 58, 90, 0.28) 0%,
      transparent 72%
    ),
    linear-gradient(
      135deg,
      var(--syn-graphite) 0%,
      #192b38 52%,
      var(--syn-marine-fonce) 100%
    );
}

.syn-section--sombre .syn-carte {
  background-color: var(--syn-marine-fonce);
  background-image: linear-gradient(
    145deg,
    rgba(250, 248, 245, 0.055) 0%,
    rgba(250, 248, 245, 0.015) 38%,
    rgba(20, 58, 90, 0.18) 100%
  );
  border: 1px solid rgba(250, 248, 245, 0.13);
  box-shadow:
    0 1px 0 rgba(250, 248, 245, 0.05) inset,
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.16);
}

.syn-section--sombre .syn-carte:hover {
  border-color: rgba(250, 248, 245, 0.20);
  box-shadow:
    0 1px 0 rgba(250, 248, 245, 0.07) inset,
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------- RYTHME D'ESPACEMENT */
.syn-section:has(> .syn-contenant > p:only-child) {
  padding-block: clamp(40px, 5vw, 80px);
}

.syn-section:has(> .syn-contenant > h2:first-child + p:last-child) {
  padding-block: clamp(48px, 6vw, 104px);
}

/* ------------------------------------------------------------- HERO IMPACT
   L'ancien cadre décoratif (bordure + gradient ::after) ciblait
   « .syn-heros > div:last-child » en supposant une image unique encadrée
   d'un <a> — structure remplacée par le slider (front-page.php). Ce
   sélecteur matchait encore .syn-heros__slider en tant que dernier enfant,
   et .syn-heros__visuel y forçait position:relative (même spécificité,
   règle plus tardive) par-dessus le position:absolute de .syn-heros__diapo
   plus haut dans ce fichier : les diapos perdaient leur empilement et
   s'affichaient en flux normal (une sous l'autre, tronquées par
   overflow:hidden). Bloc retiré ; le cadre visuel (bordure/ombre) reste sur
   .syn-heros__visuel seul, sans plus toucher à position/z-index. */
.syn-heros__visuel {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(250, 248, 245, .85);
  border-radius: 18px;
  box-shadow:
    0 18px 38px rgba(20, 58, 90, .24),
    0 5px 13px rgba(28, 33, 38, .14);
}

/* -------------------------------------------------- CARTES : REPOS ENRICHI */
.syn-carte {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, #FAF8F5 0%, #FFFFFF 58%, #F5F7F8 100%);
  box-shadow:
    0 7px 18px rgba(28, 33, 38, .12),
    0 2px 5px rgba(20, 58, 90, .07);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.syn-carte::before {
  width: 100%;
  height: 4px;
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--syn-cuivre), var(--syn-cuivre-fonce));
  transition:
    height .28s ease,
    background .28s ease;
}

.syn-carte:hover,
.syn-carte:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 15px 30px rgba(20, 58, 90, .20),
    0 5px 12px rgba(28, 33, 38, .11);
}

.syn-carte:hover::before,
.syn-carte:focus-within::before {
  height: 6px;
  background: linear-gradient(90deg, var(--syn-cuivre-fonce), var(--syn-cuivre));
}

.syn-carte__lien {
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.syn-carte__lien:focus-visible {
  outline: 3px solid rgba(168, 91, 51, .55);
  outline-offset: 4px;
  border-radius: var(--syn-rayon);
}

@media (prefers-reduced-motion: reduce) {
  .syn-carte,
  .syn-carte::before,
  .syn-carte__lien,
  .syn-bouton--primaire,
  .syn-bouton--contour,
  .syn-heros__visuel {
    transition: none;
  }
}

/* ------------------------------------------- CARTES DU BLOGUE (Blog Designer Pack) */
/* .bdpp-post-cats affiche toujours le meme texte (nom de l'entreprise en guise
   d'unique categorie WordPress, aucune info utile) en chevauchement disgracieux
   sur le bas de la photo — masque plutot que reposition, aucune info perdue. */
.bdpp-post-cats{
  display:none;
}

/* --------------------------------------------------- SECTION CONFIANCE (2026-08-04)
   Remplace les 4 cartes de certification empilées dans le hero (illisibles en
   colonne à cette largeur) par une bande dédiée pleine largeur, sous le hero.
   Style unifié (pas de rouge CAA vs bleu des 3 autres) : le logo de chaque
   organisme apporte déjà sa propre couleur, la carte reste neutre. */
.syn-confiance{
  background:#fff;
  border-top:1px solid rgba(20,58,90,.12);
  border-bottom:1px solid rgba(20,58,90,.12);
  padding-block:var(--syn-espace-7);
}
.syn-confiance__entete{
  text-align:center;
  font-family:var(--syn-police);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--syn-texte-doux);
  margin:0 0 var(--syn-espace-6);
}
.syn-confiance__grille{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--syn-espace-6);
}
.syn-confiance__badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.55rem;
  padding:var(--syn-espace-5) var(--syn-espace-3);
  text-decoration:none;
  border-radius:var(--syn-rayon-doux);
  border-left:1px solid rgba(20,58,90,.10);
  transition:transform var(--syn-transition), background var(--syn-transition);
}
.syn-confiance__badge:first-child{
  border-left:none;
}
.syn-confiance__badge:hover,
.syn-confiance__badge:focus-visible{
  transform:translateY(-3px);
  background:rgba(20,58,90,.035);
}
.syn-confiance__logo{
  display:block;
  width:84px;
  height:84px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.syn-confiance__titre{
  font-family:var(--syn-police);
  font-size:1rem;
  font-weight:800;
  color:var(--syn-marine);
  letter-spacing:.005em;
  line-height:1.25;
}
.syn-confiance__texte{
  font-family:var(--syn-police);
  font-size:.82rem;
  font-weight:500;
  color:var(--syn-texte-doux);
  line-height:1.35;
}
@media (max-width:900px){
  .syn-confiance__grille{
    grid-template-columns:repeat(2,1fr);
    row-gap:var(--syn-espace-6);
  }
  .syn-confiance__badge:nth-child(3){
    border-left:none;
  }
}
@media (max-width:520px){
  /* 2026-08-08 : grille 2x2 conservee (au lieu d'empiler en 1 colonne) --
     4 badges de confiance sur un ecran plein de defilement etait trop dilue,
     cf. audit visuel P09. Meme logique de bordure que le palier 900px. */
  .syn-confiance__grille{
    grid-template-columns:repeat(2,1fr);
    row-gap:var(--syn-espace-6);
  }
  .syn-confiance__badge:nth-child(3){
    border-left:none;
  }
}