/* =============================================================================
   NS DIGITAL SERVICES — Correctifs medias et icones sociales
   -----------------------------------------------------------------------------
   Chargee APRES main.css, pages.css, responsive.css et vitrine.css : c'est ce
   qui lui permet de reprendre la main sur les regles heritees, sans un seul
   !important. Elle ne contient que les correctifs demandes — aucune couleur,
   aucune police, aucune disposition existante n'est redefinie.

   Revision 3 : les cercles autour des icones sont retires. Les icones seules,
   blanches, alignees sur une ligne, restent centrees dans une zone cliquable
   de taille identique.
   ============================================================================= */

/* ── 1. Icones sociales du pied de page ──────────────────────────────────────
   Deux regles heritees deformaient la rangee :
     · main.css    : « img, svg, video { max-width:100%; height:auto } » —
                     sur un SVG en element flex, height:auto laisse l'etirement
                     recalculer la hauteur, d'ou des icones de tailles inegales ;
     · vitrine.css : cercle de 36 px avec bordure blanche et border-radius.
   La geometrie est donc entierement reposee ici. */

.v2-footer__socials {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;          /* les sept icones tiennent sur une seule ligne */
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 18px;
  padding: 0;
  max-width: 100%;
}

/* Plus de cercle : ni fond, ni bordure, ni arrondi. La zone cliquable reste
   une boite carree identique pour les sept reseaux — l'icone est centree
   dedans, mais rien ne se voit autour d'elle. */
.v2-footer__social,
.v2-footer__social:link,
.v2-footer__social:visited {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s ease;
}

/* La taille de l'icone ne depend plus du flux : elle est imposee, et la meme
   pour les sept reseaux. Les traces SVG sont dessines sur une grille 24x24 :
   une hauteur libre suffisait a les rendre inegaux. */
.v2-footer__social svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: none;
  flex: 0 0 auto;
  display: block;
  fill: currentColor;
  color: #FFFFFF;
  pointer-events: none;
}

/* Survol leger : la seule chose qui change est l'opacite. Aucun deplacement,
   aucun agrandissement, aucune deformation. */
.v2-footer__social:hover,
.v2-footer__social:focus-visible {
  opacity: .72;
  background: none;
  color: #FFFFFF;
  transform: none;
  width: 24px;
  height: 24px;
}
.v2-footer__social:hover svg,
.v2-footer__social:focus-visible svg { width: 20px; height: 20px; }

.v2-footer__social:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* Tablette : meme rendu, espacement legerement resserre. */
@media (max-width: 900px) {
  .v2-footer__socials { gap: 15px; }
}

/* Telephone : la rangee reste sur une ligne. 7 x 22 px + 6 x 12 px = 226 px,
   soit largement moins que les 320 px du plus petit ecran courant. */
@media (max-width: 600px) {
  .v2-footer__socials { gap: 12px; }
  .v2-footer__social,
  .v2-footer__social:hover,
  .v2-footer__social:focus-visible {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex-basis: 22px;
  }
  .v2-footer__social svg,
  .v2-footer__social:hover svg {
    width: 19px;
    height: 19px;
    min-width: 19px;
  }
}

/* ── 2. Image de carte du Magazine ───────────────────────────────────────── */
.v2-post__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--v2-paper-alt, #F4F1EC);
  margin: -6px 0 16px;
}
.v2-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 3. Medias publicitaires ─────────────────────────────────────────────── */
[data-ns-ad-view] video,
[data-ns-ad-popup] video {
  max-width: 100%;
  display: block;
}

/* Rien ne doit deborder horizontalement, y compris une video large. */
.v2-footer__socials,
[data-ns-ad-view],
[data-ns-ad-popup] { max-width: 100%; }