/* ═══════════════════════════════════════════════════════════════════
   tarifs.css — la page des tarifs et la page 404 (qui porte aussi
   data-page="tarifs"). Chargée APRÈS /style.css (ancienne mise en page) et
   /theme.css (couleurs, titres, boutons, barre du haut, pied de page).

   Même allure que l'accueil : cartes en verre sombre, titres Jakarta serrés
   avec un mot en italique, sur-titres bleus, filets fins, beaucoup d'air.
   Les cartes d'offres sont FABRIQUÉES par app.js à partir de /offres.js :
     div.offre > [span.offre-marque] h3 p.offre-prix p.offre-detail
                 button.primaire (caisse ouverte) | button.lien (fermée)
   On ne peut donc agir sur elles que par le style : aucune classe à ajouter.

   La section « Si c'est déjà allé trop loin » (section.colonne.aide) est
   hors de <main> : elle n'est habillée qu'ici, son HTML n'est pas touché.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ce que l'ancienne feuille impose et qu'on refuse ici ────────────
   style.css fait glisser et pâlir TOUT h1 au défilement (parallaxe de l'ancien
   accueil) : le titre des tarifs s'effaçait à mesure qu'on descendait vers les
   offres. `main h1` suffit à l'éteindre, et `.monte` (plus spécifique) reprend
   la main pour l'entrée. */
main h1 { animation: none; max-width: none; }

/* Entrée du haut de page : visible sans script (animation CSS, pas d'observateur). */
.monte { opacity: 0; transform: translateY(20px); animation: entre 1.1s var(--ease) forwards; }
.m1 { animation-delay: .05s; } .m2 { animation-delay: .14s; } .m3 { animation-delay: .26s; }
.m4 { animation-delay: .38s; } .m5 { animation-delay: .5s; }

/* ═══════════════ OUVERTURE DES TARIFS ═══════════════ */
.tarifs-ouverture { position: relative; isolation: isolate; padding: 44px 0 40px; }
/* La lueur : posée sur toute la largeur (jamais plus large que l'écran), le
   dégradé fait le reste. */
.tarifs-ouverture::before {
  content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 34%, rgba(60,120,255,.20), rgba(60,120,255,.05) 60%, transparent 78%),
    radial-gradient(30% 34% at 78% 20%, rgba(110,90,255,.08), transparent 70%);
}
.tarifs-entete { max-width: 860px; margin: 0 auto; text-align: center; }
.tarifs-entete .etiquette { justify-content: center; }
.titre-tarifs {
  margin: 0; font-size: clamp(2.7rem, 1.3rem + 4.8vw, 5.2rem); line-height: .98; letter-spacing: -.048em;
}
.tarifs-entete .entete-texte { margin: 24px auto 0; max-width: 34em; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
@media (min-width: 1000px) { .tarifs-ouverture { padding: 76px 0 56px; } }

/* ═══════════════ LES OFFRES ═══════════════ */
.offres { padding: 24px 0 20px; }
.offres-groupe + .offres-groupe { margin-top: 64px; }
/* « À l'unité », « Si vous analysez souvent » : un intitulé suivi d'un filet qui s'éteint. */
.offres-titre {
  display: flex; align-items: center; gap: 18px; margin: 0 0 30px;
  font: 600 1.02rem/1.3 var(--sans); letter-spacing: -.005em; color: var(--texte-2); white-space: nowrap;
}
.offres-titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ligne-2), transparent); }

