/* ==========================================================================
   Kawann Supply — colonne de contenu commune (thème enfant hummingbird-kawann)
   Chargé après theme.css : ces règles surchargent le style Hummingbird.
   ========================================================================== */

/* Les conteneurs Bootstrap avancent par paliers (540 / 720 / 960 / 1140 /
   1320px). Résultat sur les pages internes : fil d'Ariane, contenu, bloc
   newsletter et footer se calaient tous sur 1320px, pendant que le header et
   les sections d'accueil vivaient sur 1280px — 20px d'écart, visible dès
   qu'on passe de l'accueil à une page interne, et un contenu qui se décale
   d'un cran à chaque breakpoint pendant qu'on redimensionne.

   On leur impose la colonne de référence, celle de .kawann-hero. Le retrait
   de 24px est celui de .kawann-section, pour que TOUT le contenu du site
   commence sur la même verticale.

   Les .container-md du header ne sont pas visés ici : ils portent leurs
   propres règles dans kawann-header.css, où le header mobile a besoin d'un
   traitement à part (logo centré en absolu). Ils consomment le même jeton. */
.container {
  max-width: var(--kawann-colonne);
  padding-right: var(--kawann-colonne-retrait);
  padding-left: var(--kawann-colonne-retrait);
}

@media (max-width: 767.98px) {
  .container {
    padding-right: var(--kawann-colonne-retrait-mobile);
    padding-left: var(--kawann-colonne-retrait-mobile);
  }
}


/* ==========================================================================
   Réseaux sociaux — version « fond clair »
   Le pied de page a ses propres règles (fond marine, pictogrammes blancs) dans
   kawann-footer.css. Celles-ci servent partout ailleurs : page Contact, page
   À propos. Le balisage vient de _partials/kawann-reseaux.tpl.
   ========================================================================== */
.kawann-reseaux__titre {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: var(--kawann-weight-title);
  color: var(--kawann-marine);
}

.kawann-reseaux {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-reseaux__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--kawann-border);
  background: var(--kawann-surface);
  color: var(--kawann-marine);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.kawann-reseaux__lien svg {
  display: block;
  width: 20px;
  height: 20px;
}

.kawann-reseaux__lien:hover,
.kawann-reseaux__lien:focus-visible {
  border-color: var(--kawann-soleil);
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
}

/* Page Contact : sous la carte de coordonnées, dans la colonne de gauche. */
.kawann-contact__reseaux {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--kawann-border);
  border-radius: 14px;
  background: var(--kawann-blanc);
}

/* Page À propos : à la suite du bouton de contact, sur le panneau marine.
   Le fond étant sombre, le titre en marine y était invisible et les pastilles
   claires juraient avec le reste du bandeau. On reprend donc le traitement du
   pied de page, qui occupe le même fond. */
.kawann-apropos__reseaux {
  margin-top: 28px;
}

.kawann-apropos__reseaux .kawann-reseaux__titre {
  color: var(--kawann-blanc);
}

.kawann-apropos__reseaux .kawann-reseaux__lien {
  border-color: transparent;
  background: rgb(242 239 234 / 12%);
  color: var(--kawann-blanc);
}

.kawann-apropos__reseaux .kawann-reseaux__lien:hover,
.kawann-apropos__reseaux .kawann-reseaux__lien:focus-visible {
  border-color: transparent;
  background: var(--kawann-soleil);
  color: var(--kawann-marine);
}