/*
 * Page Avenir & Santé — maquette Figma « FNI (copie) », cadre Avenir-et-sante (2693:11615).
 * Tout est limité à .fni-as : l'en-tête et le pied de page Elementor du site ne sont pas touchés.
 * Polices Fraunces et Gabarito (OFL 1.1, fichiers dans fonts/), chargées sur cette page seulement.
 */

@font-face { font-family: 'FNI Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-wonk-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'FNI Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-ext-wonk-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'FNI Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-wonk-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'FNI Fraunces'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('fonts/fraunces-latin-ext-wonk-italic.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'FNI Gabarito'; font-style: normal; font-display: swap; font-weight: 400 900; src: url('fonts/gabarito-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'FNI Gabarito'; font-style: normal; font-display: swap; font-weight: 400 900; src: url('fonts/gabarito-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

.fni-as {
  --fni-as-marine: #0c1c6b;
  --fni-as-marine-70: #556097;
  --fni-as-marine-50: #858db5;
  --fni-as-marine-10: #e7e8f0;
  --fni-as-marine-05: #f3f4f8;
  --fni-as-jaune: #ffed7d;
  --fni-as-cyan: #7df8ff;
  --fni-as-titre: 'FNI Fraunces', Georgia, 'Times New Roman', serif;
  --fni-as-texte: 'FNI Gabarito', 'Helvetica Neue', Arial, sans-serif;
  display: block;
  background: #fff;
  color: var(--fni-as-marine-70);
  font-family: var(--fni-as-texte);
  font-size: 16px;
  line-height: 1.4;
}
.fni-as *, .fni-as *::before, .fni-as *::after { box-sizing: border-box; }
.fni-as img { max-width: 100%; }
.fni-as h1, .fni-as h2, .fni-as h3 {
  margin: 0;
  color: var(--fni-as-marine);
  font-family: var(--fni-as-titre);
  font-weight: 700;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.fni-as h2 { font-size: 40px; }
.fni-as a { color: var(--fni-as-marine); }
.fni-as a:focus-visible, .fni-as [tabindex]:focus-visible, .fni-as button:focus-visible { outline: 3px solid #ffcf21; outline-offset: 3px; }
.fni-as-container { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }

.fni-as-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 24px 12px; border-radius: 40px;
  background: var(--fni-as-jaune); color: var(--fni-as-marine) !important;
  font-family: var(--fni-as-texte); font-size: 18px; font-weight: 700; line-height: 1.4; text-decoration: none;
}
.fni-as-bouton:hover { background: #ffe44d; }
.fni-as-bouton img { width: 24px; height: 24px; }

/* 1. Présentation de la revue */
.fni-as-hero { overflow: hidden; background: var(--fni-as-marine) url('img/hero-fond-arcs.svg') center / cover no-repeat; color: #fff; }
.fni-as-hero__inner { position: relative; height: 542px; }
.fni-as-hero__texte { position: relative; z-index: 4; width: 680px; padding-top: 55px; }
.fni-as-hero__logo { display: block; width: 283px; height: 127px; object-fit: contain; object-position: left center; }
.fni-as .fni-as-hero h1 { margin-top: 42px; color: #fff; font-size: 40px; }
.fni-as-hero p { margin: 4px 0 0; color: #fff; font-family: var(--fni-as-titre); font-size: 24px; font-style: italic; line-height: 1.3; }
.fni-as-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-top: 40px; }
.fni-as .fni-as-hero__lien { color: var(--fni-as-marine-05); font-size: 18px; font-weight: 700; text-decoration: none; }
.fni-as .fni-as-hero__lien:hover { text-decoration: underline; }
.fni-as-hero__couvertures { position: absolute; top: 0; right: 0; width: 472px; height: 542px; }
.fni-as-hero__couvertures img { position: absolute; width: 253px; max-width: none; height: 355px; object-fit: cover; filter: drop-shadow(4px 4px 16px var(--fni-as-marine-10)); }
.fni-as-hero__couvertures img:nth-child(1) { top: 94px; left: -89px; }
.fni-as-hero__couvertures img:nth-child(2) { z-index: 2; top: 92px; left: 6px; transform: rotate(15.03deg); }
.fni-as-hero__couvertures img:nth-child(3) { z-index: 3; top: 115px; left: 100px; transform: rotate(30.03deg); }

/* 2. À lire dans votre revue */
.fni-as-lire { padding-top: 40px; }
.fni-as-une { display: grid; grid-template-columns: 578px 1fr; gap: 48px; min-height: 303px; margin-top: 32px; }
.fni-as-une__image, .fni-as-carte__image { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--fni-as-marine-10); }
.fni-as-une__image { height: 303px; }
.fni-as-carte__image { height: 182px; }
.fni-as-une__image > img:first-child, .fni-as-carte__image > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.fni-as-sans-image { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(135deg, #dfe4f7, #9aa8dd 55%, var(--fni-as-marine)); color: #fff; font-family: var(--fni-as-titre); font-size: 40px; font-weight: 700; }
.fni-as-pastille { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; }
.fni-as-pastille--64 { width: 64px; height: 64px; }
.fni-as-une__texte, .fni-as-carte__texte { display: flex; min-width: 0; flex-direction: column; }
.fni-as .fni-as-une h3 { margin-bottom: 16px; font-size: 32px; }
.fni-as .fni-as-une h3 a, .fni-as .fni-as-carte h3 a { color: inherit; text-decoration: none; }
.fni-as .fni-as-une h3 a:hover, .fni-as .fni-as-carte h3 a:hover { text-decoration: underline; }
.fni-as-une p { margin: 0; color: var(--fni-as-marine-70); font-size: 20px; line-height: 1.4; }
.fni-as-fleche { align-self: flex-end; margin-top: auto; padding-top: 16px; }
.fni-as-fleche, .fni-as-fleche img { display: block; width: 24px; height: auto; }
.fni-as-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding: 40px 0 64px; }
.fni-as-carte { min-width: 0; min-height: 488px; padding: 8px; border-radius: 24px; background: #fff; filter: drop-shadow(4px 4px 8px var(--fni-as-marine-10)); display: flex; flex-direction: column; }
.fni-as-carte__texte { flex: 1; padding: 24px; }
.fni-as .fni-as-carte h3 { font-size: 24px; }
.fni-as-carte p { display: -webkit-box; margin: 12px 0 0; overflow: hidden; font-size: 16px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.fni-as-lire:not(:has(.fni-as-cartes)) { padding-bottom: 64px; }

/* 3. Les derniers numéros */
.fni-as-numeros { overflow: hidden; padding: 64px 0; background: var(--fni-as-marine-05); scroll-margin-top: 24px; }
.fni-as-numeros__entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.fni-as-puces { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 16px; }
.fni-as-puces[hidden] { display: none; }
.fni-as-puces button { width: 24px; height: 24px; padding: 0; border: 2px solid var(--fni-as-marine-50); border-radius: 50%; background: transparent; cursor: pointer; }
.fni-as-puces button[aria-current='true'] { width: 62px; border: 0; border-radius: 20px; background: var(--fni-as-marine-50); }
.fni-as-numeros__fenetre { width: calc(100vw - max(16px, (100vw - 1200px) / 2)); margin-left: max(16px, (100vw - 1200px) / 2); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; }
.fni-as-numeros__fenetre::-webkit-scrollbar { display: none; }
.fni-as-numeros__rangee { display: flex; gap: 48px; width: max-content; margin: 0; padding: 4px 16px 12px 0; list-style: none; }
.fni-as-numero { flex: 0 0 369px; height: 514px; margin: 0; overflow: hidden; border-radius: 24px; background: #fff; filter: drop-shadow(4px 4px 8px var(--fni-as-marine-10)); scroll-snap-align: start; }
.fni-as-numero a, .fni-as-numero img { display: block; width: 100%; height: 100%; }
.fni-as-numero img { object-fit: cover; }

/* 4. Adhérez pour recevoir votre magazine */
.fni-as-adherer { display: grid; gap: 56px; padding: 64px 0 80px; }
.fni-as-raisons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.fni-as-raisons article { display: grid; grid-template-columns: 56px 1fr; gap: 48px; }
.fni-as-raison__numero { color: var(--fni-as-marine); font-family: var(--fni-as-titre); font-size: 56px; font-weight: 700; line-height: 1.25; text-align: right; }
.fni-as-raison__icone { position: relative; width: 110px; height: 107px; margin-bottom: 16px; }
.fni-as-raison__icone span { position: absolute; top: 4px; right: 0; bottom: 16px; left: 18px; border: 11px solid var(--fni-as-cyan); border-radius: 50%; }
.fni-as-raison__icone img { position: absolute; top: 15px; left: 0; width: 92px; height: 92px; object-fit: contain; }
.fni-as .fni-as-raisons h3 { margin-bottom: 8px; font-size: 32px; }
.fni-as-raisons ul { margin: 0; padding-left: 24px; font-size: 16px; line-height: 1.4; }
.fni-as-raisons li + li { margin-top: 4px; }
.fni-as-adherer__action { display: flex; justify-content: flex-end; }

/* Tablette large : mise en page du bureau dans un conteneur fluide */
@media (max-width: 1199px) {
  .fni-as-container { width: calc(100% - 48px); }
  .fni-as-hero__texte { width: calc(100% - 500px); }
  .fni-as-hero__couvertures { right: -90px; }
  .fni-as-une { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fni-as-cartes, .fni-as-raisons { gap: 24px; }
  .fni-as-raisons article { gap: 20px; }
  .fni-as .fni-as-raisons h3 { font-size: 26px; }
  .fni-as-numeros__fenetre { width: calc(100vw - 24px); margin-left: 24px; }
}

/* Tablette : une colonne */
@media (max-width: 1023px) {
  .fni-as-hero__inner { height: 820px; }
  .fni-as-hero__texte { width: min(620px, 100%); padding-top: 40px; }
  .fni-as .fni-as-hero h1 { margin-top: 24px; }
  .fni-as-hero p br { display: none; }
  .fni-as-hero__couvertures { top: auto; right: auto; bottom: -40px; left: 50%; height: 470px; transform: translateX(-50%) scale(.78); transform-origin: center bottom; }
  .fni-as-une { grid-template-columns: 1fr; gap: 24px; }
  .fni-as-cartes { grid-template-columns: 1fr; }
  .fni-as-carte { display: grid; grid-template-columns: 348px 1fr; min-height: 198px; }
  .fni-as-raisons { grid-template-columns: 1fr; gap: 40px; }
}

/* Mobile (maquette 376 px) */
@media (max-width: 767px) {
  .fni-as-container { width: calc(100% - 56px); }
  .fni-as h2 { font-size: 24px; }
  .fni-as-hero__inner { height: 780px; }
  .fni-as-hero__texte { width: 100%; padding-top: 32px; }
  .fni-as-hero__logo { width: 220px; height: auto; }
  .fni-as .fni-as-hero h1 { font-size: 32px; }
  .fni-as-hero p { margin-top: 12px; font-size: 18px; }
  .fni-as-hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px; }
  .fni-as-hero__couvertures { bottom: -70px; transform: translateX(-50%) scale(.68); }
  .fni-as-une { margin-top: 24px; }
  .fni-as-une__image { height: auto; aspect-ratio: 578 / 303; }
  .fni-as .fni-as-une h3 { margin-bottom: 8px; font-size: 20px; }
  .fni-as-une p { font-size: 14px; }
  .fni-as-cartes { gap: 24px; padding: 32px 0 48px; }
  .fni-as-carte { display: flex; min-height: 0; }
  .fni-as-carte__image { height: auto; aspect-ratio: 348 / 182; }
  .fni-as-carte__texte { padding: 16px; }
  .fni-as .fni-as-carte h3 { font-size: 18px; }
  .fni-as-carte p { font-size: 14px; }
  .fni-as-numeros { padding: 40px 0 48px; }
  .fni-as-numeros__entete { align-items: flex-start; margin-bottom: 24px; }
  .fni-as-puces { gap: 8px; max-width: 152px; }
  .fni-as-puces button { width: 16px; height: 16px; }
  .fni-as-puces button[aria-current='true'] { width: 40px; }
  .fni-as-numeros__fenetre { width: calc(100vw - 28px); margin-left: 28px; }
  .fni-as-numeros__rangee { gap: 20px; padding-right: 28px; }
  .fni-as-numero { flex-basis: min(76vw, 300px); height: auto; aspect-ratio: 369 / 514; }
  .fni-as-adherer { gap: 40px; padding: 48px 0 56px; }
  .fni-as-raisons article { grid-template-columns: 42px 1fr; gap: 20px; }
  .fni-as-raison__numero { font-size: 40px; }
  .fni-as-raison__icone { width: 86px; height: 84px; }
  .fni-as-raison__icone span { left: 14px; border-width: 8px; }
  .fni-as-raison__icone img { top: 12px; width: 72px; height: 72px; }
  .fni-as .fni-as-raisons h3 { font-size: 18px; }
  .fni-as-raisons ul { font-size: 14px; }
  .fni-as-adherer__action { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fni-as-numeros__fenetre { scroll-behavior: auto; }
}