.grille-offres { display: grid; gap: 30px; grid-template-columns: 1fr; }
.grille-credits { padding-top: 12px; }        /* la place de la pastille qui chevauche le bord */
@media (min-width: 960px) { .grille-credits { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* ── la carte ── */
.offre {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 0;
  padding: 34px 28px 28px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--ligne);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* La lumière qui monte du haut de la carte au survol. */
.offre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at 50% -30%, rgba(110,195,255,.15), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
@media (hover: hover) {
  .offre:hover { transform: translateY(-6px); border-color: rgba(140,200,255,.28); box-shadow: 0 34px 60px -28px rgba(0,0,0,.85), 0 0 50px -22px rgba(110,195,255,.4); }
  .offre:hover::before { opacity: 1; }
}
.offre h3 { margin: 0; font: 600 1.1rem/1.3 var(--sans); letter-spacing: -.012em; color: var(--texte); }
.offre-prix {
  margin: 20px 0 0; font: 700 clamp(2.6rem, 2.1rem + 1.4vw, 3.2rem)/1 var(--sans);
  letter-spacing: -.04em; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.offre-detail {
  margin: 12px 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--ligne);
  font-size: 1rem; line-height: 1.5; color: var(--texte-2);
}

/* ── les boutons de la carte ──
   Caisse ouverte : app.js pose `.primaire` (« Choisir »). En contour sur les cartes
   ordinaires, clair sur l'offre mise en avant — un seul bouton plein par rangée. */
.offre button { margin-top: auto; width: 100%; }
.offre .primaire {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 14px;
  font: 600 1.02rem/1 var(--sans); letter-spacing: -.01em;
  color: var(--texte); background: rgba(255,255,255,.035); border: 1px solid var(--ligne-2); box-shadow: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.offre .primaire::after { content: none; animation: none; }   /* l'ancien reflet qui passait en boucle */
.offre .primaire:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: rgba(200,215,255,.34); transform: translateY(-2px); }
.offre .primaire:disabled { opacity: .6; cursor: progress; }
/* Caisse fermée : `.lien` désactivé, « Bientôt disponible ». Un emplacement calme, pas un bouton. */
.offre button.lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 20px; border-radius: 14px;
  font: 500 1rem/1.2 var(--sans); color: var(--texte-3); text-decoration: none;
  background: rgba(255,255,255,.018); border: 1px solid var(--ligne); cursor: default;
}

/* ── l'offre mise en avant : « Le moins cher à l'analyse » ──
   Posée par app.js sur le lot au meilleur prix unitaire. La carte prend une bordure
   bleutée, une lumière qui descend du haut et un bord supérieur éclairé ; la pastille
   chevauche ce bord. Sans `:has()`, il reste la pastille — l'information ne se perd pas. */
.offre:has(.offre-marque) {
  border-color: rgba(110,195,255,.42);
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(110,195,255,.17), transparent 62%),
    linear-gradient(180deg, rgba(110,195,255,.06), rgba(255,255,255,.014));
  box-shadow: 0 30px 80px -40px rgba(40,120,255,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
.offre:has(.offre-marque)::after {
  content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190,230,255,.95), transparent);
}
@media (hover: hover) {
  .offre:has(.offre-marque):hover { border-color: rgba(140,210,255,.6); box-shadow: 0 44px 90px -40px rgba(40,120,255,.75), 0 0 60px -24px rgba(110,195,255,.5); }
}
.offre:has(.offre-marque) .offre-prix { text-shadow: 0 0 36px rgba(110,195,255,.35); }
.offre:has(.offre-marque) .offre-detail { color: var(--accent-2); border-bottom-color: rgba(110,195,255,.2); }
.offre-marque {
  position: absolute; top: 0; left: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  font: 600 .84rem/1 var(--sans); letter-spacing: .005em; text-transform: none;
  color: var(--accent-2); background: #0c1525; border: 1px solid rgba(110,195,255,.5);
  box-shadow: 0 0 26px -6px rgba(110,195,255,.6);
}
.offre-marque::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.offre:has(.offre-marque) .primaire {
  color: var(--noir); background: var(--texte); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 32px -12px rgba(110,195,255,.55);
}
.offre:has(.offre-marque) .primaire::after {
  content: ""; position: absolute; inset: 0; z-index: -1; animation: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.95) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.offre:has(.offre-marque) .primaire:hover:not(:disabled) {
  background: var(--texte); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 44px -14px rgba(110,195,255,.75);
}
.offre:has(.offre-marque) .primaire:hover:not(:disabled)::after { transform: translateX(130%); }

/* ── en une seule colonne mais assez large : la carte se couche ──
   L'intitulé, le prix et le détail à gauche, le bouton à droite. Vaut pour
   l'abonnement partout, et pour les lots tant qu'ils ne tiennent pas à trois. */
