/* ==========================================================================
   ClimaScan — site vitrine, feuille commune aux quatre directions

   Ne contient QUE ce qui est identique par contrat : reset, traitement des
   logos partenaires, cadre des portraits, accessibilité. Aucune règle de
   mise en page — la structure appartient à chaque direction, et les quatre
   ne doivent pas se fusionner.

   Les jetons de marque viennent de identite/tokens.css. Ce qui reste
   intangible d'une direction à l'autre : le logo, le bleu nuit #293A4A,
   la terre cuite #B5540F. Le fond, le choix serif/grotesque et le
   traitement de la profondeur suivent l'inspiration de chaque direction.
   ========================================================================== */

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

img { display: block; max-width: 100%; border-radius: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Logos partenaires ---------- */

/* Les sources sont en couleurs saturées et Banque Populaire porte un
   dégradé. Le filtre #mono-nuit, déclaré en SVG dans chaque page, les
   ramène à un aplat uni. Hauteurs réglées logo par logo : les ratios vont
   de 1,62:1 (Siparex) à 3,49:1 (Bpifrance). */

.cs-logo-partenaire { filter: url(#mono-nuit); width: auto; }
.cs-logo-partenaire--bpifrance { height: 24px; }
.cs-logo-partenaire--credit-agricole { height: 40px; }
.cs-logo-partenaire--banque-populaire { height: 34px; }
.cs-logo-partenaire--siparex { height: 44px; }

/* Variante claire, pour les logos posés sur un fond sombre. */
.cs-sur-sombre .cs-logo-partenaire { filter: url(#mono-clair); }

/* ---------- Portraits ---------- */

/* Les deux sources sont des cercles détourés ; le recadrage carré laisse
   apparaître le fond du détourage, d'où le fond explicite.
   88 px est un plafond dur : la source Damien Marotte fait 95 × 95 px. */

.cs-portrait {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(1);
  background: #EDE7DC;
}

.cs-portrait--sur-sombre { background: #1B2833; }

/* ---------- Accessibilité ---------- */

.cs-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--cs-nuit); outline-offset: 2px; }
.cs-sur-sombre :focus-visible { outline-color: #F7F3EC; }

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