@media (min-width: 960px) {
  .grille-abonnement .offre {
    display: grid; grid-template-columns: auto 1fr minmax(220px, 280px); column-gap: 18px; align-items: end;
    padding: 34px 36px;
  }
  .grille-abonnement .offre h3 { grid-column: 1 / span 2; grid-row: 1; }
  .grille-abonnement .offre-prix { grid-column: 1; grid-row: 2; }
  /* « par mois, résiliable… » se lit à la suite du prix, sur la même ligne. */
  .grille-abonnement .offre-detail { grid-column: 2; grid-row: 2; margin: 0 0 3px; padding: 0; border: 0; max-width: 24em; }
  .grille-abonnement .offre button { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0 0 0 22px; width: auto; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .grille-offres .offre {
    display: grid; grid-template-columns: 1fr minmax(200px, 260px); column-gap: 36px; align-items: center;
    padding: 34px 32px;
  }
  .grille-offres .offre > * { grid-column: 1; }
  .grille-offres .offre-detail { margin: 12px 0 0; padding: 0; border: 0; }
  .grille-offres .offre button { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .grille-offres .offre-marque { left: 32px; transform: translateY(-50%); }
}
/* Au téléphone, trois cartes l'une sous l'autre : on resserre sans rien retirer. */
@media (max-width: 639px) {
  .grille-offres { gap: 26px; }
  .offre { padding: 30px 22px 22px; }
  .offre-prix { margin-top: 14px; }
  .offre-detail { margin: 10px 0 20px; padding-bottom: 20px; }
}

/* ── sous les offres : la note de paiement et, pour un abonné, la résiliation ── */
.offres-pied { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; text-align: center; }
#note-paiement {
  margin: 0; padding: 0; max-width: 58ch;
  font-size: .98rem; line-height: 1.6; color: var(--texte-3);
}
#note-paiement:empty { display: none; }
#note-paiement.erreur { color: var(--corail); }
#gerer-abonnement {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 12px; border: 1px solid var(--ligne-2); background: rgba(255,255,255,.03);
  font: 600 .98rem/1.2 var(--sans); color: var(--texte); text-decoration: none; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
#gerer-abonnement:hover:not(:disabled) { background: rgba(255,255,255,.07); border-color: rgba(200,215,255,.32); }
#gerer-abonnement:disabled { opacity: .6; cursor: progress; }
/* app.js ne le révèle qu'aux abonnés : le `display` ci-dessus ne doit pas l'emporter sur `hidden`. */
#gerer-abonnement[hidden] { display: none; }

/* ═══════════════ CE QUI EST COMPRIS ═══════════════ */
.compris { margin-top: 90px; padding: 90px 0 110px; border-top: 1px solid var(--ligne); }
.compris-grille { display: grid; gap: 44px; }
.compris-entete { max-width: 560px; margin: 0; }
.compris-entete h2 { font-size: clamp(2.1rem, 1rem + 3.2vw, 3.6rem); }
@media (min-width: 1000px) {
  .compris { margin-top: 110px; padding: 130px 0 140px; }
  .compris-grille { grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
  .compris-entete { position: sticky; top: 130px; }
}
.liste-compris { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--ligne); line-height: 1.55; color: var(--texte-2); }
.liste-compris li {
  position: relative; padding: 22px 0 22px 50px; border-bottom: 1px solid var(--ligne);
  font-size: 1.06rem; text-wrap: pretty;
}
/* La coche : un carré de verre bleuté, comme les pictogrammes de l'accueil. */
.liste-compris li::before {
  content: ""; position: absolute; left: 0; top: 21px; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid rgba(110,195,255,.22);
  background: rgba(110,195,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.4 2.9 2.9 5.9-6.6' fill='none' stroke='%23a6dbff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.liste-compris strong { color: var(--texte); font-weight: 600; }
.liste-compris li:nth-child(2) { --delai: .04s; } .liste-compris li:nth-child(3) { --delai: .08s; }

/* ═══════════════ SI C'EST DÉJÀ ALLÉ TROP LOIN ═══════════════
   section.colonne.aide, hors de <main>, commune aux tarifs et à la 404.
   Un panneau de verre, comme « Analysez vos doutes » sur l'accueil. */
.aide.colonne {
  position: relative; z-index: auto; isolation: isolate; overflow: hidden;
  width: calc(100% - 32px); max-width: 1168px; margin: 0 auto 100px; padding: 44px 22px 36px;
  border-radius: 26px; border: 1px solid var(--ligne-2);
  background: linear-gradient(160deg, rgba(110,195,255,.06), rgba(255,255,255,.014) 48%, rgba(255,122,89,.035)), var(--nuit-3);
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.aide.colonne::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px circle at 96% -14%, rgba(110,195,255,.16), transparent 60%);
}
@media (max-width: 519px) { .aide.colonne { width: calc(100% - 24px); padding: 40px 18px 32px; } }
@media (min-width: 760px) { .aide.colonne { width: calc(100% - 72px); padding: 60px 48px 50px; border-radius: 28px; } }
@media (min-width: 1100px) { .aide.colonne { padding: 76px 72px 60px; margin-bottom: 120px; } }

.aide .titre-section {
  display: block; margin: 0 0 34px; max-width: 16em;
  font: 700 clamp(1.95rem, 1.1rem + 2.6vw, 3.1rem)/1.04 var(--sans); letter-spacing: -.04em;
  text-transform: none; color: var(--texte); text-wrap: balance;
}
/* Le seul trait corail de la page : c'est la section des urgences. */
.aide .titre-section::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 24px; border-radius: 2px; background: var(--corail); }
.aide .titre-section::after { content: none; }

/* Les deux chiffres : grands, sans cadre, séparés par des filets. */
.aide .chiffres { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 40px; border-top: 1px solid var(--ligne); }
.aide .chiffre {
  display: grid; gap: 12px; align-content: start; padding: 28px 0;
  background: none; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0;
}
.aide .chiffre b {
  display: block; margin: 0; font: 700 clamp(2.8rem, 1.9rem + 3vw, 4.4rem)/1 var(--sans);
  letter-spacing: -.05em; color: var(--texte); font-variant-numeric: tabular-nums;
}
.aide .chiffre span { font-size: 1.02rem; line-height: 1.55; color: var(--texte-2); max-width: 30em; text-wrap: pretty; }
@media (min-width: 760px) {
  .aide .chiffres { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}

/* Les quatre recours : des cartes de verre, en deux colonnes dès qu'il y a la place
   (à quatre, « Cybermalveillance.gouv.fr » ne tiendrait plus sur sa ligne). */
.aide .recours { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .aide .recours { grid-template-columns: 1fr 1fr; } }
.aide .recours-carte {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 22px; border-radius: 18px; color: inherit; text-decoration: none;
  border: 1px solid var(--ligne);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), background-color .5s;
}
.aide .recours-carte b {
  display: block; margin: 0; padding-right: 36px;
  font: 700 1.16rem/1.25 var(--sans); letter-spacing: -.015em; color: var(--texte);
  overflow-wrap: anywhere; transition: color .3s;
}
.aide .recours-carte span { font-size: .98rem; line-height: 1.55; color: var(--texte-2); text-wrap: pretty; }
@media (max-width: 519px) {
  .aide .recours-carte { padding: 22px 18px 20px; }
  .aide .recours-carte b { font-size: 1.08rem; padding-right: 34px; }
  .aide .recours-carte::after { top: 18px; right: 14px; }
}
/* Un pictogramme dit où mène la carte : un site (flèche) ou un appel (combiné). */
.aide .recours-carte::after {
  content: ""; position: absolute; top: 20px; right: 18px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--ligne-2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11 11 5M6.2 5H11v4.8' fill='none' stroke='%23a6dbff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
}
.aide .recours-carte[href^="tel:"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 2.6h1.9l1 2.5-1.3 1a7.2 7.2 0 0 0 2.9 2.9l1-1.3 2.5 1v1.9c0 .7-.6 1.3-1.3 1.3A10.4 10.4 0 0 1 4.1 3.9c0-.7.6-1.3 1.3-1.3Z' fill='none' stroke='%23a6dbff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (hover: hover) {
  .aide .recours-carte:hover { transform: translateY(-4px); border-color: rgba(140,200,255,.3); box-shadow: 0 30px 56px -30px rgba(0,0,0,.85), 0 0 44px -22px rgba(110,195,255,.4); }
  .aide .recours-carte:hover b { color: var(--accent-2); }
  .aide .recours-carte:hover::after { transform: translate(2px, -2px); background-color: rgba(110,195,255,.12); border-color: rgba(110,195,255,.4); }
}

/* Le premier réflexe : l'avertissement de la page, en corail discret. */
.aide .premier-reflexe {
  position: relative; margin: 36px 0 0; padding: 22px 24px 22px 62px; border-radius: 18px;
  border: 1px solid rgba(255,122,89,.3); border-left-width: 1px;
  background: linear-gradient(135deg, rgba(255,122,89,.10), rgba(255,122,89,.025) 70%);
  font-size: 1.02rem; line-height: 1.6; color: var(--texte-2);
}
.aide .premier-reflexe::before {
  content: ""; position: absolute; left: 22px; top: 23px; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23ff7a59' stroke-width='1.4'/%3E%3Cpath d='M8 4.7v3.9M8 11.2h.01' fill='none' stroke='%23ff7a59' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.aide .premier-reflexe strong { color: #ffd9cf; font-weight: 600; }
@media (max-width: 519px) { .aide .premier-reflexe { padding: 60px 20px 20px; } .aide .premier-reflexe::before { left: 20px; top: 22px; } }

.aide .sources { margin: 26px 0 0; max-width: 72em; font-size: .92rem; line-height: 1.7; color: var(--texte-3); }
.aide .sources a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ligne-2); transition: color .3s; }
.aide .sources a:hover { color: var(--texte); text-decoration-color: currentColor; }

/* ═══════════════ LA PAGE 404 ═══════════════ */
.introuvable { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 90px; }
.introuvable::before {
  content: ""; position: absolute; inset: -140px 0 0; z-index: -2; pointer-events: none;
  background: radial-gradient(52% 60% at 74% 34%, rgba(60,120,255,.18), rgba(60,120,255,.04) 58%, transparent 76%);
}
/* Le grand « 404 » en filigrane : un contour à peine éclairé, derrière le texte. */
.introuvable-fond {
  position: absolute; z-index: -1; right: -4%; top: 50%; transform: translateY(-50%); margin: 0;
  pointer-events: none; user-select: none; white-space: nowrap;
  font: 700 clamp(9rem, 4rem + 26vw, 30rem)/.8 var(--sans); letter-spacing: -.07em;
  color: rgba(166,219,255,.035); -webkit-text-stroke: 1px rgba(166,219,255,.13);
}
.introuvable-cadre { position: relative; }
.introuvable-cadre > * { max-width: 760px; }
.introuvable h1 { margin: 0; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1; letter-spacing: -.048em; }
.introuvable .entete-texte { margin: 26px 0 0; max-width: 34em; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.6; }
.introuvable-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.suggestions { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ligne); }
.suggestions p { margin: 0 0 14px; font-size: .98rem; color: var(--texte-3); }
.suggestions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.suggestions a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: .98rem; font-weight: 500; color: var(--texte-2); text-decoration: none;
  border: 1px solid var(--ligne-2); background: rgba(255,255,255,.025);
  transition: color .3s, border-color .3s, background-color .3s;
}
.suggestions a:hover { color: var(--texte); border-color: rgba(110,195,255,.45); background: rgba(110,195,255,.08); }
@media (max-width: 759px) {
  .introuvable-fond { top: 30px; right: -6%; transform: none; }
}
@media (min-width: 1000px) { .introuvable { padding: 96px 0 130px; } }

/* ═══════════════ MOINS DE MOUVEMENT ═══════════════
   style.css coupe toutes les animations (`animation: none !important`) : sans ceci,
   les blocs qui entrent par `.monte` resteraient invisibles. */
@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; animation: none; }
  .offre, .aide .recours-carte { transition: none; }
  .offre:hover, .aide .recours-carte:hover { transform: none; }
}